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