diff --git a/apps/ai-game-creator-shell/src/view/layout.tsx b/apps/ai-game-creator-shell/src/view/layout.tsx index ddaabdc62..e651f225a 100644 --- a/apps/ai-game-creator-shell/src/view/layout.tsx +++ b/apps/ai-game-creator-shell/src/view/layout.tsx @@ -2,12 +2,13 @@ import { CircleHelp, FolderKanban, Home, - LogOut, + Plus, Settings, User, } from 'lucide-react'; import { useEffect, useRef, useState } from 'react'; +import { getClientProfileDashboard } from '../services/clientApi'; import BRAND_ICON from '../../../../packages/shared/src/icons/taonier-product-ip.png'; function cx(...classNames: Array) { return classNames.filter(Boolean).join(' '); @@ -44,6 +45,131 @@ type LauncherSidebarProps = { onLogout: () => void; }; +type SidebarAccountMenuProps = { + currentUser: SidebarUserInfo; + onClose: () => void; + onLogout: () => void; + onNoticeRequest: (title: string) => void; +}; + +function formatMudPoints(value: number | null | undefined) { + if (typeof value !== 'number' || !Number.isFinite(value)) { + return '--'; + } + return Math.max(0, Math.floor(value)).toLocaleString('zh-CN'); +} + +function SidebarAccountMenu({ + currentUser, + onClose, + onLogout, + onNoticeRequest, +}: SidebarAccountMenuProps) { + const [walletBalanceLabel, setWalletBalanceLabel] = useState('--'); + const [walletBalanceStatus, setWalletBalanceStatus] = + useState('正在读取泥点余额'); + + useEffect(() => { + let disposed = false; + void getClientProfileDashboard() + .then((dashboard) => { + if (disposed) { + return; + } + setWalletBalanceLabel(formatMudPoints(dashboard.walletBalance)); + setWalletBalanceStatus('泥点余额已读取'); + }) + .catch((error) => { + if (disposed) { + return; + } + setWalletBalanceLabel('--'); + setWalletBalanceStatus( + error instanceof Error ? error.message : '泥点余额读取失败', + ); + }); + return () => { + disposed = true; + }; + }, []); + + function showNotice(title: string) { + onClose(); + onNoticeRequest(title); + } + + return ( +
+ + {currentUser.displayName || '陶泥儿用户'} + + + {currentUser.phoneNumberMasked || + currentUser.publicUserCode || + '账号信息读取中'} + +
+
+ + 剩余泥点 {walletBalanceLabel} + + +
+
+ + + +
+ ); +} + export function Sidebar({ activeView, currentUser, @@ -96,11 +222,6 @@ export function Sidebar({ setAccountMenuOpen(false); } - function showNotice(title: string) { - closeMenus(); - onNoticeRequest(title); - } - function changeView(view: LauncherView) { closeMenus(); onViewChange(view); @@ -110,10 +231,13 @@ export function Sidebar({