# 结果总览项目分析详情正式化外壳前端实施计划

## 目标

- 基于 `output/mockups/project-analysis-formal-soft-preview.html` 的静态预览稿，恢复“项目分析详情”弹窗的正式化、去卡片化外壳样式。
- 本次仅调整详情弹窗整体框架、标题区、左侧人物档案区、右侧主承载区与页签外层视觉。
- 不修改“异常明细”页签内部业务结构、分页、按钮、接口与数据逻辑。

## 范围

- 修改 `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. 弹窗外壳正式化

- 将当前偏渐变、大圆角的详情弹窗外壳改为更平直的正式化工作台样式。
- 顶部保留“结果总览 / 项目分析详情”的信息层级，但改成浅边线、弱装饰、明确留白的标题区。
- 调整整体布局间距，让左侧档案区和右侧主区以纵向分隔线形成清晰结构。

### 2. 左侧档案区映射静态稿

- 保留当前姓名、风险等级、工号、部门、所属项目、命中模型数、核心异常标签的数据字段。
- 通过信息头、字段列表、摘要区三段式样式，映射静态稿的人物档案视觉。
- 不新增额外字段、不新增辅助业务区块。

### 3. 右侧主区外层收口

- 保持 `el-tabs`、错误提示、加载逻辑、默认页签逻辑不变。
- 只调整页签外层、内容承载区、主区边界与留白，不进入各 tab 内部重做内容样式。

## 验证计划

### 代码校验

- 在 `ruoyi-ui` 目录执行：
  - `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`

### 浏览器验证

- 先通过 `nvm use` 确认前端 Node 版本。
- 启动真实前端页面后，使用 `browser-use` 在系统真实页面打开“项目分析详情”弹窗。
- 重点核对：
  - 标题区是否为正式化平直样式
  - 左侧档案区是否按预览稿形成清晰三段层次
  - 右侧主区是否只改外层、不影响“异常明细”内部内容与交互

## 风险控制

- 不改接口、不改 mock 数据、不改异常明细内部组件，避免把外壳样式改动扩大成业务结构调整。
- 单测只更新与外层视觉契约直接相关的断言，避免引入无关回归。