# myth-front

**Repository Path**: jsen/myth-front

## Basic Information

- **Project Name**: myth-front
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-13
- **Last Updated**: 2025-11-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 神话学院管理系统 (Myth Academy Management System)

## 项目概述

神话学院管理系统是一套为中小学量身定制的现代化教务管理平台，采用前端分离架构，提供完整的用户管理、教务管理、权限控制等功能。系统支持多角色分级授权，满足不同用户群体的使用需求。

## 🎯 项目特色

- **现代化技术栈**：基于 Vue 3 + TypeScript + Element Plus 开发
- **响应式设计**：完美适配PC端和移动端
- **角色权限管理**：支持多层级权限控制
- **模块化架构**：清晰的代码组织和可扩展性
- **用户体验优化**：现代化UI设计，操作流畅直观

## 📚 功能模块

### 1. 首页概览
- 校园运行数据统计面板
- 快捷操作入口
- 实时数据监控

### 2. 用户管理
#### 学生管理
- 学生信息录入与维护
- 学籍管理
- 班级分配

#### 教师管理
- 教师档案管理
- 任教科目配置
- 职称信息维护

### 3. 教务管理
#### 班级管理
- 班级信息配置
- 班主任分配
- 学生名单管理

#### 课程管理
- 课程设置与维护
- 课时安排
- 课程类型管理

#### 教室管理
- 教室资源管理
- 教室使用状态监控
- 容量与类型配置

#### 学年管理
- 学年学期设置
- 教学时间安排
- 当前学年标记

### 4. 系统管理
#### 账户管理
- 用户账户开通
- 角色分配
- 权限配置

#### 角色管理
- 角色定义与配置
- 权限分配
- 角色继承关系

#### 账户授权
- 权限批量分配
- 角色授权管理

### 5. 个人信息
- 个人资料维护
- 密码修改
- 账户信息查看

## 👥 用户角色

系统支持五种角色类型，每种角色拥有不同的权限和功能范围：

### 系统管理员 (ADMIN)
- 系统最高权限
- 账户管理、角色配置
- 全局数据监控

### 教务管理员 (EDU_ADMIN)
- 教务管理核心功能
- 学生/教师信息管理
- 基础数据维护

### 教师 (TEACHER)
- 个人教学信息查看
- 任课班级管理
- 课程安排查看

### 班主任 (HEAD_TEACHER)
- 班级管理权限
- 本班学生管理
- 班级事务处理

### 年级组长 (GRADE_LEADER)
- 年级整体管理
- 教师协调工作
- 年级事务处理

## 🛠 技术栈

### 前端技术
- **框架**：Vue 3.5.24 + Composition API
- **语言**：TypeScript 5.9.3
- **UI组件库**：Element Plus 2.11.7
- **图标库**：@element-plus/icons-vue
- **状态管理**：Pinia 3.0.4
- **路由**：Vue Router 4.6.3
- **构建工具**：Vite 7.2.2
- **样式预处理器**：Sass
- **HTTP客户端**：Axios
- **日期处理**：Day.js

### 开发环境
- **Node.js**：推荐 16+ 版本
- **包管理器**：npm 或 yarn

## 📁 项目结构

```
myth-front/
├── public/                 # 静态资源
│   ├── myth-college-icon.svg
│   └── vite.svg
├── src/
│   ├── api/               # API接口
│   │   ├── academic.ts    # 教务接口
│   │   ├── auth.ts        # 认证接口
│   │   ├── system.ts      # 系统接口
│   │   └── users.ts       # 用户接口
│   ├── assets/            # 资源文件
│   ├── components/        # 组件
│   │   └── layout/        # 布局组件
│   │       ├── HeaderBar.vue
│   │       ├── PageTabs.vue
│   │       ├── SidebarMenu.vue
│   │       └── SidebarMenuItem.vue
│   ├── constants/         # 常量配置
│   │   └── options.ts
│   ├── layouts/           # 布局文件
│   │   ├── BlankRouterView.vue
│   │   └── MainLayout.vue
│   ├── router/            # 路由配置
│   │   ├── index.ts
│   │   └── routes.ts
│   ├── stores/            # 状态管理
│   │   ├── index.ts
│   │   └── user.ts
│   ├── styles/            # 样式文件
│   │   ├── element-plus.scss
│   │   ├── global.scss
│   │   ├── mixins.scss
│   │   └── variables.scss
│   ├── types/             # TypeScript类型定义
│   │   ├── academic.ts
│   │   ├── auth.ts
│   │   ├── common.ts
│   │   ├── system.ts
│   │   └── users.ts
│   ├── utils/             # 工具函数
│   │   └── request.ts
│   └── views/             # 页面视图
│       ├── academic/      # 教务管理
│       ├── auth/          # 认证相关
│       ├── dashboard/     # 仪表板
│       ├── error/         # 错误页面
│       ├── profile/       # 个人中心
│       ├── system/        # 系统管理
│       └── users/         # 用户管理
├── design/                # 设计文档
├── package.json           # 项目配置
├── vite.config.ts         # Vite配置
└── README.md             # 项目说明
```

## 🚀 快速开始

### 环境要求
- Node.js (版本 16+)
- npm 或 yarn

### 安装依赖
```bash
npm install
# 或
yarn install
```

### 开发环境启动
```bash
npm run dev
# 或
yarn dev
```

访问 http://localhost:5173 查看应用

### 构建生产版本
```bash
npm run build
# 或
yarn build
```

### 预览生产版本
```bash
npm run preview
# 或
yarn preview
```

## ⚙️ 配置说明

### 环境变量
项目支持环境变量配置，可在根目录创建 `.env` 文件：

```env
# API接口基础地址
VITE_API_BASE_URL=http://localhost:8000/api

# 应用名称
VITE_APP_NAME=神话学院管理系统
```

### 接口代理配置
如需配置接口代理，请修改 `vite.config.ts` 中的 server.proxy 配置：

```typescript
server: {
  host: '0.0.0.0',
  port: 5173,
  proxy: {
    '/api': {
      target: 'http://your-api-server.com',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, '/api')
    }
  }
}
```

## 🔧 开发指南

### 代码规范
- 使用 ESLint + Prettier 进行代码格式化
- 遵循 Vue 3 官方风格指南
- 使用 TypeScript 严格模式

### 组件开发
- 使用 Composition API 编写组件
- 采用 TypeScript 进行类型约束
- 组件名使用 PascalCase 命名

### 路由配置
路由配置位于 `src/router/routes.ts`，支持：
- 动态路由加载
- 角色权限控制
- 嵌套路由结构

### 状态管理
使用 Pinia 进行状态管理，主要特点：
- 类型安全的 Store
- 模块化状态管理
- 良好的 TypeScript 支持

## 📊 数据架构

### 数据库设计
系统采用 MySQL 数据库，主要数据表包括：
- 用户表 (sys_user)
- 角色表 (sys_role) 
- 权限表 (sys_permission)
- 学生表 (edu_student)
- 教师表 (edu_teacher)
- 班级表 (edu_class)
- 课程表 (edu_course)
- 教室表 (edu_classroom)
- 学年表 (edu_academic_year)

### 权限设计
- 基于角色的访问控制 (RBAC)
- 权限层级继承
- 数据权限控制

## 🎨 界面设计

### 设计理念
- 现代化简约风格
- 用户体验优先
- 响应式布局设计

### 组件特色
- Element Plus 组件库
- 自定义主题配色
- 统一的设计语言

## 🔒 安全特性

### 前端安全
- XSS 防护
- CSRF 防护
- 数据输入验证

### 权限控制
- 路由级权限控制
- 组件级权限控制
- 接口级权限验证

## 📈 性能优化

### 构建优化
- Vite 快速构建
- 代码分割
- 懒加载路由

### 运行时优化
- 组件懒加载
- 图片优化
- 请求缓存

## 🤝 贡献指南

欢迎提交 Issue 和 Pull Request 来改进项目。

### 开发流程
1. Fork 项目仓库
2. 创建功能分支
3. 提交代码变更
4. 创建 Pull Request

### 代码提交规范
```bash
feat: 新增功能
fix: 修复bug
docs: 文档更新
style: 代码格式调整
refactor: 代码重构
test: 测试相关
chore: 构建过程或辅助工具变动
```

## 📞 联系与支持

如有问题或建议，请通过以下方式联系：

- 提交 Issue
- 发送邮件至项目维护者

## 📄 许可证

本项目采用 MIT 许可证，详见 [LICENSE](LICENSE) 文件。

---

**神话学院管理系统** - 打造智慧校园，赋能教育未来