结伴客后台管理系统
基于 Vue 3 + TypeScript + Ant Design Vue 构建的后台管理系统，用于管理结伴客平台的用户、商家、旅行计划、动物认领等业务。
🚀 特性
- 现代化技术栈: Vue 3 + TypeScript + Vite
- UI框架: Ant Design Vue 4.x
- 状态管理: Pinia
- 路由管理: Vue Router 4
- HTTP客户端: Axios
- 构建工具: Vite
- 代码规范: ESLint + Prettier
📦 安装依赖
cd admin-system
npm install
🛠️ 开发
# 启动开发服务器
npm run dev
# 类型检查
npm run type-check
# 代码格式化
npm run lint
# 构建生产版本
npm run build
# 预览生产版本
npm run preview
🌐 环境配置
系统支持多环境配置：
开发环境 (.env.development)
NODE_ENV=development
VITE_API_BASE_URL=https://webapi.jiebanke.com/api/v1
VITE_FEATURE_DEBUG=true
生产环境 (.env.production)
NODE_ENV=production
VITE_API_BASE_URL=https://webapi.jiebanke.com/api/v1
VITE_FEATURE_DEBUG=false
📁 项目结构
admin-system/
├── src/
│ ├── api/ # API接口
│ ├── assets/ # 静态资源
│ ├── components/ # 组件
│ │ ├── common/ # 通用组件
│ │ ├── layout/ # 布局组件
│ │ ├── user/ # 用户相关组件
│ │ ├── merchant/ # 商家相关组件
│ │ ├── travel/ # 旅行相关组件
│ │ ├── animal/ # 动物相关组件
│ │ ├── order/ # 订单相关组件
│ │ ├── promotion/ # 推广相关组件
│ │ └── dashboard/ # 仪表板组件
│ ├── composables/ # 组合式函数
│ ├── layouts/ # 布局文件
│ ├── pages/ # 页面组件
│ │ ├── dashboard/ # 仪表板
│ │ ├── user/ # 用户管理
│ │ ├── merchant/ # 商家管理
│ │ ├── travel/ # 旅行管理
│ │ ├── animal/ # 动物管理
│ │ ├── order/ # 订单管理
│ │ ├── promotion/ # 推广管理
│ │ ├── system/ # 系统设置
│ │ └── Login.vue # 登录页面
│ ├── router/ # 路由配置
│ ├── stores/ # 状态管理
│ ├── styles/ # 样式文件
│ ├── types/ # TypeScript类型定义
│ ├── utils/ # 工具函数
│ ├── App.vue # 根组件
│ └── main.ts # 入口文件
├── public/ # 公共资源
├── tests/ # 测试文件
├── index.html # HTML模板
├── vite.config.ts # Vite配置
├── tsconfig.json # TypeScript配置
├── package.json # 项目配置
└── README.md # 项目说明
🔐 权限管理
系统采用基于角色的权限控制（RBAC）：
用户角色
- 超级管理员: 所有权限
- 运营管理员: 用户管理、内容审核
- 财务管理员: 订单管理、财务管理
- 客服管理员: 用户支持、投诉处理
权限标识
user:read- 查看用户user:write- 管理用户merchant:read- 查看商家merchant:write- 管理商家travel:read- 查看旅行计划travel:write- 管理旅行计划animal:read- 查看动物信息animal:write- 管理动物信息order:read- 查看订单order:write- 管理订单system:read- 查看系统设置system:write- 管理系统设置
📊 功能模块
1. 仪表板
- 系统概览统计
- 实时数据监控
- 快捷操作入口
2. 用户管理
- 用户列表查看
- 用户信息编辑
- 用户状态管理
- 用户行为分析
3. 商家管理
- 商家入驻审核
- 商家信息管理
- 商家商品管理
- 商家数据统计
4. 旅行管理
- 旅行计划审核
- 旅行计划管理
- 旅行匹配监控
- 旅行数据统计
5. 动物管理
- 动物信息管理
- 认领申请审核
- 动物状态跟踪
- 认领数据分析
6. 订单管理
- 订单列表查看
- 订单状态管理
- 订单数据分析
- 财务报表生成
7. 推广管理
- 推广数据统计
- 提现申请审核
- 推广效果分析
- 奖励发放管理
8. 系统设置
- 系统参数配置
- 操作日志查看
- 缓存管理
- 系统监控
🎨 主题定制
系统支持主题定制：
// 主要主题变量
--primary-color: #1890ff; // 主题色
--success-color: #52c41a; // 成功色
--warning-color: #faad14; // 警告色
--error-color: #ff4d4f; // 错误色
📱 响应式设计
系统支持多种屏幕尺寸：
- 桌面端 (≥1200px): 完整功能展示
- 平板端 (768px-1199px): 适配布局
- 移动端 (<768px): 简化界面
🔧 开发规范
代码风格
- 使用TypeScript严格模式
- 遵循Vue 3组合式API规范
- 使用ESLint + Prettier统一代码风格
- 组件使用PascalCase命名
- 文件使用kebab-case命名
组件开发
<template>
<!-- 模板代码 -->
</template>
<script setup lang="ts">
// 组合式API
</script>
<style scoped>
/* 组件样式 */
</style>
API调用
// 使用封装的request方法
import { request } from '@/api'
const getUsers = async () => {
try {
const response = await request.get('/users')
return response.data
} catch (error) {
console.error('获取用户失败:', error)
}
}
🚀 部署指南
开发环境部署
- 安装依赖:
npm install - 启动开发服务器:
npm run dev - 访问: https://admin.jiebanke.com
生产环境部署
- 构建项目:
npm run build - 部署到静态文件服务器
- 配置Nginx反向代理
Docker部署
FROM node:18-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
📞 技术支持
- 文档: 查看API文档
- 问题反馈: 创建Issue
- 邮箱: support@jiebanke.com
📄 许可证
MIT License - 详见 LICENSE 文件。
🎯 版本历史
v1.0.0 (2025-01-01)
- 初始版本发布
- 基础框架搭建
- 核心功能模块
- 权限管理系统
- 响应式设计
最后更新: 2025-01-01
当前版本: v1.0.0