ccdi/docs/plans/frontend/2026-04-29-base-staff-and-staff-recruitment-formal-shell-frontend-implementation.md

员工信息维护与招聘信息管理正式化外壳前端实施计划

目标

• 基于当前本地最新代码，为 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

完成标准

• 两个页面外壳样式统一
• 按钮顺序和功能入口保持不变
• 单测通过
• 浏览器实测通过