refactor(auth): 移除用户登出功能并优化导航组件

- 从 app-top-nav.tsx 中移除登出相关代码和 LogOut 图标
- 从 canvas-client-page.tsx 中移除用户信息显示和登出回调函数
- 从 admin layout.tsx 中移除登出菜单项
- 将 navigation-tools 从 lib 目录迁移到 constant 目录
- 更新 UserStatusActions 组件以简化用户菜单逻辑
- 在用户状态操作组件中集成快捷键功能和管理员入口
This commit is contained in:
HouYunFei
2026-05-21 15:10:57 +08:00
parent dd6e426d78
commit e3d8fc092d
7 changed files with 30 additions and 61 deletions
+1 -5
View File
@@ -2,7 +2,6 @@
import { FileTextOutlined, HomeOutlined, LogoutOutlined, PictureOutlined, SettingOutlined } from "@ant-design/icons"; import { FileTextOutlined, HomeOutlined, LogoutOutlined, PictureOutlined, SettingOutlined } from "@ant-design/icons";
import { Button, Flex, Layout, Menu, Typography, theme } from "antd"; import { Button, Flex, Layout, Menu, Typography, theme } from "antd";
import { LogOut } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
import { usePathname, useRouter } from "next/navigation"; import { usePathname, useRouter } from "next/navigation";
import type { ReactNode } from "react"; 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}` }}> <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> <Typography.Title level={5} style={{ margin: 0 }}>{pageTitle}</Typography.Title>
<Flex align="center" gap={4}> <Flex align="center" gap={4}>
<UserStatusActions <UserStatusActions showConfig={false} />
showConfig={false}
menuItems={[{ key: "logout", icon: <LogOut className="size-4" />, label: "退出登录", onClick: logout }]}
/>
</Flex> </Flex>
</Layout.Header> </Layout.Header>
<Layout.Content style={{ minHeight: 0, overflow: "auto" }}>{children}</Layout.Content> <Layout.Content style={{ minHeight: 0, overflow: "auto" }}>{children}</Layout.Content>
@@ -3,7 +3,7 @@
import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react"; 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 type { ChangeEvent as ReactChangeEvent, DragEvent as ReactDragEvent, MouseEvent as ReactMouseEvent, PointerEvent as ReactPointerEvent } from "react";
import { useParams, useRouter } from "next/navigation"; 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 { requestEdit, requestGeneration, requestImageQuestion } from "@/services/api/image";
import { defaultConfig, type AiConfig, useConfigStore, useEffectiveConfig } from "@/stores/use-config-store"; 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 { nanoid } from "nanoid";
import { getDataUrlByteSize, readImageMeta } from "@/lib/image-utils"; import { getDataUrlByteSize, readImageMeta } from "@/lib/image-utils";
import { canvasThemes, type CanvasBackgroundMode } from "@/lib/canvas-theme"; 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 { 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 { cropDataUrl } from "../utils/canvas-image-data";
import { App, Button, Dropdown, Modal } from "antd"; import { App, Button, Dropdown, Modal } from "antd";
import { NODE_DEFAULT_SIZE, getNodeSpec } from "../constants"; import { NODE_DEFAULT_SIZE, getNodeSpec } from "../constants";
@@ -243,8 +242,6 @@ function InfiniteCanvasPage() {
const renameProject = useCanvasStore((state) => state.renameProject); const renameProject = useCanvasStore((state) => state.renameProject);
const deleteProjects = useCanvasStore((state) => state.deleteProjects); const deleteProjects = useCanvasStore((state) => state.deleteProjects);
const currentProject = useCanvasStore((state) => state.projects.find((project) => project.id === projectId)); 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 theme = canvasThemes[useThemeStore((state) => state.theme)];
const [nodes, setNodes] = useState<CanvasNodeData[]>([]); const [nodes, setNodes] = useState<CanvasNodeData[]>([]);
const [connections, setConnections] = useState<CanvasConnection[]>([]); const [connections, setConnections] = useState<CanvasConnection[]>([]);
@@ -1764,7 +1761,6 @@ function InfiniteCanvasPage() {
title={currentProject?.title || "未命名画布"} title={currentProject?.title || "未命名画布"}
titleDraft={titleDraft} titleDraft={titleDraft}
isTitleEditing={titleEditing} isTitleEditing={titleEditing}
userName={user?.username || "访客"}
onTitleDraftChange={setTitleDraft} onTitleDraftChange={setTitleDraft}
onStartTitleEditing={startTitleEditing} onStartTitleEditing={startTitleEditing}
onFinishTitleEditing={finishTitleEditing} onFinishTitleEditing={finishTitleEditing}
@@ -1778,8 +1774,6 @@ function InfiniteCanvasPage() {
onImportImage={() => handleUploadRequest()} onImportImage={() => handleUploadRequest()}
onUndo={undoCanvas} onUndo={undoCanvas}
onRedo={redoCanvas} onRedo={redoCanvas}
onOpenConfig={() => openConfigDialog(false)}
onLogout={logout}
assistantCollapsed={assistantCollapsed} assistantCollapsed={assistantCollapsed}
onExpandAssistant={() => { onExpandAssistant={() => {
setAssistantMounted(true); setAssistantMounted(true);
@@ -2051,7 +2045,6 @@ function CanvasTopBar({
title, title,
titleDraft, titleDraft,
isTitleEditing, isTitleEditing,
userName,
onTitleDraftChange, onTitleDraftChange,
onStartTitleEditing, onStartTitleEditing,
onFinishTitleEditing, onFinishTitleEditing,
@@ -2065,15 +2058,12 @@ function CanvasTopBar({
onImportImage, onImportImage,
onUndo, onUndo,
onRedo, onRedo,
onOpenConfig,
onLogout,
assistantCollapsed, assistantCollapsed,
onExpandAssistant, onExpandAssistant,
}: { }: {
title: string; title: string;
titleDraft: string; titleDraft: string;
isTitleEditing: boolean; isTitleEditing: boolean;
userName: string;
onTitleDraftChange: (value: string) => void; onTitleDraftChange: (value: string) => void;
onStartTitleEditing: () => void; onStartTitleEditing: () => void;
onFinishTitleEditing: () => void; onFinishTitleEditing: () => void;
@@ -2087,14 +2077,11 @@ function CanvasTopBar({
onImportImage: () => void; onImportImage: () => void;
onUndo: () => void; onUndo: () => void;
onRedo: () => void; onRedo: () => void;
onOpenConfig: () => void;
onLogout: () => void;
assistantCollapsed: boolean; assistantCollapsed: boolean;
onExpandAssistant: () => void; onExpandAssistant: () => void;
}) { }) {
const colorTheme = useThemeStore((state) => state.theme); const colorTheme = useThemeStore((state) => state.theme);
const theme = canvasThemes[colorTheme]; const theme = canvasThemes[colorTheme];
const initial = (userName.trim()[0] || "U").toUpperCase();
const titleRef = useRef<HTMLDivElement>(null); const titleRef = useRef<HTMLDivElement>(null);
const accountRef = useRef<HTMLDivElement>(null); const accountRef = useRef<HTMLDivElement>(null);
const [shortcutsOpen, setShortcutsOpen] = useState(false); const [shortcutsOpen, setShortcutsOpen] = useState(false);
@@ -2173,26 +2160,16 @@ function CanvasTopBar({
<div className="pointer-events-auto flex items-center gap-1.5"> <div className="pointer-events-auto flex items-center gap-1.5">
<UserStatusActions <UserStatusActions
onOpenConfig={onOpenConfig}
userName={userName}
initial={initial}
accountOpen={accountOpen} accountOpen={accountOpen}
onAccountOpenChange={setAccountOpen} onAccountOpenChange={setAccountOpen}
accountRef={accountRef} accountRef={accountRef}
getPopupContainer={(node) => node.parentElement || document.body} getPopupContainer={(node) => node.parentElement || document.body}
onOpenShortcuts={() => { setShortcutsOpen(true); setAccountOpen(false); }}
iconStyle={{ color: theme.node.text }} iconStyle={{ color: theme.node.text }}
gitHubClassName="size-11 text-base" gitHubClassName="size-11 text-base"
gitHubStyle={{ color: theme.node.text }} gitHubStyle={{ color: theme.node.text }}
versionStyle={{ color: theme.node.text }} versionStyle={{ color: theme.node.text }}
avatarStyle={{ borderColor: theme.toolbar.border, 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 ? ( {assistantCollapsed ? (
<> <>
+1 -1
View File
@@ -4,7 +4,7 @@ import type { ReactNode } from "react";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
import { AppTopNav } from "@/components/layout/app-top-nav"; 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"; import { useConfigStore } from "@/stores/use-config-store";
export default function UserLayout({ children }: { children: ReactNode }) { export default function UserLayout({ children }: { children: ReactNode }) {
+1 -1
View File
@@ -5,7 +5,7 @@ import { type ReactNode, useEffect, useState } from "react";
import { App, Button, Image, Tag } from "antd"; import { App, Button, Image, Tag } from "antd";
import { fetchPrompts, type Prompt } from "@/services/api/prompts"; 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"; import { cn } from "@/lib/utils";
function Highlighter({ function Highlighter({
+3 -10
View File
@@ -1,16 +1,16 @@
"use client"; "use client";
import { LogOut, Menu, Settings2, Shield } from "lucide-react"; import { Menu, Settings2 } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
import { App, Button, Drawer, Form, Input, Modal, Segmented } from "antd"; import { App, Button, Drawer, Form, Input, Modal, Segmented } from "antd";
import { ModelPicker } from "@/components/model-picker"; import { ModelPicker } from "@/components/model-picker";
import { AnimatedThemeToggler } from "@/components/ui/animated-theme-toggler"; import { AnimatedThemeToggler } from "@/components/ui/animated-theme-toggler";
import { navigationTools, type NavigationToolSlug } from "@/constant/navigation-tools";
import { GitHubLink } from "@/components/layout/github-link"; import { GitHubLink } from "@/components/layout/github-link";
import { UserStatusActions } from "@/components/layout/user-status-actions"; import { UserStatusActions } from "@/components/layout/user-status-actions";
import { VersionReleaseModal } from "@/components/layout/version-release-modal"; import { VersionReleaseModal } from "@/components/layout/version-release-modal";
import { useConfigStore, useEffectiveConfig, type AiConfig } from "@/stores/use-config-store"; 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 { fetchImageModels } from "@/services/api/image";
import { useThemeStore } from "@/stores/use-theme-store"; import { useThemeStore } from "@/stores/use-theme-store";
import { useUserStore } from "@/stores/use-user-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 setTheme = useThemeStore((state) => state.setTheme);
const user = useUserStore((state) => state.user); const user = useUserStore((state) => state.user);
const isReady = useUserStore((state) => state.isReady); const isReady = useUserStore((state) => state.isReady);
const logout = useUserStore((state) => state.clearSession);
const publicSettings = useConfigStore((state) => state.publicSettings); const publicSettings = useConfigStore((state) => state.publicSettings);
const effectiveConfig = useEffectiveConfig(); const effectiveConfig = useEffectiveConfig();
const modelChannel = publicSettings?.modelChannel; 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"> <div className="my-auto flex h-9 min-w-0 items-center justify-end gap-2 justify-self-end whitespace-nowrap">
{isReady && user ? ( {isReady && user ? (
<UserStatusActions <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 },
]}
/>
) : ( ) : (
<> <>
<button <button
@@ -1,23 +1,22 @@
"use client"; "use client";
import type { CSSProperties, ReactNode, RefObject } from "react"; import type { CSSProperties, RefObject } from "react";
import { Dropdown } from "antd"; 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 type { ItemType } from "antd/es/menu/interface";
import Link from "next/link";
import { AnimatedThemeToggler } from "@/components/ui/animated-theme-toggler"; import { AnimatedThemeToggler } from "@/components/ui/animated-theme-toggler";
import { GitHubLink } from "@/components/layout/github-link"; import { GitHubLink } from "@/components/layout/github-link";
import { VersionReleaseModal } from "@/components/layout/version-release-modal"; import { VersionReleaseModal } from "@/components/layout/version-release-modal";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { useConfigStore } from "@/stores/use-config-store";
import { useThemeStore } from "@/stores/use-theme-store"; import { useThemeStore } from "@/stores/use-theme-store";
import { useUserStore } from "@/stores/use-user-store"; import { useUserStore } from "@/stores/use-user-store";
type UserStatusActionsProps = { type UserStatusActionsProps = {
onOpenConfig?: () => void;
showConfig?: boolean; showConfig?: boolean;
userName?: string; onOpenShortcuts?: () => void;
initial?: string;
menuItems: ItemType[];
accountOpen?: boolean; accountOpen?: boolean;
onAccountOpenChange?: (open: boolean) => void; onAccountOpenChange?: (open: boolean) => void;
accountRef?: RefObject<HTMLDivElement | null>; accountRef?: RefObject<HTMLDivElement | null>;
@@ -27,16 +26,12 @@ type UserStatusActionsProps = {
gitHubClassName?: string; gitHubClassName?: string;
gitHubStyle?: CSSProperties; gitHubStyle?: CSSProperties;
versionStyle?: CSSProperties; versionStyle?: CSSProperties;
userLabel?: ReactNode;
iconStyle?: CSSProperties; iconStyle?: CSSProperties;
}; };
export function UserStatusActions({ export function UserStatusActions({
onOpenConfig,
showConfig = true, showConfig = true,
userName, onOpenShortcuts,
initial,
menuItems,
accountOpen, accountOpen,
onAccountOpenChange, onAccountOpenChange,
accountRef, accountRef,
@@ -46,15 +41,23 @@ export function UserStatusActions({
gitHubClassName, gitHubClassName,
gitHubStyle, gitHubStyle,
versionStyle, versionStyle,
userLabel,
iconStyle, iconStyle,
}: UserStatusActionsProps) { }: UserStatusActionsProps) {
const theme = useThemeStore((state) => state.theme); const theme = useThemeStore((state) => state.theme);
const setTheme = useThemeStore((state) => state.setTheme); const setTheme = useThemeStore((state) => state.setTheme);
const storedUserName = useUserStore((state) => state.user?.username); const user = useUserStore((state) => state.user);
const resolvedUserName = userName || storedUserName; const logout = useUserStore((state) => state.clearSession);
const avatarText = initial || (resolvedUserName?.trim()[0] || "U").toUpperCase(); 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 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 ( return (
<div className="inline-flex shrink-0 items-center gap-1.5"> <div className="inline-flex shrink-0 items-center gap-1.5">
@@ -63,7 +66,7 @@ export function UserStatusActions({
type="button" type="button"
className={naturalIconClass} className={naturalIconClass}
style={iconStyle} style={iconStyle}
onClick={onOpenConfig} onClick={() => openConfigDialog(false)}
aria-label="配置" aria-label="配置"
title="配置" title="配置"
> >
@@ -96,7 +99,7 @@ export function UserStatusActions({
style={avatarStyle} style={avatarStyle}
aria-label="账户菜单" aria-label="账户菜单"
> >
<span className="leading-none">{userLabel ?? avatarText}</span> <span className="leading-none">{avatarText}</span>
</button> </button>
</Dropdown> </Dropdown>
</div> </div>