# Results Overview Project Analysis Dialog 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:** 保持 `PreliminaryCheck.vue` 作为结果总览入口，不新增路由或平行页面。两个列表区块只负责抛出“查看项目”事件，统一由入口页维护弹窗状态并挂载新的 `ProjectAnalysisDialog.vue`。弹窗内按“人物分析侧栏 + 页签工作区”拆分，`异常明细` 作为本轮唯一完整主视图，其余页签只做高保真静态承载，不接新接口。 **Tech Stack:** Vue 2, Element UI, SCSS, Node.js --- ### Task 1: 打通两个入口到统一弹窗状态 **Files:** - Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/PreliminaryCheck.vue` - Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/RiskPeopleSection.vue` - Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue` - Test: `ruoyi-ui/tests/unit/preliminary-check-project-analysis-entry.test.js` - Test: `ruoyi-ui/tests/unit/preliminary-check-project-analysis-source-context.test.js` - [ ] **Step 1: Write the failing test** 新增静态断言，锁定以下边界： - `PreliminaryCheck.vue` 引入 `ProjectAnalysisDialog` - 入口页新增统一弹窗状态，如 `projectAnalysisDialogVisible` - `RiskPeopleSection.vue` 的操作列按钮改为触发查看项目事件 - `RiskModelSection.vue` 的操作列按钮改为触发查看项目事件 - 入口页同时接收“来源区块 + 当前行数据” - [ ] **Step 2: Run test to verify it fails** Run: ```bash cd ruoyi-ui node tests/unit/preliminary-check-project-analysis-entry.test.js node tests/unit/preliminary-check-project-analysis-source-context.test.js ``` Expected: - `FAIL` - [ ] **Step 3: Write minimal implementation** 在 `PreliminaryCheck.vue` 中新增： - 弹窗显示状态 - 当前选中人员对象 - 当前来源标记，建议使用 `riskPeople` / `riskModelPeople` - 打开、关闭、重置页签的统一方法 在两个列表组件中： - 把纯展示型“查看详情”按钮改成 `@click` 事件 - 统一向上抛出当前行数据 - 不在区块内部自行维护弹窗状态 - [ ] **Step 4: Run test to verify it passes** Run: ```bash cd ruoyi-ui node tests/unit/preliminary-check-project-analysis-entry.test.js node tests/unit/preliminary-check-project-analysis-source-context.test.js ``` Expected: - `PASS` - [ ] **Step 5: Commit** ```bash git add ruoyi-ui/src/views/ccdiProject/components/detail/PreliminaryCheck.vue ruoyi-ui/src/views/ccdiProject/components/detail/RiskPeopleSection.vue ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue ruoyi-ui/tests/unit/preliminary-check-project-analysis-entry.test.js ruoyi-ui/tests/unit/preliminary-check-project-analysis-source-context.test.js git commit -m "打通结果总览项目分析弹窗入口" ``` ### Task 2: 搭建统一项目分析弹窗壳子与人物侧栏 **Files:** - Create: `ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue` - Create: `ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue` - Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js` - Test: `ruoyi-ui/tests/unit/project-analysis-dialog-layout.test.js` - Test: `ruoyi-ui/tests/unit/project-analysis-dialog-sidebar.test.js` - Test: `ruoyi-ui/tests/unit/project-analysis-dialog-default-tab.test.js` - [ ] **Step 1: Write the failing test** 新增静态断言，锁定以下内容： - 存在 `ProjectAnalysisDialog.vue` - 弹窗标题为“项目分析” - 默认页签为“异常明细” - 弹窗包含 5 个页签： - 异常明细 - 资产分析 - 征信摘要 - 关系图谱 - 资金流向 - 左侧仅保留“人员基础信息”“命中模型摘要”“排查记录摘要”三组 - [ ] **Step 2: Run test to verify it fails** Run: ```bash cd ruoyi-ui node tests/unit/project-analysis-dialog-layout.test.js node tests/unit/project-analysis-dialog-sidebar.test.js node tests/unit/project-analysis-dialog-default-tab.test.js ``` Expected: - `FAIL` - [ ] **Step 3: Write minimal implementation** 在弹窗壳子中完成： - 大尺寸 `el-dialog` 布局 - 左右分栏结构 - 默认活动页签状态 - 关闭时清空上下文、再次打开回到“异常明细” 在侧栏组件中完成： - 姓名 - 工号 - 部门 - 风险等级 - 所属项目 - 命中模型数/当前命中模型 - 核心异常标签 - 排查记录摘要占位 在 `preliminaryCheck.mock.js` 中补充静态页签与异常明细组装所需 mock 结构，但不要反向污染结果总览已有真实数据映射。 - [ ] **Step 4: Run test to verify it passes** Run: ```bash cd ruoyi-ui node tests/unit/project-analysis-dialog-layout.test.js node tests/unit/project-analysis-dialog-sidebar.test.js node tests/unit/project-analysis-dialog-default-tab.test.js ``` Expected: - `PASS` - [ ] **Step 5: Commit** ```bash git add ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js ruoyi-ui/tests/unit/project-analysis-dialog-layout.test.js ruoyi-ui/tests/unit/project-analysis-dialog-sidebar.test.js ruoyi-ui/tests/unit/project-analysis-dialog-default-tab.test.js git commit -m "搭建结果总览项目分析弹窗骨架" ``` ### Task 3: 实现异常明细主视图与来源上下文强调 **Files:** - Create: `ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisAbnormalTab.vue` - Create: `ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisPlaceholderTab.vue` - Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue` - Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js` - Test: `ruoyi-ui/tests/unit/project-analysis-dialog-abnormal-tab.test.js` - Test: `ruoyi-ui/tests/unit/project-analysis-dialog-source-highlight.test.js` - Test: `ruoyi-ui/tests/unit/project-analysis-dialog-empty-field.test.js` - [ ] **Step 1: Write the failing test** 锁定以下展示和交互： - “异常明细”页签包含主表格区与补充摘要区 - 主表格至少包含： - 交易时间 - 本方账号/主体 - 对方名称/账户 - 摘要/交易类型 - 交易金额 - 标记状态 - 来源于模型命中列表时，顶部摘要或侧栏出现“当前命中模型”强调 - 缺工号、部门、异常标签时以 `-` 或“暂无异常标签”展示 - [ ] **Step 2: Run test to verify it fails** Run: ```bash cd ruoyi-ui node tests/unit/project-analysis-dialog-abnormal-tab.test.js node tests/unit/project-analysis-dialog-source-highlight.test.js node tests/unit/project-analysis-dialog-empty-field.test.js ``` Expected: - `FAIL` - [ ] **Step 3: Write minimal implementation** 在 `ProjectAnalysisAbnormalTab.vue` 中按设计文档完成： - 异常明细主表格 - 频繁转账账户异常摘要块 - 关联交易异常摘要块 在 `ProjectAnalysisDialog.vue` 中： - 把来源区块差异转成顶部摘要和侧栏模型强调 - 其余 4 个页签用 `ProjectAnalysisPlaceholderTab.vue` 统一承载高保真静态内容 - 不伪装成真实接口返回，不增加新的请求逻辑 在 mock 组装逻辑中： - 允许使用当前行数据 + 静态模板拼装主视图 - 缺字段不做额外推导 - [ ] **Step 4: Run test to verify it passes** Run: ```bash cd ruoyi-ui node tests/unit/project-analysis-dialog-abnormal-tab.test.js node tests/unit/project-analysis-dialog-source-highlight.test.js node tests/unit/project-analysis-dialog-empty-field.test.js ``` Expected: - `PASS` - [ ] **Step 5: Commit** ```bash git add ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisAbnormalTab.vue ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisPlaceholderTab.vue ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js ruoyi-ui/tests/unit/project-analysis-dialog-abnormal-tab.test.js ruoyi-ui/tests/unit/project-analysis-dialog-source-highlight.test.js ruoyi-ui/tests/unit/project-analysis-dialog-empty-field.test.js git commit -m "实现结果总览项目分析弹窗主视图" ``` ### Task 4: 做结果总览回归并补充文档记录 **Files:** - Test: `ruoyi-ui/tests/unit/preliminary-check-summary-and-people.test.js` - Test: `ruoyi-ui/tests/unit/preliminary-check-model-linkage-flow.test.js` - Test: `ruoyi-ui/tests/unit/preliminary-check-model-and-detail.test.js` - Test: `ruoyi-ui/tests/unit/project-analysis-dialog-layout.test.js` - Test: `ruoyi-ui/tests/unit/project-analysis-dialog-abnormal-tab.test.js` - Create: `docs/tests/records/2026-03-25-results-overview-project-analysis-dialog-frontend-verification.md` - Create: `docs/reports/implementation/2026-03-25-results-overview-project-analysis-dialog-frontend-implementation.md` - [ ] **Step 1: Run focused regression** Run: ```bash cd ruoyi-ui node tests/unit/preliminary-check-summary-and-people.test.js node tests/unit/preliminary-check-model-linkage-flow.test.js node tests/unit/preliminary-check-model-and-detail.test.js node tests/unit/project-analysis-dialog-layout.test.js node tests/unit/project-analysis-dialog-abnormal-tab.test.js ``` Expected: - 全部 `PASS` - [ ] **Step 2: Manual verification** Run: ```bash cd ruoyi-ui npm run dev ``` 手工检查： - 结果总览页两个入口都能打开同一个弹窗 - 默认页签是“异常明细” - 关闭再打开后页签会重置 - 来源于模型命中列表时存在“当前命中模型”强调 - 常见桌面宽度下布局不塌 结束验证后，主动停止前端进程。 - [ ] **Step 3: Write verification record** 在 `docs/tests/records/2026-03-25-results-overview-project-analysis-dialog-frontend-verification.md` 记录： - 执行命令 - 执行时间 - 结果 - 手工检查结论 - [ ] **Step 4: Write implementation record** 在 `docs/reports/implementation/2026-03-25-results-overview-project-analysis-dialog-frontend-implementation.md` 记录： - 新增弹窗入口链路 - 新增组件与职责 - 主视图内容与静态页签边界 - 验证结果 - [ ] **Step 5: Commit** ```bash git add docs/tests/records/2026-03-25-results-overview-project-analysis-dialog-frontend-verification.md docs/reports/implementation/2026-03-25-results-overview-project-analysis-dialog-frontend-implementation.md git commit -m "补充结果总览项目分析弹窗前端记录" ```