# 结伴客后台管理系统
基于 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
## 📦 安装依赖
```bash
cd admin-system
npm install
```
## 🛠️ 开发
```bash
# 启动开发服务器
npm run dev
# 类型检查
npm run type-check
# 代码格式化
npm run lint
# 构建生产版本
npm run build
# 预览生产版本
npm run preview
```
## 🌐 环境配置
系统支持多环境配置：
### 开发环境 (.env.development)
```env
NODE_ENV=development
VITE_API_BASE_URL=https://webapi.jiebanke.com/api/v1
VITE_FEATURE_DEBUG=true
```
### 生产环境 (.env.production)
```env
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. 系统设置
- 系统参数配置
- 操作日志查看
- 缓存管理
- 系统监控
## 🎨 主题定制
系统支持主题定制：
```less
// 主要主题变量
--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命名
### 组件开发
```vue
```
### API调用
```typescript
// 使用封装的request方法
import { request } from '@/api'
const getUsers = async () => {
try {
const response = await request.get('/users')
return response.data
} catch (error) {
console.error('获取用户失败:', error)
}
}
```
## 🚀 部署指南
### 开发环境部署
1. 安装依赖: `npm install`
2. 启动开发服务器: `npm run dev`
3. 访问: https://admin.jiebanke.com
### 生产环境部署
1. 构建项目: `npm run build`
2. 部署到静态文件服务器
3. 配置Nginx反向代理
### Docker部署
```dockerfile
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文档](./docs/api-documentation.md)
- 问题反馈: [创建Issue](https://github.com/jiebanke/admin-system/issues)
- 邮箱: support@jiebanke.com
## 📄 许可证
MIT License - 详见 [LICENSE](LICENSE) 文件。
## 🎯 版本历史
### v1.0.0 (2025-01-01)
- 初始版本发布
- 基础框架搭建
- 核心功能模块
- 权限管理系统
- 响应式设计
---
**最后更新**: 2025-01-01
**当前版本**: v1.0.0