ui: 个人中心空状态插图优化,替换纯文字为图标动画 + CTA 按钮

提取可复用 EmptyState 组件,决策记录和收藏餐厅空状态
增加浮动图标、光晕动画和"去创建第一个房间"引导按钮
This commit is contained in:
2026-02-26 15:18:22 +08:00
parent 12279117f3
commit e86f643c26
2 changed files with 77 additions and 6 deletions
+19 -6
View File
@@ -20,7 +20,10 @@ import {
Eye,
EyeOff,
Zap,
ClipboardList,
Heart,
} from "lucide-react";
import EmptyState from "@/components/EmptyState";
import { getUserId, getCachedProfile, setCachedProfile, setCachedPreferences, logout } from "@/lib/userId";
import { getAvatarBg, AVATARS } from "@/lib/avatars";
import type { UserProfile, UserPreferences, DecisionRecord, FavoriteRecord, Restaurant } from "@/types";
@@ -534,9 +537,14 @@ export default function ProfilePage() {
<Loader2 size={18} className="animate-spin text-muted" />
</div>
) : history.length === 0 ? (
<p className="py-6 text-center text-xs text-muted">
</p>
<EmptyState
icon={ClipboardList}
title="还没有决策记录"
subtitle="创建房间开始一起选餐厅"
ctaLabel="去创建第一个房间"
onCta={() => router.push("/blindbox")}
color="purple"
/>
) : (
<div className="mt-3 flex flex-col gap-2">
{history.map((d) => (
@@ -612,9 +620,14 @@ export default function ProfilePage() {
<Loader2 size={18} className="animate-spin text-muted" />
</div>
) : favorites.length === 0 ? (
<p className="py-6 text-center text-xs text-muted">
</p>
<EmptyState
icon={Heart}
title="还没有收藏的餐厅"
subtitle="在匹配结果中收藏喜欢的店"
ctaLabel="去创建第一个房间"
onCta={() => router.push("/blindbox")}
color="amber"
/>
) : (
<div className="mt-3 flex flex-col gap-2">
{favorites.map((f) => {