# 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

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