From e3d8fc092d61bbd52edd30b35791c150b48bf988 Mon Sep 17 00:00:00 2001
From: HouYunFei <1844025705@qq.com>
Date: Thu, 21 May 2026 15:10:57 +0800
Subject: [PATCH] =?UTF-8?q?refactor(auth):=20=E7=A7=BB=E9=99=A4=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E7=99=BB=E5=87=BA=E5=8A=9F=E8=83=BD=E5=B9=B6=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E5=AF=BC=E8=88=AA=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 从 app-top-nav.tsx 中移除登出相关代码和 LogOut 图标
- 从 canvas-client-page.tsx 中移除用户信息显示和登出回调函数
- 从 admin layout.tsx 中移除登出菜单项
- 将 navigation-tools 从 lib 目录迁移到 constant 目录
- 更新 UserStatusActions 组件以简化用户菜单逻辑
- 在用户状态操作组件中集成快捷键功能和管理员入口
---
 web/src/app/(admin)/admin/layout.tsx          |  6 +--
 .../(user)/canvas/[id]/canvas-client-page.tsx | 31 ++--------------
 web/src/app/(user)/layout.tsx                 |  2 +-
 web/src/app/(user)/page.tsx                   |  2 +-
 web/src/components/layout/app-top-nav.tsx     | 13 ++-----
 .../components/layout/user-status-actions.tsx | 37 ++++++++++---------
 web/src/{lib => constant}/navigation-tools.ts |  0
 7 files changed, 30 insertions(+), 61 deletions(-)
 rename web/src/{lib => constant}/navigation-tools.ts (100%)

diff --git a/web/src/app/(admin)/admin/layout.tsx b/web/src/app/(admin)/admin/layout.tsx
index aeaebf7..9624646 100644
--- a/web/src/app/(admin)/admin/layout.tsx
+++ b/web/src/app/(admin)/admin/layout.tsx
@@ -2,7 +2,6 @@
 
 import { FileTextOutlined, HomeOutlined, LogoutOutlined, PictureOutlined, SettingOutlined } from "@ant-design/icons";
 import { Button, Flex, Layout, Menu, Typography, theme } from "antd";
-import { LogOut } from "lucide-react";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 import type { ReactNode } from "react";
@@ -70,10 +69,7 @@ export default function AdminLayout({ children }: { children: ReactNode }) {
         <Layout.Header style={{ display: "flex", alignItems: "center", justifyContent: "space-between", height: adminLayoutStyle.headerHeight, padding: "0 24px", background: antToken.colorBgContainer, borderBottom: `1px solid ${antToken.colorBorder}` }}>
           <Typography.Title level={5} style={{ margin: 0 }}>{pageTitle}</Typography.Title>
           <Flex align="center" gap={4}>
-            <UserStatusActions
-              showConfig={false}
-              menuItems={[{ key: "logout", icon: <LogOut className="size-4" />, label: "退出登录", onClick: logout }]}
-            />
+            <UserStatusActions showConfig={false} />
           </Flex>
         </Layout.Header>
         <Layout.Content style={{ minHeight: 0, overflow: "auto" }}>{children}</Layout.Content>
diff --git a/web/src/app/(user)/canvas/[id]/canvas-client-page.tsx b/web/src/app/(user)/canvas/[id]/canvas-client-page.tsx
index 1effa67..bc7218a 100644
--- a/web/src/app/(user)/canvas/[id]/canvas-client-page.tsx
+++ b/web/src/app/(user)/canvas/[id]/canvas-client-page.tsx
@@ -3,7 +3,7 @@
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import type { ChangeEvent as ReactChangeEvent, DragEvent as ReactDragEvent, MouseEvent as ReactMouseEvent, PointerEvent as ReactPointerEvent } from "react";
 import { useParams, useRouter } from "next/navigation";
-import { Home, ImageIcon, Images, Keyboard, List, LogOut, Menu, MessageSquare, Plus, Redo2, Settings2, Trash2, Undo2, Upload } from "lucide-react";
+import { Home, ImageIcon, Images, List, Menu, MessageSquare, Plus, Redo2, Settings2, Trash2, Undo2, Upload } from "lucide-react";
 
 import { requestEdit, requestGeneration, requestImageQuestion } from "@/services/api/image";
 import { defaultConfig, type AiConfig, useConfigStore, useEffectiveConfig } from "@/stores/use-config-store";
@@ -11,10 +11,9 @@ import { resolveImageUrl, uploadImage, type UploadedImage } from "@/services/ima
 import { nanoid } from "nanoid";
 import { getDataUrlByteSize, readImageMeta } from "@/lib/image-utils";
 import { canvasThemes, type CanvasBackgroundMode } from "@/lib/canvas-theme";
-import { useThemeStore } from "@/stores/use-theme-store";
-import { useAssetStore } from "@/stores/use-asset-store";
-import { useUserStore } from "@/stores/use-user-store";
 import { UserStatusActions } from "@/components/layout/user-status-actions";
+import { useAssetStore } from "@/stores/use-asset-store";
+import { useThemeStore } from "@/stores/use-theme-store";
 import { cropDataUrl } from "../utils/canvas-image-data";
 import { App, Button, Dropdown, Modal } from "antd";
 import { NODE_DEFAULT_SIZE, getNodeSpec } from "../constants";
@@ -243,8 +242,6 @@ function InfiniteCanvasPage() {
   const renameProject = useCanvasStore((state) => state.renameProject);
   const deleteProjects = useCanvasStore((state) => state.deleteProjects);
   const currentProject = useCanvasStore((state) => state.projects.find((project) => project.id === projectId));
-  const user = useUserStore((state) => state.user);
-  const logout = useUserStore((state) => state.clearSession);
   const theme = canvasThemes[useThemeStore((state) => state.theme)];
   const [nodes, setNodes] = useState<CanvasNodeData[]>([]);
   const [connections, setConnections] = useState<CanvasConnection[]>([]);
@@ -1764,7 +1761,6 @@ function InfiniteCanvasPage() {
           title={currentProject?.title || "未命名画布"}
           titleDraft={titleDraft}
           isTitleEditing={titleEditing}
-          userName={user?.username || "访客"}
           onTitleDraftChange={setTitleDraft}
           onStartTitleEditing={startTitleEditing}
           onFinishTitleEditing={finishTitleEditing}
@@ -1778,8 +1774,6 @@ function InfiniteCanvasPage() {
           onImportImage={() => handleUploadRequest()}
           onUndo={undoCanvas}
           onRedo={redoCanvas}
-          onOpenConfig={() => openConfigDialog(false)}
-          onLogout={logout}
           assistantCollapsed={assistantCollapsed}
           onExpandAssistant={() => {
             setAssistantMounted(true);
@@ -2051,7 +2045,6 @@ function CanvasTopBar({
   title,
   titleDraft,
   isTitleEditing,
-  userName,
   onTitleDraftChange,
   onStartTitleEditing,
   onFinishTitleEditing,
@@ -2065,15 +2058,12 @@ function CanvasTopBar({
   onImportImage,
   onUndo,
   onRedo,
-  onOpenConfig,
-  onLogout,
   assistantCollapsed,
   onExpandAssistant,
 }: {
   title: string;
   titleDraft: string;
   isTitleEditing: boolean;
-  userName: string;
   onTitleDraftChange: (value: string) => void;
   onStartTitleEditing: () => void;
   onFinishTitleEditing: () => void;
@@ -2087,14 +2077,11 @@ function CanvasTopBar({
   onImportImage: () => void;
   onUndo: () => void;
   onRedo: () => void;
-  onOpenConfig: () => void;
-  onLogout: () => void;
   assistantCollapsed: boolean;
   onExpandAssistant: () => void;
 }) {
   const colorTheme = useThemeStore((state) => state.theme);
   const theme = canvasThemes[colorTheme];
-  const initial = (userName.trim()[0] || "U").toUpperCase();
   const titleRef = useRef<HTMLDivElement>(null);
   const accountRef = useRef<HTMLDivElement>(null);
   const [shortcutsOpen, setShortcutsOpen] = useState(false);
@@ -2173,26 +2160,16 @@ function CanvasTopBar({
 
       <div className="pointer-events-auto flex items-center gap-1.5">
         <UserStatusActions
-          onOpenConfig={onOpenConfig}
-          userName={userName}
-          initial={initial}
           accountOpen={accountOpen}
           onAccountOpenChange={setAccountOpen}
           accountRef={accountRef}
           getPopupContainer={(node) => node.parentElement || document.body}
+          onOpenShortcuts={() => { setShortcutsOpen(true); setAccountOpen(false); }}
           iconStyle={{ color: theme.node.text }}
           gitHubClassName="size-11 text-base"
           gitHubStyle={{ color: theme.node.text }}
           versionStyle={{ color: theme.node.text }}
           avatarStyle={{ borderColor: theme.toolbar.border, color: theme.node.text }}
-          userLabel={initial}
-          menuItems={[
-            { key: "user", disabled: true, label: <span className="font-medium text-current">{userName}</span> },
-            { type: "divider" },
-            { key: "shortcuts", icon: <Keyboard className="size-4" />, label: "快捷键", onClick: () => { setShortcutsOpen(true); setAccountOpen(false); } },
-            { type: "divider" },
-            { key: "logout", icon: <LogOut className="size-4" />, label: "退出登录", onClick: () => { setAccountOpen(false); onLogout(); } },
-          ]}
         />
         {assistantCollapsed ? (
           <>
diff --git a/web/src/app/(user)/layout.tsx b/web/src/app/(user)/layout.tsx
index 2266e14..0fb23f4 100644
--- a/web/src/app/(user)/layout.tsx
+++ b/web/src/app/(user)/layout.tsx
@@ -4,7 +4,7 @@ import type { ReactNode } from "react";
 import { usePathname } from "next/navigation";
 
 import { AppTopNav } from "@/components/layout/app-top-nav";
-import { type NavigationToolSlug, navigationTools } from "@/lib/navigation-tools";
+import { type NavigationToolSlug, navigationTools } from "@/constant/navigation-tools";
 import { useConfigStore } from "@/stores/use-config-store";
 
 export default function UserLayout({ children }: { children: ReactNode }) {
diff --git a/web/src/app/(user)/page.tsx b/web/src/app/(user)/page.tsx
index a260289..e8a30b4 100644
--- a/web/src/app/(user)/page.tsx
+++ b/web/src/app/(user)/page.tsx
@@ -5,7 +5,7 @@ import { type ReactNode, useEffect, useState } from "react";
 import { App, Button, Image, Tag } from "antd";
 
 import { fetchPrompts, type Prompt } from "@/services/api/prompts";
-import { navigationTools } from "@/lib/navigation-tools";
+import { navigationTools } from "@/constant/navigation-tools";
 import { cn } from "@/lib/utils";
 
 function Highlighter({
diff --git a/web/src/components/layout/app-top-nav.tsx b/web/src/components/layout/app-top-nav.tsx
index a75c753..a0bc124 100644
--- a/web/src/components/layout/app-top-nav.tsx
+++ b/web/src/components/layout/app-top-nav.tsx
@@ -1,16 +1,16 @@
 "use client";
 
-import { LogOut, Menu, Settings2, Shield } from "lucide-react";
+import { Menu, Settings2 } from "lucide-react";
 import Link from "next/link";
 import { App, Button, Drawer, Form, Input, Modal, Segmented } from "antd";
 
 import { ModelPicker } from "@/components/model-picker";
 import { AnimatedThemeToggler } from "@/components/ui/animated-theme-toggler";
+import { navigationTools, type NavigationToolSlug } from "@/constant/navigation-tools";
 import { GitHubLink } from "@/components/layout/github-link";
 import { UserStatusActions } from "@/components/layout/user-status-actions";
 import { VersionReleaseModal } from "@/components/layout/version-release-modal";
 import { useConfigStore, useEffectiveConfig, type AiConfig } from "@/stores/use-config-store";
-import { navigationTools, type NavigationToolSlug } from "@/lib/navigation-tools";
 import { fetchImageModels } from "@/services/api/image";
 import { useThemeStore } from "@/stores/use-theme-store";
 import { useUserStore } from "@/stores/use-user-store";
@@ -37,7 +37,6 @@ export function AppTopNav({ activeToolSlug, config, onConfigChange, hideHeader =
   const setTheme = useThemeStore((state) => state.setTheme);
   const user = useUserStore((state) => state.user);
   const isReady = useUserStore((state) => state.isReady);
-  const logout = useUserStore((state) => state.clearSession);
   const publicSettings = useConfigStore((state) => state.publicSettings);
   const effectiveConfig = useEffectiveConfig();
   const modelChannel = publicSettings?.modelChannel;
@@ -132,13 +131,7 @@ export function AppTopNav({ activeToolSlug, config, onConfigChange, hideHeader =
 
             <div className="my-auto flex h-9 min-w-0 items-center justify-end gap-2 justify-self-end whitespace-nowrap">
               {isReady && user ? (
-                <UserStatusActions
-                  onOpenConfig={() => openConfigDialog(false)}
-                  menuItems={[
-                    ...(user.role === "admin" ? [{ key: "admin", icon: <Shield className="size-4" />, label: <Link href="/admin">管理后台</Link> }] : []),
-                    { key: "logout", icon: <LogOut className="size-4" />, label: "退出登录", onClick: logout },
-                  ]}
-                />
+                <UserStatusActions />
               ) : (
                 <>
                   <button
diff --git a/web/src/components/layout/user-status-actions.tsx b/web/src/components/layout/user-status-actions.tsx
index a5abf40..a850c08 100644
--- a/web/src/components/layout/user-status-actions.tsx
+++ b/web/src/components/layout/user-status-actions.tsx
@@ -1,23 +1,22 @@
 "use client";
 
-import type { CSSProperties, ReactNode, RefObject } from "react";
+import type { CSSProperties, RefObject } from "react";
 import { Dropdown } from "antd";
-import { Settings2 } from "lucide-react";
+import { Keyboard, LogOut, Settings2, Shield } from "lucide-react";
 import type { ItemType } from "antd/es/menu/interface";
+import Link from "next/link";
 
 import { AnimatedThemeToggler } from "@/components/ui/animated-theme-toggler";
 import { GitHubLink } from "@/components/layout/github-link";
 import { VersionReleaseModal } from "@/components/layout/version-release-modal";
 import { cn } from "@/lib/utils";
+import { useConfigStore } from "@/stores/use-config-store";
 import { useThemeStore } from "@/stores/use-theme-store";
 import { useUserStore } from "@/stores/use-user-store";
 
 type UserStatusActionsProps = {
-  onOpenConfig?: () => void;
   showConfig?: boolean;
-  userName?: string;
-  initial?: string;
-  menuItems: ItemType[];
+  onOpenShortcuts?: () => void;
   accountOpen?: boolean;
   onAccountOpenChange?: (open: boolean) => void;
   accountRef?: RefObject<HTMLDivElement | null>;
@@ -27,16 +26,12 @@ type UserStatusActionsProps = {
   gitHubClassName?: string;
   gitHubStyle?: CSSProperties;
   versionStyle?: CSSProperties;
-  userLabel?: ReactNode;
   iconStyle?: CSSProperties;
 };
 
 export function UserStatusActions({
-  onOpenConfig,
   showConfig = true,
-  userName,
-  initial,
-  menuItems,
+  onOpenShortcuts,
   accountOpen,
   onAccountOpenChange,
   accountRef,
@@ -46,15 +41,23 @@ export function UserStatusActions({
   gitHubClassName,
   gitHubStyle,
   versionStyle,
-  userLabel,
   iconStyle,
 }: UserStatusActionsProps) {
   const theme = useThemeStore((state) => state.theme);
   const setTheme = useThemeStore((state) => state.setTheme);
-  const storedUserName = useUserStore((state) => state.user?.username);
-  const resolvedUserName = userName || storedUserName;
-  const avatarText = initial || (resolvedUserName?.trim()[0] || "U").toUpperCase();
+  const user = useUserStore((state) => state.user);
+  const logout = useUserStore((state) => state.clearSession);
+  const openConfigDialog = useConfigStore((state) => state.openConfigDialog);
+  const userName = user?.username || "用户";
+  const avatarText = (userName.trim()[0] || "U").toUpperCase();
   const naturalIconClass = "inline-flex size-8 shrink-0 items-center justify-center text-stone-600 transition hover:text-stone-950 dark:text-stone-300 dark:hover:text-white [&_svg]:size-4";
+  const menuItems: ItemType[] = [
+    { key: "user", disabled: true, label: <span className="font-medium text-current">{userName}</span> },
+    ...(user?.role === "admin" ? [{ key: "admin", icon: <Shield className="size-4" />, label: <Link href="/admin">管理后台</Link> }] : []),
+    ...(onOpenShortcuts ? [{ key: "shortcuts", icon: <Keyboard className="size-4" />, label: "快捷键", onClick: onOpenShortcuts }] : []),
+    { type: "divider" },
+    { key: "logout", icon: <LogOut className="size-4" />, label: "退出登录", onClick: logout },
+  ];
 
   return (
     <div className="inline-flex shrink-0 items-center gap-1.5">
@@ -63,7 +66,7 @@ export function UserStatusActions({
           type="button"
           className={naturalIconClass}
           style={iconStyle}
-          onClick={onOpenConfig}
+          onClick={() => openConfigDialog(false)}
           aria-label="配置"
           title="配置"
         >
@@ -96,7 +99,7 @@ export function UserStatusActions({
             style={avatarStyle}
             aria-label="账户菜单"
           >
-            <span className="leading-none">{userLabel ?? avatarText}</span>
+            <span className="leading-none">{avatarText}</span>
           </button>
         </Dropdown>
       </div>
diff --git a/web/src/lib/navigation-tools.ts b/web/src/constant/navigation-tools.ts
similarity index 100%
rename from web/src/lib/navigation-tools.ts
rename to web/src/constant/navigation-tools.ts