wkc/ccdi

Fork 0

Files

wkc 9dfa722c8d 新增项目详情专项排查设计与实施计划

2026-03-24 15:46:25 +08:00

9.8 KiB

Raw Blame History

项目详情专项排查 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. 页面结构设计

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

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. 实施结论

本次最短路径实现为：

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

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

9.8 KiB Raw Blame History