# 项目分析弹窗圆角显示方案调整实施记录

## 变更日期

- 2026-05-06

## 保存路径确认

- 本次实施记录保存到 `docs/reports/implementation/`，符合项目实施记录目录规范。

## 变更范围

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

## 实施内容

### 1. 弹窗外壳统一

- 将项目分析弹窗重新收口为单一弹窗壳显示方案。
- 外层 `el-dialog` 统一使用 `8px` 圆角，标题栏与内容区使用同一浅灰工作台背景。
- 移除内部 `24px` 大圆角壳层，避免外层默认圆角、内部大圆角和直角内容区混杂。

### 2. 左侧人物档案面板统一

- 将左侧人物档案和命中模型摘要合并到同一个 `6px` 面板内。
- 人物档案与命中模型摘要之间通过分隔线区分层次，不再使用两个独立大圆角白卡。
- 风险等级和异常标签统一使用 `6px` 状态标识样式。

### 3. 右侧内容区统一

- 右侧主承载区统一为 `6px` 面板，tabs 顶部与内容区共享同一边界。
- 异常明细卡片、流水表格、对象摘要卡片和异常原因快照统一使用 `6px` 圆角。
- 不修改接口、字段、分页、证据库按钮或异常明细业务逻辑。

## 验证情况

- 已通过 Node 版本切换验证：`nvm use`，实际使用 `v14.21.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-abnormal-tab.test.js`
  - `node tests/unit/project-analysis-dialog-empty-field.test.js`
- 已执行 `git diff --check`，相关改动无空白错误。
- 已使用 `browser-use` 打开真实页面 `http://localhost:1025/ccdiProject/detail/90338?tab=overview`，在结果总览页点击“查看详情”打开“项目分析”弹窗验证：
  - 页面标题与业务项目数据正常显示。
  - 弹窗打开后详情接口加载完成，人员工号、异常明细表格与异常对象摘要正常渲染。
  - 左侧面板不再出现大圆角白卡和直角灰底混用。
  - 当前浏览器视口下弹窗无框架错误覆盖，控制台无相关 error/warn。