Section 1 · 架构设计

新增文件结构与数据流向

新增文件（绿色）

app/ page.tsx ← 只加 openTool state + 点击处理，约 +20 行 components/tools/ ToolSheet.tsx ← 通用底部抽屉壳 + 4 种交互渲染 ToolResult.tsx ← 多维度结果卡片（可复用） ToolInput.tsx ← 输入阶段的表单组件（可复用） lib/ tool-data.ts ← 12 个工具的配置 + 静态数据 stores/user-store.ts ← 已有，读取 mbti/zodiac/birthday

数据流向

page.tsx

ToolTile 被点击
→ 设置 openToolId
→ 渲染 ToolSheet
→

ToolSheet.tsx

读取 tool-data[id]
判断工具类型
渲染输入 → 结果
→

tool-data.ts

工具配置对象
静态配对表
模板文本数组
↔

useUserStore

用户星座
MBTI 类型
生日信息

12 个工具按交互类型分组

🔀 配对型（2个）

  • ⭐ 星座配对
  • 🧠 MBTI 契合
选择器 A × 选择器 B → 配对表查询 → 多维分数

📋 测试型（3个）

  • 💖 恋爱人格
  • 🌡️ 暧昧温度
  • 🎂 缘分生日
4-5 道选择题 → 累计分数 → 类型/温度

✍️ 生成型（4个）

  • 💌 AI 情书
  • 💘 告白脚本
  • 🎬 心动剧本
  • 🌙 梦境解码
填写关键词 → 模板填空 → 文字结果

🔮 运势型（3个）

  • 🔮 塔罗占卜
  • 🌸 桃花运
  • 💑 虚拟恋人
动画交互（翻牌/抽签）→ 随机解读