@bee-hole/admin v1.25.74

bee-hole.com

please visit bee-home.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. 安装依赖

yarn install

2. 开发环境运行

yarn serve

3. 生产环境构建

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平台相关组件

组件使用示例

仓库选择组件使用

<warehouse-select v-model="warehouseId" @change="handleWarehouseChange" />

订单仓库规则模态框使用

<order-repository-rule-modal
  :visible="visible"
  :order-id="orderId"
  @close="handleClose"
  @success="handleSuccess"
/>

AI翻译组件使用

<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. 组件通信问题

   <!-- 父组件 -->
   <child-component
     v-model="value"
     @change="handleChange"
     ref="childRef"
   />

   // 子组件
   export default {
     props: ['value'],
     methods: {
       updateValue(newValue) {
         this.$emit('input', newValue)
         this.$emit('change', newValue)
       }
     }
   }

2. 模态框组件

   // 打开模态框
   this.$refs.modalRef.initRule(id)
   
   // 处理确认
   handleSave() {
     this.$emit('success')
     this.visible = false
   }

3. 样式隔离

   <style lang="less" scoped>
   // 使用 scoped 确保样式只应用于当前组件
   .component-class {
     // 样式定义
   }
   </style>

5. 性能优化建议

1. 组件加载

   • 使用异步组件减小初始包体积

   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