Add user played work stats for puzzle and big fish

src/components/rpg-entry/RpgEntryHomeView.tsx

@@ -34,6 +34,8 @@ import type {
   PlatformBrowseHistoryEntry,
   ProfileDashboardCardKey,
   ProfileDashboardSummary,
+  ProfilePlayedWorkSummary,
+  ProfilePlayStatsResponse,
   ProfileRechargeCenterResponse,
   ProfileRechargeProduct,
   ProfileReferralInviteCenterResponse,
@@ -102,6 +104,12 @@ export interface RpgEntryHomeViewProps {
   onSearchPublicCode?: (keyword: string) => void | Promise<void>;
   isSearchingPublicCode?: boolean;
   onOpenProfileDashboardCard?: (cardKey: ProfileDashboardCardKey) => void;
+  profilePlayStats?: ProfilePlayStatsResponse | null;
+  isProfilePlayStatsOpen?: boolean;
+  isProfilePlayStatsLoading?: boolean;
+  profilePlayStatsError?: string | null;
+  onCloseProfilePlayStats?: () => void;
+  onOpenPlayedWork?: (work: ProfilePlayedWorkSummary) => void;
   onRechargeSuccess?: () => void | Promise<void>;
   createTabContent?: ReactNode;
 }
@@ -815,6 +823,21 @@ function formatDashboardUpdatedAt(value: string | null | undefined) {
   });
 }
 
+function formatPlayedWorkType(value: string | null | undefined) {
+  const normalizedValue = (value ?? '').toLowerCase();
+  if (normalizedValue === 'puzzle') {
+    return '拼图';
+  }
+  if (normalizedValue === 'big_fish' || normalizedValue === 'big-fish') {
+    return '大鱼';
+  }
+  return 'RPG';
+}
+
+function formatPlayedWorkId(work: ProfilePlayedWorkSummary) {
+  return work.profileId?.trim() || work.worldKey;
+}
+
 function buildPublicUserCode(user: AuthUser | null | undefined) {
   if (user?.publicUserCode?.trim()) {
     return user.publicUserCode.trim();
@@ -1264,6 +1287,108 @@ function ProfileReferralModal({
   );
 }
 
+function ProfilePlayedWorksModal({
+  stats,
+  isLoading,
+  error,
+  onClose,
+  onOpenWork,
+}: {
+  stats: ProfilePlayStatsResponse | null;
+  isLoading: boolean;
+  error: string | null;
+  onClose: () => void;
+  onOpenWork?: (work: ProfilePlayedWorkSummary) => void;
+}) {
+  const playedWorks = stats?.playedWorks ?? [];
+
+  return (
+    <div className="fixed inset-0 z-[80] flex items-center justify-center bg-black/48 px-3 py-5">
+      <div className="relative max-h-[min(92vh,42rem)] w-full max-w-[34rem] overflow-hidden rounded-[1.35rem] bg-white text-zinc-950 shadow-2xl">
+        <button
+          type="button"
+          onClick={onClose}
+          className="absolute right-3 top-3 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-white/80 text-[#ff4056] shadow-sm"
+          aria-label="关闭玩过作品"
+        >
+          ×
+        </button>
+        <div className="max-h-[min(92vh,42rem)] overflow-y-auto px-4 pb-5 pt-4 sm:px-5">
+          <div className="pr-10">
+            <div className="text-[10px] font-black tracking-[0.22em] text-[#ff4056]">
+              PLAYED
+            </div>
+            <div className="mt-1 text-2xl font-black">玩过作品</div>
+            <div className="mt-2 inline-flex items-center gap-2 rounded-full border border-rose-100 bg-rose-50 px-3 py-1.5 text-xs font-bold text-zinc-600">
+              <Clock3 className="h-3.5 w-3.5 text-[#ff4056]" />
+              <span>{formatCompactPlayTime(stats?.totalPlayTimeMs ?? 0)}</span>
+            </div>
+          </div>
+
+          {error ? (
+            <div className="mt-4 rounded-xl border border-rose-200 bg-rose-50 px-3 py-2 text-sm text-rose-700">
+              {error}
+            </div>
+          ) : null}
+
+          {isLoading ? (
+            <div className="mt-5 space-y-3">
+              {Array.from({ length: 4 }).map((_, index) => (
+                <div
+                  key={index}
+                  className="h-20 animate-pulse rounded-xl bg-zinc-100"
+                />
+              ))}
+            </div>
+          ) : playedWorks.length > 0 ? (
+            <div className="mt-5 space-y-3">
+              {playedWorks.map((work) => (
+                <button
+                  type="button"
+                  key={`${work.worldKey}:${work.lastPlayedAt}`}
+                  onClick={() => onOpenWork?.(work)}
+                  className="w-full rounded-2xl border border-zinc-200 bg-zinc-50 px-4 py-3 text-left transition hover:border-[#ff4056] hover:bg-white"
+                >
+                  <div className="flex min-w-0 items-start justify-between gap-3">
+                    <div className="min-w-0">
+                      <div className="line-clamp-1 text-base font-black text-zinc-950">
+                        {work.worldTitle}
+                      </div>
+                      {work.worldSubtitle ? (
+                        <div className="mt-1 line-clamp-1 text-xs text-zinc-500">
+                          {work.worldSubtitle}
+                        </div>
+                      ) : null}
+                    </div>
+                    <span className="shrink-0 rounded-full bg-rose-50 px-2.5 py-1 text-[11px] font-bold text-[#ff4056]">
+                      {formatPlayedWorkType(work.worldType)}
+                    </span>
+                  </div>
+                  <div className="mt-3 grid gap-2 text-xs text-zinc-500 sm:grid-cols-3">
+                    <span className="truncate">
+                      作品号 {formatPlayedWorkId(work)}
+                    </span>
+                    <span className="truncate">
+                      最近 {formatSnapshotTime(work.lastPlayedAt)}
+                    </span>
+                    <span className="truncate">
+                      时长 {formatCompactPlayTime(work.lastObservedPlayTimeMs)}
+                    </span>
+                  </div>
+                </button>
+              ))}
+            </div>
+          ) : (
+            <div className="mt-5 rounded-xl border border-zinc-200 bg-zinc-50 px-4 py-4 text-sm text-zinc-600">
+              暂无玩过作品
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export function RpgEntryHomeView({
   activeTab,
   onTabChange,
@@ -1288,6 +1413,12 @@ export function RpgEntryHomeView({
   onSearchPublicCode,
   isSearchingPublicCode = false,
   onOpenProfileDashboardCard,
+  profilePlayStats = null,
+  isProfilePlayStatsOpen = false,
+  isProfilePlayStatsLoading = false,
+  profilePlayStatsError = null,
+  onCloseProfilePlayStats,
+  onOpenPlayedWork,
   onRechargeSuccess,
   createTabContent,
 }: RpgEntryHomeViewProps) {
@@ -2318,6 +2449,15 @@ export function RpgEntryHomeView({
             onSubmitRedeem={submitReferralInviteCode}
           />
         ) : null}
+        {isProfilePlayStatsOpen ? (
+          <ProfilePlayedWorksModal
+            stats={profilePlayStats}
+            isLoading={isProfilePlayStatsLoading}
+            error={profilePlayStatsError}
+            onClose={onCloseProfilePlayStats ?? (() => undefined)}
+            onOpenWork={onOpenPlayedWork}
+          />
+        ) : null}
       </div>
     );
   }
@@ -2422,6 +2562,15 @@ export function RpgEntryHomeView({
           onSubmitRedeem={submitReferralInviteCode}
         />
       ) : null}
+      {isProfilePlayStatsOpen ? (
+        <ProfilePlayedWorksModal
+          stats={profilePlayStats}
+          isLoading={isProfilePlayStatsLoading}
+          error={profilePlayStatsError}
+          onClose={onCloseProfilePlayStats ?? (() => undefined)}
+          onOpenWork={onOpenPlayedWork}
+        />
+      ) : null}
     </div>
   );
 }