# 教室预订管理系统 - 开发说明

## 项目概述

基于 Vben Admin 框架开发的教室预订管理系统后台，使用 Vue 3 + TypeScript + Ant Design Vue 构建。

## 已完成功能

### 1. API 配置
- ✅ 配置 API 基础 URL: `https://xz.dhdjy.com`
- ✅ 支持 Session 认证（通过 Cookie）
- ✅ 响应格式适配（code: 200 表示成功）

### 2. API 接口定义
已创建所有 API 接口定义，包括：
- ✅ 登录相关（登录、获取管理员信息、退出登录）
- ✅ 首页相关（获取系统信息）
- ✅ 个人信息（获取、更新、修改密码）
- ✅ 教室管理（列表、详情、新增、编辑、删除、批量删除、座位布局等）
- ✅ 预订管理（列表、同意/拒绝申请）
- ✅ 学生管理（列表、详情、新增、编辑、删除、状态更新、导入等）
- ✅ 班级管理（列表、新增、编辑、删除）
- ✅ 教师管理（列表、详情、新增、编辑、删除）
- ✅ 用户管理（列表、详情、新增、编辑、删除、状态更新）
- ✅ 学校管理（列表、详情、新增、编辑、删除、账号管理）
- ✅ 系统设置（获取、保存、上传图片）
- ✅ 通用功能（获取必应壁纸）

### 3. 路由配置
已创建所有模块的路由配置：
- ✅ 教室管理路由
- ✅ 预订管理路由
- ✅ 学生管理路由
- ✅ 班级管理路由
- ✅ 教师管理路由
- ✅ 用户管理路由（仅超级管理员）
- ✅ 学校管理路由（仅超级管理员）
- ✅ 系统设置路由（仅超级管理员）

### 4. 页面组件
已创建核心页面组件：
- ✅ 教室管理列表页
- ✅ 教室管理详情/编辑页
- ✅ 学生管理列表页
- ✅ 学生管理详情/编辑页
- ✅ 预订管理列表页
- ✅ 班级管理列表页
- ✅ 教师管理列表页
- ✅ 教师管理详情/编辑页
- ✅ 用户管理列表页
- ✅ 学校管理列表页
- ✅ 学校管理详情/编辑页
- ✅ 系统设置页
- ✅ 首页（系统概览）

### 5. 国际化
- ✅ 已添加所有页面的中文翻译

### 6. 登录页面
- ✅ 已更新登录页面以适配新的 API 接口

## 项目结构

```
apps/web-antd/
├── src/
│   ├── api/
│   │   ├── admin/          # 后台管理 API
│   │   │   ├── classroom.ts
│   │   │   ├── booking.ts
│   │   │   ├── student.ts
│   │   │   ├── class.ts
│   │   │   ├── teacher.ts
│   │   │   ├── user.ts
│   │   │   ├── school.ts
│   │   │   ├── setting.ts
│   │   │   ├── profile.ts
│   │   │   ├── common.ts
│   │   │   └── index-page.ts
│   │   ├── core/           # 核心 API（登录、用户信息等）
│   │   └── request.ts      # 请求配置
│   ├── router/
│   │   └── routes/
│   │       └── modules/    # 路由模块
│   ├── views/              # 页面组件
│   │   ├── classroom/
│   │   ├── booking/
│   │   ├── student/
│   │   ├── class/
│   │   ├── teacher/
│   │   ├── user/
│   │   ├── school/
│   │   ├── setting/
│   │   └── dashboard/
│   └── locales/
│       └── langs/
│           └── zh-CN/
│               └── page.json
```

## 环境配置

需要在 `apps/web-antd/` 目录下创建 `.env` 和 `.env.development` 文件：

### .env
```bash
VITE_APP_TITLE=教室预订管理系统
VITE_APP_NAMESPACE=booking-admin
```

### .env.development
```bash
VITE_PORT=5555
VITE_BASE=/super/
VITE_GLOB_API_URL=https://xuanzuo.dhdjy.com
VITE_NITRO_MOCK=false
VITE_DEVTOOLS=true
VITE_INJECT_APP_LOADING=true
```

### .env.production
```bash
VITE_BASE=/super/
VITE_GLOB_API_URL=https://xuanzuo.dhdjy.com
VITE_COMPRESS=gzip
VITE_PWA=false
VITE_ROUTER_HISTORY=hash
VITE_INJECT_APP_LOADING=true
VITE_ARCHIVER=true
```

## 启动项目

```bash
# 安装依赖（如果还没有安装）
pnpm install

# 启动开发服务器
pnpm dev:antd

# 构建生产版本
pnpm build:antd
```

## 注意事项

1. **API 响应格式**: 根据 API.md，成功响应 code 为 200，已配置在 `request.ts` 中
2. **Session 认证**: 使用 Session 认证，请求会自动携带 Cookie（通过 `withCredentials: true`）
3. **分页格式**: API 返回的分页数据格式为 layui table 格式（code, msg, count, data）
4. **权限控制**: 用户管理和学校管理模块仅超级管理员可见（通过路由 meta.roles 控制）

## 待完善功能

1. 教室座位布局可视化编辑
2. 学生导入 Excel 功能
3. 预订详情页面
4. 更多数据统计和图表展示
5. 文件上传功能完善
6. 表单验证规则完善
7. 错误处理优化

## API 接口说明

所有 API 接口定义在 `apps/web-antd/src/api/admin/` 目录下，接口路径和参数完全按照 `API.md` 文档实现。

## 开发建议

1. 根据实际 API 返回的数据结构调整页面显示
2. 完善表单验证规则
3. 添加更多的错误处理和用户提示
4. 优化页面加载性能
5. 添加数据缓存机制