logo
0
0
WeChat Login
liqinglin<1562193678@qq.com.com>
优化

决断魔盒(Decision Box)

一个偏赛博夜场风格的随机决策与聚会互动产品。当前已完成主框架与 Phase 1(10 工具入口注册与路由打通)。

项目功能简介

当前可完成:

  1. 三栏 Tab 主框架:魔盒大厅规则广场玩家档案
  2. 魔盒大厅:三大分类入口和“摇一摇”主视觉。
  3. 规则广场:规则卡组列表,可进入规则库详情页。
  4. 规则库详情:封面、标签、统计、规则卡预览与一键装载按钮。
  5. 规则卡详情:单条规则完整展示与单条装载入口。
  6. 玩家档案:Tab 内展示账号摘要、真实统计、自定义规则库入口、创建规则库入口、音效与震动开关;登录注册和资料编辑在独立账号页完成。
  7. 黑照炸弹库:支持压缩上传照片、展示、删除,单人最多 30 张,文件存 COS。
  8. 微信小程序环境:支持 code2Session 登录,并使用微信授权昵称/头像完成注册登录和资料更新。
  9. 既有后端能力继续使用并补齐账号能力(认证、规则管理、规则库分享、个人资料更新等)。
  10. 极速决策新增两个可用玩法:3D 命运骰子(1-3 颗可调)和 命运硬币(正反文案可内联编辑)。
  11. 派对破冰新增可用玩法:幸运大转盘(命运规则 / 天选之子双模式切换)。
  12. 派对破冰新增可用玩法:喝酒摇骰子(按参考实现保留主题切换、音效、摇盅和开盅交互)。
  13. Phase 1 完成:首页固定 10 个工具入口、统一注册表、未开放入口统一“敬请期待”兜底页。
  14. 新增可用玩法:指尖选择 (Pick Me),支持多人同屏长按、轮转高亮、随机锁定与结果爆发动效。
  15. 完成账号注册登录与个人中心真实数据接入,支持资料编辑与登出。
  16. 将登录注册与资料编辑迁出 Tab 个人中心,新增独立账号页承载表单操作。
  17. 新增可用玩法:随机卡牌 (Random Card),支持规则库加载、扇形滑动浏览、选中退场与 3D 翻牌揭晓。
  18. 新增“我的自定义规则库”页面,并将规则广场列表抽为公共组件复用。
  19. 移除旧规则库工作台,替换为按数据库字段设计的“创建规则库”页面,并支持封面上传到 COS。
  20. 规则库详情页新增“新建规则 / 搜索添加”入口,作者可直接补充规则并自动加入当前规则库。
  21. 搜索添加规则页新增难度、亲密度、场景、关系和“仅看收藏”筛选;自己创建的规则默认收藏且不可取消。

技术架构

项目采用同仓前后端结构:

  1. 前端(Taro + React + Tailwind CSS + Framer Motion + Lucide React)
  • 新增页面:src/pages/rulessrc/pages/profilesrc/pages/library-detailsrc/pages/rule-detail
  • 新增页面:src/pages/quick-dicesrc/pages/quick-coin
  • 新增页面:src/pages/quick-card
  • 新增页面:src/pages/lucky-wheel(双模式大转盘)
  • 新增页面:src/pages/drink-dice(按参考实现直移植的喝酒摇骰子)
  • 新增页面:src/pages/coming-soonsrc/pages/quick-listsrc/pages/truth-daresrc/pages/draw-strawssrc/pages/bomb-defusalsrc/pages/kings-gamesrc/pages/undercover
  • 新增能力:src/features/tools/registry.ts + src/features/tools/navigation.ts 统一管理工具入口与跳转行为
  • 动效能力:framer-motion 用于指尖选择页的环形呼吸、轮转高亮与结果冲击波
  • 重写页面:src/pages/index
  • 通过 src/app.config.ts 配置 3 个 Tab 与详情页路由
  1. 后端(NestJS + Prisma + PostgreSQL)
  • 目录:server/
  • 模块:认证、用户、规则、规则库、举报、审核
  • 认证增强:新增用户名密码注册登录、微信 code2Session 登录、JWT 鉴权下的个人资料与主页统计读取
  • 文件能力:新增图片压缩上传、黑照炸弹库管理与腾讯云 COS 存储
  • 规则库创建:支持标题、描述、封面、主色调、兼容引擎、标签、公开状态与自动分享码
  • 规则库编辑补充:支持作者从详情页新建规则或搜索已有规则并直接加入当前规则库
  • 规则搜索增强:支持多维筛选、收藏筛选,以及基于 rules.created_by 的“自建规则默认收藏”逻辑
  1. 设计资源
  • Stitch 项目:10126267611123790519
  • 已下载素材:docs/stitch-assets/
  • 极速决策页面素材:docs/stitch/coin-screen.*docs/stitch/dice-screen.*
  • 大转盘页面素材:docs/stitch-assets/wheel/*.pngdocs/stitch-assets/wheel/*.html

本地运行方法

前端

  1. 安装依赖:
  • pnpm install
  1. 启动前端:
  • pnpm dev:h5

后端

  1. 安装依赖:
  • cd server && npm install
  1. 生成 Prisma Client:
  • npm run prisma:generate
  1. 启动后端:
  • npm run start:dev
  1. 配置环境变量:
  • 复制 server/.env.exampleserver/.env
  • 填入微信小程序 WX_APPID / WX_SECRET
  • 填入腾讯云 COS 的 COS_SECRET_ID / COS_SECRET_KEY / COS_BUCKET / COS_REGION
  • 可选设置 SNOWFLAKE_MACHINE_ID(默认 1),用于单机雪花 ID 发号

后端默认地址:http://localhost:3001/api

部署方法和命令

  1. 一键起整套服务:
  • docker compose up --build
  1. 数据库脚本(如需手动执行):
  • psql "postgresql://<user>:<password>@<host>:5432/truth_or_dare" -f docs/sql/truth_or_dare.pg.sql
  • psql "postgresql://<user>:<password>@<host>:5432/truth_or_dare" -f docs/sql/truth_or_dare_social.pg.sql
  • psql "postgresql://<user>:<password>@<host>:5432/truth_or_dare" -f docs/sql/truth_or_dare_independent_auth.pg.sql

测试方法和常用命令

  1. 前端单元测试:
  • pnpm test
  1. 后端测试(在 server 目录):
  • npm test

搜索记录

  • 2026-04-16:本次为现有项目产品化落地,未新增外部方案搜索。
  • 2026-04-18:README 已有搜索记录,本次按项目规则跳过 skills.sh / GitHub 方案搜索;设计参考来自指定 Stitch 项目页面。
  • 2026-04-19:README 已有搜索记录,本次继续按项目规则跳过 skills.sh / GitHub 方案搜索;实现基于指定 Stitch 屏幕与提示词。
  • 2026-04-19:README 已有搜索记录,本次继续按项目规则跳过 skills.sh / GitHub 方案搜索;“幸运大转盘”实现基于指定 Stitch 四张页面(含联机态)。
  • 2026-04-20:README 已有搜索记录,本次继续按项目规则跳过 skills.sh / GitHub 方案搜索;Phase 1 执行按现有 .planning 文档落地。
  • 2026-04-21:README 已有搜索记录,本次继续按项目规则跳过 skills.sh / GitHub 方案搜索;指尖选择按现有技术栈与交互动效要求实现。
  • 2026-04-22:README 已有搜索记录,本次继续按项目规则跳过 skills.sh / GitHub 方案搜索;喝酒摇骰子按 docs/drink-dice/ 可运行 React 参考直接移植,仅做兼容修正。
  • 2026-04-23:README 已有搜索记录,本次继续按项目规则跳过 skills.sh / GitHub 方案搜索;随机卡牌直接基于现有规则库接口与 Framer Motion 交互要求实现。
  • 2026-04-23:README 已有搜索记录,本次继续按项目规则跳过 skills.sh / GitHub 方案搜索;黑照炸弹库、微信登录与 COS 上传基于现有技术栈和官方能力接入。
  • 2026-04-23:README 已有搜索记录,本次继续按项目规则跳过 skills.sh / GitHub 方案搜索;主键方案直接采用单机雪花 ID,不新增 publicId 双字段。

重要实现记录

  • 2026-04-18:修复移动端全局显示比例与 Tab 图标路径问题(H5 设计宽度统一为 390,Tab 图标路径使用 ./assets/...,并替换为有效图标文件)。
  • 2026-04-18:新增规则库详情页与规则卡详情页,已下载 Stitch 参考文件 library-detail-ref.png/.html 并完成页面还原。
  • 2026-04-19:新增“命运硬币 - 赛博版”和“3D 命运骰子 - 优化版”两个玩法页,并接通大厅卡片跳转。
  • 2026-04-19:新增“幸运大转盘”页面,完成双模式切换、动态 SVG 扇区、规则导入态与联机邀请态,并接通大厅入口。
  • 2026-04-21:重构 draw-straws 为「指尖选择(Pick Me)」完整玩法页,完成多点触控监听、2 秒自动触发轮转、3-5 秒随机锁定、淘汰收缩与中奖冲击波。
  • 2026-04-22:将 docs/drink-dice/ 参考页直接移植为“喝酒摇骰子”页面,保留双主题、音效、摇盅和开盅交互,并为此补充 lucide-react 依赖。
  • 2026-04-23:个人中心补齐账号注册登录、真实统计、资料编辑与本地偏好存储;后端新增用户名密码认证链路。
  • 2026-04-23:按交互约束将登录注册与资料编辑迁出 Tab,新增独立账号页,并修正输入框提示词与输入内容左对齐。
  • 2026-04-23:新增“随机卡牌”页面,完成规则库导入、卡牌扇形浏览、选中后其余卡退场和中间 3D 翻牌揭晓。
  • 2026-04-23:补齐黑照炸弹库页面、头像上传、微信小程序昵称头像授权与 COS 存储链路。
  • 2026-04-23:个人中心将“收藏规则库”替换为“自定义规则库”,新增本人创建规则库页面,并抽离公共规则库卡片列表组件。
  • 2026-04-23:旧规则库工作台下线,改为规则库创建页;封面上传接入 COS,页面字段与 rule_decks 表保持一致。
  • 2026-04-23:规则库详情页新增作者专属“新建规则 / 搜索添加”入口,并新增两个独立页面承载规则创建与加入流程。
  • 2026-04-23:后端 users / rules / rule_decks / deck_rules_mapping / user_content_relations / user_bomb_photos 新写入记录切换为单机雪花 ID,并修正接口 BigInt 解析链路。
  • 2026-04-24:rules 表新增 created_by 字段;搜索添加规则页补齐收藏筛选和多维规则筛选,且自建规则默认收藏、不可取消。

已完成功能列表

  1. 三栏 Tab 主框架切换完成(首页/规则广场/玩家档案)。
  2. 按 Stitch 三张页面实现首版视觉结构。
  3. 新增规则库详情页与规则卡详情页,并接通规则广场跳转。
  4. 下载并归档 Stitch 截图与 HTML 到 docs/stitch-assets/
  5. 完成“3D 命运骰子”页面:支持 1-3 颗骰子切换、3D 旋转+弹跳动效、随机点数结果。
  6. 完成“命运硬币”页面:支持正反文字内联编辑、快速翻转+回弹动效、随机正反结果。
  7. 完成“幸运大转盘”页面:支持规则/选人双模式、动态角度扇区、联机邀请区与玩家头像堆叠。
  8. 完成 10 工具入口统一注册与导航:首页固定 10 入口,未就绪入口统一跳转占位页。
  9. 补齐 quick-list / truth-dare / bomb-defusal / kings-game / undercover 页面骨架并注册路由。
  10. 完成“指尖选择(Pick Me)”页面:支持多人同屏长按、多点触控霓虹环、轮转高亮与结果按钮弹出。
  11. 完成“喝酒摇骰子”页面:按参考实现保留 1-8 颗骰子调节、双主题切换、音效、摇盅与开盅交互。
  12. 完成个人中心账号体系:支持注册、登录、资料编辑、退出登录与真实统计同步。
  13. 完成“随机卡牌”页面:支持规则库导入、3-5 张扇形卡牌浏览、点击选中退场与翻牌揭晓。
  14. 完成黑照炸弹库:支持图片压缩上传、展示、删除、30 张上限控制与 COS 存储。
  15. 完成“我的自定义规则库”页面:个人中心可直接查看本人创建的规则库,列表与规则广场共用同一组件。
  16. 完成“创建规则库”页面:支持封面上传 / 预设切换、标签管理、兼容引擎选择、公开开关与真实分享码生成。
  17. 完成规则库详情页作者操作区:支持新建规则后自动入库,以及搜索现有规则后一键加入。
  18. 完成规则搜索页筛选与规则收藏锁定:支持按难度、亲密度、场景、关系和收藏状态筛选规则。

待办事项

  1. 进入 Phase 2:实现惩罚随机抽取、模式切换、去重窗口与硬过滤。
  2. 接通「指尖选择」结果按钮到规则库盲抽逻辑与平台震动能力。
  3. 把规则广场“装载到工具”接到真实玩法路由。
  4. 继续补黑照炸弹库的审核与分享链路。