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             # 项目依赖配置文件

主要功能模块

系统管理
- 用户管理
- 角色权限
- 菜单管理
- 系统配置
商品管理
- 商品列表
- 分类管理
- 规格管理
- 品牌管理
订单管理
- 订单列表
- 订单处理
- 退换货管理
仓库管理
- 库存管理
- 入库管理
- 出库管理
营销管理
- 促销活动
- 优惠券管理
- 营销工具
统计分析
- 销售统计
- 商品分析
- 用户分析

开发说明

安装依赖
```
yarn install
```
开发环境运行
```
yarn serve
```
生产环境构建
```
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. 代码组织原则

业务逻辑分离
- 主要业务逻辑放在 index.js 中
- 视图模板放在 .vue 文件中
- .vue 文件通过 import add from './index.js' 导入逻辑
- 使用 export default { ...add } 继承所有配置
组件通信
- 使用 v-model 进行数据双向绑定
- 使用 @change 等事件进行状态通知
- 使用 ref 调用组件方法
- 使用 props 传递配置项
状态管理
- 组件内部状态放在 data() 中
- 使用 computed 处理派生状态
- 使用 methods 定义事件处理器
- 复杂状态考虑使用 Vuex

3. 组件开发流程

阅读项目文档
- 查看 README.md 了解项目结构
- 查看相关组件的实现方式
- 了解项目的编码规范
分析需求
- 确定组件的功能和范围
- 识别可复用的现有组件
- 设计组件的接口和事件
开发步骤
- 创建组件目录结构
- 实现业务逻辑（index.js）
- 编写视图模板（.vue）
- 添加样式（.less）
- 编写文档和注释
测试和优化
- 编写单元测试
- 进行性能优化
- 检查代码规范
- 更新组件文档

4. 常见问题和解决方案

组件通信问题

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

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

模态框组件

// 打开模态框
this.$refs.modalRef.initRule(id)

// 处理确认
handleSave() {
  this.$emit('success')
  this.visible = false
}

样式隔离

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

5. 性能优化建议

组件加载

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

const AsyncComponent = () => import('./AsyncComponent.vue')

数据处理
- 使用 computed 缓存计算结果
- 合理使用 watch 监听数据变化
- 避免不必要的深层监听
渲染优化
- 使用 v-show 代替 v-if（频繁切换）
- 为 v-for 添加 key
- 合理使用 keep-alive

6. 文档维护

组件文档
- 在组件目录添加 README.md
- 说明组件的用途和使用方法
- 列出所有 props、events 和 slots
- 提供使用示例
代码注释
- 为复杂逻辑添加注释
- 使用 JSDoc 注释格式
- 说明参数类型和返回值
更新记录
- 记录重要的更改
- 说明破坏性变更
- 标注版本号

开发新组件注意事项

组件命名规范
- 使用 PascalCase 命名组件文件夹和组件名
- 使用 kebab-case 命名组件标签

组件结构

components/
└── ComponentName/
    ├── index.js          # 组件导出文件
    ├── ComponentName.vue # 组件主文件
    └── style.less       # 组件样式文件

组件文档
- 在组件目录中添加 README.md 说明组件用途和使用方法
- 说明组件的属性(props)、事件(events)和插槽(slots)
组件开发规范
- 遵循 Vue.js 官方风格指南
- 使用 TypeScript 编写组件
- 添加必要的注释和文档
- 编写单元测试

其他说明

使用 ESLint 进行代码规范检查
支持国际化
集成了自动化测试
采用模块化的开发方式

更多详情请访问 bee-home.com

包详细信息

@bee-hole/admin

自述文件