# pink-front-web

**Repository Path**: fs529/pink-front-web

## Basic Information

- **Project Name**: pink-front-web
- **Description**: Pink前端 汇聚原创佳作，可随心发布作品，弹幕评论畅快交流
- **Primary Language**: Unknown
- **License**: GPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-23
- **Last Updated**: 2026-05-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, scss, HTML, JavaScript, CSS

## README

# 团星影视 (Pink Video)

> Pink (゜-゜)つロ 干杯~-Pink

汇聚原创佳作，随心发布作品，弹幕评论畅快交流 —— 一个基于 Vue 3 构建的现代化视频分享平台。

---

## 功能概览

### 首页 & 发现
| 首页 | 分类浏览 |
|:---:|:---:|
| ![首页](img/首页.png) | ![分类](img/首页_分类.png) |

### 视频播放
| 播放页 |
|:---:|
| ![播放页](img/播放页.png) |

### 搜索 & UP 主
| 搜索页 | UP 主 |
|:---:|:---:|
| ![搜索](img/搜索页.png) | ![UP主](img/搜索页_UP主.png) |

### 消息中心
| 私聊 | 系统通知 |
|:---:|:---:|
| ![私聊](img/消息中心_私聊.png) | ![系统](img/消息中心_系统.png) |

### 用户主页
| 用户首页 | 视频合集 | 投稿管理 |
|:---:|:---:|:---:|
| ![首页](img/用户主页_自己.png) | ![合集](img/用户主页_视频合集.png) | ![投稿](img/用户主页_投稿.png) |

### 创作中心
| 数据看板 | 稿件管理 | 表情包 |
|:---:|:---:|:---:|
| ![数据](img/创作中心_数据.png) | ![稿件](img/创作中心_稿件.png) | ![表情](img/创作中心_表情包.png) |

---

## 技术栈

| 类别 | 技术 |
|------|------|
| **框架** | Vue 3 + Vite |
| **状态管理** | Pinia + pinia-persistedstate-plugin |
| **路由** | Vue Router 4（HTML5 History 模式） |
| **UI 组件库** | Element Plus |
| **HTTP 请求** | Axios |
| **视频播放器** | ArtPlayer + HLS.js |
| **弹幕** | artplayer-plugin-danmuku |
| **图表** | ECharts 5 |
| **图片** | v-viewer / viewerjs（预览）、vue-cropper（裁剪） |
| **拖拽** | vue-draggable-plus |
| **时间处理** | dayjs / moment |
| **安全** | DOMPurify（XSS 防护）、js-md5（加密） |
| **CSS 预处理** | SCSS |

---

## 快速开始

```bash
# 安装依赖
npm install

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

# 生产构建
npm run build

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

开发服务器默认运行在 `http://localhost:9000`，代理配置如下：

| 前缀 | 目标 | 说明 |
|------|------|------|
| `/api` | `http://localhost:7070` | 主后端服务 |
| `/tp` | `http://localhost:7071` | 辅助后端服务 |

---

## 项目结构

```
pink-front-web/
├── img/                          # 项目截图
├── public/                       # 静态资源
├── src/
│   ├── api/                      # API 请求层
│   │   ├── video.js              #   视频相关接口
│   │   ├── user.js               #   用户相关接口
│   │   ├── message.js            #   消息相关接口
│   │   ├── certification.js      #   认证相关接口
│   │   └── emojiPack.js          #   表情包相关接口
│   ├── assets/                   # 静态资源（CSS / 图标 / 图片）
│   ├── components/               # 公共组件
│   │   ├── Player.vue            #   通用视频播放器
│   │   ├── Avatar.vue            #   头像组件
│   │   ├── Cover.vue             #   封面组件
│   │   ├── EmojiPicker.vue       #   表情选择器
│   │   ├── ImagCoverCut.vue      #   封面裁剪
│   │   ├── ReportDialog.vue      #   举报弹窗
│   │   ├── VideoItem.vue         #   视频列表项
│   │   └── ...                   #   更多通用组件
│   ├── router/                   # 路由配置（30+ 页面路由）
│   ├── stores/                   # Pinia 状态管理
│   ├── utils/                    # 工具函数
│   └── views/                    # 页面视图
│       ├── Index/                #   首页
│       ├── home/                 #   主布局（Header / Footer / 分类）
│       ├── videoDetail/          #   视频详情（弹幕互动 / 评论）
│       ├── search/               #   搜索
│       ├── hot/                  #   热门视频
│       ├── history/              #   播放历史
│       ├── message/              #   消息中心
│       ├── user/                 #   用户主页（他人）
│       ├── ucenter/              #   创作中心（上传 / 管理 / 数据）
│       ├── videoList/            #   视频分类列表
│       └── errorPage/            #   404 页面
├── index.html                    # HTML 入口
├── package.json
└── vite.config.js
```

---

## 核心功能

- **视频发布与管理** — 支持视频上传、编辑、稿件管理，创作中心提供数据看板
- **弹幕互动** — 基于 ArtPlayer 的实时弹幕播放体验，支持弹幕发送与管理
- **评论系统** — 视频评论、回复，支持举报功能
- **消息中心** — 私聊、系统通知、点赞、收藏、评论等消息聚合
- **用户体系** — 个人主页、关注/粉丝、视频合集、收藏夹、表情包
- **分类浏览** — 多级视频分类，支持按分区和标签筛选
- **搜索** — 全站视频搜索，UP 主搜索
- **认证系统** — 用户认证与身份标识
- **响应式交互** — 表情选择器、图片裁剪、封面选择、拖拽排序等

---

## License

Private — 团星影视 © 2026