diff --git a/docs/plans/frontend/2026-03-20-results-overview-risk-model-linkage-frontend-implementation.md b/docs/plans/frontend/2026-03-20-results-overview-risk-model-linkage-frontend-implementation.md index 4ed4f710..e96a8539 100644 --- a/docs/plans/frontend/2026-03-20-results-overview-risk-model-linkage-frontend-implementation.md +++ b/docs/plans/frontend/2026-03-20-results-overview-risk-model-linkage-frontend-implementation.md @@ -1,6 +1,6 @@ # Results Overview Risk Model Linkage 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. +> **For agentic workers:** REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan. Steps use checkbox (`- [x]`) syntax for tracking. **Goal:** 将结果总览模型区接入真实接口，支持多卡片联动、任意触发/同时触发切换、员工姓名或工号与部门筛选，以及异常标签展示。 @@ -16,7 +16,7 @@ - Modify: `ruoyi-ui/src/api/ccdi/projectOverview.js` - Test: `ruoyi-ui/tests/unit/preliminary-check-model-api.test.js` -- [ ] **Step 1: Write the failing test** +- [x] **Step 1: Write the failing test** 新增接口静态断言，锁定以下方法与路径： @@ -26,7 +26,7 @@ - `/ccdi/project/overview/risk-models/people` - `matchMode` -- [ ] **Step 2: Run test to verify it fails** +- [x] **Step 2: Run test to verify it fails** Run: @@ -39,7 +39,7 @@ Expected: - `FAIL` -- [ ] **Step 3: Write minimal implementation** +- [x] **Step 3: Write minimal implementation** 在 API 模块中新增： @@ -56,7 +56,7 @@ Expected: - `pageNum` - `pageSize` -- [ ] **Step 4: Run test to verify it passes** +- [x] **Step 4: Run test to verify it passes** Run: @@ -69,7 +69,7 @@ Expected: - `PASS` -- [ ] **Step 5: Commit** +- [x] **Step 5: Commit** ```bash git add ruoyi-ui/src/api/ccdi/projectOverview.js ruoyi-ui/tests/unit/preliminary-check-model-api.test.js @@ -83,7 +83,7 @@ git commit -m "补充结果总览模型区前端接口封装" - Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js` - Test: `ruoyi-ui/tests/unit/preliminary-check-model-data-loading.test.js` -- [ ] **Step 1: Write the failing test** +- [x] **Step 1: Write the failing test** 新增入口页静态断言，要求： @@ -91,7 +91,7 @@ git commit -m "补充结果总览模型区前端接口封装" - 模型区真实数据不再只依赖旧 mock - 页面仍保留 `loading / empty / loaded` 状态结构 -- [ ] **Step 2: Run test to verify it fails** +- [x] **Step 2: Run test to verify it fails** Run: @@ -104,7 +104,7 @@ Expected: - `FAIL` -- [ ] **Step 3: Write minimal implementation** +- [x] **Step 3: Write minimal implementation** 在 `PreliminaryCheck.vue` 中： @@ -113,7 +113,7 @@ Expected: - 清理 `preliminaryCheck.mock.js` 中模型区旧的 `warningTypeOptions`、旧 `filterValues.model` 依赖 - 保留空态 mock 作为兜底展示结构，不新增业务逻辑兜底 -- [ ] **Step 4: Run test to verify it passes** +- [x] **Step 4: Run test to verify it passes** Run: @@ -126,7 +126,7 @@ Expected: - `PASS` -- [ ] **Step 5: Commit** +- [x] **Step 5: Commit** ```bash git add ruoyi-ui/src/views/ccdiProject/components/detail/PreliminaryCheck.vue ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js ruoyi-ui/tests/unit/preliminary-check-model-data-loading.test.js @@ -140,7 +140,7 @@ git commit -m "接入结果总览模型卡片真实数据" - Test: `ruoyi-ui/tests/unit/preliminary-check-model-multiselect.test.js` - Test: `ruoyi-ui/tests/unit/preliminary-check-model-match-mode.test.js` -- [ ] **Step 1: Write the failing test** +- [x] **Step 1: Write the failing test** 新增组件静态/行为断言，锁定： @@ -149,7 +149,7 @@ git commit -m "接入结果总览模型卡片真实数据" - 存在 `matchMode` - 页面出现“任意触发”“同时触发”文案 -- [ ] **Step 2: Run test to verify it fails** +- [x] **Step 2: Run test to verify it fails** Run: @@ -163,7 +163,7 @@ Expected: - `FAIL` -- [ ] **Step 3: Write minimal implementation** +- [x] **Step 3: Write minimal implementation** 在 `RiskModelSection.vue` 中新增状态： @@ -183,7 +183,7 @@ Expected: - 选中多张卡片时允许切换 `ANY / ALL` - 不选卡片或仅选一张时，切换模式不报错，仍按当前接口语义请求 -- [ ] **Step 4: Run test to verify it passes** +- [x] **Step 4: Run test to verify it passes** Run: @@ -197,7 +197,7 @@ Expected: - `PASS` -- [ ] **Step 5: Commit** +- [x] **Step 5: Commit** ```bash git add ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue ruoyi-ui/tests/unit/preliminary-check-model-multiselect.test.js ruoyi-ui/tests/unit/preliminary-check-model-match-mode.test.js @@ -211,7 +211,7 @@ git commit -m "补充结果总览模型卡片联动交互" - Test: `ruoyi-ui/tests/unit/preliminary-check-model-filters.test.js` - Test: `ruoyi-ui/tests/unit/preliminary-check-model-table-columns.test.js` -- [ ] **Step 1: Write the failing test** +- [x] **Step 1: Write the failing test** 锁定以下变更： @@ -224,7 +224,7 @@ git commit -m "补充结果总览模型卡片联动交互" - 新增“工号”列 - 新增“异常标签”列 -- [ ] **Step 2: Run test to verify it fails** +- [x] **Step 2: Run test to verify it fails** Run: @@ -238,7 +238,7 @@ Expected: - `FAIL` -- [ ] **Step 3: Write minimal implementation** +- [x] **Step 3: Write minimal implementation** 在筛选区： @@ -260,7 +260,7 @@ Expected: - `hitTagList` 用 `el-tag` 展示 `ruleName` - 颜色映射复用 `DetailQuery.vue` 风险等级映射方式 -- [ ] **Step 4: Run test to verify it passes** +- [x] **Step 4: Run test to verify it passes** Run: @@ -274,7 +274,7 @@ Expected: - `PASS` -- [ ] **Step 5: Commit** +- [x] **Step 5: Commit** ```bash git add ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue ruoyi-ui/tests/unit/preliminary-check-model-filters.test.js ruoyi-ui/tests/unit/preliminary-check-model-table-columns.test.js @@ -290,7 +290,7 @@ git commit -m "调整结果总览模型区筛选与列表列" - Create: `docs/tests/records/2026-03-20-results-overview-risk-model-linkage-frontend-verification.md` - Create: `docs/reports/implementation/2026-03-20-results-overview-risk-model-linkage-frontend-implementation.md` -- [ ] **Step 1: Write linkage flow assertions** +- [x] **Step 1: Write linkage flow assertions** 覆盖以下联动流： @@ -302,7 +302,7 @@ git commit -m "调整结果总览模型区筛选与列表列" - 全部取消恢复默认 - 关键词 + 部门 + 多卡片叠加 -- [ ] **Step 2: Run final frontend verification** +- [x] **Step 2: Run final frontend verification** Run: @@ -321,7 +321,7 @@ Expected: - `PASS` -- [ ] **Step 3: Write verification and implementation records** +- [x] **Step 3: Write verification and implementation records** 记录： @@ -330,7 +330,7 @@ Expected: - 任意触发 / 同时触发切换 - 关键词、部门、分页联动验证 -- [ ] **Step 4: Commit** +- [x] **Step 4: Commit** ```bash git add ruoyi-ui/tests/unit/preliminary-check-model-and-detail.test.js ruoyi-ui/tests/unit/preliminary-check-model-linkage-flow.test.js docs/plans/frontend/2026-03-20-results-overview-risk-model-linkage-frontend-implementation.md docs/tests/records/2026-03-20-results-overview-risk-model-linkage-frontend-verification.md docs/reports/implementation/2026-03-20-results-overview-risk-model-linkage-frontend-implementation.md diff --git a/docs/reports/implementation/2026-03-20-results-overview-risk-model-linkage-frontend-implementation.md b/docs/reports/implementation/2026-03-20-results-overview-risk-model-linkage-frontend-implementation.md new file mode 100644 index 00000000..4a00ba2d --- /dev/null +++ b/docs/reports/implementation/2026-03-20-results-overview-risk-model-linkage-frontend-implementation.md @@ -0,0 +1,35 @@ +# 结果总览模型区联动筛选前端实施记录 + +## 本次改动 + +- 在 [`projectOverview.js`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/src/api/ccdi/projectOverview.js) 新增 `getOverviewRiskModelCards` 与 `getOverviewRiskModelPeople`，统一封装模型卡片和模型区人员分页接口。 +- 在 [`PreliminaryCheck.vue`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/src/views/ccdiProject/components/detail/PreliminaryCheck.vue) 接入模型卡片真实请求，并把模型区列表查询职责下沉到 [`RiskModelSection.vue`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue)。 +- 在 [`preliminaryCheck.mock.js`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js) 清理旧的模型筛选 mock 依赖，补齐模型卡片归一化逻辑和空态结构。 +- 在 [`RiskModelSection.vue`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue) 实现多卡片选中/取消、`ANY / ALL` 匹配方式、关键词与部门筛选、分页请求、模型摘要和异常标签展示。 +- 新增或更新 [`preliminary-check-model-api.test.js`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/tests/unit/preliminary-check-model-api.test.js)、[`preliminary-check-model-data-loading.test.js`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/tests/unit/preliminary-check-model-data-loading.test.js)、[`preliminary-check-model-multiselect.test.js`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/tests/unit/preliminary-check-model-multiselect.test.js)、[`preliminary-check-model-match-mode.test.js`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/tests/unit/preliminary-check-model-match-mode.test.js)、[`preliminary-check-model-filters.test.js`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/tests/unit/preliminary-check-model-filters.test.js)、[`preliminary-check-model-table-columns.test.js`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/tests/unit/preliminary-check-model-table-columns.test.js)、[`preliminary-check-model-linkage-flow.test.js`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/tests/unit/preliminary-check-model-linkage-flow.test.js) 与 [`preliminary-check-model-and-detail.test.js`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/tests/unit/preliminary-check-model-and-detail.test.js)，覆盖接口、状态、筛选和联动流。 + +## 处理说明 + +- 继续复用现有 `PreliminaryCheck.vue` 作为结果总览页入口，没有新增路由、二级页面或平行容器组件。 +- 模型卡片接口与人员分页接口拆分请求，避免入口页承担过多筛选状态，保持模型区联动逻辑集中在组件内部。 +- 模型卡片支持多选，再次点击可取消；请求参数统一携带 `modelCodes + matchMode + keyword + deptId + pageNum + pageSize`。 +- 模型区人员列表改为展示姓名、工号、身份证号、所属部门、命中模型摘要和异常标签；异常标签复用 [`DetailQuery.vue`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/src/views/ccdiProject/components/detail/DetailQuery.vue) 的风险等级颜色映射。 +- 部门选项复用系统现有的 `deptTreeSelect` 接口，并在前端展开为可筛选下拉项，保持最短路径实现。 + +## 验证情况 + +- 已执行如下定向验证： + +```bash +cd ruoyi-ui +node tests/unit/preliminary-check-model-api.test.js +node tests/unit/preliminary-check-model-data-loading.test.js +node tests/unit/preliminary-check-model-multiselect.test.js +node tests/unit/preliminary-check-model-match-mode.test.js +node tests/unit/preliminary-check-model-filters.test.js +node tests/unit/preliminary-check-model-table-columns.test.js +node tests/unit/preliminary-check-model-linkage-flow.test.js +node tests/unit/preliminary-check-model-and-detail.test.js +``` + +- 总体验证结果：8 个前端单测命令全部通过，0 failure，0 error。 diff --git a/docs/tests/records/2026-03-20-results-overview-risk-model-linkage-frontend-verification.md b/docs/tests/records/2026-03-20-results-overview-risk-model-linkage-frontend-verification.md new file mode 100644 index 00000000..33b19124 --- /dev/null +++ b/docs/tests/records/2026-03-20-results-overview-risk-model-linkage-frontend-verification.md @@ -0,0 +1,44 @@ +# 结果总览模型区联动筛选前端验证记录 + +## 验证范围 + +- 结果总览模型区 API 封装 +- 入口页模型卡片真实数据接入 +- 模型卡片多选与 `ANY / ALL` 触发方式切换 +- 员工姓名或工号、部门、分页联动查询 +- 人员列表工号、模型摘要与异常标签展示 + +## 验证命令 + +```bash +cd ruoyi-ui +node tests/unit/preliminary-check-model-api.test.js +node tests/unit/preliminary-check-model-data-loading.test.js +node tests/unit/preliminary-check-model-multiselect.test.js +node tests/unit/preliminary-check-model-match-mode.test.js +node tests/unit/preliminary-check-model-filters.test.js +node tests/unit/preliminary-check-model-table-columns.test.js +node tests/unit/preliminary-check-model-linkage-flow.test.js +node tests/unit/preliminary-check-model-and-detail.test.js +``` + +## 验证结果 + +- 2026-03-20 执行 `preliminary-check-model-api.test.js` 红灯验证，确认缺少模型卡片与模型人员分页接口封装。 +- 2026-03-20 完成 API 封装后重新执行 `preliminary-check-model-api.test.js`，断言通过。 +- 2026-03-20 执行 `preliminary-check-model-data-loading.test.js` 红灯验证，确认入口页尚未接入模型卡片真实接口且 mock 仍保留旧筛选依赖。 +- 2026-03-20 完成入口页与 mock 改造后重新执行 `preliminary-check-model-data-loading.test.js`，断言通过。 +- 2026-03-20 执行 `preliminary-check-model-multiselect.test.js` 与 `preliminary-check-model-match-mode.test.js` 红灯验证，确认模型区尚未具备多选和 `matchMode` 状态。 +- 2026-03-20 完成模型卡片多选、触发方式与人员列表请求状态改造后，重新执行上述 2 个测试，断言通过。 +- 2026-03-20 执行 `preliminary-check-model-filters.test.js` 与 `preliminary-check-model-table-columns.test.js` 红灯验证，确认模型区筛选条和表格列仍为旧结构。 +- 2026-03-20 完成员工姓名或工号、部门筛选以及工号列、异常标签列改造后，重新执行上述 2 个测试，断言通过。 +- 2026-03-20 新增并执行 `preliminary-check-model-linkage-flow.test.js`，确认默认全部模型、卡片增删、`ANY / ALL` 切换、关键词/部门/分页参数以及重置逻辑均已落到组件状态与请求参数构造中。 +- 2026-03-20 追加执行 `preliminary-check-model-and-detail.test.js`，确认模型区与风险明细区的静态文案断言与当前实现一致。 +- 2026-03-20 执行上述 8 个前端单测命令，总结果全部通过，0 failure，0 error。 + +## 结论 + +- 结果总览模型区前端已切换为真实接口驱动，入口页负责模型卡片数据，模型区组件负责联动查询。 +- 模型区已支持多卡片联动、`任意触发 / 同时触发` 切换，以及姓名或工号、部门、分页组合筛选。 +- 人员列表已展示工号、命中模型摘要和异常标签，并复用风险等级颜色映射。 +- 本轮验证仅执行前端静态单测，未启动额外前后端进程，因此无需执行进程清理。 diff --git a/ruoyi-ui/tests/unit/preliminary-check-model-and-detail.test.js b/ruoyi-ui/tests/unit/preliminary-check-model-and-detail.test.js index 63b4522e..65b60790 100644 --- a/ruoyi-ui/tests/unit/preliminary-check-model-and-detail.test.js +++ b/ruoyi-ui/tests/unit/preliminary-check-model-and-detail.test.js @@ -17,7 +17,7 @@ const detail = fs.readFileSync( "utf8" ); -["模型预警次数统计", "命中模型涉及人员", "筛查模型", "预警类型"].forEach((token) => +["模型预警次数统计", "命中模型涉及人员", "员工姓名或工号", "异常标签"].forEach((token) => assert(model.includes(token), token) ); ["涉险交易明细", "异常账户人员信息", "查看详情"].forEach((token) => diff --git a/ruoyi-ui/tests/unit/preliminary-check-model-linkage-flow.test.js b/ruoyi-ui/tests/unit/preliminary-check-model-linkage-flow.test.js new file mode 100644 index 00000000..e06397f3 --- /dev/null +++ b/ruoyi-ui/tests/unit/preliminary-check-model-linkage-flow.test.js @@ -0,0 +1,25 @@ +const assert = require("assert"); +const fs = require("fs"); +const path = require("path"); + +const source = fs.readFileSync( + path.resolve( + __dirname, + "../../src/views/ccdiProject/components/detail/RiskModelSection.vue" + ), + "utf8" +); + +[ + 'return "全部模型"', + "this.selectedModelCodes = [...this.selectedModelCodes, modelCode]", + "this.selectedModelCodes = this.selectedModelCodes.filter((item) => item !== modelCode)", + "modelCodes: this.selectedModelCodes", + "matchMode: this.matchMode", + 'this.matchMode = "ANY"', + 'this.keyword = ""', + "this.deptId = undefined", + "this.pageNum = 1", + "keyword: this.keyword", + "deptId: this.deptId", +].forEach((token) => assert(source.includes(token), token));