# 系统文档结构 分析文档结构并简单说明 # 后台结构说明 ## 1. 系统概述 ### 1.1 项目简介 Wimoor ERP是国内首款100%开源、支持商用的亚马逊ERP系统，采用微服务+前后端分离+中央登录模式，支持新旧系统无缝对接。 **技术栈**： - **核心框架**：SpringBoot 2.6.13 + Spring Cloud 2021.0.5 - **微服务组件**：Nacos + Seata + Gateway - **持久层**：Mybatis + Mybatis Plus - **前端技术**：Vue3 + Element Plus + Node.js - **数据库**：MySQL 8.0 + Redis - **项目管理**：Maven 3.2.3+ ## 2. 项目根目录结构 ### 2.1 核心配置文件 ``` ├── README.md # 项目说明文档 ├── pom.xml # Maven父项目配置 ├── nacos.env # Nacos环境变量配置 ├── LICENSE # MIT开源协议 └── .gitignore # Git忽略配置 ``` ### 2.2 初始化配置目录 (init-config) ``` init-config/ ├── mysql/ # 数据库初始化脚本 │ ├── readme.txt # 数据库说明 │ ├── 数据/ # 基础数据SQL │ └── 数据库结构/ # 表结构SQL ├── nacos/ # Nacos配置中心 │ ├── DEFAULT_GROUP/ # 默认配置组 │ ├── install.txt # 安装说明 │ └── nacos-seata-version-map.png └── seata/ # 分布式事务配置 ├── readme.txt ├── seata-application.yml └── seataServer.properties ``` ### 2.3 日志目录 ``` logs/ └── wimoor-gen/ # 代码生成器日志 ├── error.log # 错误日志 ├── info.log # 信息日志 └── 按日期分割的日志文件 ``` ## 3. 微服务模块架构 ### 3.1 核心基础模块 (wimoor-common) **功能**：提供公共组件和工具类 ``` wimoor-common/ ├── common-core/ # 核心工具类 ├── common-core-ext/ # 扩展工具类 ├── common-entity/ # 实体类定义 ├── common-feishu/ # 飞书集成 ├── common-mvc/ # MVC相关组件 ├── common-mybatis/ # Mybatis配置 ├── common-redis/ # Redis缓存 ├── common-storage/ # 文件存储 ├── common-swagger/ # API文档 └── pom.xml ``` ### 3.2 网关服务 (wimoor-gateway) **功能**：API网关，路由转发和负载均衡 ``` wimoor-gateway/ ├── src/main/java/ # 网关核心代码 ├── src/main/resources/ # 配置文件 │ ├── bootstrap.yml # 启动配置 │ ├── bootstrap-dev.yml # 开发环境配置 │ └── bootstrap-prod.yml # 生产环境配置 └── target/ # 编译输出 ``` ### 3.3 管理系统 (wimoor-admin) **功能**：系统管理和用户权限控制 ``` wimoor-admin/ ├── admin-api/ # API接口模块 ├── admin-boot/ # 启动模块 └── pom.xml ``` ### 3.4 亚马逊业务模块 (wimoor-amazon) **功能**：亚马逊卖家业务核心功能 ``` wimoor-amazon/ ├── amazon-api/ # 亚马逊API接口 ├── amazon-boot/ # 亚马逊启动模块 ├── amazon-follow/ # 产品跟卖功能 ├── amazon-sp-api/ # 亚马逊SP API集成 └── pom.xml ``` ### 3.5 亚马逊广告模块 (wimoor-amazon-adv) **功能**：亚马逊广告管理 ``` wimoor-amazon-adv/ ├── amazon-adv-api/ # 广告API接口 ├── amazon-adv-boot/ # 广告启动模块 └── pom.xml ``` ### 3.6 API接口模块 (wimoor-api) **功能**：对外提供统一API接口 ``` wimoor-api/ ├── wimoor-api-admin/ # 管理API ├── wimoor-api-amazon/ # 亚马逊API ├── wimoor-api-quote/ # 报价API └── pom.xml ``` ### 3.7 功能模块 (wimoor-modules) **功能**：业务功能模块集合 ``` wimoor-modules/ ├── wimoor-data/ # 数据处理模块 ├── wimoor-finance/ # 财务管理模块 ├── wimoor-gen/ # 代码生成器模块 ├── wimoor-quote/ # 报价管理模块 └── pom.xml ``` ### 3.8 ERP模块 (wimoor-erp) **功能**：企业资源计划管理 ## 4. 数据库架构设计 ### 4.1 数据库划分 系统采用分库设计，按业务模块划分： - **db\_admin**：管理系统数据库 - **db\_amazon**：亚马逊业务数据库 - **db\_amazon\_adv**：亚马逊广告数据库 - **db\_erp**：ERP业务数据库 - **db\_finance**：财务数据库 - **db\_quartz**：定时任务数据库 - **db\_quote**：报价数据库 - **db\_datamove**：数据迁移数据库 - **seata**：分布式事务数据库 ### 4.2 核心表结构 - **用户权限**：t\_user, t\_role, t\_sys\_menu, t\_user\_role - **亚马逊业务**：t\_amazon\_auth, t\_product\_info, t\_amz\_order\_main - **库存管理**：t\_amz\_rpt\_inventory\_detail - **财务管理**：t\_amz\_settlement\_report ## 5. 微服务架构设计 ### 5.1 服务发现与配置中心 - **Nacos**：服务注册发现 + 配置中心 - **配置管理**：通过bootstrap.yml加载Nacos配置 ### 5.2 分布式事务 - **Seata**：处理跨服务事务一致性 - **事务模式**：支持AT、TCC等模式 ### 5.3 API网关 - **Gateway**：统一入口，路由转发 - **负载均衡**：集成Ribbon负载均衡 - **熔断降级**：集成Hystrix熔断器 ## 6. 部署架构 ### 6.1 依赖服务 ``` 必需服务： ├── MySQL 8.0 # 数据库 ├── Redis # 缓存和Session ├── Nacos # 服务注册配置中心 └── Seata # 分布式事务 可选服务： └── Cas-Server # 中央登录模块 ``` ### 6.2 启动顺序 1. 启动Nacos服务 2. 启动Seata服务 3. 启动Gateway网关 4. 启动各业务服务（admin, amazon, erp等） 5. 启动前端UI服务 ## 7. 开发环境配置 ### 7.1 环境要求 - **IDE**：IDEA（推荐）或Eclipse - **JDK**：JDK 1.8+ - **数据库**：MySQL 8.0 - **缓存**：Redis - **构建工具**：Maven 3.2.3+ ### 7.2 配置步骤 1. 导入数据库脚本 2. 配置Nacos服务地址 3. 配置Redis连接 4. 配置各模块数据库连接 5. 启动各微服务模块 ## 8. 系统功能模块 ### 8.1 核心业务功能 - **用户管理**：多租户、角色权限、菜单管理 - **亚马逊集成**：账号授权、产品管理、订单处理 - **库存管理**：FBA/FBM库存、补货规划 - **财务管理**：结算报告、成本核算 - **广告管理**：广告活动、关键词优化 - **采购管理**：采购单、供应商管理 - **销售分析**：商品分析、趋势分析 ### 8.2 技术特性 - **微服务架构**：模块化、可扩展 - **前后端分离**：Vue3前端 + SpringBoot后端 - **多租户支持**：支持多店铺独立运营 - **分布式事务**：保证数据一致性 - **定时任务**：Quartz任务调度 - **日志管理**：自动记录操作日志 ## 9. 扩展与定制 ### 9.1 模块扩展 系统采用模块化设计，支持： - 新增业务模块 - 自定义功能开发 - 第三方系统集成 ### 9.2 定制服务 - 系统源码搭建 - 成品系统部署 - 功能定制开发 - 技术支持服务 # 前段结构说明 ## 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 是一个功能全面、架构清晰的企业级前端应用，采用现代化的技术栈和设计理念，为企业提供高效、便捷的业务管理解决方案。该系统具有良好的可扩展性和可维护性，能够满足企业不断发展的业务需求。 # UI架构说明 ## 1. 系统架构概述 Wimoor UI3 是一个基于 Vue 3 + Element Plus 构建的企业级前端应用框架，采用现代化的技术栈和架构设计理念。系统采用了组件化、模块化和分层架构，具有良好的可扩展性、可维护性和性能。 ### 1.1 技术栈 | 技术 | 版本 | 用途 | |------|------|------| | Vue | 3.x | 前端框架 | | Element Plus | 2.x | UI组件库 | | Vue Router | 4.x | 路由管理 | | Vuex | 4.x | 状态管理 | | Axios | 0.27.x | HTTP客户端 | | Vite | 3.x | 构建工具 | | SVG | - | 图标系统 | ### 1.2 系统分层 - **表示层**：Vue 组件、视图、布局 - **控制层**：路由、导航守卫 - **业务逻辑层**：Vuex Store、API服务 - **数据访问层**：Axios请求封装 - **工具层**：全局工具函数、指令 ## 2. 核心架构组件 ### 2.1 应用入口 (main.js) 应用入口文件负责初始化 Vue 应用，注册全局组件、指令、过滤器和方法。 **核心功能**： - Vue 应用创建与挂载 - Element Plus 注册与配置 - 路由与状态管理注册 - 全局组件注册 (SvgIcon, DictTag, Pagination, GlobalTable等) - 自定义指令注册 (v-hasPerm, v-hasPermi, v-dataType) - 全局方法挂载 (parseTime, download, useDict等) **关键代码**： ```javascript // 创建Vue应用 const app = createApp(App); // 注册核心依赖 app.use(store).use(router).use(ElementPlus).use(print).use(plugins); // 注册全局组件 app.component('GlobalTable', GlobalTable); app.component('Pagination', Pagination); // 注册自定义指令 app.use(hasPerm).use(hasPermi).use(dataType); // 挂载应用 app.mount('#app'); ``` ### 2.2 路由系统 路由系统采用 Vue Router 4，支持静态路由和动态路由结合的方式。 #### 2.2.1 路由配置 路由配置分为静态路由和动态路由两部分： - **静态路由**：在前端代码中定义的固定路由，如登录页、首页等 - **动态路由**：从后端API获取的业务路由，根据用户权限动态加载 **路由模块划分**： - sysRouter.js：系统管理相关路由 - erp.js：ERP模块路由 - amazon.js：亚马逊模块路由 - finance.js：财务模块路由 #### 2.2.2 路由守卫 使用 `beforeEach` 导航守卫实现权限控制和动态路由加载： ```javascript router.beforeEach(async (to, from, next) => { if (whitePath.includes(to.path)) { // 白名单路由直接放行 next(); } else { if (store.state.routerStore.router.length === 0) { // 动态加载路由 await axios.get('/api/admin/api/v1/menus/route').then(res => { store.dispatch("routerStore/setRouter", res.data.data); addRoute(router, res.data.data); }); } next(); } }); ``` #### 2.2.3 动态路由加载 通过 `addRoute` 函数实现动态路由的递归加载： ```javascript function addRoute(router, data) { data.forEach(v => { let item = { path: v.path, name: v.name, component: modules[`../views/${v.component}.vue`], meta: v.meta || { keepAlive: true } }; // 过滤不需要缓存的页面 if (['/sys/notepad', '/fin/voucher/create'].includes(item.path)) { item.meta.keepAlive = false; } router.addRoute('index', item); // 递归加载子路由 if (v.children) { addRoute(router, v.children); } }); } ``` ### 2.3 Layout 结构 Layout 采用了经典的三栏布局结构，使用 Element Plus 的 `el-container` 组件实现。 #### 2.3.1 布局组件结构 ``` ``` #### 2.3.2 布局组件说明 - **AsideMenu**：左侧菜单组件，负责展示系统菜单和主题切换 - **HeaderTab**：顶部标签页组件，管理当前打开的页面标签 - **HeaderAvatar**：用户头像组件，提供用户信息和系统设置入口 #### 2.3.3 组件缓存机制 使用 Vue 的 `keep-alive` 组件实现页面缓存，提高用户体验： ```javascript ``` **动态缓存控制**： - 通过 `meta.keepAlive` 控制页面是否需要缓存 - 使用 `excludes` 数组动态移除不需要缓存的组件 - 提供 `clearCache` 方法实现页面刷新 ### 2.4 状态管理 采用 Vuex 4 实现状态管理，按功能模块划分为多个子模块。 #### 2.4.1 Store 模块划分 - **routerStore**：路由相关状态管理 - **permissionStore**：权限相关状态管理 - **jessionStore**：会话相关状态管理 - **dateStore**：日期相关状态管理 - **finance**：财务模块状态管理 - **dict**：字典数据状态管理 #### 2.4.2 核心状态管理 **routerStore**： - 管理动态路由数据 - 提供路由设置和获取方法 **permissionStore**： - 管理用户权限列表 - 提供权限判断方法 ### 2.5 权限控制 系统实现了基于指令的权限控制机制，通过 `v-hasPerm` 和 `v-hasPermi` 指令控制元素的显示。 #### 2.5.1 权限指令 ```javascript // v-hasPerm 指令：判断用户是否拥有特定权限 export const hasPerm = { install: (app) => { app.directive('hasPerm', { mounted(el, binding) { const permissions = store.state.permissionStore.permission; const value = binding.value; const hasPermission = permissions.has(value); if (!hasPermission) { el.parentNode.removeChild(el); } } }); } }; // v-hasPermi 指令：判断用户是否拥有任一指定权限 export const hasPermi = { install: (app) => { app.directive('hasPermi', { mounted(el, binding) { const permissions = Array.from(store.state.permissionStore.permission); const permissionFlag = binding.value; const hasPermissions = permissions.some(permission => { return "*:*:*" === permission || permissionFlag.includes(permission); }); if (!hasPermissions) { el.parentNode.removeChild(el); } } }); } }; ``` ## 3. 公共组件与工具 ### 3.1 全局组件 系统提供了一系列可复用的全局组件： #### 3.1.1 GlobalTable 组件 基于 Element Plus Table 封装的全局表格组件，提供了丰富的功能和配置选项。 **核心功能**： - 数据加载与分页 - 排序与筛选 - 选择与点击事件 - 行展开与树形结构 - 自定义列与表头 - 空数据提示 **使用示例**： ```vue ``` #### 3.1.2 Pagination 组件 分页组件，与 GlobalTable 配合使用。 #### 3.1.3 SvgIcon 组件 SVG 图标组件，支持动态加载和自定义样式。 #### 3.1.4 DictTag 组件 字典标签组件，用于显示字典值对应的标签。 ### 3.2 全局工具函数 系统提供了丰富的全局工具函数，挂载在 Vue 实例上： - **parseTime**：日期时间格式化 - **resetForm**：表单重置 - **addDateRange**：日期范围处理 - **handleTree**：树形数据处理 - **selectDictLabel**：字典标签选择 - **download**：文件下载 ### 3.3 自定义指令 - **v-hasPerm**：单个权限控制 - **v-hasPermi**：多个权限控制 - **v-dataType**：数据类型验证 ## 4. 通信机制 ### 4.1 组件通信 系统使用多种组件通信方式： - **Props/Emits**：父子组件通信 - **Provide/Inject**：跨组件层级通信 - **Event Bus**：基于 mitt 的事件总线 - **Vuex**：全局状态共享 ### 4.2 API 通信 使用 Axios 作为 HTTP 客户端，实现与后端 API 的通信。 **API 请求流程**： 1. 前端组件发起请求 2. API 服务层处理请求参数 3. Axios 拦截器处理请求头和响应 4. 后端处理请求并返回数据 5. 前端接收响应并处理 ## 5. 性能优化 ### 5.1 组件缓存 使用 `keep-alive` 缓存常用页面组件，减少重复渲染。 ### 5.2 路由懒加载 采用动态导入方式实现路由懒加载： ```javascript component: () => import("@/views/dashboard/index.vue") ``` ### 5.3 图片优化 使用 SVG 图标代替 PNG/JPG 图标，减少网络请求。 ### 5.4 代码分割 利用 Vite 的代码分割功能，按需加载模块。 ## 6. 开发规范 ### 6.1 目录结构 ``` src/ ├── api/ # API服务 ├── assets/ # 静态资源 ├── components/ # 公共组件 ├── directive/ # 自定义指令 ├── filters/ # 过滤器 ├── layout/ # 布局组件 ├── router/ # 路由配置 ├── store/ # 状态管理 ├── styles/ # 样式文件 ├── utils/ # 工具函数 ├── views/ # 页面视图 ├── App.vue # 根组件 └── main.js # 入口文件 ``` ### 6.2 命名规范 - **组件名**：PascalCase，如 `GlobalTable` - **文件名**：kebab-case，如 `global-table.vue` - **变量名**：camelCase - **常量名**：UPPER_SNAKE_CASE ### 6.3 代码风格 - 使用 Vue 3 Composition API - 优先使用模板语法 - 合理使用 TypeScript 类型 - 保持代码简洁和可读性 ## 7. 部署与维护 ### 7.1 构建流程 ```bash # 安装依赖 npm install # 开发环境 npm run dev # 生产构建 npm run build ``` ### 7.2 环境配置 - **开发环境**：配置 `.env.development` - **测试环境**：配置 `.env.test` - **生产环境**：配置 `.env.production` ### 7.3 常见问题 - **路由加载失败**：检查后端API返回的路由格式是否正确 - **权限控制不生效**：检查用户权限列表是否正确获取 - **组件缓存问题**：检查 `meta.keepAlive` 配置是否正确 ## 8. 总结 Wimoor UI3 是一个架构清晰、功能完善的企业级前端应用框架，采用了现代化的技术栈和设计理念。系统具有良好的可扩展性、可维护性和性能，能够满足企业不断发展的业务需求。 通过本架构说明文档，希望能帮助开发人员更好地理解系统架构和设计思想，提高开发效率和代码质量。 --- **文档版本**：1.0 **更新日期**：2023-07-01 **编写人员**：Wimoor UI3 开发团队 # UI公共组件使用手册 ## 1. Pagination 分页组件 Pagination 是一个基于 Element Plus 的分页组件封装，提供了丰富的功能和灵活的配置选项。 ### 1.1 核心功能 - 自定义页面大小选择 - 响应式设计（移动端适配） - 自动滚动到顶部 - 支持多种布局配置 - 事件回调机制 ### 1.2 基本使用 ```vue ``` ### 1.3 高级配置 #### 1.3.1 自定义页面大小 ```vue ``` #### 1.3.2 自定义布局 ```vue ``` #### 1.3.3 禁用自动滚动 ```vue ``` ### 1.4 响应式设计 组件会根据屏幕宽度自动调整页码按钮的数量： - 大屏幕（≥992px）：显示7个页码按钮 - 小屏幕（<992px）：显示5个页码按钮 ## 2. GlobalTable 全局表格组件 GlobalTable 是一个功能强大的表格组件，基于 Element Plus Table 封装，提供了丰富的功能和灵活的配置选项。 ### 2.1 核心功能 - 数据加载与分页 - 排序与筛选 - 行选择与点击事件 - 行展开与树形结构 - 自定义列与表头 - 表格浮动表头 - 字段动态配置 - 性能优化（虚拟滚动、缓存等） ### 2.2 基本使用 ```vue ``` ### 2.3 高级配置 #### 2.3.1 树形表格 ```vue ``` #### 2.3.2 自定义排序 ```vue ``` #### 2.3.3 表格汇总 ```vue ``` #### 2.3.4 动态字段配置 ```vue ``` 通过配置 `field-type`，GlobalTable 会自动从后端获取字段配置，并根据用户设置动态显示/隐藏列。 ### 2.4 性能优化 #### 2.4.1 浮动表头 当表格内容较长时，滚动时表头会固定在顶部： ```vue ``` #### 2.4.2 虚拟滚动 对于大数据量表格，可以启用虚拟滚动： ```vue ``` ### 2.5 常用方法 ```vue ``` ## 3. 字典树运用 字典树是系统中用于管理和展示字典数据的机制，包括字典数据的获取、缓存和展示。 ### 3.1 核心功能 - 字典数据缓存 - 多字典类型同时获取 - 字典标签展示 - 字典值转换 ### 3.2 字典数据获取 使用 `useDict` hook 获取字典数据： ```vue ``` ### 3.3 字典数据展示 使用 `DictTag` 组件展示字典标签： ```vue ``` ### 3.4 字典数据转换 使用工具函数转换字典值： ```vue ``` ### 3.5 字典数据缓存 字典数据会自动缓存到 Vuex 的 `dictStore` 中，避免重复请求： ```javascript // 手动获取字典数据 import useDictStore from '@/hooks/store/useDictStore' // 获取字典数据 const statusDict = useDictStore.getDict('sys_status') // 手动设置字典数据 useDictStore.setDict('sys_status', dictData) // 清除字典数据 useDictStore.removeDict('sys_status') // 清除所有字典数据 useDictStore.cleanDict() ``` ## 4. 权限控制 系统提供了基于指令的权限控制机制，使用 `v-hasPerm` 和 `v-hasPermi` 指令动态显示/隐藏元素。 ### 4.1 核心功能 - 单个权限控制（v-hasPerm） - 多个权限控制（v-hasPermi） - 基于用户权限动态判断 - 无权限时自动隐藏元素 ### 4.2 权限指令使用 #### 4.2.1 v-hasPerm 单个权限控制 ```vue 新增用户 ``` 当用户拥有 `user:add` 权限时，按钮会显示；否则会隐藏。 #### 4.2.2 v-hasPermi 多个权限控制 ```vue 批量操作 ``` 当用户拥有 `user:edit` 或 `user:delete` 权限时，按钮会显示；否则会隐藏。 ### 4.3 权限控制原理 权限控制的核心逻辑在 `permission.js` 中实现： ```javascript export const hasPerm = { install: (app) => { app.directive('hasPerm', { mounted(el, binding) { const permissions = store.state.permissionStore.permission; const value = binding.value; const flag = permissions.has(value); if (!flag) { el.parentNode.removeChild(el); } } }); } }; ``` ### 4.4 权限数据来源 用户权限数据从后端 API 获取，并存储在 Vuex 的 `permissionStore` 中： ```javascript // 从后端获取权限数据 avoid axios.get('/api/admin/api/v1/menus/route').then(res => { // 存储权限数据 store.dispatch("permissionStore/setPermission", res.data.data[0].meta.permissions); }); ``` ### 4.5 高级使用场景 #### 4.5.1 权限控制在表格操作列 ```vue ``` #### 4.5.2 权限控制在表单字段 ```vue ``` #### 4.5.3 权限控制在菜单 ```vue ``` ## 5. 其他公共组件 ### 5.1 SvgIcon 图标组件 ```vue ``` ### 5.2 FileUpload 文件上传组件 ```vue ``` ### 5.3 Editor 富文本组件 ```vue ``` ### 5.4 RightToolbar 表格工具栏组件 ```vue 新增 删除 ``` ## 6. 最佳实践 ### 6.1 组件组合使用 **表格 + 分页 + 字典 + 权限**： ```vue ``` ### 6.2 性能优化建议 1. **表格性能优化**： - 对于大数据量表格，使用 `height` 属性启用虚拟滚动 - 合理设置 `scrollbar-always-on` 属性 - 使用 `stripe` 和 `border` 属性时注意性能影响 2. **字典数据优化**： - 尽量在组件初始化时获取所有需要的字典类型 - 避免在循环中频繁调用 `selectDictLabel` 函数 3. **权限控制优化**： - 避免在大量重复元素上使用权限指令 - 可以在父组件层面进行权限判断，减少指令使用 ### 6.3 代码规范建议 1. **组件命名**： - 使用 PascalCase 命名组件 - 组件文件使用 kebab-case 命名 2. **Props 定义**： - 明确 Props 类型和默认值 - 使用 v-model 实现双向绑定 3. **事件处理**： - 使用明确的事件名称 - 避免在模板中编写复杂的事件处理逻辑 4. **代码结构**： - 合理组织组件代码结构 - 使用 setup script 语法 - 避免组件过大，合理拆分组件 --- **文档版本**：1.0 **更新日期**：2023-07-01 **编写人员**：Wimoor UI 开发团队