kdletters
6db06b6c97
融合移动端提示恢复与远端钱包刷新改动 # Conflicts: # src/components/platform-entry/PlatformEntryActiveFlowShell.test.tsx # src/components/platform-entry/PlatformEntryActiveFlowShell.tsx
717 lines
26 KiB
TypeScript
717 lines
26 KiB
TypeScript
import {
|
|
FolderKanban,
|
|
Home,
|
|
Monitor,
|
|
Palette,
|
|
Search,
|
|
UserRound,
|
|
} from 'lucide-react';
|
|
import {
|
|
type ComponentType,
|
|
type FormEvent,
|
|
lazy,
|
|
Suspense,
|
|
useCallback,
|
|
useEffect,
|
|
useState,
|
|
} from 'react';
|
|
|
|
import { PlatformMudPointWalletEntry } from '../../../packages/shared/src/components/PlatformMudPointWalletEntry';
|
|
import { PlatformProfileRechargeModal } from '../../../packages/shared/src/components/PlatformProfileRechargeModal';
|
|
import { PlatformProfileWalletLedgerModal } from '../../../packages/shared/src/components/PlatformProfileWalletLedgerModal';
|
|
import type { ProfileDashboardSummary } from '../../../packages/shared/src/contracts/runtime';
|
|
import {
|
|
pushAppHistoryPath,
|
|
replaceAppHistoryPath,
|
|
} from '../../routing/activeAppPageRoutes';
|
|
import { getPlatformProfileDashboard } from '../../services/platform-entry/platformProfileClient';
|
|
import { usePlatformWalletStore } from '../../stores/usePlatformWalletStore';
|
|
import { useAuthUi } from '../auth/AuthUiContext';
|
|
import { FLOATING_FEEDBACK_FORM_URL } from '../common/floatingFeedbackEntryModel';
|
|
import { PlatformActionButton } from '../common/PlatformActionButton';
|
|
import { PlatformSubpanel } from '../common/PlatformSubpanel';
|
|
import {
|
|
PlatformActiveMobileWelcomeDialog,
|
|
shouldOpenActiveMobileWelcomeDialog,
|
|
} from './PlatformActiveMobileWelcomeDialog';
|
|
import {
|
|
resolveActivePublicUserCode,
|
|
resolveActiveUserAvatarLabel,
|
|
} from './platformActiveProfileModel';
|
|
import { PlatformActiveProfileView } from './PlatformActiveProfileView';
|
|
import type { PlatformEntryFlowShellProps } from './platformEntryActiveTypes';
|
|
import { usePlatformDesktopLayout } from './platformEntryResponsive';
|
|
import { PlatformProfileApiKeysModal } from './PlatformProfileApiKeysModal';
|
|
import { PlatformProfileReferralModal } from './PlatformProfileReferralModal';
|
|
import { PlatformProfileRewardCodeRedeemModal } from './PlatformProfileRewardCodeRedeemModal';
|
|
import {
|
|
PlatformRechargePaymentConfirmationMask,
|
|
PlatformRechargePaymentResultDialog,
|
|
} from './PlatformRechargePaymentStatusDialogs';
|
|
import { usePlatformProfileCenterController } from './usePlatformProfileCenterController';
|
|
|
|
const ImageCanvasEditorView = lazy(async () => {
|
|
const module = await import('../image-editor/ImageCanvasEditorView');
|
|
return { default: module.ImageCanvasEditorView };
|
|
});
|
|
|
|
const CreationLandingView = lazy(async () => {
|
|
const module = await import('../creation-home/CreationLandingView');
|
|
return { default: module.CreationLandingView };
|
|
});
|
|
|
|
const ProjectGalleryView = lazy(async () => {
|
|
const module = await import('../project/ProjectGalleryView');
|
|
return { default: module.ProjectGalleryView };
|
|
});
|
|
|
|
type ActiveRailButtonProps = {
|
|
active: boolean;
|
|
emphasized?: boolean;
|
|
icon: ComponentType<{ className?: string }>;
|
|
iconSrc: string;
|
|
label: string;
|
|
onClick: () => void;
|
|
};
|
|
|
|
function ActiveRailButton({
|
|
active,
|
|
emphasized = false,
|
|
icon: Icon,
|
|
iconSrc,
|
|
label,
|
|
onClick,
|
|
}: ActiveRailButtonProps) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
aria-current={active ? 'page' : undefined}
|
|
aria-label={label}
|
|
className={`platform-desktop-rail__button ${emphasized ? 'platform-desktop-rail__button--primary' : ''} ${active ? 'platform-desktop-rail__button--active' : ''}`}
|
|
onClick={onClick}
|
|
>
|
|
<span className="platform-desktop-rail__icon-shell">
|
|
<img
|
|
src={iconSrc}
|
|
alt=""
|
|
aria-hidden="true"
|
|
draggable={false}
|
|
className="creation-home-nav-art"
|
|
/>
|
|
<Icon
|
|
className="platform-desktop-rail__icon h-[1.1rem] w-[1.1rem]"
|
|
aria-hidden="true"
|
|
/>
|
|
</span>
|
|
<span className="platform-desktop-rail__label text-[11px] font-semibold">
|
|
{label}
|
|
</span>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
function ActiveBottomNavButton({
|
|
active,
|
|
emphasized = false,
|
|
icon: Icon,
|
|
label,
|
|
onClick,
|
|
}: Omit<ActiveRailButtonProps, 'iconSrc'>) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
aria-current={active ? 'page' : undefined}
|
|
aria-label={label}
|
|
className={`platform-bottom-nav__button ${emphasized ? 'platform-bottom-nav__button--primary' : ''} ${active ? 'platform-bottom-nav__button--active' : ''}`}
|
|
onClick={onClick}
|
|
>
|
|
<span className="platform-bottom-nav__button-content">
|
|
<span className="platform-bottom-nav__icon-shell">
|
|
<Icon className="platform-bottom-nav__icon" aria-hidden="true" />
|
|
</span>
|
|
<span className="platform-bottom-nav__label">{label}</span>
|
|
{active ? (
|
|
<span
|
|
aria-hidden="true"
|
|
className="platform-bottom-nav__active-mark"
|
|
/>
|
|
) : null}
|
|
</span>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
function MobileProfileDock({
|
|
active,
|
|
onOpenProfile,
|
|
}: {
|
|
active: boolean;
|
|
onOpenProfile: () => void;
|
|
}) {
|
|
return (
|
|
<div className="platform-mobile-bottom-dock min-w-0 shrink-0 lg:hidden">
|
|
<nav
|
|
className="platform-bottom-nav grid grid-cols-1"
|
|
aria-label="移动平台导航"
|
|
>
|
|
<ActiveBottomNavButton
|
|
active={active}
|
|
icon={UserRound}
|
|
label="我的"
|
|
onClick={onOpenProfile}
|
|
/>
|
|
</nav>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ActivePlatformBrand() {
|
|
return (
|
|
<span
|
|
className="creation-home-brand-lockup shrink-0"
|
|
role="img"
|
|
aria-label="陶泥儿 GENARRATIVE"
|
|
>
|
|
<span className="platform-brand-logo">
|
|
<img
|
|
src="/branding/taonier-product-ip.png"
|
|
alt=""
|
|
aria-hidden="true"
|
|
draggable={false}
|
|
className="platform-brand-logo__image"
|
|
/>
|
|
<span className="platform-brand-logo__copy">
|
|
<span className="platform-brand-logo__title">
|
|
陶泥<span className="platform-brand-logo__title-suffix">儿</span>
|
|
</span>
|
|
<span className="platform-brand-logo__subtitle">GENARRATIVE</span>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
function LoadingPanel({ label }: { label: string }) {
|
|
return (
|
|
<div className="flex h-full min-h-[12rem] items-center justify-center text-sm font-semibold text-[var(--platform-text-soft)]">
|
|
{label}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function MobileCreationDesktopGuide({
|
|
onReturnHome,
|
|
}: {
|
|
onReturnHome: () => void;
|
|
}) {
|
|
return (
|
|
<main
|
|
className="flex min-h-full flex-1 items-center justify-center px-4 py-8"
|
|
aria-label="桌面端创作提示"
|
|
>
|
|
<PlatformSubpanel
|
|
as="section"
|
|
radius="xl"
|
|
padding="none"
|
|
className="platform-remap-surface w-full max-w-sm px-5 py-6 text-center"
|
|
>
|
|
<span className="mx-auto flex h-14 w-14 items-center justify-center rounded-[1.05rem] bg-[rgba(199,101,50,0.12)] text-[var(--platform-accent-strong)]">
|
|
<Monitor aria-hidden="true" className="h-7 w-7" />
|
|
</span>
|
|
<h1 className="mt-4 text-xl font-black leading-tight text-[var(--platform-text-strong)]">
|
|
请在桌面端打开创作主页
|
|
</h1>
|
|
<p className="mt-3 text-sm font-semibold leading-6 text-[var(--platform-text-base)]">
|
|
图片画布、项目管理和素材库需要更大的操作空间。
|
|
</p>
|
|
<PlatformActionButton
|
|
onClick={onReturnHome}
|
|
size="md"
|
|
shape="pill"
|
|
className="mt-5 min-h-11 w-full"
|
|
>
|
|
<Home aria-hidden="true" className="h-4 w-4" />
|
|
返回首页
|
|
</PlatformActionButton>
|
|
</PlatformSubpanel>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
export function PlatformEntryFlowShellImpl({
|
|
selectionStage,
|
|
setSelectionStage,
|
|
}: PlatformEntryFlowShellProps) {
|
|
const authUi = useAuthUi();
|
|
const [dashboard, setDashboard] = useState<ProfileDashboardSummary | null>(
|
|
null,
|
|
);
|
|
const [isLoadingDashboard, setIsLoadingDashboard] = useState(false);
|
|
const [isApiKeysOpen, setIsApiKeysOpen] = useState(false);
|
|
const [searchInput, setSearchInput] = useState('');
|
|
const [activeSearchKeyword, setActiveSearchKeyword] = useState('');
|
|
const [isMobileDesktopGuideOpen, setIsMobileDesktopGuideOpen] =
|
|
useState(false);
|
|
const [isMobileHomeWelcomeDismissed, setIsMobileHomeWelcomeDismissed] =
|
|
useState(false);
|
|
const isDesktopLayout = usePlatformDesktopLayout();
|
|
const platformThemeClass =
|
|
authUi?.platformTheme === 'dark'
|
|
? 'platform-theme--dark'
|
|
: 'platform-theme--light';
|
|
const shouldOpenMobileHomeWelcome = shouldOpenActiveMobileWelcomeDialog({
|
|
isDesktopLayout,
|
|
selectionStage,
|
|
platformTab: selectionStage,
|
|
pathname:
|
|
typeof window === 'undefined' ? '/' : window.location.pathname,
|
|
isDismissed: isMobileHomeWelcomeDismissed,
|
|
});
|
|
const currentWalletOwnerUserId =
|
|
authUi?.canAccessProtectedData && authUi.user?.id ? authUi.user.id : null;
|
|
const walletOwnerUserId = usePlatformWalletStore(
|
|
(state) => state.ownerUserId,
|
|
);
|
|
const storedMudPointBalance = usePlatformWalletStore(
|
|
(state) => state.mudPointBalance,
|
|
);
|
|
const storedLegacyWalletBalance = usePlatformWalletStore(
|
|
(state) => state.legacyWalletBalance,
|
|
);
|
|
const storedMudPointBalanceStatus = usePlatformWalletStore(
|
|
(state) => state.mudPointBalanceStatus,
|
|
);
|
|
const storedMudPointBalanceError = usePlatformWalletStore(
|
|
(state) => state.mudPointBalanceError,
|
|
);
|
|
const walletOwnerMatchesCurrentUser =
|
|
Boolean(currentWalletOwnerUserId) &&
|
|
walletOwnerUserId === currentWalletOwnerUserId;
|
|
const mudPointBalance = walletOwnerMatchesCurrentUser
|
|
? storedMudPointBalance
|
|
: null;
|
|
const mudPointBalanceError = walletOwnerMatchesCurrentUser
|
|
? storedMudPointBalanceError
|
|
: '';
|
|
const isWalletBalanceLoading =
|
|
Boolean(currentWalletOwnerUserId) &&
|
|
(!walletOwnerMatchesCurrentUser ||
|
|
storedMudPointBalanceStatus === 'idle' ||
|
|
storedMudPointBalanceStatus === 'loading');
|
|
|
|
const refreshDashboard = useCallback(async () => {
|
|
if (!authUi?.user || !authUi.canAccessProtectedData) {
|
|
setDashboard(null);
|
|
return;
|
|
}
|
|
setIsLoadingDashboard(true);
|
|
try {
|
|
setDashboard(await getPlatformProfileDashboard());
|
|
} catch {
|
|
setDashboard(null);
|
|
} finally {
|
|
setIsLoadingDashboard(false);
|
|
}
|
|
}, [authUi?.canAccessProtectedData, authUi?.user]);
|
|
|
|
useEffect(() => {
|
|
void refreshDashboard();
|
|
}, [refreshDashboard]);
|
|
|
|
const isProfileStage =
|
|
selectionStage === 'profile' ||
|
|
(!isDesktopLayout && selectionStage === 'platform');
|
|
|
|
const profileCenter = usePlatformProfileCenterController({
|
|
activeTab: isProfileStage ? 'profile' : 'project',
|
|
isAuthenticated: Boolean(authUi?.user),
|
|
showRechargeEntry: true,
|
|
requestLogin: () => authUi?.openLoginModal(),
|
|
currentUser: authUi?.user,
|
|
});
|
|
const legacyWalletBalance = walletOwnerMatchesCurrentUser
|
|
? (storedLegacyWalletBalance ??
|
|
profileCenter.rechargeCenter?.walletBalance ??
|
|
null)
|
|
: null;
|
|
|
|
const openCreation = useCallback(() => {
|
|
if (!isDesktopLayout) {
|
|
setIsMobileDesktopGuideOpen(true);
|
|
return;
|
|
}
|
|
pushAppHistoryPath('/creation');
|
|
setSelectionStage('creation-home', { path: '/creation' });
|
|
}, [isDesktopLayout, setSelectionStage]);
|
|
|
|
const openProjects = useCallback(() => {
|
|
if (!isDesktopLayout) {
|
|
setIsMobileDesktopGuideOpen(true);
|
|
return;
|
|
}
|
|
pushAppHistoryPath('/project');
|
|
setSelectionStage('project', { path: '/project' });
|
|
}, [isDesktopLayout, setSelectionStage]);
|
|
|
|
const openProfile = useCallback(() => {
|
|
pushAppHistoryPath('/profile');
|
|
setSelectionStage('profile', { path: '/profile' });
|
|
}, [setSelectionStage]);
|
|
|
|
const openEditorProject = useCallback(
|
|
(projectId: string, options?: { guide?: boolean; tool?: string }) => {
|
|
if (!isDesktopLayout) {
|
|
setIsMobileDesktopGuideOpen(true);
|
|
return;
|
|
}
|
|
const params = new URLSearchParams();
|
|
params.set('projectid', projectId);
|
|
if (options?.guide) {
|
|
params.set('guide', 'toolbar');
|
|
}
|
|
if (options?.tool) {
|
|
params.set('tool', options.tool);
|
|
}
|
|
const path = `/editor/canvas?${params.toString()}`;
|
|
pushAppHistoryPath(path);
|
|
setSelectionStage('image-editor', { path });
|
|
},
|
|
[isDesktopLayout, setSelectionStage],
|
|
);
|
|
|
|
const replaceWithProjectGallery = useCallback(() => {
|
|
replaceAppHistoryPath('/project');
|
|
setSelectionStage('project', { path: '/project' });
|
|
}, [setSelectionStage]);
|
|
|
|
const isMobileToolStage =
|
|
!isDesktopLayout &&
|
|
(selectionStage === 'creation-home' ||
|
|
selectionStage === 'project' ||
|
|
selectionStage === 'image-editor');
|
|
|
|
if ((!isDesktopLayout && isMobileDesktopGuideOpen) || isMobileToolStage) {
|
|
return (
|
|
<>
|
|
<MobileCreationDesktopGuide
|
|
onReturnHome={() => {
|
|
setIsMobileDesktopGuideOpen(false);
|
|
if (selectionStage === 'platform') {
|
|
return;
|
|
}
|
|
setSelectionStage('platform', { path: '/' });
|
|
}}
|
|
/>
|
|
<MobileProfileDock active={false} onOpenProfile={openProfile} />
|
|
<PlatformActiveMobileWelcomeDialog
|
|
open={shouldOpenMobileHomeWelcome}
|
|
platformThemeClass={platformThemeClass}
|
|
onClose={() => setIsMobileHomeWelcomeDismissed(true)}
|
|
/>
|
|
</>
|
|
);
|
|
}
|
|
|
|
if (selectionStage === 'image-editor') {
|
|
return (
|
|
<div className="image-editor-stage-shell flex h-full min-h-0 min-w-0 flex-col overflow-hidden">
|
|
<Suspense fallback={<LoadingPanel label="正在加载编辑器..." />}>
|
|
<ImageCanvasEditorView
|
|
legacyWalletBalance={legacyWalletBalance}
|
|
onProjectAccessLost={replaceWithProjectGallery}
|
|
/>
|
|
</Suspense>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const isAuthenticated = Boolean(authUi?.user);
|
|
const balance = mudPointBalance?.totalPoints ?? legacyWalletBalance;
|
|
const isCreationStage =
|
|
!isProfileStage &&
|
|
(selectionStage === 'platform' || selectionStage === 'creation-home');
|
|
const avatarUrl = authUi?.user?.avatarUrl?.trim() || null;
|
|
const avatarLabel = resolveActiveUserAvatarLabel(authUi?.user);
|
|
const publicUserCode = resolveActivePublicUserCode(authUi?.user);
|
|
const openRecharge = () => {
|
|
profileCenter.setIsRechargeOpen(true);
|
|
profileCenter.loadRechargeCenter();
|
|
};
|
|
const openUserSurface = () => {
|
|
if (isAuthenticated) {
|
|
authUi?.openAccountModal();
|
|
return;
|
|
}
|
|
authUi?.openLoginModal();
|
|
};
|
|
const openFeedback = () => {
|
|
window.open(FLOATING_FEEDBACK_FORM_URL, '_blank', 'noopener,noreferrer');
|
|
};
|
|
const submitSearch = (event: FormEvent<HTMLFormElement>) => {
|
|
event.preventDefault();
|
|
const keyword = searchInput.trim();
|
|
setActiveSearchKeyword(keyword);
|
|
if (isProfileStage) {
|
|
openCreation();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
className={`flex h-full min-h-0 min-w-0 flex-col overflow-hidden ${isCreationStage ? 'creation-home-stage--landing' : ''}`}
|
|
>
|
|
<div className="platform-desktop-shell platform-desktop-shell--workbench platform-mobile-entry-shell flex h-full min-h-0 flex-col">
|
|
<div className="platform-desktop-layout flex min-h-0 flex-1">
|
|
<aside className="platform-desktop-leftbar hidden shrink-0 flex-col lg:flex">
|
|
<ActivePlatformBrand />
|
|
<nav
|
|
className="platform-desktop-rail flex shrink-0 flex-col gap-3"
|
|
aria-label="平台导航"
|
|
>
|
|
<ActiveRailButton
|
|
active={isCreationStage}
|
|
emphasized={isCreationStage}
|
|
icon={Palette}
|
|
iconSrc="/creation-home/nav-create.png"
|
|
label="创作"
|
|
onClick={openCreation}
|
|
/>
|
|
<ActiveRailButton
|
|
active={selectionStage === 'project'}
|
|
icon={FolderKanban}
|
|
iconSrc="/creation-home/nav-projects.png"
|
|
label="项目"
|
|
onClick={openProjects}
|
|
/>
|
|
<ActiveRailButton
|
|
active={isProfileStage}
|
|
icon={UserRound}
|
|
iconSrc="/creation-home/nav-profile.png"
|
|
label="我的"
|
|
onClick={openProfile}
|
|
/>
|
|
</nav>
|
|
</aside>
|
|
|
|
<div className="platform-desktop-main flex min-w-0 flex-1 flex-col">
|
|
<header className="platform-desktop-topbar flex min-h-16 shrink-0 items-center justify-between gap-1 px-4 sm:gap-3 sm:px-6">
|
|
<div className="min-w-0 shrink-0 lg:hidden">
|
|
<ActivePlatformBrand />
|
|
</div>
|
|
<div className="platform-desktop-topbar__brand-search hidden min-w-0 flex-1 items-center lg:flex">
|
|
<form
|
|
className="platform-desktop-search flex w-full max-w-[34rem] items-center gap-2 px-3 py-2"
|
|
role="search"
|
|
onSubmit={submitSearch}
|
|
>
|
|
<img
|
|
src="/creation-home/topbar-search.png"
|
|
alt=""
|
|
aria-hidden="true"
|
|
className="creation-home-topbar-art creation-home-topbar-art--search"
|
|
/>
|
|
<Search className="h-4 w-4 shrink-0" aria-hidden="true" />
|
|
<input
|
|
type="search"
|
|
value={searchInput}
|
|
placeholder="搜索项目、素材、作者或描述"
|
|
aria-label="搜索项目和素材"
|
|
className="min-w-0 flex-1 bg-transparent text-sm text-[var(--platform-text-strong)] outline-none placeholder:text-[var(--platform-text-soft)]"
|
|
onChange={(event) => {
|
|
const value = event.target.value;
|
|
setSearchInput(value);
|
|
if (!value.trim()) {
|
|
setActiveSearchKeyword('');
|
|
}
|
|
}}
|
|
/>
|
|
<button
|
|
type="submit"
|
|
className="shrink-0 text-sm font-semibold text-[var(--platform-text-base)]"
|
|
>
|
|
搜索
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div className="platform-desktop-topbar__actions flex shrink-0 items-center gap-1 sm:gap-2 lg:gap-3">
|
|
{isAuthenticated ? (
|
|
<PlatformMudPointWalletEntry
|
|
variant={isDesktopLayout ? 'desktop' : 'mobile'}
|
|
balance={balance}
|
|
breakdown={mudPointBalance}
|
|
isLoading={isWalletBalanceLoading}
|
|
error={mudPointBalanceError || null}
|
|
className={
|
|
isDesktopLayout
|
|
? 'platform-desktop-create-wallet-chip'
|
|
: 'platform-mobile-create-wallet-chip'
|
|
}
|
|
onRequestDetails={profileCenter.loadRechargeCenter}
|
|
onRecharge={openRecharge}
|
|
onOpenLedger={profileCenter.openWalletLedgerPanel}
|
|
/>
|
|
) : null}
|
|
<button
|
|
type="button"
|
|
onClick={openUserSurface}
|
|
className="platform-account-entry platform-desktop-search flex items-center gap-1 px-1 py-1 text-left sm:gap-2 sm:px-2 lg:gap-3 lg:px-3 lg:py-2.5"
|
|
>
|
|
<span
|
|
className="flex h-11 w-11 items-center justify-center overflow-hidden rounded-full text-base font-black text-white"
|
|
style={{
|
|
background: 'var(--platform-profile-avatar-fill)',
|
|
boxShadow: 'var(--platform-profile-avatar-shadow)',
|
|
}}
|
|
>
|
|
{avatarUrl ? (
|
|
<img
|
|
src={avatarUrl}
|
|
alt=""
|
|
className="h-full w-full object-cover"
|
|
/>
|
|
) : (
|
|
avatarLabel
|
|
)}
|
|
</span>
|
|
<span className="hidden min-w-0 sm:block">
|
|
<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>
|
|
</header>
|
|
|
|
<main
|
|
id={isCreationStage ? 'platform-tab-panel-create' : undefined}
|
|
className={`platform-tab-panel min-h-0 min-w-0 flex-1 overflow-auto ${isCreationStage || isProfileStage ? '' : 'px-3 py-4 sm:px-6 sm:py-6'}`}
|
|
>
|
|
{isProfileStage ? (
|
|
<PlatformActiveProfileView
|
|
dashboard={dashboard}
|
|
isLoadingDashboard={isLoadingDashboard}
|
|
isLoadingWalletBalance={isWalletBalanceLoading}
|
|
legacyWalletBalance={legacyWalletBalance}
|
|
mudPointBalance={mudPointBalance}
|
|
user={authUi?.user}
|
|
onLogin={() => authUi?.openLoginModal()}
|
|
onOpenApiKeys={() => setIsApiKeysOpen(true)}
|
|
onOpenCommunity={() =>
|
|
profileCenter.openProfilePopupPanel('community')
|
|
}
|
|
onOpenFeedback={openFeedback}
|
|
onOpenRecharge={openRecharge}
|
|
onOpenRewardCode={profileCenter.openRewardCodeModal}
|
|
onOpenSettings={() => authUi?.openSettingsModal()}
|
|
onOpenWalletLedger={profileCenter.openWalletLedgerPanel}
|
|
onUserUpdated={(user) => authUi?.setCurrentUser(user)}
|
|
/>
|
|
) : isCreationStage ? (
|
|
<Suspense
|
|
fallback={<LoadingPanel label="正在加载创作主页..." />}
|
|
>
|
|
<CreationLandingView
|
|
onOpenProject={openEditorProject}
|
|
onOpenProjects={openProjects}
|
|
searchKeyword={activeSearchKeyword}
|
|
/>
|
|
</Suspense>
|
|
) : (
|
|
<Suspense fallback={<LoadingPanel label="正在加载项目..." />}>
|
|
<ProjectGalleryView
|
|
onOpenProject={openEditorProject}
|
|
searchKeyword={activeSearchKeyword}
|
|
/>
|
|
</Suspense>
|
|
)}
|
|
</main>
|
|
</div>
|
|
</div>
|
|
<MobileProfileDock
|
|
active={isProfileStage}
|
|
onOpenProfile={openProfile}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{profileCenter.isRechargeOpen ? (
|
|
<PlatformProfileRechargeModal
|
|
center={profileCenter.rechargeCenter}
|
|
isLoading={profileCenter.isLoadingRechargeCenter}
|
|
error={profileCenter.rechargeError}
|
|
submittingProductId={profileCenter.submittingRechargeProductId}
|
|
nativePayment={profileCenter.nativeWechatPayment}
|
|
onClose={() => profileCenter.setIsRechargeOpen(false)}
|
|
onRetry={profileCenter.loadRechargeCenter}
|
|
onBuy={profileCenter.buyRechargeProduct}
|
|
onConfirmNativePayment={profileCenter.confirmNativeWechatPayment}
|
|
onCloseNativePayment={profileCenter.closeNativeWechatPayment}
|
|
/>
|
|
) : null}
|
|
{profileCenter.isRewardCodeOpen ? (
|
|
<PlatformProfileRewardCodeRedeemModal
|
|
value={profileCenter.rewardCodeInput}
|
|
isSubmitting={profileCenter.isSubmittingRewardCode}
|
|
error={profileCenter.rewardCodeError}
|
|
success={profileCenter.rewardCodeSuccess}
|
|
onChange={profileCenter.setRewardCodeInput}
|
|
onSubmit={profileCenter.submitRewardCode}
|
|
onClose={() => profileCenter.setIsRewardCodeOpen(false)}
|
|
/>
|
|
) : null}
|
|
{profileCenter.profilePopupPanel ? (
|
|
<PlatformProfileReferralModal
|
|
panel={profileCenter.profilePopupPanel}
|
|
center={profileCenter.referralCenter}
|
|
isLoading={profileCenter.isLoadingReferral}
|
|
isSubmittingRedeem={profileCenter.isSubmittingReferralRedeem}
|
|
redeemCode={profileCenter.referralRedeemCode}
|
|
copyInviteState={profileCenter.inviteCopyState}
|
|
error={profileCenter.referralError}
|
|
success={profileCenter.referralSuccess}
|
|
onClose={profileCenter.closeProfilePopupPanel}
|
|
onCopyInvite={profileCenter.copyInviteInfo}
|
|
onRedeemCodeChange={profileCenter.setReferralRedeemCode}
|
|
onSubmitRedeemCode={profileCenter.submitReferralRedeemCode}
|
|
/>
|
|
) : null}
|
|
{isApiKeysOpen ? (
|
|
<PlatformProfileApiKeysModal onClose={() => setIsApiKeysOpen(false)} />
|
|
) : null}
|
|
{profileCenter.isWalletLedgerOpen ? (
|
|
<PlatformProfileWalletLedgerModal
|
|
ledger={profileCenter.walletLedger}
|
|
fallbackBalance={balance ?? 0}
|
|
isLoading={profileCenter.isLoadingWalletLedger}
|
|
error={profileCenter.walletLedgerError}
|
|
onClose={() => profileCenter.setIsWalletLedgerOpen(false)}
|
|
onRetry={profileCenter.loadWalletLedger}
|
|
/>
|
|
) : null}
|
|
{profileCenter.rechargePaymentResult ? (
|
|
<PlatformRechargePaymentResultDialog
|
|
result={profileCenter.rechargePaymentResult}
|
|
onClose={() => profileCenter.setRechargePaymentResult(null)}
|
|
/>
|
|
) : null}
|
|
{profileCenter.wechatRechargeOrderConfirmationState ? (
|
|
<PlatformRechargePaymentConfirmationMask
|
|
orderId={profileCenter.wechatRechargeOrderConfirmationState.orderId}
|
|
/>
|
|
) : null}
|
|
<PlatformActiveMobileWelcomeDialog
|
|
open={shouldOpenMobileHomeWelcome}
|
|
platformThemeClass={platformThemeClass}
|
|
onClose={() => setIsMobileHomeWelcomeDismissed(true)}
|
|
/>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default PlatformEntryFlowShellImpl;
|