taiyi/dingdanquanliucheng
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
6c8ff74924
dingdanquanliucheng/后台管理系统重构方案.md
wsb1224 6bc174564b 优化后台页面布局
2026-05-26 11:36:57 +08:00

13 KiB
Raw Blame History

后台管理系统重构方案

日期：2026-05-26 | 范围：frontend/web-admin 前端页面与路由

一、现状概览

当前系统共有 27 个 .vue 页面文件，路由注册了 22 条，侧边栏导航挂了 16 个入口。

核心问题：

  1. 6 组功能重叠 — 多个页面做同一件事，入口分散
  2. 4 个幽灵页面 — 已写好但不在导航中，或完全是演示数据
  3. 1 个死链 — 导航中的 /customers/import 在路由表中不存在
  4. 1 个万能页面 — BusinessPage 把订单录入、履约、提醒、配置、员工管理全塞在一起

二、幽灵页面确认结论

通过对比 API 调用和数据来源，确认以下页面的状态：

页面 路由 数据来源 判断
ManagerFlowPage /manager（不在导航） 100% 硬编码演示数据，零 API 调用 可删除 — 纯原型
SalesFlowPage /sales-flow（不在导航） 调用 /api/orders/flow-overview（该接口后端未定义），全部回退到演示数据 可删除 — 功能已被 OrdersPage + ApprovalsPage + OrderTrackingPage 覆盖
EmployeesPage 无路由 调用 fetchSystemUsers / fetchSystemRoles，与 SystemPage 用户管理 tab 完全相同 可删除 — 是 SystemPage 的重复版本
ProductPage 无路由 独立产品管理页面，功能已被 MasterDataPage 的"产品管理"tab 完全覆盖 可删除 — MasterDataPage 已取代
SupplierPage 无路由 独立供应商管理页面，功能已被 MasterDataPage 的"工厂/供应商"tab 完全覆盖 可删除 — MasterDataPage 已取代

另外 DriverPage (/driver/tasks) 虽不在导航中，但有独立后端接口 fetchDriverTasks，属于有效功能，需要决定是否加入导航。

三、重叠组详细分析与合并策略

重叠组 1：配置管理（ConfigPage vs ConfigCenterPage）

维度 ConfigPage (/config) ConfigCenterPage (/config-center)
标题 配置管理 系统配置中心
核心功能 规则校验状态展示 + 配置项编辑 配置项编辑（含启用/禁用开关）+ 提醒检查触发
后端接口 fetchConfigItem / updateConfigItem 同左 + runAllReminderChecks 等
特有能力 自动校验项对齐展示 按业务分组查看 + 一键触发提醒检查

合并方案：保留 ConfigPage，合入 ConfigCenterPage 的能力

  • ConfigPage 保留"配置项编辑"和"校验状态展示"
  • 从 ConfigCenterPage 搬入：启用/禁用开关、配置分组视图、提醒检查按钮
  • 删除 ConfigCenterPage
  • 新路由：/config

重叠组 2：权限与审计（PermissionsCenterPage vs AuditPage）

维度 PermissionsCenterPage (/permissions) AuditPage (/audit)
标题 权限与可见性中心 权限与审计
角色可见性 有 有（相同）
字段脱敏规则 有（可编辑开关） 无
权限矩阵 有（角色 x 模块表格） 无
审计日志 有（展示） 有（展示 + 筛选 + 导出）

合并方案：保留 AuditPage，合入 PermissionsCenterPage 的独有能力

  • AuditPage 保留"审计日志"（筛选 + 导出）
  • 从 PermissionsCenterPage 搬入：字段脱敏规则编辑、权限矩阵表格
  • 删除 PermissionsCenterPage
  • 新路由：/audit，标题改为"权限与审计"

重叠组 3：客户管理（CustomerCenterPage vs MasterDataPage 客户 tab）

维度 CustomerCenterPage (/customers) MasterDataPage 客户 tab (/master-data)
客户录入 有（基础表单） 有（完整表单 + 模态框）
客户导入 有（基础） 有（完整）
客户列表 有（基础） 有（完整 + 详情弹窗）
新客户判定 有 有
欠款提醒 有 无

MasterDataPage 的客户管理功能更完整（对接了真实 API fetchCustomerList、createCustomer、importCustomers、fetchCustomerDetail），CustomerCenterPage 是早期简化版本。

合并方案：保留 MasterDataPage 的客户管理代码，移至独立的 CustomerCenterPage

  • 用 MasterDataPage 客户 tab 的完整代码替换 CustomerCenterPage
  • MasterDataPage 去掉"客户管理"tab，只保留：产品分类、产品管理、工厂/供应商
  • 新路由：/customers（CustomerCenterPage）+ /master-data（MasterDataPage）

重叠组 4：员工/用户管理（EmployeeCenterPage vs SystemPage）

维度 EmployeeCenterPage (/employees) SystemPage (/system)
用户列表 有（只读展示） 有（含查询、新增、编辑、重置密码）
角色管理 无独立 tab 有（角色 CRUD）
菜单管理 无 有（菜单 CRUD）
权限分配 有（基础表单） 有（角色授权）

SystemPage 功能远比 EmployeeCenterPage 完整。EmployeeCenterPage 实际上是 SystemPage 用户列表的简化只读版本。

合并方案：保留 SystemPage，删除 EmployeeCenterPage

  • 导航中"员工中心"直接链接到 /system
  • 删除 EmployeeCenterPage
  • 新路由：/system

重叠组 5：订单录入（散落在 4 个页面）

页面 订单录入位置
OrdersPage 有完整录入表单（客户、来源、交付方式、备注）
SalesFlowPage 有录入 tab（客户、产品、来源、交付方式、备注）
BusinessPage 有"订单录入"tab（客户、产品、规格、数量、单价、来源、支付方式）
SalesmanCenterPage 有"快速录单"（客户、产品、数量、售价、备注）

合并方案：统一到 OrdersPage，其余页面删除或精简

  • OrdersPage 作为订单录入的唯一入口，增加产品/数量/单价字段（从 BusinessPage 搬入）
  • SalesFlowPage 整体删除（已在幽灵页面确认中）
  • BusinessPage 删除订单录入功能
  • SalesmanCenterPage 的录单功能改为跳转到 OrdersPage

重叠组 6：审批管理（ApprovalsPage vs ManagerFlowPage）

合并方案：删除 ManagerFlowPage（已在幽灵页面确认中）

ManagerFlowPage 的"发厂"和"履约"功能目前使用演示数据，后端未实现。如后续需要，可在 ApprovalsPage 中扩展 tab。

四、新导航结构（按功能域分组）

工作台
├── 后台工作台          /dashboard          (DashboardPage)
└── 审批中心            /approvals          (ApprovalsPage)

主数据
├── 客户管理            /customers          (CustomerCenterPage — 用 MasterDataPage 客户 tab 代码替换)
├── 基础资料            /master-data        (MasterDataPage — 去掉客户 tab)
└── 司机管理            /driver/tasks       (DriverPage — 从隐藏提升到可见)

订单与审批
├── 订单中心            /orders             (OrdersPage — 合并录入能力)
├── 订单轨迹            /orders/tracking    (OrderTrackingPage)
└── 提醒中心            /reminders          (ReminderCenterPage)

配置与权限
├── 配置管理            /config             (ConfigPage — 合并 ConfigCenterPage)
├── 权限与审计          /audit              (AuditPage — 合并 PermissionsCenterPage)
└── 系统管理            /system             (SystemPage — 吸收 EmployeeCenterPage)

报表
├── 报表统计            /reports/performance (ReportsPage)
└── 报表核对            /reports/audit       (ReportAuditPage)

AI 能力
└── AI 识别             /ai-recognition     (AIRecognitionPage)

对比变化：

指标 重构前 重构后
导航入口数 16 12
页面文件数 27 18（减少 9 个）
路由数 22 15（减少 7 条）
死链 1（/customers/import） 0
幽灵页面 5 0

五、具体文件变更清单

删除的文件（9 个）

文件 原因
views/SalesFlowPage.vue 幽灵页面，功能被 OrdersPage + ApprovalsPage 覆盖
views/ManagerFlowPage.vue 幽灵页面，100% 演示数据
views/EmployeesPage.vue 幽灵页面，SystemPage 的重复版本
views/ProductPage.vue 幽灵页面，已被 MasterDataPage 取代
views/SupplierPage.vue 幽灵页面，已被 MasterDataPage 取代
views/ConfigCenterPage.vue 合并入 ConfigPage
views/PermissionsCenterPage.vue 合并入 AuditPage
views/EmployeeCenterPage.vue 功能被 SystemPage 完整覆盖
views/BusinessPage.vue "万能页面"，各功能归还到对应专业页面

修改的文件（5 个）

文件 变更内容
views/ConfigPage.vue 合入 ConfigCenterPage 的启用/禁用开关、分组视图、提醒检查按钮
views/AuditPage.vue 合入 PermissionsCenterPage 的脱敏规则编辑、权限矩阵表格
views/CustomerCenterPage.vue 用 MasterDataPage 客户 tab 的完整代码替换当前简化版本
views/MasterDataPage.vue 删除客户管理 tab，保留产品分类 + 产品 + 供应商三个 tab
views/OrdersPage.vue 从 BusinessPage 搬入产品/数量/单价等字段，完善录入表单

修改的配置文件（2 个）

文件 变更内容
router.js 删除 7 条废弃路由，更新组件引用，修复死链
App.vue 重写 navGroups，从 3 组 16 入口改为 5 组 12 入口

六、路由变更对照表

删除的路由

旧路由 对应组件 原因
/config-center ConfigCenterPage 合并入 /config
/permissions PermissionsCenterPage 合并入 /audit
/employees EmployeeCenterPage 合并入 /system
/manager ManagerFlowPage 幽灵页面删除
/sales-flow SalesFlowPage 幽灵页面删除
/customers/import （不存在） 死链修复：客户导入改为 CustomerCenterPage 内的功能入口
/business BusinessPage 万能页面删除，功能已分散

保留的路由

路由 组件 变更
/login LoginPage 不变
/dashboard DashboardPage 不变
/approvals ApprovalsPage 不变
/approvals/:id ApprovalDetailPage 不变
/customers CustomerCenterPage 代码替换为 MasterDataPage 客户 tab 版本
/master-data MasterDataPage 去掉客户 tab
/orders OrdersPage 合入 BusinessPage 录单字段
/orders/:id OrderDetailPage 不变
/orders/tracking OrderTrackingPage 不变
/driver/tasks DriverPage 新增到导航
/driver/tasks/:id DriverTaskDetailPage 不变
/config ConfigPage 合入 ConfigCenterPage 能力
/audit AuditPage 合入 PermissionsCenterPage 能力
/system SystemPage 吸收 EmployeeCenterPage 功能
/reminders ReminderCenterPage 不变
/ai-recognition AIRecognitionPage 不变
/reports/performance ReportsPage 不变
/reports/audit ReportAuditPage 不变

七、实施建议

分批推进顺序

批次 内容 风险 预估工作量
第 1 批 删除 5 个幽灵页面 + 更新路由 + 修复死链 低 — 这些页面本来就不在导航中 0.5h
第 2 批 合并 ConfigPage + ConfigCenterPage 中 — 需要整合两个页面的 UI 和逻辑 1.5h
第 3 批 合并 AuditPage + PermissionsCenterPage 中 — 权限矩阵和脱敏规则需要仔细搬移 1.5h
第 4 批 用 MasterDataPage 客户 tab 替换 CustomerCenterPage 中 — 需要确保 API 调用对齐 1h
第 5 批 精简 MasterDataPage（去掉客户 tab）+ 删除 BusinessPage 低 — 删减为主 0.5h
第 6 批 合并 EmployeeCenterPage 到 SystemPage + 删除 EmployeeCenterPage 低 — SystemPage 已经更完整 0.5h
第 7 批 OrdersPage 合入 BusinessPage 录单字段 + 更新导航 中 — 录单表单需要补齐字段 1h
第 8 批 重写 App.vue navGroups + 最终验证 低 — 纯配置变更 0.5h

每批的验证方法

每完成一批后：

  1. 启动前端开发服务器，确认无编译报错
  2. 逐个点击导航菜单，确认每个页面可正常加载
  3. 检查浏览器控制台无 JS 报错
  4. 确认被合并/删除页面的旧 URL 有合理的 404 或重定向处理

八、风险点

  1. MasterDataPage 客户 tab 代码量大（1700+ 行）：替换 CustomerCenterPage 时需要确保 mockApi 的所有导入函数都存在
  2. BusinessPage 删除后，其中的"履约调度"功能目前后端无真实接口，删除不影响实际业务，但如果后续需要，需要重新开发
  3. DriverPage 提升到导航：需要确认司机功能是否已经对业务方可见，避免过早暴露未完成功能
  4. /customers/import 死链：如果有用户书签了这个 URL，需要在路由中加一条重定向到 /customers