ccdi/docs/plans/frontend/2026-04-29-batch-formal-shell-rollout-frontend-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

实施策略

1. 查询区统一正式化

• 保留原有查询字段、排布逻辑和按钮位置。
• 为查询区补统一白色面板、边框、克制圆角和更稳重的标签文字。
• 收紧表单项底部留白，统一输入框、下拉框、日期控件的边框和圆角。

2. 工具条统一正式化

• 保留搜索、重置、新增、导入、失败记录入口及其相对位置。
• 统一工具条外层白色承载区。
• 按钮仅调整圆角、边框与视觉重量，不改变语义和行为。

3. 表格承载区统一正式化

• 新增或复用 formal-table-shell 包裹列表表格与分页区。
• 收紧表头和行高，提升单屏信息密度。
• 主体文本尽量左对齐，保留选择列和操作列居中。

4. 弹窗与详情区统一正式化

• 统一弹窗圆角、头部下边线、正文浅底。
• 详情区、导入弹窗、编辑弹窗使用更克制的信息面板样式。
• 不重排现有字段，不新增删减交互块。

验证计划

• 复用现有样式契约单测，确保已完成页面没有回退。
• 使用浏览器打开真实业务路由进行验证，禁止使用 prototype 页面替代。
• 核对关键页面是否保持：
  • 查询区与工具条仍在原位置
  • 新增、导入、失败记录按钮仍按原顺序出现
  • 表格列和弹窗内容结构不变

风险控制

• 不使用旧 patch 中的结构改法，只借用可复用的正式化视觉参数。
• 每个页面只处理最外层承载和控件外观，不触碰业务字段、接口、校验、按钮逻辑。
• 若真实页面路由可访问，则以真实页面结果为准；若不可访问，保留源码级验证说明。