ccdi/docs/design/2026-03-24-project-detail-special-check-tab-design.md

# 项目详情专项排查 Tab 设计文档

## 背景

当前项目详情页已经预留“专项排查”标签页入口：

- 页面入口位于 `ruoyi-ui/src/views/ccdiProject/detail.vue`
- 实际内容组件为 `ruoyi-ui/src/views/ccdiProject/components/detail/SpecialCheck.vue`
- 当前 `SpecialCheck.vue` 仅展示“专项排查功能开发中...”占位文案

同时，需求方已经提供了参考图 `assets/专项核查.png`，希望项目详情中的专项排查页在结构上贴近该参考图。

本次需求经过确认后，边界如下：

- 页面整体结构按参考图设计
- 图谱分析区域不开发图谱卡片能力
- 图谱区域改为轻量空态卡片，并提供外接链接入口
- 顶部“工具排查分析”和底部“扩展查询”本次仅做高拟真静态占位，不接真实接口
- 模块标题、按钮文案、表头文案尽量贴近参考图

## 目标

- 将项目详情页中的“专项排查”从单一空白占位升级为完整的静态专项排查页面
- 保持页面结构、模块命名和视觉层级与参考图一致
- 在不引入伪业务逻辑的前提下，为后续接入真实专项排查能力预留清晰的前端骨架
- 图谱区域只保留外链入口，不在本次范围内实现图谱能力

## 范围

### In Scope

- 重构 `SpecialCheck.vue`，输出完整专项排查页面结构
- 页面按三段式结构组织：
  - 工具排查分析
  - 图谱分析
  - 扩展查询
- 复刻参考图中的主要标题、按钮、筛选区、预警卡、页签区和表格区外观
- 图谱分析区提供轻量空态卡片与外链按钮
- 按职责拆分前端展示子组件，避免 `SpecialCheck.vue` 继续膨胀

### Out of Scope

- 不新增后端接口
- 不接入真实专项排查查询逻辑
- 不实现图谱绘制、图谱节点、图谱筛选、图谱数据接口
- 不实现扩展查询页签切换联动、表格分页、导出、详情弹窗
- 不新增轮询、进度条、消息推送等异步能力

## 现状分析

### 项目详情页现状

`ruoyi-ui/src/views/ccdiProject/detail.vue` 当前已经具备稳定的详情页主导航结构：

- `upload` 对应上传数据
- `config` 对应参数配置
- `overview` 对应结果总览
- `special` 对应专项排查
- `detail` 对应流水明细查询

`special` 页签已经被纳入路由参数和动态组件切换逻辑，因此本次不需要变更项目详情页的导航机制，只需要补齐专项排查页面内容。

### 专项排查页现状

`ruoyi-ui/src/views/ccdiProject/components/detail/SpecialCheck.vue` 当前仅包含：

- 一个白底容器
- 一个搜索图标
- 一句“专项排查功能开发中...”

这意味着：

- 页面层级无法承接参考图要求
- 与项目详情其他 tab 的完成度不一致
- 后续即使要接真实专项排查，也缺少可直接替换的页面骨架

### 相关页面可复用模式

项目详情下已有两个可借鉴页面模式：

1. `PreliminaryCheck.vue`
   - 适合复用其“页面由多个展示区块拼装而成”的组织方式
2. `DetailQuery.vue`
   - 适合复用其“筛选区 + 结果区”的排版节奏和局部样式语言

结论：

- 页面骨架与视觉层级可参考参考图
- 组件组织方式与样式语义应延续现有项目详情页实现

## 方案选择

本次采用“高拟真静态专项排查页 + 图谱外链空态卡片”的方案。

### 推荐方案

专项排查页整体按参考图拆分为三个模块：

1. 工具排查分析
2. 图谱分析
3. 扩展查询

其中：

- 工具排查分析：展示静态筛选表单、按钮和红色预警摘要卡
- 图谱分析：展示轻量空态卡片和外链按钮
- 扩展查询：展示静态页签、筛选条和表格列表

这样可以同时满足：

- 页面完成度足够接近参考图
- 图谱能力不被误做成假的节点占位图
- 后续逐块替换真实接口时不需要推倒整个页面

### 不采用的方案

#### 方案一：继续维持单一“开发中”空白页

不采用原因：

- 与“按专项核查图设计”的目标不一致
- 无法承接后续业务评审和视觉确认
- 后续开发仍需重新搭建页面骨架

#### 方案二：把全部模块做成可点击但不接数据的伪交互页

不采用原因：

- 会引入大量没有真实业务含义的交互逻辑
- 容易让页面进入“像能用但其实不能用”的灰区
- 增加前端返工成本，不符合最短路径实现原则

## 详细设计

## 1. 页面结构设计

专项排查页采用纵向三段式布局，自上而下依次为：

### 1.1 工具排查分析

该区块位于页面顶部，承担“先看筛选条件和预警概览”的作用，包含：

- 模块标题：`工具排查分析`
- 一行或两行筛选输入区：
  - 身份证号
  - 开始日期
  - 结束日期
- 操作按钮：
  - `查询`
  - `重置`
- 红色预警摘要卡：
  - 预警标题
  - 基本信息
  - 本人分析
  - 关联账户分析
  - 风险提示摘要

本区块的所有内容均为静态展示：

- 不发起接口请求
- 不根据输入刷新卡片内容
- 输入控件主要用于还原参考图结构和信息密度

### 1.2 图谱分析

该区块位于页面中部，承担“承接未来图谱能力”的作用，包含：

- 模块标题：`图谱分析`
- 顶部页签外观：
  - 关系人图谱
  - 资金流图谱
  - 家庭资产图谱
- 主体内容区：轻量空态卡片
- 空态卡片中的外链入口按钮

本区块明确不实现任何图谱占位图，不使用假节点或假连线替代真实能力。

空态卡片表达重点为：

- 当前图谱能力需跳转外部系统查看
- 若未配置外链地址，则展示禁用态或提示文案

### 1.3 扩展查询

该区块位于页面底部，承担“承接未来明细查询能力”的作用，包含：

- 模块标题：`扩展查询`
- 页签区：
  - 异常查询
  - 人员轨迹查询
  - 招聘查询
- 筛选条：
  - 时间范围
  - 关键词输入
  - 查询按钮
  - 重置按钮
- 静态表格区：
  - 表头
  - 1~2 行静态示例数据

本区块本次不做：

- 页签切换
- 真实过滤
- 数据分页
- 详情弹窗

## 2. 组件拆分设计

为避免 `SpecialCheck.vue` 继续演变为大而全文件，建议拆分为以下职责边界：

### 2.1 `SpecialCheck.vue`

职责：

- 作为专项排查页主容器
- 接收 `projectId`、`projectInfo`
- 组织三个展示区块的排列顺序
- 维护图谱外链地址等轻量常量输入

### 2.2 工具排查分析子组件

职责：

- 渲染顶部筛选区
- 渲染查询/重置按钮
- 渲染红色预警摘要卡

约束：

- 不包含真实查询逻辑
- 不向外发起接口请求

### 2.3 图谱分析子组件

职责：

- 渲染图谱分析标题和页签外观
- 渲染空态卡片
- 承载外链按钮点击逻辑

约束：

- 不实现图谱画布
- 不引入第三方图谱库

### 2.4 扩展查询子组件

职责：

- 渲染底部页签区、筛选条和静态表格
- 输出接近参考图的查询区块外观

约束：

- 不发起真实查询
- 不弹出详情

## 3. 交互设计

本次只保留两类交互：

### 3.1 视觉交互

- 输入框聚焦样式
- 按钮 hover 样式
- 页签高亮样式
- 卡片悬停或层级区分样式

这些交互只服务于页面完成度，不驱动数据变化。

### 3.2 图谱外链交互

图谱分析区的外链按钮是本页唯一真实业务交互。

建议行为：

- 已配置地址时：
  - 点击后新窗口打开外链
- 未配置地址时：
  - 按钮禁用或提示“暂未配置图谱地址”

除该按钮外，其余“查询”“重置”“页签”等仅保留视觉层面的静态呈现。

## 4. 数据策略设计

本次页面采用前端静态 mock 数据策略。

### 4.1 顶部摘要数据

使用组件内常量或独立静态数据文件维护：

- 预警标题
- 身份证号
- 收入、支出、异常账户等描述
- 风险提示文案

### 4.2 扩展查询表格数据

使用固定数组维护 1~2 行示例数据，用于撑开表格结构与列宽。

### 4.3 图谱外链地址

可先在前端组件中定义常量，后续若需要配置化，再收口到独立常量文件。

## 5. 视觉与样式设计

样式上遵循“结构靠近参考图，视觉语言跟随现有项目详情页”的原则。

### 5.1 需要靠近参考图的部分

- 模块标题命名
- 页面三段式层级
- 红色预警摘要卡的视觉重心
- 查询区和表格区的分块关系

### 5.2 需要延续现有项目风格的部分

- 页面白底卡片容器
- 常规按钮风格
- 输入框、页签、表格的基础样式
- 留白、圆角、边框、阴影强度

这样可以避免专项排查页看起来像“另一套系统”。

## 6. 文件改动设计

预计涉及的前端文件边界如下：

- 继续使用：`ruoyi-ui/src/views/ccdiProject/detail.vue`
- 重点改造：`ruoyi-ui/src/views/ccdiProject/components/detail/SpecialCheck.vue`
- 新增专项排查子组件：位于 `ruoyi-ui/src/views/ccdiProject/components/detail/`

后端文件本次不改。

## 7. 测试设计

### 7.1 前端验证

至少验证以下内容：

- 项目详情页切换到 `special` 页签后能正确显示专项排查页面
- 页面三大模块均正常渲染
- 图谱分析区显示为空态卡片而非图谱占位图
- 图谱外链按钮在有地址和无地址两种情况下表现正确
- 页面在常见桌面分辨率下不出现明显布局错乱

### 7.2 后端验证

本次无需新增后端测试，只需确认：

- 不存在为专项排查页新增的后端接口依赖
- 现有项目详情接口不受本次前端改动影响

## 8. 实施结论

本次最短路径实现为：

- 只开发前端静态专项排查页面
- 仅保留图谱外链作为真实交互
- 不开发图谱能力
- 不开发真实查询能力
- 不新增后端代码

该方案既满足参考图落位要求，也为后续真实专项排查能力接入保留了稳定骨架。