# Project List Reanalyze Confirm Refresh 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/views/ccdiProject/index.vue` 的页面级交互，不下沉确认逻辑到 `ProjectTable.vue`，保持表格组件继续只负责事件透传。实现上先用源码契约测试锁定“先确认、后请求、取消不提交、成功后刷新”的行为，再做最小代码改动，并补实施记录。仓库约定不启用 subagent，执行时直接使用 `superpowers:executing-plans`，且前端直接在当前分支开发。

**Tech Stack:** Vue 2, Element UI, RuoYi `this.$modal`, Node.js 源码契约测试, Markdown 文档

---

## 文件结构与职责

**修改文件**

- `ruoyi-ui/src/views/ccdiProject/index.vue`
  在现有 `handleReAnalyze(row)` 中补确认弹窗，并确保 loading 只在确认后进入，取消确认时直接返回。
- `ruoyi-ui/tests/unit/project-list-reanalyze-flow.test.js`
  追加确认弹窗、取消分支和“确认后再 loading”的源码契约断言。

**新增文件**

- `docs/reports/implementation/2026-03-27-project-list-reanalyze-confirm-refresh-frontend-record.md`
  记录本次前端实施内容、验证命令与结果。

**参考文件**

- `docs/design/2026-03-27-project-list-reanalyze-confirm-refresh-design.md`
- `ruoyi-ui/src/plugins/modal.js`
- `ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue`
- `ruoyi-ui/tests/unit/project-list-reanalyze-api.test.js`

## Task 1: 先锁定“先确认、后提交”的交互契约

**Files:**
- Modify: `ruoyi-ui/tests/unit/project-list-reanalyze-flow.test.js`
- Test: `ruoyi-ui/src/views/ccdiProject/index.vue`
- Review: `ruoyi-ui/src/plugins/modal.js`

- [ ] **Step 1: 在现有流程测试中补目标断言**

在 `ruoyi-ui/tests/unit/project-list-reanalyze-flow.test.js` 中保留现有接口调用、成功提示和刷新断言，再新增以下确认弹窗契约：

```javascript
assert(
  pageSource.includes("await this.$modal.confirm("),
  "重新分析前应先弹出确认框"
);

assert(
  pageSource.includes("确认对项目“${row.projectName}”重新分析吗？重新分析将重新计算项目标签。"),
  "确认弹窗文案应覆盖项目名称和重新计算标签提醒"
);

assert(
  pageSource.includes('confirmError === "cancel"') ||
    pageSource.includes("confirmError === 'cancel'"),
  "取消确认时应直接结束，不继续提交"
);

assert(
  /await this\.\$modal\.confirm\([\s\S]*?this\.\$set\(this\.reAnalyzeLoadingMap,\s*projectKey,\s*true\)/.test(pageSource),
  "只有确认后才允许进入按钮 loading"
);
```

- [ ] **Step 2: 运行测试，确认新契约先失败**

Run:

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

Expected:

- `FAIL`，因为当前代码还没有确认弹窗与取消分支。

## Task 2: 以最小改动补确认弹窗并保留现有刷新链路

**Files:**
- Modify: `ruoyi-ui/src/views/ccdiProject/index.vue`
- Test: `ruoyi-ui/tests/unit/project-list-reanalyze-flow.test.js`
- Test: `ruoyi-ui/tests/unit/project-list-reanalyze-api.test.js`

- [ ] **Step 1: 在请求前加入确认弹窗**

在 `handleReAnalyze(row)` 的重复提交判断后、loading 设置前加入确认逻辑，推荐使用现有全局弹窗能力：

```javascript
try {
  await this.$modal.confirm(
    `确认对项目“${row.projectName}”重新分析吗？重新分析将重新计算项目标签。`
  )
} catch (confirmError) {
  if (confirmError === "cancel" || confirmError === "close") {
    return
  }
  throw confirmError
}
```

- [ ] **Step 2: 保证 loading 只在确认后进入**

保持现有 `reAnalyzeLoadingMap` 结构不变，但将：

```javascript
this.$set(this.reAnalyzeLoadingMap, projectKey, true)
```

放在确认通过之后，避免点击“取消”时按钮闪动为提交态。

- [ ] **Step 3: 保留现有真实接口、成功提示和列表刷新**

确认后仍然沿用当前实现：

```javascript
await rebuildProjectTags({ projectId: row.projectId })
this.$modal.msgSuccess("已开始重新分析")
this.getList()
```

失败分支继续保留：

```javascript
const message = error && error.message ? error.message : "重新分析失败，请稍后重试"
this.$modal.msgError(message)
```

- [ ] **Step 4: 运行前端契约测试确认通过**

Run:

```bash
node ruoyi-ui/tests/unit/project-list-reanalyze-flow.test.js
node ruoyi-ui/tests/unit/project-list-reanalyze-api.test.js
```

Expected:

- 两个测试均 `PASS`

- [ ] **Step 5: 手工检视关键实现没有偏离最短路径**

Run:

```bash
rg -n "handleReAnalyze|\\$modal.confirm|rebuildProjectTags|msgSuccess|getList\\(" ruoyi-ui/src/views/ccdiProject/index.vue
```

Expected:

- 能清晰看到“先 confirm、后请求、成功后刷新”的单链路实现
- 不应新增额外 helper、轮询、局部数据补丁更新

- [ ] **Step 6: 提交前端功能改动**

Run:

```bash
git add ruoyi-ui/src/views/ccdiProject/index.vue ruoyi-ui/tests/unit/project-list-reanalyze-flow.test.js
git commit -m "补充项目列表重新分析确认交互"
```

Expected:

- 提交成功，且提交信息为中文

## Task 3: 补前端实施记录

**Files:**
- Create: `docs/reports/implementation/2026-03-27-project-list-reanalyze-confirm-refresh-frontend-record.md`

- [ ] **Step 1: 新增前端实施记录文档**

记录至少以下内容：

```markdown
# 项目列表重新分析确认刷新前端实施记录

## 本次改动
- 为项目列表“重新分析”按钮增加确认弹窗
- 点击确认后才调用项目标签重打标接口
- 调用成功后继续刷新项目列表和顶部状态统计

## 影响文件
- ruoyi-ui/src/views/ccdiProject/index.vue
- ruoyi-ui/tests/unit/project-list-reanalyze-flow.test.js

## 验证
- node ruoyi-ui/tests/unit/project-list-reanalyze-flow.test.js
- node ruoyi-ui/tests/unit/project-list-reanalyze-api.test.js
```

- [ ] **Step 2: 复核暂存区只包含本次前端相关文件**

Run:

```bash
git status --short
```

Expected:

- 暂存区仅包含本任务相关源码、测试和实施记录
- 若出现无关文件已暂存，先移出暂存区

- [ ] **Step 3: 提交前端实施记录**

Run:

```bash
git add docs/reports/implementation/2026-03-27-project-list-reanalyze-confirm-refresh-frontend-record.md
git commit -m "补充项目列表重新分析前端实施记录"
```

Expected:

- 提交成功，且不夹带无关文件

## Done When

- 点击项目列表“重新分析”时会先出现确认弹窗
- 用户取消确认时不会发请求、不会进入 loading
- 用户确认后仍然调用现有 `/ccdi/project/tags/rebuild`
- 成功提示仍为“已开始重新分析”，且会刷新列表和状态统计
- 已补齐前端源码契约测试与实施记录