jiebanke/admin-system/README.md

# 结伴客后台管理系统

基于 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
<template>
  <!-- 模板代码 -->
</template>

<script setup lang="ts">
// 组合式API
</script>

<style scoped>
/* 组件样式 */
</style>
```

### 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