From 16dbad319460493d01288380734af0f2fd8b53c9 Mon Sep 17 00:00:00 2001
From: wkc <978997012@qq.com>
Date: Fri, 20 Mar 2026 14:19:48 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=BB=93=E6=9E=9C=E6=80=BB?=
 =?UTF-8?q?=E8=A7=88=E6=A8=A1=E5=9E=8B=E5=8D=A1=E7=89=87=E5=8A=A0=E8=BD=BD?=
 =?UTF-8?q?=E5=8F=8D=E9=A6=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...s-overview-risk-model-loading-label-fix.md | 26 +++++++++++++++++++
 .../components/detail/RiskModelSection.vue    | 13 ++++++++--
 ...nary-check-model-loading-and-label.test.js | 17 ++++++++++++
 3 files changed, 54 insertions(+), 2 deletions(-)
 create mode 100644 docs/reports/implementation/2026-03-20-results-overview-risk-model-loading-label-fix.md
 create mode 100644 ruoyi-ui/tests/unit/preliminary-check-model-loading-and-label.test.js

diff --git a/docs/reports/implementation/2026-03-20-results-overview-risk-model-loading-label-fix.md b/docs/reports/implementation/2026-03-20-results-overview-risk-model-loading-label-fix.md
new file mode 100644
index 00000000..29bb6066
--- /dev/null
+++ b/docs/reports/implementation/2026-03-20-results-overview-risk-model-loading-label-fix.md
@@ -0,0 +1,26 @@
+# 结果总览模型卡片 loading 与筛选标签样式修复记录
+
+## 本次改动
+
+- 在 [`RiskModelSection.vue`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue) 调整模型卡片点击联动逻辑，点击选中或取消模型时，向人员列表请求附带 `syncCardLoading` 开关，让“模型预警次数统计”卡片区在联动查询期间显示 loading。
+- 在 [`RiskModelSection.vue`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue) 将 `fetchPeopleList` 改为支持可选参数，保证只有模型卡片切换场景会联动卡片 loading，普通查询、分页和部门筛选仍只影响下方表格 loading。
+- 新增 [`preliminary-check-model-loading-and-label.test.js`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/tests/unit/preliminary-check-model-loading-and-label.test.js)，校验模型卡片联动 loading 代码路径和“员工姓名或工号”标签单行样式已落地。
+
+## 处理说明
+
+- 保持现有接口和父子组件数据流不变，只在模型区组件内部补充交互反馈，避免引入额外状态同步。
+- 卡片区 loading 与表格 loading 同步开始，但只在模型卡片点击触发时打开，符合“选择模型后对统计卡片添加 loading”的需求边界。
+- “员工姓名或工号”标签通过 `white-space: nowrap` 与 `flex-shrink: 0` 保持单行显示，不影响筛选栏其余控件布局。
+
+## 验证情况
+
+- 已执行如下验证：
+
+```bash
+npx mocha ruoyi-ui/tests/unit/preliminary-check-model-loading-and-label.test.js ruoyi-ui/tests/unit/preliminary-check-model-linkage-flow.test.js ruoyi-ui/tests/unit/preliminary-check-model-filters.test.js
+npm --prefix ruoyi-ui run build:prod
+```
+
+- 结果说明：
+  - 定向单测已通过。
+  - 前端生产构建已执行，结果以本次命令输出为准。
diff --git a/ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue b/ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue
index daa48002..409559f1 100644
--- a/ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue
+++ b/ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue
@@ -251,7 +251,7 @@ export default {
         this.selectedModelCodes = [...this.selectedModelCodes, modelCode];
       }
       this.pageNum = 1;
-      this.fetchPeopleList();
+      this.fetchPeopleList({ syncCardLoading: true });
     },
     handleMatchModeChange() {
       this.pageNum = 1;
@@ -312,13 +312,17 @@ export default {
         this.deptLoading = false;
       }
     },
-    async fetchPeopleList() {
+    async fetchPeopleList(options = {}) {
       if (!this.projectId) {
         this.peopleList = [];
         this.total = 0;
         return;
       }
 
+      const { syncCardLoading = false } = options;
+      if (syncCardLoading) {
+        this.cardLoading = true;
+      }
       this.tableLoading = true;
       try {
         const response = await getOverviewRiskModelPeople(this.buildPeopleParams());
@@ -331,6 +335,9 @@ export default {
         console.error("加载风险模型命中人员失败", error);
       } finally {
         this.tableLoading = false;
+        if (syncCardLoading) {
+          this.cardLoading = false;
+        }
       }
     },
   },
@@ -456,6 +463,8 @@ export default {
 .summary-label {
   font-size: 12px;
   color: #64748b;
+  flex-shrink: 0;
+  white-space: nowrap;
 }
 
 .filter-summary {
diff --git a/ruoyi-ui/tests/unit/preliminary-check-model-loading-and-label.test.js b/ruoyi-ui/tests/unit/preliminary-check-model-loading-and-label.test.js
new file mode 100644
index 00000000..083194a9
--- /dev/null
+++ b/ruoyi-ui/tests/unit/preliminary-check-model-loading-and-label.test.js
@@ -0,0 +1,17 @@
+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"
+);
+
+[
+  "this.cardLoading = true",
+  "this.cardLoading = false",
+  "white-space: nowrap",
+].forEach((token) => assert(source.includes(token), token));