tg-live-game-web/CLAUDE.md

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

开发命令

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 架构