TG Live Game Web 前端 - Claude Code 配置
2级子项目配置 | 继承自 tg-live-game (1级)
项目信息
| 属性 |
值 |
| 项目名称 |
tg-live-game-web |
| 所属项目 |
tg-live-game |
| 项目类型 |
frontend (管理后台) |
| 框架 |
Vue 3 |
| 构建工具 |
Vite |
技术栈
| 类别 |
技术 |
版本 |
| 框架 |
Vue |
3.5.24 |
| 语言 |
TypeScript |
5.9.3 |
| 构建工具 |
Vite |
7.2.4 |
| UI 组件库 |
Element Plus |
2.13.0 |
| 状态管理 |
Pinia |
3.0.4 |
| 路由 |
Vue Router |
4.6.4 |
| HTTP 客户端 |
Axios |
1.13.2 |
| 视频播放 |
HLS.js |
1.6.15 |
项目结构
src/
├── api/ # API 接口
│ ├── login.ts # 认证接口
│ ├── user.ts # 用户管理接口
│ ├── camera.ts # 摄像头接口
│ ├── stream.ts # 直播/视频接口
│ └── cloudflare-stream.ts # Cloudflare Stream API
├── assets/ # 静态资源
├── components/ # 公共组件
├── composables/ # 组合式函数
├── layout/ # 布局组件
├── router/ # 路由配置
├── store/ # Pinia 状态管理
├── types/ # TypeScript 类型
├── utils/ # 工具函数
│ ├── auth.ts # Token 管理
│ └── request.ts # Axios 封装
├── views/ # 页面组件
│ ├── login/ # 登录页
│ ├── camera/ # 摄像头管理
│ ├── stream/ # 直播/视频管理
│ └── user/ # 用户管理
├── App.vue
└── main.ts
功能模块
| 模块 |
功能 |
路由 |
状态 |
| 登录认证 |
JWT 登录、Token 刷新 |
/login |
✅ |
| 摄像头管理 |
CRUD、通道管理、视频播放 |
/camera |
✅ |
| Stream 测试 |
Cloudflare Stream 播放测试 |
/stream-test |
✅ |
| 视频管理 |
视频列表、上传、删除 |
/stream/videos |
✅ |
| 直播管理 |
Live Input 管理、推流配置 |
/stream/live |
✅ |
| Stream 配置 |
Cloudflare 账户配置 |
/stream/config |
✅ |
| 用户管理 |
RBAC 用户 CRUD |
/user |
✅ |
API 配置
开发环境代理
// vite.config.ts
proxy: {
'/api': {
target: 'https://tg-live-game-api.ifoodme.com',
changeOrigin: true,
secure: true
}
}
后端服务
开发命令
pnpm install # 安装依赖
pnpm dev # 开发服务器 (localhost:3000)
pnpm build # 类型检查 + 构建
pnpm preview # 预览构建产物
核心文档
| 文档 |
位置 |
内容 |
| 整体架构 |
../architecture.canvas |
系统架构图 |
| 后端 API |
tg-live-game-hono |
API 文档 |
