补充项目分析弹窗展示修正实施计划

2026-03-26 09:08:35 +08:00
parent cda1028c48
commit 2b701602ff
3 changed files with 477 additions and 0 deletions
--- a/docs/plans/backend/2026-03-26-results-overview-project-analysis-dialog-display-fix-backend-implementation.md
+++ b/docs/plans/backend/2026-03-26-results-overview-project-analysis-dialog-display-fix-backend-implementation.md
@@ -0,0 +1,133 @@
+# Results Overview Project Analysis Dialog Display Fix Backend Implementation Plan
+
+> **For agentic workers:** REQUIRED: Use superpowers:executing-plans to implement this plan. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** 验证“项目分析”弹窗本轮展示修正仍可完全复用当前后端详情契约，不新增接口、不扩字段、不改查询口径，并补齐后端边界与验证留痕。
+
+**Architecture:** 本轮目标是前端展示修正，后端默认不做源码开发。执行时仅围绕 `CcdiProjectOverviewController + ICcdiProjectOverviewService + CcdiProjectOverviewServiceImpl + CcdiProjectOverviewMapper.xml` 已有详情链路做边界确认与回归验证，确认 `basicInfo`、`abnormalDetail.groups`、现有分组类型和字段已足以支撑弹窗尺寸、滚动方式和侧栏布局重排；若验证通过，只沉淀“后端无需改造”的实施记录与验证记录。
+
+**Tech Stack:** Java 21, Spring Boot 3, MyBatis XML, Maven, JUnit 5
+
+---
+
+### Task 1: 确认当前详情契约足以支撑本轮展示修正
+
+**Files:**
+- Verify: `ccdi-project/src/main/java/com/ruoyi/ccdi/project/controller/CcdiProjectOverviewController.java`
+- Verify: `ccdi-project/src/main/java/com/ruoyi/ccdi/project/service/ICcdiProjectOverviewService.java`
+- Verify: `ccdi-project/src/main/java/com/ruoyi/ccdi/project/service/impl/CcdiProjectOverviewServiceImpl.java`
+- Verify: `ccdi-project/src/main/resources/mapper/ccdi/project/CcdiProjectOverviewMapper.xml`
+- Test: `ccdi-project/src/test/java/com/ruoyi/ccdi/project/controller/CcdiProjectOverviewControllerContractTest.java`
+- Test: `ccdi-project/src/test/java/com/ruoyi/ccdi/project/service/impl/CcdiProjectOverviewServiceImplTest.java`
+
+- [ ] **Step 1: Review the backend boundary**
+
+人工核对以下边界仍成立：
+
+- 详情接口路径仍为 `/ccdi/project/overview/person-analysis/detail`
+- 入参仍只有 `projectId` 和 `staffIdCard`
+- 返回仍以 `basicInfo` 与 `abnormalDetail.groups` 为核心
+- 本轮只改展示，不需要新增“头带 / 统一滚动 / 标签换行”专用字段
+
+- [ ] **Step 2: Run the focused contract tests**
+
+Run:
+
+```bash
+mvn test -pl ccdi-project -Dtest=CcdiProjectOverviewControllerContractTest,CcdiProjectOverviewServiceImplTest
+```
+
+Expected:
+
+- `PASS`
+
+- [ ] **Step 3: If tests fail, stop and reassess**
+
+若失败：
+
+- 不要直接新增接口或字段
+- 先确认失败是否与当前前端展示修正无关
+- 若确实发现契约缺口，停止执行并回到设计阶段补后端方案
+
+- [ ] **Step 4: Re-run the same tests after analysis**
+
+Run:
+
+```bash
+mvn test -pl ccdi-project -Dtest=CcdiProjectOverviewControllerContractTest,CcdiProjectOverviewServiceImplTest
+```
+
+Expected:
+
+- `PASS`
+
+- [ ] **Step 5: Commit**
+
+```bash
+# 本任务若无代码或文档改动，不产生提交。
+```
+
+### Task 2: 做后端回归并沉淀“无需改造”记录
+
+**Files:**
+- Test: `ccdi-project/src/test/java/com/ruoyi/ccdi/project/controller/CcdiProjectOverviewControllerContractTest.java`
+- Test: `ccdi-project/src/test/java/com/ruoyi/ccdi/project/mapper/CcdiProjectOverviewMapperRiskModelPeopleTest.java`
+- Test: `ccdi-project/src/test/java/com/ruoyi/ccdi/project/mapper/CcdiProjectOverviewMapperRiskModelCardsTest.java`
+- Create: `docs/tests/records/2026-03-26-results-overview-project-analysis-dialog-display-fix-backend-verification.md`
+- Create: `docs/reports/implementation/2026-03-26-results-overview-project-analysis-dialog-display-fix-backend-record.md`
+
+- [ ] **Step 1: Run backend regression**
+
+Run:
+
+```bash
+mvn test -pl ccdi-project -Dtest=CcdiProjectOverviewControllerContractTest,CcdiProjectOverviewMapperRiskModelPeopleTest,CcdiProjectOverviewMapperRiskModelCardsTest
+```
+
+Expected:
+
+- 全部 `PASS`
+
+- [ ] **Step 2: Write the verification record**
+
+在 `docs/tests/records/2026-03-26-results-overview-project-analysis-dialog-display-fix-backend-verification.md` 记录：
+
+- 执行命令
+- 执行日期
+- 测试结果
+- 结论：现有详情契约足以支撑本轮展示修正，后端无需扩展
+
+- [ ] **Step 3: Write the implementation record**
+
+在 `docs/reports/implementation/2026-03-26-results-overview-project-analysis-dialog-display-fix-backend-record.md` 记录：
+
+- 本轮后端不改源码
+- 维持的接口边界
+- 维持的查询口径
+- 回归验证结果
+
+- [ ] **Step 4: Confirm no backend source files were modified**
+
+Run:
+
+```bash
+git diff --name-only -- ccdi-project ruoyi-admin ruoyi-common ruoyi-framework ruoyi-system
+```
+
+Expected:
+
+- 无输出，或仅出现与当前后端稳定性直接相关且经确认必须修复的文件
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add docs/tests/records/2026-03-26-results-overview-project-analysis-dialog-display-fix-backend-verification.md docs/reports/implementation/2026-03-26-results-overview-project-analysis-dialog-display-fix-backend-record.md
+git commit -m "补充项目分析弹窗后端边界记录"
+```
+
+## Done When
+
+- 已确认当前详情接口契约足以支撑本轮展示修正
+- 未引入任何与需求无关的后端补丁式改动
+- 已留下后端验证记录与实施记录
+- 若回归全部通过，后端执行结论明确为“无需改造”
--- a/docs/plans/frontend/2026-03-26-results-overview-project-analysis-dialog-display-fix-frontend-implementation.md
+++ b/docs/plans/frontend/2026-03-26-results-overview-project-analysis-dialog-display-fix-frontend-implementation.md
@@ -0,0 +1,313 @@
+# Results Overview Project Analysis Dialog Display Fix Frontend Implementation Plan
+
+> **For agentic workers:** REQUIRED: Use superpowers:executing-plans to implement this plan. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** 在不改动结果总览入口、路由和后端接口的前提下，修正“项目分析”弹窗的展示问题，明确解决顶部留白过大、左右布局比例失衡、右侧独立滚动割裂、左侧侧栏被拉满以及左下角核心异常标签显示不全的问题。
+
+**Architecture:** 保持 `PreliminaryCheck.vue` 作为唯一入口，不新增页面、不改数据链路。实现收敛在 `ProjectAnalysisDialog.vue`、`ProjectAnalysisSidebar.vue`、`ProjectAnalysisAbnormalTab.vue` 和 `ProjectAnalysisPlaceholderTab.vue` 四个组件内，按“TDD 锁契约 -> 最小样式与结构改造 -> 聚焦回归 -> 补文档记录”的顺序推进。滚动策略统一改为弹窗内容区单一纵向滚动，左侧档案栏按内容自然高度展开，当前命中模型并入头带。
+
+**Tech Stack:** Vue 2, Element UI, SCSS, Node.js
+
+---
+
+### Task 1: 锁定弹窗尺寸、头带和统一滚动契约
+
+**Files:**
+- Modify: `ruoyi-ui/tests/unit/project-analysis-dialog-layout.test.js`
+- Modify: `ruoyi-ui/tests/unit/project-analysis-dialog-source-highlight.test.js`
+- Modify: `ruoyi-ui/tests/unit/project-analysis-dialog-default-tab.test.js`
+- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue`
+
+- [ ] **Step 1: Write the failing test**
+
+在 3 个现有单测中补充断言，锁定以下契约：
+
+- 弹窗尺寸明显放大，不再保留当前 `width="80%"` 与 `top="5vh"` 组合
+- 不再存在 `project-analysis-shell`
+- 存在头带容器，例如 `project-analysis-header`
+- “当前命中模型”并入头带，不再保留主区顶部 `source-summary`
+- 不再存在 `project-analysis-layout__main-scroll`
+- 不再存在 `overflow-y: auto` 与 `max-height: calc(90vh - 120px)` 这种右侧独立滚动实现
+- 关闭后再次打开仍默认回到 `异常明细`
+
+示例断言片段：
+
+```js
+assert(source.includes("project-analysis-header"), "缺少弹窗头带");
+assert(!source.includes('width="80%"'), "不应继续使用 80% 宽度");
+assert(!source.includes('top="5vh"'), "不应继续保留过大的顶部空白");
+assert(!source.includes("project-analysis-layout__main-scroll"), "不应继续保留右侧独立滚动容器");
+assert(!source.includes('class="source-summary"'), "当前命中模型不应继续占用主区独立一行");
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run:
+
+```bash
+cd ruoyi-ui
+node tests/unit/project-analysis-dialog-layout.test.js
+node tests/unit/project-analysis-dialog-source-highlight.test.js
+node tests/unit/project-analysis-dialog-default-tab.test.js
+```
+
+Expected:
+
+- `FAIL`
+
+- [ ] **Step 3: Write minimal implementation**
+
+在 `ProjectAnalysisDialog.vue` 中完成最小结构改造：
+
+- 放大弹窗宽高占比并压缩顶部空白
+- 删除 `project-analysis-shell`
+- 新增“头带 + 主体工作区”的单一主壳结构
+- 将“当前命中模型”并入头带
+- 去掉右侧独立滚动容器，让弹窗内容区统一滚动
+- 保持现有详情请求、错误态、重试和默认页签行为不变
+
+- [ ] **Step 4: Run test to verify it passes**
+
+Run:
+
+```bash
+cd ruoyi-ui
+node tests/unit/project-analysis-dialog-layout.test.js
+node tests/unit/project-analysis-dialog-source-highlight.test.js
+node tests/unit/project-analysis-dialog-default-tab.test.js
+```
+
+Expected:
+
+- `PASS`
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue ruoyi-ui/tests/unit/project-analysis-dialog-layout.test.js ruoyi-ui/tests/unit/project-analysis-dialog-source-highlight.test.js ruoyi-ui/tests/unit/project-analysis-dialog-default-tab.test.js
+git commit -m "收紧项目分析弹窗头带与滚动布局"
+```
+
+### Task 2: 修正左侧档案栏高度与标签完整展示
+
+**Files:**
+- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue`
+- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue`
+- Modify: `ruoyi-ui/tests/unit/project-analysis-dialog-sidebar.test.js`
+- Modify: `ruoyi-ui/tests/unit/project-analysis-dialog-empty-field.test.js`
+
+- [ ] **Step 1: Write the failing test**
+
+补充断言，锁定侧栏边界：
+
+- 左侧侧栏不再被右侧主区强制拉满
+- 存在人物档案结构块，例如 `sidebar-profile`
+- 风险等级改为状态块或等价样式位
+- “核心异常标签”区域占满可用宽度，并支持完整换行
+- 不允许恢复表单式强左右对齐布局
+- 空值仍统一显示 `-`
+
+示例断言片段：
+
+```js
+assert(source.includes("sidebar-profile"), "缺少人物档案区");
+assert(source.includes("sidebar-risk-badge"), "缺少风险等级状态块");
+assert(source.includes("flex-wrap: wrap"), "核心异常标签必须支持换行");
+assert(!source.includes("justify-content: space-between"), "不应继续以表单式左右对齐作为主体布局");
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run:
+
+```bash
+cd ruoyi-ui
+node tests/unit/project-analysis-dialog-sidebar.test.js
+node tests/unit/project-analysis-dialog-empty-field.test.js
+```
+
+Expected:
+
+- `FAIL`
+
+- [ ] **Step 3: Write minimal implementation**
+
+在 `ProjectAnalysisSidebar.vue` 中完成最小改造：
+
+- 身份区突出姓名、风险等级、工号、部门、所属项目
+- 命中模型摘要区保留命中模型数与核心异常标签
+- 核心异常标签区域改为整行左对齐换行展示
+- 删除会导致标签被压缩或侧栏被拉满的布局约束
+
+如需配合，在 `ProjectAnalysisDialog.vue` 中补充侧栏容器样式，使其按内容自然结束。
+
+- [ ] **Step 4: Run test to verify it passes**
+
+Run:
+
+```bash
+cd ruoyi-ui
+node tests/unit/project-analysis-dialog-sidebar.test.js
+node tests/unit/project-analysis-dialog-empty-field.test.js
+```
+
+Expected:
+
+- `PASS`
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue ruoyi-ui/tests/unit/project-analysis-dialog-sidebar.test.js ruoyi-ui/tests/unit/project-analysis-dialog-empty-field.test.js
+git commit -m "修正项目分析弹窗侧栏档案展示"
+```
+
+### Task 3: 收口右侧主区和异常明细阅读节奏
+
+**Files:**
+- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisAbnormalTab.vue`
+- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisPlaceholderTab.vue`
+- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue`
+- Modify: `ruoyi-ui/tests/unit/project-analysis-dialog-abnormal-tab.test.js`
+- Modify: `ruoyi-ui/tests/unit/project-analysis-dialog-layout.test.js`
+
+- [ ] **Step 1: Write the failing test**
+
+补充断言，锁定右侧主区边界：
+
+- 头带下方紧跟页签，减少无效留白
+- 异常明细保持“分组标题 + 主体内容”的连续阅读流
+- 主区容器与占位页签采用统一面板基线
+- 不恢复主区内部独立滚动
+
+示例断言片段：
+
+```js
+assert(source.includes("project-analysis-tabs"), "缺少主区页签容器");
+assert(source.includes("abnormal-card__title"), "异常明细应保留分组标题");
+assert(!source.includes("project-analysis-layout__main-scroll"), "主区不应再有独立滚动");
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run:
+
+```bash
+cd ruoyi-ui
+node tests/unit/project-analysis-dialog-abnormal-tab.test.js
+node tests/unit/project-analysis-dialog-layout.test.js
+```
+
+Expected:
+
+- `FAIL`
+
+- [ ] **Step 3: Write minimal implementation**
+
+在 3 个组件中完成最小样式与结构收口：
+
+- 页签导航上移，紧跟头带
+- 异常明细区块保持连续阅读流，不再被多层壳体打断
+- 占位页签与异常明细主视图统一容器基线
+- 保持现有真实数据渲染规则和分页逻辑不变
+
+- [ ] **Step 4: Run test to verify it passes**
+
+Run:
+
+```bash
+cd ruoyi-ui
+node tests/unit/project-analysis-dialog-abnormal-tab.test.js
+node tests/unit/project-analysis-dialog-layout.test.js
+```
+
+Expected:
+
+- `PASS`
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisAbnormalTab.vue ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisPlaceholderTab.vue ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue ruoyi-ui/tests/unit/project-analysis-dialog-abnormal-tab.test.js ruoyi-ui/tests/unit/project-analysis-dialog-layout.test.js
+git commit -m "收口项目分析弹窗右侧主区节奏"
+```
+
+### Task 4: 做前端回归并补充记录
+
+**Files:**
+- Create: `docs/reports/implementation/2026-03-26-results-overview-project-analysis-dialog-display-fix-frontend-record.md`
+- Create: `docs/tests/records/2026-03-26-results-overview-project-analysis-dialog-display-fix-frontend-verification.md`
+- Test: `ruoyi-ui/tests/unit/project-analysis-dialog-layout.test.js`
+- Test: `ruoyi-ui/tests/unit/project-analysis-dialog-source-highlight.test.js`
+- Test: `ruoyi-ui/tests/unit/project-analysis-dialog-default-tab.test.js`
+- Test: `ruoyi-ui/tests/unit/project-analysis-dialog-sidebar.test.js`
+- Test: `ruoyi-ui/tests/unit/project-analysis-dialog-empty-field.test.js`
+- Test: `ruoyi-ui/tests/unit/project-analysis-dialog-abnormal-tab.test.js`
+- Test: `ruoyi-ui/tests/unit/preliminary-check-project-analysis-entry.test.js`
+- Test: `ruoyi-ui/tests/unit/preliminary-check-project-analysis-source-context.test.js`
+
+- [ ] **Step 1: Run the focused regression suite**
+
+Run:
+
+```bash
+cd ruoyi-ui
+node tests/unit/project-analysis-dialog-layout.test.js
+node tests/unit/project-analysis-dialog-source-highlight.test.js
+node tests/unit/project-analysis-dialog-default-tab.test.js
+node tests/unit/project-analysis-dialog-sidebar.test.js
+node tests/unit/project-analysis-dialog-empty-field.test.js
+node tests/unit/project-analysis-dialog-abnormal-tab.test.js
+node tests/unit/preliminary-check-project-analysis-entry.test.js
+node tests/unit/preliminary-check-project-analysis-source-context.test.js
+```
+
+Expected:
+
+- 全部 `PASS`
+
+- [ ] **Step 2: Run the production build**
+
+Run:
+
+```bash
+cd ruoyi-ui
+npm run build:prod
+```
+
+Expected:
+
+- `BUILD SUCCESS` 或等价成功输出
+
+- [ ] **Step 3: Write the verification record**
+
+在 `docs/tests/records/2026-03-26-results-overview-project-analysis-dialog-display-fix-frontend-verification.md` 记录：
+
+- 执行命令
+- 执行时间
+- 测试结果
+- 验收结论：顶部留白、统一滚动、侧栏高度和标签展示问题已被覆盖验证
+
+- [ ] **Step 4: Write the implementation record**
+
+在 `docs/reports/implementation/2026-03-26-results-overview-project-analysis-dialog-display-fix-frontend-record.md` 记录：
+
+- 头带与弹窗尺寸调整
+- 统一滚动实现
+- 侧栏自然高度与标签换行展示
+- 主区阅读节奏收口
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add docs/reports/implementation/2026-03-26-results-overview-project-analysis-dialog-display-fix-frontend-record.md docs/tests/records/2026-03-26-results-overview-project-analysis-dialog-display-fix-frontend-verification.md
+git commit -m "补充项目分析弹窗前端修复记录"
+```
+
+## Done When
+
+- 顶部空白明显收紧，弹窗尺寸较现状更大
+- 弹窗改为统一滚动，右侧不再独立滚动
+- 左侧侧栏按内容自然结束，不再被强制拉满
+- 左下角“核心异常标签”在长标签、多标签场景下可完整换行展示
+- 结果总览入口、默认页签、详情接口链路和现有业务边界保持不变
--- a/docs/reports/implementation/2026-03-26-results-overview-project-analysis-dialog-display-fix-plan-record.md
+++ b/docs/reports/implementation/2026-03-26-results-overview-project-analysis-dialog-display-fix-plan-record.md
@@ -0,0 +1,31 @@
+# 结果总览项目分析弹窗展示修正实施计划记录
+
+## 变更概述
+
+- 基于已确认的展示修正设计文档，新增前端实施计划 1 份。
+- 基于已确认的展示修正设计文档，新增后端实施计划 1 份。
+- 本轮计划明确聚焦顶部留白、统一滚动、左右布局比例、侧栏自然高度和核心异常标签完整展示。
+- 本轮仅沉淀实施计划，尚未进入代码实现阶段。
+
+## 新增文件
+
+- `docs/plans/frontend/2026-03-26-results-overview-project-analysis-dialog-display-fix-frontend-implementation.md`
+- `docs/plans/backend/2026-03-26-results-overview-project-analysis-dialog-display-fix-backend-implementation.md`
+
+## 计划结论
+
+- 前端实施计划聚焦：
+  - 放大弹窗并压缩顶部空白
+  - 将“当前命中模型”并入头带
+  - 把右侧独立滚动改为弹窗统一滚动
+  - 修正左侧侧栏自然高度与标签完整换行展示
+  - 聚焦前端回归、构建验证与实施记录沉淀
+- 后端实施计划聚焦：
+  - 复核现有详情接口契约仍足以支撑本轮展示修正
+  - 不新增接口、不扩字段、不改查询口径
+  - 补充后端验证记录与边界说明
+
+## 说明
+
+- 本次按仓库规范，将实施计划分别落到 `docs/plans/frontend/` 与 `docs/plans/backend/`。
+- 由于仓库约定不启用 subagent，后续执行阶段应在当前会话按计划顺序推进。