前端说明
前端采用 pnpm monorepo 管理，位于仓库根目录的 web/ 下，包含三个子包：
| 包 | 目录 | 说明 | 开发端口 |
|---|---|---|---|
@vistack/ui | web/ui | 自研 UI 组件库（Vue 3 + Tailwind） | - |
web-client | web/web-client | 用户端（浏览 / 播放 / 上传 / 弹幕 / 评论 / 互动） | 8335 |
web-admin | web/web-admin | 管理端（内容 / 用户 / 敏感词管理） | 8334 |
技术栈：Vue 3 + Pinia + Vue Router + Tailwind CSS + Vite，播放器使用 dash.js / Video.js。
目录结构（以 web-client 为例）
web/web-client
├── src/
│ ├── api/ # 后端接口封装
│ ├── components/ # 业务组件
│ ├── layouts/ # 布局组件
│ ├── router/ # 路由
│ ├── stores/ # Pinia 状态
│ ├── views/ # 页面
│ └── lib/ # 工具库
├── .env.development # 开发环境变量
└── vite.config.ts环境变量
| 变量 | 默认值 | 说明 |
|---|---|---|
VITE_API_BASE | http://localhost/api/v1 | API 统一入口（Docker 部署走 Traefik） |
TIP
本地纯前端联调时，将 VITE_API_BASE 改为后端实际地址（如 http://localhost:8080/api/v1），并确保后端 [cors] 配置允许前端来源（默认已允许 http://localhost:8334 与 http://localhost:8335）。
播放能力
- VOD 点播：dash.js 加载 DASH 自适应码率流，根据带宽自动切换 240p–4K 档位；
- 直播：WebRTC 拉流（对接 live777 SFU）。
构建与预览
bash
cd web
pnpm install
# 开发
pnpm run dev
# 构建生产产物（输出到各包 dist/）
pnpm run build
# 预览构建产物
pnpm run preview与后端的协作关系
| 前端功能 | 调用后端 |
|---|---|
| 登录 / 注册 / 用户资料 | Auth 服务（经 Traefik 分流到 :8081） |
| 视频列表 / 详情 / 上传 | API 服务（:8080） |
| DASH 播放 / 封面 | MinIO 预签名 URL（:9000） |
| 弹幕拉取 / 发送 | API 服务 |
| 评论 / 点赞 / 收藏 | API 服务 |