diff --git a/docs/plans/2026-03-31-business-table-width-unification.md b/docs/plans/2026-03-31-business-table-width-unification.md new file mode 100644 index 00000000..e9db2e99 --- /dev/null +++ b/docs/plans/2026-03-31-business-table-width-unification.md @@ -0,0 +1,123 @@ +# 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: 人工复查目标** + +确认业务列表/详情表格: +- 横向铺满容器 +- 默认不出现横向滚动条 +- 操作列不挤压主体信息 + diff --git a/frontend/src/components/FaqList.vue b/frontend/src/components/FaqList.vue index 05e533b7..25f8331f 100644 --- a/frontend/src/components/FaqList.vue +++ b/frontend/src/components/FaqList.vue @@ -1,33 +1,33 @@