前段结构说明
1. 项目概述
Wimoor UI是一个基于 Vue 3 + Element Plus 的企业级前端应用，由深圳万墨信息技术有限公司开发。该系统提供了全面的业务管理功能，包括 ERP、Amazon 业务管理、财务管理和系统管理等模块，旨在为企业提供高效、便捷的业务运营解决方案。
2. 技术栈
2.1 核心技术
- 前端框架: Vue 3 (Composition API)
- UI 组件库: Element Plus
- 构建工具: Vite
- 路由管理: Vue Router 4
- 状态管理: Vuex 4
- HTTP 客户端: Axios
- 数据可视化: ECharts 6
2.2 辅助技术
- 图标库: SVG Icons
- 富文本编辑器: TinyMCE
- 文件上传: 自定义 FileUpload 组件
- 打印功能: vue3-print-nb
- 日期处理: 自定义日期工具函数
- 权限控制: 自定义指令 (v-hasPerm, v-hasPermi)
3. 目录结构
├── src/
│ ├── api/ # API 接口定义
│ │ ├── amazon/ # Amazon 业务相关接口
│ │ ├── erp/ # ERP 业务相关接口
│ │ ├── finance/ # 财务相关接口
│ │ └── sys/ # 系统管理相关接口
│ ├── assets/ # 静态资源
│ │ ├── css/ # 全局样式
│ │ ├── icons/ # SVG 图标
│ │ └── image/ # 图片资源
│ ├── components/ # 通用组件
│ │ ├── dialog/ # 对话框组件
│ │ ├── DictTag/ # 字典标签组件
│ │ ├── Editor/ # 富文本编辑器组件
│ │ ├── FileUpload/ # 文件上传组件
│ │ ├── ImageUpload/ # 图片上传组件
│ │ ├── Pagination/ # 分页组件
│ │ ├── RightToolbar/ # 右侧工具栏组件
│ │ ├── SvgIcon/ # SVG 图标组件
│ │ └── Table/ # 表格组件
│ ├── directive/ # 自定义指令
│ ├── filters/ # 全局过滤器
│ ├── hooks/ # 自定义 Hooks
│ ├── layout/ # 布局组件
│ ├── model/ # 数据模型
│ ├── plugins/ # 插件配置
│ ├── router/ # 路由配置
│ │ ├── modules/ # 路由模块
│ │ └── index.js # 路由入口
│ ├── store/ # Vuex 状态管理
│ │ ├── modules/ # 状态模块
│ │ └── index.js # 状态管理入口
│ ├── utils/ # 工具函数
│ ├── views/ # 页面视图
│ │ ├── amazon/ # Amazon 业务视图
│ │ ├── customized/ # 定制化视图
│ │ ├── dashboard/ # 仪表盘视图
│ │ ├── erp/ # ERP 业务视图
│ │ ├── finance/ # 财务视图
│ │ └── sys/ # 系统管理视图
│ ├── App.vue # 根组件
│ └── main.js # 应用入口
├── .gitignore # Git 忽略配置
├── package.json # 项目依赖
├── README.md # 项目说明
└── vite.config.js # Vite 配置
4. 核心功能模块
4.1 仪表盘 (Dashboard)
- 展示核心业务指标（销售额、订单量、退货量等）
- 提供销售趋势图、市场份额饼图、销售对比图等数据可视化
- 显示实时业务数据摘要
4.2 ERP 模块
- 库存管理: 库存查询、库存调拨、库存盘点
- 采购管理: 采购计划、采购订单、采购变更
- 销售管理: 销售订单、订单发货、订单跟踪
- 物料管理: 物料信息、物料分类、品牌管理
- 仓库管理: 仓库信息、仓库地址、货架管理
- 发货管理: 发货计划、发货处理、运输管理
4.3 Amazon 模块
- Listing 管理: 产品列表、产品编辑、销售状态管理
- 订单管理: 订单列表、订单详情、订单处理
- 广告管理: 广告活动、广告绩效、广告优化
- 库存管理: FBA 库存、库存报告、补货建议
- 财务分析: 销售报表、费用分析、利润计算
- 促销管理: 优惠券、促销活动、秒杀管理
4.4 财务管理
- 总账管理: 总账查询、总账凭证、总账报表
- 报表管理: 财务报表、自定义报表、报表模板
- 科目管理: 科目设置、辅助核算、科目余额
- 凭证管理: 凭证录入、凭证审核、凭证查询
4.5 系统管理
- 用户管理: 用户列表、用户权限、用户角色
- 菜单管理: 菜单配置、路由管理、权限控制
- 字典管理: 字典类型、字典数据、数据维护
- 角色管理: 角色定义、权限分配、角色列表
- 日志管理: 操作日志、登录日志、系统日志
5. 系统架构
5.1 前端架构
┌─────────────────────────────────────────────────────────┐
│ 页面层 (Views) │
├─────────────────────────────────────────────────────────┤
│ 组件层 (Components) │
├─────────────────────────────────────────────────────────┤
│ 路由层 (Router) │
├─────────────────────────────────────────────────────────┤
│ 状态层 (Vuex) │
├─────────────────────────────────────────────────────────┤
│ API 层 (Axios) │
├─────────────────────────────────────────────────────────┤
│ 工具层 (Utils) │
└─────────────────────────────────────────────────────────┘
5.2 核心流程
5.2.1 路由加载流程
- 用户访问系统
- 检查是否为白名单路径
- 如非白名单路径，检查是否已加载动态路由
- 如未加载，从 API 获取动态路由配置
- 动态添加路由到 Vue Router
- 完成页面跳转
5.2.2 权限控制流程
- 用户登录后获取权限信息
- 将权限信息存储到 Vuex 中
- 使用自定义指令 (v-hasPerm, v-hasPermi) 控制页面元素显示
- 路由跳转时检查用户权限
6. 部署说明
6.1 环境要求
- Node.js >= 14.0.0
- npm >= 6.0.0
6.2 安装依赖
npm install
6.3 开发环境
npm run dev
6.4 生产构建
npm run build
6.5 预览生产构建
npm run preview
7. 开发指南
7.1 组件开发
- 使用 Vue 3 Composition API 开发组件
- 组件命名采用 PascalCase 命名规范
- 组件文件放在
src/components/目录下 - 通用组件需要在
main.js中全局注册
7.2 API 接口
- API 接口定义放在
src/api/目录下 - 按业务模块组织 API 文件
- 使用 Axios 进行 HTTP 请求
- 统一处理 API 响应和错误
7.3 路由配置
- 路由配置放在
src/router/目录下 - 按业务模块拆分路由配置
- 动态路由从后端 API 获取
- 路由跳转前进行权限检查
7.4 状态管理
- 使用 Vuex 4 进行状态管理
- 按功能模块拆分 Vuex 模块
- mutations 用于同步状态更新
- actions 用于异步操作
7.5 权限控制
- 使用自定义指令
v-hasPerm和v-hasPermi控制权限 - 权限信息从后端 API 获取并存储在 Vuex 中
- 路由跳转时检查用户权限
8. 核心文件说明
8.1 main.js
应用入口文件，负责初始化 Vue 应用、注册全局组件、指令和插件。
8.2 App.vue
根组件，提供应用的基本结构。
8.3 router/index.js
路由配置文件，负责定义路由规则和路由拦截。
8.4 store/index.js
状态管理配置文件，负责组织 Vuex 模块。
8.5 src/api/
包含所有 API 接口定义，按业务模块组织。
8.6 src/components/
包含所有通用组件，如表格、分页、文件上传等。
8.7 src/views/
包含所有页面视图，按业务模块组织。
9. 技术特点
9.1 现代化技术栈
采用 Vue 3 + Composition API，提供更好的开发体验和性能。
9.2 模块化设计
按业务模块拆分代码，提高代码的可维护性和可扩展性。
9.3 组件化开发
封装通用组件，提高代码复用率和开发效率。
9.4 权限控制
提供完善的权限控制机制，确保系统安全。
9.5 响应式设计
适配不同屏幕尺寸，提供良好的用户体验。
9.6 数据可视化
集成 ECharts，提供丰富的数据可视化图表。
10. 总结
Wimoor UI3 是一个功能全面、架构清晰的企业级前端应用，采用现代化的技术栈和设计理念，为企业提供高效、便捷的业务管理解决方案。该系统具有良好的可扩展性和可维护性，能够满足企业不断发展的业务需求。