# 学习项目前端

**Repository Path**: shen19970101/learning-frontend

## Basic Information

- **Project Name**: 学习项目前端
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-13
- **Last Updated**: 2026-04-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 辅助学习软件 - 前端

## 项目简介

基于 Vue 3 + Vue Router + Pinia + Element Plus + MindElixir 的辅助学习软件前端。

## 技术栈

| 技术 | 版本 |
|------|------|
| Vue | 3.3.4 |
| Vue Router | 4.2.4 |
| Pinia | 2.1.6 |
| Element Plus | 2.3.14 |
| MindElixir | 3.1.0 |
| Axios | 1.5.0 |
| Vite | 4.4.9 |

## 功能模块

- **视频列表**: 展示视频卡片，支持搜索、分类筛选、分页
- **视频详情**: 查看视频信息、知识脑图、知识内容
- **分类管理**: 多级分类树管理
- **脑图编辑**: 可视化知识脑图，支持节点交互
- **知识内容**: 富文本知识内容编辑和保存

## 快速开始

### 1. 安装依赖

```bash
npm install
```

### 2. 启动开发服务器

```bash
npm run dev
```

前端将在 http://localhost:3001 启动。

### 3. 构建生产版本

```bash
npm run build
```

## 页面结构

### 1. 视频列表页 (`/videos`)

- 左侧：分类树导航
- 右侧：视频卡片网格
- 功能：搜索、筛选、分页、添加视频

### 2. 视频详情页 (`/videos/:id`)

- 顶部：视频信息和操作按钮
- 左侧：知识脑图渲染区（MindElixir）
- 右侧：知识内容编辑区

## 项目结构

```
learning-frontend/
├── src/
│   ├── api/              # API 请求模块
│   │   ├── category.js
│   │   ├── video.js
│   │   ├── mindmap.js
│   │   └── knowledge.js
│   ├── router/           # 路由配置
│   │   └── index.js
│   ├── stores/           # Pinia 状态管理
│   │   ├── video.js
│   │   ├── category.js
│   │   └── mindmap.js
│   ├── utils/            # 工具函数
│   │   └── request.js
│   ├── views/            # 页面组件
│   │   ├── VideoList.vue
│   │   └── VideoDetail.vue
│   ├── App.vue
│   └── main.js
├── index.html
├── vite.config.js
├── package.json
└── README.md
```

## 主要组件说明

### VideoList.vue
视频列表页，包含：
- 分类树组件（Element Plus Tree）
- 视频卡片网格
- 搜索和分页功能
- 添加分类和视频的对话框

### VideoDetail.vue
视频详情页，包含：
- 视频信息展示
- MindElixir 脑图组件
- 知识内容编辑区
- 脑图节点管理功能

## 代理配置

开发环境已配置代理，`/api` 请求会被转发到 `http://localhost:8081`，可在 `vite.config.js` 中修改。