# tliasfrontdevelopment

**Repository Path**: icebin0722/tliasfrontdevelopment

## Basic Information

- **Project Name**: tliasfrontdevelopment
- **Description**: 这是一个小型前端测试项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-09
- **Last Updated**: 2026-04-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue-Tlias-Management 项目文档

## 项目概述

### 项目名称
Vue-Tlias-Management

### 项目简介
Vue-Tlias-Management 是一个基于 Vue 3 开发的企业级管理系统前端项目，提供了员工、部门、班级、学生等核心业务的管理功能，支持数据可视化报表和多语言国际化。

### 主要功能和特点
- **用户认证**：登录/登出功能，基于 token 的身份验证
- **员工管理**：员工信息的增删改查、批量操作、密码修改
- **部门管理**：部门信息的管理与维护
- **班级管理**：班级信息的管理
- **学生管理**：学生信息的管理
- **日志管理**：系统操作日志的查看
- **数据报表**：员工和学生数据的可视化报表
- **国际化**：支持中英文切换
- **响应式设计**：适配不同屏幕尺寸

## 技术栈说明

### 前端技术
- **Vue 3**：前端框架
- **Vue Router**：路由管理
- **Vue I18n**：国际化支持
- **Element Plus**：UI 组件库
- **Axios**：HTTP 请求库
- **ECharts**：数据可视化图表库
- **Vite**：构建工具

### 后端技术
- （注：本项目为前端项目，后端 API 接口由外部服务提供）

### 数据库
- （注：本项目为前端项目，数据存储由后端服务管理）

### 其他关键技术
- **ESLint**：代码质量检查
- **Prettier**：代码格式化
- **PPTXGenJS**：PPT 生成库

## 环境要求与安装步骤

### 环境要求
- **Node.js**：v14.0.0 或更高版本
- **npm**：v6.0.0 或更高版本

### 安装步骤

1. **克隆项目**
   ```bash
   git clone <项目仓库地址>
   cd vue-tlias-management
   ```

2. **安装依赖**
   ```bash
   npm install
   ```

3. **本地运行**
   ```bash
   npm run dev
   ```

4. **构建生产版本**
   ```bash
   npm run build
   ```

5. **预览生产构建**
   ```bash
   npm run preview
   ```

## 使用指南

### 基本操作流程
1. **登录系统**：访问 `/login` 页面，输入用户名和密码进行登录
2. **导航菜单**：登录后，通过左侧导航菜单访问各个功能模块
3. **数据管理**：在对应模块中进行数据的增删改查操作
4. **查看报表**：在报表模块中查看数据可视化图表
5. **切换语言**：通过顶部导航栏的语言切换按钮切换中英文

### 核心功能演示

#### 员工管理
- **查看员工列表**：进入员工管理页面，查看所有员工信息
- **添加员工**：点击「新增」按钮，填写员工信息并保存
- **编辑员工**：点击「编辑」按钮，修改员工信息并保存
- **删除员工**：点击「删除」按钮，确认后删除员工
- **批量删除**：选择多个员工，点击「批量删除」按钮进行操作
- **修改密码**：点击「修改密码」按钮，为指定员工修改密码

#### 数据报表
- **员工报表**：查看员工相关的数据统计和图表
- **学生报表**：查看学生相关的数据统计和图表

### 常见用例说明

#### 如何添加新员工？
1. 进入员工管理页面
2. 点击「新增」按钮
3. 填写员工表单信息
4. 点击「保存」按钮完成添加

#### 如何查看系统操作日志？
1. 进入日志管理页面
2. 查看系统自动记录的操作日志

## 项目结构说明

### 主要目录及文件功能

```
src/
├── api/             # API 接口调用
│   ├── clazz.js     # 班级相关接口
│   ├── dept.js      # 部门相关接口
│   ├── emp.js       # 员工相关接口
│   ├── log.js       # 日志相关接口
│   ├── login.js     # 登录相关接口
│   ├── report.js    # 报表相关接口
│   └── student.js   # 学生相关接口
├── assets/          # 静态资源
├── i18n/            # 国际化配置
│   ├── en.js        # 英文语言包
│   ├── index.js     # 国际化配置
│   └── zh.js        # 中文语言包
├── router/          # 路由配置
│   └── index.js     # 路由定义和守卫
├── utils/           # 工具函数
│   └── request.js   # HTTP 请求封装
├── views/           # 页面组件
│   ├── clazz/       # 班级管理页面
│   ├── dept/        # 部门管理页面
│   ├── emp/         # 员工管理页面
│   ├── index/       # 首页
│   ├── layout/      # 布局组件
│   ├── log/         # 日志管理页面
│   ├── login/       # 登录页面
│   ├── report/      # 报表页面
│   └── stu/         # 学生管理页面
├── App.vue          # 根组件
└── main.js          # 入口文件
```

### 核心文件说明
- **src/main.js**：应用入口，配置全局插件和组件
- **src/App.vue**：根组件，定义应用布局
- **src/router/index.js**：路由配置，定义路由规则和守卫
- **src/utils/request.js**：HTTP 请求封装，处理 API 调用
- **src/api/**：各个模块的 API 接口定义
- **src/views/**：各个功能模块的页面组件

## 贡献指南

### 提交代码规范
- 提交信息应清晰明了，描述本次修改的内容
- 遵循 Angular 提交规范，格式为：`type(scope): subject`
  - **type**：提交类型，如 feat（新功能）、fix（修复）、docs（文档）、style（样式）、refactor（重构）、test（测试）、chore（构建/依赖）
  - **scope**：修改范围，如 router、api、views 等
  - **subject**：简短描述，不超过 50 个字符

### 分支管理策略
- **main**：主分支，用于发布生产版本
- **develop**：开发分支，集成所有功能开发
- **feature/**：特性分支，用于开发新功能
- **fix/**：修复分支，用于修复 bug

### PR 流程
1. 从 develop 分支创建特性分支
2. 在特性分支上进行开发
3. 开发完成后，提交代码并创建 PR 到 develop 分支
4. 经过代码审查后，合并到 develop 分支
5. 当 develop 分支稳定后，合并到 main 分支进行发布

## 许可证信息

本项目采用 MIT 许可证。详情请查看 [LICENSE](LICENSE) 文件。

## 联系方式
- **邮箱**：[3314208359@qq.com] 

## 致谢

- Vue 3 团队
- Element Plus 团队
- 所有为项目做出贡献的开发者

---

**注**：本文档将随着项目的发展不断更新，如有任何疑问或建议，请联系项目维护者。