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