@bee-hole/admin 1.25.17 → 1.25.19

package/README.md

@@ -1,17 +1,403 @@
-## bee-hole.com
-
-please visit [bee-home.com](https://www.bee-hole.com/)
-
-E-commerce system with built-in AI robots
-One-click deployment to your own server
-No longer a SaaS model online store, deploy it to your own server, fully control the data, and won't be banned
-
-Built-in ChatGPT artificial intelligence, supporting GPT3.5 and GPT4.0 technologies
-
-AI intelligent SEO, optimize product descriptions, easily generate advertising copies
-
-Only need to maintain a set of product data, AI will automatically translate into global languages
-
-Help you quickly occupy the global market
-
-please visit [bee-home.com](https://www.bee-hole.com/) find the detail.
+## bee-hole.com
+
+please visit [bee-home.com](https://www.bee-hole.com/)
+
+E-commerce system with built-in AI robots
+One-click deployment to your own server
+No longer a SaaS model online store, deploy it to your own server, fully control the data, and won't be banned
+
+Built-in ChatGPT artificial intelligence, supporting GPT3.5 and GPT4.0 technologies
+
+AI intelligent SEO, optimize product descriptions, easily generate advertising copies
+
+Only need to maintain a set of product data, AI will automatically translate into global languages
+
+Help you quickly occupy the global market
+
+# XBuy Admin System
+
+## 项目简介
+
+XBuy Admin是一个基于Vue.js的电商管理系统前端项目，提供完整的电商后台管理功能。
+
+## 技术栈
+
+- Vue.js
+- Ant Design Vue
+- Vuex
+- Vue Router
+- Axios
+- Less
+
+## 目录结构
+
+```
+├── src                        # 源代码目录
+│   ├── api                    # API接口目录
+│   ├── assets                 # 静态资源文件
+│   ├── components            # 公共组件
+│   ├── config                # 配置文件
+│   ├── core                  # 核心功能模块
+│   ├── directive             # Vue自定义指令
+│   ├── layouts              # 布局组件
+│   ├── locales              # 国际化语言包
+│   ├── mock                 # 模拟数据
+│   ├── router               # 路由配置
+│   ├── store                # Vuex状态管理
+│   ├── utils                # 工具函数
+│   ├── views                # 页面视图组件
+│   ├── App.vue              # 根组件
+│   ├── main.js              # 入口文件
+│   ├── permission.js        # 权限控制
+│   └── global.less          # 全局样式
+├── public                    # 静态公共资源
+├── tests                    # 测试文件目录
+├── config                   # 项目配置文件
+└── package.json             # 项目依赖配置文件
+
+```
+
+## 主要功能模块
+
+1. 系统管理
+   - 用户管理
+   - 角色权限
+   - 菜单管理
+   - 系统配置
+
+2. 商品管理
+   - 商品列表
+   - 分类管理
+   - 规格管理
+   - 品牌管理
+
+3. 订单管理
+   - 订单列表
+   - 订单处理
+   - 退换货管理
+
+4. 仓库管理
+   - 库存管理
+   - 入库管理
+   - 出库管理
+
+5. 营销管理
+   - 促销活动
+   - 优惠券管理
+   - 营销工具
+
+6. 统计分析
+   - 销售统计
+   - 商品分析
+   - 用户分析
+
+## 开发说明
+
+1. 安装依赖
+```bash
+yarn install
+```
+
+2. 开发环境运行
+```bash
+yarn serve
+```
+
+3. 生产环境构建
+```bash
+yarn build
+```
+
+## API 接口说明
+
+### 核心模块
+- `login.js` - 用户登录认证相关接口
+- `manage.js` - 系统管理相关接口
+- `menu.js` - 菜单管理接口
+
+### 商品相关
+- `/item/*` - 商品管理相关接口
+- `/cangku/*` - 仓库管理接口
+- `/procure/*` - 采购管理接口
+
+### 订单相关
+- `/order/*` - 订单管理接口
+- `/cart/*` - 购物车相关接口
+- `/pay/*` - 支付相关接口
+
+### 系统配置
+- `/config/*` - 系统配置接口
+- `/system/*` - 系统管理接口
+- `/tool/*` - 工具类接口
+
+### 第三方平台集成
+- `/alibaba/*` - 阿里巴巴平台接口
+- `/amazon/*` - 亚马逊平台接口
+- `/bigcommerce/*` - BigCommerce平台接口
+- `/rakuten/*` - 乐天市场接口
+- `/shein/*` - SHEIN平台接口
+- `/titok/*` - TikTok平台接口
+- `/yahoo/*` - Yahoo平台接口
+
+### AI 功能
+- `/ai/*` - AI相关功能接口
+- `/seo/*` - SEO优化相关接口
+
+## 组件说明
+
+### 布局组件
+- `ProLayout/*` - 主布局框架组件
+- `GlobalHeader` - 全局头部组件
+- `GlobalFooter` - 全局底部组件
+- `MultiTab` - 多标签页组件
+- `SettingDrawer` - 设置抽屉组件
+
+### 商品相关组件
+- `CatList` - 分类列表组件
+- `CatParams` - 分类参数组件
+- `CatSelect` - 分类选择组件
+- `GoodOne` - 商品详情组件
+- `Sku` - SKU管理组件
+- `mainItem` - 主商品组件
+- `mainSku` - 主SKU组件
+
+### 订单相关组件
+- `OrderRepositoryRuleModal` - 订单仓库规则模态框
+- `orderNote` - 订单备注组件
+- `orderSwitchWareHouse` - 订单切换仓库组件
+- `ordersShips` - 订单发货组件
+
+### 仓库管理组件
+- `wareHouseInfo` - 仓库信息组件
+- `wareHouseSelect` - 仓库选择组件
+- `wareHouseStockLogs` - 仓库库存日志组件
+- `warehouseCountry` - 仓库国家组件
+- `warehousePolicy` - 仓库政策组件
+
+### 支付相关组件
+- `AliPayConfig` - 支付宝配置组件
+- `PayPal` - PayPal支付组件
+- `h5Pay` - H5支付组件
+- `recharge` - 充值组件
+
+### AI相关组件
+- `ai/*` - AI功能组件
+- `aiSlug` - AI URL优化组件
+- `aiTitle` - AI标题生成组件
+- `aiTs` - AI翻译组件
+
+### 通用组件
+- `Dialog.js` - 对话框组件
+- `Ellipsis` - 文本省略组件
+- `IconSelector` - 图标选择器
+- `TextArea` - 文本域组件
+- `Tree` - 树形组件
+- `Search` - 搜索组件
+- `SelectLang` - 语言选择组件
+
+### 第三方平台组件
+- `alibaba/*` - 阿里巴巴相关组件
+- `tiktok/*` - TikTok相关组件
+- `yahoo/*` - Yahoo相关组件
+- `rakuten/*` - 乐天市场相关组件
+- `ozon/*` - OZON平台相关组件
+
+## 组件使用示例
+
+### 仓库选择组件使用
+```vue
+<warehouse-select v-model="warehouseId" @change="handleWarehouseChange" />
+```
+
+### 订单仓库规则模态框使用
+```vue
+<order-repository-rule-modal
+  :visible="visible"
+  :order-id="orderId"
+  @close="handleClose"
+  @success="handleSuccess"
+/>
+```
+
+### AI翻译组件使用
+```vue
+<ai-ts
+  v-model="content"
+  :source-lang="sourceLang"
+  :target-lang="targetLang"
+  @translate="handleTranslate"
+/>
+```
+
+## 组件开发规范和最佳实践
+
+### 1. 组件文件结构
+```
+components/
+└── ComponentName/
+    ├── index.js        # 组件业务逻辑和配置
+    ├── index.less      # 组件样式（可选）
+    ├── module/         # 子模块目录（可选）
+    └── ComponentName.vue # 组件模板
+```
+
+### 2. 代码组织原则
+
+1. 业务逻辑分离
+   - 主要业务逻辑放在 `index.js` 中
+   - 视图模板放在 `.vue` 文件中
+   - `.vue` 文件通过 `import add from './index.js'` 导入逻辑
+   - 使用 `export default { ...add }` 继承所有配置
+
+2. 组件通信
+   - 使用 `v-model` 进行数据双向绑定
+   - 使用 `@change` 等事件进行状态通知
+   - 使用 `ref` 调用组件方法
+   - 使用 `props` 传递配置项
+
+3. 状态管理
+   - 组件内部状态放在 `data()` 中
+   - 使用 `computed` 处理派生状态
+   - 使用 `methods` 定义事件处理器
+   - 复杂状态考虑使用 Vuex
+
+### 3. 组件开发流程
+
+1. 阅读项目文档
+   - 查看 README.md 了解项目结构
+   - 查看相关组件的实现方式
+   - 了解项目的编码规范
+
+2. 分析需求
+   - 确定组件的功能和范围
+   - 识别可复用的现有组件
+   - 设计组件的接口和事件
+
+3. 开发步骤
+   - 创建组件目录结构
+   - 实现业务逻辑（index.js）
+   - 编写视图模板（.vue）
+   - 添加样式（.less）
+   - 编写文档和注释
+
+4. 测试和优化
+   - 编写单元测试
+   - 进行性能优化
+   - 检查代码规范
+   - 更新组件文档
+
+### 4. 常见问题和解决方案
+
+1. 组件通信问题
+   ```vue
+   <!-- 父组件 -->
+   <child-component
+     v-model="value"
+     @change="handleChange"
+     ref="childRef"
+   />
+   ```
+   ```javascript
+   // 子组件
+   export default {
+     props: ['value'],
+     methods: {
+       updateValue(newValue) {
+         this.$emit('input', newValue)
+         this.$emit('change', newValue)
+       }
+     }
+   }
+   ```
+
+2. 模态框组件
+   ```javascript
+   // 打开模态框
+   this.$refs.modalRef.initRule(id)
+   
+   // 处理确认
+   handleSave() {
+     this.$emit('success')
+     this.visible = false
+   }
+   ```
+
+3. 样式隔离
+   ```vue
+   <style lang="less" scoped>
+   // 使用 scoped 确保样式只应用于当前组件
+   .component-class {
+     // 样式定义
+   }
+   </style>
+   ```
+
+### 5. 性能优化建议
+
+1. 组件加载
+   - 使用异步组件减小初始包体积
+   ```javascript
+   const AsyncComponent = () => import('./AsyncComponent.vue')
+   ```
+
+2. 数据处理
+   - 使用 computed 缓存计算结果
+   - 合理使用 watch 监听数据变化
+   - 避免不必要的深层监听
+
+3. 渲染优化
+   - 使用 v-show 代替 v-if（频繁切换）
+   - 为 v-for 添加 key
+   - 合理使用 keep-alive
+
+### 6. 文档维护
+
+1. 组件文档
+   - 在组件目录添加 README.md
+   - 说明组件的用途和使用方法
+   - 列出所有 props、events 和 slots
+   - 提供使用示例
+
+2. 代码注释
+   - 为复杂逻辑添加注释
+   - 使用 JSDoc 注释格式
+   - 说明参数类型和返回值
+
+3. 更新记录
+   - 记录重要的更改
+   - 说明破坏性变更
+   - 标注版本号
+
+## 开发新组件注意事项
+
+1. 组件命名规范
+   - 使用 PascalCase 命名组件文件夹和组件名
+   - 使用 kebab-case 命名组件标签
+
+2. 组件结构
+   ```
+   components/
+   └── ComponentName/
+       ├── index.js          # 组件导出文件
+       ├── ComponentName.vue # 组件主文件
+       └── style.less       # 组件样式文件
+   ```
+
+3. 组件文档
+   - 在组件目录中添加 README.md 说明组件用途和使用方法
+   - 说明组件的属性(props)、事件(events)和插槽(slots)
+
+4. 组件开发规范
+   - 遵循 Vue.js 官方风格指南
+   - 使用 TypeScript 编写组件
+   - 添加必要的注释和文档
+   - 编写单元测试
+
+## 其他说明
+
+- 使用 ESLint 进行代码规范检查
+- 支持国际化
+- 集成了自动化测试
+- 采用模块化的开发方式
+
+更多详情请访问 [bee-home.com](https://www.bee-hole.com/)