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