2598 lines
92 KiB
TypeScript
2598 lines
92 KiB
TypeScript
import {
|
||
Archive,
|
||
ArrowRight,
|
||
Bell,
|
||
BookOpen,
|
||
Camera,
|
||
ChevronRight,
|
||
Clock3,
|
||
Coins,
|
||
Copy,
|
||
Crown,
|
||
House,
|
||
LogIn,
|
||
MessageCircle,
|
||
Pencil,
|
||
Search,
|
||
Settings,
|
||
Sparkles,
|
||
Tags,
|
||
Ticket,
|
||
UserPlus,
|
||
UserRound,
|
||
} from 'lucide-react';
|
||
import {
|
||
type ComponentType,
|
||
type ReactNode,
|
||
useEffect,
|
||
useMemo,
|
||
useState,
|
||
} from 'react';
|
||
|
||
import type {
|
||
CustomWorldLibraryEntry,
|
||
PlatformBrowseHistoryEntry,
|
||
ProfileDashboardCardKey,
|
||
ProfileDashboardSummary,
|
||
ProfileWalletLedgerResponse,
|
||
ProfileRechargeCenterResponse,
|
||
ProfileRechargeProduct,
|
||
ProfileReferralInviteCenterResponse,
|
||
ProfileSaveArchiveSummary,
|
||
RedeemProfileReferralInviteCodeResponse,
|
||
} from '../../../packages/shared/src/contracts/runtime';
|
||
import type { HydratedSavedGameSnapshot } from '../../persistence/runtimeSnapshotTypes';
|
||
import type { AuthUser } from '../../services/authService';
|
||
import {
|
||
createRpgProfileRechargeOrder,
|
||
getRpgProfileRechargeCenter,
|
||
getRpgProfileReferralInviteCenter,
|
||
getRpgProfileWalletLedger,
|
||
redeemRpgProfileReferralInviteCode,
|
||
} from '../../services/rpg-entry/rpgProfileClient';
|
||
import type { CustomWorldProfile } from '../../types';
|
||
import { useAuthUi } from '../auth/AuthUiContext';
|
||
import { ResolvedAssetImage } from '../ResolvedAssetImage';
|
||
import { RpgEntryBrandLogo } from './RpgEntryBrandLogo';
|
||
import {
|
||
buildPlatformWorldTags,
|
||
describePlatformThemeLabel,
|
||
formatPlatformWorldTime,
|
||
isBigFishGalleryEntry,
|
||
isPuzzleGalleryEntry,
|
||
type PlatformPublicGalleryCard,
|
||
type PlatformWorldCardLike,
|
||
resolvePlatformWorldCoverImage,
|
||
resolvePlatformWorldLeadPortrait,
|
||
} from './rpgEntryWorldPresentation';
|
||
|
||
export type PlatformHomeTab =
|
||
| 'home'
|
||
| 'category'
|
||
| 'create'
|
||
| 'saves'
|
||
| 'profile';
|
||
export interface RpgEntryHomeViewProps {
|
||
activeTab: PlatformHomeTab;
|
||
onTabChange: (tab: PlatformHomeTab) => void;
|
||
hasSavedGame: boolean;
|
||
savedSnapshot: HydratedSavedGameSnapshot | null;
|
||
saveEntries: ProfileSaveArchiveSummary[];
|
||
saveError: string | null;
|
||
featuredEntries: PlatformPublicGalleryCard[];
|
||
latestEntries: PlatformPublicGalleryCard[];
|
||
myEntries: CustomWorldLibraryEntry<CustomWorldProfile>[];
|
||
historyEntries: PlatformBrowseHistoryEntry[];
|
||
profileDashboard: ProfileDashboardSummary | null;
|
||
isLoadingPlatform: boolean;
|
||
isLoadingDashboard: boolean;
|
||
isResumingSaveWorldKey: string | null;
|
||
platformError: string | null;
|
||
dashboardError: string | null;
|
||
onContinueGame: (snapshot?: HydratedSavedGameSnapshot | null) => void;
|
||
onResumeSave: (entry: ProfileSaveArchiveSummary) => void;
|
||
onOpenCreateWorld: () => void;
|
||
onOpenCreateTypePicker: () => void;
|
||
onOpenGalleryDetail: (entry: PlatformPublicGalleryCard) => void;
|
||
onOpenLibraryDetail: (
|
||
entry: CustomWorldLibraryEntry<CustomWorldProfile>,
|
||
) => void;
|
||
onDeleteLibraryEntry?: (
|
||
entry: CustomWorldLibraryEntry<CustomWorldProfile>,
|
||
) => void;
|
||
deletingLibraryEntryId?: string | null;
|
||
onSearchPublicCode?: (keyword: string) => void | Promise<void>;
|
||
isSearchingPublicCode?: boolean;
|
||
onOpenProfileDashboardCard?: (cardKey: ProfileDashboardCardKey) => void;
|
||
onRechargeSuccess?: () => void | Promise<void>;
|
||
createTabContent?: ReactNode;
|
||
}
|
||
|
||
const PANEL_SURFACE_CLASS = 'platform-surface platform-surface--soft';
|
||
const HERO_SURFACE_CLASS =
|
||
'platform-surface platform-surface--hero platform-interactive-card min-w-0';
|
||
const MOBILE_PAGE_STAGE_CLASS =
|
||
'platform-page-stage platform-remap-surface min-w-0 space-y-4 overflow-hidden pb-2';
|
||
const DESKTOP_PAGE_STAGE_CLASS =
|
||
'platform-page-stage platform-remap-surface min-w-0 space-y-5 pb-4';
|
||
const DESKTOP_LAYOUT_QUERY = '(min-width: 1024px)';
|
||
const PLATFORM_HOME_TABS: PlatformHomeTab[] = [
|
||
'home',
|
||
'category',
|
||
'create',
|
||
'saves',
|
||
'profile',
|
||
];
|
||
type ProfilePopupPanel = 'invite' | 'redeem' | 'community';
|
||
|
||
function usePlatformDesktopLayout() {
|
||
const [isDesktopLayout, setIsDesktopLayout] = useState(() => {
|
||
if (
|
||
typeof window === 'undefined' ||
|
||
typeof window.matchMedia !== 'function'
|
||
) {
|
||
return false;
|
||
}
|
||
|
||
return window.matchMedia(DESKTOP_LAYOUT_QUERY).matches;
|
||
});
|
||
|
||
useEffect(() => {
|
||
if (
|
||
typeof window === 'undefined' ||
|
||
typeof window.matchMedia !== 'function'
|
||
) {
|
||
return;
|
||
}
|
||
|
||
const mediaQuery = window.matchMedia(DESKTOP_LAYOUT_QUERY);
|
||
const updateLayout = (event?: MediaQueryListEvent) => {
|
||
setIsDesktopLayout(event?.matches ?? mediaQuery.matches);
|
||
};
|
||
|
||
updateLayout();
|
||
|
||
// 平台页只挂载当前断点外壳，避免隐藏的移动端/桌面端内容重复抢占查询。
|
||
if (typeof mediaQuery.addEventListener === 'function') {
|
||
mediaQuery.addEventListener('change', updateLayout);
|
||
return () => mediaQuery.removeEventListener('change', updateLayout);
|
||
}
|
||
|
||
mediaQuery.addListener(updateLayout);
|
||
return () => mediaQuery.removeListener(updateLayout);
|
||
}, []);
|
||
|
||
return isDesktopLayout;
|
||
}
|
||
|
||
function ResolvedAssetBackdrop({
|
||
src,
|
||
alt,
|
||
className,
|
||
ariaHidden = false,
|
||
}: {
|
||
src?: string | null;
|
||
alt: string;
|
||
className: string;
|
||
ariaHidden?: boolean;
|
||
}) {
|
||
return (
|
||
<ResolvedAssetImage
|
||
src={src}
|
||
alt={alt}
|
||
aria-hidden={ariaHidden}
|
||
className={className}
|
||
/>
|
||
);
|
||
}
|
||
|
||
function SectionHeader({ title, detail }: { title: string; detail: string }) {
|
||
return (
|
||
<div className="mb-3">
|
||
<div className="text-[10px] font-semibold tracking-[0.26em] text-[var(--platform-text-soft)]">
|
||
{detail}
|
||
</div>
|
||
<div className="mt-1 text-base font-semibold text-[var(--platform-text-strong)]">
|
||
{title}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function PublicCodeSearchBar({
|
||
value,
|
||
onChange,
|
||
onSubmit,
|
||
isSearching,
|
||
className,
|
||
}: {
|
||
value: string;
|
||
onChange: (value: string) => void;
|
||
onSubmit: () => void;
|
||
isSearching: boolean;
|
||
className?: string;
|
||
}) {
|
||
return (
|
||
<div
|
||
className={`platform-desktop-search flex min-w-0 items-center gap-3 px-4 py-3 text-[var(--platform-text-soft)] ${className ?? ''}`}
|
||
>
|
||
<Search className="h-4 w-4 shrink-0" />
|
||
<input
|
||
value={value}
|
||
onChange={(event) => onChange(event.target.value)}
|
||
onKeyDown={(event) => {
|
||
if (event.key === 'Enter') {
|
||
event.preventDefault();
|
||
onSubmit();
|
||
}
|
||
}}
|
||
placeholder="输入 SY / CW / BF / PZ 编号"
|
||
className="w-full min-w-0 bg-transparent text-sm text-[var(--platform-text-strong)] outline-none placeholder:text-[var(--platform-text-soft)]"
|
||
/>
|
||
<button
|
||
type="button"
|
||
onClick={onSubmit}
|
||
disabled={!value.trim() || isSearching}
|
||
className="shrink-0 text-xs font-semibold text-[var(--platform-text-soft)] disabled:opacity-50"
|
||
>
|
||
{isSearching ? '搜索中' : '搜索'}
|
||
</button>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function EmptyShelf({ text }: { text: string }) {
|
||
return (
|
||
<div
|
||
className={`${PANEL_SURFACE_CLASS} min-w-0 rounded-[1.35rem] px-4 py-3 text-sm leading-6 text-[var(--platform-text-base)]`}
|
||
>
|
||
{text}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function SaveArchivePreview({
|
||
entry,
|
||
label,
|
||
className,
|
||
}: {
|
||
entry: ProfileSaveArchiveSummary;
|
||
label: string;
|
||
className: string;
|
||
}) {
|
||
return (
|
||
<div
|
||
aria-hidden="true"
|
||
className={`platform-remap-surface relative shrink-0 overflow-hidden rounded-[1.35rem] border border-white/12 bg-black/18 shadow-[var(--platform-desktop-hover-shadow)] ${className}`}
|
||
>
|
||
{entry.coverImageSrc ? (
|
||
<ResolvedAssetBackdrop
|
||
src={entry.coverImageSrc}
|
||
alt=""
|
||
className="absolute inset-0 h-full w-full object-cover"
|
||
/>
|
||
) : (
|
||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(255,255,255,0.18),transparent_34%),linear-gradient(145deg,rgba(255,94,125,0.92),rgba(255,150,116,0.88))]" />
|
||
)}
|
||
<div className="absolute inset-0 bg-[var(--platform-card-overlay-soft)]" />
|
||
<div className="absolute inset-x-0 bottom-0 px-2.5 py-2">
|
||
<span className="inline-flex max-w-full items-center rounded-full border border-white/15 bg-black/24 px-2.5 py-1 text-[9px] font-semibold tracking-[0.14em] text-[var(--platform-text-strong)]">
|
||
{label}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function WorldCard({
|
||
entry,
|
||
badge,
|
||
metaLabel,
|
||
onClick,
|
||
className,
|
||
}: {
|
||
entry: PlatformWorldCardLike;
|
||
badge: string;
|
||
metaLabel: string;
|
||
onClick: () => void;
|
||
className?: string;
|
||
}) {
|
||
const coverImage = resolvePlatformWorldCoverImage(entry);
|
||
const leadPortrait = resolvePlatformWorldLeadPortrait(entry);
|
||
const tags = [
|
||
...new Set(
|
||
buildPlatformWorldTags(entry)
|
||
.map((tag) => tag.trim())
|
||
.filter(Boolean),
|
||
),
|
||
].slice(0, 3);
|
||
|
||
return (
|
||
<button
|
||
type="button"
|
||
onClick={onClick}
|
||
className={`platform-surface platform-interactive-card relative flex h-[15rem] w-[min(15.25rem,78vw)] shrink-0 flex-col overflow-hidden px-3.5 py-3.5 text-left ${className ?? ''}`}
|
||
>
|
||
{coverImage ? (
|
||
<ResolvedAssetBackdrop
|
||
src={coverImage}
|
||
alt={entry.worldName}
|
||
className="absolute inset-0 h-full w-full object-cover opacity-40"
|
||
/>
|
||
) : null}
|
||
{leadPortrait ? (
|
||
<ResolvedAssetImage
|
||
src={leadPortrait}
|
||
alt=""
|
||
aria-hidden="true"
|
||
className="absolute bottom-2 right-2 h-24 w-24 object-contain opacity-25"
|
||
/>
|
||
) : null}
|
||
<div className="absolute inset-0 bg-[var(--platform-card-overlay-strong)]" />
|
||
<div className="relative z-10 flex h-full flex-col">
|
||
<div className="flex items-start justify-between gap-3">
|
||
<span className="platform-pill platform-pill--warm max-w-[8.5rem] truncate">
|
||
{badge}
|
||
</span>
|
||
<span className="platform-pill platform-pill--neutral px-2.5">
|
||
{metaLabel}
|
||
</span>
|
||
</div>
|
||
<div className="mt-auto">
|
||
<div className="line-clamp-1 text-xl font-black text-[var(--platform-text-strong)]">
|
||
{entry.worldName}
|
||
</div>
|
||
{entry.subtitle ? (
|
||
<div className="mt-1 line-clamp-1 text-[11px] tracking-[0.16em] text-[color:color-mix(in_srgb,var(--platform-text-base)_85%,transparent)]">
|
||
{entry.subtitle}
|
||
</div>
|
||
) : null}
|
||
<div className="mt-2 line-clamp-2 text-xs leading-5 text-[color:color-mix(in_srgb,var(--platform-text-base)_90%,transparent)]">
|
||
{entry.summaryText || '等待补充世界摘要。'}
|
||
</div>
|
||
<div className="mt-3 flex flex-wrap gap-2">
|
||
{tags.length > 0 ? (
|
||
tags.map((tag, index) => (
|
||
<span
|
||
key={`world-tag-${index}-${tag || 'empty'}`}
|
||
className="platform-pill platform-pill--neutral px-2.5"
|
||
>
|
||
{tag}
|
||
</span>
|
||
))
|
||
) : (
|
||
<span className="platform-pill platform-pill--neutral px-2.5">
|
||
{describePublicGalleryCardKind(entry)}
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
);
|
||
}
|
||
|
||
function CreationLibraryCard({
|
||
entry,
|
||
onClick,
|
||
onDelete,
|
||
isDeleting = false,
|
||
}: {
|
||
entry: CustomWorldLibraryEntry<CustomWorldProfile>;
|
||
onClick: () => void;
|
||
onDelete?: () => void;
|
||
isDeleting?: boolean;
|
||
}) {
|
||
const coverImage = resolvePlatformWorldCoverImage(entry);
|
||
const leadPortrait = resolvePlatformWorldLeadPortrait(entry);
|
||
const statusLabel = entry.visibility === 'published' ? '已发布' : '草稿';
|
||
const metaLabel =
|
||
entry.visibility === 'published'
|
||
? formatPlatformWorldTime(entry.publishedAt)
|
||
: '仅自己可见';
|
||
const primaryTag =
|
||
buildPlatformWorldTags(entry)
|
||
.map((tag) => tag.trim())
|
||
.filter(Boolean)[0] ?? describePlatformThemeLabel(entry.themeMode);
|
||
const summaryText =
|
||
entry.summaryText || entry.subtitle || '继续补完这个世界的设定与游玩入口。';
|
||
|
||
return (
|
||
<button
|
||
type="button"
|
||
onClick={onClick}
|
||
className="platform-surface platform-interactive-card relative flex min-h-[13rem] w-full min-w-0 flex-col overflow-hidden px-3 py-3 text-left sm:min-h-[14rem] sm:px-3.5 sm:py-3.5"
|
||
>
|
||
{coverImage ? (
|
||
<ResolvedAssetBackdrop
|
||
src={coverImage}
|
||
alt={entry.worldName}
|
||
className="absolute inset-0 h-full w-full object-cover opacity-38"
|
||
/>
|
||
) : null}
|
||
{leadPortrait ? (
|
||
<ResolvedAssetImage
|
||
src={leadPortrait}
|
||
alt=""
|
||
aria-hidden="true"
|
||
className="absolute bottom-1.5 right-1.5 h-16 w-16 object-contain opacity-24 sm:h-20 sm:w-20"
|
||
/>
|
||
) : null}
|
||
<div className="absolute inset-0 bg-[var(--platform-card-overlay-strong)]" />
|
||
{onDelete ? (
|
||
<button
|
||
type="button"
|
||
onClick={(event) => {
|
||
event.stopPropagation();
|
||
onDelete();
|
||
}}
|
||
disabled={isDeleting}
|
||
className="platform-button platform-button--danger absolute right-2 top-2 z-20 min-h-0 rounded-full px-2.5 py-1 text-[10px] disabled:cursor-not-allowed disabled:opacity-60"
|
||
>
|
||
{isDeleting ? '删除中' : '删除'}
|
||
</button>
|
||
) : null}
|
||
<div className="relative z-10 flex h-full min-w-0 flex-col">
|
||
<div className="flex min-w-0 flex-wrap items-center gap-1.5">
|
||
<span
|
||
className={`inline-flex items-center rounded-full border px-2 py-1 text-[10px] font-semibold tracking-[0.12em] ${
|
||
entry.visibility === 'published'
|
||
? 'border-emerald-300/25 bg-emerald-500/12 text-emerald-50'
|
||
: 'border-amber-300/25 bg-amber-500/12 text-amber-50'
|
||
}`}
|
||
>
|
||
{statusLabel}
|
||
</span>
|
||
<span className="inline-flex min-w-0 max-w-full items-center rounded-full border border-white/12 bg-black/18 px-2 py-1 text-[10px] font-medium text-[var(--platform-text-base)]">
|
||
<span className="truncate">{metaLabel}</span>
|
||
</span>
|
||
</div>
|
||
|
||
<div className="mt-auto min-w-0">
|
||
<div className="line-clamp-2 break-words text-base font-black leading-[1.15] text-[var(--platform-text-strong)] sm:text-[1.12rem]">
|
||
{entry.worldName}
|
||
</div>
|
||
{entry.subtitle ? (
|
||
<div className="mt-1 line-clamp-1 break-words text-[11px] tracking-[0.08em] text-[color:color-mix(in_srgb,var(--platform-text-base)_84%,transparent)]">
|
||
{entry.subtitle}
|
||
</div>
|
||
) : null}
|
||
<div className="mt-2 line-clamp-3 break-words text-[11px] leading-5 text-[color:color-mix(in_srgb,var(--platform-text-base)_88%,transparent)] sm:text-xs">
|
||
{summaryText}
|
||
</div>
|
||
<div className="mt-3 flex flex-wrap items-center gap-1.5">
|
||
<span className="inline-flex min-w-0 max-w-full items-center rounded-full border border-white/12 bg-black/18 px-2 py-1 text-[10px] font-semibold tracking-[0.1em] text-[color:color-mix(in_srgb,var(--platform-text-strong)_90%,transparent)]">
|
||
<span className="truncate">{primaryTag}</span>
|
||
</span>
|
||
<span className="inline-flex items-center gap-1 text-[11px] font-semibold text-[var(--platform-text-base)]">
|
||
<span>
|
||
{entry.visibility === 'published' ? '进入世界' : '继续创作'}
|
||
</span>
|
||
<ArrowRight className="h-3.5 w-3.5 shrink-0" />
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
);
|
||
}
|
||
|
||
function SaveArchiveCard({
|
||
entry,
|
||
onClick,
|
||
loading = false,
|
||
}: {
|
||
entry: ProfileSaveArchiveSummary;
|
||
onClick: () => void;
|
||
loading?: boolean;
|
||
}) {
|
||
const summaryText =
|
||
entry.summaryText || entry.subtitle || '继续推进上一次保存的故事。';
|
||
|
||
return (
|
||
<button
|
||
type="button"
|
||
onClick={onClick}
|
||
disabled={loading}
|
||
className={`platform-surface platform-surface--soft platform-interactive-card relative flex min-h-[13rem] w-full overflow-hidden p-3.5 text-left sm:min-h-[12.5rem] sm:p-4 ${loading ? 'opacity-80' : ''}`}
|
||
>
|
||
<div className="absolute inset-0 bg-[var(--platform-card-overlay-deep)]" />
|
||
<div className="relative z-10 flex h-full w-full flex-col gap-3">
|
||
<div className="flex flex-wrap items-center justify-between gap-2">
|
||
<span className="platform-pill platform-pill--cool">ARCHIVE</span>
|
||
<span className="rounded-full border border-white/10 bg-black/18 px-2.5 py-1 text-[11px] font-medium text-[var(--platform-text-base)]">
|
||
{loading ? '恢复中' : formatSnapshotTime(entry.lastPlayedAt)}
|
||
</span>
|
||
</div>
|
||
<div className="flex min-w-0 flex-1 items-stretch gap-3 sm:gap-4">
|
||
<div className="min-w-0 flex-1">
|
||
<div className="line-clamp-2 break-words text-[1.15rem] font-black leading-tight text-[var(--platform-text-strong)] sm:text-xl">
|
||
{entry.worldName}
|
||
</div>
|
||
{entry.subtitle ? (
|
||
<div className="mt-1 line-clamp-1 break-words text-sm text-[var(--platform-text-base)]">
|
||
{entry.subtitle}
|
||
</div>
|
||
) : null}
|
||
<div className="mt-2 line-clamp-3 break-words text-xs leading-5 text-[var(--platform-text-soft)] sm:text-sm">
|
||
{summaryText}
|
||
</div>
|
||
<div className="mt-4 inline-flex items-center gap-1.5 text-xs font-semibold text-zinc-200">
|
||
<span>{loading ? '正在恢复' : '继续游玩'}</span>
|
||
<ArrowRight className="h-3.5 w-3.5 shrink-0" />
|
||
</div>
|
||
</div>
|
||
<SaveArchivePreview
|
||
entry={entry}
|
||
label={loading ? '恢复中' : '最近存档'}
|
||
className="h-[7.4rem] w-[5.6rem] sm:h-[8rem] sm:w-[6.4rem]"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
);
|
||
}
|
||
|
||
function PlatformTabButton({
|
||
active,
|
||
label,
|
||
icon: Icon,
|
||
onClick,
|
||
emphasized = false,
|
||
}: {
|
||
active: boolean;
|
||
label: string;
|
||
icon: ComponentType<{ className?: string }>;
|
||
onClick: () => void;
|
||
emphasized?: boolean;
|
||
}) {
|
||
return (
|
||
<button
|
||
type="button"
|
||
onClick={onClick}
|
||
className={`platform-bottom-nav__button ${emphasized ? 'platform-bottom-nav__button--primary' : ''} ${active ? 'platform-bottom-nav__button--active' : ''}`}
|
||
>
|
||
<span className="platform-bottom-nav__button-content">
|
||
<span className="platform-bottom-nav__icon-shell">
|
||
<Icon className="platform-bottom-nav__icon" />
|
||
</span>
|
||
<span className="platform-bottom-nav__label">{label}</span>
|
||
</span>
|
||
</button>
|
||
);
|
||
}
|
||
|
||
function DesktopTabButton({
|
||
active,
|
||
label,
|
||
icon: Icon,
|
||
onClick,
|
||
emphasized = false,
|
||
}: {
|
||
active: boolean;
|
||
label: string;
|
||
icon: ComponentType<{ className?: string }>;
|
||
onClick: () => void;
|
||
emphasized?: boolean;
|
||
}) {
|
||
return (
|
||
<button
|
||
type="button"
|
||
onClick={onClick}
|
||
className={`platform-desktop-rail__button ${emphasized ? 'platform-desktop-rail__button--primary' : ''} ${active ? 'platform-desktop-rail__button--active' : ''}`}
|
||
>
|
||
<span className="platform-desktop-rail__icon-shell">
|
||
<Icon className="platform-desktop-rail__icon h-[1.1rem] w-[1.1rem]" />
|
||
</span>
|
||
<span className="platform-desktop-rail__label text-[11px] font-semibold tracking-[0.2em]">
|
||
{label}
|
||
</span>
|
||
</button>
|
||
);
|
||
}
|
||
|
||
function PlatformTabPanel({
|
||
tab,
|
||
activeTab,
|
||
children,
|
||
}: {
|
||
tab: PlatformHomeTab;
|
||
activeTab: PlatformHomeTab;
|
||
children: ReactNode;
|
||
}) {
|
||
const active = activeTab === tab;
|
||
|
||
// 主 Tab 保持挂载，只切换可见性，避免重页面卸载重建造成首帧闪烁。
|
||
return (
|
||
<section
|
||
id={`platform-tab-panel-${tab}`}
|
||
aria-hidden={!active}
|
||
className={`platform-tab-panel ${active ? 'platform-tab-panel--active' : 'platform-tab-panel--hidden'}`}
|
||
>
|
||
{children}
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function DesktopTrendingItem({
|
||
entry,
|
||
rank,
|
||
onClick,
|
||
}: {
|
||
entry: PlatformPublicGalleryCard;
|
||
rank: number;
|
||
onClick: () => void;
|
||
}) {
|
||
const coverImage = resolvePlatformWorldCoverImage(entry);
|
||
const tags = buildPlatformWorldTags(entry).filter(Boolean).slice(0, 2);
|
||
|
||
return (
|
||
<button
|
||
type="button"
|
||
onClick={onClick}
|
||
className="platform-desktop-trending-item flex items-center gap-4 px-4 py-4 text-left"
|
||
>
|
||
<div className="relative h-[5.5rem] w-[4.3rem] shrink-0 overflow-hidden rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-[rgba(255,255,255,0.66)]">
|
||
{coverImage ? (
|
||
<ResolvedAssetBackdrop
|
||
src={coverImage}
|
||
alt={entry.worldName}
|
||
className="h-full w-full object-cover"
|
||
/>
|
||
) : null}
|
||
<div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(255,255,255,0.04),rgba(91,24,46,0.26))]" />
|
||
</div>
|
||
|
||
<div className="min-w-0 flex-1">
|
||
<div className="flex items-center gap-2 text-[10px] tracking-[0.18em] text-[var(--platform-text-soft)]">
|
||
<span>{`${rank}`.padStart(2, '0')}</span>
|
||
<span className="truncate">
|
||
{describePublicGalleryCardKind(entry)}
|
||
</span>
|
||
</div>
|
||
<div className="mt-2 line-clamp-1 text-lg font-semibold text-[var(--platform-text-strong)]">
|
||
{entry.worldName}
|
||
</div>
|
||
<div className="mt-1 line-clamp-2 text-sm leading-6 text-[color:color-mix(in_srgb,var(--platform-text-base)_86%,transparent)]">
|
||
{entry.summaryText || entry.subtitle || '等待补充世界摘要。'}
|
||
</div>
|
||
<div className="mt-3 flex flex-wrap gap-2">
|
||
{tags.length > 0 ? (
|
||
tags.map((tag, index) => (
|
||
<span
|
||
key={`${entry.profileId}-trend-tag-${index}-${tag}`}
|
||
className="platform-pill platform-pill--neutral px-2.5"
|
||
>
|
||
{tag}
|
||
</span>
|
||
))
|
||
) : (
|
||
<span className="platform-pill platform-pill--neutral px-2.5">
|
||
{isBigFishGalleryEntry(entry)
|
||
? '大鱼'
|
||
: isPuzzleGalleryEntry(entry)
|
||
? '拼图'
|
||
: describePlatformThemeLabel(entry.themeMode)}
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<ChevronRight className="h-4 w-4 shrink-0 text-[var(--platform-text-soft)]" />
|
||
</button>
|
||
);
|
||
}
|
||
|
||
function buildPublicCategoryGroups(
|
||
featuredEntries: PlatformPublicGalleryCard[],
|
||
latestEntries: PlatformPublicGalleryCard[],
|
||
) {
|
||
const publicEntryMap = new Map<string, PlatformPublicGalleryCard>();
|
||
|
||
[...featuredEntries, ...latestEntries].forEach((entry) => {
|
||
publicEntryMap.set(buildPublicGalleryCardKey(entry), entry);
|
||
});
|
||
|
||
const categoryMap = new Map<string, PlatformPublicGalleryCard[]>();
|
||
Array.from(publicEntryMap.values()).forEach((entry) => {
|
||
const tags = buildPlatformWorldTags(entry)
|
||
.map((tag) => tag.trim())
|
||
.filter(Boolean);
|
||
const normalizedTags = tags.length > 0 ? tags : ['回响'];
|
||
|
||
normalizedTags.forEach((tag) => {
|
||
const entries = categoryMap.get(tag) ?? [];
|
||
entries.push(entry);
|
||
categoryMap.set(tag, entries);
|
||
});
|
||
});
|
||
|
||
return Array.from(categoryMap.entries())
|
||
.map(([tag, entries]) => ({ tag, entries }))
|
||
.sort((left, right) => {
|
||
if (right.entries.length !== left.entries.length) {
|
||
return right.entries.length - left.entries.length;
|
||
}
|
||
|
||
return left.tag.localeCompare(right.tag, 'zh-CN');
|
||
});
|
||
}
|
||
|
||
function buildPublicGalleryCardKey(entry: PlatformPublicGalleryCard) {
|
||
const kind = isBigFishGalleryEntry(entry)
|
||
? 'big-fish'
|
||
: isPuzzleGalleryEntry(entry)
|
||
? 'puzzle'
|
||
: 'rpg';
|
||
return `${kind}:${entry.ownerUserId}:${entry.profileId}`;
|
||
}
|
||
|
||
function describePublicGalleryCardKind(entry: PlatformPublicGalleryCard) {
|
||
return isBigFishGalleryEntry(entry)
|
||
? '大鱼'
|
||
: isPuzzleGalleryEntry(entry)
|
||
? '拼图'
|
||
: describePlatformThemeLabel(entry.themeMode);
|
||
}
|
||
|
||
function formatSnapshotTime(value: string | null | undefined) {
|
||
if (!value) {
|
||
return '刚刚保存';
|
||
}
|
||
|
||
const date = new Date(value);
|
||
if (Number.isNaN(date.getTime())) {
|
||
return value;
|
||
}
|
||
|
||
return date.toLocaleString('zh-CN', {
|
||
month: '2-digit',
|
||
day: '2-digit',
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
});
|
||
}
|
||
|
||
function describeLoginMethod(loginMethod: AuthUser['loginMethod']) {
|
||
switch (loginMethod) {
|
||
case 'phone':
|
||
return '手机号';
|
||
case 'wechat':
|
||
return '微信';
|
||
default:
|
||
return '账号密码';
|
||
}
|
||
}
|
||
|
||
function describeBindingStatus(bindingStatus: AuthUser['bindingStatus']) {
|
||
return bindingStatus === 'pending_bind_phone' ? '待绑定手机号' : '正常';
|
||
}
|
||
|
||
function formatCompactPlayTime(playTimeMs: number) {
|
||
const totalMinutes = Math.max(0, Math.floor(playTimeMs / 60000));
|
||
const days = totalMinutes / 1440;
|
||
|
||
if (days >= 10) {
|
||
return `${Math.floor(days)}天`;
|
||
}
|
||
if (days >= 1) {
|
||
return `${days.toFixed(days >= 3 ? 0 : 1)}天`;
|
||
}
|
||
|
||
const hours = totalMinutes / 60;
|
||
if (hours >= 1) {
|
||
return `${hours.toFixed(hours >= 10 ? 0 : 1)}小时`;
|
||
}
|
||
|
||
return `${Math.max(0, totalMinutes)}分`;
|
||
}
|
||
|
||
function formatDashboardCount(value: number) {
|
||
const normalizedValue = Math.max(0, Math.round(value));
|
||
if (normalizedValue >= 100000000) {
|
||
return `${(normalizedValue / 100000000).toFixed(1)}亿`;
|
||
}
|
||
if (normalizedValue >= 10000) {
|
||
return `${(normalizedValue / 10000).toFixed(1)}万`;
|
||
}
|
||
|
||
return normalizedValue.toLocaleString('zh-CN');
|
||
}
|
||
|
||
function formatDashboardUpdatedAt(value: string | null | undefined) {
|
||
if (!value) {
|
||
return '暂无更新记录';
|
||
}
|
||
|
||
const date = new Date(value);
|
||
if (Number.isNaN(date.getTime())) {
|
||
return value;
|
||
}
|
||
|
||
return date.toLocaleString('zh-CN', {
|
||
month: '2-digit',
|
||
day: '2-digit',
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
});
|
||
}
|
||
|
||
function buildPublicUserCode(user: AuthUser | null | undefined) {
|
||
if (user?.publicUserCode?.trim()) {
|
||
return user.publicUserCode.trim();
|
||
}
|
||
|
||
const raw =
|
||
user?.id.replace(/[^a-zA-Z0-9]/gu, '').toUpperCase() ||
|
||
user?.username.replace(/[^a-zA-Z0-9]/gu, '').toUpperCase() ||
|
||
'00000000';
|
||
|
||
return `SY-${raw.slice(-8).padStart(8, '0')}`;
|
||
}
|
||
|
||
function getUserAvatarLabel(user: AuthUser | null | undefined) {
|
||
return (user?.displayName || user?.username || '叙')
|
||
.slice(0, 1)
|
||
.toUpperCase();
|
||
}
|
||
|
||
function copyText(value: string) {
|
||
if (typeof navigator === 'undefined' || !navigator.clipboard?.writeText) {
|
||
return;
|
||
}
|
||
|
||
void navigator.clipboard.writeText(value);
|
||
}
|
||
|
||
function ProfileStatCard({
|
||
cardKey,
|
||
label,
|
||
value,
|
||
onClick,
|
||
icon,
|
||
}: {
|
||
cardKey: ProfileDashboardCardKey;
|
||
label: string;
|
||
value: string;
|
||
onClick?: ((cardKey: ProfileDashboardCardKey) => void) | null;
|
||
icon: ComponentType<{ className?: string }>;
|
||
}) {
|
||
const Icon = icon;
|
||
|
||
return (
|
||
<button
|
||
type="button"
|
||
onClick={onClick ? () => onClick(cardKey) : undefined}
|
||
className="platform-subpanel rounded-[1.35rem] px-4 py-3 text-left transition hover:border-[var(--platform-surface-hover-border)] hover:bg-[var(--platform-button-secondary-fill)]"
|
||
>
|
||
<div className="flex items-center gap-2 text-[var(--platform-text-soft)]">
|
||
<Icon className="h-4 w-4" />
|
||
<span className="text-[11px] tracking-[0.16em]">{label}</span>
|
||
</div>
|
||
<div className="mt-3 text-lg font-black text-[var(--platform-text-strong)]">
|
||
{value}
|
||
</div>
|
||
</button>
|
||
);
|
||
}
|
||
|
||
function ProfileStatCardSkeleton() {
|
||
return (
|
||
<div className="platform-subpanel rounded-[1.35rem] px-4 py-3">
|
||
<div className="h-4 w-20 animate-pulse rounded-full bg-[var(--platform-subpanel-border)]" />
|
||
<div className="mt-3 h-7 w-16 animate-pulse rounded-full bg-[var(--platform-line-soft)]" />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function ProfileShortcutButton({
|
||
label,
|
||
icon,
|
||
onClick,
|
||
}: {
|
||
label: string;
|
||
icon: ComponentType<{ className?: string }>;
|
||
onClick?: (() => void) | null;
|
||
}) {
|
||
const Icon = icon;
|
||
|
||
return (
|
||
<button
|
||
type="button"
|
||
onClick={onClick ?? undefined}
|
||
className="platform-subpanel flex min-h-[5.25rem] flex-col items-center justify-center gap-2 rounded-[1.2rem] px-3 py-3 text-center transition hover:border-[var(--platform-surface-hover-border)] hover:bg-[var(--platform-button-secondary-fill)]"
|
||
>
|
||
<div className="platform-profile-chip flex h-10 w-10 items-center justify-center rounded-full">
|
||
<Icon className="h-[1.125rem] w-[1.125rem]" />
|
||
</div>
|
||
<div className="text-sm font-semibold text-[var(--platform-text-strong)]">
|
||
{label}
|
||
</div>
|
||
</button>
|
||
);
|
||
}
|
||
|
||
function formatRechargePrice(priceCents: number) {
|
||
const yuan = priceCents / 100;
|
||
return Number.isInteger(yuan) ? `¥${yuan}` : `¥${yuan.toFixed(2)}`;
|
||
}
|
||
|
||
function formatMembershipDuration(days: number) {
|
||
if (days >= 365) {
|
||
return '365天';
|
||
}
|
||
|
||
return `${days}天`;
|
||
}
|
||
|
||
const WALLET_LEDGER_SOURCE_LABELS: Record<string, string> = {
|
||
points_recharge: '叙世币充值',
|
||
invite_inviter_reward: '邀请奖励',
|
||
invite_invitee_reward: '填写邀请码奖励',
|
||
snapshot_sync: '账户同步',
|
||
asset_operation_consume: '资产操作消耗',
|
||
asset_operation_refund: '资产操作退回',
|
||
};
|
||
|
||
function formatWalletLedgerAmount(amountDelta: number) {
|
||
return amountDelta > 0 ? `+${amountDelta}` : `${amountDelta}`;
|
||
}
|
||
|
||
function WalletLedgerModal({
|
||
ledger,
|
||
fallbackBalance,
|
||
isLoading,
|
||
error,
|
||
onClose,
|
||
onRetry,
|
||
}: {
|
||
ledger: ProfileWalletLedgerResponse | null;
|
||
fallbackBalance: number;
|
||
isLoading: boolean;
|
||
error: string | null;
|
||
onClose: () => void;
|
||
onRetry: () => void;
|
||
}) {
|
||
const entries = ledger?.entries ?? [];
|
||
const balance = entries[0]?.balanceAfter ?? fallbackBalance;
|
||
|
||
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-[30rem] overflow-hidden rounded-[1.35rem] bg-[linear-gradient(180deg,#fff7f8_0%,#ffffff_38%,#f8fafc_100%)] 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/78 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]">
|
||
LEDGER
|
||
</div>
|
||
<div className="mt-1 text-2xl font-black">叙世币账单</div>
|
||
<div className="mt-3 inline-flex items-center gap-2 rounded-full border border-rose-100 bg-white/70 px-3 py-1.5 text-xs font-bold text-zinc-600">
|
||
<Coins className="h-3.5 w-3.5 text-[#ff4056]" />
|
||
<span>{balance}叙世币</span>
|
||
</div>
|
||
</div>
|
||
|
||
{error ? (
|
||
<div className="mt-4 rounded-xl border border-rose-200 bg-rose-50 px-3 py-3 text-sm text-rose-700">
|
||
<div>{error}</div>
|
||
<button
|
||
type="button"
|
||
onClick={onRetry}
|
||
className="mt-3 rounded-full bg-[#ff4056] px-4 py-2 text-xs font-black text-white"
|
||
>
|
||
重新加载
|
||
</button>
|
||
</div>
|
||
) : isLoading ? (
|
||
<div className="mt-5 space-y-3">
|
||
{Array.from({ length: 5 }).map((_, index) => (
|
||
<div
|
||
key={index}
|
||
className="h-16 animate-pulse rounded-xl bg-zinc-100"
|
||
/>
|
||
))}
|
||
</div>
|
||
) : entries.length === 0 ? (
|
||
<div className="mt-5 rounded-xl border border-zinc-200 bg-white px-4 py-8 text-center text-sm font-semibold text-zinc-500">
|
||
暂无账单记录
|
||
</div>
|
||
) : (
|
||
<div className="mt-5 space-y-2.5">
|
||
{entries.map((entry) => {
|
||
const isIncome = entry.amountDelta > 0;
|
||
const label =
|
||
WALLET_LEDGER_SOURCE_LABELS[entry.sourceType] ??
|
||
entry.sourceType;
|
||
|
||
return (
|
||
<div
|
||
key={entry.id}
|
||
className="flex items-center justify-between gap-3 rounded-xl border border-zinc-200 bg-white px-3 py-3 shadow-sm"
|
||
>
|
||
<div className="min-w-0">
|
||
<div className="truncate text-sm font-black text-zinc-900">
|
||
{label}
|
||
</div>
|
||
<div className="mt-1 text-xs font-semibold text-zinc-500">
|
||
{formatPlatformWorldTime(entry.createdAt)}
|
||
</div>
|
||
</div>
|
||
<div className="shrink-0 text-right">
|
||
<div
|
||
className={`text-base font-black ${
|
||
isIncome ? 'text-emerald-600' : 'text-rose-500'
|
||
}`}
|
||
>
|
||
{formatWalletLedgerAmount(entry.amountDelta)}
|
||
</div>
|
||
<div className="mt-1 text-[11px] font-semibold text-zinc-400">
|
||
余额 {entry.balanceAfter}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function AccountRechargeModal({
|
||
center,
|
||
activeTab,
|
||
isLoading,
|
||
isSubmitting,
|
||
error,
|
||
onTabChange,
|
||
onClose,
|
||
onSelectProduct,
|
||
}: {
|
||
center: ProfileRechargeCenterResponse | null;
|
||
activeTab: 'points' | 'membership';
|
||
isLoading: boolean;
|
||
isSubmitting: string | null;
|
||
error: string | null;
|
||
onTabChange: (tab: 'points' | 'membership') => void;
|
||
onClose: () => void;
|
||
onSelectProduct: (product: ProfileRechargeProduct) => void;
|
||
}) {
|
||
const visibleProducts =
|
||
activeTab === 'points'
|
||
? (center?.pointProducts ?? [])
|
||
: (center?.membershipProducts ?? []);
|
||
|
||
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,46rem)] w-full max-w-[32rem] overflow-hidden rounded-[1.35rem] bg-[linear-gradient(180deg,#fff7f8_0%,#ffffff_34%,#f8fafc_100%)] 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/78 text-[#ff4056] shadow-sm"
|
||
aria-label="关闭账户充值"
|
||
>
|
||
×
|
||
</button>
|
||
<div className="max-h-[min(92vh,46rem)] 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]">
|
||
WALLET
|
||
</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-white/70 px-3 py-1.5 text-xs font-bold text-zinc-600">
|
||
<Coins className="h-3.5 w-3.5 text-[#ff4056]" />
|
||
<span>
|
||
{center ? `${center.walletBalance}叙世币` : '叙世币账户'}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-4 grid grid-cols-2 rounded-2xl bg-zinc-100/90 p-1">
|
||
<button
|
||
type="button"
|
||
onClick={() => onTabChange('points')}
|
||
className={`rounded-xl px-4 py-3 text-sm font-black transition ${
|
||
activeTab === 'points'
|
||
? 'bg-white text-[#ff4056] shadow-sm'
|
||
: 'text-zinc-500'
|
||
}`}
|
||
>
|
||
叙世币充值
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => onTabChange('membership')}
|
||
className={`rounded-xl px-4 py-3 text-sm font-black transition ${
|
||
activeTab === 'membership'
|
||
? 'bg-white text-[#ff4056] shadow-sm'
|
||
: 'text-zinc-500'
|
||
}`}
|
||
>
|
||
会员卡充值
|
||
</button>
|
||
</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 grid grid-cols-2 gap-3 sm:grid-cols-3">
|
||
{Array.from({ length: activeTab === 'points' ? 6 : 3 }).map(
|
||
(_, index) => (
|
||
<div
|
||
key={index}
|
||
className="h-24 animate-pulse rounded-xl bg-zinc-100"
|
||
/>
|
||
),
|
||
)}
|
||
</div>
|
||
) : activeTab === 'points' ? (
|
||
<div className="mt-5 grid grid-cols-2 gap-3 sm:grid-cols-3">
|
||
{visibleProducts.map((product) => (
|
||
<button
|
||
type="button"
|
||
key={product.productId}
|
||
disabled={Boolean(isSubmitting)}
|
||
onClick={() => onSelectProduct(product)}
|
||
className="relative min-h-[8.45rem] overflow-hidden rounded-2xl border border-zinc-200 bg-white text-center shadow-sm transition hover:border-[#ff4056] disabled:opacity-70"
|
||
>
|
||
<div className="h-8 bg-[#ff4056] px-2 py-1.5 text-xs font-black text-white">
|
||
{product.badgeLabel}
|
||
</div>
|
||
<div className="px-2 py-3">
|
||
<div className="text-xl font-black">
|
||
{product.pointsAmount}叙世币
|
||
</div>
|
||
<div className="mt-1 text-xs text-zinc-500">
|
||
金额：{formatRechargePrice(product.priceCents)}
|
||
</div>
|
||
<div className="my-2 h-px bg-zinc-100" />
|
||
<div className="text-sm text-zinc-800">
|
||
{isSubmitting === product.productId
|
||
? '处理中'
|
||
: product.description}
|
||
</div>
|
||
</div>
|
||
</button>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<>
|
||
<div className="mt-5 grid gap-3 sm:grid-cols-3">
|
||
{visibleProducts.map((product) => (
|
||
<button
|
||
type="button"
|
||
key={product.productId}
|
||
disabled={Boolean(isSubmitting)}
|
||
onClick={() => onSelectProduct(product)}
|
||
className="group relative min-h-[7.75rem] overflow-hidden rounded-2xl border border-zinc-200 bg-white px-4 py-4 text-left shadow-sm transition hover:border-[#ff4056] hover:shadow-md disabled:opacity-70"
|
||
>
|
||
<div className="absolute right-0 top-0 h-16 w-16 rounded-bl-[2rem] bg-[#ff4056]/10 transition group-hover:bg-[#ff4056]/16" />
|
||
<div className="relative">
|
||
<div className="flex items-start justify-between gap-3">
|
||
<div>
|
||
<div className="text-lg font-black">
|
||
{product.title}
|
||
</div>
|
||
<div className="mt-1 text-xs font-bold text-zinc-500">
|
||
{formatMembershipDuration(product.durationDays)}
|
||
</div>
|
||
</div>
|
||
<Crown className="h-5 w-5 shrink-0 text-[#ff4056]" />
|
||
</div>
|
||
<div className="mt-4 text-2xl font-black text-[#ff4056]">
|
||
{formatRechargePrice(product.priceCents)}
|
||
</div>
|
||
<div className="mt-2 text-xs font-semibold text-zinc-500">
|
||
{isSubmitting === product.productId
|
||
? '处理中'
|
||
: product.description}
|
||
</div>
|
||
</div>
|
||
</button>
|
||
))}
|
||
</div>
|
||
<div className="mt-5 overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-sm">
|
||
<div className="border-b border-zinc-200 px-4 py-3 text-sm font-black">
|
||
用户等级特权
|
||
</div>
|
||
<div className="overflow-x-auto">
|
||
<div className="grid min-w-[30rem] grid-cols-5 text-center text-sm">
|
||
{center?.benefits.map((benefit) => (
|
||
<div key={benefit.benefitName} className="contents">
|
||
<div className="border-b border-zinc-100 bg-zinc-50 px-2 py-3 text-left text-zinc-600">
|
||
{benefit.benefitName}
|
||
</div>
|
||
<div className="border-b border-zinc-100 px-2 py-3 text-zinc-500">
|
||
{benefit.normalValue}
|
||
</div>
|
||
<div className="border-b border-zinc-100 px-2 py-3 font-bold text-emerald-700">
|
||
{benefit.monthValue}
|
||
</div>
|
||
<div className="border-b border-zinc-100 px-2 py-3 font-bold text-rose-500">
|
||
{benefit.seasonValue}
|
||
</div>
|
||
<div className="border-b border-zinc-100 px-2 py-3 font-bold text-amber-600">
|
||
{benefit.yearValue}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function ProfileReferralModal({
|
||
panel,
|
||
center,
|
||
inviteCodeInput,
|
||
isLoading,
|
||
isSubmitting,
|
||
error,
|
||
success,
|
||
onClose,
|
||
onInputChange,
|
||
onCopyInvite,
|
||
onSubmitRedeem,
|
||
}: {
|
||
panel: ProfilePopupPanel;
|
||
center: ProfileReferralInviteCenterResponse | null;
|
||
inviteCodeInput: string;
|
||
isLoading: boolean;
|
||
isSubmitting: boolean;
|
||
error: string | null;
|
||
success: string | null;
|
||
onClose: () => void;
|
||
onInputChange: (value: string) => void;
|
||
onCopyInvite: () => void;
|
||
onSubmitRedeem: () => void;
|
||
}) {
|
||
const title =
|
||
panel === 'invite'
|
||
? '邀请好友'
|
||
: panel === 'redeem'
|
||
? '填邀请码'
|
||
: '玩家社区';
|
||
|
||
return (
|
||
<div className="fixed inset-0 z-[80] flex items-center justify-center bg-black/42 px-3 py-5">
|
||
<div className="relative w-full max-w-[24rem] overflow-hidden rounded-[1.35rem] bg-white text-zinc-950 shadow-2xl">
|
||
<button
|
||
type="button"
|
||
onClick={onClose}
|
||
className="absolute right-3 top-2 z-10 flex h-8 w-8 items-center justify-center rounded-full text-[#ff4056]"
|
||
aria-label={`关闭${title}`}
|
||
>
|
||
×
|
||
</button>
|
||
<div className="px-5 pb-5 pt-4">
|
||
<div className="text-center text-xl font-black">{title}</div>
|
||
|
||
{panel === 'community' ? (
|
||
<div className="mt-5 grid grid-cols-2 gap-3">
|
||
{['微信群', 'QQ群'].map((label) => (
|
||
<div
|
||
key={label}
|
||
className="rounded-xl border border-zinc-200 bg-zinc-50 p-3 text-center"
|
||
>
|
||
<div className="aspect-square rounded-lg border border-dashed border-zinc-300 bg-white" />
|
||
<div className="mt-2 text-sm font-bold text-zinc-700">
|
||
{label}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
) : isLoading ? (
|
||
<div className="mt-5 space-y-3">
|
||
<div className="h-20 animate-pulse rounded-xl bg-zinc-100" />
|
||
<div className="h-10 animate-pulse rounded-xl bg-zinc-100" />
|
||
</div>
|
||
) : panel === 'invite' ? (
|
||
<div className="mt-5 space-y-3">
|
||
<div className="rounded-xl bg-zinc-50 px-4 py-4 text-center">
|
||
<div className="text-[11px] font-bold text-zinc-500">
|
||
邀请码
|
||
</div>
|
||
<div className="mt-1 text-3xl font-black tracking-[0.16em] text-[#ff4056]">
|
||
{center?.inviteCode ?? '--------'}
|
||
</div>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
onClick={onCopyInvite}
|
||
disabled={!center?.inviteCode}
|
||
className="flex w-full items-center justify-center gap-2 rounded-xl bg-[#ff4056] px-4 py-3 text-sm font-black text-white disabled:opacity-60"
|
||
>
|
||
<Copy className="h-4 w-4" />
|
||
复制邀请
|
||
</button>
|
||
<div className="grid grid-cols-3 gap-2 text-center text-xs text-zinc-500">
|
||
<div className="rounded-lg bg-zinc-50 px-2 py-2">
|
||
<div className="font-black text-zinc-900">
|
||
{center?.invitedCount ?? 0}
|
||
</div>
|
||
邀请
|
||
</div>
|
||
<div className="rounded-lg bg-zinc-50 px-2 py-2">
|
||
<div className="font-black text-zinc-900">
|
||
{center?.rewardedInviteCount ?? 0}
|
||
</div>
|
||
已奖
|
||
</div>
|
||
<div className="rounded-lg bg-zinc-50 px-2 py-2">
|
||
<div className="font-black text-zinc-900">
|
||
{center?.todayInviterRewardRemaining ?? 0}
|
||
</div>
|
||
今日
|
||
</div>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="mt-5 space-y-3">
|
||
{center?.hasRedeemedCode ? (
|
||
<div className="rounded-xl bg-emerald-50 px-4 py-4 text-center text-sm font-bold text-emerald-700">
|
||
已填写邀请码
|
||
</div>
|
||
) : (
|
||
<>
|
||
<input
|
||
value={inviteCodeInput}
|
||
onChange={(event) => onInputChange(event.target.value)}
|
||
placeholder="输入邀请码"
|
||
className="w-full rounded-xl border border-zinc-200 bg-zinc-50 px-4 py-3 text-center text-base font-black tracking-[0.14em] outline-none focus:border-[#ff4056]"
|
||
/>
|
||
<button
|
||
type="button"
|
||
onClick={onSubmitRedeem}
|
||
disabled={isSubmitting || !inviteCodeInput.trim()}
|
||
className="w-full rounded-xl bg-[#ff4056] px-4 py-3 text-sm font-black text-white disabled:opacity-60"
|
||
>
|
||
{isSubmitting ? '提交中' : '确认填写'}
|
||
</button>
|
||
</>
|
||
)}
|
||
</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}
|
||
{success ? (
|
||
<div className="mt-4 rounded-xl border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm text-emerald-700">
|
||
{success}
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export function RpgEntryHomeView({
|
||
activeTab,
|
||
onTabChange,
|
||
saveEntries,
|
||
saveError,
|
||
featuredEntries,
|
||
latestEntries,
|
||
myEntries,
|
||
historyEntries,
|
||
profileDashboard,
|
||
isLoadingPlatform,
|
||
isLoadingDashboard,
|
||
isResumingSaveWorldKey,
|
||
platformError,
|
||
dashboardError,
|
||
onResumeSave,
|
||
onOpenCreateTypePicker,
|
||
onOpenGalleryDetail,
|
||
onOpenLibraryDetail,
|
||
onDeleteLibraryEntry,
|
||
deletingLibraryEntryId = null,
|
||
onSearchPublicCode,
|
||
isSearchingPublicCode = false,
|
||
onOpenProfileDashboardCard,
|
||
onRechargeSuccess,
|
||
createTabContent,
|
||
}: RpgEntryHomeViewProps) {
|
||
const authUi = useAuthUi();
|
||
const [desktopSearchKeyword, setDesktopSearchKeyword] = useState('');
|
||
const [mobileSearchKeyword, setMobileSearchKeyword] = useState('');
|
||
const [isRechargeOpen, setIsRechargeOpen] = useState(false);
|
||
const [rechargeTab, setRechargeTab] = useState<'points' | 'membership'>(
|
||
'points',
|
||
);
|
||
const [rechargeCenter, setRechargeCenter] =
|
||
useState<ProfileRechargeCenterResponse | null>(null);
|
||
const [rechargeError, setRechargeError] = useState<string | null>(null);
|
||
const [isLoadingRecharge, setIsLoadingRecharge] = useState(false);
|
||
const [submittingRechargeProductId, setSubmittingRechargeProductId] =
|
||
useState<string | null>(null);
|
||
const [isWalletLedgerOpen, setIsWalletLedgerOpen] = useState(false);
|
||
const [walletLedger, setWalletLedger] =
|
||
useState<ProfileWalletLedgerResponse | null>(null);
|
||
const [walletLedgerError, setWalletLedgerError] = useState<string | null>(
|
||
null,
|
||
);
|
||
const [isLoadingWalletLedger, setIsLoadingWalletLedger] = useState(false);
|
||
const [profilePopupPanel, setProfilePopupPanel] =
|
||
useState<ProfilePopupPanel | null>(null);
|
||
const [referralCenter, setReferralCenter] =
|
||
useState<ProfileReferralInviteCenterResponse | null>(null);
|
||
const [isLoadingReferral, setIsLoadingReferral] = useState(false);
|
||
const [isSubmittingReferral, setIsSubmittingReferral] = useState(false);
|
||
const [referralError, setReferralError] = useState<string | null>(null);
|
||
const [referralSuccess, setReferralSuccess] = useState<string | null>(null);
|
||
const [inviteCodeInput, setInviteCodeInput] = useState('');
|
||
const [selectedCategoryTag, setSelectedCategoryTag] = useState<string | null>(
|
||
null,
|
||
);
|
||
const [visitedTabs, setVisitedTabs] = useState<Set<PlatformHomeTab>>(
|
||
() => new Set([activeTab]),
|
||
);
|
||
const isAuthenticated = Boolean(authUi?.user);
|
||
const isDesktopLayout = usePlatformDesktopLayout();
|
||
const featuredShelf = useMemo(
|
||
() => featuredEntries.slice(0, 6),
|
||
[featuredEntries],
|
||
);
|
||
const categoryGroups = useMemo(
|
||
() => buildPublicCategoryGroups(featuredEntries, latestEntries),
|
||
[featuredEntries, latestEntries],
|
||
);
|
||
const activeCategoryGroup =
|
||
categoryGroups.find((group) => group.tag === selectedCategoryTag) ??
|
||
categoryGroups[0] ??
|
||
null;
|
||
const visibleTabs = useMemo<PlatformHomeTab[]>(
|
||
() =>
|
||
isAuthenticated
|
||
? ['home', 'category', 'create', 'saves', 'profile']
|
||
: ['home', 'create', 'category'],
|
||
[isAuthenticated],
|
||
);
|
||
const publicUserCode = buildPublicUserCode(authUi?.user);
|
||
const avatarLabel = getUserAvatarLabel(authUi?.user);
|
||
const remainingNarrativeCoins = profileDashboard?.walletBalance ?? 0;
|
||
const totalPlayTime = formatCompactPlayTime(
|
||
profileDashboard?.totalPlayTimeMs ?? 0,
|
||
);
|
||
const playedWorkCount = profileDashboard?.playedWorldCount ?? 0;
|
||
const tabIcons = {
|
||
home: House,
|
||
category: Tags,
|
||
create: Sparkles,
|
||
saves: Archive,
|
||
profile: UserRound,
|
||
} as const;
|
||
const tabLabels = {
|
||
home: '首页',
|
||
category: '分类',
|
||
create: '创作',
|
||
saves: '存档',
|
||
profile: '我的',
|
||
} as const;
|
||
|
||
useEffect(() => {
|
||
if (!visibleTabs.includes(activeTab)) {
|
||
onTabChange('home');
|
||
}
|
||
}, [activeTab, onTabChange, visibleTabs]);
|
||
|
||
useEffect(() => {
|
||
setVisitedTabs((currentTabs) => {
|
||
if (currentTabs.has(activeTab)) {
|
||
return currentTabs;
|
||
}
|
||
|
||
const nextTabs = new Set(currentTabs);
|
||
nextTabs.add(activeTab);
|
||
return nextTabs;
|
||
});
|
||
}, [activeTab]);
|
||
|
||
useEffect(() => {
|
||
if (categoryGroups.length === 0) {
|
||
setSelectedCategoryTag(null);
|
||
return;
|
||
}
|
||
|
||
const firstCategoryGroup = categoryGroups[0];
|
||
if (
|
||
firstCategoryGroup &&
|
||
!categoryGroups.some((group) => group.tag === selectedCategoryTag)
|
||
) {
|
||
setSelectedCategoryTag(firstCategoryGroup.tag);
|
||
}
|
||
}, [categoryGroups, selectedCategoryTag]);
|
||
const openUserSurface = () => {
|
||
if (authUi?.user) {
|
||
authUi.openAccountModal();
|
||
return;
|
||
}
|
||
authUi?.openLoginModal();
|
||
};
|
||
const openRechargePanel = () => {
|
||
setIsRechargeOpen(true);
|
||
setRechargeError(null);
|
||
setIsLoadingRecharge(true);
|
||
void getRpgProfileRechargeCenter()
|
||
.then(setRechargeCenter)
|
||
.catch((error: unknown) => {
|
||
setRechargeCenter(null);
|
||
setRechargeError(
|
||
error instanceof Error ? error.message : '读取账户充值失败',
|
||
);
|
||
})
|
||
.finally(() => setIsLoadingRecharge(false));
|
||
};
|
||
const loadWalletLedger = () => {
|
||
setWalletLedgerError(null);
|
||
setIsLoadingWalletLedger(true);
|
||
void getRpgProfileWalletLedger()
|
||
.then(setWalletLedger)
|
||
.catch((error: unknown) => {
|
||
setWalletLedger(null);
|
||
setWalletLedgerError(
|
||
error instanceof Error ? error.message : '读取叙世币账单失败',
|
||
);
|
||
})
|
||
.finally(() => setIsLoadingWalletLedger(false));
|
||
};
|
||
const openWalletLedgerPanel = () => {
|
||
setIsWalletLedgerOpen(true);
|
||
loadWalletLedger();
|
||
};
|
||
const submitRechargeProduct = (product: ProfileRechargeProduct) => {
|
||
if (submittingRechargeProductId) {
|
||
return;
|
||
}
|
||
setSubmittingRechargeProductId(product.productId);
|
||
setRechargeError(null);
|
||
void createRpgProfileRechargeOrder(product.productId)
|
||
.then((response) => {
|
||
setRechargeCenter(response.center);
|
||
void onRechargeSuccess?.();
|
||
})
|
||
.catch((error: unknown) => {
|
||
setRechargeError(error instanceof Error ? error.message : '充值失败');
|
||
})
|
||
.finally(() => setSubmittingRechargeProductId(null));
|
||
};
|
||
const openProfilePopupPanel = (panel: ProfilePopupPanel) => {
|
||
setProfilePopupPanel(panel);
|
||
setReferralError(null);
|
||
setReferralSuccess(null);
|
||
if (panel === 'community') {
|
||
return;
|
||
}
|
||
|
||
setIsLoadingReferral(true);
|
||
void getRpgProfileReferralInviteCenter()
|
||
.then(setReferralCenter)
|
||
.catch((error: unknown) => {
|
||
setReferralCenter(null);
|
||
setReferralError(
|
||
error instanceof Error ? error.message : '读取邀请码失败',
|
||
);
|
||
})
|
||
.finally(() => setIsLoadingReferral(false));
|
||
};
|
||
const copyInviteInfo = () => {
|
||
if (!referralCenter?.inviteCode) {
|
||
return;
|
||
}
|
||
|
||
const inviteUrl =
|
||
typeof window === 'undefined'
|
||
? referralCenter.inviteLinkPath
|
||
: new URL(referralCenter.inviteLinkPath, window.location.origin).href;
|
||
copyText(`${referralCenter.inviteCode} ${inviteUrl}`);
|
||
setReferralSuccess('已复制');
|
||
};
|
||
const submitReferralInviteCode = () => {
|
||
if (isSubmittingReferral || !inviteCodeInput.trim()) {
|
||
return;
|
||
}
|
||
|
||
setIsSubmittingReferral(true);
|
||
setReferralError(null);
|
||
setReferralSuccess(null);
|
||
void redeemRpgProfileReferralInviteCode(inviteCodeInput)
|
||
.then((response: RedeemProfileReferralInviteCodeResponse) => {
|
||
setReferralCenter(response.center);
|
||
setInviteCodeInput('');
|
||
setReferralSuccess(
|
||
response.inviteeRewardGranted ? '已获得30叙世币' : '填写成功',
|
||
);
|
||
void onRechargeSuccess?.();
|
||
})
|
||
.catch((error: unknown) => {
|
||
setReferralError(
|
||
error instanceof Error ? error.message : '填写邀请码失败',
|
||
);
|
||
})
|
||
.finally(() => setIsSubmittingReferral(false));
|
||
};
|
||
const submitDesktopSearch = () => {
|
||
const keyword = desktopSearchKeyword.trim();
|
||
if (!keyword || !onSearchPublicCode || isSearchingPublicCode) {
|
||
return;
|
||
}
|
||
|
||
void onSearchPublicCode(keyword);
|
||
};
|
||
const submitMobileSearch = () => {
|
||
const keyword = mobileSearchKeyword.trim();
|
||
if (!keyword || !onSearchPublicCode || isSearchingPublicCode) {
|
||
return;
|
||
}
|
||
|
||
void onSearchPublicCode(keyword);
|
||
};
|
||
const desktopHeroEntry =
|
||
featuredShelf[0] ?? latestEntries[0] ?? myEntries[0] ?? null;
|
||
const desktopHeroCover = desktopHeroEntry
|
||
? resolvePlatformWorldCoverImage(desktopHeroEntry)
|
||
: null;
|
||
const desktopHeroStripEntries = (
|
||
featuredShelf.length > 0 ? featuredShelf : latestEntries
|
||
).slice(0, 5);
|
||
const desktopTrendingEntries = latestEntries.slice(0, 3);
|
||
const desktopFeaturedGrid = featuredShelf.slice(0, 4);
|
||
const desktopReleaseGrid = latestEntries.slice(0, 6);
|
||
const desktopLibraryPreview = myEntries.slice(0, 2);
|
||
const categoryPageClass = isDesktopLayout
|
||
? DESKTOP_PAGE_STAGE_CLASS
|
||
: MOBILE_PAGE_STAGE_CLASS;
|
||
const leadPublicEntry = featuredShelf[0] ?? latestEntries[0] ?? null;
|
||
const openLeadPublicEntry = () => {
|
||
if (leadPublicEntry) {
|
||
onOpenGalleryDetail(leadPublicEntry);
|
||
return;
|
||
}
|
||
|
||
onTabChange('category');
|
||
};
|
||
|
||
const mobileHomeContent: ReactNode = (
|
||
<div className={`${MOBILE_PAGE_STAGE_CLASS} platform-mobile-home-stage`}>
|
||
<PublicCodeSearchBar
|
||
value={mobileSearchKeyword}
|
||
onChange={setMobileSearchKeyword}
|
||
onSubmit={submitMobileSearch}
|
||
isSearching={isSearchingPublicCode}
|
||
/>
|
||
|
||
<button
|
||
type="button"
|
||
onClick={openLeadPublicEntry}
|
||
className={`${HERO_SURFACE_CLASS} relative block w-full overflow-hidden px-4 py-4 text-left`}
|
||
>
|
||
<div className="absolute inset-0 bg-[var(--platform-hero-overlay-strong)]" />
|
||
<div className="relative z-10 flex min-h-[10rem] flex-col justify-between">
|
||
<div className="flex min-w-0 flex-wrap items-start justify-between gap-2">
|
||
<span className="platform-pill platform-pill--warm shrink-0">
|
||
作品
|
||
</span>
|
||
<div className="platform-mobile-hero-secondary platform-pill platform-pill--neutral max-w-full px-3 text-[11px] tracking-[0.08em]">
|
||
{leadPublicEntry
|
||
? describePublicGalleryCardKind(leadPublicEntry)
|
||
: '作品广场'}
|
||
</div>
|
||
</div>
|
||
<div className="min-w-0">
|
||
<div className="break-all text-[clamp(1.6rem,7.4vw,1.92rem)] font-black leading-tight text-white">
|
||
{leadPublicEntry?.worldName ?? '浏览玩家作品'}
|
||
</div>
|
||
<div className="mt-2 max-w-[28rem] break-all text-sm leading-6 text-zinc-200/88">
|
||
{leadPublicEntry?.summaryText ||
|
||
leadPublicEntry?.subtitle ||
|
||
'从公开广场进入作品详情，挑一个世界开始游玩。'}
|
||
</div>
|
||
<div className="mt-4 flex min-w-0 items-center gap-2 text-sm font-semibold text-white/90">
|
||
<span className="min-w-0 break-all">查看作品</span>
|
||
<ArrowRight className="h-4 w-4" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
|
||
{platformError ? (
|
||
<div className="rounded-2xl border border-rose-400/20 bg-rose-500/10 px-4 py-3 text-sm leading-6 text-rose-700">
|
||
{platformError}
|
||
</div>
|
||
) : null}
|
||
|
||
<section>
|
||
<SectionHeader title="精选推荐" detail="为你挑选" />
|
||
{isLoadingPlatform ? (
|
||
<EmptyShelf text="正在读取精选作品..." />
|
||
) : featuredShelf.length > 0 ? (
|
||
<div className="flex min-w-0 gap-3 overflow-x-auto pb-1 scrollbar-hide">
|
||
{featuredShelf.map((entry: PlatformPublicGalleryCard) => (
|
||
<WorldCard
|
||
key={`${buildPublicGalleryCardKey(entry)}:featured`}
|
||
entry={entry}
|
||
badge="推荐"
|
||
metaLabel={describePublicGalleryCardKind(entry)}
|
||
onClick={() => onOpenGalleryDetail(entry)}
|
||
/>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<EmptyShelf text="公开广场暂时还没有精选作品。" />
|
||
)}
|
||
</section>
|
||
|
||
<section>
|
||
<SectionHeader title="最新发布" detail="玩家广场" />
|
||
{isLoadingPlatform ? (
|
||
<EmptyShelf text="正在读取最新发布..." />
|
||
) : latestEntries.length > 0 ? (
|
||
<div className="flex min-w-0 gap-3 overflow-x-auto pb-1 scrollbar-hide">
|
||
{latestEntries.map((entry: PlatformPublicGalleryCard) => (
|
||
<WorldCard
|
||
key={`${buildPublicGalleryCardKey(entry)}:latest`}
|
||
entry={entry}
|
||
badge={describePublicGalleryCardKind(entry)}
|
||
metaLabel={entry.authorDisplayName}
|
||
onClick={() => onOpenGalleryDetail(entry)}
|
||
/>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<EmptyShelf text="公开广场暂时还没有新作品。" />
|
||
)}
|
||
</section>
|
||
</div>
|
||
);
|
||
|
||
const categoryContent: ReactNode = (
|
||
<div className={categoryPageClass}>
|
||
<section className={`${PANEL_SURFACE_CLASS} px-4 py-3.5`}>
|
||
<SectionHeader title="分类" detail="按标签浏览" />
|
||
{isLoadingPlatform ? (
|
||
<EmptyShelf text="正在读取公开作品..." />
|
||
) : categoryGroups.length > 0 && activeCategoryGroup ? (
|
||
<>
|
||
<div className="flex min-w-0 gap-2 overflow-x-auto pb-1 scrollbar-hide">
|
||
{categoryGroups.map((group) => {
|
||
const active = group.tag === activeCategoryGroup.tag;
|
||
|
||
return (
|
||
<button
|
||
key={group.tag}
|
||
type="button"
|
||
onClick={() => setSelectedCategoryTag(group.tag)}
|
||
className={`platform-pill shrink-0 px-3 py-1.5 ${active ? 'platform-pill--warm' : 'platform-pill--neutral'}`}
|
||
>
|
||
{group.tag} · {group.entries.length}
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
<div className="mt-4 grid grid-cols-2 gap-2.5 sm:gap-3 lg:grid-cols-3 xl:grid-cols-4">
|
||
{activeCategoryGroup.entries.map((entry) => (
|
||
<WorldCard
|
||
key={`${buildPublicGalleryCardKey(entry)}:category:${activeCategoryGroup.tag}`}
|
||
entry={entry}
|
||
badge={activeCategoryGroup.tag}
|
||
metaLabel={entry.authorDisplayName}
|
||
onClick={() => onOpenGalleryDetail(entry)}
|
||
className="h-[15rem] w-full min-w-0 sm:h-[16rem]"
|
||
/>
|
||
))}
|
||
</div>
|
||
</>
|
||
) : (
|
||
<EmptyShelf text="公开广场暂时还没有可分类的作品。" />
|
||
)}
|
||
</section>
|
||
</div>
|
||
);
|
||
|
||
const createContent: ReactNode = createTabContent ?? (
|
||
<div className={MOBILE_PAGE_STAGE_CLASS}>
|
||
<button
|
||
type="button"
|
||
onClick={onOpenCreateTypePicker}
|
||
className={`${HERO_SURFACE_CLASS} relative block w-full overflow-hidden px-4 py-4 text-left`}
|
||
>
|
||
<div className="absolute inset-0 bg-[var(--platform-hero-overlay-strong)]" />
|
||
<div className="relative z-10 flex min-h-[10rem] flex-col justify-between">
|
||
<span className="platform-pill platform-pill--cool w-fit">
|
||
CREATE
|
||
</span>
|
||
<div className="min-w-0">
|
||
<div className="break-all text-[clamp(1.6rem,7.4vw,1.92rem)] font-black leading-tight text-white">
|
||
开启新的创作
|
||
</div>
|
||
<div className="mt-2 max-w-[28rem] break-all text-sm leading-6 text-zinc-200/88">
|
||
先选择游戏类型，再进入对应的创作工作台继续推进。
|
||
</div>
|
||
<div className="mt-4 flex items-center gap-2 text-sm font-semibold text-white/90">
|
||
<span>选择类型并继续</span>
|
||
<ArrowRight className="h-4 w-4" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
|
||
<section>
|
||
<SectionHeader title="我的创作" detail="草稿与已发布" />
|
||
{isLoadingPlatform ? (
|
||
<EmptyShelf text="正在读取你的作品..." />
|
||
) : myEntries.length > 0 ? (
|
||
<div className="grid grid-cols-2 gap-2.5 sm:gap-3 xl:grid-cols-3">
|
||
{myEntries.map(
|
||
(entry: CustomWorldLibraryEntry<CustomWorldProfile>) => (
|
||
<CreationLibraryCard
|
||
key={`${entry.ownerUserId}:${entry.profileId}:mine`}
|
||
entry={entry}
|
||
onClick={() => onOpenLibraryDetail(entry)}
|
||
onDelete={
|
||
onDeleteLibraryEntry
|
||
? () => onDeleteLibraryEntry(entry)
|
||
: undefined
|
||
}
|
||
isDeleting={deletingLibraryEntryId === entry.profileId}
|
||
/>
|
||
),
|
||
)}
|
||
</div>
|
||
) : (
|
||
<EmptyShelf
|
||
text={
|
||
isAuthenticated
|
||
? '你还没有保存任何自定义世界，先创建一个草稿开始吧。'
|
||
: '登录后查看你的作品。'
|
||
}
|
||
/>
|
||
)}
|
||
</section>
|
||
</div>
|
||
);
|
||
|
||
const savesContent: ReactNode = (
|
||
<div className={MOBILE_PAGE_STAGE_CLASS}>
|
||
{authUi?.user ? (
|
||
<>
|
||
{saveError ? (
|
||
<div className="rounded-2xl border border-rose-400/20 bg-rose-500/10 px-4 py-3 text-sm leading-6 text-rose-700">
|
||
{saveError}
|
||
</div>
|
||
) : null}
|
||
|
||
<section className={`${PANEL_SURFACE_CLASS} px-4 py-3.5`}>
|
||
<SectionHeader title="全部存档" detail="最近更新时间排序" />
|
||
{isLoadingPlatform ? (
|
||
<EmptyShelf text="正在读取存档..." />
|
||
) : saveEntries.length > 0 ? (
|
||
<div className="grid gap-3 md:grid-cols-2">
|
||
{saveEntries.map((entry) => (
|
||
<SaveArchiveCard
|
||
key={entry.worldKey}
|
||
entry={entry}
|
||
loading={isResumingSaveWorldKey === entry.worldKey}
|
||
onClick={() => onResumeSave(entry)}
|
||
/>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<EmptyShelf text="还没有可恢复的存档，去首页开始一段新的游玩吧。" />
|
||
)}
|
||
</section>
|
||
</>
|
||
) : (
|
||
<section className={`${PANEL_SURFACE_CLASS} px-4 py-3.5`}>
|
||
<div className="platform-subpanel rounded-[1.35rem] px-4 py-4">
|
||
<div className="text-base font-semibold text-[var(--platform-text-strong)]">
|
||
尚未登录
|
||
</div>
|
||
<button
|
||
type="button"
|
||
onClick={() => authUi?.openLoginModal()}
|
||
className="platform-button platform-button--primary mt-4"
|
||
>
|
||
登录
|
||
</button>
|
||
</div>
|
||
</section>
|
||
)}
|
||
</div>
|
||
);
|
||
|
||
const profileContent: ReactNode = (
|
||
<div className={MOBILE_PAGE_STAGE_CLASS}>
|
||
{authUi?.user ? (
|
||
<>
|
||
<section className="platform-profile-hero rounded-[1.8rem] p-4">
|
||
<div className="flex items-start justify-between gap-3">
|
||
<div className="flex min-w-0 items-center gap-3">
|
||
<button
|
||
type="button"
|
||
onClick={() => authUi.openAccountModal()}
|
||
className="platform-profile-avatar relative h-16 w-16 shrink-0 rounded-[1.4rem]"
|
||
>
|
||
<span className="flex h-full w-full items-center justify-center text-2xl font-black">
|
||
{avatarLabel}
|
||
</span>
|
||
<span className="platform-profile-camera absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full">
|
||
<Camera className="h-3.5 w-3.5" />
|
||
</span>
|
||
</button>
|
||
|
||
<div className="min-w-0">
|
||
<div className="flex items-center gap-2">
|
||
<div className="truncate text-xl font-black text-[var(--platform-text-strong)]">
|
||
{authUi.user.displayName}
|
||
</div>
|
||
<button
|
||
type="button"
|
||
onClick={() => authUi.openAccountModal()}
|
||
className="platform-profile-icon-button flex h-7 w-7 items-center justify-center rounded-full"
|
||
>
|
||
<Pencil className="h-3.5 w-3.5" />
|
||
</button>
|
||
</div>
|
||
<div className="mt-1 flex flex-wrap items-center gap-2 text-xs text-[var(--platform-text-soft)]">
|
||
<span>叙世号 {publicUserCode}</span>
|
||
<button
|
||
type="button"
|
||
onClick={() => copyText(publicUserCode)}
|
||
className="platform-profile-chip flex items-center gap-1 rounded-full px-2 py-1"
|
||
>
|
||
<Copy className="h-3 w-3" />
|
||
复制
|
||
</button>
|
||
</div>
|
||
<div className="mt-2 flex flex-wrap items-center gap-2 text-xs">
|
||
<span className="platform-profile-chip rounded-full px-2.5 py-1">
|
||
{describeLoginMethod(authUi.user.loginMethod)}
|
||
</span>
|
||
<span className="platform-profile-chip rounded-full px-2.5 py-1">
|
||
{describeBindingStatus(authUi.user.bindingStatus)}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button
|
||
type="button"
|
||
onClick={openRechargePanel}
|
||
className="platform-profile-action flex shrink-0 items-center gap-2 rounded-[1.1rem] px-3 py-2 text-left"
|
||
>
|
||
<Crown className="h-4 w-4" />
|
||
<div>
|
||
<div className="text-xs font-bold">会员充值</div>
|
||
<div className="text-[10px] opacity-80">
|
||
{rechargeCenter?.membership.status === 'active'
|
||
? '叙世会员'
|
||
: '普通用户'}
|
||
</div>
|
||
</div>
|
||
<ChevronRight className="h-4 w-4 opacity-80" />
|
||
</button>
|
||
</div>
|
||
</section>
|
||
|
||
<section className={`${PANEL_SURFACE_CLASS} px-4 py-3.5`}>
|
||
<div className="grid grid-cols-3 gap-3">
|
||
{isLoadingDashboard ? (
|
||
<>
|
||
<ProfileStatCardSkeleton />
|
||
<ProfileStatCardSkeleton />
|
||
<ProfileStatCardSkeleton />
|
||
</>
|
||
) : dashboardError ? (
|
||
<>
|
||
<ProfileStatCard
|
||
cardKey="wallet"
|
||
label="剩余叙世币"
|
||
value="暂不可用"
|
||
icon={Coins}
|
||
onClick={openWalletLedgerPanel}
|
||
/>
|
||
<ProfileStatCard
|
||
cardKey="playTime"
|
||
label="总游戏时长"
|
||
value="暂不可用"
|
||
icon={Clock3}
|
||
onClick={onOpenProfileDashboardCard}
|
||
/>
|
||
<ProfileStatCard
|
||
cardKey="playedWorks"
|
||
label="玩过作品"
|
||
value="暂不可用"
|
||
icon={BookOpen}
|
||
onClick={onOpenProfileDashboardCard}
|
||
/>
|
||
</>
|
||
) : (
|
||
<>
|
||
<ProfileStatCard
|
||
cardKey="wallet"
|
||
label="剩余叙世币"
|
||
value={formatDashboardCount(remainingNarrativeCoins)}
|
||
icon={Coins}
|
||
onClick={openWalletLedgerPanel}
|
||
/>
|
||
<ProfileStatCard
|
||
cardKey="playTime"
|
||
label="总游戏时长"
|
||
value={totalPlayTime}
|
||
icon={Clock3}
|
||
onClick={onOpenProfileDashboardCard}
|
||
/>
|
||
<ProfileStatCard
|
||
cardKey="playedWorks"
|
||
label="玩过作品"
|
||
value={formatDashboardCount(playedWorkCount)}
|
||
icon={BookOpen}
|
||
onClick={onOpenProfileDashboardCard}
|
||
/>
|
||
</>
|
||
)}
|
||
</div>
|
||
<div className="mt-3 text-[11px] text-[var(--platform-text-soft)]">
|
||
{dashboardError
|
||
? dashboardError
|
||
: `更新于 ${formatDashboardUpdatedAt(profileDashboard?.updatedAt)}`}
|
||
</div>
|
||
</section>
|
||
|
||
<section className={`${PANEL_SURFACE_CLASS} px-4 py-3.5`}>
|
||
<SectionHeader title="常用功能" detail="快捷入口" />
|
||
<div className="grid grid-cols-3 gap-3">
|
||
<ProfileShortcutButton
|
||
label="邀请好友"
|
||
icon={UserPlus}
|
||
onClick={() => openProfilePopupPanel('invite')}
|
||
/>
|
||
<ProfileShortcutButton
|
||
label="填邀请码"
|
||
icon={Ticket}
|
||
onClick={() => openProfilePopupPanel('redeem')}
|
||
/>
|
||
<ProfileShortcutButton
|
||
label="玩家社区"
|
||
icon={MessageCircle}
|
||
onClick={() => openProfilePopupPanel('community')}
|
||
/>
|
||
</div>
|
||
</section>
|
||
|
||
<section className={`${PANEL_SURFACE_CLASS} px-4 py-3.5`}>
|
||
<button
|
||
type="button"
|
||
onClick={() => authUi.openSettingsModal()}
|
||
className="platform-subpanel platform-interactive-card flex w-full items-center justify-between gap-3 rounded-[1.25rem] px-4 py-4 text-left transition hover:border-[var(--platform-surface-hover-border)] hover:bg-[var(--platform-button-secondary-fill)]"
|
||
>
|
||
<div className="flex items-center gap-3">
|
||
<div className="platform-profile-chip flex h-10 w-10 items-center justify-center rounded-full">
|
||
<Settings className="h-[1.125rem] w-[1.125rem]" />
|
||
</div>
|
||
<div>
|
||
<div className="text-base font-semibold text-[var(--platform-text-strong)]">
|
||
设置
|
||
</div>
|
||
<div className="text-xs text-[var(--platform-text-soft)]">
|
||
主题与账号
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<ChevronRight className="h-4 w-4 text-[var(--platform-text-soft)]" />
|
||
</button>
|
||
</section>
|
||
</>
|
||
) : (
|
||
<section className={`${PANEL_SURFACE_CLASS} px-4 py-3.5`}>
|
||
<div className="platform-subpanel rounded-[1.35rem] px-4 py-4">
|
||
<div className="text-base font-semibold text-[var(--platform-text-strong)]">
|
||
尚未登录
|
||
</div>
|
||
<button
|
||
type="button"
|
||
onClick={() => authUi?.openLoginModal()}
|
||
className="platform-button platform-button--primary mt-4"
|
||
>
|
||
登录
|
||
</button>
|
||
</div>
|
||
</section>
|
||
)}
|
||
</div>
|
||
);
|
||
|
||
const desktopHomeContent: ReactNode = (
|
||
<div className={DESKTOP_PAGE_STAGE_CLASS}>
|
||
{platformError ? (
|
||
<div className="rounded-[1.5rem] border border-rose-400/20 bg-rose-500/10 px-4 py-3 text-sm leading-6 text-rose-700">
|
||
{platformError}
|
||
</div>
|
||
) : null}
|
||
|
||
<div className="grid gap-5 xl:grid-cols-[minmax(0,1.55fr)_22rem]">
|
||
<button
|
||
type="button"
|
||
onClick={openLeadPublicEntry}
|
||
className={`${HERO_SURFACE_CLASS} relative block overflow-hidden px-7 py-6 text-left`}
|
||
>
|
||
{desktopHeroCover ? (
|
||
<ResolvedAssetBackdrop
|
||
src={desktopHeroCover}
|
||
alt=""
|
||
aria-hidden="true"
|
||
className="absolute inset-0 h-full w-full object-cover opacity-34"
|
||
/>
|
||
) : null}
|
||
<div className="absolute inset-0 bg-[var(--platform-hero-overlay-strong)]" />
|
||
<div className="relative z-10 flex min-h-[24rem] flex-col justify-between">
|
||
<div className="flex items-start justify-between gap-4">
|
||
<span className="platform-pill platform-pill--warm">作品</span>
|
||
<span className="platform-pill platform-pill--neutral px-3">
|
||
{leadPublicEntry
|
||
? describePublicGalleryCardKind(leadPublicEntry)
|
||
: '作品广场'}
|
||
</span>
|
||
</div>
|
||
|
||
<div className="max-w-[35rem]">
|
||
<div className="text-5xl font-semibold leading-[1.08] text-white">
|
||
{leadPublicEntry?.worldName ?? '浏览玩家作品'}
|
||
</div>
|
||
<div className="mt-4 text-base leading-8 text-zinc-200/86">
|
||
{leadPublicEntry?.summaryText ||
|
||
leadPublicEntry?.subtitle ||
|
||
'从公开广场进入作品详情，挑一个世界开始游玩。'}
|
||
</div>
|
||
<div className="mt-5 inline-flex items-center gap-2 rounded-full border border-white/18 bg-white/18 px-4 py-2 text-sm font-semibold text-white/92">
|
||
<span>查看作品</span>
|
||
<ArrowRight className="h-4 w-4" />
|
||
</div>
|
||
</div>
|
||
|
||
{desktopHeroStripEntries.length > 0 ? (
|
||
<div className="grid gap-3 sm:grid-cols-5">
|
||
{desktopHeroStripEntries.map((entry, index) => {
|
||
const coverImage = resolvePlatformWorldCoverImage(entry);
|
||
return (
|
||
<div
|
||
key={`${entry.ownerUserId}:${entry.profileId}:hero-strip`}
|
||
className="platform-subpanel overflow-hidden rounded-[1.15rem]"
|
||
>
|
||
<div className="relative aspect-[1.35/1] overflow-hidden">
|
||
{coverImage ? (
|
||
<ResolvedAssetBackdrop
|
||
src={coverImage}
|
||
alt=""
|
||
aria-hidden="true"
|
||
className="h-full w-full object-cover"
|
||
/>
|
||
) : null}
|
||
<div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(255,255,255,0.04),rgba(91,24,46,0.34))]" />
|
||
</div>
|
||
<div className="flex items-center gap-2 px-3 py-2 text-[11px] text-[color:color-mix(in_srgb,var(--platform-text-base)_82%,transparent)]">
|
||
<span className="text-[var(--platform-text-soft)]">
|
||
{`${index + 1}`.padStart(2, '0')}
|
||
</span>
|
||
<span className="line-clamp-1">{entry.worldName}</span>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
</button>
|
||
|
||
<section className="platform-desktop-panel px-5 py-5">
|
||
<div className="mb-4 flex items-start justify-between gap-3">
|
||
<SectionHeader title="趋势关注" detail="TRENDING NOW" />
|
||
<span className="platform-pill platform-pill--neutral px-3">
|
||
LIVE
|
||
</span>
|
||
</div>
|
||
{isLoadingPlatform ? (
|
||
<EmptyShelf text="正在整理趋势作品..." />
|
||
) : desktopTrendingEntries.length > 0 ? (
|
||
<div className="space-y-3">
|
||
{desktopTrendingEntries.map((entry, index) => (
|
||
<DesktopTrendingItem
|
||
key={`${buildPublicGalleryCardKey(entry)}:desktop-trend`}
|
||
entry={entry}
|
||
rank={index + 1}
|
||
onClick={() => onOpenGalleryDetail(entry)}
|
||
/>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<EmptyShelf text="公开广场暂时还没有趋势作品。" />
|
||
)}
|
||
</section>
|
||
</div>
|
||
|
||
<div className="grid gap-5 2xl:grid-cols-[minmax(0,1.2fr)_minmax(22rem,0.8fr)]">
|
||
<section className="platform-desktop-panel px-5 py-5">
|
||
<SectionHeader title="精选推荐" detail="CURATED WORLDS" />
|
||
{isLoadingPlatform ? (
|
||
<EmptyShelf text="正在读取精选作品..." />
|
||
) : desktopFeaturedGrid.length > 0 ? (
|
||
<div className="grid gap-4 xl:grid-cols-2">
|
||
{desktopFeaturedGrid.map((entry) => (
|
||
<WorldCard
|
||
key={`${buildPublicGalleryCardKey(entry)}:desktop-featured`}
|
||
entry={entry}
|
||
badge="推荐"
|
||
metaLabel={describePublicGalleryCardKind(entry)}
|
||
onClick={() => onOpenGalleryDetail(entry)}
|
||
className="h-[16rem] w-full min-w-0"
|
||
/>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<EmptyShelf text="公开广场暂时还没有精选作品。" />
|
||
)}
|
||
</section>
|
||
|
||
<section className="platform-desktop-panel px-5 py-5">
|
||
<SectionHeader
|
||
title={
|
||
desktopLibraryPreview.length > 0
|
||
? '最近作品'
|
||
: historyEntries.length > 0
|
||
? '最近浏览'
|
||
: '作品广场'
|
||
}
|
||
detail="QUICK ACCESS"
|
||
/>
|
||
|
||
<div>
|
||
<div className="text-[10px] font-semibold tracking-[0.24em] text-[var(--platform-text-soft)]">
|
||
{desktopLibraryPreview.length > 0
|
||
? '最近作品'
|
||
: historyEntries.length > 0
|
||
? '最近浏览'
|
||
: '公开作品'}
|
||
</div>
|
||
|
||
{desktopLibraryPreview.length > 0 ? (
|
||
<div className="mt-3 space-y-3">
|
||
{desktopLibraryPreview.map((entry) => (
|
||
<button
|
||
key={`${entry.ownerUserId}:${entry.profileId}:desktop-mine`}
|
||
type="button"
|
||
onClick={() => onOpenLibraryDetail(entry)}
|
||
className="platform-desktop-trending-item flex w-full items-center justify-between gap-3 px-4 py-4 text-left"
|
||
>
|
||
<div className="min-w-0">
|
||
<div className="line-clamp-1 text-base font-semibold text-[var(--platform-text-strong)]">
|
||
{entry.worldName}
|
||
</div>
|
||
<div className="mt-1 text-sm text-[var(--platform-text-soft)]">
|
||
{entry.visibility === 'published'
|
||
? `发布于 ${formatPlatformWorldTime(entry.publishedAt)}`
|
||
: '草稿待完善'}
|
||
</div>
|
||
</div>
|
||
<span className="platform-pill platform-pill--neutral px-3">
|
||
{entry.visibility === 'published' ? '已发布' : '草稿'}
|
||
</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
) : historyEntries.length > 0 ? (
|
||
<div className="mt-3 space-y-3">
|
||
{historyEntries.slice(0, 2).map((entry) => (
|
||
<button
|
||
key={`${entry.ownerUserId}:${entry.profileId}:desktop-history`}
|
||
type="button"
|
||
onClick={() =>
|
||
onOpenGalleryDetail({
|
||
ownerUserId: entry.ownerUserId,
|
||
profileId: entry.profileId,
|
||
publicWorkCode: null,
|
||
authorPublicUserCode: null,
|
||
visibility: 'published',
|
||
publishedAt: entry.visitedAt,
|
||
updatedAt: entry.visitedAt,
|
||
worldName: entry.worldName,
|
||
subtitle: entry.subtitle,
|
||
summaryText: entry.summaryText,
|
||
coverImageSrc: entry.coverImageSrc,
|
||
themeMode: entry.themeMode,
|
||
authorDisplayName: entry.authorDisplayName,
|
||
playableNpcCount: 0,
|
||
landmarkCount: 0,
|
||
})
|
||
}
|
||
className="platform-desktop-trending-item flex w-full items-center justify-between gap-3 px-4 py-4 text-left"
|
||
>
|
||
<div className="min-w-0">
|
||
<div className="line-clamp-1 text-base font-semibold text-[var(--platform-text-strong)]">
|
||
{entry.worldName}
|
||
</div>
|
||
<div className="mt-1 text-sm text-[var(--platform-text-soft)]">
|
||
作者：{entry.authorDisplayName}
|
||
</div>
|
||
</div>
|
||
<span className="platform-pill platform-pill--neutral px-3">
|
||
浏览
|
||
</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<div className="platform-subpanel mt-3 rounded-[1.35rem] px-4 py-4 text-sm leading-6 text-[var(--platform-text-base)]">
|
||
公开广场暂时还没有可展示的作品。
|
||
</div>
|
||
)}
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<section className="platform-desktop-panel px-5 py-5">
|
||
<SectionHeader title="最新发布" detail="PLAYER SQUARE" />
|
||
{isLoadingPlatform ? (
|
||
<EmptyShelf text="正在读取最新发布..." />
|
||
) : desktopReleaseGrid.length > 0 ? (
|
||
<div className="grid gap-4 xl:grid-cols-3">
|
||
{desktopReleaseGrid.map((entry) => (
|
||
<WorldCard
|
||
key={`${buildPublicGalleryCardKey(entry)}:desktop-latest`}
|
||
entry={entry}
|
||
badge={describePublicGalleryCardKind(entry)}
|
||
metaLabel={entry.authorDisplayName}
|
||
onClick={() => onOpenGalleryDetail(entry)}
|
||
className="h-[17rem] w-full min-w-0"
|
||
/>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<EmptyShelf text="公开广场暂时还没有新作品。" />
|
||
)}
|
||
</section>
|
||
</div>
|
||
);
|
||
|
||
const tabContentById = {
|
||
home: isDesktopLayout ? desktopHomeContent : mobileHomeContent,
|
||
category: categoryContent,
|
||
create: createContent,
|
||
saves: savesContent,
|
||
profile: profileContent,
|
||
} satisfies Record<PlatformHomeTab, ReactNode>;
|
||
const tabPanels = PLATFORM_HOME_TABS.filter((tab) =>
|
||
visibleTabs.includes(tab),
|
||
).map((tab) => {
|
||
const shouldMountPanel = tab === activeTab || visitedTabs.has(tab);
|
||
|
||
return (
|
||
<PlatformTabPanel key={tab} tab={tab} activeTab={activeTab}>
|
||
{shouldMountPanel ? tabContentById[tab] : null}
|
||
</PlatformTabPanel>
|
||
);
|
||
});
|
||
|
||
if (!isDesktopLayout) {
|
||
return (
|
||
<div className="platform-mobile-entry-shell flex h-full min-h-0 min-w-0 flex-col overflow-hidden">
|
||
<div className="mb-3 flex shrink-0 items-center justify-between gap-3 px-0.5">
|
||
<RpgEntryBrandLogo />
|
||
{!isAuthenticated ? (
|
||
<button
|
||
type="button"
|
||
onClick={openUserSurface}
|
||
className="platform-button platform-button--primary shrink-0 px-3 py-2 text-xs"
|
||
>
|
||
<LogIn className="h-3.5 w-3.5" />
|
||
登录
|
||
</button>
|
||
) : null}
|
||
</div>
|
||
|
||
<div className="platform-tab-panel-stack min-w-0 flex-1">
|
||
{tabPanels}
|
||
</div>
|
||
|
||
<div
|
||
className="mt-3 min-w-0 shrink-0 border-t pt-2"
|
||
style={{
|
||
borderColor: 'var(--platform-line-soft)',
|
||
paddingBottom: 'calc(env(safe-area-inset-bottom) + 0.2rem)',
|
||
}}
|
||
>
|
||
<div
|
||
className={`platform-bottom-nav grid ${visibleTabs.length === 5 ? 'grid-cols-5' : visibleTabs.length === 4 ? 'grid-cols-4' : visibleTabs.length === 3 ? 'grid-cols-3' : 'grid-cols-2'}`}
|
||
>
|
||
{visibleTabs.map((tab) => (
|
||
<PlatformTabButton
|
||
key={tab}
|
||
active={activeTab === tab}
|
||
label={tabLabels[tab]}
|
||
icon={tabIcons[tab]}
|
||
emphasized={tab === 'create'}
|
||
onClick={() => onTabChange(tab)}
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
{isRechargeOpen ? (
|
||
<AccountRechargeModal
|
||
center={rechargeCenter}
|
||
activeTab={rechargeTab}
|
||
isLoading={isLoadingRecharge}
|
||
isSubmitting={submittingRechargeProductId}
|
||
error={rechargeError}
|
||
onTabChange={setRechargeTab}
|
||
onClose={() => setIsRechargeOpen(false)}
|
||
onSelectProduct={submitRechargeProduct}
|
||
/>
|
||
) : null}
|
||
{profilePopupPanel ? (
|
||
<ProfileReferralModal
|
||
panel={profilePopupPanel}
|
||
center={referralCenter}
|
||
inviteCodeInput={inviteCodeInput}
|
||
isLoading={isLoadingReferral}
|
||
isSubmitting={isSubmittingReferral}
|
||
error={referralError}
|
||
success={referralSuccess}
|
||
onClose={() => setProfilePopupPanel(null)}
|
||
onInputChange={setInviteCodeInput}
|
||
onCopyInvite={copyInviteInfo}
|
||
onSubmitRedeem={submitReferralInviteCode}
|
||
/>
|
||
) : null}
|
||
{isWalletLedgerOpen ? (
|
||
<WalletLedgerModal
|
||
ledger={walletLedger}
|
||
fallbackBalance={remainingNarrativeCoins}
|
||
isLoading={isLoadingWalletLedger}
|
||
error={walletLedgerError}
|
||
onClose={() => setIsWalletLedgerOpen(false)}
|
||
onRetry={loadWalletLedger}
|
||
/>
|
||
) : null}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="flex h-full min-h-0 flex-col">
|
||
<div className="flex h-full min-h-0 flex-col">
|
||
<div className="platform-desktop-shell flex h-full min-h-0 flex-col p-5 xl:p-6">
|
||
<div className="platform-desktop-topbar flex items-center gap-4 px-5 py-4">
|
||
<div className="flex min-w-0 flex-1 items-center gap-5">
|
||
<RpgEntryBrandLogo className="shrink-0" decorative />
|
||
<PublicCodeSearchBar
|
||
value={desktopSearchKeyword}
|
||
onChange={setDesktopSearchKeyword}
|
||
onSubmit={submitDesktopSearch}
|
||
isSearching={
|
||
!onSearchPublicCode || Boolean(isSearchingPublicCode)
|
||
}
|
||
className="max-w-[34rem] flex-1"
|
||
/>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-3">
|
||
<button
|
||
type="button"
|
||
onClick={openUserSurface}
|
||
className="platform-icon-button"
|
||
aria-label="通知与账户"
|
||
>
|
||
<Bell className="h-4 w-4" />
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={openUserSurface}
|
||
className="platform-desktop-search flex items-center gap-3 px-3 py-2.5 text-left"
|
||
>
|
||
<span
|
||
className="flex h-11 w-11 items-center justify-center rounded-full text-base font-black text-white"
|
||
style={{
|
||
background: 'var(--platform-profile-avatar-fill)',
|
||
boxShadow: 'var(--platform-profile-avatar-shadow)',
|
||
}}
|
||
>
|
||
{avatarLabel}
|
||
</span>
|
||
<span className="min-w-0">
|
||
<span className="block truncate text-sm font-semibold text-[var(--platform-text-strong)]">
|
||
{authUi?.user?.displayName || '登录'}
|
||
</span>
|
||
<span className="block truncate text-xs text-[var(--platform-text-soft)]">
|
||
{authUi?.user ? publicUserCode : '账号入口'}
|
||
</span>
|
||
</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-5 flex min-h-0 gap-5">
|
||
<aside className="platform-desktop-rail flex w-[5.8rem] shrink-0 flex-col gap-3 p-3">
|
||
{visibleTabs.map((tab) => (
|
||
<DesktopTabButton
|
||
key={tab}
|
||
active={activeTab === tab}
|
||
label={tabLabels[tab]}
|
||
icon={tabIcons[tab]}
|
||
emphasized={tab === 'create'}
|
||
onClick={() => onTabChange(tab)}
|
||
/>
|
||
))}
|
||
</aside>
|
||
|
||
<div className="platform-tab-panel-stack min-w-0 flex-1">
|
||
{tabPanels}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{isRechargeOpen ? (
|
||
<AccountRechargeModal
|
||
center={rechargeCenter}
|
||
activeTab={rechargeTab}
|
||
isLoading={isLoadingRecharge}
|
||
isSubmitting={submittingRechargeProductId}
|
||
error={rechargeError}
|
||
onTabChange={setRechargeTab}
|
||
onClose={() => setIsRechargeOpen(false)}
|
||
onSelectProduct={submitRechargeProduct}
|
||
/>
|
||
) : null}
|
||
{profilePopupPanel ? (
|
||
<ProfileReferralModal
|
||
panel={profilePopupPanel}
|
||
center={referralCenter}
|
||
inviteCodeInput={inviteCodeInput}
|
||
isLoading={isLoadingReferral}
|
||
isSubmitting={isSubmittingReferral}
|
||
error={referralError}
|
||
success={referralSuccess}
|
||
onClose={() => setProfilePopupPanel(null)}
|
||
onInputChange={setInviteCodeInput}
|
||
onCopyInvite={copyInviteInfo}
|
||
onSubmitRedeem={submitReferralInviteCode}
|
||
/>
|
||
) : null}
|
||
{isWalletLedgerOpen ? (
|
||
<WalletLedgerModal
|
||
ledger={walletLedger}
|
||
fallbackBalance={remainingNarrativeCoins}
|
||
isLoading={isLoadingWalletLedger}
|
||
error={walletLedgerError}
|
||
onClose={() => setIsWalletLedgerOpen(false)}
|
||
onRetry={loadWalletLedger}
|
||
/>
|
||
) : null}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export const PlatformHomeView = RpgEntryHomeView;
|