Toys-A
ad1e0ac217
- Rework the README to present HAOVP as a complete video platform. - Clarify features, architecture, and deployment context for readers. - Align the docs with the current DPlayer-based player stack. - Refresh the preview image so the README matches the current UI.
32 lines
1.6 KiB
Markdown
32 lines
1.6 KiB
Markdown
# HAOVP 前端架构（当前版本）
|
|
|
|
前端包含两个独立的 Vue 3 + TypeScript + Vite 应用：
|
|
|
|
- `frontend/video-frontend-web`：用户端，端口 3000
|
|
- `frontend/video-frontend-admin`：管理端，端口 3100
|
|
|
|
## 依赖
|
|
|
|
两端共用 Vue Router 4、Pinia、Axios、Day.js、NProgress。用户端和管理端均使用 DPlayer 1.27.1，用户端通过 DPlayer 的弹幕配置与后端 API 实现弹幕读取和发送；管理端使用 Element Plus 2.6、ECharts 5.5 和 SortableJS。项目脚本使用 npm、pnpm 均可，具体以各目录 `package.json` 为准。
|
|
|
|
## 目录职责
|
|
|
|
两端均采用 `api`（接口封装）、`components`、`router`、`stores`、`types`、`utils`、`views` 分层。用户端额外包含视频、评论、弹幕和布局组件；管理端包含 dashboard、用户、视频审核、内容分类/标签、评论和系统管理页面。
|
|
|
|
## 请求与认证
|
|
|
|
开发服务器将 `/api` 去前缀后代理到网关。代理地址由 `VITE_PROXY_TARGET` 控制，默认值是 `http://192.168.1.101:9000`。用户端和管理端分别使用独立的 Axios 封装、Token 存储和路由守卫；生产环境应通过 Nginx/OpenResty 将 `/api` 转发到网关，而不是直连业务服务。
|
|
|
|
## 启动和构建
|
|
|
|
```bash
|
|
cd frontend/video-frontend-web && npm install && npm run dev
|
|
cd frontend/video-frontend-admin && npm install && npm run dev
|
|
|
|
# 在各自目录执行
|
|
npm run build
|
|
npm run preview
|
|
```
|
|
|
|
用户端和管理端播放器均为 DPlayer。管理端仪表盘接口由 `src/api/statistics.ts` 聚合用户、视频、评论和趋势数据，接口路径以当前 `src/api` 文件为准。
|