# 结果总览模型区联动筛选前端实施记录

## 本次改动

- 在 [`projectOverview.js`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/src/api/ccdi/projectOverview.js) 新增 `getOverviewRiskModelCards` 与 `getOverviewRiskModelPeople`，统一封装模型卡片和模型区人员分页接口。
- 在 [`PreliminaryCheck.vue`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/src/views/ccdiProject/components/detail/PreliminaryCheck.vue) 接入模型卡片真实请求，并把模型区列表查询职责下沉到 [`RiskModelSection.vue`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue)。
- 在 [`preliminaryCheck.mock.js`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js) 清理旧的模型筛选 mock 依赖，补齐模型卡片归一化逻辑和空态结构。
- 在 [`RiskModelSection.vue`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue) 实现多卡片选中/取消、`ANY / ALL` 匹配方式、关键词与部门筛选、分页请求、模型摘要和异常标签展示。
- 新增或更新 [`preliminary-check-model-api.test.js`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/tests/unit/preliminary-check-model-api.test.js)、[`preliminary-check-model-data-loading.test.js`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/tests/unit/preliminary-check-model-data-loading.test.js)、[`preliminary-check-model-multiselect.test.js`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/tests/unit/preliminary-check-model-multiselect.test.js)、[`preliminary-check-model-match-mode.test.js`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/tests/unit/preliminary-check-model-match-mode.test.js)、[`preliminary-check-model-filters.test.js`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/tests/unit/preliminary-check-model-filters.test.js)、[`preliminary-check-model-table-columns.test.js`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/tests/unit/preliminary-check-model-table-columns.test.js)、[`preliminary-check-model-linkage-flow.test.js`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/tests/unit/preliminary-check-model-linkage-flow.test.js)、[`preliminary-check-model-and-detail.test.js`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/tests/unit/preliminary-check-model-and-detail.test.js) 与 [`preliminary-check-model-card-grid.test.js`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/tests/unit/preliminary-check-model-card-grid.test.js)，覆盖接口、状态、筛选、联动流和卡片布局断点。

## 处理说明

- 继续复用现有 `PreliminaryCheck.vue` 作为结果总览页入口，没有新增路由、二级页面或平行容器组件。
- 模型卡片接口与人员分页接口拆分请求，避免入口页承担过多筛选状态，保持模型区联动逻辑集中在组件内部。
- 模型卡片支持多选，再次点击可取消；请求参数统一携带 `modelCodes + matchMode + keyword + deptId + pageNum + pageSize`。
- 模型区人员列表改为展示姓名、工号、身份证号、所属部门、命中模型摘要和异常标签；异常标签复用 [`DetailQuery.vue`](/Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui/src/views/ccdiProject/components/detail/DetailQuery.vue) 的风险等级颜色映射。
- 部门选项复用系统现有的 `deptTreeSelect` 接口，并在前端展开为可筛选下拉项，保持最短路径实现。
- 模型卡片网格在桌面端调整为固定 5 列，使 10 张卡片按两行展示；平板端降为 2 列，手机端降为 1 列，避免窄屏下卡片挤压。

## 验证情况

- 已执行如下定向验证：

```bash
cd ruoyi-ui
node tests/unit/preliminary-check-model-api.test.js
node tests/unit/preliminary-check-model-data-loading.test.js
node tests/unit/preliminary-check-model-multiselect.test.js
node tests/unit/preliminary-check-model-match-mode.test.js
node tests/unit/preliminary-check-model-filters.test.js
node tests/unit/preliminary-check-model-table-columns.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/preliminary-check-model-card-grid.test.js
```

- 总体验证结果：9 个前端单测命令全部通过，0 failure，0 error。