统一信息维护正式化外壳样式
This commit is contained in:
@@ -0,0 +1,34 @@
|
||||
# 员工信息维护与招聘信息管理正式化外壳前端实施计划
|
||||
|
||||
## 目标
|
||||
|
||||
- 基于当前本地最新代码，为 `ccdiBaseStaff` 与 `ccdiStaffRecruitment` 试套正式化外壳样式。
|
||||
- 仅调整查询区、工具条、表格区、分页区与弹窗壳层视觉。
|
||||
- 不改字段顺序、不改按钮位置、不改功能块结构。
|
||||
|
||||
## 范围
|
||||
|
||||
- `ruoyi-ui/src/views/ccdiBaseStaff/index.vue`
|
||||
- `ruoyi-ui/src/views/ccdiStaffRecruitment/index.vue`
|
||||
- `ruoyi-ui/tests/unit/base-staff-formal-shell-layout.test.js`
|
||||
- `ruoyi-ui/tests/unit/staff-recruitment-formal-shell-layout.test.js`
|
||||
|
||||
## 方案
|
||||
|
||||
- 复用现有 `app-container`、`query-form`、`mb8`、弹窗 class，只补最少样式。
|
||||
- 给列表区新增最小表格外壳，保证分页和表格归一。
|
||||
- 通过边框、浅底、留白和表头背景统一正式化视觉。
|
||||
|
||||
## 验证
|
||||
|
||||
- `node tests/unit/base-staff-formal-shell-layout.test.js`
|
||||
- `node tests/unit/staff-recruitment-formal-shell-layout.test.js`
|
||||
- `node tests/unit/employee-asset-maintenance-layout.test.js`
|
||||
- `node tests/unit/staff-recruitment-import-toolbar.test.js`
|
||||
|
||||
## 完成标准
|
||||
|
||||
- 两个页面外壳样式统一
|
||||
- 按钮顺序和功能入口保持不变
|
||||
- 单测通过
|
||||
- 浏览器实测通过
|
||||
@@ -0,0 +1,65 @@
|
||||
# 2026-04-29 批量正式化外壳样式实施计划
|
||||
|
||||
## 目标
|
||||
|
||||
- 基于当前本地最新前端代码，批量推进信息维护相关页面的正式化外壳样式。
|
||||
- 严格保持“只改样式、不改内容和功能”的边界。
|
||||
- 复用已经在详情弹窗、员工信息维护页、招聘信息管理页验证过的正式化样式骨架。
|
||||
|
||||
## 范围
|
||||
|
||||
- `ruoyi-ui/src/views/ccdiAccountInfo/index.vue`
|
||||
- `ruoyi-ui/src/views/ccdiCreditInfo/index.vue`
|
||||
- `ruoyi-ui/src/views/ccdiCustEnterpriseRelation/index.vue`
|
||||
- `ruoyi-ui/src/views/ccdiCustFmyRelation/index.vue`
|
||||
- `ruoyi-ui/src/views/ccdiIntermediary/index.vue`
|
||||
- `ruoyi-ui/src/views/ccdiIntermediary/components/SearchForm.vue`
|
||||
- `ruoyi-ui/src/views/ccdiIntermediary/components/DataTable.vue`
|
||||
- `ruoyi-ui/src/views/ccdiIntermediary/components/DetailDialog.vue`
|
||||
- `ruoyi-ui/src/views/ccdiIntermediary/components/EditDialog.vue`
|
||||
- `ruoyi-ui/src/views/ccdiIntermediary/components/ImportDialog.vue`
|
||||
- `ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue`
|
||||
- `ruoyi-ui/src/views/ccdiStaffEnterpriseRelation/index.vue`
|
||||
- `ruoyi-ui/src/views/ccdiStaffFmyRelation/index.vue`
|
||||
- `ruoyi-ui/src/views/ccdiStaffTransfer/index.vue`
|
||||
|
||||
## 实施策略
|
||||
|
||||
### 1. 查询区统一正式化
|
||||
|
||||
- 保留原有查询字段、排布逻辑和按钮位置。
|
||||
- 为查询区补统一白色面板、边框、克制圆角和更稳重的标签文字。
|
||||
- 收紧表单项底部留白，统一输入框、下拉框、日期控件的边框和圆角。
|
||||
|
||||
### 2. 工具条统一正式化
|
||||
|
||||
- 保留搜索、重置、新增、导入、失败记录入口及其相对位置。
|
||||
- 统一工具条外层白色承载区。
|
||||
- 按钮仅调整圆角、边框与视觉重量，不改变语义和行为。
|
||||
|
||||
### 3. 表格承载区统一正式化
|
||||
|
||||
- 新增或复用 `formal-table-shell` 包裹列表表格与分页区。
|
||||
- 收紧表头和行高，提升单屏信息密度。
|
||||
- 主体文本尽量左对齐，保留选择列和操作列居中。
|
||||
|
||||
### 4. 弹窗与详情区统一正式化
|
||||
|
||||
- 统一弹窗圆角、头部下边线、正文浅底。
|
||||
- 详情区、导入弹窗、编辑弹窗使用更克制的信息面板样式。
|
||||
- 不重排现有字段，不新增删减交互块。
|
||||
|
||||
## 验证计划
|
||||
|
||||
- 复用现有样式契约单测，确保已完成页面没有回退。
|
||||
- 使用浏览器打开真实业务路由进行验证，禁止使用 prototype 页面替代。
|
||||
- 核对关键页面是否保持：
|
||||
- 查询区与工具条仍在原位置
|
||||
- 新增、导入、失败记录按钮仍按原顺序出现
|
||||
- 表格列和弹窗内容结构不变
|
||||
|
||||
## 风险控制
|
||||
|
||||
- 不使用旧 patch 中的结构改法，只借用可复用的正式化视觉参数。
|
||||
- 每个页面只处理最外层承载和控件外观，不触碰业务字段、接口、校验、按钮逻辑。
|
||||
- 若真实页面路由可访问，则以真实页面结果为准；若不可访问，保留源码级验证说明。
|
||||
@@ -0,0 +1,56 @@
|
||||
# 结果总览项目分析详情正式化外壳前端实施计划
|
||||
|
||||
## 目标
|
||||
|
||||
- 基于 `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 数据、不改异常明细内部组件，避免把外壳样式改动扩大成业务结构调整。
|
||||
- 单测只更新与外层视觉契约直接相关的断言，避免引入无关回归。
|
||||
Reference in New Issue
Block a user