---
type: project
name: tg-live-game-web
status: active
created: 2024-12-25
updated: 2026-01-06
kanban_id: 32214e97-f833-485f-8c7c-cf4d82327e0b
parent: "[[_project|TG Live Game]]"
---

# TG Live Game Web

直播游戏平台前端应用，基于 Vue 3 + TypeScript + Element Plus 构建。

## 技术栈

| 类别 | 技术 | 版本 |
|------|------|------|
| 框架 | 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/                 # 静态资源
│   └── styles/            # 全局样式
├── components/            # 公共组件
├── composables/           # 组合式函数
├── layout/                # 布局组件
├── router/                # 路由配置
├── store/                 # Pinia 状态管理
│   └── user.ts           # 用户状态
├── types/                 # TypeScript 类型
├── utils/                 # 工具函数
│   ├── auth.ts           # Token 管理
│   └── request.ts        # Axios 封装
├── views/                 # 页面组件
│   ├── login/            # 登录页
│   ├── camera/           # 摄像头管理
│   │   ├── index.vue     # 摄像头列表
│   │   ├── channel.vue   # 通道列表
│   │   ├── video.vue     # 视频播放
│   │   └── stream-test.vue # Stream 测试
│   ├── stream/           # 直播/视频管理
│   │   ├── video-list.vue # 视频列表
│   │   ├── live-list.vue  # 直播列表
│   │   └── config.vue     # Stream 配置
│   └── user/             # 用户管理
│       └── index.vue     # 用户列表
├── 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` |

### 待开发 ❌

- [ ] 仪表盘统计页面
- [ ] 观看统计展示
- [ ] 审计日志查看
- [ ] 权限管理页面

## 认证系统

### Token 管理

```typescript
// 存储 Key
const TOKEN_KEY = 'Admin-Token'
const REFRESH_TOKEN_KEY = 'Admin-Refresh-Token'

// API 响应
interface AuthResponse {
  accessToken: string
  refreshToken: string
  expiresIn: number
  user: { id: string; username: string; role: string }
}
```

### 路由守卫

- 白名单路由：`/login`, `/stream-test`
- 其他路由需要登录
- 未登录自动跳转登录页

## 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`
- **技术**: Hono + Cloudflare Workers + D1
- **认证**: JWT Bearer Token

## 开发命令

```bash
# 安装依赖
pnpm install

# 开发服务器 (localhost:3000)
pnpm dev

# 类型检查 + 构建
pnpm build

# 预览构建产物
pnpm preview
```

## 代码仓库

| 环境 | 路径 |
|------|------|
| 开发 | `/Users/yibu/dev_workspace/frontend/tg-live-game/tg-live-game-web` |

## 相关文档

- [[_project|TG Live Game]] - 父项目
- [[tg-live-game-hono/_project|tg-live-game-hono]] - 后端项目
- [[architecture-v1]] - 系统架构
- [[workflow]] - 开发工作流