2.3 KiB
2.3 KiB
结果总览项目分析详情正式化外壳实施记录
变更日期
- 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.jsnode tests/unit/project-analysis-dialog-sidebar.test.jsnode 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下完成,相关单测通过