# 前段结构说明

## 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 路由加载流程
1. 用户访问系统
2. 检查是否为白名单路径
3. 如非白名单路径，检查是否已加载动态路由
4. 如未加载，从 API 获取动态路由配置
5. 动态添加路由到 Vue Router
6. 完成页面跳转

#### 5.2.2 权限控制流程
1. 用户登录后获取权限信息
2. 将权限信息存储到 Vuex 中
3. 使用自定义指令 (v-hasPerm, v-hasPermi) 控制页面元素显示
4. 路由跳转时检查用户权限

## 6. 部署说明

### 6.1 环境要求
- Node.js >= 14.0.0
- npm >= 6.0.0

### 6.2 安装依赖
```bash
npm install
```

### 6.3 开发环境
```bash
npm run dev
```

### 6.4 生产构建
```bash
npm run build
```

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