ccdi/docs/plans/frontend/2026-03-27-project-list-reanalyze-confirm-refresh-frontend-implementation.md

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 中保留现有接口调用、成功提示和刷新断言，再新增以下确认弹窗契约：

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:

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 设置前加入确认逻辑，推荐使用现有全局弹窗能力：

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

• Step 2: 保证 loading 只在确认后进入

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

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

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

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

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

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

失败分支继续保留：

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

• Step 4: 运行前端契约测试确认通过

Run:

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:

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

Expected:

• 能清晰看到“先 confirm、后请求、成功后刷新”的单链路实现

• 不应新增额外 helper、轮询、局部数据补丁更新

• Step 6: 提交前端功能改动

Run:

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: 新增前端实施记录文档

记录至少以下内容：

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

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

## 影响文件
- 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:

git status --short

Expected:

• 暂存区仅包含本任务相关源码、测试和实施记录

• 若出现无关文件已暂存，先移出暂存区

• Step 3: 提交前端实施记录

Run:

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
• 成功提示仍为“已开始重新分析”，且会刷新列表和状态统计
• 已补齐前端源码契约测试与实施记录