+
+
undefined}
onOpenProject={() => undefined}
onDeleteProject={() => undefined}
diff --git a/src/components/LocalAvatar.tsx b/src/components/LocalAvatar.tsx
new file mode 100644
index 0000000..0bc7c6e
--- /dev/null
+++ b/src/components/LocalAvatar.tsx
@@ -0,0 +1,17 @@
+import type { WebUserSession } from "../types";
+
+interface LocalAvatarProps {
+ session: WebUserSession;
+ size?: "sm" | "md" | "lg";
+}
+
+export function LocalAvatar({ session, size = "md" }: LocalAvatarProps) {
+ const displayName = session.user.displayName || session.user.username || "用户";
+ const label = displayName.trim().slice(0, 1).toUpperCase() || "用";
+ const avatarUrl = session.user.avatarUrl;
+ return (
+
+ {avatarUrl ? 
: {label}}
+
+ );
+}
diff --git a/src/components/Topbar.tsx b/src/components/Topbar.tsx
new file mode 100644
index 0000000..9bba4af
--- /dev/null
+++ b/src/components/Topbar.tsx
@@ -0,0 +1,195 @@
+import { useEffect, useMemo, useState } from "react";
+import {
+ BugOutlined,
+ IdcardOutlined,
+ LoginOutlined,
+ LogoutOutlined,
+ PictureOutlined,
+ UserOutlined,
+ VideoCameraOutlined,
+ WalletOutlined,
+} from "@ant-design/icons";
+import { LocalAvatar } from "./LocalAvatar";
+import type { WebUserSession } from "../types";
+
+interface TopbarProps {
+ session: WebUserSession | null;
+ usage: { balanceCents: number; imageUsed: number; videoUsed: number };
+ profileMenuOpen: boolean;
+ onProfileMenuOpenChange: (open: boolean) => void;
+ onOpenWorkspace: () => void;
+ onOpenProfile: () => void;
+ onOpenAuth: (mode: "login" | "register") => void;
+ onLogout: () => void;
+ onBugFeedback: () => void;
+}
+
+export function Topbar({
+ session,
+ usage,
+ profileMenuOpen,
+ onProfileMenuOpenChange,
+ onOpenWorkspace,
+ onOpenProfile,
+ onOpenAuth,
+ onLogout,
+ onBugFeedback,
+}: TopbarProps) {
+ const [isTopbarHidden, setIsTopbarHidden] = useState(false);
+
+ useEffect(() => {
+ let restoreTimer: number | undefined;
+
+ const handleScroll = (event: Event) => {
+ if (profileMenuOpen) return;
+ const target = event.target;
+ const activeWorkspace = document.querySelector(".ecommerce-standalone__page--workspace:not([hidden])");
+ if (!activeWorkspace) return;
+ const isWorkspacePreviewScroll =
+ target instanceof HTMLElement && target.classList.contains("clone-ai-preview") && activeWorkspace.contains(target);
+ const isPageScroll =
+ target === document ||
+ target === document.scrollingElement ||
+ target === document.documentElement ||
+ target === document.body;
+ if (!isWorkspacePreviewScroll && !isPageScroll) return;
+
+ setIsTopbarHidden(true);
+ if (restoreTimer) window.clearTimeout(restoreTimer);
+ restoreTimer = window.setTimeout(() => {
+ setIsTopbarHidden(false);
+ }, 240);
+ };
+
+ window.addEventListener("scroll", handleScroll, { capture: true, passive: true });
+
+ return () => {
+ window.removeEventListener("scroll", handleScroll, { capture: true });
+ if (restoreTimer) window.clearTimeout(restoreTimer);
+ };
+ }, [profileMenuOpen]);
+
+ const balance = Math.max(usage.balanceCents, 0) / 100;
+ const displayName = session?.user.displayName || session?.user.username || "用户";
+ const actualWorkCount = Math.max(usage.imageUsed + usage.videoUsed, 0);
+ const shownWorkCount = actualWorkCount;
+
+ const avatarMenuStats = useMemo(
+ () => [
+ { icon:
+
+
+ );
+}
+ {session ? (
+
+
+
+ {profileMenuOpen ? (
+ <>
+
+ ) : (
+
+ )}
+