智慧教室管理系统 - 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 双因素认证

  • 教室管理

    • 教室列表与详情查看

    • 教室状态管理（可用/维护/占用）

    • 空闲教室查询

  • 借用管理

    • 借用申请审批流程

    • 申请状态跟踪

    • 时间冲突检测

  • 报修管理

    • 报修工单处理

    • 状态流转（待处理→处理中→已完成）

    • 图片附件支持

  • 违规管理

    • 违规举报处理

    • 处理结果记录

  • 课程中心 (新)

    • 排课数据查询

    • 课程实时状态展示

快速开始

# 安装依赖
npm install

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

# 构建生产版本
npm run build

开发配置

后端代理

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

server: {
  proxy: {
    '/api': {
      target: 'http://localhost:8000',
      changeOrigin: true
    }
  }
}

开发规范

  • 组件命名：使用 PascalCase，如 ClassroomList.vue

  • API 封装：统一在 src/api/ 目录下按模块组织

  • 状态管理：全局状态使用 Pinia store，组件内状态使用 ref/reactive

  • 错误处理：API 请求统一使用拦截器处理错误，显示 Element Plus 消息提示