|
|
@@ -1,160 +0,0 @@
|
|
|
----
|
|
|
-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]] - 开发工作流
|
yb