实现项目归档功能

docs/reports/implementation/2026-03-24-project-archive-frontend-record.md

@@ -0,0 +1,100 @@
+# 项目归档前端实施记录
+
+## 本次改动概述
+
+本次前端实施围绕三个目标完成：
+
+1. 项目列表“归档”按钮接入真实接口
+2. 归档确认弹窗收敛到本次需求边界
+3. 已归档项目在详情页中锁定“上传数据”“参数配置”，并在子组件中补只读保护
+
+## 改动文件
+
+- `ruoyi-ui/src/views/ccdiProject/index.vue`
+- `ruoyi-ui/src/views/ccdiProject/components/ArchiveConfirmDialog.vue`
+- `ruoyi-ui/src/views/ccdiProject/detail.vue`
+- `ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue`
+- `ruoyi-ui/src/views/ccdiProject/components/detail/ParamConfig.vue`
+- `ruoyi-ui/tests/unit/project-list-archive-flow.test.js`
+- `ruoyi-ui/tests/unit/project-detail-archive-tab-lock.test.js`
+- `ruoyi-ui/tests/unit/project-archive-readonly-guard.test.js`
+- `ruoyi-ui/tests/unit/upload-data-disabled-cards.test.js`
+
+## 实现说明
+
+### 1. 列表页接入真实归档动作
+
+在 `index.vue` 中：
+
+- 引入 `archiveProject`
+- 将 `handleConfirmArchive` 改为真实异步调用
+- 成功后提示“项目归档成功”
+- 关闭弹窗并刷新列表
+- 失败时展示统一失败提示或透传错误消息
+
+### 2. 收敛归档确认弹窗
+
+在 `ArchiveConfirmDialog.vue` 中移除了与本次需求无关的旧内容：
+
+- 自动生成 PDF
+- 归档库查看 / 恢复
+- 同时删除项目相关数据
+
+保留为纯确认弹窗，只表达：
+
+- 确认归档项目
+- 归档后上传数据和参数配置页签不可点击
+- 项目进入只读查看状态
+
+### 3. 详情页禁用归档态页签
+
+在 `detail.vue` 中新增：
+
+- `isProjectArchived`
+- `isArchiveLockedTab(tab)`
+- `resolveAccessibleTab(tab)`
+
+并将其应用到：
+
+- 顶部“上传数据”“参数配置”页签的 `disabled`
+- `initActiveTabFromRoute()` 的路由初始化校正
+- `handleMenuSelect()` 的点击拦截
+- 项目状态变化后的当前页签校正
+
+### 4. 子组件增加归档态只读保护
+
+虽然页签已经不可点，但仍在子组件内补了一层保护，避免未来从其他入口复用组件时绕过限制。
+
+`UploadData.vue`：
+
+- 顶部按钮在归档态下禁用
+- 拉取本行信息、身份证文件解析、批量上传等操作方法在归档态前置返回
+- 流水上传卡片在归档态下置灰
+
+`ParamConfig.vue`：
+
+- 展示“已归档项目暂不可修改参数”提示
+- 输入框和保存按钮在归档态下禁用
+- `handleSaveAll()` 在归档态直接返回
+
+## 为什么这样实现
+
+### 为什么弹窗文案必须收敛
+
+弹窗文案必须和真实业务动作一致，否则会出现“页面承诺了删数据 / 生成 PDF / 归档库，但实际没做”的偏差，容易造成误解。
+
+### 为什么页签禁用和 URL 拦截要同时做
+
+只做禁用态还不够，用户仍可通过地址栏直接访问 `?tab=upload` 或 `?tab=config`。因此必须在路由初始化时同步改写到 `overview`。
+
+### 为什么组件级保护仍要保留
+
+页签锁定解决的是主入口问题，组件级保护解决的是复用和绕过问题。两层一起做，归档态只读限制才稳。
+
+## 结果
+
+本次前端实施后，用户在列表页归档项目后：
+
+- 列表会显示真实归档结果
+- 已归档项目详情页中无法点击“上传数据”“参数配置”
+- 即使访问旧链接，也会自动切到“结果总览”