生活娱乐赛道 + AI狼人杀网页小游戏

用户30924 · 2026 年8 月 1 日 08:19

一、个人参赛可介绍

我是一个普通的Java开发，喜欢编程。
做这个作品有几个原因：1.想在实践中学习相关的编程技术 2.喜欢编程，喜欢AI，突发奇想想将AI荣誉到游戏中 3.喜欢狼人杀这个游戏，做一款自己作品很有成就感

二、产品简介

2.1 作品介绍：
该作品是一个网站，提供狼人杀游戏和交友聊天等功能。与传统的狼人杀主要区别在于本作品可以添加AI玩家补位，可以体验真人和AI一起游戏的乐趣。
2.2 面向用户：
喜欢狼人杀游戏的人群、对AI好奇的人群
2.3 完整功能：
1.多游戏模式

2.真人和AI玩家一起游戏

3.聊天交友（好友、群聊）

4.支持亮色、暗黑主题切换

5.支持国际化

三、产品演示视频

抖音连接：
4.82 复制打开抖音，看看【豆沙包的作品】AI狼人杀演示 AI狼人杀演示 https://v.douyin.com/UvD9R2j9rCI/ 08/24 :4pm u@s.EU kCu:/

四、产品创作历程

该作品的灵感来源：喜欢狼人杀这个游戏，但是有时候朋友不够，总是少人，加添其他的玩家又不熟悉，而且遇到素质不好的人更糟糕。刚好自己对AI也挺感兴趣的，于是就想着能不能让AI参与进来，于是就有了这个作品。
初赛的demo做得很粗躁，尤其是UI设计方面，和我期望的相差很大，功能也不够完善。
但是每天只要有时间我都会修修补补，主要是UI和体验感的优化以及游戏逻辑闭环。中间也遇到很多问题。我记得之前有一个印象深刻的问题，就是PC和移动端兼容的问题，让Trae来处理总是存在问题，弄了好久，当时就有一种“我知道问题，但是不知道怎么描述给Trae”的感觉，后来还是慢慢一步一步让Trae来修改，提供确定的问题和准确的提示词。

五、TRAE 实践过程

2026-07-12T23:47:31.402+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-13T00:37:01.391+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-13T01:17:01.511+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-13T02:07:01.463+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-13T02:57:01.545+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-13T04:07:01.664+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-13T05:07:01.726+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-13T05:57:01.806+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-13T06:37:01.877+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-13T07:27:01.881+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-13T08:17:02.002+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-13T08:57:02.261+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-13T09:27:02.304+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-13T09:57:02.307+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-13T10:37:02.358+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-13T11:27:02.287+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-13T12:17:02.572+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-13T13:17:02.613+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-13T14:07:02.605+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-13T15:17:02.759+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}
2026-07-13T15:27:02.806+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-13T17:07:02.902+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-13T18:17:03.307+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}
2026-07-13T18:27:03.318+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-13T23:37:03.423+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-26T10:50:20.997+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-26T11:39:51.037+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}
2026-07-26T11:49:51.043+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-26T13:19:51.062+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-26T14:19:51.122+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-26T15:09:51.160+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-26T16:49:51.142+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-26T17:59:51.230+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-26T19:19:51.056+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}
2026-07-26T19:29:51.051+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-26T21:29:51.287+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-26T23:09:51.362+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-27T00:19:51.308+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-27T01:19:51.444+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}
2026-07-27T01:29:51.460+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-27T02:39:51.488+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}
2026-07-27T02:49:51.475+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-27T03:49:51.594+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-27T05:39:51.682+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}
2026-07-27T05:49:51.680+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-27T07:39:51.925+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-27T08:49:52.099+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-27T10:29:52.147+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-27T11:59:52.214+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-27T14:59:52.269+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-27T16:59:52.480+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-27T21:09:52.724+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-28T00:19:52.753+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-28T02:39:52.996+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}
2026-07-28T02:49:53.034+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-28T05:09:53.356+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-28T10:49:53.743+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}
2026-07-28T10:59:54.000+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-28T14:29:54.121+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-28T19:19:54.447+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-28T22:09:54.562+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-29T02:39:54.756+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-29T06:49:55.382+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-29T09:19:55.413+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-29T15:29:55.814+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}
2026-07-29T15:39:56.057+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-29T17:39:56.095+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}
2026-07-29T17:49:56.102+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-29T19:39:56.265+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-30T02:09:56.326+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}
2026-07-30T02:19:56.389+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-30T10:49:57.263+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-30T15:09:57.473+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}
2026-07-30T15:19:57.478+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

2026-07-30T23:49:57.894+08:00 [info] fetchLogTask {“machineId”:“a01212c89e1c742c8d7f1d0e8510f741386e331962059f3a4732f4a028ba9d82”,“deviceId”:“33444663937322”,“userId”:“3569480308112483”,“organization”:“”,“platform”:“Mac”,“arch”:“arm64”,“packageType”:“stable_cn”,“productCode”:“TRAE”}

技术方案分享

狼人杀在线游戏平台 — 技术方案文档

一、技术栈总览

1.1 前端技术栈

技术	版本	用途
Vue 3	^3.4.0	前端核心框架，使用 Composition API + `<script setup>`
Vite	^5.1.4	构建工具，秒级冷启动 + HMR 热更新
Pinia	^2.1.7	状态管理，搭配 pinia-plugin-persistedstate 持久化
Vue Router	^4.3.0	路由管理，支持懒加载 + 路由守卫
Element Plus	^2.6.0	UI 组件库，配合自定义 SCSS 主题覆盖
Axios	^1.6.7	HTTP 请求库，统一拦截器 + Token 注入
@vueuse/core	^10.9.0	组合式工具函数库
dayjs	^1.11.10	日期处理
SCSS/Sass	^1.71.1	样式预处理器，CSS 变量驱动主题系统
unplugin-auto-import	^0.17.5	API 自动导入
unplugin-vue-components	^0.26.0	组件自动注册

1.2 后端技术栈

技术	版本	用途
Spring Boot	3.5.14	后端核心框架
Java	17	编程语言
MyBatis Plus	3.5.5	ORM 框架，简化数据库操作
MySQL	—	关系型数据库，存储用户、房间、对局记录
Redis	—	缓存 + 游戏状态存储，支持 Lua 脚本原子操作
JWT	—	用户认证，无状态 Token
WebSocket	—	实时双向通信，游戏状态推送

1.3 通信架构

通道	协议	场景
REST API	HTTP/HTTPS	房间管理、用户认证、游戏动作提交
游戏 WebSocket	WS/WSS	游戏状态推送、阶段切换、实时事件
聊天 WebSocket	WS/WSS	IM 消息收发、已读回执
WebRTC	P2P	实时语音通信

二、系统架构

2.1 整体架构图

┌─────────────────────────────────────────────────────┐
│                    客户端 (Vue 3)                     │
│  ┌──────────┐  ┌──────────┐  ┌──────────────────┐  │
│  │ 路由层    │  │ 状态管理  │  │  组合式函数层     │  │
│  │ (Router)  │  │ (Pinia)  │  │ (Composables)    │  │
│  └────┬─────┘  └────┬─────┘  └────┬─────────────┘  │
│       │              │              │                │
│  ┌────▼──────────────▼──────────────▼─────────────┐ │
│  │              API 层 (Axios + WebSocket)         │ │
│  └────┬──────────────┬────────────────────────────┘ │
│       │ HTTP         │ WS/WSS                       │
└───────┼──────────────┼──────────────────────────────┘
        │              │
┌───────▼──────────────▼──────────────────────────────┐
│                 服务端 (Spring Boot)                  │
│  ┌──────────┐  ┌──────────────┐  ┌──────────────┐  │
│  │ Controller│  │  WebSocket   │  │   Service    │  │
│  │   层      │  │   Handler    │  │     层       │  │
│  └────┬─────┘  └──────┬───────┘  └──────┬───────┘  │
│       │               │                  │          │
│  ┌────▼───────────────▼──────────────────▼───────┐  │
│  │          缓存层 (Redis + Lua Scripts)         │  │
│  └────────────────────┬─────────────────────────┘  │
│                       │                            │
│  ┌────────────────────▼─────────────────────────┐  │
│  │          数据库 (MySQL + MyBatis Plus)        │  │
│  └──────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────┘

2.2 前端目录结构

src/
├── api/                    # API 请求封装
│   ├── auth.js             # 认证相关
│   ├── game.js             # 游戏房间/动作 API
│   ├── im.js               # 即时通讯 API
│   ├── user.js             # 用户信息 API
│   ├── achievement.js      # 成就系统 API
│   ├── statistics.js       # 统计数据 API
│   └── file.js             # 文件上传 API
├── assets/
│   └── styles/             # 全局样式
│       ├── variables.scss        # CSS 变量定义
│       ├── light-theme-overrides.scss  # 亮色主题覆盖
│       ├── element-overrides.scss      # Element Plus 覆盖
│       ├── mixins.scss          # SCSS 混入
│       └── global.scss          # 全局样式
├── components/             # 通用组件
│   ├── GameTimer.vue       # 统一倒计时组件
│   ├── PhaseTransition.vue # 阶段切换过渡动画
│   ├── PhaseSummaryCard.vue# 阶段摘要卡片
│   ├── RoleRevealModal.vue # 角色揭示弹窗
│   ├── VoteResultOverlay.vue # 投票结果覆盖层
│   ├── OnboardingGuide.vue # 新手引导
│   ├── VoiceRecorder.vue   # 语音录制
│   ├── VoiceChannel.vue    # 语音通道
│   └── ...
├── composables/           # 组合式函数
│   ├── useWebSocket.js     # 游戏 WebSocket 通信
│   ├── useChatWebSocket.js # 聊天 WebSocket 通信
│   ├── useVoiceChannel.js  # WebRTC 语音通道
│   ├── useGameSound.js     # 游戏音效
│   └── ...
├── stores/                # Pinia 状态管理
│   ├── room.js             # 房间 & 游戏核心状态
│   ├── chat.js             # 聊天消息状态
│   ├── user.js             # 用户信息
│   ├── game.js             # 游戏配置
│   └── ...
├── views/                 # 页面组件
│   ├── auth/Login.vue      # 登录页
│   ├── lobby/Lobby.vue     # 游戏大厅
│   ├── room/Room.vue       # 游戏房间（核心页面）
│   ├── game/               # 游戏各阶段组件
│   │   ├── NightAction.vue # 夜晚行动
│   │   ├── DaySpeech.vue   # 白天发言
│   │   ├── VotePanel.vue   # 投票面板
│   │   ├── GameResult.vue  # 游戏结算
│   │   └── ...
│   ├── im/                 # 即时通讯
│   └── profile/            # 个人中心
├── router/                 # 路由配置
├── i18n/                   # 国际化 (zh/en)
└── utils/                  # 工具函数

三、关键实现思路

3.1 游戏状态机驱动

3.1.1 前端状态管理

游戏核心采用状态机模式，通过 roomStore.phase 字段统一管理游戏流程：

游戏阶段流转图：

WAITING ──game_start──→ NIGHT ──day_start──→ DAY ──vote_start──→ VOTE
                          ↑                                      │
                          └──────────night_start────────────────┘
                                                                   │
                          VOTE ──game_end──→ ENDED

前端核心代码 — [stores/room.js](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/stores/room.js)：

state: () => ({
  // 游戏通用状态
  phase: 'WAITING',        // 当前阶段
  round: 0,                // 当前回合
  currentSpeaker: null,    // 当前发言人
  myRole: null,            // 我的角色
  mySeat: null,            // 我的座位

  // 夜晚状态
  currentNightStep: null,  // null | 'GUARD' | 'WOLF' | 'SEER' | 'WITCH' | 'HUNTER'
  wolfKills: [],
  seerResult: null,
  witchHealAvailable: true,
  witchPoisonAvailable: true,

  // 白天状态
  deaths: [],
  speakOrder: [],
  pendingSpeakers: [],

  // 投票状态
  voteResults: null,
  votePhase: null,         // null | 'VOTING' | 'WAITING' | 'RESULT'
  myVote: null,
  votedCount: 0,
  aliveCount: 0,

  // UI 状态标志位
  roleRevealVisible: false,
  phaseSummaryVisible: false,
  voteDetailVisible: false,
  gameResultReady: false,
})

3.1.2 后端状态管理

后端核心模型 — GameState.java + GameRoom.java：

GameRoom：房间实体，包含房间配置、玩家列表、游戏运行时状态，支持多线程安全访问
GameState：游戏状态跟踪，记录夜晚行动（守卫守护、狼人击杀、预言家查验、女巫用药）和投票机制
所有 Boolean 字段初始化为 false，避免 JSON 序列化时 NullPointerException

Redis + Lua 脚本：通过 GameCacheManager 整合 Redis 和本地缓存，使用 Lua 脚本保证游戏状态变更的原子性。

3.1.3 WebSocket 消息分发

前端消息处理 — [composables/useWebSocket.js](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/composables/useWebSocket.js)：

function handleMessage(msg) {
  switch (msg.type) {
    case 'game_start':       // 游戏开始 → 设置角色、座位号
    case 'night_start':      // 夜晚开始 → 重置夜晚状态
    case 'day_start':        // 白天开始 → 设置死亡列表
    case 'death_announcement': // 死亡公告
    case 'peaceful_night':   // 平安夜
    case 'speak_start':      // 发言开始
    case 'all_speakers_done': // 发言结束
    case 'vote_start':       // 投票开始
    case 'vote_success':     // 投票成功
    case 'vote_update':      // 投票进度更新
    case 'vote_result':      // 投票结果
    case 'tie_vote':         // 平票
    case 'player_voted_out': // 玩家被放逐
    case 'hunter_skill_activate': // 猎人技能激活
    case 'hunter_shot':      // 猎人开枪
    case 'game_end':         // 游戏结束
    // ... 共 30+ 种消息类型
  }
}

后端 WebSocket 处理 — GameWebSocketHandler.java：

管理玩家 WebSocket 连接的生命周期（连接、断开、消息路由）
游戏进行中玩家断线时，自动触发托管模式，由系统代为操作
支持状态同步：玩家重连后主动请求 request_state_sync，服务端返回当前完整游戏状态

3.2 角色技能系统

3.2.1 角色配置

前端游戏配置 — [stores/game.js](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/stores/game.js)：

gameConfig: {
  maxPlayers: 12,      // 最大玩家数
  wolfCount: 3,        // 狼人数量
  villagerCount: 4,    // 村民数量
  seerCount: 1,        // 预言家
  witchCount: 1,       // 女巫
  guardCount: 0,       // 守卫
  hunterCount: 1,      // 猎人
  idiotCount: 0,       // 白痴
  speechDuration: 60   // 发言时长（秒）
}

3.2.2 夜间行动流程

夜间按固定顺序执行各角色行动：

GUARD（守卫）→ WOLF（狼人）→ SEER（预言家）→ WITCH（女巫）→ HUNTER（猎人确认）

前端夜间行动组件 — [views/game/NightAction.vue](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/views/game/NightAction.vue)：

根据 myRole 显示不同操作面板：

狼人：显示狼人队友、击杀投票面板、实时投票进度
预言家：选择查验目标、显示查验结果（好人/狼人）
女巫：显示被杀玩家、解药/毒药选择
守卫：选择守护目标

前端 API 调用 — [api/game.js](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/api/game.js)：

// 守卫守护
export function guardProtect(data) {
  return request({ url: '/game/action/guard', method: 'post', data: { ...data, actionType: 'guard_protect' } })
}
// 狼人击杀
export function wolfKill(data) {
  return request({ url: '/game/action/wolf-kill', method: 'post', data: { ...data, actionType: 'wolf_kill' } })
}
// 预言家查验
export function seerCheck(data) {
  return request({ url: '/game/action/seer-check', method: 'post', data: { ...data, actionType: 'seer_check' } })
}
// 女巫解药
export function witchHeal(data) {
  return request({ url: '/game/action/witch-heal', method: 'post', data: { ...data, actionType: 'witch_heal' } })
}
// 女巫毒药
export function witchPoison(data) {
  return request({ url: '/game/action/witch-poison', method: 'post', data: { ...data, actionType: 'witch_poison' } })
}
// 猎人开枪
export function hunterShoot(data) {
  return request({ url: '/game/action/hunter-shoot', method: 'post', data: { ...data, actionType: 'hunter_shoot' } })
}

后端处理 — GameServiceImpl.java：

接收角色动作请求，更新 GameState 中的对应字段
夜间所有角色行动完成后，计算死亡结果
通过 WebSocket 推送 day_start 事件，携带 deaths 数组

3.2.3 猎人技能特殊处理

猎人死亡时触发技能，需区分被投票出局和被毒杀两种情况：

前端处理 — [composables/useWebSocket.js](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/composables/useWebSocket.js)：

case 'hunter_skill_activate':   // 猎人技能激活
  roomStore.pendingHunterShoot = true
  roomStore.hunterShootDeadline = msg.data.deadline || null
  break

case 'hunter_night_check':      // 夜间确认是否中毒
  if (msg.data?.isPoisoned) {
    roomStore.setHunterPoisoned(true)  // 中毒则无法开枪
  }
  break

case 'hunter_cannot_shoot':     // 无法开枪（中毒死亡）
  roomStore.pendingHunterShoot = false
  break

3.3 WebSocket 通信与断线重连

3.3.1 连接管理

前端连接逻辑 — [composables/useWebSocket.js](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/composables/useWebSocket.js)：

function connect() {
  const token = getToken()
  const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:'
  const wsUrl = import.meta.env.VITE_WS_URL || `${protocol}//${location.host}`
  const url = `${wsUrl}/ws/game/${roomCode}?token=${token}`
  ws.value = new WebSocket(url)

  ws.value.onopen = () => {
    connected.value = true
    reconnectCount = 0
    // 游戏进行中时，主动请求状态同步
    if (roomStore.phase && roomStore.phase !== 'WAITING' && roomStore.phase !== 'ENDED') {
      nextTick(() => { send({ type: 'request_state_sync' }) })
    }
    // 同步服务器时钟，用于倒计时计算
    send({ type: 'time_sync_request', clientTime: Date.now() })
  }
}

3.3.2 指数退避重连

// 计算第 n 次重连的延迟（指数退避）
function getReconnectDelay(attempt) {
  if (attempt <= 1) return 3000           // 第1次：3s
  const delay = 3000 * Math.pow(2, attempt - 1)  // 6s, 12s, 24s...
  return Math.min(delay, 30000)           // 上限 30s
}

ws.value.onclose = (event) => {
  // 被踢下线不重连
  if (kickedReason.includes('kicked')) {
    removeToken(); router.push('/login'); return
  }
  // 指数退避重连，最多 20 次
  if (reconnectCount < maxReconnect) {
    reconnectCount++
    const delay = getReconnectDelay(reconnectCount)
    reconnectTimer = setTimeout(() => connect(), delay)
  }
}

3.3.3 时钟同步

为保证倒计时精准，前端通过 time_sync_request / time_sync_response 计算与服务端的时钟偏移：

let clockOffset = 0  // 客户端时间 - 服务端时间

// 发送时钟同步请求
send({ type: 'time_sync_request', clientTime: Date.now() })

// 收到响应后计算偏移
// clockOffset = Date.now() - serverTime
// 实际剩余时间 = deadline - (Date.now() - clockOffset)

3.4 主题系统架构

3.4.1 CSS 变量驱动

采用 CSS 变量 + 属性选择器 方案：

变量定义 — [assets/styles/variables.scss](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/assets/styles/variables.scss)：

:root[data-theme="dark"] {
  --bg-color: #0a0a12;
  --bg-color-card: #14142a;
  --text-primary: #f5f5fa;
  --text-secondary: #a0a0b8;
  --color-primary: #0099cc;
  --border-color: rgba(255, 255, 255, 0.1);
  // ... 50+ 变量
}

亮色覆盖 — [assets/styles/light-theme-overrides.scss](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/assets/styles/light-theme-overrides.scss)：

:root[data-theme="light"] {
  --bg-color: #f0f2f5;
  --bg-color-card: #ffffff;
  --text-primary: #1a1a2e;
  --text-secondary: #4a4a5a;
  --color-primary: #0099cc;
  --border-color: rgba(0, 0, 0, 0.08);
}

// 针对硬编码颜色的组件逐个覆盖
[data-theme="light"] {
  .vote-confirm-dialog {
    background: #ffffff !important;
    .el-message-box__title { color: #1a1a2e !important; }
    .el-message-box__content { color: #4a4a5a !important; }
    // ...
  }
}

3.4.2 主题切换

切换组件 — [components/ThemeToggle.vue](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/components/ThemeToggle.vue)：

切换 document.documentElement.setAttribute('data-theme', theme) 并持久化到 localStorage。

3.5 国际化方案

采用自研轻量级 i18n，无需额外依赖：

翻译文件 — [i18n/zh.js](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/i18n/zh.js) 和 [i18n/en.js](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/i18n/en.js)：

// zh.js
export default {
  ws: {
    reconnected: '已重新连接',
    disconnected: '网络连接已断开，正在重连...',
    voteSuccess: '投票成功',
    kickedOut: '您已被移出房间',
    // ...
  },
  game: {
    peacefulNight: '昨晚是平安夜，无人死亡',
    // ...
  }
}

HTTP 请求自动注入语言头 — [utils/request.js](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/utils/request.js)：

service.interceptors.request.use(config => {
  const locale = localStorage.getItem('locale') || 'zh'
  config.headers['Accept-Language'] = locale === 'en' ? 'en' : 'zh-CN'
  return config
})

WebSocket 消息国际化：后端推送消息时携带 i18nKey，前端优先使用 t(i18nKey) 翻译：

function translateMsg(data, fallback) {
  if (data?.i18nKey) {
    return t(data.i18nKey, data)
  }
  return data?.message || fallback
}

3.6 游戏流程视觉编排

通过多个组件协作实现沉浸式游戏体验，使用标志位协调时序避免 UI 重叠：

组件	作用	时长	时序控制
RoleRevealModal	角色身份揭示	3s	`roleRevealVisible`
PhaseTransition	阶段切换全屏动画	2.4s	`isTransitioning`
PhaseSummaryCard	阶段摘要信息	2.5s	`phaseSummaryVisible`
VoteResultOverlay	投票结果覆盖层	10s	`voteDetailVisible`
GameResult	游戏结算弹窗	—	`gameResultReady`

时序协调核心逻辑 — [views/room/Room.vue](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/views/room/Room.vue)：

function showPhaseSummary(fromPhase, toPhase) {
  if (fromPhase === 'NIGHT' && toPhase === 'DAY') {
    summaryType.value = 'night'
    // 支持多人死亡显示
    summaryKilled.value = roomStore.deaths?.map(d => d.seat) || []
    summaryVisible.value = true
    roomStore.phaseSummaryVisible = true
    setTimeout(() => {
      summaryVisible.value = false
      roomStore.phaseSummaryVisible = false
    }, 2500)
  }
  // DAY→VOTE 不展示摘要卡片（无有意义信息）
  // VOTE→ENDED 展示后触发 gameResultReady
}

3.7 响应式布局

PC 端（≥1024px）：三栏布局

┌─────────┬────────────────────┬─────────┐
│ 玩家列表 │    游戏主操作区     │  日志   │
│ (左侧栏) │  (NightAction/     │ (右侧栏) │
│         │   DaySpeech/       │         │
│         │   VotePanel)       │         │
└─────────┴────────────────────┴─────────┘

移动端（<1024px）：侧栏改为抽屉式

┌──────────────────────────────────────┐
│           游戏主操作区                │
│  ┌──┐                        ┌──┐   │
│  │👥│ (点击滑出玩家列表抽屉)  │📋│   │
│  └──┘                        └──┘   │
└──────────────────────────────────────┘

3.8 IM 即时通讯

3.8.1 双通道设计

通道	文件	消息类型
游戏内聊天	useWebSocket.js	`room_chat`、`player_speak`
IM 聊天	useChatWebSocket.js	单聊、群聊、已读回执

3.8.2 已读回执实现

类型安全比较：解决 fromUserId（字符串）与 userId（数字）类型不匹配问题：

function isSelfMessage(fromUserId) {
  return Number(fromUserId) === Number(userStore.userId)
}

自动发送已读回执：用户收到消息时自动发送 read 事件：

function sendRead(friendId) {
  sendRaw({ type: 'read', friendId })
}

3.8.3 性能优化

虚拟列表 — [components/VirtualList.vue](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/components/VirtualList.vue)：

长消息列表采用虚拟滚动，只渲染可视区域内的消息，支持数千条消息流畅滚动。

3.9 认证与安全

3.9.1 JWT Token 认证

请求拦截器 — [utils/request.js](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/utils/request.js)：

service.interceptors.request.use(config => {
  const token = getToken()
  if (token) {
    config.headers['Authorization'] = `Bearer ${token}`
  }
  return config
})

路由守卫 — [router/index.js](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/router/index.js)：

router.beforeEach((to, from, next) => {
  const token = getToken()
  if (to.meta.requiresAuth) {
    if (!token || isTokenExpired()) {
      next({ name: 'Login', query: { redirect: to.fullPath } })
      return
    }
  }
  next()
})

3.9.2 WebSocket Token 鉴权

WebSocket 连接时通过 URL 查询参数传递 Token：

const url = `${wsUrl}/ws/game/${roomCode}?token=${token}`

服务端验证 Token 有效性，无效则拒绝连接。

3.10 工程化能力

3.10.1 统一倒计时组件

[components/GameTimer.vue](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/components/GameTimer.vue) 提供统一的倒计时能力：

支持水平进度条 / 环形进度条两种模式
正常模式 / 紧急模式（最后 10 秒变红 + 脉冲动画）
基于服务端时钟同步计算剩余时间

3.10.2 键盘快捷键

Space：提交发言
Enter：提交投票

3.10.3 无障碍支持

@media (prefers-reduced-motion: reduce) {
  .phase-transition { animation: none !important; }
  .pulse-effect { animation: none !important; }
}

3.10.4 AI 玩家填充

人数不足时，房主可添加 AI 玩家：

export function addAiPlayer(roomCode) {
  return request({ url: `/game/room/${roomCode}/add-ai`, method: 'post' })
}

后端 GameServiceImpl 创建 AI 玩家，自动准备，游戏开始时分配角色。

3.10.5 断线托管

玩家断线后自动进入托管模式，系统代为操作（如自动跳过发言、随机投票）。

四、数据流设计

4.1 游戏动作提交流程

用户操作 → 前端 API 调用 (Axios POST)
    → 后端 GameController 接收
    → GameServiceImpl 处理业务逻辑
    → 更新 GameState (Redis + Lua)
    → WebSocket 推送结果给房间内所有玩家
    → 前端 useWebSocket.handleMessage 更新 roomStore
    → Vue 响应式更新 UI

4.2 投票流程数据流

1. 后端推送 vote_start → 前端设置 votePhase='VOTING'
2. 用户选择目标 → ElMessageBox 确认 → API 提交投票
3. 后端推送 vote_update → 前端更新 votedCount + voteRecords
4. 所有人投票完成 → 后端推送 vote_result
5. 前端设置 voteDetailVisible=true → 显示 VoteResultOverlay
6. 10s 后或下一阶段开始 → 自动关闭覆盖层

4.3 夜晚流程数据流

1. 后端推送 night_start → 前端重置夜晚状态
2. 按顺序推送角色行动通知 (GUARD → WOLF → SEER → WITCH)
3. 各角色通过 API 提交动作
4. 夜晚结束 → 后端计算死亡结果
5. 推送 day_start (携带 deaths 数组) → 前端显示 PhaseSummaryCard
6. 摘要卡片关闭后 → DaySpeech 显示死亡公告

五、性能优化

5.1 前端优化

优化项	方案
路由懒加载	所有页面组件使用 `() => import()` 动态导入
虚拟列表	长消息列表使用 VirtualList 组件，只渲染可视区域
批量更新	`useBatchUpdate.js` 合并高频状态更新
图片懒加载	`useIntersectionObserver.js` 视口内才加载
代码分割	Vite 自动按路由分割 chunk
状态持久化	Pinia persistedstate 插件持久化关键状态

5.2 通信优化

优化项	方案
时钟同步	客户端计算 clockOffset，减少倒计时误差
状态同步	断线重连后主动请求 `request_state_sync`
消息压缩	WebSocket 消息使用紧凑 JSON 格式
请求去重	`hideLoading` 标记避免重复 loading
401 防抖	并发请求同时 401 时只弹一次错误提示

5.3 后端优化

优化项	方案
Redis 缓存	游戏状态存储在 Redis，减少数据库访问
Lua 脚本	原子操作保证状态一致性
连接管理	WebSocket 连接池管理
带抖动 TTL	缓存 TTL 添加随机抖动，防止缓存雪崩

狼人杀在线游戏平台 — 商业化与社会价值分析

一、社会价值分析

1.1 社交推理能力培养

狼人杀作为经典社交推理游戏，具有显著的教育和认知训练价值：

能力维度	游戏中的体现	现实迁移价值
逻辑思维	通过发言矛盾、投票行为推理身份	提升日常问题分析和决策能力
语言表达	限时 60 秒发言，需组织有力论点	锻炼公众表达和说服能力
心理博弈	狼人伪装好人、好人识别伪装	增强情绪管理和心理素质
团队协作	狼人阵营默契配合、好人信息共享	培养团队合作意识
批判性思维	质疑发言合理性、验证信息真伪	提升信息甄别和独立思考能力

1.2 社交破冰平台

1.2.1 降低社交门槛

传统社交场景中，陌生人之间缺乏共同话题，社交破冰困难。本平台通过游戏机制天然提供：

共同目标：游戏胜负为参与者提供一致目标
结构化交互：发言顺序、投票流程提供清晰的交互框架
角色保护：游戏角色身份降低了真实表达的社会风险

1.2.2 跨地域连接

在线模式：打破地理限制，连接不同城市、不同背景的玩家
分享加入：通过 [JoinByShare.vue](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/views/room/JoinByShare.vue) 生成分享码，好友一键加入
IM 系统：游戏外持续社交，形成稳定社交关系链

1.2.3 情感陪伴

项目内置完整的 IM 即时通讯系统（[Chat.vue](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/views/im/Chat.vue)），支持：

单聊 + 群聊，游戏后继续交流
语音消息（[VoiceRecorder.vue](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/components/VoiceRecorder.vue)），更真实的情感传达
已读回执，增强社交反馈

1.3 传统文化数字化

狼人杀脱胎于经典桌游"杀人游戏"（Mafia），本项目将其数字化并全方位增强：

维度	传统桌游	本平台
规则执行	人工裁判，易出错	系统强制执行，零失误
视觉体验	纯语言描述	阶段过渡动画、角色揭示特效、摘要卡片
数据记录	无	对局记录、成就系统、排行榜
参与门槛	需线下凑齐人数	AI 填充 + 在线匹配
跨地域	不支持	随时随地在线游戏

1.4 无障碍与包容性

项目在设计中考虑了不同用户群体的需求：

暗色/亮色主题：适应不同光线环境，[ThemeToggle.vue](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/components/ThemeToggle.vue)
中英文国际化：跨语言用户友好，[i18n/zh.js](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/i18n/zh.js) + [i18n/en.js](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/i18n/en.js)
移动端适配：三栏抽屉式布局，小屏幕也能流畅游戏
无障碍动画：prefers-reduced-motion 媒体查询，前庭功能敏感用户可关闭动画
键盘快捷键：Space 提交发言、Enter 提交投票，减少鼠标依赖
新手引导：[OnboardingGuide.vue](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/components/OnboardingGuide.vue) 帮助新用户快速上手

二、市场分析

2.1 目标用户画像

用户群体	占比预估	特征	需求
大学生	35%	社交需求强、时间充裕、预算有限	破冰社交、宿舍娱乐
年轻白领	30%	压力大、碎片时间、追求品质	减压放松、同事社交
桌游爱好者	20%	深度玩家、追求策略、付费意愿强	高端对局、排位竞技
休闲娱乐用户	15%	偶尔游戏、社交驱动	轻松体验、快速上手

2.2 用户使用场景

┌─────────────────────────────────────────────────────┐
│                    工作日                             │
│  12:00-13:00  午休快速一局（快速模式）                 │
│  20:00-22:00  下班后好友组局（标准模式）               │
├─────────────────────────────────────────────────────┤
│                    周末                               │
│  14:00-17:00  下午竞技时段（排位赛）                   │
│  21:00-23:00  深夜社交场（语音房模式）                 │
└─────────────────────────────────────────────────────┘

2.3 竞品分析

维度	本平台	传统狼人杀 APP	桌游吧线下
便利性	随时随地	随时随地	需到店
社交性	IM + 语音房	仅游戏内	面对面
公平性	系统裁判	系统裁判	人工裁判
成本	免费/低付费	免费/内购	按人头收费
沉浸感	中等	中等	高
视觉体验	丰富动画特效	参差不齐	无
AI 填充	支持	部分支持	不适用

2.4 核心竞争优势

完整的社交闭环：游戏 → IM 聊天 → 好友关系 → 再次组局，形成社交飞轮
沉浸式视觉体验：PhaseTransition 全屏过渡 + PhaseSummaryCard 摘要卡片 + RoleRevealModal 角色揭示
AI 填充机制：人数不足时 AI 补位，无需等待凑人
断线托管：玩家断线自动托管，不影响他人游戏体验
双端适配：PC 三栏布局 + 移动端抽屉式布局，全设备覆盖
国际化支持：中英文双语，覆盖海外华人市场

三、商业化路径

3.1 用户规模潜力

指标	预估值
目标用户群体	18-35 岁年轻群体、桌游爱好者
单局时长	15-30 分钟
日均使用时长	30-60 分钟（2-3 局）
留存关键指标	次日留存率 > 35%、好友邀请率 > 20%
付费转化率目标	5-8%（行业中等水平）

3.2 商业化模式

3.2.1 增值服务（C 端付费）

① 个性化装饰

项目	说明	定价参考
头像框	游戏/结算页面展示	6-30 元/个
特效皮肤	PhaseTransition 个性化过渡动画	12-68 元/套
角色语音包	自定义发言提示音	6-18 元/个
专属称号	个人中心/排行榜展示	限时活动获取
房间装饰	房间背景主题	6-30 元/套
倒计时皮肤	GameTimer 个性化样式	6-18 元/个

② 会员订阅

等级	价格	核心权益
普通会员	15 元/月	专属头像框、每月 2 个特效皮肤、去除广告
高级会员	38 元/月	全部特效解锁、优先匹配、创建私人房间、专属标识

3.2.2 赛事运营

赛事类型	频率	报名费	奖励
周末锦标赛	每周	9.9 元	虚拟奖品 + 专属称号
月度排位赛	每月	免费（会员优先）	实物奖品 + 段位证书
年度总决赛	每年	邀请制	现金奖金 + 赞助商奖品

3.2.3 广告变现

广告位	形式	频率	说明
大厅 Banner	静态/动态图片	持续展示	非侵入式
开屏广告	全屏图片	每次启动	可付费去除
结算页推广	底部小卡片	每局结束	低干扰
品牌联名	限定主题皮肤	活动期间	深度合作

3.2.4 数据服务（B 端）

用户行为分析：游戏时长、活跃时段、留存率等脱敏数据
赛事 SaaS：为企业团建提供定制化狼人杀赛事服务
API 开放：允许第三方接入游戏数据（需用户授权）

3.3 收入预测模型

月收入 = 增值服务收入 + 会员订阅收入 + 赛事收入 + 广告收入

假设 DAU = 10,000：
- 增值服务：DAU × 付费率(3%) × ARPU(20元) = 6,000 元/天
- 会员订阅：DAU × 会员率(5%) × ARPU(25元) = 12,500 元/天
- 赛事收入：周末 2 天 × 100人 × 9.9元 = 1,980 元/周
- 广告收入：DAU × eCPM(10元) / 1000 × 3次 = 300 元/天

预估月收入 ≈ 60 万 - 80 万元

四、增长策略

4.1 增长飞轮

                    ┌─────────────────────┐
                    │   优质游戏体验       │
                    │  (动画/音效/流畅度)  │
                    └──────────┬──────────┘
                               │
                    ┌──────────▼──────────┐
                    │   用户留存提升       │
                    │  (次日留存>35%)     │
                    └──────────┬──────────┘
                               │
              ┌────────────────┼────────────────┐
              │                │                │
    ┌─────────▼──────┐ ┌──────▼───────┐ ┌──────▼───────┐
    │  好友邀请组局   │ │ 社区内容产出  │ │  排位竞技    │
    │ (分享码加入)   │ │ (对局分享)   │ │ (段位激励)   │
    └─────────┬──────┘ └──────┬───────┘ └──────┬───────┘
              │                │                │
              └────────────────┼────────────────┘
                               │
                    ┌──────────▼──────────┐
                    │   社交关系链形成     │
                    │  (IM聊天/好友系统)  │
                    └──────────┬──────────┘
                               │
                    ┌──────────▼──────────┐
                    │   活跃度提升        │
                    │  (DAU/PFU 增长)    │
                    └──────────┬──────────┘
                               │
                    ┌──────────▼──────────┐
                    │   数据驱动优化      │
                    │  (体验持续提升)    │
                    └─────────────────────┘

4.2 获客渠道

渠道	策略	预估成本
口碑传播	分享码邀请好友组局，双方获得装饰奖励	低（自然增长）
社交媒体	B站/抖音发布高光对局视频、攻略内容	中（内容制作）
校园推广	高校桌游社合作、新生破冰活动	低（精准触达）
KOL 合作	游戏主播试玩、桌游博主推荐	中高（按效果付费）
应用商店	ASO 优化、关键词竞价	中高（按点击付费）

4.3 留存策略

留存维度	策略	实现方式
短期留存	新手引导 + 首日奖励	OnboardingGuide + 首日登录奖励
中期留存	成就系统 + 排行榜	AchievementBadge + Leaderboard
长期留存	排位赛季 + 社交关系	段位系统 + 好友系统
社交留存	好友组局 + IM 聊天	分享码 + Chat 系统

五、风险与应对

5.1 产品风险

风险	影响	应对措施
用户作弊（场外信息）	公平性受损	智能反作弊系统（分析发言/投票模式）
AI 玩家体验差	用户流失	持续优化 AI 策略，支持不同难度
高峰期服务器压力	卡顿/掉线	Redis 缓存 + 弹性扩容
内容合规风险	下架风险	敏感词过滤 + 用户举报机制

5.2 商业风险

风险	影响	应对措施
付费率低	收入不足	多元化变现（增值+广告+赛事）
获客成本高	利润压缩	口碑传播为主，降低 CAC
竞品模仿	用户分流	强化社交闭环壁垒
政策变化	合规成本	提前布局内容审核体系

狼人杀在线游戏平台 — 商业化与社会价值分析

一、社会价值分析

1.1 社交推理能力培养

狼人杀作为经典社交推理游戏，具有显著的教育和认知训练价值：

能力维度	游戏中的体现	现实迁移价值
逻辑思维	通过发言矛盾、投票行为推理身份	提升日常问题分析和决策能力
语言表达	限时 60 秒发言，需组织有力论点	锻炼公众表达和说服能力
心理博弈	狼人伪装好人、好人识别伪装	增强情绪管理和心理素质
团队协作	狼人阵营默契配合、好人信息共享	培养团队合作意识
批判性思维	质疑发言合理性、验证信息真伪	提升信息甄别和独立思考能力

1.2 社交破冰平台

1.2.1 降低社交门槛

传统社交场景中，陌生人之间缺乏共同话题，社交破冰困难。本平台通过游戏机制天然提供：

共同目标：游戏胜负为参与者提供一致目标
结构化交互：发言顺序、投票流程提供清晰的交互框架
角色保护：游戏角色身份降低了真实表达的社会风险

1.2.2 跨地域连接

在线模式：打破地理限制，连接不同城市、不同背景的玩家
分享加入：通过 [JoinByShare.vue](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/views/room/JoinByShare.vue) 生成分享码，好友一键加入
IM 系统：游戏外持续社交，形成稳定社交关系链

1.2.3 情感陪伴

项目内置完整的 IM 即时通讯系统（[Chat.vue](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/views/im/Chat.vue)），支持：

单聊 + 群聊，游戏后继续交流
语音消息（[VoiceRecorder.vue](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/components/VoiceRecorder.vue)），更真实的情感传达
已读回执，增强社交反馈

1.3 传统文化数字化

狼人杀脱胎于经典桌游"杀人游戏"（Mafia），本项目将其数字化并全方位增强：

维度	传统桌游	本平台
规则执行	人工裁判，易出错	系统强制执行，零失误
视觉体验	纯语言描述	阶段过渡动画、角色揭示特效、摘要卡片
数据记录	无	对局记录、成就系统、排行榜
参与门槛	需线下凑齐人数	AI 填充 + 在线匹配
跨地域	不支持	随时随地在线游戏

1.4 无障碍与包容性

项目在设计中考虑了不同用户群体的需求：

暗色/亮色主题：适应不同光线环境，[ThemeToggle.vue](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/components/ThemeToggle.vue)
中英文国际化：跨语言用户友好，[i18n/zh.js](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/i18n/zh.js) + [i18n/en.js](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/i18n/en.js)
移动端适配：三栏抽屉式布局，小屏幕也能流畅游戏
无障碍动画：prefers-reduced-motion 媒体查询，前庭功能敏感用户可关闭动画
键盘快捷键：Space 提交发言、Enter 提交投票，减少鼠标依赖
新手引导：[OnboardingGuide.vue](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/components/OnboardingGuide.vue) 帮助新用户快速上手

二、市场分析

2.1 目标用户画像

用户群体	占比预估	特征	需求
大学生	35%	社交需求强、时间充裕、预算有限	破冰社交、宿舍娱乐
年轻白领	30%	压力大、碎片时间、追求品质	减压放松、同事社交
桌游爱好者	20%	深度玩家、追求策略、付费意愿强	高端对局、排位竞技
休闲娱乐用户	15%	偶尔游戏、社交驱动	轻松体验、快速上手

2.2 用户使用场景

┌─────────────────────────────────────────────────────┐
│                    工作日                             │
│  12:00-13:00  午休快速一局（快速模式）                 │
│  20:00-22:00  下班后好友组局（标准模式）               │
├─────────────────────────────────────────────────────┤
│                    周末                               │
│  14:00-17:00  下午竞技时段（排位赛）                   │
│  21:00-23:00  深夜社交场（语音房模式）                 │
└─────────────────────────────────────────────────────┘

2.3 竞品分析

维度	本平台	传统狼人杀 APP	桌游吧线下
便利性	随时随地	随时随地	需到店
社交性	IM + 语音房	仅游戏内	面对面
公平性	系统裁判	系统裁判	人工裁判
成本	免费/低付费	免费/内购	按人头收费
沉浸感	中等	中等	高
视觉体验	丰富动画特效	参差不齐	无
AI 填充	支持	部分支持	不适用

2.4 核心竞争优势

完整的社交闭环：游戏 → IM 聊天 → 好友关系 → 再次组局，形成社交飞轮
沉浸式视觉体验：PhaseTransition 全屏过渡 + PhaseSummaryCard 摘要卡片 + RoleRevealModal 角色揭示
AI 填充机制：人数不足时 AI 补位，无需等待凑人
断线托管：玩家断线自动托管，不影响他人游戏体验
双端适配：PC 三栏布局 + 移动端抽屉式布局，全设备覆盖
国际化支持：中英文双语，覆盖海外华人市场

三、商业化路径

3.1 用户规模潜力

指标	预估值
目标用户群体	18-35 岁年轻群体、桌游爱好者
单局时长	15-30 分钟
日均使用时长	30-60 分钟（2-3 局）
留存关键指标	次日留存率 > 35%、好友邀请率 > 20%
付费转化率目标	5-8%（行业中等水平）

3.2 商业化模式

3.2.1 增值服务（C 端付费）

① 个性化装饰

项目	说明	定价参考
头像框	游戏/结算页面展示	6-30 元/个
特效皮肤	PhaseTransition 个性化过渡动画	12-68 元/套
角色语音包	自定义发言提示音	6-18 元/个
专属称号	个人中心/排行榜展示	限时活动获取
房间装饰	房间背景主题	6-30 元/套
倒计时皮肤	GameTimer 个性化样式	6-18 元/个

② 会员订阅

等级	价格	核心权益
普通会员	15 元/月	专属头像框、每月 2 个特效皮肤、去除广告
高级会员	38 元/月	全部特效解锁、优先匹配、创建私人房间、专属标识

3.2.2 赛事运营

赛事类型	频率	报名费	奖励
周末锦标赛	每周	9.9 元	虚拟奖品 + 专属称号
月度排位赛	每月	免费（会员优先）	实物奖品 + 段位证书
年度总决赛	每年	邀请制	现金奖金 + 赞助商奖品

3.2.3 广告变现

广告位	形式	频率	说明
大厅 Banner	静态/动态图片	持续展示	非侵入式
开屏广告	全屏图片	每次启动	可付费去除
结算页推广	底部小卡片	每局结束	低干扰
品牌联名	限定主题皮肤	活动期间	深度合作

3.2.4 数据服务（B 端）

用户行为分析：游戏时长、活跃时段、留存率等脱敏数据
赛事 SaaS：为企业团建提供定制化狼人杀赛事服务
API 开放：允许第三方接入游戏数据（需用户授权）

3.3 收入预测模型

月收入 = 增值服务收入 + 会员订阅收入 + 赛事收入 + 广告收入

假设 DAU = 10,000：
- 增值服务：DAU × 付费率(3%) × ARPU(20元) = 6,000 元/天
- 会员订阅：DAU × 会员率(5%) × ARPU(25元) = 12,500 元/天
- 赛事收入：周末 2 天 × 100人 × 9.9元 = 1,980 元/周
- 广告收入：DAU × eCPM(10元) / 1000 × 3次 = 300 元/天

预估月收入 ≈ 60 万 - 80 万元

四、增长策略

4.1 增长飞轮

                    ┌─────────────────────┐
                    │   优质游戏体验       │
                    │  (动画/音效/流畅度)  │
                    └──────────┬──────────┘
                               │
                    ┌──────────▼──────────┐
                    │   用户留存提升       │
                    │  (次日留存>35%)     │
                    └──────────┬──────────┘
                               │
              ┌────────────────┼────────────────┐
              │                │                │
    ┌─────────▼──────┐ ┌──────▼───────┐ ┌──────▼───────┐
    │  好友邀请组局   │ │ 社区内容产出  │ │  排位竞技    │
    │ (分享码加入)   │ │ (对局分享)   │ │ (段位激励)   │
    └─────────┬──────┘ └──────┬───────┘ └──────┬───────┘
              │                │                │
              └────────────────┼────────────────┘
                               │
                    ┌──────────▼──────────┐
                    │   社交关系链形成     │
                    │  (IM聊天/好友系统)  │
                    └──────────┬──────────┘
                               │
                    ┌──────────▼──────────┐
                    │   活跃度提升        │
                    │  (DAU/PFU 增长)    │
                    └──────────┬──────────┘
                               │
                    ┌──────────▼──────────┐
                    │   数据驱动优化      │
                    │  (体验持续提升)    │
                    └─────────────────────┘

4.2 获客渠道

渠道	策略	预估成本
口碑传播	分享码邀请好友组局，双方获得装饰奖励	低（自然增长）
社交媒体	B站/抖音发布高光对局视频、攻略内容	中（内容制作）
校园推广	高校桌游社合作、新生破冰活动	低（精准触达）
KOL 合作	游戏主播试玩、桌游博主推荐	中高（按效果付费）
应用商店	ASO 优化、关键词竞价	中高（按点击付费）

4.3 留存策略

留存维度	策略	实现方式
短期留存	新手引导 + 首日奖励	OnboardingGuide + 首日登录奖励
中期留存	成就系统 + 排行榜	AchievementBadge + Leaderboard
长期留存	排位赛季 + 社交关系	段位系统 + 好友系统
社交留存	好友组局 + IM 聊天	分享码 + Chat 系统

五、风险与应对

5.1 产品风险

风险	影响	应对措施
用户作弊（场外信息）	公平性受损	智能反作弊系统（分析发言/投票模式）
AI 玩家体验差	用户流失	持续优化 AI 策略，支持不同难度
高峰期服务器压力	卡顿/掉线	Redis 缓存 + 弹性扩容
内容合规风险	下架风险	敏感词过滤 + 用户举报机制

5.2 商业风险

风险	影响	应对措施
付费率低	收入不足	多元化变现（增值+广告+赛事）
获客成本高	利润压缩	口碑传播为主，降低 CAC
竞品模仿	用户分流	强化社交闭环壁垒
政策变化	合规成本	提前布局内容审核体系

狼人杀在线游戏平台 — 产品迭代规划

一、版本路线图总览

v1.0 核心体验版 ──→ v1.1 社交增强版 ──→ v1.2 玩法扩展版
                                              │
                                              ▼
v3.0 开放平台版 ←── v2.5 AI 赋能版 ←── v2.0 赛事与社区版

版本	主题	核心目标
v1.0	核心体验版	跑通完整游戏闭环，验证核心玩法
v1.1	社交增强版	强化社交属性，提升留存率
v1.2	玩法扩展版	丰富游戏内容，提升可玩性
v2.0	赛事与社区版	构建竞技生态和内容社区
v2.5	AI 赋能版	引入 AI 技术提升体验
v3.0	开放平台版	构建 UGC 生态

二、v1.0 核心体验版（当前阶段）

2.1 已完成功能

2.1.1 游戏核心

功能	状态	实现文件
6 种角色完整实现		[NightAction.vue](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/views/game/NightAction.vue)
完整游戏流程（夜→昼→投票→结算）		[Room.vue](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/views/room/Room.vue)
狼人击杀投票 + 实时进度		NightAction.vue
预言家查验		NightAction.vue
女巫解药/毒药		NightAction.vue
守卫守护		NightAction.vue
猎人开枪（中毒判断）		[HunterShootPanel.vue](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/views/game/HunterShootPanel.vue)
白天顺序发言 + 倒计时		[DaySpeech.vue](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/views/game/DaySpeech.vue)
投票放逐 + 结果展示		[VotePanel.vue](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/views/game/VotePanel.vue)
游戏结算页面		[GameResult.vue](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/views/game/GameResult.vue)

2.1.2 房间系统

功能	状态	实现文件
创建/加入/离开房间		[api/game.js](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/api/game.js)
房间密码保护		game.js
房主转让		game.js
踢出玩家		game.js
AI 玩家填充		game.js
玩家托管/取消托管		game.js
分享码加入		[JoinByShare.vue](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/views/room/JoinByShare.vue)
准备/取消准备		[Lobby.vue](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/views/lobby/Lobby.vue)

2.1.3 社交系统

功能	状态	实现文件
单聊（文字/语音）		[ChatWindow.vue](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/views/im/ChatWindow.vue)
群聊		[GroupChatWindow.vue](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/views/im/GroupChatWindow.vue)
已读回执		[useChatWebSocket.js](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/composables/useChatWebSocket.js)
好友列表		[FriendList.vue](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/views/im/FriendList.vue)
好友申请		[FriendApply.vue](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/views/im/FriendApply.vue)
语音录制/播放		[VoiceRecorder.vue](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/components/VoiceRecorder.vue)

2.1.4 用户体验

功能	状态	实现文件
暗色/亮色主题		[ThemeToggle.vue](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/components/ThemeToggle.vue)
中英文国际化		[i18n/](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/i18n/)
PC/移动端响应式		[Room.vue](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/views/room/Room.vue)
新手引导		[OnboardingGuide.vue](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/components/OnboardingGuide.vue)
阶段过渡动画		[PhaseTransition.vue](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/components/PhaseTransition.vue)
阶段摘要卡片		[PhaseSummaryCard.vue](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/components/PhaseSummaryCard.vue)
角色揭示弹窗		[RoleRevealModal.vue](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/views/game/RoleRevealModal.vue)
统一倒计时组件		[GameTimer.vue](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/components/GameTimer.vue)
成就系统		[AchievementBadge.vue](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/components/AchievementBadge.vue)
排行榜		[Leaderboard.vue](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/components/Leaderboard.vue)
键盘快捷键		Room.vue
无障碍支持		全局 SCSS

2.2 v1.0 待优化项

优化项	优先级	说明
roomStore 状态拆分	中	当前 50+ 字段，建议拆分为 roomGame/roomVote/roomChat
构建包体积优化	中	element-vendor chunk 超过 1MB，需按需引入
错误监控接入	高	接入 Sentry，捕获运行时错误
用户行为埋点	高	关键路径埋点，支撑数据驱动决策

三、v1.1 社交增强版

目标：强化社交属性，提升留存率

3.1 功能清单

3.1.1 好友系统增强

功能	说明	技术方案
游戏内一键加好友	对局结束后快速添加队友/对手	GameResult 页面添加好友按钮，调用 IM API
好友在线状态	实时显示好友在线/游戏中状态	WebSocket 推送 `user_status_update`
好友邀请组局	向在线好友发送组局邀请	IM 消息类型扩展 `game_invite`

3.1.2 观战模式

功能	说明	技术方案
观战入口	大厅可加入进行中的房间观战	新增 `spectator` 角色，只读 WebSocket
观战视角	查看公共信息（发言、投票），不查看角色	WebSocket 消息过滤
弹幕互动	观战者可发送弹幕	复用 room_chat 通道，新增 `spectator_chat` 类型

3.1.3 对局回放

功能	说明	技术方案
对局记录保存	后端记录每局完整事件流	数据库新增 `game_record_detail` 表
回放播放器	前端按时间轴回放对局	新增 ReplayPlayer 组件，解析事件序列
分享对局	生成回放链接分享	短链服务 + 回放页面

3.1.4 语音房优化

功能	说明	技术方案
WebRTC 语音质量提升	降噪、回声消除	WebRTC AudioProcessing 配置
语音房模式	游戏外语音聊天室	复用 [VoiceChannel.vue](file:///Users/zhanxuewei/Downloads/code/ai/game-wolf-ui/src/components/VoiceChannel.vue)
说话指示	实时显示谁在说话	WebRTC 音量检测 + UI 动画

3.2 v1.1 关键指标

指标	目标
次日留存率	> 35%
好友添加率	> 20%
观战功能使用率	> 15%
对局回放查看率	> 10%

四、v1.2 玩法扩展版

目标：丰富游戏内容，提升可玩性

4.1 功能清单

4.1.1 新角色上线

角色	阵营	技能	技术方案
白痴	好人	被投票出局时翻牌免死，后续无投票权	GameState 新增 `idiotRevealed` 字段
丘比特	好人	首夜指定两人为情侣，一方死亡另一方殉情	GameState 新增 `couplePlayers` 字段
混血儿	独立	附身一名玩家，附身对象死亡则混血儿胜	全新胜负判定逻辑

4.1.2 自定义规则

功能	说明	技术方案
房主配置角色	自由选择角色种类和数量	创建房间 API 扩展 `roleConfig` 参数
技能规则开关	如"女巫不可自救"、“守卫不可连守”	GameState 新增 `ruleConfig` 字段
发言时间配置	30s / 60s / 90s / 120s 可选	房间配置 `speechDuration` 参数化

4.1.3 快速模式

功能	说明	技术方案
8 人快速局	缩减角色配置（2 狼 + 4 村 + 1 预 + 1 女）	预设 `gameMode: 'quick'`
缩短发言	每人 30 秒发言	`speechDuration: 30`
自动跳过等待	夜间行动 15 秒超时自动跳过	后端 `nightActionTimeout` 配置

4.1.4 警长系统

功能	说明	技术方案
警长竞选	白天发言前可选竞选警长	新增 `SHERIFF_ELECTION` 阶段
警徽流	警长死亡时传递警徽	GameState 新增 `sheriffSeat` / `sheriffWill` 字段
警长特权	投票算 1.5 票、决定发言顺序	投票计算逻辑扩展

4.2 v1.2 关键指标

指标	目标
人均日对局数	> 3 局
新角色使用率	> 40%
快速模式占比	> 30%
自定义规则使用率	> 25%

五、v2.0 赛事与社区版

目标：构建竞技生态和内容社区

5.1 功能清单

5.1.1 排位系统

功能	说明	技术方案
段位赛	青铜 → 白银 → 黄金 → 铂金 → 钻石 → 王者	数据库 `player_rank` 表
赛季机制	每 3 个月一个赛季，赛季末结算奖励	后端定时任务 `seasonReset`
匹配机制	根据段位 + MMR 值匹配	Redis Sorted Set 排队池
段位展示	个人中心/排行榜展示段位	Profile + Leaderboard 组件扩展

5.1.2 锦标赛模式

功能	说明	技术方案
64 人淘汰赛	单败淘汰制	后端 `tournament` 表 + 对阵图生成
瑞士轮	适合大型赛事	瑞士轮算法实现
赛事报名	付费/免费报名	支付系统集成
赛事直播	观战 + 解说	复用观战模式 + 解说工具

5.1.3 社区广场

功能	说明	技术方案
对局分享	分享高光时刻到社区	截图/回放链接分享
攻略讨论	图文攻略发布和讨论	新增 `community` 模块
精选内容	官方精选优质内容	后端 `featured_content` 表

5.1.4 主播/裁判模式

功能	说明	技术方案
专业解说工具	查看所有角色、实时数据面板	特殊权限 WebSocket 通道
观众投票	观众预测胜负	弹幕系统扩展
解说回放	带解说的对局回放	回放 + 音轨合成

5.2 v2.0 关键指标

指标	目标
DAU	> 10,000
排位参与率	> 30%
社区月活用户	> 5,000
赛事参赛人数	> 500/月

六、v2.5 AI 赋能版

目标：引入 AI 技术提升体验

6.1 功能清单

6.1.1 AI 陪玩增强

功能	说明	技术方案
多难度 AI	简单/普通/困难/专家	AI 策略引擎，不同决策算法
AI 发言生成	根据角色和局势生成合理发言	LLM 集成（如 GPT/通义千问）
AI 策略模拟	狼人 AI 协作击杀、好人 AI 逻辑推理	策略树 + 概率决策模型

6.1.2 AI 复盘助手

功能	说明	技术方案
对局分析	关键决策点标注	AI 分析事件流，识别关键节点
策略建议	针对玩家角色的策略建议	LLM 生成个性化建议
复盘报告	生成图文复盘报告	模板化报告 + AI 填充

6.1.3 智能反作弊

功能	说明	技术方案
场外信息检测	分析发言中是否包含场外信息	NLP 语义分析
行为模式分析	异常投票/发言模式检测	行为基线 + 偏差检测
自动举报	可疑行为自动标记	后端定时分析任务

6.1.4 语音转文字

功能	说明	技术方案
实时字幕	发言语音实时转文字	Web Speech API / 后端 ASR
历史记录	发言文字记录保存	语音 + 文字双格式存储
听障友好	听障用户可参与游戏	字幕展示 + 文字输入

6.2 v2.5 关键指标

指标	目标
AI 陪玩使用率	> 25%
复盘报告查看率	> 40%
反作弊准确率	> 90%
语音转文字使用率	> 15%

七、v3.0 开放平台版

目标：构建 UGC 生态

7.1 功能清单

7.1.1 地图/规则编辑器

功能	说明	技术方案
角色编辑器	自定义角色技能	可视化技能配置工具
规则编辑器	自定义游戏规则	规则 DSL + 解释器
场景编辑器	自定义游戏场景主题	前端主题配置工具

7.1.2 皮肤创作工具

功能	说明	技术方案
特效编辑器	用户上传自定义过渡动画	素材上传 + 预览工具
头像框设计	在线设计头像框	Canvas 编辑器
皮肤市场	用户间买卖自定义皮肤	虚拟货币 + 交易系统

7.1.3 创作者激励

功能	说明	技术方案
内容分成	优质 UGC 内容创作者获得收益分成	交易系统 + 分成规则
创作者认证	优质创作者官方认证	认证体系
创作工具	提供专业创作工具	在线编辑器 + 模板库

7.1.4 开放 API

功能	说明	技术方案
第三方赛事接入	允许第三方使用平台举办赛事	OAuth 2.0 + REST API
数据接口	提供脱敏的公共数据接口	API Gateway + 限流
插件系统	允许第三方开发游戏插件	插件 SDK + 沙箱执行

7.2 v3.0 关键指标

指标	目标
UGC 内容数	> 1,000
月活用户	> 100,000
创作者数量	> 500
开放 API 调用量	> 100 万次/月

八、技术演进规划

8.1 架构演进

阶段	当前	目标
状态管理	单一 roomStore（50+ 字段）	按领域拆分（roomGame/roomVote/roomChat）
通信层	WebSocket 双通道	WebSocket + SSE 混合方案
音视频	WebRTC P2P	SFU 服务端转发，支持多人语音房
缓存策略	Redis + 本地缓存	Redis 集群 + CDN 静态资源
部署	单机部署	容器化 + K8s + 灰度发布
监控	控制台日志	Sentry 错误监控 + Prometheus 指标 + 用户行为埋点

8.2 性能优化路线

阶段	优化项	预期效果
v1.1	Element Plus 按需引入	包体积减少 40%+
v1.1	图片 CDN + WebP 格式	首屏加载 < 2s
v1.2	Web Worker 处理重型计算	主线程不阻塞
v2.0	离屏渲染优化	复杂动画 60fps
v2.5	Service Worker 缓存	离线可用
v3.0	微前端拆分	多团队并行开发

8.3 基础设施建设

阶段	建设项	说明
v1.1	CI/CD 流水线	GitHub Actions 自动构建部署
v1.1	错误监控系统	Sentry 接入，实时捕获异常
v1.2	用户行为埋点	关键路径埋点，数据驱动决策
v2.0	A/B 测试平台	功能灰度发布 + 效果对比
v2.0	日志分析平台	ELK 日志收集分析
v2.5	性能监控	Prometheus + Grafana

九、关键指标与目标汇总

阶段	时间线	核心指标
v1.0	已完成	功能完整度 100%、崩溃率 < 0.5%
v1.1	+1 月	次日留存 > 35%、好友添加率 > 20%
v1.2	+2 月	人均日对局 > 3、新角色使用率 > 40%
v2.0	+3 月	DAU > 10,000、排位参与率 > 30%
v2.5	+5 月	AI 陪玩使用率 > 25%、付费率 > 8%
v3.0	+8 月	UGC 内容 > 1,000、月活 > 100,000

十、优先级评估矩阵

    高价值
      │
      │   v1.1 好友系统    v1.2 新角色
      │   v1.1 对局回放    v1.2 警长系统
      │
      │   v2.0 排位系统    v2.5 AI 陪玩
      │   v2.0 锦标赛      v2.5 AI 复盘
      │
──────┼──────────────────────────
      │
      │   v1.1 观战模式    v3.0 地图编辑器
      │   v1.2 快速模式    v3.0 皮肤市场
      │
      │   v3.0 开放 API    v2.5 语音转文字
      │
    低价值
      低难度 ←──────────────→ 高难度

优先开发顺序（高价值 + 低难度优先）：

v1.1 好友系统增强
v1.1 对局回放
v1.2 新角色上线
v1.2 警长系统
v2.0 排位系统
v2.0 锦标赛
v2.5 AI 陪玩
v2.5 AI 复盘

u4403975957514379 · 2026 年8 月 1 日 20:02

如果你不会记录就别记录了，写那么一大堆，好好思考一下，README.md 该怎么写。项目是个好项目，越写越臃肿，我想找个能否多AI一起玩那种功能看半天眼都花了，所以我不打算看了。