ccdi/docs/plans/frontend/2026-03-25-results-overview-project-analysis-dialog-frontend-implementation.md

# 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 "补充结果总览项目分析弹窗前端记录"
```