iter: d13 dataTable 列对齐与单元格格式化

packages/skin/ui/src/dataTable.ts

@@ -92,7 +92,7 @@ export function dataTable<T extends { id: RowKey }>(props: DataTableProps<T>): H
     h(
       'th',
       {
-        class: () => (col.sortable ? 'ua-sortable' : ''),
+        class: `${col.sortable ? 'ua-sortable' : ''}${col.align ? ` ua-align-${col.align}` : ''}`.trim(),
         onClick: () => col.sortable && table.dispatch({ type: 'toggleSort', key: col.key }),
       },
       col.header ?? col.key,
@@ -117,7 +117,11 @@ export function dataTable<T extends { id: RowKey }>(props: DataTableProps<T>): H
     return rows.map((row, i) => {
       const key = visible().keys[i];
       const selected = sel.includes(key);
-      const cells = props.columns.map((col) => h('td', null, String(table.getCellValue(row, col.key))));
+      const cells = props.columns.map((col) => {
+        const raw = table.getCellValue(row, col.key);
+        const text = col.format ? col.format(raw, row) : String(raw); // format 只产出纯文本，天然免注入
+        return h('td', col.align ? { class: `ua-align-${col.align}` } : null, text);
+      });
       if (selectable) {
         const check = h('input', { type: 'checkbox', class: 'ua-checkbox' }) as HTMLInputElement;
         check.checked = selected;

packages/skin/ui/src/types.ts

@@ -39,10 +39,16 @@ export interface CardProps {
   title?: string; // 标题；缺省不渲染标题行
 }
 
+/*** 皮肤层列定义：内核列定义 + 纯渲染字段（对齐 / 文案格式化），不参与排序筛选语义 ***/
+export interface TableColumn<T = unknown> extends ColumnDef<T> {
+  align?: 'left' | 'center' | 'right';          // 表头与单元格对齐；缺省 left
+  format?: (value: unknown, row: T) => string;  // 单元格文案格式化（返回纯文本，走 textContent 渲染）
+}
+
 /*** 数据表格入参 ***/
 export interface DataTableProps<T> {
-  data: T[];               // 全量行数据，行须含 id 字段作 rowKey
-  columns: ColumnDef<T>[]; // 列定义
+  data: T[];                // 全量行数据，行须含 id 字段作 rowKey
+  columns: TableColumn<T>[]; // 列定义：内核字段 + align / format
   filterKey?: string;      // 工具栏筛选的列；缺省取第一列
   pageSize?: number;       // 每页行数；缺省 5
   selectable?: boolean;    // 是否启用行选择列（含全选三态与已选计数）；缺省 false

packages/skin/ui/ua.manifest.json

@@ -1037,7 +1037,7 @@
             "n": "columns",
             "t": "ColumnDef<T>[]",
             "r": 1,
-            "d": "列定义：{ key, header?, sortable? }"
+            "d": "列定义：内核字段 { key, header?, sortable? } + 皮肤字段 { align?: left|center|right, format?: (value, row) => string }"
           },
           {
             "n": "filterKey",
@@ -1071,6 +1071,7 @@
         "steps": [
           "准备行数据，确保每行有唯一 id（跨页选择与刷新不丢行靠它）",
           "定义 columns：sortable: true 的列表头可点击排序（升 → 降 → 取消循环），标记箭头 ↑↓↕",
+          "列展示细节用皮肤字段：align 控制表头与单元格对齐，format(value, row) 返回纯文本（走 textContent，不需要转义）",
           "selectable: true 开启行选择：表头全选框带 indeterminate 半选态，工具栏显示已选计数",
           "选中行用低视觉比重样式（淡色底 + 弱化文字），选择状态存 rowKey，跨页不丢失",
           "工具栏输入框即筛选，输入即时过滤并回第 1 页；无匹配时显示空状态行",

packages/skin/ui/ui.css

@@ -113,6 +113,13 @@
   width: 36px;
   text-align: center !important;
 }
+/* 列对齐：表头与单元格共用，由列定义的 align 决定 */
+.ua-align-center {
+  text-align: center;
+}
+.ua-align-right {
+  text-align: right;
+}
 .ua-empty-row td {
   text-align: center;
   color: var(--ua-color-text-muted);