+
+
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..44734b3
--- /dev/null
+++ b/src/components/Topbar.tsx
@@ -0,0 +1,201 @@
+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;
+ let cleanupScrollTarget: (() => void) | undefined;
+
+ const bindScrollTarget = () => {
+ cleanupScrollTarget?.();
+ const target = document.querySelector(
+ ".ecommerce-standalone__page--workspace:not([hidden]) .clone-ai-preview",
+ );
+ if (!target) {
+ cleanupScrollTarget = undefined;
+ return;
+ }
+
+ const handleScroll = () => {
+ if (profileMenuOpen) return;
+ setIsTopbarHidden(true);
+ if (restoreTimer) window.clearTimeout(restoreTimer);
+ restoreTimer = window.setTimeout(() => {
+ setIsTopbarHidden(false);
+ }, 240);
+ };
+
+ target.addEventListener("scroll", handleScroll, { passive: true });
+ cleanupScrollTarget = () => target.removeEventListener("scroll", handleScroll);
+ };
+
+ bindScrollTarget();
+ const observer = new MutationObserver(bindScrollTarget);
+ observer.observe(document.body, { attributes: true, childList: true, subtree: true });
+
+ return () => {
+ cleanupScrollTarget?.();
+ observer.disconnect();
+ 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 ? (
+ <>
+
+ ) : (
+
+ )}
+