前端说明

前端采用 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。

访问方式

场景	入口	说明
Docker 一键部署（用户端）	http://localhost	web-client 产物内置在 api 镜像（`/app/web`），api 以 SPA 方式托管，Traefik 兜底路由代理页面
Docker 一键部署（管理端）	http://localhost/admin	web-admin 产物内置在 api 镜像（`/app/web-admin`），构建时 `VITE_BASE=/admin/`，托管于 `/admin` 子路径
本地开发（用户端）	http://localhost:8335	`pnpm run dev` 启动
本地开发（管理端）	http://localhost:8334	`pnpm run dev` 启动
生产静态托管	`build/web-client` / `build/web-admin`	`pnpm run build` 产物，用 Nginx / Pages 托管

目录结构（以 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 服务

前端说明 ​

访问方式 ​

目录结构（以 web-client 为例） ​

环境变量 ​

播放能力 ​

构建与预览 ​

与后端的协作关系 ​