ccdi/docs/plans/frontend/2026-03-24-project-archive-frontend-implementation.md

# Project Archive Frontend Implementation Plan

> **For agentic workers:** REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** 让项目管理列表中的“归档”按钮真正触发归档，并让已归档项目在详情页中无法点击“上传数据”“参数配置”页签。

**Architecture:** 前端复用现有 `ruoyi-ui/src/api/ccdiProject.js` 中已预留的归档接口，在列表页 `index.vue` 接入真实异步提交，并收敛 `ArchiveConfirmDialog.vue` 的超范围文案。详情页 `detail.vue` 负责归档态页签禁用和 URL 直达拦截，`UploadData.vue` 与 `ParamConfig.vue` 再补一层归档态禁用保护，确保页面状态和组件行为一致。

**Tech Stack:** Vue 2, Element UI, Axios request wrapper, Node, npm

## 前端验收清单

- 列表页点击“归档”后会调用真实归档接口
- 归档成功后关闭弹窗并刷新列表
- 已归档项目在详情页中“上传数据”“参数配置”页签不可点击
- 直接访问 `?tab=upload` / `?tab=config` 时会自动切到 `overview`
- 归档确认弹窗不再出现删数据、生成 PDF、归档库等超需求文案

---

### Task 1: 先锁定列表页归档动作与弹窗文案契约

**Files:**
- Modify: `ruoyi-ui/tests/unit/project-list-archive-flow.test.js`
- Modify: `ruoyi-ui/src/views/ccdiProject/index.vue`
- Modify: `ruoyi-ui/src/views/ccdiProject/components/ArchiveConfirmDialog.vue`

- [ ] **Step 1: Write the failing source-based test**

新增 `ruoyi-ui/tests/unit/project-list-archive-flow.test.js`，至少锁定以下行为：

```javascript
assert(
  pageSource.includes("await archiveProject(data.projectId)"),
  "确认归档后应调用真实归档接口"
);

assert(
  pageSource.includes("this.$modal.msgSuccess(\"项目归档成功\")") ||
  pageSource.includes("this.$modal.msgSuccess('项目归档成功')"),
  "归档成功后应提示项目归档成功"
);

assert(
  !dialogSource.includes("自动生成项目报告PDF"),
  "归档弹窗不应保留超范围 PDF 文案"
);
```

- [ ] **Step 2: Run test to verify it fails**

Run:

```bash
cd ruoyi-ui
node tests/unit/project-list-archive-flow.test.js
```

Expected:

- `FAIL`
- 原因是当前 `handleConfirmArchive` 仍然只有本地提示，弹窗还保留旧文案

- [ ] **Step 3: Implement the minimal list action and dialog cleanup**

在 `ruoyi-ui/src/views/ccdiProject/index.vue` 中：

1. 从 `@/api/ccdiProject` 引入 `archiveProject`
2. 将 `handleConfirmArchive(data)` 改为真实异步提交：

```javascript
async handleConfirmArchive(data) {
  try {
    await archiveProject(data.projectId)
    this.$modal.msgSuccess("项目归档成功")
    this.archiveDialogVisible = false
    this.currentArchiveProject = null
    this.getList()
  } catch (error) {
    const message = error && error.message ? error.message : "项目归档失败，请稍后重试"
    this.$modal.msgError(message)
  }
}
```

在 `ArchiveConfirmDialog.vue` 中：

- 删除 `deleteData`
- 删除“自动生成项目报告PDF”“归档库”“恢复”“同时删除数据”等文案和交互
- 仅保留“确认后状态变更为已归档”的说明和 loading 提交态

- [ ] **Step 4: Run test to verify it passes**

Run:

```bash
cd ruoyi-ui
node tests/unit/project-list-archive-flow.test.js
```

Expected:

- `PASS`

- [ ] **Step 5: Commit**

```bash
git add ruoyi-ui/src/views/ccdiProject/index.vue ruoyi-ui/src/views/ccdiProject/components/ArchiveConfirmDialog.vue ruoyi-ui/tests/unit/project-list-archive-flow.test.js
git commit -m "实现项目列表归档前端交互"
```

### Task 2: 实现详情页签禁用与 URL 直达拦截

**Files:**
- Modify: `ruoyi-ui/src/views/ccdiProject/detail.vue`
- Modify: `ruoyi-ui/tests/unit/project-detail-archive-tab-lock.test.js`

- [ ] **Step 1: Write the failing detail-page test**

新增 `ruoyi-ui/tests/unit/project-detail-archive-tab-lock.test.js`，锁定以下关键代码痕迹：

```javascript
assert(
  source.includes('index="upload"') && source.includes(':disabled="isArchiveLockedTab(\'upload\')"'),
  "上传数据页签应支持归档态禁用"
);

assert(
  /initActiveTabFromRoute\(\)\s*\{[\s\S]*?this\.resolveAccessibleTab/.test(source),
  "详情页应在路由初始化时校正归档态不可访问页签"
);

assert(
  /handleMenuSelect\(index\)\s*\{[\s\S]*?if\s*\(this\.isArchiveLockedTab\(index\)\)\s*return/.test(source),
  "点击禁用页签时不应切换"
);
```

- [ ] **Step 2: Run test to verify it fails**

Run:

```bash
cd ruoyi-ui
node tests/unit/project-detail-archive-tab-lock.test.js
```

Expected:

- `FAIL`
- 原因是当前详情页还没有归档态页签禁用逻辑

- [ ] **Step 3: Implement the minimal tab lock**

在 `ruoyi-ui/src/views/ccdiProject/detail.vue` 中增加：

```javascript
computed: {
  isProjectArchived() {
    return String(this.projectInfo.projectStatus) === "2";
  }
}
```

以及两个辅助方法：

```javascript
isArchiveLockedTab(tab) {
  return this.isProjectArchived && ["upload", "config"].includes(tab);
},
resolveAccessibleTab(tab) {
  if (this.isArchiveLockedTab(tab)) {
    return "overview";
  }
  return tab;
}
```

并修改：

- `initActiveTabFromRoute()`：先取 tab，再调用 `resolveAccessibleTab(tab)`
- `handleMenuSelect(index)`：若禁用则直接 `return`
- 顶部两个 `el-menu-item`：加 `:disabled="isArchiveLockedTab('upload')"` 和 `:disabled="isArchiveLockedTab('config')"`

- [ ] **Step 4: Run tests to verify the tab lock passes**

Run:

```bash
cd ruoyi-ui
node tests/unit/project-detail-archive-tab-lock.test.js
node tests/unit/project-detail-tagging-polling.test.js
```

Expected:

- 两条测试都 `PASS`
- 说明归档页签禁用未破坏现有打标轮询结构

- [ ] **Step 5: Commit**

```bash
git add ruoyi-ui/src/views/ccdiProject/detail.vue ruoyi-ui/tests/unit/project-detail-archive-tab-lock.test.js
git commit -m "实现项目详情归档页签禁用"
```

### Task 3: 给上传页和参数页补一层归档态保护

**Files:**
- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue`
- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/ParamConfig.vue`
- Modify: `ruoyi-ui/tests/unit/upload-data-disabled-cards.test.js`
- Create: `ruoyi-ui/tests/unit/project-archive-readonly-guard.test.js`

- [ ] **Step 1: Extend the failing tests for archive guard**

在 `upload-data-disabled-cards.test.js` 中补充归档态断言：

```javascript
assert(
  /disabled:\s*this\.isProjectTagging\s*\|\|\s*this\.isProjectArchived/.test(source),
  "流水导入卡片应在项目已归档时同步置灰"
);
```

再新增 `project-archive-readonly-guard.test.js` 锁定：

```javascript
assert(uploadSource.includes('return String(this.projectInfo.projectStatus) === "2"'));
assert(paramSource.includes('return String(this.projectInfo.projectStatus) === "2"'));
assert(paramSource.includes("已归档项目暂不可修改参数"));
```

- [ ] **Step 2: Run tests to verify they fail**

Run:

```bash
cd ruoyi-ui
node tests/unit/upload-data-disabled-cards.test.js
node tests/unit/project-archive-readonly-guard.test.js
```

Expected:

- `FAIL`
- 原因是当前组件只处理“打标中”禁用

- [ ] **Step 3: Implement the minimal archived guard**

在 `UploadData.vue` 中补充：

```javascript
isProjectArchived() {
  return String(this.projectInfo.projectStatus) === "2";
}
```

并把以下禁用逻辑扩展为归档态也成立：

- 顶部“拉取本行信息”“征信导入”
- 流水上传卡片 `disabled`
- 相关上传/拉取方法中的前置 `return`

在 `ParamConfig.vue` 中补充：

```javascript
isProjectArchived() {
  return String(this.projectInfo.projectStatus) === "2";
}
```

并同步修改：

- 顶部提示文案：归档态显示“已归档项目暂不可修改参数”
- 输入框和保存按钮禁用条件改为 `isProjectTagging || isProjectArchived`
- `handleSaveAll()` 中增加归档态前置拦截

- [ ] **Step 4: Run frontend regression tests**

Run:

```bash
cd ruoyi-ui
node tests/unit/project-list-archive-flow.test.js
node tests/unit/project-detail-archive-tab-lock.test.js
node tests/unit/upload-data-disabled-cards.test.js
node tests/unit/project-archive-readonly-guard.test.js
```

Expected:

- 全部 `PASS`

- [ ] **Step 5: Commit**

```bash
git add ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue ruoyi-ui/src/views/ccdiProject/components/detail/ParamConfig.vue ruoyi-ui/tests/unit/upload-data-disabled-cards.test.js ruoyi-ui/tests/unit/project-archive-readonly-guard.test.js
git commit -m "补充项目归档前端只读保护"
```

### Task 4: 沉淀前端实施与验证记录

**Files:**
- Create: `docs/tests/records/2026-03-24-project-archive-frontend-verification.md`
- Create: `docs/reports/implementation/2026-03-24-project-archive-frontend-record.md`

- [ ] **Step 1: Write the verification skeleton**

验证记录至少包含：

```markdown
# 项目归档前端验证记录

## 验证范围
- 列表归档按钮接入真实接口
- 归档确认弹窗文案已收敛
- 详情页上传数据与参数配置页签不可点击
- 归档态下上传页与参数页有组件级保护
```

- [ ] **Step 2: Record exact frontend test commands**

把实际执行命令写入记录：

```bash
cd ruoyi-ui
node tests/unit/project-list-archive-flow.test.js
node tests/unit/project-detail-archive-tab-lock.test.js
node tests/unit/upload-data-disabled-cards.test.js
node tests/unit/project-archive-readonly-guard.test.js
```

Expected:

- 记录通过结果，或失败原因

- [ ] **Step 3: Write the frontend implementation record**

在实施记录中说明：

- 为什么弹窗文案需要收敛
- 为什么页签禁用和 URL 拦截需要同时做
- 为什么组件级归档保护仍要保留
- 本次前端改动覆盖了哪些文件与测试

- [ ] **Step 4: Commit**

```bash
git add docs/tests/records/2026-03-24-project-archive-frontend-verification.md docs/reports/implementation/2026-03-24-project-archive-frontend-record.md
git commit -m "补充项目归档前端实施记录"
```