大量修改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 { CornerMarks, Decorations, openCommandPalette, Sidebar, ToastLike, topModuleForPage } from "./components/app-shell";
+import { AccountMenu, CornerMarks, Decorations, openCommandPalette, Sidebar, ToastLike, topModuleForPage } from "./components/app-shell";
 import { SystemLoading } from "./components/loading";
 import {
   AccountPage,
@@ -115,6 +115,7 @@ export function App() {
   const [activeProjectId, setActiveProjectId] = useState(route.projectId || "");
   const [notice, setNotice] = useState<Notice>(null);
   const [loading, setLoading] = useState(false);
+  const [accountAnchor, setAccountAnchor] = useState<DOMRect | null>(null);
 
   // 右上角 toast 自动消失:成功/信息 3s,错误 5s(此前 notice 不会自己清,导致「提示一直挂着」)
   useEffect(() => {
@@ -899,7 +900,7 @@ export function App() {
             <div>
               <h1>暂无项目</h1>
               <div className="sub">
-                <span className="mono">// 先创建一个视频项目</span>
+                <span className="mono">先创建一个视频项目</span>
               </div>
             </div>
             <div className="actions">
@@ -935,6 +936,7 @@ export function App() {
             billing={billing}
             projects={projects}
             team={currentTeam}
+            navigate={navigate}
             onRecharge={(amount, bonusPoints) => action(() => api.recharge({ amount, bonus_points: bonusPoints }), "充值成功")}
             onNotify={(type, text) => setNotice({ type, text })}
           />
@@ -966,7 +968,7 @@ export function App() {
       case "assetFactory":
         return <AssetFactoryPage navigate={navigate} />;
       case "freeCreate":
-        return <FreeCreatePage modelConfigs={modelConfigs} onNotify={(type, text) => setNotice({ type, text })} onTaskSettled={refreshFreeCreateShell} />;
+        return <FreeCreatePage modelConfigs={modelConfigs} onNotify={(type, text) => setNotice({ type, text })} onTaskSettled={refreshFreeCreateShell} onBack={() => navigate("projects")} />;
       case "imageOptimize":
         return <ImageWorkbenchPage mode="image" products={products} modelConfigs={modelConfigs} imageProductId={route.productId} initialProductId={activeProductId} onProductChange={setActiveProductId} unreadByProduct={aiUnreadByProduct} onProductViewed={markAiRead} onBack={() => navigate("assetFactory")} navigate={navigate} onGenerate={generateImages} onResume={resumeImages} onNotify={(type, text) => setNotice({ type, text })} />;
       case "modelPhoto":
@@ -1016,13 +1018,12 @@ export function App() {
       />
     );
   }
-  if (page === "pipeline" && pipelineProject) {
-    const textModel = modelConfigs.find((m) => m.capability === "text" && m.status === "active") || modelConfigs.find((m) => m.capability === "text");
-    return (
+  const pipelineTextModel = modelConfigs.find((m) => m.capability === "text" && m.status === "active") || modelConfigs.find((m) => m.capability === "text");
+  const pipelinePage = page === "pipeline" && pipelineProject ? (
       <PipelinePage
         key={pipelineProject.id}
         project={pipelineProject}
-        scriptModelName={publicModelDisplayName(textModel, "AI")}
+        scriptModelName={publicModelDisplayName(pipelineTextModel, "AI")}
         textModels={modelConfigs.filter((m) => m.capability === "text" && m.status === "active")}
         loading={loading}
         navigate={navigate}
@@ -1123,12 +1124,11 @@ export function App() {
         onSaveTimeline={(payload) => action(() => api.saveTimeline(pipelineProject.id, payload), "草稿已保存")}
         onSubmitExport={submitExport}
       />
-    );
-  }
+    ) : null;
 
   return (
     <div className="app">
-      <Sidebar page={page} navigate={navigate} user={currentUser} team={currentTeam} canManageBilling={isOwner} products={products} projects={projects} productTotal={productTotal} projectTotal={projectTotal} aiUnread={aiUnread} logout={logout} onOpenAdmin={() => navigateAdmin("")} />
+      <Sidebar page={page} navigate={navigate} user={currentUser} canManageBilling={isOwner} products={products} projects={projects} productTotal={productTotal} projectTotal={projectTotal} aiUnread={aiUnread} onOpenAdmin={() => navigateAdmin("")} />
       <main>
         <Decorations />
         <header className="topbar">
@@ -1163,17 +1163,38 @@ export function App() {
               <IconKitSvg name="bell" />
               {unreadCount > 0 && <span className="count-noti">{unreadCount}</span>}
             </button>
-            <div className="topbar-avatar" onDoubleClick={logout} title="账户(双击退出)">
+            <button
+              className="topbar-avatar"
+              type="button"
+              title="账户"
+              aria-haspopup="menu"
+              aria-expanded={accountAnchor !== null}
+              onClick={(event) => {
+                const rect = event.currentTarget.getBoundingClientRect();
+                setAccountAnchor((prev) => (prev ? null : rect));
+              }}
+            >
               {currentUser.avatar_url ? <img src={currentUser.avatar_url} alt="头像" /> : <span>{avatarChar}</span>}
-            </div>
+            </button>
           </div>
         </header>
         <div className="content" id="page-content">
           <CornerMarks />
           {notice && <ToastLike notice={notice} />}
-          {renderPage()}
+          {pipelinePage || renderPage()}
         </div>
       </main>
+      {accountAnchor && (
+        <AccountMenu
+          anchorRect={accountAnchor}
+          onClose={() => setAccountAnchor(null)}
+          navigate={navigate}
+          logout={logout}
+          user={currentUser}
+          team={currentTeam}
+          canManageBilling={isOwner}
+        />
+      )}
     </div>
   );
 }