Files
ccdi/docs/reports/implementation/2026-05-06-project-analysis-dialog-radius-unification.md

54 lines
2.6 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 项目分析弹窗圆角显示方案调整实施记录
## 变更日期
- 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。