feat: 匹配成功页体验优化 — 浮动操作栏、收藏、决赛引导
- 底部操作改为固定浮动栏,"再来一轮"和"换一批店"始终可见 - 结果卡片右上角新增收藏按钮,复用已有收藏 API - 非全员一致时"Top N 决赛"按钮上方增加引导文案 - 更新 ROADMAP 标记已完成项,移除低优先级条目
This commit is contained in:
+113
@@ -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,
|
RefreshCw,
|
||||||
Share2,
|
Share2,
|
||||||
Zap,
|
Zap,
|
||||||
|
Heart,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import { Restaurant, MatchType, RunnerUp, SceneType } from "@/types";
|
import { Restaurant, MatchType, RunnerUp, SceneType } from "@/types";
|
||||||
import { fireCelebration, playChime } from "@/lib/celebrate";
|
import { fireCelebration, playChime } from "@/lib/celebrate";
|
||||||
@@ -189,6 +190,8 @@ export default function MatchResult({
|
|||||||
const celebratedRef = useRef(false);
|
const celebratedRef = useRef(false);
|
||||||
const historySavedRef = useRef(false);
|
const historySavedRef = useRef(false);
|
||||||
const isUnanimous = matchType === "unanimous";
|
const isUnanimous = matchType === "unanimous";
|
||||||
|
const [favorited, setFavorited] = useState(false);
|
||||||
|
const [favLoading, setFavLoading] = useState(false);
|
||||||
|
|
||||||
const showToast = useCallback((msg: string) => {
|
const showToast = useCallback((msg: string) => {
|
||||||
setToast(msg);
|
setToast(msg);
|
||||||
@@ -229,6 +232,25 @@ export default function MatchResult({
|
|||||||
setShowShareCard(true);
|
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") {
|
if (matchType === "no_match") {
|
||||||
return <NoMatchResult onReset={onReset} resetting={resetting} />;
|
return <NoMatchResult onReset={onReset} resetting={resetting} />;
|
||||||
}
|
}
|
||||||
@@ -247,7 +269,7 @@ export default function MatchResult({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<motion.div
|
<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 }}
|
initial={{ opacity: 0 }}
|
||||||
animate={{ opacity: 1 }}
|
animate={{ opacity: 1 }}
|
||||||
transition={{ duration: 0.4 }}
|
transition={{ duration: 0.4 }}
|
||||||
@@ -314,11 +336,27 @@ export default function MatchResult({
|
|||||||
|
|
||||||
{/* Result card */}
|
{/* Result card */}
|
||||||
<motion.div
|
<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 }}
|
initial={{ y: 60, opacity: 0 }}
|
||||||
animate={{ y: 0, opacity: 1 }}
|
animate={{ y: 0, opacity: 1 }}
|
||||||
transition={{ type: "spring", stiffness: 180, damping: 18, delay: 0.5 }}
|
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] && (
|
{restaurant.images?.[0] && (
|
||||||
<img
|
<img
|
||||||
src={restaurant.images[0]}
|
src={restaurant.images[0]}
|
||||||
@@ -466,62 +504,56 @@ export default function MatchResult({
|
|||||||
</motion.div>
|
</motion.div>
|
||||||
)}
|
)}
|
||||||
</AnimatePresence>
|
</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>
|
</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>
|
</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
|
<ShareCardModal
|
||||||
open={showShareCard}
|
open={showShareCard}
|
||||||
onClose={() => setShowShareCard(false)}
|
onClose={() => setShowShareCard(false)}
|
||||||
|
|||||||
Reference in New Issue
Block a user