# 项目详情专项排查 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. 实施结论 本次最短路径实现为： - 只开发前端静态专项排查页面 - 仅保留图谱外链作为真实交互 - 不开发图谱能力 - 不开发真实查询能力 - 不新增后端代码 该方案既满足参考图落位要求，也为后续真实专项排查能力接入保留了稳定骨架。