From be0fed18fcd021f9df5d054135ff26045cc482e2 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 1 Oct 2026 04:37:56 +0000 Subject: [PATCH 1/4] Initial plan From e48b5e66188fe9bcc56b4cd679bc65cbc9c126b9 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 1 Oct 2026 04:42:59 +0000 Subject: [PATCH 2/4] Apply remaining changes Co-authored-by: zhaifanhua <106963561+zhaifanhua@users.noreply.github.com> --- ui/packages/design/styles/css/table.css | 17 +++++++++++++++++ .../engine/headless/src/table/table.connect.ts | 2 ++ .../engine/headless/src/table/table.doc.md | 1 + .../engine/headless/src/table/table.types.ts | 5 +++++ 4 files changed, 25 insertions(+) diff --git a/ui/packages/design/styles/css/table.css b/ui/packages/design/styles/css/table.css index fa3646ab50..abefe7ee57 100644 --- a/ui/packages/design/styles/css/table.css +++ b/ui/packages/design/styles/css/table.css @@ -307,6 +307,23 @@ user-select: none; } + /* 列对齐：data-align 控制列头与数据格的文本对齐方向；数据格同时调整 justify-content 以对齐块级内容 */ + [data-scope='table']:is([data-part='column-header'], [data-part='cell'])[data-align='center'] { + text-align: center; + } + + [data-scope='table']:is([data-part='column-header'], [data-part='cell'])[data-align='end'] { + text-align: end; + } + + [data-scope='table'][data-part='cell'][data-align='center'] { + justify-content: center; + } + + [data-scope='table'][data-part='cell'][data-align='end'] { + justify-content: flex-end; + } + /* 列名是列头里唯一可收窄的一格：flex: 1 吃掉余量、把排序钮 / 列宽把手推到行尾，min-inline-size: 0 让它在 窄列上收得下去并出省略号。列名不能裸写成文本节点：flex 行里的裸文本是匿名 flex item，min-inline-size 取 auto （nowrap 文本的 min-content）缩不下去，96px 的列配一串长列名时定尺的把手连同 auto 外边距一起被挤出列头盒、 diff --git a/ui/packages/engine/headless/src/table/table.connect.ts b/ui/packages/engine/headless/src/table/table.connect.ts index f0fbe5da2c..de4a35d30c 100644 --- a/ui/packages/engine/headless/src/table/table.connect.ts +++ b/ui/packages/engine/headless/src/table/table.connect.ts @@ -1064,6 +1064,7 @@ export function connectTable( // 两个属性都不带位移——被拖的列原地不动，冻结列的吸附才不会被祖先 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( // 与表头格同发：指示线要贯穿整张表，只画在列头上会看不出落到哪儿 '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, ...sizeStyle, ...spanStyle } } diff --git a/ui/packages/engine/headless/src/table/table.doc.md b/ui/packages/engine/headless/src/table/table.doc.md index 9690f9a820..f4c9376472 100644 --- a/ui/packages/engine/headless/src/table/table.doc.md +++ b/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` 上，钮写在列名之后、被推到行尾侧与列宽把手并排；点列头文字不排序，点钮才排序。 - 选中行铺品牌淡底行面并由行首的勾选方框标记；悬停与按下只换面，行的几何与吸附列不动。 - 表头吸顶与列吸附、条纹、密度、边框都是开关。 diff --git a/ui/packages/engine/headless/src/table/table.types.ts b/ui/packages/engine/headless/src/table/table.types.ts index bed18f44a5..ef838db063 100644 --- a/ui/packages/engine/headless/src/table/table.types.ts +++ b/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' } /** From 7710972389de89c007dcf841fb0e0a77293aec64 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 1 Oct 2026 04:49:56 +0000 Subject: [PATCH 3/4] =?UTF-8?q?feat(table):=20=E6=96=B0=E5=A2=9E=20Column?= =?UTF-8?q?=20align=20=E5=B1=9E=E6=80=A7=E6=94=AF=E6=8C=81=E5=88=97?= =?UTF-8?q?=E5=B1=85=E5=B7=A6=E3=80=81=E4=B8=AD=E3=80=81=E5=8F=B3=E5=AF=B9?= =?UTF-8?q?=E9=BD=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: zhaifanhua <106963561+zhaifanhua@users.noreply.github.com> --- docs/guide/versioning.md | 4 ++-- ui/.changeset/table-column-align.md | 6 ++++++ 2 files changed, 8 insertions(+), 2 deletions(-) create mode 100644 ui/.changeset/table-column-align.md diff --git a/docs/guide/versioning.md b/docs/guide/versioning.md index 6d9bcfa44f..033c636c9c 100644 --- a/docs/guide/versioning.md +++ b/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`），第三方皮肤参照的就是这一组： | 属性 | 选中它的皮肤份数 | | --- | --- | diff --git a/ui/.changeset/table-column-align.md b/ui/.changeset/table-column-align.md new file mode 100644 index 0000000000..faeef0f3f3 --- /dev/null +++ b/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`。 From ba53450de46414f336485175a0fae4ef476b3d03 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 1 Oct 2026 04:52:21 +0000 Subject: [PATCH 4/4] Changes before error encountered Agent-Logs-Url: https://github.com/XiHanFun/XiHan.UI/sessions/92e776df-9cda-4082-a7b3-4b55c670644b Co-authored-by: zhaifanhua <106963561+zhaifanhua@users.noreply.github.com> --- ui/packages/design/styles/css/table.css | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/ui/packages/design/styles/css/table.css b/ui/packages/design/styles/css/table.css index abefe7ee57..2b52735fe0 100644 --- a/ui/packages/design/styles/css/table.css +++ b/ui/packages/design/styles/css/table.css @@ -307,21 +307,21 @@ user-select: none; } - /* 列对齐：data-align 控制列头与数据格的文本对齐方向；数据格同时调整 justify-content 以对齐块级内容 */ + /* 列对齐：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; - } - - [data-scope='table'][data-part='cell'][data-align='center'] { - justify-content: center; - } - - [data-scope='table'][data-part='cell'][data-align='end'] { - justify-content: flex-end; + justify-content: end; } /* 列名是列头里唯一可收窄的一格：flex: 1 吃掉余量、把排序钮 / 列宽把手推到行尾，min-inline-size: 0 让它在