ccdi/docs/reports/implementation/2026-04-29-batch-formal-shell-rollout-implementation.md

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 混用。
• 该问题来自现有后端/数据库环境，不是本次样式改动引入的问题。