# 智慧教室管理系统 - Web 管理端

Author: Sixu Wei <reisa@sust.edu.cn>

Last updated: Jan 29, 2026

本文档描述 Classroom Manager Web 管理端的核心架构、功能模块和开发规范。

## 架构与技术栈

- **框架**：Vue 3 + Vite
- **UI 组件库**：Element Plus
- **状态管理**：Pinia
- **路由**：Vue Router 4
- **HTTP 客户端**：Axios
- **加密**：SM2 国密算法（用于密码传输）
- **代理服务器**：Nginx (负责反向代理、SSL 终止及前端静态资源托管)

## 项目结构

```
web/src/
├── api/          # API 接口封装
├── assets/       # 静态资源
├── components/   # 公共组件
├── layouts/      # 页面布局
├── router/       # 路由配置
├── stores/       # Pinia 状态管理
├── utils/        # 工具函数
└── views/        # 页面视图
```

## 主要功能模块

- **用户认证**
  - 邮箱密码登录，密码使用 SM2 加密传输
  - JWT Token 认证（access + refresh 双 token）
  - WebAuthn 无密码登录支持
  - TOTP 双因素认证

- **教室管理**
  - 教室列表与详情查看
  - 教室状态管理（可用/维护/占用）
  - 空闲教室查询

- **借用管理**
  - 借用申请审批流程
  - 申请状态跟踪
  - 时间冲突检测

- **报修管理**
  - 报修工单处理
  - 状态流转（待处理→处理中→已完成）
  - 图片附件支持

- **违规管理**
  - 违规举报处理
  - 处理结果记录

- **课程中心 (新)**
  - 排课数据查询
  - 课程实时状态展示

## 快速开始

```bash
# 安装依赖
npm install

# 启动开发服务器（默认 3000 端口）
npm run dev

# 构建生产版本
npm run build
```

## 开发配置

### 后端代理

前端开发服务器默认代理 `/api` 请求到 `http://localhost:8000`，配置位于 `vite.config.js`：

```javascript
server: {
  proxy: {
    '/api': {
      target: 'http://localhost:8000',
      changeOrigin: true
    }
  }
}
```
## 开发规范

- **组件命名**：使用 PascalCase，如 `ClassroomList.vue`
- **API 封装**：统一在 `src/api/` 目录下按模块组织
- **状态管理**：全局状态使用 Pinia store，组件内状态使用 `ref`/`reactive`
- **错误处理**：API 请求统一使用拦截器处理错误，显示 Element Plus 消息提示