d0d7458989
- 新增业务部台账、收款记录、业务条线说明及 ledger-shared / vm-shared 公共壳层 - 租赁业务台账：字段计算、宽表交互、标注 PRD 与表头说明修复 - 租赁合同：列表/表单增强、客户资质与审批规则 - 侧栏调整：工作台移至 OneOS 根目录，台账与数据分析分组更新 - 补充 S3 批量发布脚本与弹窗明细表规范 Co-authored-by: Cursor <cursoragent@cursor.com>
41 lines
1.5 KiB
Plaintext
41 lines
1.5 KiB
Plaintext
---
|
||
description: 弹窗/抽屉内 Ant Design Table 列对齐规范；完成含明细列表的弹窗后必须检查
|
||
globs: src/prototypes/**/*.{tsx,jsx,ts,js}
|
||
alwaysApply: false
|
||
---
|
||
|
||
# 弹窗明细表列对齐（防错行）
|
||
|
||
## 适用场景
|
||
|
||
Modal、Drawer 内展示明细列表的 `Table`，尤其启用 `scroll.y` 或 `scroll.x` 时。
|
||
|
||
## 必须遵守
|
||
|
||
1. **Table 属性**
|
||
- `className={LN_MODAL_DETAIL_TABLE_CLASS}`（来自 `src/common/modalDetailTable.ts`）
|
||
- `tableLayout="fixed"`
|
||
- `scroll.x` 使用 `sumColumnScrollX(columns)`，值为各列 `width` 之和（可 +8~16 预留滚动条）
|
||
|
||
2. **列定义**
|
||
- **每一列**都必须设置数字 `width`，禁止仅 `ellipsis: true` 而不设宽度
|
||
- 金额列：`align: 'right'` + `className: 'tabular-nums'`
|
||
- 长文本列：`ellipsis: true` + 明确 `width`
|
||
|
||
3. **样式**
|
||
- 项目已提供 `src/common/modal-detail-table.css`（经 `vehicle-management/style.css` 全局引入）
|
||
- 不要覆盖 `.ant-table-header` / `.ant-table-body` 的 margin 或隐藏 measure-row 的局部 hack，统一用 `ln-modal-detail-table`
|
||
|
||
## 完成前自检
|
||
|
||
实现或修改弹窗明细表后，在浏览器中确认：
|
||
|
||
- [ ] 表头文字与每列首行数据**垂直对齐**（不错行、不整体右偏）
|
||
- [ ] 纵向滚动时表头与表体列宽仍一致
|
||
- [ ] 金额列右对齐、长文本省略号正常
|
||
- [ ] 开发控制台无 `弹窗表格列缺少 width` 警告
|
||
|
||
## 参考实现
|
||
|
||
`src/prototypes/payment-records/components/PaymentKpiDetailModal.tsx`
|