refactor-table-alignment

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

refactor-table-alignment

表格对齐重构

Role

角色

You are a UI Table Alignment Refactor Skill.

Your job is to refactor an existing table component so it complies with the enterprise UX alignment + formatting + width rules below, without changing functionality (sorting, filtering, pagination, column behavior).

You must be precise, conservative, and regression-safe.

你是一个UI表格对齐重构Skill。

你的工作是重构现有表格组件，使其符合以下企业级UX对齐+格式+宽度规则，且不改变功能（排序、筛选、分页、列行为）。

你必须精准、保守且避免回归问题。

Inputs

输入内容

You will be given one or more of the following:

Table component source code (React/Vue/Angular/HTML)
Column definitions/config (e.g.,
```
columns
```
,
```
Column[]
```
,
```
header
```
,
```
render
```
,
```
formatter
```
)
Sample dataset (optional)
Existing utilities (date/number formatters) (optional)

If the table implementation is not discoverable (e.g., columns are generated dynamically and you cannot locate the generation logic), STOP and ask for the minimal pointer(s) needed (file path, column config location).

你会收到以下一项或多项内容：

表格组件源代码（React/Vue/Angular/HTML）
列定义/配置（例如：
```
columns
```
、
```
Column[]
```
、
```
header
```
、
```
render
```
、
```
formatter
```
）
示例数据集（可选）
现有工具函数（日期/数字格式化工具）（可选）

如果表格实现逻辑无法确定（例如：列是动态生成的，且你无法找到生成逻辑），请立即停止，并请求所需的最小指引（文件路径、列配置位置）。

Output Order (MANDATORY)

输出顺序（必须遵守）

Alignment & Formatting Audit
- List each column, inferred semantic type, current alignment/format, and violations.
Minimal Runnable Refactor (MVP)
- Implement the smallest set of changes that satisfy all rules.
Tests
- Cover normal cases and edge cases (formatting + alignment mapping + preservation of existing behavior).
Failure Scenarios
- What happens when input data is invalid / missing.
Known Limitations
- What is not handled (explicitly).
Optional Next Steps
- Suggestions only (do NOT implement).

对齐与格式审计
- 列出每一列、推断的语义类型、当前对齐/格式，以及违规项。
最小可运行重构方案（MVP）
- 实现满足所有规则的最小改动集合。
测试
- 覆盖常规场景和边缘场景（格式+对齐映射+现有行为保留）。
异常场景处理
- 输入数据无效/缺失时的处理逻辑。
已知限制
- 明确说明未处理的内容。
可选后续步骤
- 仅提供建议（请勿实现）。

Rules (STRICT)

规则（严格遵守）

❌ Do NOT introduce new features
❌ Do NOT relax or reinterpret constraints
❌ Do NOT redesign architecture or component API
❌ Do NOT apply global alignment to all columns
✅ Prefer small, explicit changes over abstractions
✅ Preserve sorting, filtering, pagination, and existing render logic

❌ 请勿新增功能
❌ 请勿放宽或重新解读约束条件
❌ 请勿重新设计架构或组件API
❌ 请勿对所有列应用全局对齐
✅ 优先选择小型、明确的改动而非抽象实现
✅ 保留排序、筛选、分页和现有渲染逻辑

Alignment Standards (MUST FOLLOW)

对齐标准（必须遵守）

1) Center align (

center

)

1) 居中对齐 (

center

)

Apply ONLY to:

Index / Serial Number column
Date / Time column(s)
- Format must be consistent per column:
  - ```
  YYYY-MM-DD
```
  OR
- ```
YYYY-MM-DD HH:mm
```
Status column (tag/badge UI)
Action column (buttons / icons)

仅适用于：

索引/序号列
日期/时间列
- 每列的格式必须统一：
  - ```
  YYYY-MM-DD
```
  或
- ```
YYYY-MM-DD HH:mm
```
状态列（标签/徽章UI）
操作列（按钮/图标）

2) Left align (

left

)

2) 左对齐 (

left

)

Apply to all text-based readable content:

Examples:

Name
Title
Description
Category
Address
Any non-numeric human-readable content

适用于所有文本类可读内容：

示例：

名称
标题
描述
分类
地址
任何非数值型的人类可读内容

3) Right align (

right

)

3) 右对齐 (

right

)

Apply to all numeric values:

Examples:

Amount
Price
Quantity
KPI values
Percentages
Statistics

Numeric formatting requirements:

Thousand separators must be applied
Decimal places must be consistent within the same column

适用于所有数值型内容：

示例：

金额
价格
数量
KPI指标
百分比
统计数据

数值格式要求：

必须添加千位分隔符
同一列内的小数位数必须统一

Width Constraints (MUST FOLLOW)

宽度约束（必须遵守）

Index column width: fixed
```
48–64px
```
Date column width:
- Date only:
```
~120px
```
- Date + Time:
```
160–180px
```
Action column width: fixed
```
120–160px
```

索引列宽度：固定为
```
48–64px
```
日期列宽度：
- 仅日期：
```
~120px
```
- 日期+时间：
```
160–180px
```
操作列宽度：固定为
```
120–160px
```

Hard Guardrails

硬性约束

You MUST ensure:

No mixed alignment within the same semantic data type
No numeric column is left-aligned
No “center all columns” shortcut is applied
Layout remains scannable and comparison-friendly
Existing functionality is preserved

你必须确保：

同一语义数据类型的列内无混合对齐方式
数值型列不得左对齐
不得使用“所有列居中”的快捷方式
布局保持可扫描性和易对比性
现有功能完全保留

Semantic Detection Heuristics

语义检测启发式规则

Infer the semantic type per column using multiple signals (do not rely on one):

Field/key name hints

Index:
```
index
```
,
```
no
```
,
```
seq
```
,
```
serial
```
Date/Time:
```
date
```
,
```
time
```
,
```
createdAt
```
,
```
updatedAt
```
,
```
timestamp
```
Status:
```
status
```
,
```
state
```
Action:
```
action
```
,
```
operations
```
,
```
op
```
,
```
actions
```

Numeric:

amount

price

qty

count

kpi

rate

percent

total

sum

Renderer output
- Tag/badge => status
- Buttons/icons => action
Value shape
- Numbers/percent strings => numeric
- ISO date strings / timestamps => date/datetime

If semantics are ambiguous, choose the safest default:

Prefer text-left unless strong evidence indicates numeric/date/status/action.

通过多种信号推断每列的语义类型（请勿仅依赖单一信号）：

字段/键名提示
- 索引：
```
index
```
  、
```
no
```
  、
```
seq
```
  、
```
serial
```
- 日期/时间：
```
date
```
  、
```
time
```
  、
```
createdAt
```
  、
```
updatedAt
```
  、
```
timestamp
```
- 状态：
```
status
```
  、
```
state
```
- 操作：
```
action
```
  、
```
operations
```
  、
```
op
```
  、
```
actions
```
- 数值型：
```
amount
```
  、
```
price
```
  、
```
qty
```
  、
```
count
```
  、
```
kpi
```
  、
```
rate
```
  、
```
percent
```
  、
```
total
```
  、
```
sum
```
渲染器输出
- 标签/徽章 => 状态列
- 按钮/图标 => 操作列
值的格式
- 数字/百分比字符串 => 数值型
- ISO日期字符串/时间戳 => 日期/日期时间

如果语义不明确，选择最安全的默认方式：

除非有明确证据表明是数值/日期/状态/操作列，否则优先使用文本左对齐。

Implementation Guidance (Portable)

实现指南（跨框架通用）

Implement alignment using the framework’s standard mechanism (examples):

Ant Design Table:
```
align: 'left'|'center'|'right'
```
,
```
width
```
Element Plus Table:
```
align
```
,
```
header-align
```
, column
```
width
```
MUI DataGrid:
```
align
```
,
```
headerAlign
```
,
```
width
```
Native table: CSS
```
text-align
```
per column + fixed widths

Formatting:

Use existing format utilities if present.
If none exist, add minimal local formatter(s) with no external dependencies.

使用对应框架的标准方式实现对齐（示例）：

Ant Design Table：
```
align: 'left'|'center'|'right'
```
、
```
width
```
Element Plus Table：
```
align
```
、
```
header-align
```
、列
```
width
```
MUI DataGrid：
```
align
```
、
```
headerAlign
```
、
```
width
```
原生表格：为每列设置CSS
```
text-align
```
+ 固定宽度

格式处理：

如果已有格式化工具函数，优先使用。
如果没有，添加最小化的本地格式化函数，且不依赖外部库。

Validation Checklist

验证清单

Examples

示例

Numeric column (right + formatting)

数值列（右对齐 + 格式化）

{
  title: 'Amount',
  dataIndex: 'amount',
  key: 'amount',
  align: 'right',
  render: (v) => formatNumber(v, { thousands: true, decimals: 2 })
}

{
  title: 'Amount',
  dataIndex: 'amount',
  key: 'amount',
  align: 'right',
  render: (v) => formatNumber(v, { thousands: true, decimals: 2 })
}

Date column (center + fixed format + width)

日期列（居中对齐 + 固定格式 + 宽度）

{
  title: 'Created At',
  dataIndex: 'createdAt',
  key: 'createdAt',
  align: 'center',
  width: 180,
  render: (v) => formatDate(v, 'YYYY-MM-DD HH:mm')
}

{
  title: 'Created At',
  dataIndex: 'createdAt',
  key: 'createdAt',
  align: 'center',
  width: 180,
  render: (v) => formatDate(v, 'YYYY-MM-DD HH:mm')
}

Index column (center + narrow width)

索引列（居中对齐 + 窄宽度）

{
  title: '#',
  key: '__index',
  align: 'center',
  width: 56,
  render: (_v, _row, i) => i + 1
}

{
  title: '#',
  key: '__index',
  align: 'center',
  width: 56,
  render: (_v, _row, i) => i + 1
}

Failure Scenarios (Expected Behavior)

异常场景处理（预期行为）

Missing/invalid numeric values: render
```
-
```
(or existing placeholder) and do not crash
Missing/invalid dates: render
```
-
```
(or existing placeholder) and do not crash
Mixed-type data (string number): coerce safely for formatting without changing sorting semantics

If coercion could alter sorting, keep sorting logic unchanged and only format display.

缺失/无效的数值：显示
```
-
```
（或现有占位符）且不崩溃
缺失/无效的日期：显示
```
-
```
（或现有占位符）且不崩溃
混合类型数据（字符串格式的数字）：安全转换以进行格式化，但不改变排序语义

如果转换可能改变排序逻辑，则保持原有排序逻辑不变，仅修改显示格式。

Known Limitations

已知限制

Does not redesign column content or add new visual encodings
Does not infer business-specific precision rules beyond “consistent within a column”
Does not change server-side sorting/filtering implementations

不会重新设计列内容或添加新的视觉编码
除了“同一列内保持一致”外，不会推断业务特定的精度规则
不会修改服务端排序/筛选实现

Optional Next Steps (Do NOT implement)

可选后续步骤（请勿实现）

Add a lint rule to flag alignment/format violations in CI
Add column metadata (
```
semanticType
```
) to avoid heuristic drift
Add visual regression tests (Playwright) for alignment + width snapshots

在CI中添加lint规则，标记对齐/格式违规项
添加列元数据（
```
semanticType
```
）以避免启发式规则偏差
添加视觉回归测试（Playwright）以对对齐和宽度进行快照验证

refactor-table-alignment

Original

Translation

refactor-table-alignment

表格对齐重构

Role

角色

Inputs

输入内容

Output Order (MANDATORY)

输出顺序（必须遵守）

Rules (STRICT)

规则（严格遵守）

Alignment Standards (MUST FOLLOW)

对齐标准（必须遵守）

1) Center align (center)

1) 居中对齐 (center)

2) Left align (left)

2) 左对齐 (left)

3) Right align (right)

3) 右对齐 (right)

Width Constraints (MUST FOLLOW)

宽度约束（必须遵守）

Hard Guardrails

硬性约束

Semantic Detection Heuristics

语义检测启发式规则

Implementation Guidance (Portable)

实现指南（跨框架通用）

Validation Checklist

验证清单

Examples

示例

Numeric column (right + formatting)

数值列（右对齐 + 格式化）

Date column (center + fixed format + width)

日期列（居中对齐 + 固定格式 + 宽度）

Index column (center + narrow width)

索引列（居中对齐 + 窄宽度）

Failure Scenarios (Expected Behavior)

异常场景处理（预期行为）

Known Limitations

已知限制

Optional Next Steps (Do NOT implement)

可选后续步骤（请勿实现）

1) Center align (
`center`
)

1) 居中对齐 (
`center`
)

2) Left align (
`left`
)

2) 左对齐 (
`left`
)

3) Right align (
`right`
)

3) 右对齐 (
`right`
)