前段结构说明 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 是一个功能全面、架构清晰的企业级前端应用，采用现代化的技术栈和设计理念，为企业提供高效、便捷的业务管理解决方案。该系统具有良好的可扩展性和可维护性，能够满足企业不断发展的业务需求。