vibe-coding-cn/tg-live-game/tg-live-game-web/_project.md

---

type: project name: tg-live-game-web status: active created: 2024-12-25 updated: 2026-01-06 kanban_id: 32214e97-f833-485f-8c7c-cf4d82327e

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 管理

// 存储 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 配置

开发环境代理

// 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

开发命令

# 安装依赖
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]] - 开发工作流