feat: 匹配成功页体验优化 — 浮动操作栏、收藏、决赛引导

- 底部操作改为固定浮动栏，"再来一轮"和"换一批店"始终可见 - 结果卡片右上角新增收藏按钮，复用已有收藏 API - 非全员一致时"Top N 决赛"按钮上方增加引导文案 - 更新 ROADMAP 标记已完成项，移除低优先级条目
2026-02-26 14:03:38 +08:00
parent afde70c98e
commit 0f83e9c6ae
2 changed files with 199 additions and 54 deletions
@@ -0,0 +1,113 @@
+# NoWhatever 产品优化路线图
+
+> 基于当前产品形态的全面审视，按优先级排列。  
+> 已完成项标记 ~~删除线~~。
+
+---
+
+## P0 — 核心闭环
+
+### ~~分享结果卡片~~（已完成）
+- ~~匹配成功 / 盲盒开奖后，一键生成品牌分享图~~
+- ~~支持保存图片、Web Share API 分享~~
+- ~~卡片包含餐厅/想法详情 + 二维码，形成增长飞轮~~
+
+### 匹配成功页补全后续动作
+- ~~一键导航提升为首要 CTA~~（已完成，导航按钮已作为 accent 主按钮置顶）
+- ~~加入一键打电话订位~~（已完成，`tel` 字段存在时展示拨号按钮）
+- "不满意？再来一轮" 提升可见度：从底部灰色文字改为固定在页面底部的半透明浮动条，带 `RotateCcw` 图标 + 引导文案
+- 加入"收藏这家"快捷操作（复用已有收藏 API `/api/user/favorite`，用心形图标放在结果卡片右上角）
+- 非全员一致时，在"Top N 决赛"按钮上方增加一句引导语（"还有 X 家不相上下，再选一轮？"），降低用户理解成本
+
+---
+
+## P1 — 体验提升
+
+### 单人也能用（Solo 模式）
+- 只有一人创建房间时，等待页面体验空白
+- 加入 Solo 模式：一人时自动随机推荐 / 转盘选择
+- 降低使用门槛，不依赖必须拉人
+
+### 盲盒想法互动
+- 对想法点赞 / 加权（增加被抽中概率）
+- 想法分类标签（美食 / 旅行 / 运动 / 奇葩挑战）
+- 抽中后打卡确认（拍照上传，形成回忆）
+- "本周契约执行率" 统计
+
+### PWA 支持
+- 添加 Web App Manifest，支持"添加到主屏幕"
+- Service Worker 离线缓存基础页面
+- `viewport-fit=cover` 适配刘海屏
+
+### 首次体验引导优化
+- 极速救场完成一轮后引导注册（"注册保存记录"）
+- 盲盒模式先展示 demo / 动画，让用户看到价值再引导注册
+- 统一两个模式的登录体验（目前极速救场不需登录，盲盒必须登录）
+
+---
+
+## P2 — 场景拓展 & 数据
+
+### 更多极速救场场景
+- 当前只有"吃饭"和"喝酒"两个场景
+- 可扩展：看电影、去公园、玩什么游戏、周末去哪
+- 复用同一套滑卡机制，接入不同 POI 数据源
+
+### 个人数据洞察
+- 你最常吃的菜系 Top 3
+- 你和 TA 的口味重合度
+- 月度决策次数趋势图
+- 在个人中心以简单可视化展示
+
+### 首页社交证明
+- "已帮助 X 对情侣做出 Y 次决定"（全局计数器）
+- 最近一次匹配的匿名动态（"3分钟前，一对情侣在北京选中了 XXX"）
+- 提升首页说服力，推动新用户转化
+
+### 盲盒开奖提醒
+- 周五下午推送"本周盲盒待抽 X 个想法"
+- 浏览器 Notification API 提醒
+- 房间内"设定开奖日"功能，到时间提醒所有成员
+
+---
+
+## P3 — 长期留存
+
+### 成就 & 激励系统
+- 决策次数徽章（"已拯救 10 次选择困难症"）
+- 连续使用天数
+- 盲盒投放数量成就
+- 在个人中心展示，增加用户粘性
+
+### 盲盒房间生命周期
+- 闲置 30 天自动归档
+- 支持删除 / 退出房间
+- 房间设置页（修改名称、管理成员、清空想法池）
+
+### 浅色模式
+- 当前暗色主题是唯一选项
+- 白天户外使用体验差
+- 跟随系统 / 手动切换
+
+### 空状态插图优化
+- 个人中心"还没有决策记录""还没有收藏"用纯文字展示
+- 替换为插图 + CTA 按钮（"去创建第一个房间"）
+
+---
+
+## 技术债务
+
+### 安全 & 稳定性
+- [ ] API 接口加入 Rate Limiting
+- [ ] 添加全局 Error Boundary
+- [ ] 历史记录 / 收藏列表加分页
+- [ ] 餐厅图片加载失败时的 fallback 占位
+
+### 性能优化
+- [ ] 餐厅图片使用 Next.js Image 组件优化
+- [ ] 加入 Loading Skeleton 替代纯 spinner
+- [ ] 盲盒房间过期策略（避免僵尸房间堆积）
+
+### 监控
+- [ ] 接入基础数据埋点（页面 PV、功能使用率）
+- [ ] 错误上报（Sentry 或类似）
@@ -19,6 +19,7 @@ import {
  RefreshCw,
  Share2,
  Zap,
+  Heart,
 } from "lucide-react";
 import { Restaurant, MatchType, RunnerUp, SceneType } from "@/types";
 import { fireCelebration, playChime } from "@/lib/celebrate";
@@ -189,6 +190,8 @@ export default function MatchResult({
  const celebratedRef = useRef(false);
  const historySavedRef = useRef(false);
  const isUnanimous = matchType === "unanimous";
+  const [favorited, setFavorited] = useState(false);
+  const [favLoading, setFavLoading] = useState(false);

  const showToast = useCallback((msg: string) => {
    setToast(msg);
@@ -229,6 +232,25 @@ export default function MatchResult({
    setShowShareCard(true);
  }, []);

+  const handleFavorite = useCallback(async () => {
+    if (!isRegistered() || favorited || favLoading) return;
+    setFavLoading(true);
+    try {
+      const res = await fetch("/api/user/favorite", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ userId, restaurant }),
+      });
+      if (res.ok) {
+        setFavorited(true);
+        showToast("已收藏");
+      }
+    } catch {
+      /* ignore */
+    }
+    setFavLoading(false);
+  }, [userId, restaurant, favorited, favLoading, showToast]);
+
  if (matchType === "no_match") {
    return <NoMatchResult onReset={onReset} resetting={resetting} />;
  }
@@ -247,7 +269,7 @@ export default function MatchResult({

  return (
    <motion.div
-      className="fixed inset-0 z-50 flex flex-col items-center overflow-y-auto bg-background px-6 py-10"
+      className="fixed inset-0 z-50 flex flex-col items-center overflow-y-auto bg-background px-6 pb-24 pt-10"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.4 }}
@@ -314,11 +336,27 @@ export default function MatchResult({

        {/* Result card */}
        <motion.div
-          className="mt-6 w-full overflow-hidden rounded-2xl bg-surface shadow-2xl ring-1 ring-border"
+          className="relative mt-6 w-full overflow-hidden rounded-2xl bg-surface shadow-2xl ring-1 ring-border"
          initial={{ y: 60, opacity: 0 }}
          animate={{ y: 0, opacity: 1 }}
          transition={{ type: "spring", stiffness: 180, damping: 18, delay: 0.5 }}
        >
+          {isRegistered() && (
+            <motion.button
+              onClick={handleFavorite}
+              disabled={favLoading}
+              className="absolute right-3 top-3 z-10 rounded-full bg-black/40 p-2 backdrop-blur-sm transition-colors hover:bg-black/60 disabled:opacity-50"
+              whileTap={{ scale: 0.85 }}
+              initial={{ scale: 0, opacity: 0 }}
+              animate={{ scale: 1, opacity: 1 }}
+              transition={{ delay: 0.7, type: "spring", stiffness: 300, damping: 15 }}
+            >
+              <Heart
+                size={18}
+                className={favorited ? "fill-red-500 text-red-500" : "text-white"}
+              />
+            </motion.button>
+          )}
          {restaurant.images?.[0] && (
            <img
              src={restaurant.images[0]}
@@ -466,62 +504,56 @@ export default function MatchResult({
                </motion.div>
              )}
            </AnimatePresence>
+
+            {canNarrow && (
+              <div className="mt-4 flex flex-col items-center gap-2">
+                <p className="text-xs text-muted">
+                  还有 {runnerUpRestaurants.length} 家不相上下，再选一轮？
+                </p>
+                <motion.button
+                  onClick={() => onNarrow(narrowIds)}
+                  disabled={resetting}
+                  className="flex w-full items-center justify-center gap-2 rounded-full bg-elevated px-8 py-3 text-sm font-bold text-gray-300 ring-1 ring-border transition-colors hover:bg-subtle disabled:opacity-50"
+                  whileTap={{ scale: 0.95 }}
+                >
+                  <Swords size={15} />
+                  {resetting ? "加载中..." : `Top ${narrowIds.length} 决赛`}
+                </motion.button>
+              </div>
+            )}
          </motion.div>
        )}
-
-        {/* Bottom actions */}
-        <motion.div
-          className="mt-5 flex w-full flex-col items-center gap-2.5"
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{ delay: 0.8 }}
-        >
-          {canNarrow ? (
-            <>
-              <motion.button
-                onClick={() => onNarrow(narrowIds)}
-                disabled={resetting}
-                className="flex w-full items-center justify-center gap-2 rounded-full bg-elevated px-8 py-3 text-sm font-bold text-gray-300 ring-1 ring-border transition-colors hover:bg-subtle disabled:opacity-50"
-                whileTap={{ scale: 0.95 }}
-              >
-                <Swords size={15} />
-                {resetting ? "加载中..." : `Top ${narrowIds.length} 决赛`}
-              </motion.button>
-              <motion.button
-                onClick={() => router.push("/")}
-                className={`flex items-center gap-1.5 text-sm font-medium underline underline-offset-2 hover:text-white ${
-                  isUnanimous ? "text-emerald-400" : "text-amber-400"
-                }`}
-              >
-                <RefreshCw size={13} />
-                换一批店
-              </motion.button>
-            </>
-          ) : (
-            <>
-              <motion.button
-                onClick={onReset}
-                disabled={resetting}
-                className="flex items-center justify-center gap-2 rounded-full bg-elevated px-8 py-3 text-sm font-bold text-gray-300 ring-1 ring-border transition-colors hover:bg-subtle disabled:opacity-50"
-                whileTap={{ scale: 0.95 }}
-              >
-                <RotateCcw size={14} className={resetting ? "animate-spin" : ""} />
-                {resetting ? "重置中..." : "再来一轮"}
-              </motion.button>
-              <motion.button
-                onClick={() => router.push("/")}
-                className={`flex items-center gap-1.5 text-sm font-medium underline underline-offset-2 hover:text-white ${
-                  isUnanimous ? "text-emerald-400" : "text-amber-400"
-                }`}
-              >
-                <RefreshCw size={13} />
-                换一批店
-              </motion.button>
-            </>
-          )}
-        </motion.div>
      </div>

+      {/* Floating bottom bar */}
+      <motion.div
+        className="fixed inset-x-0 bottom-0 z-10 border-t border-border/50 bg-background/80 backdrop-blur-xl"
+        initial={{ y: 60, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{ delay: 0.9, type: "spring", stiffness: 200, damping: 20 }}
+      >
+        <div className="mx-auto flex max-w-sm items-center gap-3 px-6 pb-6 pt-3">
+          <span className="shrink-0 text-xs text-muted">不满意？</span>
+          <motion.button
+            onClick={onReset}
+            disabled={resetting}
+            className="flex flex-1 items-center justify-center gap-1.5 rounded-full bg-elevated py-2.5 text-xs font-bold text-gray-300 ring-1 ring-border transition-colors hover:bg-subtle disabled:opacity-50"
+            whileTap={{ scale: 0.95 }}
+          >
+            <RotateCcw size={12} className={resetting ? "animate-spin" : ""} />
+            {resetting ? "重置中..." : "再来一轮"}
+          </motion.button>
+          <motion.button
+            onClick={() => router.push("/")}
+            className="flex flex-1 items-center justify-center gap-1.5 rounded-full bg-elevated py-2.5 text-xs font-bold text-gray-300 ring-1 ring-border transition-colors hover:bg-subtle"
+            whileTap={{ scale: 0.95 }}
+          >
+            <RefreshCw size={12} />
+            换一批店
+          </motion.button>
+        </div>
+      </motion.div>
+
      <ShareCardModal
        open={showShareCard}
        onClose={() => setShowShareCard(false)}