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`

**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`

**Step 1: 对齐详情子表策略**

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

**Step 2: 通用组件同步**

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

### Task 4: 验证

**Files:**
- Test: `frontend`

**Step 1: 运行构建**

Run: `npm run build`

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

**Step 2: 人工复查目标**

确认业务列表/详情表格：
- 横向铺满容器
- 默认不出现横向滚动条
- 操作列不挤压主体信息