Toys-A
30c17f01e9
- Align deployment guidance with the current three-node Compose topology - Document the current frontend architecture and development workflow - Replace the stale API list with a controller-based route index
1.6 KiB
1.6 KiB
HAOVP 前端架构（当前版本）
前端包含两个独立的 Vue 3 + TypeScript + Vite 应用：
frontend/video-frontend-web：用户端，端口 3000frontend/video-frontend-admin：管理端，端口 3100
依赖
两端共用 Vue Router 4、Pinia、Axios、Day.js、NProgress。用户端使用 Vant 4、Artplayer 5.1.7 和 artplayer-plugin-danmuku 5.1.0；管理端使用 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
用户端播放器是 Artplayer，不再使用早期文档中的 DPlayer。管理端仪表盘接口由 src/api/statistics.ts 聚合用户、视频、评论和趋势数据，接口路径以当前 src/api 文件为准。