# 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`         | 登录页      | 用户登录                |
| `/dashboard`     | 仪表盘      | 系统统计概览 (默认首页) |
| `/camera`        | 摄像头管理  | 摄像头列表              |
| `/stream-test`   | Stream 测试 | 播放测试                |
| `/stream/videos` | 视频管理    | 视频列表                |
| `/stream/live`   | 直播管理    | 直播列表                |
| `/stream/config` | Stream 配置 | 配置管理                |
| `/user`          | 用户管理    | 用户列表 (admin)        |
| `/stats`         | 观看统计    | 观看数据统计分析        |
| `/audit`         | 审计日志    | 系统操作日志 (admin)    |

## API 依赖

后端服务: `tg-live-game-hono`

| 接口分组 | 路径             | 描述           |
| -------- | ---------------- | -------------- |
| 认证     | `/api/auth/*`    | 登录/登出/刷新 |
| 用户     | `/api/users/*`   | 用户管理       |
| 摄像头   | `/api/cameras/*` | 摄像头 CRUD    |
| Stream   | `/api/stream/*`  | 视频/直播管理  |

## Vibe Kanban

| 属性    | 值                                     |
| ------- | -------------------------------------- |
| 项目 ID | `f81aecc3-9f5b-40d1-9fd0-f0ae1fd7c791` |

## 开发命令

```bash
pnpm install          # 安装依赖
pnpm dev              # 本地开发 (localhost:3001)
pnpm build            # 构建生产版本
pnpm preview          # 预览生产版本
```

## 环境变量

| 变量              | 开发环境                              | 生产环境                                 |
| ----------------- | ------------------------------------- | ---------------------------------------- |
| VITE_APP_BASE_API | https://tg-live-game.pwtk.cc/api      | https://tg-live-game-api.ifoodme.com/api |
| VITE_APP_TITLE    | 摄像头管理系统                        | 摄像头管理系统                           |

> 注：本地开发直接使用远程 API 地址，不使用 Vite proxy 代理

## 部署配置

| 属性     | 值                                 |
| -------- | ---------------------------------- |
| 部署平台 | Cloudflare Pages                   |
| 项目名称 | tg-live-game                       |
| 生产域名 | https://tg-live-game.pwtk-dev.work |
| 构建命令 | pnpm build                         |
| 输出目录 | dist                               |
| CI/CD    | Jenkins Pipeline                   |

### Jenkins 凭据要求

| 凭据 ID               | 类型        | 用途                  |
| --------------------- | ----------- | --------------------- |
| CLOUDFLARE_API_TOKEN  | Secret text | Cloudflare API Token  |
| CLOUDFLARE_ACCOUNT_ID | Secret text | Cloudflare Account ID |

## 核心文档

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