# 项目归档前端实施记录

## 本次改动概述

本次前端实施围绕三个目标完成：

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)`
- `syncRouteTab(tab)`

并将其应用到：

- 顶部“上传数据”“参数配置”页签的 `disabled`
- `initActiveTabFromRoute()` 的路由初始化校正
- `handleMenuSelect()` 的点击拦截
- 项目状态变化后的当前页签校正
- 归档态命中受限页签时将地址栏 `tab` 自动回写为 `overview`

### 4. 子组件增加归档态只读保护

虽然页签已经不可点，但仍在子组件内补了一层保护，避免未来从其他入口复用组件时绕过限制。

`UploadData.vue`：

- 顶部按钮在归档态下禁用
- 拉取本行信息、身份证文件解析、批量上传等操作方法在归档态前置返回
- 流水上传卡片在归档态下置灰

`ParamConfig.vue`：

- 展示“已归档项目暂不可修改参数”提示
- 输入框和保存按钮在归档态下禁用
- `handleSaveAll()` 在归档态直接返回

## 为什么这样实现

### 为什么弹窗文案必须收敛

弹窗文案必须和真实业务动作一致，否则会出现“页面承诺了删数据 / 生成 PDF / 归档库，但实际没做”的偏差，容易造成误解。

### 为什么页签禁用和 URL 拦截要同时做

只做禁用态还不够，用户仍可通过地址栏直接访问 `?tab=upload` 或 `?tab=config`。因此必须在路由初始化时同步改写到 `overview`。

### 为什么组件级保护仍要保留

页签锁定解决的是主入口问题，组件级保护解决的是复用和绕过问题。两层一起做，归档态只读限制才稳。

## 结果

本次前端实施后，用户在列表页归档项目后：

- 列表会显示真实归档结果
- 已归档项目详情页中无法点击“上传数据”“参数配置”
- 即使访问旧链接，也会自动切到“结果总览”
- 地址栏中的受限 `tab` 参数会同步被改写为 `overview`