[WIP] Add column align property to Table component

docs/guide/versioning.md

@@ -121,7 +121,7 @@ XiHan.UI 的公开面横跨五种介质：替换自带皮肤、手写 Light DOM
 
 ## 三、`data-*` 状态属性
 
-`connect` 一共产出 308 个不同的 `data-*` 属性名、1977 条「组件 × 属性」配对。分两类。
+`connect` 一共产出 308 个不同的 `data-*` 属性名、1978 条「组件 × 属性」配对。分两类。
 
 ### 受约束
 
@@ -133,7 +133,7 @@ XiHan.UI 的公开面横跨五种介质：替换自带皮肤、手写 Light DOM
 | `data-name` | 表单字段名（`form`） |
 | `data-index` | 条目序号（0 基） |
 
-样式钩子。自带皮肤消费了 255 个属性名 / 1122 条「皮肤 × 属性」配对（不含解剖的 `data-scope` / `data-part`），第三方皮肤参照的就是这一组：
+样式钩子。自带皮肤消费了 255 个属性名 / 1123 条「皮肤 × 属性」配对（不含解剖的 `data-scope` / `data-part`），第三方皮肤参照的就是这一组：
 
 | 属性 | 选中它的皮肤份数 |
 | --- | --- |

ui/.changeset/table-column-align.md

@@ -0,0 +1,6 @@
+---
+'@xihan-ui/headless': minor
+'@xihan-ui/styles': minor
+---
+
+Table Column 新增 `align` 属性，支持 `'start' | 'center' | 'end'` 三档对齐，写入列头（`column-header`）与数据格（`cell`）的 `data-align`，皮肤按此调整 `text-align` 与 `justify-content`。

ui/packages/design/styles/css/table.css

@@ -307,6 +307,23 @@
     user-select: none;
   }
 
+  /* 列对齐：data-align 控制列头与数据格的文本与内容对齐方向；
+     显式写出三档以便 start 能重置自定义皮肤里可能存在的非默认对齐 */
+  [data-scope='table']:is([data-part='column-header'], [data-part='cell'])[data-align='start'] {
+    text-align: start;
+    justify-content: start;
+  }
+
+  [data-scope='table']:is([data-part='column-header'], [data-part='cell'])[data-align='center'] {
+    text-align: center;
+    justify-content: center;
+  }
+
+  [data-scope='table']:is([data-part='column-header'], [data-part='cell'])[data-align='end'] {
+    text-align: end;
+    justify-content: end;
+  }
+
   /* 列名是列头里唯一可收窄的一格：flex: 1 吃掉余量、把排序钮 / 列宽把手推到行尾，min-inline-size: 0 让它在
      窄列上收得下去并出省略号。列名不能裸写成文本节点：flex 行里的裸文本是匿名 flex item，min-inline-size 取 auto
      （nowrap 文本的 min-content）缩不下去，96px 的列配一串长列名时定尺的把手连同 auto 外边距一起被挤出列头盒、

ui/packages/engine/headless/src/table/table.connect.ts

@@ -1064,6 +1064,7 @@ export function connectTable<T extends PropTypes>(
         // 两个属性都不带位移——被拖的列原地不动，冻结列的吸附才不会被祖先 transform 打死
         'data-dragging': dataAttr(draggingColumn === column.value),
         'data-drop': dropSide(column.value),
+        'data-align': def?.align,
         ...sticky,
         // 列宽由连接层写进内联 inline-size：那条轴归它，皮肤不再声明；吸附偏移与纵向合并的高度与它同住一个 style
         ...(() => {
@@ -1125,6 +1126,7 @@ export function connectTable<T extends PropTypes>(
         // 与表头格同发：指示线要贯穿整张表，只画在列头上会看不出落到哪儿
         'data-dragging': dataAttr(draggingColumn === cell.value),
         'data-drop': dropSide(cell.value),
+        'data-align': def?.align,
         ...sticky,
         ...(Object.keys(sizeStyle).length || Object.keys(spanStyle).length
           ? { style: { ...sticky.style as Record<string, unknown>, ...sizeStyle, ...spanStyle } }

ui/packages/engine/headless/src/table/table.doc.md

@@ -16,6 +16,7 @@
 
 - 排序、选择、展开三套状态各自可受控。
 - 列名放在 `column-label` 里，它是列头里唯一可收窄的一格：列名太长时由它出省略号。排序钮、列宽把手与列拖拽把手都是它的兄弟，不装进它里面。列头是 flex 行，裸写的文本是匿名 flex item、缩不下去，窄列上会把定尺的把手连同外边距一起挤出列头盒，所以不可排序、不可改宽的列也要用它。
+- 列定义中的 `align` 控制该列所有格子（列头与数据格）的内容对齐方向：`start`（默认）、`center`、`end`，对应列头与单元格上的 `data-align` 属性。
 - 排序钮（`sort-trigger`）是列头里独立的定尺图标钮，不包列名：列名留在 `column-label` 上，钮写在列名之后、被推到行尾侧与列宽把手并排；点列头文字不排序，点钮才排序。
 - 选中行铺品牌淡底行面并由行首的勾选方框标记；悬停与按下只换面，行的几何与吸附列不动。
 - 表头吸顶与列吸附、条纹、密度、边框都是开关。

ui/packages/engine/headless/src/table/table.types.ts

@@ -156,6 +156,11 @@ export interface TableColumnDef {
    * 不可拖动的列与冻结列一样是屏障：跨过它落下会把它挤走，而作者已声明该列不动。
    */
   reorderable?: boolean
+  /**
+   * 列内容的对齐方向，写为列头与数据格上的 data-align。
+   * 不提供时由皮肤决定（默认 start）。
+   */
+  align?: 'start' | 'center' | 'end'
 }
 
 /**