# ybs_tutorial_front

**Repository Path**: Tanking-Hao/ybs_tutorial_front

## Basic Information

- **Project Name**: ybs_tutorial_front
- **Description**: 教程中心后端，主要用于视频
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: code-refactor
- **Homepage**: None
- **GVP Project**: No

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 前端, vue3

## README

# 教程管理系统-前端

## 项目概述

教程管理系统是一个专门用于管理和呈现教程内容的Web应用。本系统支持视频教程和文档教程两种主要类型，为用户提供了直观、易用的教程浏览和学习平台，同时为管理员提供了完善的内容管理功能。

系统采用Vue.js 3框架开发，结合Element Plus UI组件库，构建了一个现代化、响应式的前端应用。

## 系统功能

### 用户端功能

- **教程浏览**：查看全部教程列表，支持按类别筛选
- **分类查看**：分别查看视频教程和文档教程
- **教程详情**：查看教程的详细内容，包含文本、图片、视频等富媒体内容
- **响应式设计**：适配不同屏幕尺寸的设备

### 管理端功能

- **教程管理**
  - 新增教程：创建新的视频或文档教程
  - 编辑教程：修改现有教程的内容和属性
  - 删除教程：移除不再需要的教程
  - 教程预览：在发布前预览教程效果
- **分类管理**
  - 创建分类：添加新的教程分类
  - 编辑分类：修改现有分类的名称和描述
  - 删除分类：移除空的分类
- **岗位管理**
  - 添加岗位：创建新的岗位类型
  - 编辑岗位：修改岗位信息
  - 删除岗位：移除不再使用的岗位
- **用户管理**
  - 用户创建：添加新的系统管理员
  - 用户编辑：修改用户信息和权限
  - 用户删除：移除用户账号
- **个人账户管理**
  - 修改密码：更新当前用户的登录密码
  - 账户信息：查看和编辑个人账户信息
- **API统计**
  - 接口调用统计：查看系统API使用情况
  - 性能监控：监控系统性能指标

## 业务流程图

```mermaid
flowchart TD
    A[用户访问] --> B{是否登录?}
    B -->|否| C[浏览公开教程]
    B -->|是| D[管理员功能]
    
    C --> C1[查看教程列表]
    C --> C2[按类别筛选]
    C --> C3[查看教程详情]
    
    D --> D1[教程管理]
    D --> D2[分类管理]
    D --> D3[岗位管理]
    D --> D4[用户管理]
    D --> D5[统计分析]
    
    D1 --> D1_1[新增教程]
    D1 --> D1_2[编辑教程]
    D1 --> D1_3[删除教程]
    
    D1_1 --> D1_1_1[选择教程类型]
    D1_1_1 --> D1_1_2[填写基本信息]
    D1_1_2 --> D1_1_3[上传媒体内容]
    D1_1_3 --> D1_1_4[保存发布]
    
    D2 --> D2_1[创建分类]
    D2 --> D2_2[编辑分类]
    D2 --> D2_3[删除分类]
    
    D3 --> D3_1[添加岗位]
    D3 --> D3_2[编辑岗位]
    D3 --> D3_3[删除岗位]
    
    D4 --> D4_1[创建用户]
    D4 --> D4_2[编辑用户]
    D4 --> D4_3[删除用户]
```

## 系统架构图

```mermaid
graph TD
    subgraph "前端架构"
    A[Vue.js 3] --> B[Element Plus]
    A --> C[Vue Router]
    A --> D[Axios]
    
    B --> UI[UI组件]
    C --> Routes[路由管理]
    D --> API[API请求]
    
    subgraph "核心模块"
    UI --> Auth[认证模块]
    UI --> Tutorial[教程模块]
    UI --> Category[分类模块]
    UI --> Position[岗位模块]
    UI --> User[用户模块]
    UI --> Stats[统计模块]
    end
    
    subgraph "公共组件"
    SharedComponents[共享组件] --> FileUploader[文件上传器]
    SharedComponents --> Pagination[分页组件]
    SharedComponents --> TextThumbnail[文本缩略图]
    SharedComponents --> PasswordStrength[密码强度计]
    end
    end
    
    subgraph "后端服务"
    API --> BackendAPI[后端API]
    end
```

## 技术栈

- **前端框架**: Vue.js 3
- **UI组件库**: Element Plus
- **路由管理**: Vue Router
- **HTTP客户端**: Axios
- **构建工具**: Vite
- **图表库**: ECharts
- **Office文档预览**: @vue-office/docx
- **加密工具**: crypto-js, bcryptjs, node-rsa

## 项目结构

```
src/
├── api/               # API接口定义
│   ├── auth.js        # 认证相关API
│   ├── category.js    # 分类相关API
│   ├── position.js    # 岗位相关API
│   ├── stats.js       # 统计相关API
│   ├── tutorials.js   # 教程相关API
│   ├── upload.js      # 上传相关API
│   └── users.js       # 用户相关API
├── assets/            # 静态资源
├── components/        # 公共组件
│   ├── FileUploader.vue      # 文件上传组件
│   ├── GlobalFooter.vue      # 全局页脚
│   ├── MenuTree.vue          # 菜单树组件
│   ├── PageHeader.vue        # 页面标题组件
│   ├── Pagination.vue        # 分页组件
│   ├── PasswordStrengthMeter.vue # 密码强度计
│   ├── TextThumbnail.vue     # 文本缩略图
│   └── UserProfile.vue       # 用户信息组件
├── config/            # 配置文件
├── layouts/           # 布局组件
│   ├── AdminLayout.vue  # 管理端布局
│   └── MainLayout.vue   # 用户端布局
├── router/            # 路由配置
│   └── index.js       # 路由定义
├── utils/             # 工具函数
├── views/             # 页面视图
│   ├── admin/         # 管理端视图
│   │   ├── ApiStatsManagement.vue    # API统计管理
│   │   ├── CategoryManagement.vue    # 分类管理
│   │   ├── ChangePassword.vue        # 修改密码
│   │   ├── PositionManagement.vue    # 岗位管理
│   │   ├── TutorialForm.vue          # 教程表单
│   │   ├── TutorialManagement.vue    # 教程管理
│   │   ├── UserAccount.vue           # 用户账户
│   │   └── UserManagement.vue        # 用户管理
│   ├── DocumentTutorialList.vue      # 文档教程列表
│   ├── Home.vue                      # 首页
│   ├── Login.vue                     # 登录页
│   ├── Operation.vue                 # 操作页
│   ├── PureNotFound.vue              # 404页面
│   ├── TutorialDetail.vue            # 教程详情
│   ├── TutorialList.vue              # 教程列表
│   └── VideoTutorialList.vue         # 视频教程列表
├── App.vue            # 应用入口组件
└── main.js            # 应用入口JS文件
```

## 安装与使用

### 环境要求

- Node.js 16.x 或更高版本
- npm 7.x 或更高版本

### 安装步骤

1. 克隆项目代码:
```bash
git clone <项目仓库地址>
cd ybs-tutorial-front
```

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

3. 启动开发服务器:
```bash
npm run dev
```

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

### 配置说明

项目配置主要在以下文件中:

- `vite.config.js`: Vite构建配置
- `src/config/`: 应用配置目录

## 开发规范

### 代码风格

- 使用ES6+语法
- 组件使用Vue单文件组件(.vue)格式
- 使用驼峰命名法命名变量和函数
- 使用PascalCase命名组件

### 提交规范

提交信息格式:
```
<类型>: <描述>

[可选的详细描述]
```

类型包括:
- feat: 新功能
- fix: 修复bug
- docs: 文档更新
- style: 代码格式变动
- refactor: 代码重构
- perf: 性能优化
- test: 测试相关
- chore: 构建过程或辅助工具变动

## 功能亮点

1. **安全性**
   - 密码加密存储
   - Token认证系统
   - 权限管理机制

2. **用户体验**
   - 响应式设计
   - 富媒体内容支持
   - 直观的操作界面

3. **可扩展性**
   - 模块化架构
   - 组件复用
   - 清晰的API结构

## 后续优化计划

1. **性能优化**
   - 实施懒加载
   - 优化资源加载
   - 引入服务端渲染

2. **功能扩展**
   - 添加搜索功能
   - 实现用户反馈系统
   - 集成更多媒体格式支持

3. **开发体验**
   - 完善文档
   - 添加单元测试
   - 优化构建流程