# 教务系统后台

**Repository Path**: zmd1992/academic-administration-system-back

## Basic Information

- **Project Name**: 教务系统后台
- **Description**: 教师管理、学生管理、课程管理、智能排课、课表管理、兴趣班管理、考勤管理、作业管理、综合素质评价、家校互动、统计报表、系统设置、成绩管理
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-04
- **Last Updated**: 2026-05-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 中小学教务管理系统 — 前端

基于 Vue 3 + TypeScript + Element Plus 构建的教务管理后台前端。

后端源码地址：https://gitee.com/zmd1992/academic-administration-system-api.git

---

## 技术栈

| 类别 | 技术选型 |
|------|----------|
| 框架 | Vue 3 (Composition API + `<script setup>`) |
| 语言 | TypeScript |
| 构建工具 | Vite 8 |
| UI 组件库 | Element Plus 2.13.6 (中文语言包) |
| 状态管理 | Pinia 3 (持久化插件 pinia-plugin-persistedstate) |
| 路由 | Vue Router 4 (Hash 模式) |
| HTTP 请求 | Axios |
| 数据可视化 | ECharts 6 + vue-echarts 8 |
| 图标 | Element Plus Icons + SVG Sprite (vite-plugin-svg-icons) |
| 富文本 | vue-quill |
| 日期处理 | dayjs |
| 文件上传切片 | SparkMD5 |
| CSS 方案 | 自定义 CSS 变量 + scoped 样式 |

---

## 项目截图
![输入图片说明](https://portalback.springautumncome.asia/files/0c6bd45a30cb467884f9e91de4f3dab8.png)![输入图片说明](https://portalback.springautumncome.asia/files/c5775f519fc14d9fa84b2a165bb53aa8.png)![输入图片说明](https://portalback.springautumncome.asia/files/d090d6e73916472085078504ef15aa46.png)![输入图片说明](https://portalback.springautumncome.asia/files/b17c02c1f340463497ab8b1c43222573.png)![输入图片说明](https://portalback.springautumncome.asia/files/11ba424e339c4a9298b19867bd284a4f.png)![输入图片说明](https://portalback.springautumncome.asia/files/73adea9efbeb44a9948ec8c04c8fe714.png)![输入图片说明](https://portalback.springautumncome.asia/files/24560d18b44c42d88994e322c1d7203d.png)![输入图片说明](https://portalback.springautumncome.asia/files/a5b57ed58fbf45c288031e005d998386.png)![输入图片说明](https://portalback.springautumncome.asia/files/467aefd80bf743fa8c4052379859f791.png)![输入图片说明](https://portalback.springautumncome.asia/files/40c5edf685794550b093218919b74fc5.png)![输入图片说明](https://portalback.springautumncome.asia/files/95bdec3e03de4e36980c2a792e91f089.png)![输入图片说明](https://portalback.springautumncome.asia/files/21675309b55e481fa122aff4a7512a8b.png)![输入图片说明](https://portalback.springautumncome.asia/files/66275f36b66b4f37b9d128d3aa521cc2.png)![输入图片说明](https://portalback.springautumncome.asia/files/b3bde872130e4495b9830b16f79177c8.png)![输入图片说明](https://portalback.springautumncome.asia/files/b1a740b41712472a87948fe627ffae77.png)![输入图片说明](https://portalback.springautumncome.asia/files/b91530da44ff4847bca281fcf078a938.png)![输入图片说明](https://portalback.springautumncome.asia/files/3d6ef47b963e47618f4396c7a015c5c1.png)![输入图片说明](https://portalback.springautumncome.asia/files/f8d3b0dcaafd4ea9b588dc75175f55b5.png)![输入图片说明](https://portalback.springautumncome.asia/files/e25b9ccffe8947d89e6e005ba9ae87c6.png)![输入图片说明](https://portalback.springautumncome.asia/files/2c50b6b6b94e4898aab3d712b3c5616a.png)![输入图片说明](https://portalback.springautumncome.asia/files/f321a9e62c8247ea81b4478c4ef8a923.png)![输入图片说明](https://portalback.springautumncome.asia/files/8ce45911699f42ba8837d3370ff22049.png)![输入图片说明](https://portalback.springautumncome.asia/files/c731e9df128a42fd9e63884a354ba862.png)![输入图片说明](https://portalback.springautumncome.asia/files/4804ee0ce1c648289eccb78c06a29aff.png)![输入图片说明](https://portalback.springautumncome.asia/files/4a4dc8f80eff44c6b69328abc9aa1e99.png)![输入图片说明](https://portalback.springautumncome.asia/files/a0f173deb2224ab68e80cf70645bf7d7.png)![输入图片说明](https://portalback.springautumncome.asia/files/0e8c7d17ed1846fdb2c8c626db0754d4.png)![输入图片说明](https://portalback.springautumncome.asia/files/ff770a2e954f424085c743c09f5069e5.png)![输入图片说明](https://portalback.springautumncome.asia/files/e83b9f7e9f2049d190126dc53dac1e4a.png)![输入图片说明](https://portalback.springautumncome.asia/files/d5366d4933474971ae2846b89988c889.png)![输入图片说明](https://portalback.springautumncome.asia/files/12329f5b6b5547a4a5118977903895f0.png)![输入图片说明](https://portalback.springautumncome.asia/files/a51b9716e703417183dcebdb0ca617b4.png)![输入图片说明](https://portalback.springautumncome.asia/files/e9647165964d4063921738107f59f721.png)![输入图片说明](https://portalback.springautumncome.asia/files/e317bd8e2c2c4edba3ff0ef25072a36d.png)![输入图片说明](https://portalback.springautumncome.asia/files/249574cdb00b45c09a94efeaf12b2f25.png)![输入图片说明](https://portalback.springautumncome.asia/files/e4bf9fb4ecc245e4b992ee9fb68db0b8.png)![输入图片说明](https://portalback.springautumncome.asia/files/5abe744902204ecba73ad09060cd0f15.png)![输入图片说明](https://portalback.springautumncome.asia/files/6fdd8e7b9d9c4029948d596dad96d9ac.png)![输入图片说明](https://portalback.springautumncome.asia/files/1f5f86dc460c40c49c70a5b3d15ca36a.png)![输入图片说明](https://portalback.springautumncome.asia/files/f72577099ea44e29b35676fae6da353e.png)![输入图片说明](https://portalback.springautumncome.asia/files/26c671a6629444b3a03dbc77e70b6a79.png)![输入图片说明](https://portalback.springautumncome.asia/files/e5f302a10b104c109543cc8733111507.png)![输入图片说明](https://portalback.springautumncome.asia/files/ebd54828a18c4fc3b659effd858ba45a.png)![输入图片说明](https://portalback.springautumncome.asia/files/a1a1f55f62f74a7ba45d6a5bf4c3b2f5.png)![输入图片说明](https://portalback.springautumncome.asia/files/d83d483c92584cf4a5f4f64f777ab423.png)![输入图片说明](https://portalback.springautumncome.asia/files/3107452e123c4bd9b5431bfb9c497bbf.png)![输入图片说明](https://portalback.springautumncome.asia/files/5d82ec0c64854475872878556fd3033e.png)![输入图片说明](https://portalback.springautumncome.asia/files/a89bd481d4c64c5fbebc7f5964bee2f2.png)![输入图片说明](https://portalback.springautumncome.asia/files/9583a830ae334c418d5822495efb0b25.png)![输入图片说明](https://portalback.springautumncome.asia/files/bd43cd0b7bff4823b853774ca637cfde.png)![输入图片说明](https://portalback.springautumncome.asia/files/ab402e38f5234952aa45e1eda5083116.png)![输入图片说明](https://portalback.springautumncome.asia/files/6388b231b503468ab24967a67e828186.png)![输入图片说明](https://portalback.springautumncome.asia/files/28e82b43eef4455bb8b35875b45eb51b.png)![输入图片说明](https://portalback.springautumncome.asia/files/797ced34ec7d42a3ab62671a9d701c48.png)![输入图片说明](https://portalback.springautumncome.asia/files/2d86012819eb4d1693df50df0cb3b18c.png)![输入图片说明](https://portalback.springautumncome.asia/files/34471ee52189443cab834e9788daaf25.png)![输入图片说明](https://portalback.springautumncome.asia/files/459d3c809cbb4865a38b349e785b955d.png)![输入图片说明](https://portalback.springautumncome.asia/files/592dfbc511304697aba9b022b9c5d249.png)![输入图片说明](https://portalback.springautumncome.asia/files/cb7d46f57f4e407285fce865bb8f0b6b.png)![输入图片说明](https://portalback.springautumncome.asia/files/aff1ab9f7e8c42168c3fc24c385b40ce.png)![输入图片说明](https://portalback.springautumncome.asia/files/197e2d7a94284ca68296015ebf9cb521.png)![输入图片说明](https://portalback.springautumncome.asia/files/8ece0b4e5ccf47b8a41427737262b493.png)![输入图片说明](https://portalback.springautumncome.asia/files/c49395f1e622404f8a29b0ecb95070c4.png)![输入图片说明](https://portalback.springautumncome.asia/files/8fd137bf30744f8e9b0ed757ce97147b.png)![输入图片说明](https://portalback.springautumncome.asia/files/0cab024203c34de2b15de46cbcb9276c.png)![输入图片说明](https://portalback.springautumncome.asia/files/07d10930ee2b45ed89e868208757b800.png)![输入图片说明](https://portalback.springautumncome.asia/files/4141715eefee40c4b5462ee3430b9654.png)![输入图片说明](https://portalback.springautumncome.asia/files/9715fcfa674d4c44864dcfea536ba725.png)![输入图片说明](https://portalback.springautumncome.asia/files/9309dd27b85c4c7e9cad97d7e623295b.png)![输入图片说明](https://portalback.springautumncome.asia/files/7ff762d2b8164dc7a6f019a205ff293d.png)![输入图片说明](https://portalback.springautumncome.asia/files/f3497156ecb0453188a8fdf63e2658ee.png)![输入图片说明](https://portalback.springautumncome.asia/files/eda32ef481fa4ad3a9c0ce9c20bf00b0.png)![输入图片说明](https://portalback.springautumncome.asia/files/f47747031fd94e77b50f908b8f6fce89.png)![输入图片说明](https://portalback.springautumncome.asia/files/9d9c851a35bf45658ed4fb456746a6fe.png)![输入图片说明](https://portalback.springautumncome.asia/files/463b8174756341edbcb061d6e2b0d4b5.png)![输入图片说明](https://portalback.springautumncome.asia/files/878106b2bdf54293a3d3e3f69e747043.png)![输入图片说明](https://portalback.springautumncome.asia/files/244893e1d12246e6bda07305c4142306.png)![输入图片说明](https://portalback.springautumncome.asia/files/50d59e6aba9f49f8a1fc9d48cd008a68.png)![输入图片说明](https://portalback.springautumncome.asia/files/208f59b60f3f4f9387c1a8189a0348e1.png)![输入图片说明](https://portalback.springautumncome.asia/files/26616443d4fe49dd81ba7b3fa6f61749.png)![输入图片说明](https://portalback.springautumncome.asia/files/04a708d22f4747d3b5c44def9edddf6b.png)![输入图片说明](https://portalback.springautumncome.asia/files/d1e95d5edbc44ed2968e4fd1512d8905.png)![输入图片说明](https://portalback.springautumncome.asia/files/339bd58362574d10a696bcd0468d5e72.png)![输入图片说明](https://portalback.springautumncome.asia/files/da72126d840c4fffb4bed6680c73ce67.png)


## 项目结构

```
src/
├── api/                    # API 接口模块（47 个文件）
│   ├── user.ts             # 登录/登出/用户信息
│   ├── menu.ts             # 菜单管理
│   ├── role.ts             # 角色管理
│   ├── student.ts          # 学生管理
│   ├── teacher.ts          # 教师管理
│   ├── class.ts            # 班级管理
│   ├── timetable.ts        # 排课管理
│   ├── timetablechange.ts  # 调课管理
│   ├── score.ts            # 成绩管理
│   ├── attendance.ts       # 考勤管理
│   ├── interestClass.ts    # 兴趣班管理
│   ├── exam.ts             # 考试管理
│   ├── homework.ts         # 作业管理
│   ├── notice.ts           # 通知公告
│   ├── statistics.ts       # 数据统计
│   ├── dashboard.ts        # 工作台数据
│   ├── dict.ts             # 字典管理
│   ├── parent.ts           # 家长管理
│   ├── archive.ts          # 成长档案
│   └── ...                 # 其他模块
├── assets/                 # 静态资源
│   ├── icons/svg/          # SVG 图标
│   └── iconfont/           # Iconfont 图标库
├── components/             # 通用组件（14 个）
│   ├── SideMenu/index.vue  # 侧边导航菜单
│   ├── HeaderBar/index.vue # 顶部导航栏
│   ├── AttendanceCalendar/ # 考勤日历组件
│   ├── AutoTimetable/      # 自动排课弹窗
│   ├── BatchAdjust/        # 批量调课弹窗
│   ├── BatchStopTimetable/ # 批量停课弹窗
│   ├── ScorePrint/         # 成绩打印组件
│   ├── ChuckUpload/        # 分片上传组件
│   ├── IconSelect/         # 图标选择器
│   ├── TimetableApplyDialog/ # 调课申请弹窗
│   ├── SvgIcon/            # SVG 图标封装
│   └── ...                 # 其他组件
├── directives/
│   └── permission.ts       # v-permission 权限指令
├── router/
│   ├── index.ts            # 路由配置 + 全局守卫
│   └── dynamic.ts          # 动态路由加载
├── stores/
│   ├── userStore.ts        # 用户状态（持久化）
│   └── menuStore.ts        # 菜单状态
├── types/                  # TypeScript 类型定义
│   ├── user.ts             # 用户类型
│   ├── menu.ts             # 菜单类型
│   ├── dashboard.ts        # 仪表盘类型
│   ├── statistics.ts       # 统计类型
│   ├── homework.ts         # 作业类型
│   ├── interestClass.ts    # 兴趣班类型
│   ├── task.ts             # 任务类型
│   └── notice.ts           # 通知类型
├── utils/
│   ├── request.ts          # Axios 实例 + 拦截器
│   ├── download.ts         # 文件下载工具
│   └── date.ts             # 日期格式化
├── views/                  # 页面视图
│   ├── Login.vue           # 登录页（支持角色选择）
│   ├── Home.vue            # 主布局（侧边栏+顶栏+内容区）
│   ├── Index.vue           # 工作台仪表盘
│   ├── NotFound.vue        # 404 页面
│   ├── person.vue          # 个人中心
│   ├── admin/              # 兴趣班管理后台
│   ├── attendance/         # 考勤管理
│   ├── class/              # 班级管理
│   ├── classroom/          # 教室管理
│   ├── ConductScore/       # 操行评分
│   ├── course/             # 课程管理
│   ├── DrawResultList/     # 抽签结果
│   ├── exam/               # 考试管理
│   ├── examRoom/           # 考场管理
│   ├── grade/              # 年级管理
│   ├── GrowthArchive/      # 成长档案
│   ├── homework/           # 作业管理
│   ├── interestClassConfig/ # 兴趣班配置
│   ├── message/            # 消息管理
│   ├── notice/             # 通知公告
│   ├── ParentHome/         # 家长端
│   ├── ParentMessage/      # 家长消息
│   ├── RewardPunishment/   # 奖惩记录
│   ├── school/             # 学校信息设置
│   ├── schoolYearSemester/ # 学年学期
│   ├── score/              # 成绩管理
│   ├── statistics/         # 数据统计
│   ├── student/            # 学生端
│   ├── subject/            # 科目管理
│   ├── system/             # 系统管理
│   ├── teacher/            # 教师管理
│   ├── timesection/        # 节次管理
│   └── timetable/          # 排课管理
├── style.css               # 全局样式（CSS 变量、暗黑模式、工具类）
├── style/index.css         # 布局辅助样式
├── main.ts                 # 应用入口
├── App.vue                 # 根组件
└── ...
```


---

## 路由结构

| 路径 | 页面 | 说明 |
|------|------|------|
| `/login` | Login.vue | 登录页 |
| `/` | Home.vue | 主布局（侧边栏+顶栏） |
| `/` (空路径) | Index.vue | 工作台仪表盘 |
| `/:pathMatch(.*)*` | NotFound.vue | 404 兜底 |

其余路由根据后端返回的菜单树**动态注册**，支持多级嵌套。

### 路由守卫流程
1. 访问任意页面 → beforeEach 守卫
2. 无 token → 跳转 `/login`
3. 有 token 未加载菜单 → 调 `/menu/tree` 获取菜单树 → `addDynamicRoutes()` 动态添加
4. 无权限路由 → 跳转 404

---

## 状态管理

### userStore（持久化到 localStorage）
| 状态/方法 | 类型 | 说明 |
|-----------|------|------|
| `token` | string | JWT token |
| `userInfo` | UserInfo | 当前用户信息 |
| `permissions` | string[] | 权限标识列表 |
| `loginBtn()` | action | 登录 -> 存 token -> 加载信息 |
| `getUserInfoBtn()` | action | 获取用户信息 |
| `logoutBtn()` | action | 登出 -> 清除状态 -> 跳转登录 |
| `setPermissions()` | action | 设置权限列表 |

### menuStore
| 状态/方法 | 说明 |
|-----------|------|
| `menuList` | 完整菜单树 |
| `showMenus` | 过滤后显示的菜单 |
| `loadMenu()` | 从 API 加载菜单 |
| `refreshMenu()` | 刷新菜单（用于增删改后） |
| `clearMenu()` | 清空菜单 |

---

## API 通信

### Axios 配置 (`request.ts`)
- **baseURL**: `/api`
- **超时**: 30s
- **请求拦截器**: 自动添加 `Authorization: Bearer <token>` 请求头
- **响应拦截器**:
  - 401 → 清除登录状态，跳转登录页
  - 403 → 提示无权限
  - 500 → 提示服务器错误
- 导出方法: `get`, `post`, `postForm`, `put`, `delete`, `upload`, `uploadMultiple`

---

## 组件说明

### 布局组件
| 组件 | 说明 |
|------|------|
| `SideMenu` | 递归渲染的侧边导航菜单，支持折叠/展开、暗黑模式 |
| `HeaderBar` | 顶部栏：Logo、面包屑、暗黑模式开关、用户下拉菜单 |

### 业务组件
| 组件 | 说明 |
|------|------|
| `AttendanceCalendar` | 月度考勤日历，支持按班级/学生筛选，颜色标记出勤状态 |
| `AutoTimetable` | 自动排课对话框（设置节次/周课时/连排） |
| `BatchAdjust` | 批量调课对话框（按教师/教室筛选换课） |
| `BatchStopTimetable` | 批量停课对话框 |
| `ChuckUpload` | 大文件分片上传（MD5 校验、断点续传、进度条） |
| `ScorePrint` | 成绩打印（PDF 预览，A4/条格式） |
| `IconSelect` | 图标选择器（SVG + Element Plus 图标） |
| `TimetableApplyDialog` | 调课申请表单对话框 |
| `SvgIcon` | SVG 图标封装组件 |

### 组件目录
```
AdjustTransterApplyRecord/  # 调课申请记录
AutoTimetableOperLogList/   # 自动排课操作日志
BatchAdjustOperLogList/     # 批量调课操作日志
BatchStopOperLogList/       # 批量停课操作日志
```

---

## 权限控制

### 数据权限
- 菜单根据角色过滤：`sys_menu` 表的 `allowRoles` 字段控制可见性
- 后端 `DataScopeInnerInterceptor` 根据角色自动追加 SQL 过滤条件

### 视图权限
- `v-permission` 指令：无权限时从 DOM 中移除元素
- 菜单路由：未授权的菜单条目不会出现在侧边栏
- 导航守卫：无权访问的路由重定向到 404

---

## 样式系统

### 全局 CSS 变量 (`style.css`)
```css
--primary: #409eff;         /* 主题色 */
--primary-light: #ecf5ff;   /* 主题色浅色 */
--primary-dark: #337ecc;    /* 主题色深色 */
--success: #67c23a;
--warning: #e6a23c;
--danger: #f56c6c;
--info: #909399;
--text-primary: #303133;
--text-secondary: #909399;
--bg-page: #f5f7fa;
--bg-card: #ffffff;
--border: #e4e7ed;
--shadow-sm: 0 2px 10px rgba(0,0,0,0.05);
--shadow-md: 0 4px 20px rgba(0,0,0,0.08);
```

### 暗黑模式
- 通过 `<html class="dark">` 切换
- 所有 CSS 变量在 `.dark` 选择器下重新定义
- 启动时读取 `localStorage.getItem('theme')` 恢复上次设置
- 支持系统 `prefers-color-scheme: dark` 媒体查询

### 工具类
- `.mt-1` ~ `.mt-5`, `.mb-1` ~ `.mb-5` 等间距类
- `.text-primary`, `.text-success`, `.text-danger` 等文本颜色
- `.bg-page`, `.bg-card` 等背景色

---

## 快速启动

### 前置条件
- Node.js 18+
- npm 或 pnpm

### 步骤

```bash
# 安装依赖
npm install

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

# 生产构建
npm run build

# 预览构建结果
npm run preview
```

### 代理配置
Vite 代理 `/api` 到后端 `http://localhost:8080`：
```typescript
// vite.config.ts
server: {
  proxy: {
    '/api': {
      target: 'http://localhost:8080',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, '')
    }
  }
}
```

---

## 开发规范

- 使用 Composition API + `<script setup lang="ts">`
- 所有样式写在 `<style scoped>` 中，引用全局 CSS 变量
- 不使用 Tailwind CSS 工具类（`flex`、`grid` 等引导类不存在）
- API 调用统一通过 `src/api/` 下的模块文件
- 类型定义放在 `src/types/` 对应文件中
- 组件放在 `src/components/` 下，以目录方式组织