# 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 系统的前端部分，具有良好的可扩展性和维护性。