57 lines
2.6 KiB
Markdown
57 lines
2.6 KiB
Markdown
|
# 结果总览项目分析详情正式化外壳前端实施计划
|
||
|
|
|
||
|
|
## 目标
|
||
|
|
|
||
|
|
- 基于 `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 数据、不改异常明细内部组件，避免把外壳样式改动扩大成业务结构调整。
|
||
|
|
- 单测只更新与外层视觉契约直接相关的断言，避免引入无关回归。
|