gitadmin/erp-frontend

Fork 0

Yatu 9f64a4d6f4 Initial commit: ERP Frontend baseline

2026-04-01 17:07:17 +08:00

10 KiB

Raw Blame History

ERP 前端项目分析文档

1. 开发框架分析

技术栈

前端框架: Vue 3 + TypeScript
构建工具: Vite
状态管理: Pinia
UI 组件库: Element Plus
路由库: Vue Router
HTTP 客户端: Axios (推测，基于 API 文件结构)

版本信息 (基于 package.json 分析)

项目使用现代前端技术栈，基于 Vue 3 生态构建。Vite 作为构建工具提供快速开发体验。

2. 项目路由结构

路由配置文件

src/router/index.ts: 路由入口文件，导出路由和 Pinia 实例
src/router/manual.ts: 实际路由配置，包含所有业务路由
src/router/guard.ts: 路由守卫，处理认证和权限控制

路由布局

采用单页面应用结构，基于 MainLayout.vue 布局组件。主要路由结构如下：

/
├── / (Layout 组件)
│   ├── /order/list                 订单列表
│   ├── /goods/list                 商品列表
│   ├── /goods/edit                 新增商品
│   ├── /goods/edit/:id             编辑商品
│   ├── /goods/platform             平台商品
│   ├── /goods/push-log             商品推送日志
│   ├── /warehouse (嵌套路由)       仓库管理
│   │   ├── /list                   仓库列表
│   │   ├── /stock                  库存管理
│   │   ├── /stock-detail/:id       库存详情
│   │   ├── /purchase               采购单管理
│   │   ├── /purchase-detail/:id    采购单详情
│   │   ├── /receiving              收货单管理
│   │   ├── /receiving-detail/:id   收货单详情
│   │   ├── /edit                   新增仓库
│   │   ├── /edit/:id               编辑仓库
│   │   └── /bind-template/:id      仓库模板绑定
│   ├── /print/batch                批量打印
│   ├── /print/log                  打印日志
│   ├── /print/template-library/list 模板列表
│   ├── /print/template-library/design 模板设计
│   ├── /print/batch-detail/:id     批次详情
│   ├── /platform/waybill-accounts  面单账号
│   ├── /platform/shops             店铺管理
│   ├── /platform/shops/callback    授权回调
│   └── /setting (嵌套路由)         系统设置
│       ├── /supplier               供应商管理
│       └── /brand                  品牌管理

路由特性

懒加载: 使用动态导入 (() => import('@/views/...')) 实现路由懒加载
权限控制: 通过路由守卫检查登录状态和权限
布局系统: 多布局支持 (MainLayout, MainLayoutFixed, MainLayoutSafe, MainLayoutSimple, PrintLayout, SimpleLayout)

3. 模块/功能模块分析

3.1 订单管理模块

视图组件: src/views/Order/OrderList.vue
路由: /order/list
功能: 订单列表展示和管理
相关组件: src/components/order/ 目录

3.2 商品管理模块

视图组件:
- src/views/Goods/List.vue - 商品列表
- src/views/Goods/Edit.vue - 商品编辑（新增/编辑）
- src/views/Goods/PlatformGoods.vue - 平台商品
- src/views/Goods/PushLog.vue - 商品推送日志
路由: /goods/list, /goods/edit, /goods/edit/:id, /goods/platform, /goods/push-log
功能: 商品信息管理、平台商品同步、推送日志跟踪
相关组件: src/components/product/ 目录

3.3 仓库管理模块

视图组件:
- src/views/Warehouse/index.vue - 仓库列表
- src/views/Warehouse/Stock.vue - 库存管理
- src/views/Warehouse/StockDetail.vue - 库存详情
- src/views/Warehouse/Purchase.vue - 采购单管理
- src/views/Warehouse/PurchaseDetail.vue - 采购单详情
- src/views/Warehouse/Receiving.vue - 收货单管理
- src/views/Warehouse/ReceivingDetail.vue - 收货单详情
- src/views/Warehouse/Edit.vue - 仓库编辑
- src/views/Warehouse/BindTemplate.vue - 仓库模板绑定
路由: /warehouse 下的所有子路由
功能: 仓库管理、库存管理、采购单、收货单管理、仓库模板绑定
状态管理: 相关 store 模块（推测）

3.4 打印管理模块

视图组件:
- src/views/Print/batch.vue - 批量打印
- src/views/Print/log.vue - 打印日志
- src/views/Print/TemplateList/index.vue - 模板列表
- src/views/Print/TemplateDesign/index.vue - 模板设计
- src/views/Print/batch-detail/[id].vue - 批次详情
路由: /print/ 下的所有路由
功能: 批量打印、打印日志管理、打印模板设计与管理
相关组件: src/components/PrintDialog.vue

3.5 平台管理模块

视图组件:
- src/views/Platform/WaybillAccounts.vue - 面单账号
- src/views/Platform/Shops/index.vue - 店铺管理
- src/views/Platform/Shops/Callback.vue - 授权回调
路由: /platform/ 下的路由
功能: 平台店铺管理、面单账号管理、授权回调处理

3.6 系统设置模块

视图组件:
- src/views/Setting/Supplier.vue - 供应商管理
- src/views/Setting/Brand.vue - 品牌管理
路由: /setting 下的子路由
功能: 供应商管理、品牌管理

3.7 状态管理 (Pinia Stores)

用户认证: src/stores/user.ts
- 管理用户登录状态、token、用户信息
- 提供登录、退出、token 刷新等功能
订单: src/stores/order.ts
- 订单相关状态管理
认证: src/stores/auth.ts
- 认证相关状态

4. 目录结构说明

src/
├── api/                    # API 接口封装
│   ├── auth.ts            # 认证相关 API
│   ├── goods.ts           # 商品 API
│   ├── order.ts           # 订单 API
│   ├── platform.ts        # 平台 API
│   ├── warehouse.ts       # 仓库 API
│   ├── user.ts           # 用户 API
│   └── utils/            # API 工具函数
├── assets/               # 静态资源
├── components/           # 公共组件
│   ├── base/            # 基础组件
│   ├── icons/           # 图标组件
│   ├── order/           # 订单相关组件
│   ├── product/         # 商品相关组件
│   ├── PrintDialog.vue  # 打印对话框
│   └── ...
├── layouts/             # 布局组件
│   ├── MainLayout.vue      # 主布局
│   ├── MainLayoutFixed.vue # 固定布局
│   ├── MainLayoutSafe.vue  # 安全布局
│   ├── MainLayoutSimple.vue# 简单布局
│   ├── PrintLayout.vue     # 打印布局
│   ├── SimpleLayout.vue    # 简单布局
│   └── Sidebar.vue         # 侧边栏
├── router/              # 路由配置
│   ├── index.ts        # 路由入口
│   ├── manual.ts       # 路由配置
│   └── guard.ts        # 路由守卫
├── stores/             # Pinia 状态管理
│   ├── user.ts        # 用户状态
│   ├── order.ts       # 订单状态
│   └── auth.ts        # 认证状态
├── types/              # TypeScript 类型定义
│   ├── user.ts        # 用户类型
│   ├── auth.ts        # 认证类型
│   ├── platform.ts    # 平台类型
│   └── template.ts    # 模板类型
├── views/              # 页面视图
│   ├── Order/         # 订单相关页面
│   ├── Goods/         # 商品相关页面
│   ├── Warehouse/     # 仓库相关页面
│   ├── Print/         # 打印相关页面
│   ├── Platform/      # 平台相关页面
│   ├── Setting/       # 设置相关页面
│   └── ...
└── App.vue            # 根组件

5. 项目特色与架构亮点

5.1 权限控制系统

路由守卫: src/router/guard.ts 实现完整的认证和权限检查
白名单机制: 定义不需要登录即可访问的路由
权限映射: 通过 permissionRoutes 配置路由权限要求
用户角色: 支持基于角色和权限的访问控制

5.2 状态管理设计

Pinia 架构: 使用 Vue 3 推荐的 Pinia 进行状态管理
模块化 Stores: 按业务模块分离 store（用户、订单、认证）
持久化存储: 支持 localStorage 和 sessionStorage 自动同步
响应式状态: 完整的 TypeScript 类型支持

5.3 API 封装

模块化 API: 按业务模块组织 API 文件
统一错误处理: 推测有统一的错误处理机制
类型安全: 基于 TypeScript 的类型定义

5.4 路由设计

布局分离: 多布局系统适应不同页面需求
路由懒加载: 提升应用性能
嵌套路由: 合理的嵌套路由结构组织相关功能
动态路由参数: 支持路由参数传递和 Props 注入

5.5 开发工具集成

Vite 快速构建: 现代化的构建工具提供优秀的开发体验
路径别名: 配置 @ 指向 src 目录，简化导入路径
TypeScript 支持: 完整的类型系统支持

5.6 业务特点

ERP 核心功能: 包含订单、商品、仓库、打印等 ERP 核心模块
多平台支持: 支持店铺管理、平台商品同步等功能
打印模板系统: 专门的打印模板设计和批量打印功能
仓库管理: 完整的仓库、库存、采购、收货管理流程

6. 总结

这是一个功能完善的 ERP 前端系统，基于 Vue 3 现代技术栈构建。项目具有清晰的模块划分、完整的权限控制体系和良好的架构设计。主要特点包括：

技术栈先进: Vue 3 + TypeScript + Vite + Pinia + Element Plus
架构清晰: 模块化设计，职责分离明确
功能完整: 覆盖 ERP 核心业务功能
用户体验: 路由懒加载、布局系统等优化
可维护性: TypeScript 类型安全、代码结构清晰

项目适合作为企业级 ERP 系统的前端部分，具有良好的可扩展性和维护性。

10 KiB Raw Blame History Unescape Escape