iter(g164): 描述列表支持竖排与标题操作区

packages/skin/ui/src/descriptions.ts

@@ -10,12 +10,16 @@ function cell(item: DescriptionItem, column: number): HTMLElement {
   return cellEl;
 }
 
-/*** 描述列表：label:value 两栏网格，column 定桌面列数，窄屏由样式表降到单列；bordered 走表格形态 ***/
+/*** 描述列表：label:value 两栏网格，column 定桌面列数，窄屏由样式表降到单列；bordered 走表格形态，layout=vertical 把字段名挪到值上方 ***/
 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' : ''}` },
+  const vertical = props.layout === 'vertical' ? ' is-vertical' : '';
+  const grid = h('div', { class: `ua-desc ua-desc-${props.size ?? 'md'}${props.bordered ? ' is-bordered' : ''}${vertical}` },
     ...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);
+  const head = props.extra // 标题行：给了操作区就左右分栏，否则保持原来的单标题结构
+    ? h('div', { class: 'ua-desc-head' }, h('div', { class: 'ua-desc-title' }, props.title), h('div', { class: 'ua-desc-extra' }, props.extra))
+    : h('div', { class: 'ua-desc-title' }, props.title);
+  return h('div', { class: 'ua-desc-wrap' }, head, grid);
 }

packages/skin/ui/src/types.ts

@@ -445,6 +445,8 @@ export interface DescriptionsProps {
   bordered?: boolean;         // 表格形态（带分隔线与底纹）；缺省 false（纯网格）
   size?: 'sm' | 'md';         // 尺寸档位；缺省 md
   title?: string;             // 分组标题；缺省不渲染
+  layout?: 'horizontal' | 'vertical'; // 字段名位置：horizontal 在值左侧（缺省），vertical 在值上方（窄栏 / 长文本更耐读）
+  extra?: unknown;            // 标题行右侧内容（如刷新按钮、更新时间）；无 title 时忽略
 }
 
 /*** 统计数值入参 ***/