调整风险人员总览核心异常点固定色板

2026-03-23 14:07:33 +08:00
parent ca591ebd3c
commit c23aef0ea0
5 changed files with 260 additions and 16 deletions
--- a/docs/plans/frontend/2026-03-23-risk-people-core-tag-fixed-palette-frontend-implementation.md
+++ b/docs/plans/frontend/2026-03-23-risk-people-core-tag-fixed-palette-frontend-implementation.md
@@ -0,0 +1,137 @@
+# Risk People Core Tag Fixed Palette 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:** 将项目总览页“风险人员总览”中的“核心异常点”改为按当前 10 个固定模型编码绑定颜色展示。
+
+**Architecture:** 仅修改 `RiskPeopleSection.vue` 的核心异常点标签渲染逻辑，不改风险模型区、项目详情页或后端接口。前端基于后端已有的 `riskPointTagList[].modelCode` 维护一份固定的 10 模型色板映射；未映射到颜色的模型回退为无色，避免错绑。
+
+**Tech Stack:** Vue 2, Element UI, Node.js
+
+---
+
+### Task 1: 先锁定固定 10 模型色板测试
+
+**Files:**
+- Modify: `ruoyi-ui/tests/unit/preliminary-check-risk-people-hit-tags.test.js`
+
+- [ ] **Step 1: Write the failing test**
+
+补充静态断言，锁定以下预期：
+
+- `RiskPeopleSection.vue` 内存在固定模型颜色映射常量
+- 色板至少覆盖当前 10 个固定模型编码
+- 核心异常点标签按 `modelCode` 读取固定颜色，不再依赖 `selectedModelCodes`
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run:
+
+```bash
+cd ruoyi-ui
+node tests/unit/preliminary-check-risk-people-hit-tags.test.js
+```
+
+Expected:
+
+- `FAIL`
+- 原因是当前实现仍依赖 `selectedModelCodes` 做颜色判断
+
+- [ ] **Step 3: Commit the failing test**
+
+```bash
+git add ruoyi-ui/tests/unit/preliminary-check-risk-people-hit-tags.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/preliminaryCheck.mock.js`
+
+- [ ] **Step 1: Add fixed palette mapping**
+
+在 `RiskPeopleSection.vue` 中新增固定 `modelCode -> color` 映射，覆盖以下 10 个模型编码：
+
+- `LARGE_TRANSACTION`
+- `ABNORMAL_TRANSACTION`
+- `SUSPICIOUS_GAMBLING`
+- `SUSPICIOUS_RELATION`
+- `SUSPICIOUS_PART_TIME`
+- `SUSPICIOUS_PROPERTY`
+- `SUSPICIOUS_FOREIGN_EXCHANGE`
+- `SUSPICIOUS_INTEREST_PAYMENT`
+- `SUSPICIOUS_PURCHASE`
+- `ABNORMAL_BEHAVIOR`
+
+- [ ] **Step 2: Render tags by fixed palette**
+
+核心异常点标签改为根据 `tag.modelCode` 直接命中固定色板，移除对 `selectedModelCodes` 的依赖。优先使用 Element 内置 `type`，必要时用样式类补足 10 色。
+
+- [ ] **Step 3: Align mock data**
+
+更新 `preliminaryCheck.mock.js` 中的示例 `modelCode`，与真实固定模型编码保持一致，避免 mock 和生产映射脱节。
+
+- [ ] **Step 4: 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-risk-people-binding.test.js
+node tests/unit/preliminary-check-summary-and-people.test.js
+```
+
+Expected:
+
+- `PASS`
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add ruoyi-ui/src/views/ccdiProject/components/detail/RiskPeopleSection.vue ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js
+git commit -m "调整风险人员核心异常点固定模型色板"
+```
+
+### Task 3: 做结果总览相关前端回归并补文档
+
+**Files:**
+- Create: `docs/reports/implementation/2026-03-23-risk-people-core-tag-fixed-palette-implementation.md`
+- Verify: `ruoyi-ui/tests/unit/project-overview-api.test.js`
+- Verify: `ruoyi-ui/tests/unit/preliminary-check-api-integration.test.js`
+
+- [ ] **Step 1: Run final regression checks**
+
+Run:
+
+```bash
+cd ruoyi-ui
+node tests/unit/project-overview-api.test.js
+node tests/unit/preliminary-check-api-integration.test.js
+node tests/unit/preliminary-check-states.test.js
+node tests/unit/preliminary-check-summary-and-people.test.js
+node tests/unit/preliminary-check-risk-people-binding.test.js
+node tests/unit/preliminary-check-risk-people-hit-tags.test.js
+```
+
+Expected:
+
+- `PASS`
+- 证明结果总览入口和风险人员总览展示边界仍稳定
+
+- [ ] **Step 2: Write implementation record**
+
+记录：
+
+- 仅改风险人员总览核心异常点
+- 10 模型固定色板写死在前端
+- 风险模型区和详情页不在本次范围
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add docs/reports/implementation/2026-03-23-risk-people-core-tag-fixed-palette-implementation.md
+git commit -m "补充风险人员核心异常点固定色板实施记录"
+```
--- a/docs/reports/implementation/2026-03-23-risk-people-core-tag-fixed-palette-implementation.md
+++ b/docs/reports/implementation/2026-03-23-risk-people-core-tag-fixed-palette-implementation.md
@@ -0,0 +1,37 @@
+# 风险人员总览核心异常点固定模型色板实施记录
+
+## 本次改动
+
+- 调整 [`RiskPeopleSection.vue`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/src/views/ccdiProject/components/detail/RiskPeopleSection.vue)，将“核心异常点”标签从“按已选模型高亮”改为“按固定 10 模型编码绑定颜色”。
+- 在组件内新增固定色板 `CORE_TAG_PALETTE`，覆盖以下 10 个模型编码：
+  - `LARGE_TRANSACTION`
+  - `ABNORMAL_TRANSACTION`
+  - `SUSPICIOUS_GAMBLING`
+  - `SUSPICIOUS_RELATION`
+  - `SUSPICIOUS_PART_TIME`
+  - `SUSPICIOUS_PROPERTY`
+  - `SUSPICIOUS_FOREIGN_EXCHANGE`
+  - `SUSPICIOUS_INTEREST_PAYMENT`
+  - `SUSPICIOUS_PURCHASE`
+  - `ABNORMAL_BEHAVIOR`
+- 新增 `core-tag--*` 样式类，按你确认的 `A` 方案落为商务稳重风格。
+- 调整 [`preliminaryCheck.mock.js`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js)，将示例标签的 `modelCode/modelName` 改成真实模型编码口径。
+- 更新 [`preliminary-check-risk-people-hit-tags.test.js`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/tests/unit/preliminary-check-risk-people-hit-tags.test.js)，锁定固定 10 模型色板实现，不再允许该组件依赖 `selectedModelCodes`。
+
+## 实现说明
+
+- 本次只改“风险人员总览”的“核心异常点”，不改“命中模型涉及人员”的异常标签，也不改项目详情页。
+- 标签颜色直接由 `riskPointTagList[].modelCode` 命中固定色板决定，不再依赖模型区卡片是否被选中。
+- 若后续标签返回的 `modelCode` 不在固定映射内，组件会回退为无色，避免错误着色。
+
+## 验证情况
+
+- `node ruoyi-ui/tests/unit/preliminary-check-risk-people-hit-tags.test.js`
+- `node ruoyi-ui/tests/unit/preliminary-check-risk-people-binding.test.js`
+- `node ruoyi-ui/tests/unit/preliminary-check-summary-and-people.test.js`
+
+## 未包含内容
+
+- 未调整 [`RiskModelSection.vue`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue) 的标签颜色规则
+- 未新增自动分配颜色逻辑
+- 未改动后端接口或模型卡片展示逻辑
--- a/ruoyi-ui/src/views/ccdiProject/components/detail/RiskPeopleSection.vue
+++ b/ruoyi-ui/src/views/ccdiProject/components/detail/RiskPeopleSection.vue
@@ -33,9 +33,10 @@
                <el-tag
                  v-for="(tag, index) in scope.row.riskPointTagList"
                  :key="`${scope.row.idNo || scope.row.name || index}-risk-point-${index}`"
+                  class="core-risk-tag"
+                  :style="resolveModelTagStyle(tag)"
                  size="mini"
                  effect="plain"
-                  :type="mapRiskLevelToTagType(tag.riskLevel)"
                >
                  {{ tag.ruleName }}
                </el-tag>
@@ -55,6 +56,59 @@
 </template>

 <script>
+const CORE_TAG_PALETTE = {
+  LARGE_TRANSACTION: {
+    color: "#b91c1c",
+    borderColor: "#fca5a5",
+    backgroundColor: "#fff1f2",
+  },
+  ABNORMAL_TRANSACTION: {
+    color: "#c2410c",
+    borderColor: "#fdba74",
+    backgroundColor: "#fff7ed",
+  },
+  SUSPICIOUS_GAMBLING: {
+    color: "#a16207",
+    borderColor: "#fcd34d",
+    backgroundColor: "#fefce8",
+  },
+  SUSPICIOUS_RELATION: {
+    color: "#166534",
+    borderColor: "#86efac",
+    backgroundColor: "#f0fdf4",
+  },
+  SUSPICIOUS_PART_TIME: {
+    color: "#0f766e",
+    borderColor: "#6ee7b7",
+    backgroundColor: "#ecfeff",
+  },
+  SUSPICIOUS_PROPERTY: {
+    color: "#1d4ed8",
+    borderColor: "#93c5fd",
+    backgroundColor: "#eff6ff",
+  },
+  SUSPICIOUS_FOREIGN_EXCHANGE: {
+    color: "#4338ca",
+    borderColor: "#a5b4fc",
+    backgroundColor: "#eef2ff",
+  },
+  SUSPICIOUS_INTEREST_PAYMENT: {
+    color: "#7e22ce",
+    borderColor: "#d8b4fe",
+    backgroundColor: "#faf5ff",
+  },
+  SUSPICIOUS_PURCHASE: {
+    color: "#be185d",
+    borderColor: "#f9a8d4",
+    backgroundColor: "#fdf2f8",
+  },
+  ABNORMAL_BEHAVIOR: {
+    color: "#334155",
+    borderColor: "#cbd5e1",
+    backgroundColor: "#f8fafc",
+  },
+};
+
 function normalizeRiskPointTags(tags, riskPoint, riskLevel) {
  if (Array.isArray(tags) && tags.length) {
    return tags
@@ -69,6 +123,8 @@ function normalizeRiskPointTags(tags, riskPoint, riskLevel) {
          return {
            ruleName: item.ruleName || item.label || item.name || "",
            riskLevel: item.riskLevel || riskLevel,
+            modelCode: item.modelCode || "",
+            modelName: item.modelName || "",
          };
        }
        return null;
@@ -115,15 +171,8 @@ export default {
    },
  },
  methods: {
-    mapRiskLevelToTagType(riskLevel) {
-      const level = String(riskLevel || "").toUpperCase();
-      if (level === "HIGH" || level === "DANGER") {
-        return "danger";
-      }
-      if (level === "MEDIUM" || level === "WARNING") {
-        return "warning";
-      }
-      return "info";
+    resolveModelTagStyle(tag) {
+      return CORE_TAG_PALETTE[tag.modelCode] || {};
    },
  },
 };
@@ -176,6 +225,11 @@ export default {
  gap: 6px;
 }

+:deep(.core-risk-tag) {
+  border-radius: 999px;
+  font-weight: 500;
+}
+
 .empty-text {
  color: #94a3b8;
 }
--- a/ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js
+++ b/ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js
@@ -23,8 +23,8 @@ export const mockOverviewData = {
        modelCount: 3,
        riskPoint: "跨地域转账频繁交易",
        riskPointTagList: [
-          { ruleName: "跨地域转账", riskLevel: "HIGH" },
-          { ruleName: "频繁交易", riskLevel: "HIGH" },
+          { modelCode: "LARGE_TRANSACTION", modelName: "大额交易", ruleName: "跨地域转账", riskLevel: "HIGH" },
+          { modelCode: "ABNORMAL_TRANSACTION", modelName: "异常交易", ruleName: "频繁交易", riskLevel: "HIGH" },
        ],
        actionLabel: "查看详情",
      },
@@ -38,8 +38,8 @@ export const mockOverviewData = {
        modelCount: 2,
        riskPoint: "多工资转入频繁交易",
        riskPointTagList: [
-          { ruleName: "多工资转入", riskLevel: "MEDIUM" },
-          { ruleName: "频繁交易", riskLevel: "MEDIUM" },
+          { modelCode: "SUSPICIOUS_PART_TIME", modelName: "可疑兼职", ruleName: "多工资转入", riskLevel: "MEDIUM" },
+          { modelCode: "ABNORMAL_BEHAVIOR", modelName: "异常行为", ruleName: "频繁交易", riskLevel: "MEDIUM" },
        ],
        actionLabel: "查看详情",
      },
@@ -53,7 +53,7 @@ export const mockOverviewData = {
        modelCount: 1,
        riskPoint: "频繁小额转账",
        riskPointTagList: [
-          { ruleName: "频繁小额转账", riskLevel: "LOW" },
+          { modelCode: "SUSPICIOUS_GAMBLING", modelName: "疑似赌博", ruleName: "频繁小额转账", riskLevel: "LOW" },
        ],
        actionLabel: "查看详情",
      },
--- a/ruoyi-ui/tests/unit/preliminary-check-risk-people-hit-tags.test.js
+++ b/ruoyi-ui/tests/unit/preliminary-check-risk-people-hit-tags.test.js
@@ -11,7 +11,23 @@ const source = fs.readFileSync(
  "risk-point-tag-list",
  "scope.row.riskPointTagList",
  "normalizeRiskPointTags",
-  ":type=\"mapRiskLevelToTagType(tag.riskLevel)\"",
+  "tag.modelCode",
+  "CORE_TAG_PALETTE",
+  "backgroundColor",
+  "borderColor",
+  "LARGE_TRANSACTION",
+  "ABNORMAL_TRANSACTION",
+  "SUSPICIOUS_GAMBLING",
+  "SUSPICIOUS_RELATION",
+  "SUSPICIOUS_PART_TIME",
+  "SUSPICIOUS_PROPERTY",
+  "SUSPICIOUS_FOREIGN_EXCHANGE",
+  "SUSPICIOUS_INTEREST_PAYMENT",
+  "SUSPICIOUS_PURCHASE",
+  "ABNORMAL_BEHAVIOR",
+  ":style=\"resolveModelTagStyle(tag)\"",
 ].forEach((token) => assert(source.includes(token), token));

+assert(!source.includes("selectedModelCodes"), "核心异常点颜色不应再依赖已选模型");
+assert(!source.includes(":class=\"resolveModelTagClass(tag)\""), "不应继续依赖 class 覆盖颜色");
 assert(!source.includes('<el-table-column prop="riskPoint" label="核心异常点" min-width="220" />'));