Files
ccdi/docs/reports/implementation/2026-04-29-results-overview-project-analysis-dialog-formal-shell-implementation.md

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.js
    • node tests/unit/project-analysis-dialog-sidebar.test.js
    • node 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 下完成,相关单测通过