314 lines
11 KiB
Markdown
314 lines
11 KiB
Markdown
# 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
|
||
|
||
- 顶部空白明显收紧，弹窗尺寸较现状更大
|
||
- 弹窗改为统一滚动，右侧不再独立滚动
|
||
- 左侧侧栏按内容自然结束，不再被强制拉满
|
||
- 左下角“核心异常标签”在长标签、多标签场景下可完整换行展示
|
||
- 结果总览入口、默认页签、详情接口链路和现有业务边界保持不变
|