# 结果总览项目分析详情正式化外壳实施记录

## 变更日期

- 2026-04-29

## 变更范围

- 前端：`ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue`
- 前端：`ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue`
- 单测：`ruoyi-ui/tests/unit/project-analysis-dialog-layout.test.js`
- 单测：`ruoyi-ui/tests/unit/project-analysis-dialog-sidebar.test.js`

## 实施内容

### 1. 弹窗外壳样式正式化

- 调整 `ProjectAnalysisDialog.vue` 的外层壳样式，去掉旧版渐变大圆角卡片视觉。
- 将弹窗主体改为浅灰外层背景 + 白色内容工作台，强化边线、留白和分栏结构。
- 将标题区改成“结果总览 / 项目分析详情”的正式化层级，保留当前命中模型提示，但收口为弱装饰信息块。
- 调整右侧主区与左侧档案区之间的分隔线和间距，只改外壳，不进入各 tab 内部内容结构。

### 2. 左侧人物档案区样式映射

- 调整 `ProjectAnalysisSidebar.vue`，按“人物档案 + 命中模型摘要”两段式结构重排视觉。
- 姓名、风险等级、工号、部门、所属项目继续沿用现有数据字段，不新增业务字段。
- 将风险等级改为细边框状态标识，字段列表改为规整的标签/值双列展示。
- 核心异常标签保留为现有标签数据，仅更新标签外观，不改渲染逻辑。

### 3. 验证情况

- 单测通过：
  - `node tests/unit/project-analysis-dialog-layout.test.js`
  - `node tests/unit/project-analysis-dialog-sidebar.test.js`
  - `node tests/unit/project-analysis-dialog-empty-field.test.js`
- 浏览器实测：
  - 使用 `browser-use` 打开本地真实系统 `http://localhost/`
  - 进入项目详情页 `http://localhost/ccdiProject/detail/90337?tab=overview`
  - 在“结果总览”页点击“查看详情”，确认“项目分析详情”弹窗已应用正式化外壳样式
  - 确认左侧人物档案区样式已按预览稿方向收口，右侧“异常明细”内部业务内容未被重做
- 环境记录：
  - `ruoyi-ui/.nvmrc` 期望版本为 `14.21.3`
  - 当前终端执行 `nvm use` 失败，原因是 `nvm` 未安装到 PowerShell PATH
  - 本次前端校验在当前可用 Node `v22.22.0` 下完成，相关单测通过