# 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 配置

### 开发环境代理

```typescript
// vite.config.ts
proxy: {
  '/api': {
    target: 'https://tg-live-game-api.ifoodme.com',
    changeOrigin: true,
    secure: true
  }
}
```

### 后端服务
- **地址**: https://tg-live-game-api.ifoodme.com
- **认证**: JWT Bearer Token

## 开发命令

```bash
pnpm install          # 安装依赖
pnpm dev              # 开发服务器 (localhost:3000)
pnpm build            # 类型检查 + 构建
pnpm preview          # 预览构建产物
```

## 核心文档

| 文档 | 位置 | 内容 |
|------|------|------|
| 整体架构 | `../architecture.canvas` | 系统架构图 |
| 后端 API | tg-live-game-hono | API 文档 |