230 lines
10 KiB
Markdown
230 lines
10 KiB
Markdown
# 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 业务特点
|
||
1. **ERP 核心功能**: 包含订单、商品、仓库、打印等 ERP 核心模块
|
||
2. **多平台支持**: 支持店铺管理、平台商品同步等功能
|
||
3. **打印模板系统**: 专门的打印模板设计和批量打印功能
|
||
4. **仓库管理**: 完整的仓库、库存、采购、收货管理流程
|
||
|
||
## 6. 总结
|
||
|
||
这是一个功能完善的 ERP 前端系统，基于 Vue 3 现代技术栈构建。项目具有清晰的模块划分、完整的权限控制体系和良好的架构设计。主要特点包括：
|
||
|
||
- **技术栈先进**: Vue 3 + TypeScript + Vite + Pinia + Element Plus
|
||
- **架构清晰**: 模块化设计，职责分离明确
|
||
- **功能完整**: 覆盖 ERP 核心业务功能
|
||
- **用户体验**: 路由懒加载、布局系统等优化
|
||
- **可维护性**: TypeScript 类型安全、代码结构清晰
|
||
|
||
项目适合作为企业级 ERP 系统的前端部分，具有良好的可扩展性和维护性。 |