iter(g09): 新增 descriptions 描述列表组件

packages/skin/ui/src/descriptions.ts

@@ -0,0 +1,21 @@
+import { h } from '@ui-arch/frame';
+import type { DescriptionItem, DescriptionsProps } from './types.js';
+
+/*** 单个描述项：字段名 + 字段值，span 控制跨列（超出列数时按整行处理） ***/
+function cell(item: DescriptionItem, column: number): HTMLElement {
+  const cellEl = h('div', { class: 'ua-desc-item' },
+    h('div', { class: 'ua-desc-label' }, item.label),
+    h('div', { class: 'ua-desc-value' }, item.value));
+  cellEl.style.gridColumn = `span ${Math.min(item.span ?? 1, column)}`; // 跨列不越界
+  return cellEl;
+}
+
+/*** 描述列表：label:value 两栏网格，column 定桌面列数，窄屏由样式表降到单列；bordered 走表格形态 ***/
+export function descriptions(props: DescriptionsProps): HTMLElement {
+  const column = props.column ?? 3;
+  const grid = h('div', { class: `ua-desc ua-desc-${props.size ?? 'md'}${props.bordered ? ' is-bordered' : ''}` },
+    ...props.items.map((item) => cell(item, column)));
+  grid.style.setProperty('--ua-desc-col', String(column)); // 列数交给 CSS 变量，媒体查询可在窄屏覆盖
+  if (!props.title) return grid;
+  return h('div', { class: 'ua-desc-wrap' }, h('div', { class: 'ua-desc-title' }, props.title), grid);
+}

packages/skin/ui/src/index.ts

@@ -30,6 +30,7 @@ export { stepper } from './stepper.js';
 export { rate } from './rate.js';
 export { empty } from './empty.js';
 export { divider } from './divider.js';
+export { descriptions } from './descriptions.js';
 export { timeline } from './timeline.js';
 export { modal } from './modal.js';
 export { drawer } from './drawer.js';

packages/skin/ui/src/types.ts

@@ -372,4 +372,20 @@ export interface TimelineProps {
   pending?: boolean;                  // 末尾追加「进行中」虚线节点，表示流程未结束；缺省 false
 }
 
+/*** 描述项：详情页的「字段名 : 字段值」一行 ***/
+export interface DescriptionItem {
+  label: string;   // 字段名（左栏）
+  value: unknown;  // 字段值（右栏）：字符串 / DOM 节点 / 响应式函数
+  span?: number;   // 占列数；缺省 1，超过 column 时按整行占满
+}
+
+/*** 描述列表入参 ***/
+export interface DescriptionsProps {
+  items: DescriptionItem[];   // 描述项列表，按序铺进网格
+  column?: 1 | 2 | 3 | 4;     // 桌面列数；缺省 3（窄屏自动降为单列）
+  bordered?: boolean;         // 表格形态（带分隔线与底纹）；缺省 false（纯网格）
+  size?: 'sm' | 'md';         // 尺寸档位；缺省 md
+  title?: string;             // 分组标题；缺省不渲染
+}
+
 export type { ColumnDef, RowKey }; // 再导出常用内核类型，方便调用方