# Results Overview Hit Tag Model Color 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:** 继续沿用结果总览现有组件拆分，不新增页面层级。前端只基于后端返回的 `modelCode/modelName` 和当前 `selectedModelCodes` 计算标签视觉状态；当没有选中模型时，标签默认无色，避免误导。风险人员总览、命中模型涉及人员、流水详情共用同一颜色映射工具方法。

**Tech Stack:** Vue 2, Element UI, Node.js

---

### Task 1: 先锁定前端颜色规则测试

**Files:**
- Modify: `ruoyi-ui/tests/unit/preliminary-check-risk-people-hit-tags.test.js`
- Modify: `ruoyi-ui/tests/unit/preliminary-check-model-table-columns.test.js`
- Modify: `ruoyi-ui/tests/unit/detail-query-hit-tags-list.test.js`

- [ ] **Step 1: Write the failing test**

补充静态断言，锁定以下预期：

- 标签渲染逻辑读取 `tag.modelCode`
- 命中模型涉及人员标签根据选中模型切换 `danger` / `info`
- 流水详情和列表异常标签共用同一颜色判断方法

- [ ] **Step 2: Run test to verify it fails**

Run:

```bash
cd ruoyi-ui
node tests/unit/preliminary-check-risk-people-hit-tags.test.js
node tests/unit/preliminary-check-model-table-columns.test.js
node tests/unit/detail-query-hit-tags-list.test.js
```

Expected:

- `FAIL`
- 原因是当前前端仍按 `riskLevel` 映射颜色

- [ ] **Step 3: Commit the test expectation update**

```bash
git add ruoyi-ui/tests/unit/preliminary-check-risk-people-hit-tags.test.js ruoyi-ui/tests/unit/preliminary-check-model-table-columns.test.js ruoyi-ui/tests/unit/detail-query-hit-tags-list.test.js
git commit -m "锁定结果总览标签模型颜色规则"
```

### Task 2: 实现标签模型颜色映射

**Files:**
- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/RiskPeopleSection.vue`
- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue`
- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/DetailQuery.vue`
- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js`

- [ ] **Step 1: Normalize incoming tag model fields**

在风险人员总览、命中模型人员、流水详情中统一兼容：

- `tag.modelCode`
- `tag.modelName`

mock 数据同步补齐模型字段，避免本地演示与真实接口脱节。

- [ ] **Step 2: Implement color rule**

颜色规则固定为：

- 当前标签 `modelCode` 在已选模型集合中时，标签 `type="danger"`
- 当前标签不在已选模型集合中时，标签 `type="info"`
- 风险人员总览没有模型筛选器时，默认按“未选中”展示为无色

不要继续使用 `riskLevel` 做颜色分流。

- [ ] **Step 3: Run focused frontend tests**

Run:

```bash
cd ruoyi-ui
node tests/unit/preliminary-check-risk-people-hit-tags.test.js
node tests/unit/preliminary-check-model-table-columns.test.js
node tests/unit/detail-query-hit-tags-list.test.js
node tests/unit/preliminary-check-summary-and-people.test.js
```

Expected:

- `PASS`

- [ ] **Step 4: Commit**

```bash
git add ruoyi-ui/src/views/ccdiProject/components/detail/RiskPeopleSection.vue ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue ruoyi-ui/src/views/ccdiProject/components/detail/DetailQuery.vue ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js
git commit -m "调整结果总览标签模型颜色展示"
```

### Task 3: 做结果总览前端回归检查

**Files:**
- Verify: `ruoyi-ui/tests/unit/preliminary-check-model-linkage-flow.test.js`
- Verify: `ruoyi-ui/tests/unit/preliminary-check-summary-and-people.test.js`
- Verify: `ruoyi-ui/tests/unit/project-overview-api.test.js`

- [ ] **Step 1: Run final regression checks**

Run:

```bash
cd ruoyi-ui
node tests/unit/preliminary-check-model-linkage-flow.test.js
node tests/unit/preliminary-check-summary-and-people.test.js
node tests/unit/preliminary-check-risk-people-hit-tags.test.js
node tests/unit/preliminary-check-model-table-columns.test.js
node tests/unit/detail-query-hit-tags-list.test.js
node tests/unit/project-overview-api.test.js
```

Expected:

- `PASS`
- 证明标签联动、页面静态结构和 API 调用都保持稳定

- [ ] **Step 2: Commit**

```bash
git add ruoyi-ui/tests/unit/preliminary-check-model-linkage-flow.test.js ruoyi-ui/tests/unit/preliminary-check-summary-and-people.test.js ruoyi-ui/tests/unit/project-overview-api.test.js
git commit -m "回归验证结果总览标签颜色前端改动"
```
