🛒 小程序商城后台管理系统

基于 Vue 3 + Ant Design Vue 的企业级小程序商城后台

📖 项目简介

小程序商城后台管理系统是一个基于 Vue 3 + Ant Design Vue 构建的现代化企业级商城管理平台，为小程序商城提供完整的后台管理能力，涵盖商品、订单、会员、经销商、门店、营销活动等核心业务模块。

• 前端框架：Vue 3 + TypeScript + Vite
• UI 组件库：Ant Design Vue 4.x + EleAdmin Pro
• 状态管理：Pinia
• 图表库：ECharts + @antv/g2
• 工具库：Lodash、Day.js、CryptoJS、ExcelJS

项目域名：https://shop.websoft.top

官方产品介绍：https://websoft.top/shop

🛠️ 技术栈

核心技术

技术	版本	说明
Vue	3.x	渐进式 JavaScript 框架
TypeScript	5.x	JavaScript 的超集
Vite	8.x	下一代前端构建工具
Ant Design Vue	4.x	企业级 UI 设计语言
EleAdmin Pro	1.11+	企业级组件库
Pinia	2.x	Vue 3 状态管理库

功能组件

• TinyMCE - 富文本编辑器，支持图片/视频上传
• ECharts - 数据可视化图表库
• CropperJS - 图片裁剪组件
• ExcelJS / xlsx - Excel 文件导入导出
• Ali OSS - 阿里云对象存储
• qrcode / jsbarcode - 二维码与条形码生成

📋 环境要求

基础环境

• 🟢 Node.js 18+
• 📦 npm 8+ / yarn 1.22+ / pnpm 8+
• 🌐 现代浏览器（Chrome 63+、Firefox、Safari、Edge）

开发工具

• 推荐：VS Code / WebStorm
• 插件：Volar（Vue 3 支持）

🚀 快速开始

1. 克隆项目

git clone <仓库地址>
cd guilixu-admin

2. 安装依赖

# 使用 npm
npm install

# 或使用 yarn
yarn install

# 或使用 pnpm（推荐）
pnpm install

3. 配置环境变量

# 复制环境变量示例文件
cp .env.example .env

# 编辑 .env 文件，填入您的配置信息
# 注意：请不要将 .env 文件提交到版本控制系统

4. 启动开发服务器

# 开发模式
npm run dev

# 或
yarn dev

访问 http://localhost:3000 即可看到管理后台。

5. 构建生产版本

# 生产构建
npm run build

# 预览构建结果
npm run serve

⚙️ 环境变量配置

项目使用环境变量来管理敏感信息和配置。请按照以下步骤配置：

必需配置

# API 配置
VITE_API_URL=https://your-api.com/api          # 后端 API 地址
VITE_SERVER_API_URL=https://your-server.com/api # 服务端 API 地址
VITE_FILE_SERVER=https://your-file-server.com   # 文件服务器地址

# 应用配置
VITE_APP_SECRET=your_app_secret                 # 应用密钥
VITE_TENANT_ID=your_tenant_id                  # 租户 ID

可选配置

# 高德地图 (如需使用地图功能)
VITE_MAP_KEY=your_map_key                      # 高德地图 Key
VITE_MAP_CODE=your_map_security_code           # 高德地图安全密钥

# EleAdmin Pro 授权 (商业版功能)
VITE_LICENSE_CODE=your_license_code            # 授权码

🎯 核心功能

🛒 商城管理

• 商品管理：商品信息编辑、规格设置、SKU 管理、商品分类
• 订单管理：订单流程跟踪、订单商品管理
• 库存管理：商品库存监控
• 优惠券管理：优惠券创建与发放、用户优惠券管理
• 营销活动：活动管理、活动报名、积分商品
• 礼品管理：商城礼品配置

🏪 门店与经销商

• 门店管理：门店信息、门店围栏、门店骑手、门店仓库
• 经销商体系：经销商申请、经销商用户、经销商订单、经销商资金与提现
• 分销设置：经销商推荐人、分销海报、分销配置

👥 会员管理

• 会员注册：会员注册管理
• 会员权益：权益包管理、权益兑换
• 会员推荐：推荐人关系管理

👤 用户权限

• 用户管理：用户信息维护、用户分组
• 角色权限：基于角色的访问控制（RBAC）
• 菜单管理：动态菜单配置
• 组织架构：组织与部门管理

⚙️ 系统管理

• 系统配置：商城设置、提现配置
• 支付管理：支付配置、订单支付
• 字典管理：数据字典维护
• 缓存管理：缓存清理
• 域名管理：域名白名单配置
• 操作记录：登录记录、操作日志

🏗️ 项目结构

src/
├── components/          # 公共组件
├── views/              # 页面组件
│   ├── shop/           # 商城管理（商品、订单、门店、经销商、会员等）
│   ├── system/         # 系统管理（用户、角色、菜单、字典、支付等）
│   ├── passport/       # 登录认证
│   ├── user/           # 用户中心
│   └── result/         # 结果页
├── router/             # 路由配置
├── store/              # Pinia 状态管理
├── utils/              # 工具函数
└── assets/             # 静态资源

📄 License

MIT