booking_admin/doc/开发说明.md

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

项目概述

基于 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

VITE_APP_TITLE=教室预订管理系统
VITE_APP_NAMESPACE=booking-admin

.env.development

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

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

启动项目

# 安装依赖（如果还没有安装）
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. 添加数据缓存机制