新增项目详情专项排查设计与实施计划
This commit is contained in:
@@ -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 "补充专项排查后端边界说明"
|
||||
```
|
||||
@@ -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 "完成项目详情专项排查静态页面"
|
||||
```
|
||||
Reference in New Issue
Block a user