# 教育游戏 - 管理后台

## 项目简介

这是教育游戏系统的管理后台，使用 Vue 3 + Vite + Element Plus 构建，提供用户管理、题目管理、数据统计等功能。

## 技术栈

- Vue 3
- Vite 6
- Element Plus
- Pinia（状态管理）
- Vue Router（路由）
- ECharts（数据可视化）
- Axios（HTTP请求）

## 项目结构

```
edu_game_frontend/
├── src/
│   ├── api/          # API请求
│   ├── assets/       # 静态资源
│   ├── components/   # 通用组件
│   ├── views/        # 页面组件
│   ├── router/       # 路由配置
│   ├── stores/       # 状态管理
│   ├── App.vue       # 根组件
│   └── main.js       # 入口文件
├── vite.config.js    # Vite配置
└── package.json
```

## 快速启动

### 环境要求

- Node.js 16+
- npm 或 yarn

### 安装依赖

```bash
npm install
```

### 开发模式运行

```bash
npm run dev
```

服务默认地址: `http://localhost:5173`

### 生产构建

```bash
npm run build
```

构建产物位于 `dist/` 目录

### 预览构建

```bash
npm run preview
```

## 配置说明

### 后端API地址配置

在 `vite.config.js` 中配置开发环境的后端代理：

```javascript
const devApiTarget = process.env.VITE_DEV_API_TARGET || 'http://localhost:8080';
```

也可以通过环境变量设置：

```bash
# Windows PowerShell
$env:VITE_DEV_API_TARGET = "http://your-backend:8080"
npm run dev
```

## 功能模块

### 管理后台功能

- 管理员登录/登出
- 用户管理（查看、编辑用户信息）
- 题目管理（添加、编辑、删除题目）
- 游戏数据统计（答题情况、成就等）
- 数据可视化展示

## 默认账号

使用后端提供的管理员账号登录：

- 用户名: `admin`
- 密码: `admin123`

## 部署

### Nginx 部署示例

```nginx
server {
    listen 80;
    server_name your-domain.com;

    location / {
        root /path/to/dist;
        try_files $uri $uri/ /index.html;
    }

    location /api {
        proxy_pass http://backend-server:8080;
        proxy_set_header Host $host;
    }
}
```