ctms/docs/plans/2026-03-31-business-table-width-unification.md

Business Table Width Unification Implementation Plan

For Claude: REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.

Goal: 统一用户实际浏览的业务列表/详情表格列宽，使表格横向铺满容器、避免横向滚动，并保持操作列紧凑。

Architecture: 仅处理业务浏览类表格页面，不改管理配置矩阵和计划编辑类表格。通过为目标表格统一启用固定布局、移除大部分硬编码列宽、保留少量操作列宽度，并为长文本列补充溢出提示来实现一致体验。

Tech Stack: Vue 3, Element Plus, Vite, scoped CSS

---

Task 1: 锁定业务表格范围

Files:

• Modify: frontend/src/views/admin/Users.vue
• Modify: frontend/src/views/admin/AdminUserApproval.vue
• Modify: frontend/src/views/admin/AuditLogs.vue
• Modify: frontend/src/views/admin/Projects.vue
• Modify: frontend/src/views/ia/FinanceContracts.vue
• Modify: frontend/src/views/ia/FinanceSpecial.vue
• Modify: frontend/src/views/documents/DocumentList.vue
• Modify: frontend/src/views/ia/SubjectManagement.vue
• Modify: frontend/src/views/ia/RiskIssueSae.vue
• Modify: frontend/src/views/ia/RiskIssuePd.vue
• Modify: frontend/src/views/ia/RiskIssueMonitoringVisits.vue
• Modify: frontend/src/views/ia/ProjectMilestones.vue
• Modify: frontend/src/views/ia/StartupFeasibilityEthics.vue
• Modify: frontend/src/views/ia/StartupMeetingAuth.vue
• Modify: frontend/src/views/ia/KnowledgeNotes.vue
• Modify: frontend/src/views/ia/DrugShipments.vue
• Modify: frontend/src/views/ia/MaterialEquipment.vue
• Modify: frontend/src/views/subjects/SubjectDetail.vue
• Modify: frontend/src/views/fees/ContractFeeDetail.vue
• Modify: frontend/src/views/documents/DocumentDetail.vue
• Modify: frontend/src/views/startup/KickoffDetail.vue
• Modify: frontend/src/components/attachments/AttachmentList.vue
• Modify: frontend/src/components/fees/FeeAttachmentPanel.vue
• Modify: frontend/src/components/FaqList.vue
• Modify: frontend/src/views/workbench/components/CenterSummary.vue

Step 1: 仅保留业务浏览页

明确不修改 frontend/src/views/admin/ProjectDetail.vue 及其各类配置矩阵。

Step 2: 统一策略

• 业务表格统一启用 table-layout="fixed"
• 取消大多数 width / min-width
• 操作列保留较小固定宽度
• 长文本列补 show-overflow-tooltip

Task 2: 改列表页表格

Files:

• Modify: frontend/src/views/admin/Users.vue
• Modify: frontend/src/views/admin/AdminUserApproval.vue
• Modify: frontend/src/views/admin/AuditLogs.vue
• Modify: frontend/src/views/admin/Projects.vue
• Modify: frontend/src/views/ia/FinanceContracts.vue
• Modify: frontend/src/views/ia/FinanceSpecial.vue
• Modify: frontend/src/views/documents/DocumentList.vue
• Modify: frontend/src/views/ia/SubjectManagement.vue
• Modify: frontend/src/views/ia/RiskIssueSae.vue
• Modify: frontend/src/views/ia/RiskIssuePd.vue
• Modify: frontend/src/views/ia/RiskIssueMonitoringVisits.vue
• Modify: frontend/src/views/ia/ProjectMilestones.vue
• Modify: frontend/src/views/ia/StartupFeasibilityEthics.vue
• Modify: frontend/src/views/ia/StartupMeetingAuth.vue
• Modify: frontend/src/views/ia/KnowledgeNotes.vue
• Modify: frontend/src/views/ia/DrugShipments.vue
• Modify: frontend/src/views/ia/MaterialEquipment.vue

Step 1: 为目标表格添加固定布局

在 el-table 上显式加入 table-layout="fixed"，必要时补 fit。

Step 2: 收缩操作列，释放内容列

操作列保留 width="110" 或 width="120"；其余列尽量移除 width / min-width。

Step 3: 为易溢出文本补 tooltip

在标题、备注、描述、对象、变更明细等列使用 show-overflow-tooltip。

Task 3: 改详情页子表和通用表格组件

Files:

• Modify: frontend/src/views/subjects/SubjectDetail.vue
• Modify: frontend/src/views/fees/ContractFeeDetail.vue
• Modify: frontend/src/views/documents/DocumentDetail.vue
• Modify: frontend/src/views/startup/KickoffDetail.vue
• Modify: frontend/src/components/attachments/AttachmentList.vue
• Modify: frontend/src/components/fees/FeeAttachmentPanel.vue
• Modify: frontend/src/components/FaqList.vue
• Modify: frontend/src/views/workbench/components/CenterSummary.vue

Step 1: 对齐详情子表策略

详情子表同样改成固定布局，压缩状态/操作列宽度，文本列使用 tooltip。

Step 2: 通用组件同步

附件表、FAQ 表和中心摘要表也改成同一列宽语言，避免跨页面体验不一致。

Task 4: 验证

Files:

• Test: frontend

Step 1: 运行构建

Run: npm run build

Expected: 构建成功，无 TypeScript / Vue 模板错误。

Step 2: 人工复查目标

确认业务列表/详情表格：

• 横向铺满容器
• 默认不出现横向滚动条
• 操作列不挤压主体信息