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

结果总览项目分析详情正式化外壳前端实施计划

目标

• 基于 output/mockups/project-analysis-formal-soft-preview.html 的静态预览稿，恢复“项目分析详情”弹窗的正式化、去卡片化外壳样式。
• 本次仅调整详情弹窗整体框架、标题区、左侧人物档案区、右侧主承载区与页签外层视觉。
• 不修改“异常明细”页签内部业务结构、分页、按钮、接口与数据逻辑。

范围

• 修改 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. 弹窗外壳正式化

• 将当前偏渐变、大圆角的详情弹窗外壳改为更平直的正式化工作台样式。
• 顶部保留“结果总览 / 项目分析详情”的信息层级，但改成浅边线、弱装饰、明确留白的标题区。
• 调整整体布局间距，让左侧档案区和右侧主区以纵向分隔线形成清晰结构。

2. 左侧档案区映射静态稿

• 保留当前姓名、风险等级、工号、部门、所属项目、命中模型数、核心异常标签的数据字段。
• 通过信息头、字段列表、摘要区三段式样式，映射静态稿的人物档案视觉。
• 不新增额外字段、不新增辅助业务区块。

3. 右侧主区外层收口

• 保持 el-tabs、错误提示、加载逻辑、默认页签逻辑不变。
• 只调整页签外层、内容承载区、主区边界与留白，不进入各 tab 内部重做内容样式。

验证计划

代码校验

• 在 ruoyi-ui 目录执行：
  • 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

浏览器验证

• 先通过 nvm use 确认前端 Node 版本。
• 启动真实前端页面后，使用 browser-use 在系统真实页面打开“项目分析详情”弹窗。
• 重点核对：
  • 标题区是否为正式化平直样式
  • 左侧档案区是否按预览稿形成清晰三段层次
  • 右侧主区是否只改外层、不影响“异常明细”内部内容与交互

风险控制

• 不改接口、不改 mock 数据、不改异常明细内部组件，避免把外壳样式改动扩大成业务结构调整。
• 单测只更新与外层视觉契约直接相关的断言，避免引入无关回归。