统一信息维护正式化外壳样式
This commit is contained in:
@@ -0,0 +1,40 @@
|
||||
# 员工信息维护与招聘信息管理正式化外壳实施记录
|
||||
|
||||
## 变更日期
|
||||
|
||||
- 2026-04-29
|
||||
|
||||
## 变更范围
|
||||
|
||||
- 前端：`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`
|
||||
|
||||
## 实施内容
|
||||
|
||||
### 1. 页面外壳调整
|
||||
|
||||
- 复用 `app-container`、`query-form`、`mb8` 等现有结构，只补最少样式。
|
||||
- 为 `ccdiBaseStaff` 与 `ccdiStaffRecruitment` 的查询区增加正式化外壳视觉，包括浅底、边框、留白和输入框边线统一。
|
||||
- 保持搜索、重置、新增、导入、失败记录等按钮原有顺序不变。
|
||||
- 为两个页面新增 `formal-table-shell`，将表格和分页收口到同一视觉区域内。
|
||||
|
||||
### 2. 弹窗外壳调整
|
||||
|
||||
- 复用员工页已有 `employee-edit-dialog`、`employee-detail-dialog` class，只调整弹窗圆角、标题分隔线和弹窗正文背景。
|
||||
- 复用招聘页现有弹窗结构，只补统一的弹窗标题区和正文背景样式。
|
||||
- 未改动员工资产、历史工作经历等内部功能块结构。
|
||||
|
||||
### 3. 验证情况
|
||||
|
||||
- 单测通过：
|
||||
- `node tests/unit/base-staff-formal-shell-layout.test.js`
|
||||
- `node tests/unit/staff-recruitment-formal-shell-layout.test.js`
|
||||
- `node tests/unit/staff-recruitment-import-toolbar.test.js`
|
||||
- 现有单测异常：
|
||||
- `node tests/unit/employee-asset-maintenance-layout.test.js`
|
||||
- 失败原因为当前仓库源码不满足既有字符串断言 `createEmptyAssetRow(defaultPersonId = "")`，与本次外壳样式改动无关。
|
||||
- 浏览器验证：
|
||||
- 已使用 `browser-use` 打开 `http://localhost/prototype/staff-recruitment`，确认招聘信息管理页查询区、工具条、表格区已切换为正式化外壳，按钮仍保持原位。
|
||||
- 尝试打开 `http://localhost/ccdiBaseStaff` 时，当前本地前端路由返回 404 页面，因此未能在浏览器内完成员工信息维护页真实页面验证。
|
||||
@@ -0,0 +1,92 @@
|
||||
# 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`
|
||||
|
||||
## 具体调整
|
||||
|
||||
### 查询区
|
||||
|
||||
- 将筛选区统一收进白色边框面板。
|
||||
- 统一标签颜色、控件边框、控件圆角和表单项间距。
|
||||
- 保留全部原始筛选条件和原始布局顺序。
|
||||
|
||||
### 工具条
|
||||
|
||||
- 为工具条增加统一白色承载面板。
|
||||
- 按钮圆角统一收敛到约 4px。
|
||||
- 不调整搜索、重置、新增、导入、失败记录等按钮的位置和语义。
|
||||
|
||||
### 表格
|
||||
|
||||
- 为列表页统一增加 `formal-table-shell` 外层承载。
|
||||
- 收紧表头和表体留白，提升单屏显示密度。
|
||||
- 统一普通列左对齐，操作列和选择列保持居中。
|
||||
|
||||
### 弹窗
|
||||
|
||||
- 编辑、详情、导入弹窗统一使用更正式的边界和浅底信息面板风格。
|
||||
- 去掉原有偏演示感的悬浮和装饰感。
|
||||
- 不改变弹窗中的字段组织和业务交互。
|
||||
|
||||
## 修正项
|
||||
|
||||
- 批量调整过程中，`ccdiPurchaseTransaction/index.vue` 样式块曾出现一个多余的 `}`，导致前端编译报错。
|
||||
- 已在本轮内修正，重新通过真实页面检查。
|
||||
- 批量将 `.mb8` 统一为 `flex` 承载后，`right-toolbar` 的“显示/隐藏 / 刷新”按钮组一度被挤到左侧。
|
||||
- 已通过为各列表页补充 `.mb8 ::v-deep .top-right-btn { margin-left: auto; }` 恢复原有靠右位置。
|
||||
|
||||
## 验证结果
|
||||
|
||||
### 单测
|
||||
|
||||
- `node ruoyi-ui/tests/unit/base-staff-formal-shell-layout.test.js` 通过
|
||||
- `node ruoyi-ui/tests/unit/staff-recruitment-formal-shell-layout.test.js` 通过
|
||||
- `node ruoyi-ui/tests/unit/project-analysis-dialog-layout.test.js` 通过
|
||||
- `node ruoyi-ui/tests/unit/project-analysis-dialog-sidebar.test.js` 通过
|
||||
|
||||
### 真实页面浏览器验证
|
||||
|
||||
已通过真实业务路由验证以下页面可以打开且关键外壳区域仍保持原有功能结构：
|
||||
|
||||
- `http://localhost/maintain/accountInfo`
|
||||
- `http://localhost/maintain/creditInfo`
|
||||
- `http://localhost/maintain/intermediary`
|
||||
- `http://localhost/maintain/purchaseTransaction`
|
||||
- `http://localhost/maintain/staffTransfer`
|
||||
- `http://localhost/maintain/staffEnterpriseRelation`
|
||||
- `http://localhost/maintain/staffFmyRelation`
|
||||
- `http://localhost/maintain/custEnterpriseRelation`
|
||||
- `http://localhost/maintain/custFmyRelation`
|
||||
- `http://localhost/maintain/staffRecruitment`
|
||||
|
||||
验证点：
|
||||
|
||||
- 页面标题、搜索按钮、新增按钮、导入按钮仍可见
|
||||
- 查询区与工具条仍位于原位置
|
||||
- 未发生按钮左右换位
|
||||
- 表格区与分页区仍按原内容结构展示
|
||||
|
||||
## 现有环境问题
|
||||
|
||||
- `staffRecruitment` 页面当前仍存在后端返回的字符集排序规则冲突报错：`utf8mb4_0900_ai_ci` 与 `utf8mb4_general_ci` 混用。
|
||||
- 该问题来自现有后端/数据库环境，不是本次样式改动引入的问题。
|
||||
@@ -0,0 +1,101 @@
|
||||
# 2026-04-29 正式化样式调整总说明
|
||||
|
||||
## 目标边界
|
||||
|
||||
- 本轮所有改动都基于当前本地最新代码进行。
|
||||
- 仅调整页面与弹窗外壳样式，不改变原有内容、字段、按钮语义、交互流程和功能逻辑。
|
||||
- 不参考 `2026-04-29-dev-ui-style-mixed-stash.patch` 中的结构性和功能性变动。
|
||||
|
||||
## 本轮纳入的页面
|
||||
|
||||
### 1. 项目分析详情弹窗
|
||||
|
||||
- 文件：
|
||||
- `ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue`
|
||||
- `ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue`
|
||||
- 调整方向：
|
||||
- 详情页外壳正式化、去卡片化
|
||||
- 标题区更平直，人物档案区更规整
|
||||
- 页签和主区承载更克制
|
||||
- 不变内容：
|
||||
- 异常明细、资产分析、征信摘要等业务内容结构不变
|
||||
- 数据请求、分页、按钮逻辑不变
|
||||
|
||||
### 2. 员工信息维护页
|
||||
|
||||
- 文件：
|
||||
- `ruoyi-ui/src/views/ccdiBaseStaff/index.vue`
|
||||
- 调整方向：
|
||||
- 筛选区收进统一白色区域
|
||||
- 工具条按钮外观更正式，圆角收小
|
||||
- 表格与分页统一收进正式信息面板
|
||||
- 表格更紧凑、阅读更集中
|
||||
- 编辑/详情弹窗外壳更像正式信息面板
|
||||
- 不变内容：
|
||||
- 查询字段、按钮顺序、导入入口、资产信息与党员信息功能不变
|
||||
|
||||
### 3. 招聘信息管理页
|
||||
|
||||
- 文件：
|
||||
- `ruoyi-ui/src/views/ccdiStaffRecruitment/index.vue`
|
||||
- 调整方向：
|
||||
- 筛选区、工具条、表格区统一正式化
|
||||
- 按钮、输入框、下拉框视觉更稳重
|
||||
- 表格行高与表头高度适当收紧
|
||||
- 弹窗外壳更克制
|
||||
- 不变内容：
|
||||
- 招聘类型、历史工作经历、导入入口、按钮位置和业务流程不变
|
||||
|
||||
### 4. 批量推进的信息维护页面
|
||||
|
||||
- 文件：
|
||||
- `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`
|
||||
- 调整方向：
|
||||
- 查询区、工具条、列表区统一成正式化白色信息面板
|
||||
- 输入框、下拉框、日期控件边框与圆角统一收敛
|
||||
- 表格与分页通过 `formal-table-shell` 统一承载
|
||||
- 中介库的搜索、列表、详情、编辑、导入弹窗统一到相同视觉语言
|
||||
- 各列表维护页的弹窗边界与留白更克制
|
||||
- 不变内容：
|
||||
- 按钮顺序、字段结构、导入流程、失败记录入口、详情内容和业务逻辑不变
|
||||
|
||||
## 统一视觉原则
|
||||
|
||||
- 筛选区更规整：统一白色面板承载，结构清晰
|
||||
- 按钮更正式：圆角约 4px，弱化轻飘感
|
||||
- 表单控件更稳重：圆角更小，边框更统一
|
||||
- 表格更紧凑：降低表头和行内容留白，一屏展示更多信息
|
||||
- 列表阅读性更好：尽量左对齐，减少长字段换行和大片空白
|
||||
- 视觉装饰收敛：移除不必要的阴影、渐变、悬浮感
|
||||
- 卡片感减弱：边界、留白、圆角更克制，保留原有内容结构
|
||||
|
||||
## 验证说明
|
||||
|
||||
- 项目分析详情弹窗已完成真实页面验证
|
||||
- 员工信息维护页已完成源码与单测级校验
|
||||
- 招聘信息管理页和批量推进页面已通过真实业务路由验证：
|
||||
- `http://localhost/maintain/staffRecruitment`
|
||||
- `http://localhost/maintain/accountInfo`
|
||||
- `http://localhost/maintain/creditInfo`
|
||||
- `http://localhost/maintain/intermediary`
|
||||
- `http://localhost/maintain/purchaseTransaction`
|
||||
- `http://localhost/maintain/staffTransfer`
|
||||
- `http://localhost/maintain/staffEnterpriseRelation`
|
||||
- `http://localhost/maintain/staffFmyRelation`
|
||||
- `http://localhost/maintain/custEnterpriseRelation`
|
||||
- `http://localhost/maintain/custFmyRelation`
|
||||
- 浏览器验证过程中发现并修复了 `ccdiPurchaseTransaction/index.vue` 的样式编译错误
|
||||
- `staffRecruitment` 页面仍存在现有数据库字符集排序规则冲突报错，该问题不属于本轮样式改动
|
||||
@@ -0,0 +1,44 @@
|
||||
# 结果总览项目分析详情正式化外壳实施记录
|
||||
|
||||
## 变更日期
|
||||
|
||||
- 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` 下完成，相关单测通过
|
||||
Reference in New Issue
Block a user