wkc/ccdi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
6385778e4c6b1dca8b96f8cc1fd246d505b4e20f
ccdi/docs/plans/frontend/2026-03-24-project-detail-special-check-tab-frontend-implementation.md

11 KiB
Raw Blame History

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

新增结构型测试，至少锁定以下约束：

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:

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:

cd ruoyi-ui
node tests/unit/project-detail-special-check-structure.test.js

Expected:

  • PASS

  • Step 5: Commit

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

新增工具排查分析展示测试，锁定以下内容：

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:

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:

cd ruoyi-ui
node tests/unit/project-detail-special-check-analysis.test.js

Expected:

  • PASS

  • Step 5: Commit

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

新增图谱分析测试，至少锁定以下内容：

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:

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:

cd ruoyi-ui
node tests/unit/project-detail-special-check-graph.test.js

Expected:

  • PASS

  • Step 5: Commit

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

新增扩展查询结构测试，至少锁定以下内容：

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:

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:

cd ruoyi-ui
node tests/unit/project-detail-special-check-query.test.js

Expected:

  • PASS

  • Step 5: Commit

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:

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
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 "完成项目详情专项排查静态页面"
Reference in New Issue View Git Blame Copy Permalink