taiyi/dingdanquanliucheng
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
6c8ff74924
dingdanquanliucheng/后台管理系统重构方案.md

278 lines
13 KiB
Markdown
Raw Normal View History

优化后台页面布局
2026-05-26 11:36:57 +08:00
# 后台管理系统重构方案
> 日期：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`
Reference in New Issue Copy Permalink