diff --git a/docs/design/2026-03-24-project-detail-special-check-tab-design.md b/docs/design/2026-03-24-project-detail-special-check-tab-design.md new file mode 100644 index 00000000..0f82021f --- /dev/null +++ b/docs/design/2026-03-24-project-detail-special-check-tab-design.md @@ -0,0 +1,365 @@ +# 项目详情专项排查 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. 实施结论 + +本次最短路径实现为: + +- 只开发前端静态专项排查页面 +- 仅保留图谱外链作为真实交互 +- 不开发图谱能力 +- 不开发真实查询能力 +- 不新增后端代码 + +该方案既满足参考图落位要求,也为后续真实专项排查能力接入保留了稳定骨架。 diff --git a/docs/plans/backend/2026-03-24-project-detail-special-check-tab-backend-implementation.md b/docs/plans/backend/2026-03-24-project-detail-special-check-tab-backend-implementation.md new file mode 100644 index 00000000..1687c7c9 --- /dev/null +++ b/docs/plans/backend/2026-03-24-project-detail-special-check-tab-backend-implementation.md @@ -0,0 +1,121 @@ +# Project Detail Special Check Tab Backend Implementation Plan + +> **For agentic workers:** REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan. Steps use checkbox (`- [ ]`) syntax for tracking. + +**Goal:** 明确项目详情“专项排查”标签页本次无需新增后端接口或服务逻辑,确保前端静态页面开发不会错误依赖后端改造。 + +**Architecture:** 本次后端实施遵循最短路径原则,不引入任何新的专项排查接口、不扩展项目详情聚合接口、不补做图谱中台代理。实施工作仅包含边界核验、现有接口影响确认和文档沉淀,确保前端可独立完成静态页面落位。 + +**Tech Stack:** Java 21, Spring Boot 3, Maven, Swagger/OpenAPI + +--- + +### Task 1: 核验本次专项排查页不依赖新增后端接口 + +**Files:** +- Reference: `ccdi-project/src/main/java/com/ruoyi/ccdi/project/controller/CcdiProjectController.java` +- Reference: `ruoyi-ui/src/views/ccdiProject/detail.vue` +- Modify: `docs/plans/backend/2026-03-24-project-detail-special-check-tab-backend-implementation.md` + +- [ ] **Step 1: Write the backend boundary checklist** + +先在实施计划中锁定以下边界: + +- 专项排查页本次是前端静态页面 +- 图谱分析只提供外链入口,不依赖后端图谱接口 +- 扩展查询本次不接真实数据接口 +- 项目详情现有 `getProject` 接口继续只服务页头和基础项目信息 + +- [ ] **Step 2: Verify current repository does not require a new API** + +Run: + +```bash +rg -n "getProject\\(|/ccdi/project/|专项排查|special" ruoyi-ui/src/views ccdi-project/src/main/java -S +``` + +Expected: + +- 能确认专项排查页当前没有真实接口接线 +- 能确认项目详情已有接口足够支撑页面基础上下文 + +- [ ] **Step 3: Keep implementation minimal** + +若仓库核验结果与设计一致,则明确记录: + +- 本次后端不新增 Controller +- 本次后端不新增 Service +- 本次后端不新增 DTO/VO +- 本次后端不新增 SQL + +- [ ] **Step 4: Commit** + +```bash +git add docs/plans/backend/2026-03-24-project-detail-special-check-tab-backend-implementation.md +git commit -m "新增专项排查后端实施计划" +``` + +### Task 2: 验证项目详情既有接口不会被本次前端页面改造误伤 + +**Files:** +- Reference: `ccdi-project/src/main/java/com/ruoyi/ccdi/project/controller/CcdiProjectController.java` +- Reference: `ccdi-project/src/main/java/com/ruoyi/ccdi/project/service/ICcdiProjectService.java` +- Reference: `ccdi-project/src/main/java/com/ruoyi/ccdi/project/service/impl/CcdiProjectServiceImpl.java` + +- [ ] **Step 1: Verify the project detail contract** + +Run: + +```bash +rg -n "查询项目详情|getProject\\(|select.*project" ccdi-project/src/main/java/com/ruoyi/ccdi/project -S +``` + +Expected: + +- 能定位到项目详情控制器与服务实现 +- 能确认本次前端专项排查页无需扩充该接口返回字段 + +- [ ] **Step 2: Record the verification conclusion** + +将核验结论写入实施计划: + +- 当前项目详情接口已足够支撑专项排查页获取 `projectId` 与基础项目信息 +- 专项排查静态页面无需新增后端字段 +- 图谱外链地址本次由前端常量承载,不由后端下发 + +- [ ] **Step 3: Commit** + +```bash +git status --short +``` + +Expected: + +- 若只有计划文档变更,则无需新增代码类提交 + +### Task 3: 为后续真实专项排查能力预留后端边界说明 + +**Files:** +- Modify: `docs/plans/backend/2026-03-24-project-detail-special-check-tab-backend-implementation.md` + +- [ ] **Step 1: Document future backend entry points** + +在计划中补充说明:若后续专项排查需要真实化,应优先按能力拆分,而不是一次性扩展项目详情接口。后续候选能力包括: + +- 专项排查筛选查询接口 +- 图谱地址配置接口或配置项下发 +- 扩展查询分页接口 + +- [ ] **Step 2: Keep the current scope explicit** + +明确写入当前结论: + +- 上述能力全部不在本次实施范围内 +- 本次后端工作到“边界确认”即结束 + +- [ ] **Step 3: Commit** + +```bash +git add docs/plans/backend/2026-03-24-project-detail-special-check-tab-backend-implementation.md +git commit -m "补充专项排查后端边界说明" +``` diff --git a/docs/plans/frontend/2026-03-24-project-detail-special-check-tab-frontend-implementation.md b/docs/plans/frontend/2026-03-24-project-detail-special-check-tab-frontend-implementation.md new file mode 100644 index 00000000..c775868b --- /dev/null +++ b/docs/plans/frontend/2026-03-24-project-detail-special-check-tab-frontend-implementation.md @@ -0,0 +1,357 @@ +# Project Detail Special Check Tab Frontend Implementation Plan + +> **For agentic workers:** REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan. Steps use checkbox (`- [ ]`) syntax for tracking. + +**Goal:** 将项目详情页中的“专项排查”标签页从单一开发中占位升级为贴近参考图的静态专项排查页面,并在图谱分析区提供外链入口。 + +**Architecture:** 保持 `ruoyi-ui/src/views/ccdiProject/detail.vue` 的现有标签切换机制不变,只改造 `SpecialCheck.vue` 及其局部子组件。页面拆为“工具排查分析”“图谱分析”“扩展查询”三个纯展示区块,其中图谱区只保留空态卡片和外链按钮,其他区域全部使用前端静态数据渲染,不接真实接口。 + +**Tech Stack:** Vue 2, Element UI, SCSS, Node, npm + +--- + +### Task 1: 先锁定专项排查页的页面骨架与组件边界 + +**Files:** +- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/SpecialCheck.vue` +- Create: `ruoyi-ui/src/views/ccdiProject/components/detail/SpecialCheckAnalysisPanel.vue` +- Create: `ruoyi-ui/src/views/ccdiProject/components/detail/SpecialCheckGraphPanel.vue` +- Create: `ruoyi-ui/src/views/ccdiProject/components/detail/SpecialCheckQueryPanel.vue` +- Test: `ruoyi-ui/tests/unit/project-detail-special-check-structure.test.js` + +- [ ] **Step 1: Write the failing test** + +新增结构型测试,至少锁定以下约束: + +```javascript +const assert = require("assert"); +const fs = require("fs"); +const path = require("path"); + +const pagePath = path.resolve(__dirname, "../../src/views/ccdiProject/components/detail/SpecialCheck.vue"); +const source = fs.readFileSync(pagePath, "utf8"); + +assert(source.includes("SpecialCheckAnalysisPanel"), "应拆分工具排查分析子组件"); +assert(source.includes("SpecialCheckGraphPanel"), "应拆分图谱分析子组件"); +assert(source.includes("SpecialCheckQueryPanel"), "应拆分扩展查询子组件"); +``` + +- [ ] **Step 2: Run test to verify it fails** + +Run: + +```bash +cd ruoyi-ui +node tests/unit/project-detail-special-check-structure.test.js +``` + +Expected: + +- `FAIL` +- 原因是当前 `SpecialCheck.vue` 仍然只有单一占位内容 + +- [ ] **Step 3: Write minimal implementation** + +将 `SpecialCheck.vue` 改造成页面容器,只负责: + +- 接收 `projectId`、`projectInfo` +- 组装三个展示区块 +- 透传轻量静态数据或图谱外链地址 + +新增三个子组件: + +- `SpecialCheckAnalysisPanel.vue` +- `SpecialCheckGraphPanel.vue` +- `SpecialCheckQueryPanel.vue` + +约束: + +- 不在主组件中堆叠大段模板 +- 不新增接口调用 +- 不在本任务引入真实查询逻辑 + +- [ ] **Step 4: Run test to verify it passes** + +Run: + +```bash +cd ruoyi-ui +node tests/unit/project-detail-special-check-structure.test.js +``` + +Expected: + +- `PASS` + +- [ ] **Step 5: Commit** + +```bash +git add ruoyi-ui/src/views/ccdiProject/components/detail/SpecialCheck.vue ruoyi-ui/src/views/ccdiProject/components/detail/SpecialCheckAnalysisPanel.vue ruoyi-ui/src/views/ccdiProject/components/detail/SpecialCheckGraphPanel.vue ruoyi-ui/src/views/ccdiProject/components/detail/SpecialCheckQueryPanel.vue ruoyi-ui/tests/unit/project-detail-special-check-structure.test.js +git commit -m "拆分项目详情专项排查页面骨架" +``` + +### Task 2: 实现工具排查分析静态展示区 + +**Files:** +- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/SpecialCheckAnalysisPanel.vue` +- Test: `ruoyi-ui/tests/unit/project-detail-special-check-analysis.test.js` + +- [ ] **Step 1: Write the failing test** + +新增工具排查分析展示测试,锁定以下内容: + +```javascript +const assert = require("assert"); +const fs = require("fs"); +const path = require("path"); + +const filePath = path.resolve(__dirname, "../../src/views/ccdiProject/components/detail/SpecialCheckAnalysisPanel.vue"); +const source = fs.readFileSync(filePath, "utf8"); + +assert(source.includes("工具排查分析"), "应展示工具排查分析标题"); +assert(source.includes("查询"), "应展示查询按钮"); +assert(source.includes("重置"), "应展示重置按钮"); +assert(source.includes("身份证号"), "应展示身份证号输入项"); +assert(source.includes("开始日期"), "应展示开始日期输入项"); +assert(source.includes("结束日期"), "应展示结束日期输入项"); +``` + +- [ ] **Step 2: Run test to verify it fails** + +Run: + +```bash +cd ruoyi-ui +node tests/unit/project-detail-special-check-analysis.test.js +``` + +Expected: + +- `FAIL` + +- [ ] **Step 3: Write minimal implementation** + +在 `SpecialCheckAnalysisPanel.vue` 中: + +- 使用 Element UI 表单组件渲染静态筛选区 +- 使用参考图文案渲染 `查询`、`重置` +- 用静态数据渲染预警摘要卡 +- 不给查询按钮绑定真实数据请求 + +实现约束: + +- 输入项只服务于页面还原,不驱动状态切换 +- 预警摘要卡视觉上要成为页面主焦点 +- 样式延续项目详情页现有白底卡片风格 + +- [ ] **Step 4: Run test to verify it passes** + +Run: + +```bash +cd ruoyi-ui +node tests/unit/project-detail-special-check-analysis.test.js +``` + +Expected: + +- `PASS` + +- [ ] **Step 5: Commit** + +```bash +git add ruoyi-ui/src/views/ccdiProject/components/detail/SpecialCheckAnalysisPanel.vue ruoyi-ui/tests/unit/project-detail-special-check-analysis.test.js +git commit -m "新增专项排查工具排查分析静态区" +``` + +### Task 3: 实现图谱分析空态卡片与外链入口 + +**Files:** +- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/SpecialCheckGraphPanel.vue` +- Test: `ruoyi-ui/tests/unit/project-detail-special-check-graph.test.js` + +- [ ] **Step 1: Write the failing test** + +新增图谱分析测试,至少锁定以下内容: + +```javascript +const assert = require("assert"); +const fs = require("fs"); +const path = require("path"); + +const filePath = path.resolve(__dirname, "../../src/views/ccdiProject/components/detail/SpecialCheckGraphPanel.vue"); +const source = fs.readFileSync(filePath, "utf8"); + +assert(source.includes("图谱分析"), "应展示图谱分析标题"); +assert(source.includes("关系人图谱"), "应展示图谱页签文案"); +assert(source.includes("资金流图谱"), "应展示图谱页签文案"); +assert(source.includes("家庭资产图谱"), "应展示图谱页签文案"); +assert(source.includes("查看图谱"), "应提供图谱外链按钮"); +assert(!source.includes("echarts"), "本次不应引入图谱或图表依赖"); +``` + +- [ ] **Step 2: Run test to verify it fails** + +Run: + +```bash +cd ruoyi-ui +node tests/unit/project-detail-special-check-graph.test.js +``` + +Expected: + +- `FAIL` + +- [ ] **Step 3: Write minimal implementation** + +在 `SpecialCheckGraphPanel.vue` 中: + +- 渲染图谱分析标题 +- 渲染静态页签外观 +- 渲染空态卡片和说明文案 +- 提供“查看图谱”按钮 + +行为约束: + +- 有图谱地址时,点击新窗口打开链接 +- 无图谱地址时,按钮禁用或提示未配置 +- 不画任何假图谱节点或连线 + +- [ ] **Step 4: Run test to verify it passes** + +Run: + +```bash +cd ruoyi-ui +node tests/unit/project-detail-special-check-graph.test.js +``` + +Expected: + +- `PASS` + +- [ ] **Step 5: Commit** + +```bash +git add ruoyi-ui/src/views/ccdiProject/components/detail/SpecialCheckGraphPanel.vue ruoyi-ui/tests/unit/project-detail-special-check-graph.test.js +git commit -m "新增专项排查图谱分析外链空态卡片" +``` + +### Task 4: 实现扩展查询静态展示区 + +**Files:** +- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/SpecialCheckQueryPanel.vue` +- Test: `ruoyi-ui/tests/unit/project-detail-special-check-query.test.js` + +- [ ] **Step 1: Write the failing test** + +新增扩展查询结构测试,至少锁定以下内容: + +```javascript +const assert = require("assert"); +const fs = require("fs"); +const path = require("path"); + +const filePath = path.resolve(__dirname, "../../src/views/ccdiProject/components/detail/SpecialCheckQueryPanel.vue"); +const source = fs.readFileSync(filePath, "utf8"); + +assert(source.includes("扩展查询"), "应展示扩展查询标题"); +assert(source.includes("异常查询"), "应展示异常查询页签"); +assert(source.includes("人员轨迹查询"), "应展示人员轨迹查询页签"); +assert(source.includes("招聘查询"), "应展示招聘查询页签"); +assert(source.includes("查询"), "应展示查询按钮"); +assert(source.includes("重置"), "应展示重置按钮"); +``` + +- [ ] **Step 2: Run test to verify it fails** + +Run: + +```bash +cd ruoyi-ui +node tests/unit/project-detail-special-check-query.test.js +``` + +Expected: + +- `FAIL` + +- [ ] **Step 3: Write minimal implementation** + +在 `SpecialCheckQueryPanel.vue` 中: + +- 渲染扩展查询标题 +- 渲染静态页签区 +- 渲染筛选条 +- 渲染静态表格头和示例行 + +约束: + +- 不实现页签切换逻辑 +- 不发起查询请求 +- 不新增导出和详情弹窗 + +- [ ] **Step 4: Run test to verify it passes** + +Run: + +```bash +cd ruoyi-ui +node tests/unit/project-detail-special-check-query.test.js +``` + +Expected: + +- `PASS` + +- [ ] **Step 5: Commit** + +```bash +git add ruoyi-ui/src/views/ccdiProject/components/detail/SpecialCheckQueryPanel.vue ruoyi-ui/tests/unit/project-detail-special-check-query.test.js +git commit -m "新增专项排查扩展查询静态区" +``` + +### Task 5: 联调样式并完成页面验收 + +**Files:** +- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/SpecialCheck.vue` +- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/SpecialCheckAnalysisPanel.vue` +- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/SpecialCheckGraphPanel.vue` +- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/SpecialCheckQueryPanel.vue` +- Test: `ruoyi-ui/src/views/ccdiProject/detail.vue` + +- [ ] **Step 1: Run local page verification** + +Run: + +```bash +cd ruoyi-ui +npm run dev +``` + +打开项目详情页并切换到 `special` 标签,人工核对: + +- 顶部分析区、图谱区、扩展查询区顺序正确 +- 预警摘要卡为视觉焦点 +- 图谱区为空态卡片而不是假图谱 +- 页面宽度变化时没有明显断裂 + +- [ ] **Step 2: Fix style issues with minimal changes** + +若发现问题,只做最小化样式修正: + +- 调整模块间距 +- 调整卡片边框与留白 +- 调整标题、页签、表格头视觉层级 + +- [ ] **Step 3: Stop the dev server after verification** + +完成验证后停止 `npm run dev` 启动的前端进程,避免端口残留。 + +- [ ] **Step 4: Commit** + +```bash +git add ruoyi-ui/src/views/ccdiProject/components/detail/SpecialCheck.vue ruoyi-ui/src/views/ccdiProject/components/detail/SpecialCheckAnalysisPanel.vue ruoyi-ui/src/views/ccdiProject/components/detail/SpecialCheckGraphPanel.vue ruoyi-ui/src/views/ccdiProject/components/detail/SpecialCheckQueryPanel.vue +git commit -m "完成项目详情专项排查静态页面" +```