TG Live Game Web 前端 - Claude Code 配置
2级子项目配置 | 继承自 tg-live-game (1级)
项目信息
| 属性 |
值 |
| 项目名称 |
tg-live-game-web |
| 所属项目 |
tg-live-game |
| 项目类型 |
frontend (前端应用) |
| 框架 |
Vue 3 |
| 构建工具 |
Vite 7.x |
| UI 组件库 |
Element Plus |
技术栈
| 类别 |
技术 |
版本 |
| 框架 |
Vue |
3.5.x |
| 构建 |
Vite |
7.2.x |
| 语言 |
TypeScript |
5.9.x |
| UI |
Element Plus |
2.13.x |
| 状态 |
Pinia |
3.0.x |
| 路由 |
Vue Router |
4.6.x |
| HTTP |
Axios |
1.13.x |
| 播放器 |
HLS.js |
1.6.x |
| 样式 |
Sass |
1.97.x |
项目结构
src/
├── main.ts # 应用入口
├── App.vue # 根组件
├── api/ # API 接口
│ ├── login.ts # 登录接口
│ ├── user.ts # 用户管理
│ ├── camera.ts # 摄像头管理
│ ├── stream.ts # Stream 管理
│ └── cloudflare-stream.ts
├── components/ # 公共组件
│ └── VideoPlayer.vue # 视频播放器
├── layout/ # 布局组件
│ └── index.vue # 主布局
├── router/ # 路由配置
│ └── index.ts
├── store/ # Pinia 状态
│ ├── index.ts
│ ├── app.ts
│ ├── user.ts
│ └── stream.ts
├── types/ # TypeScript 类型
│ ├── index.ts
│ └── cloudflare.ts
├── utils/ # 工具函数
│ ├── request.ts # Axios 封装
│ └── auth.ts # Token 管理
└── views/ # 页面视图
├── login/ # 登录页
├── camera/ # 摄像头管理
├── stream/ # 直播/视频管理
└── user/ # 用户管理
页面路由
| 路由 |
页面 |
描述 |
/login |
登录页 |
用户登录 |
/camera |
摄像头管理 |
摄像头列表 |
/stream-test |
Stream 测试 |
播放测试 |
/stream/videos |
视频管理 |
视频列表 |
/stream/live |
直播管理 |
直播列表 |
/stream/config |
Stream 配置 |
配置管理 |
/user |
用户管理 |
用户列表 (admin) |
API 依赖
后端服务: tg-live-game-hono
| 接口分组 |
路径 |
描述 |
| 认证 |
/api/auth/* |
登录/登出/刷新 |
| 用户 |
/api/users/* |
用户管理 |
| 摄像头 |
/api/cameras/* |
摄像头 CRUD |
| Stream |
/api/stream/* |
视频/直播管理 |
开发命令
pnpm install # 安装依赖
pnpm dev # 本地开发 (localhost:3001)
pnpm build # 构建生产版本
pnpm preview # 预览生产版本
环境变量
核心文档
| 文档 |
位置 |
内容 |
| 子系统架构 |
architecture.canvas |
前端架构图 |
| 整体架构 |
../architecture.canvas |
系统架构图 |
| 后端架构 |
../tg-live-game-hono/architecture.canvas |
API 架构 |
