Files
HAOVP/docs/frontend-architecture.md
Toys-A ad1e0ac217 docs(readme): refresh platform overview and media docs
- 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.
2026-08-20 12:58:15 +08:00

1.6 KiB

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 转发到网关,而不是直连业务服务。

启动和构建

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 文件为准。