完善前端UI

core/frontend/src/App.tsx

@@ -21,7 +21,7 @@ import type {
 } from "./types";
 import { publicModelDisplayName } from "./model-display";
 import { generationErrorText } from "./generation-error";
-import { AccountMenu, CornerMarks, Decorations, openCommandPalette, Sidebar, ToastLike, topModuleForPage } from "./components/app-shell";
+import { AccountMenu, CornerMarks, Decorations, ModeTabs, openCommandPalette, Sidebar, ToastLike, topModuleForPage } from "./components/app-shell";
 import { SystemLoading } from "./components/loading";
 import {
   AccountPage,
@@ -1132,23 +1132,7 @@ export function App() {
       <main>
         <Decorations />
         <header className="topbar">
-          <div className="yz-mods" role="tablist" aria-label="创作模块">
-            <button
-              className={`yz-mod${topModule === "workbench" ? " active" : ""}`}
-              type="button"
-              onClick={() => navigate("dashboard")}
-            >工作台</button>
-            <button
-              className={`yz-mod${topModule === "image" ? " active" : ""}`}
-              type="button"
-              onClick={() => navigate("assetFactory")}
-            >图片创作</button>
-            <button
-              className={`yz-mod${topModule === "video" ? " active" : ""}`}
-              type="button"
-              onClick={() => navigate("projects")}
-            >视频创作</button>
-          </div>
+          <ModeTabs active={topModule} navigate={navigate} />
           <div className="right">
             <button className="top-search" type="button" onClick={() => openCommandPalette()} aria-label="搜索">
               <IconKitSvg name="search" />
@@ -1178,23 +1162,22 @@ export function App() {
             </button>
           </div>
         </header>
-        <div className="content" id="page-content">
+        <div className="content" id="page-content" key={page}>
           <CornerMarks />
           {notice && <ToastLike notice={notice} />}
           {pipelinePage || renderPage()}
         </div>
       </main>
-      {accountAnchor && (
-        <AccountMenu
-          anchorRect={accountAnchor}
-          onClose={() => setAccountAnchor(null)}
-          navigate={navigate}
-          logout={logout}
-          user={currentUser}
-          team={currentTeam}
-          canManageBilling={isOwner}
-        />
-      )}
+      <AccountMenu
+        open={accountAnchor !== null}
+        anchorRect={accountAnchor}
+        onClose={() => setAccountAnchor(null)}
+        navigate={navigate}
+        logout={logout}
+        user={currentUser}
+        team={currentTeam}
+        canManageBilling={isOwner}
+      />
     </div>
   );
 }