From 0f83e9c6ae23889190642f231e9d292186f68bbc Mon Sep 17 00:00:00 2001 From: kurihada Date: Thu, 26 Feb 2026 14:03:38 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8C=B9=E9=85=8D=E6=88=90=E5=8A=9F?= =?UTF-8?q?=E9=A1=B5=E4=BD=93=E9=AA=8C=E4=BC=98=E5=8C=96=20=E2=80=94=20?= =?UTF-8?q?=E6=B5=AE=E5=8A=A8=E6=93=8D=E4=BD=9C=E6=A0=8F=E3=80=81=E6=94=B6?= =?UTF-8?q?=E8=97=8F=E3=80=81=E5=86=B3=E8=B5=9B=E5=BC=95=E5=AF=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 底部操作改为固定浮动栏，"再来一轮"和"换一批店"始终可见 - 结果卡片右上角新增收藏按钮，复用已有收藏 API - 非全员一致时"Top N 决赛"按钮上方增加引导文案 - 更新 ROADMAP 标记已完成项，移除低优先级条目 --- ROADMAP.md | 113 ++++++++++++++++++++++++++ src/components/MatchResult.tsx | 140 ++++++++++++++++++++------------- 2 files changed, 199 insertions(+), 54 deletions(-) create mode 100644 ROADMAP.md diff --git a/ROADMAP.md b/ROADMAP.md new file mode 100644 index 0000000..4e19d46 --- /dev/null +++ b/ROADMAP.md @@ -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 或类似） diff --git a/src/components/MatchResult.tsx b/src/components/MatchResult.tsx index 2b0ccbe..e677175 100644 --- a/src/components/MatchResult.tsx +++ b/src/components/MatchResult.tsx @@ -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 ; } @@ -247,7 +269,7 @@ export default function MatchResult({ return ( + {isRegistered() && ( + + + + )} {restaurant.images?.[0] && ( )} + + {canNarrow && ( +
+

+ 还有 {runnerUpRestaurants.length} 家不相上下，再选一轮？ +

+ 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 }} + > + + {resetting ? "加载中..." : `Top ${narrowIds.length} 决赛`} + +
+ )} )} - - {/* Bottom actions */} - - {canNarrow ? ( - <> - 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 }} - > - - {resetting ? "加载中..." : `Top ${narrowIds.length} 决赛`} - - 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" - }`} - > - - 换一批店 - - - ) : ( - <> - - - {resetting ? "重置中..." : "再来一轮"} - - 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" - }`} - > - - 换一批店 - - - )} - + {/* Floating bottom bar */} + +
+ 不满意？ + + + {resetting ? "重置中..." : "再来一轮"} + + 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 }} + > + + 换一批店 + +
+ + setShowShareCard(false)}