Bladeren bron

update code

yb 3 weken geleden
bovenliggende
commit
b248b218f6

+ 28 - 30
.obsidian/workspace.json

@@ -4,24 +4,21 @@
     "type": "split",
     "children": [
       {
-        "id": "7fbc909157a3ab22",
+        "id": "c98823febcca3cf6",
         "type": "tabs",
         "children": [
           {
-            "id": "d1c67f0d3fca314e",
+            "id": "f6052adcefbf7489",
             "type": "leaf",
             "state": {
-              "type": "canvas",
+              "type": "markdown",
               "state": {
-                "file": "askyi/askyi-taro/pages.canvas",
-                "viewState": {
-                  "x": -120,
-                  "y": -1380,
-                  "zoom": -2.2652845155296695
-                }
+                "file": "tg-live-game/tg-live-game-web/_project.md",
+                "mode": "source",
+                "source": false
               },
-              "icon": "lucide-layout-dashboard",
-              "title": "pages"
+              "icon": "lucide-file",
+              "title": "_project"
             }
           }
         ]
@@ -47,7 +44,7 @@
                 "autoReveal": false
               },
               "icon": "lucide-folder-closed",
-              "title": "Files"
+              "title": "文件列表"
             }
           },
           {
@@ -81,7 +78,7 @@
       }
     ],
     "direction": "horizontal",
-    "width": 254.5
+    "width": 536.5
   },
   "right": {
     "id": "93884d0cec98b8d0",
@@ -177,22 +174,30 @@
   },
   "left-ribbon": {
     "hiddenItems": {
-      "bases:Create new base": false,
-      "switcher:Open quick switcher": false,
-      "graph:Open graph view": false,
-      "canvas:Create new canvas": false,
-      "daily-notes:Open today's daily note": false,
-      "templates:Insert template": false,
-      "command-palette:Open command palette": false
+      "switcher:打开快速切换": false,
+      "graph:查看关系图谱": false,
+      "canvas:新建白板": false,
+      "daily-notes:打开/创建今天的日记": false,
+      "templates:插入模板": false,
+      "command-palette:打开命令面板": false,
+      "bases:创建新数据库": false
     }
   },
-  "active": "d1c67f0d3fca314e",
+  "active": "f6052adcefbf7489",
   "lastOpenFiles": [
+    "tg-live-game/_project.md",
+    "tg-live-game/tg-live-game-web/_project.md",
+    "tg-live-game/architecture-v1.canvas",
+    "tg-live-game/_project.md.tmp.76862.1767668152809",
+    "tg-live-game/rtsp-cloudflare-stream.canvas",
+    "pwtk-admin-web/discuss-2025-01-02.md",
+    "tg-live-game/tg-live-game-web",
+    "pwtk-admin-web/architecture-v1.canvas",
+    "askyi/askyi-h5/pages.canvas",
+    "askyi/askyi-taro/pages.canvas",
     "askyi/prototype-h5/_project.md",
     "askyi/askyi-h5/architecture.canvas",
-    "askyi/askyi-h5/pages.canvas",
     "askyi/askyi-h5/_project.md",
-    "askyi/askyi-taro/pages.canvas",
     "askyi/askyi-uniapp/architecture.canvas",
     "askyi/askyi-taro",
     "askyi/askyi-uniapp/_project.md",
@@ -203,7 +208,6 @@
     "askyi/_project.md.tmp.58558.1767539207199",
     "askyi/askyi-uniapp",
     "tg-live-game/tg-live-game-hono/auth-system.canvas",
-    "pwtk-admin-web/architecture-v1.canvas",
     "tg-live-game/tg-live-game-hono/_project.md",
     "workflow.md",
     "askyi/askyi-app/_project.md",
@@ -212,15 +216,10 @@
     "askyi/_project.md",
     "tg-live-game/workflow.md",
     "CLAUDE.md",
-    "tg-live-game/rtsp-cloudflare-stream.canvas",
     "README.md",
-    "tg-live-game/architecture-v1.canvas",
     "tg-live-game/discuss-2024-12-31.md",
-    "pwtk-admin-web/discuss-2025-01-02.md",
     "i18n/zh/documents/00-基础指南/A Formalization of Recursive Self-Optimizing Generative Systems.md",
     "i18n/vi",
-    "i18n/ur",
-    "i18n/uk",
     "i18n/zh/documents/02-方法论/图形化AI协作-Canvas白板驱动开发.md",
     "GEMINI.md",
     "CONTRIBUTING.md",
@@ -231,7 +230,6 @@
     "i18n/zh/prompts/00-元提示词/README.md",
     "i18n/zh/prompts/00-元提示词/alpha-generator.md",
     "i18n/zh/prompts/01-系统提示词/README.md",
-    "i18n/zh/prompts/01-系统提示词/# 💀《科比的救母救父救未婚妻与岳父岳母日记》 × OTE模型交易模式 × M.I.T白人金融教授(被女学生指控性骚扰版)v2.md",
     "tg-live-game/tg-live-game-hono/architecture.canvas"
   ]
 }

+ 3 - 3
tg-live-game/_project.md

@@ -49,8 +49,8 @@ Mac摄像头 → RTMPS → Cloudflare Stream → HLS → tg-live-game-web
 
 | 项目 | 路径 |
 |------|------|
-| 后端 | `/Users/jamesw/dev_workspace/frontend/tg-live-game/tg-live-game-hono` |
-| 前端 | `/Users/jamesw/dev_workspace/frontend/tg-live-game/tg-live-game-web` |
+| 后端 | `/Users/yibu/dev_workspace/frontend/tg-live-game/tg-live-game-hono` |
+| 前端 | `/Users/yibu/dev_workspace/frontend/tg-live-game/tg-live-game-web` |
 
 ## 开发工作流
 
@@ -60,7 +60,7 @@ Mac摄像头 → RTMPS → Cloudflare Stream → HLS → tg-live-game-web
 
 ```bash
 # 多项目协作开发(推荐)
-cd /Users/jamesw/dev_workspace/frontend/tg-live-game
+cd /Users/yibu/dev_workspace/frontend/tg-live-game
 claude
 ```
 

+ 12 - 10
tg-live-game/architecture-v1.canvas

@@ -1,23 +1,25 @@
 {
 	"nodes":[
-		{"id":"hono_backend","type":"text","text":"**tg-live-game-hono**\n后端API服务\n\n技术栈:Hono + Cloudflare Workers\n\n功能:\n- 视频管理 CRUD\n- 直播管理 CRUD\n- Cloudflare Stream API 封装\n\n端口:localhost:8787","x":-1190,"y":-598,"width":280,"height":200,"color":"4"},
+		{"id":"hono_backend","type":"text","text":"**tg-live-game-hono**\n后端API服务\n\n技术栈:Hono + Cloudflare Workers + D1\n\n功能:\n- 认证系统 (JWT) ✅\n- 用户管理 (RBAC) ✅\n- 摄像头管理 CRUD ✅\n- 会话管理 ✅\n- 观看统计 ✅\n- 审计日志 ✅\n- Stream API 封装 ✅\n\n端口:localhost:8787","x":-1190,"y":-658,"width":300,"height":280,"color":"4"},
+		{"id":"d1_database","type":"text","text":"**Cloudflare D1**\n数据库\n\n表结构:\n- users (用户)\n- user_permissions (权限)\n- cameras (摄像头)\n- live_sessions (会话)\n- videos (视频)\n- view_stats (统计)\n- audit_logs (日志)\n\n状态:✅ 已部署","x":-1190,"y":-300,"width":300,"height":260,"color":"4"},
 		{"id":"java_service","type":"text","text":"**Java进程管理**\n(待开发)\n\n功能:\n- FFmpeg进程管理\n- 多路流管理\n- Cloudflare API调用\n\n状态:❌ 待实现","x":-402,"y":200,"width":405,"height":240,"color":"1"},
-		{"id":"mac_camera","type":"text","text":"**Mac摄像头**\n\nFaceTime HD Camera\n分辨率:1280x720\n帧率:30fps\n\n状态:✅ 已验证","x":-730,"y":-798,"width":200,"height":140,"color":"3"},
-		{"id":"stream_service","type":"text","text":"**tg-live-game-stream-service**\n推流服务\n\n技术栈:Bash + FFmpeg\n\n功能:\n- Mac摄像头推流 ✅\n- Mac屏幕推流 ✅\n- RTSP输入 ❌ 待实现\n- WHIP输出 ❌ 待实现\n\n协议:RTMPS","x":-340,"y":-828,"width":280,"height":200,"color":"2"},
-		{"id":"cloudflare_stream","type":"text","text":"**Cloudflare Stream**\n云端视频服务\n\n功能:\n- RTMPS/SRT/WHIP 接收\n- 实时转码\n- HLS/DASH/WHEP 分发\n- 全球CDN\n- 自动录制\n\n账户:5544eac7cfb260d4fec9467d49513cea","x":-340,"y":-220,"width":280,"height":200,"color":"1"},
+		{"id":"mac_camera","type":"text","text":"**Mac摄像头**\n\nFaceTime HD Camera\n分辨率:1280x720\n帧率:30fps\n\n状态:✅ 已验证","x":-730,"y":-898,"width":200,"height":140,"color":"3"},
+		{"id":"stream_service","type":"text","text":"**tg-live-game-stream-service**\n推流服务\n\n技术栈:Bash + FFmpeg\n\n功能:\n- Mac摄像头推流 ✅\n- Mac屏幕推流 ✅\n- RTSP输入 ❌ 待实现\n- WHIP输出 ❌ 待实现\n\n协议:RTMPS","x":-340,"y":-928,"width":280,"height":200,"color":"2"},
+		{"id":"cloudflare_stream","type":"text","text":"**Cloudflare Stream**\n云端视频服务\n\n功能:\n- RTMPS/SRT/WHIP 接收\n- 实时转码\n- HLS/DASH/WHEP 分发\n- 全球CDN\n- 自动录制\n\n账户:5544eac7cfb260d4fec9467d49513cea","x":-340,"y":-320,"width":280,"height":200,"color":"1"},
 		{"id":"ip_camera","type":"text","text":"**IP摄像头**\n(ONVIF)\n\n协议:RTSP\n\n状态:❌ 待接入","x":-1050,"y":200,"width":350,"height":250,"color":"1"},
 		{"id":"live_input","type":"text","text":"**当前Live Input**\n\nID: 3c1ae1949e76f200feef94b8f7d093ca\n名称: weathered-limit-6442\n\nRTMPS: rtmps://live.cloudflare.com:443/live\nHLS: customer-pj89kn2ke2tcuh19...","x":260,"y":50,"width":410,"height":220,"color":"4"},
-		{"id":"browser","type":"text","text":"**浏览器播放**\n\n播放方式:\n- Cloudflare iframe ✅\n- HLS.js ✅\n- WebRTC/WHEP\n\n延迟:2-5秒 (HLS)","x":260,"y":-240,"width":410,"height":250,"color":"3"},
-		{"id":"web_frontend","type":"text","text":"**tg-live-game-web**\n前端应用\n\n技术栈:Vue 3 + TypeScript + Vite\n\n功能:\n- 摄像头管理\n- 直播管理\n- 视频播放 (HLS/iframe)\n- Stream测试页 ✅\n\n端口:localhost:3000","x":260,"y":-658,"width":410,"height":330,"color":"5"},
-		{"id":"todo_list","type":"text","text":"## 待办事项\n\n### v2 目标\n- [ ] RTSP输入支持\n- [ ] WHIP输出支持\n- [ ] Java进程管理\n\n### v3 目标\n- [ ] 多路流管理\n- [ ] 自动重连\n- [ ] 监控告警","x":-340,"y":-1280,"width":415,"height":380,"color":"1"},
-		{"id":"title","type":"text","text":"# TG Live Game 架构 v1\n\n**日期**: 2024-12-31\n**状态**: POC 验证通过\n\n✅ Mac摄像头 → RTMPS → Cloudflare → Web播放","x":-870,"y":-1280,"width":450,"height":380,"color":"6"}
+		{"id":"browser","type":"text","text":"**浏览器播放**\n\n播放方式:\n- Cloudflare iframe ✅\n- HLS.js ✅\n- Jessibuca ✅\n- WebRTC/WHEP\n\n延迟:2-5秒 (HLS)","x":260,"y":-340,"width":410,"height":250,"color":"3"},
+		{"id":"todo_list","type":"text","text":"## 待办事项\n\n### v1.1 优化\n- [ ] 仪表盘统计\n- [ ] 观看统计展示\n- [ ] 审计日志查看\n\n### v2 目标\n- [ ] RTSP输入支持\n- [ ] WHIP输出支持\n- [ ] Java进程管理\n\n### v3 目标\n- [ ] 多路流管理\n- [ ] 自动重连\n- [ ] 监控告警","x":-340,"y":-1380,"width":415,"height":380,"color":"1"},
+		{"id":"title","type":"text","text":"# TG Live Game 架构 v1\n\n**日期**: 2026-01-06\n**状态**: v1 功能完成\n\n✅ Mac摄像头 → RTMPS → Cloudflare → Web播放\n✅ 用户认证 + 权限管理 (RBAC)\n✅ 摄像头/视频/直播 CRUD\n✅ 观看统计 + 审计日志","x":-870,"y":-1380,"width":450,"height":380,"color":"6"},
+		{"id":"web_frontend","type":"text","text":"**tg-live-game-web**\n前端应用\n\n技术栈:Vue 3 + TypeScript + Vite + Element Plus\n\n功能:\n- 登录认证 ✅\n- 摄像头管理 ✅\n- 视频管理 ✅\n- 直播管理 ✅\n- 用户管理 (RBAC) ✅\n- Stream配置 ✅\n- Stream测试页 ✅\n\n端口:localhost:3001","x":260,"y":-960,"width":410,"height":413,"color":"5"}
 	],
 	"edges":[
 		{"id":"edge_mac_stream","fromNode":"mac_camera","fromSide":"right","toNode":"stream_service","toSide":"left","label":"AVFoundation"},
 		{"id":"edge_stream_cf","fromNode":"stream_service","fromSide":"bottom","toNode":"cloudflare_stream","toSide":"top","label":"RTMPS ✅"},
 		{"id":"edge_cf_browser","fromNode":"cloudflare_stream","fromSide":"right","toNode":"browser","toSide":"left","label":"HLS ✅"},
-		{"id":"edge_hono_cf","fromNode":"hono_backend","fromSide":"bottom","toNode":"cloudflare_stream","toSide":"left","label":"API"},
-		{"id":"edge_web_hono","fromNode":"web_frontend","fromSide":"left","toNode":"hono_backend","toSide":"right","label":"/api/stream"},
+		{"id":"edge_hono_cf","fromNode":"hono_backend","fromSide":"bottom","toNode":"d1_database","toSide":"top","label":"D1"},
+		{"id":"edge_hono_stream","fromNode":"hono_backend","fromSide":"right","toNode":"cloudflare_stream","toSide":"left","label":"Stream API"},
+		{"id":"edge_web_hono","fromNode":"web_frontend","fromSide":"left","toNode":"hono_backend","toSide":"right","label":"/api/*"},
 		{"id":"edge_web_browser","fromNode":"web_frontend","fromSide":"bottom","toNode":"browser","toSide":"top","label":"VideoPlayer"},
 		{"id":"edge_ip_java","fromNode":"ip_camera","fromSide":"right","toNode":"java_service","toSide":"left","color":"1","label":"RTSP (待实现)"},
 		{"id":"edge_java_cf","fromNode":"java_service","fromSide":"top","toNode":"cloudflare_stream","toSide":"bottom","color":"1","label":"WHIP (待实现)"},

+ 201 - 42
tg-live-game/tg-live-game-hono/_project.md

@@ -1,65 +1,224 @@
 ---
-type: sub-project
-name: TG Live Game Hono
-parent: tg-live-game
-kanban_id: 7c6bb2ce-90a2-4e96-bc04-5facdcdb337f
-code_path: /Users/jamesw/dev_workspace/frontend/tg-live-game/tg-live-game-hono
-tech_stack: Hono + Cloudflare Workers + D1
+type: project
+name: tg-live-game-hono
 status: active
 created: 2024-12-31
-updated: 2026-01-03
+updated: 2026-01-06
+kanban_id: 7c6bb2ce-90a2-4e96-bc04-5facdcdb337f
+parent: "[[_project|TG Live Game]]"
 ---
 
 # TG Live Game Hono
 
-后端 API 服务,基于 Hono + Cloudflare Workers 构建。
+后端 API 服务,基于 Hono + Cloudflare Workers + D1 构建。
 
-## 项目关联
+## 技术栈
 
-| 属性 | 值 |
-|------|-----|
-| Kanban Project | [tg-live-game-hono](vibe://kanban/7c6bb2ce-90a2-4e96-bc04-5facdcdb337f) |
-| 代码仓库 | `/Users/jamesw/dev_workspace/frontend/tg-live-game/tg-live-game-hono` |
-| 父项目 | [[tg-live-game]] |
-| 关联前端 | [[tg-live-game-web]] |
+| 类别 | 技术 | 版本 |
+|------|------|------|
+| 框架 | Hono | 4.11.1 |
+| 运行时 | Cloudflare Workers | - |
+| 数据库 | Cloudflare D1 (SQLite) | - |
+| 验证 | Zod | 4.3.5 |
+| 语言 | TypeScript | 5.9.3 |
+| 测试 | Vitest | 3.2.4 |
+| Lint | Biome | 2.3.11 |
+| 部署 | Wrangler | 4.56.0 |
 
-## 架构文档
+## 项目结构
 
-- [[architecture]] - 整体架构设计 (v1.1.0)
-- [[auth-system]] - 认证鉴权系统设计
-- [[d1-database]] - D1 数据库设计
-- [[workflow]] - 开发工作流
+```
+src/
+├── index.ts              # 应用入口
+├── node.ts               # Node.js 本地开发入口
+├── middleware/           # 中间件
+│   └── auth.ts          # JWT 认证 + RBAC 权限
+├── routes/              # API 路由
+│   ├── auth.ts         # 认证接口
+│   ├── user.ts         # 用户管理 (admin only)
+│   ├── cameras.ts      # 摄像头管理
+│   ├── sessions.ts     # 会话管理
+│   ├── stats.ts        # 观看统计
+│   ├── stream.ts       # Cloudflare Stream
+│   └── audit.ts        # 审计日志
+├── services/            # 业务服务
+├── types/               # TypeScript 类型
+└── utils/               # 工具函数
+```
 
-## 技术栈
+## API 路由
+
+### 公开接口
+
+| 方法 | 路由 | 描述 |
+|------|------|------|
+| POST | `/api/auth/login` | 用户登录 |
+| POST | `/api/auth/refresh` | 刷新 Token |
 
-- **框架**: Hono v4
-- **运行时**: Cloudflare Workers
-- **数据库**: Cloudflare D1 (SQLite)
-- **认证**: JWT (HS256)
-- **语言**: TypeScript
+### 认证接口
+
+| 方法 | 路由 | 描述 | 权限 |
+|------|------|------|------|
+| GET | `/api/auth/me` | 获取当前用户 | * |
+| POST | `/api/auth/logout` | 退出登录 | * |
+| POST | `/api/auth/change-password` | 修改密码 | * |
+
+### 用户管理 (admin)
+
+| 方法 | 路由 | 描述 |
+|------|------|------|
+| GET | `/api/users` | 用户列表 |
+| GET | `/api/users/:id` | 用户详情 |
+| POST | `/api/users` | 创建用户 |
+| PUT | `/api/users/:id` | 更新用户 |
+| DELETE | `/api/users/:id` | 删除用户 |
 
-## 功能模块
+### 摄像头管理
 
-| 模块 | 描述 | 状态 |
+| 方法 | 路由 | 描述 |
 |------|------|------|
-| 视频管理 | CRUD、导入、上传 | ✅ 已实现 |
-| 直播管理 | CRUD、播放信息 | ✅ 已实现 |
-| Cloudflare API | Stream API 封装 | ✅ 已实现 |
-| JWT 认证 | 登录、注册、刷新 | ✅ 已实现 |
-| 用户管理 | CRUD、权限管理 | ✅ 已实现 |
-| RBAC 权限 | 角色权限控制 | ✅ 已实现 |
+| GET | `/api/cameras` | 摄像头列表 |
+| GET | `/api/cameras/:id` | 摄像头详情 |
+| POST | `/api/cameras` | 创建摄像头 |
+| PUT | `/api/cameras/:id` | 更新摄像头 |
+| DELETE | `/api/cameras/:id` | 删除摄像头 |
+
+### Stream 管理
+
+| 方法 | 路由 | 描述 |
+|------|------|------|
+| GET | `/api/stream/videos` | 视频列表 |
+| GET | `/api/stream/live-inputs` | 直播输入列表 |
+| POST | `/api/stream/live-inputs` | 创建直播输入 |
+| DELETE | `/api/stream/live-inputs/:id` | 删除直播输入 |
+
+### 统计 & 审计
+
+| 方法 | 路由 | 描述 |
+|------|------|------|
+| GET | `/api/stats/*` | 观看统计 |
+| GET | `/api/audit/*` | 审计日志 |
+
+## 数据库设计
+
+### D1 配置
+
+```toml
+[[d1_databases]]
+binding = "DB"
+database_name = "tg_live_game"
+database_id = "970f081e-42c8-46bb-b385-b7c1ab2ceaa5"
+```
+
+### 数据表
+
+| 表名 | 描述 |
+|------|------|
+| users | 用户信息 |
+| user_permissions | 用户权限 |
+| cameras | 摄像头配置 |
+| live_sessions | 直播会话 |
+| videos | 视频记录 |
+| view_stats | 观看统计 |
+| audit_logs | 审计日志 |
+
+## 认证系统
+
+### JWT 配置
+
+```toml
+[vars]
+JWT_EXPIRES_IN = "86400"      # 24小时
+REFRESH_EXPIRES_IN = "604800"  # 7天
+```
+
+### RBAC 角色
+
+| 角色 | 权限 |
+|------|------|
+| admin | 所有权限 |
+| operator | 摄像头/视频/直播管理 |
+| viewer | 只读访问 |
+
+### 中间件
+
+```typescript
+// 认证中间件
+authMiddleware()
+
+// 角色检查
+requireRole('admin')
+requireRole('admin', 'operator')
+```
+
+## 部署信息
+
+| 属性 | 值 |
+|------|------|
+| Worker 名称 | tg-live-game-api |
+| 域名 | https://tg-live-game-api.ifoodme.com |
+| Account ID | d31caaf9d62da3682d7d98e07f8b96d5 |
+| D1 Database ID | 970f081e-42c8-46bb-b385-b7c1ab2ceaa5 |
 
 ## 开发命令
 
 ```bash
-# 进入代码目录
-cd /Users/jamesw/dev_workspace/frontend/tg-live-game/tg-live-game-hono
+# 安装依赖
+pnpm install
+
+# 本地开发 (使用本地 D1)
+pnpm dev
+
+# 远程开发 (使用远程 D1)
+pnpm dev:remote
+
+# 类型检查
+pnpm typecheck
+
+# 运行测试
+pnpm test
+
+# 代码检查
+pnpm lint
+
+# 格式化代码
+pnpm format
+
+# 部署
+pnpm deploy
+```
+
+### D1 数据库操作
+
+```bash
+# 本地执行 SQL
+npx wrangler d1 execute tg_live_game --command "SELECT * FROM users;"
 
-# 启动 Claude Code
-claude
+# 远程执行 SQL
+npx wrangler d1 execute tg_live_game --remote --command "SELECT * FROM users;"
 
-# 开发命令
-npm install       # 安装依赖
-npm run dev       # 本地开发
-npm run deploy    # 部署
+# 初始化 Schema
+npx wrangler d1 execute tg_live_game --remote --file=./schema.sql
 ```
+
+### Secrets 管理
+
+```bash
+wrangler secret put JWT_SECRET
+wrangler secret put CF_ACCOUNT_ID
+wrangler secret put CF_API_TOKEN
+wrangler secret put CUSTOMER_SUBDOMAIN
+```
+
+## 代码仓库
+
+| 环境 | 路径 |
+|------|------|
+| 开发 | `/Users/yibu/dev_workspace/frontend/tg-live-game/tg-live-game-hono` |
+
+## 相关文档
+
+- [[_project|TG Live Game]] - 父项目
+- [[tg-live-game-web/_project|tg-live-game-web]] - 前端项目
+- [[architecture-v1]] - 系统架构
+- [[workflow]] - 开发工作流

+ 160 - 0
tg-live-game/tg-live-game-web/_project.md

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