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
+3 -10
View File
@@ -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
@@ -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>