Hermes/infinite-canvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 从 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:22:01 +08:00
parent e3d8fc092d
commit f26797b5c7
4 changed files with 30 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/app/(user)/canvas/[id]/canvas-client-page.tsx
+1 -5
View File
@@ -2160,16 +2160,12 @@ function CanvasTopBar({
<div className="pointer-events-auto flex items-center gap-1.5">
<UserStatusActions
variant="canvas"
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 }}
/>
{assistantCollapsed ? (
<>
web/src/app/(user)/layout.tsx
+1 -10
View File
@@ -1,22 +1,13 @@
"use client";
import type { ReactNode } from "react";
import { usePathname } from "next/navigation";
import { AppTopNav } from "@/components/layout/app-top-nav";
import { type NavigationToolSlug, navigationTools } from "@/constant/navigation-tools";
import { useConfigStore } from "@/stores/use-config-store";
export default function UserLayout({ children }: { children: ReactNode }) {
const pathname = usePathname();
const config = useConfigStore((state) => state.config);
const updateConfig = useConfigStore((state) => state.updateConfig);
const slug = pathname.split("/").filter(Boolean)[0];
const activeToolSlug = navigationTools.some((tool) => tool.slug === slug) ? (slug as NavigationToolSlug) : undefined;
return (
<div className="flex h-dvh flex-col overflow-hidden bg-background text-foreground">
<AppTopNav activeToolSlug={activeToolSlug} config={config} onConfigChange={updateConfig} hideHeader={/^\/canvas\/[^/]+/.test(pathname)} />
<AppTopNav />
<div className="min-h-0 flex-1 overflow-hidden">{children}</div>
</div>
);
web/src/components/layout/app-top-nav.tsx
+18 -18
View File
@@ -3,6 +3,7 @@
import { Menu, Settings2 } from "lucide-react";
import Link from "next/link";
import { App, Button, Drawer, Form, Input, Modal, Segmented } from "antd";
import { usePathname } from "next/navigation";
import { ModelPicker } from "@/components/model-picker";
import { AnimatedThemeToggler } from "@/components/ui/animated-theme-toggler";
@@ -17,17 +18,13 @@ import { useUserStore } from "@/stores/use-user-store";
import { cn } from "@/lib/utils";
import { useState } from "react";
type AppTopNavProps = {
activeToolSlug?: NavigationToolSlug;
config: AiConfig;
onConfigChange: <K extends keyof AiConfig>(key: K, value: AiConfig[K]) => void;
hideHeader?: boolean;
};
export function AppTopNav({ activeToolSlug, config, onConfigChange, hideHeader = false }: AppTopNavProps) {
export function AppTopNav() {
const { message } = App.useApp();
const pathname = usePathname();
const [loadingModels, setLoadingModels] = useState(false);
const [mobileNavOpen, setMobileNavOpen] = useState(false);
const config = useConfigStore((state) => state.config);
const updateConfig = useConfigStore((state) => state.updateConfig);
const isConfigOpen = useConfigStore((state) => state.isConfigOpen);
const shouldPromptContinue = useConfigStore((state) => state.shouldPromptContinue);
const openConfigDialog = useConfigStore((state) => state.openConfigDialog);
@@ -39,6 +36,9 @@ export function AppTopNav({ activeToolSlug, config, onConfigChange, hideHeader =
const isReady = useUserStore((state) => state.isReady);
const publicSettings = useConfigStore((state) => state.publicSettings);
const effectiveConfig = useEffectiveConfig();
const hideHeader = /^\/canvas\/[^/]+/.test(pathname);
const slug = pathname.split("/").filter(Boolean)[0];
const activeToolSlug = navigationTools.some((tool) => tool.slug === slug) ? (slug as NavigationToolSlug) : undefined;
const modelChannel = publicSettings?.modelChannel;
const allowCustomChannel = modelChannel?.allowCustomChannel === true;
const effectiveMode = allowCustomChannel ? config.channelMode : "remote";
@@ -48,7 +48,7 @@ export function AppTopNav({ activeToolSlug, config, onConfigChange, hideHeader =
setConfigDialogOpen(false);
if (effectiveMode === "local" && (!config.baseUrl.trim() || !config.apiKey.trim())) return;
if (!modelConfig.imageModel.trim() || !modelConfig.textModel.trim()) return;
if (!allowCustomChannel && config.channelMode !== "remote") onConfigChange("channelMode", "remote");
if (!allowCustomChannel && config.channelMode !== "remote") updateConfig("channelMode", "remote");
if (shouldPromptContinue) {
message.success("配置已保存，请继续刚才的请求");
} else {
@@ -65,9 +65,9 @@ export function AppTopNav({ activeToolSlug, config, onConfigChange, hideHeader =
setLoadingModels(true);
try {
const models = await fetchImageModels(config);
onConfigChange("models", models);
if (models.length && !models.includes(config.imageModel)) onConfigChange("imageModel", models[0]);
if (models.length && !models.includes(config.textModel)) onConfigChange("textModel", models[0]);
updateConfig("models", models);
if (models.length && !models.includes(config.imageModel)) updateConfig("imageModel", models[0]);
if (models.length && !models.includes(config.textModel)) updateConfig("textModel", models[0]);
message.success("模型列表已更新");
} catch (error) {
message.error(error instanceof Error ? error.message : "读取模型失败");
@@ -209,7 +209,7 @@ export function AppTopNav({ activeToolSlug, config, onConfigChange, hideHeader =
<Segmented
block
value={effectiveMode}
onChange={(value) => onConfigChange("channelMode", value as AiConfig["channelMode"])}
onChange={(value) => updateConfig("channelMode", value as AiConfig["channelMode"])}
options={[{ label: "云端渠道", value: "remote" }, { label: "本地直连", value: "local" }]}
/>
</Form.Item>
@@ -218,10 +218,10 @@ export function AppTopNav({ activeToolSlug, config, onConfigChange, hideHeader =
<>
<div className="grid gap-4 md:grid-cols-2">
<Form.Item label="Base URL" className="mb-4">
<Input value={config.baseUrl} onChange={(event) => onConfigChange("baseUrl", event.target.value)} />
<Input value={config.baseUrl} onChange={(event) => updateConfig("baseUrl", event.target.value)} />
</Form.Item>
<Form.Item label="API Key" className="mb-4">
<Input.Password value={config.apiKey} onChange={(event) => onConfigChange("apiKey", event.target.value)} />
<Input.Password value={config.apiKey} onChange={(event) => updateConfig("apiKey", event.target.value)} />
</Form.Item>
</div>
<div className="mb-4 flex items-center justify-between gap-3 rounded-lg border border-stone-200 px-3 py-2 dark:border-stone-800">
@@ -240,15 +240,15 @@ export function AppTopNav({ activeToolSlug, config, onConfigChange, hideHeader =
)}
<div className="grid gap-4 md:grid-cols-2">
<Form.Item label="默认生图模型" className="mb-4">
<ModelPicker config={modelConfig} value={modelConfig.imageModel} onChange={(model) => onConfigChange("imageModel", model)} fullWidth />
<ModelPicker config={modelConfig} value={modelConfig.imageModel} onChange={(model) => updateConfig("imageModel", model)} fullWidth />
</Form.Item>
<Form.Item label="默认文本模型" className="mb-4">
<ModelPicker config={modelConfig} value={modelConfig.textModel} onChange={(model) => onConfigChange("textModel", model)} fullWidth />
<ModelPicker config={modelConfig} value={modelConfig.textModel} onChange={(model) => updateConfig("textModel", model)} fullWidth />
</Form.Item>
</div>
{effectiveMode === "local" ? (
<Form.Item label="系统提示词" className="mb-0">
<Input.TextArea rows={3} value={config.systemPrompt} placeholder="例如：你是一位擅长电影感写实摄影的视觉导演。" onChange={(event) => onConfigChange("systemPrompt", event.target.value)} />
<Input.TextArea rows={3} value={config.systemPrompt} placeholder="例如：你是一位擅长电影感写实摄影的视觉导演。" onChange={(event) => updateConfig("systemPrompt", event.target.value)} />
</Form.Item>
) : null}
</Form>
web/src/components/layout/user-status-actions.tsx
+10 -13
View File
@@ -10,47 +10,44 @@ 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 { canvasThemes } from "@/lib/canvas-theme";
import { useConfigStore } from "@/stores/use-config-store";
import { useThemeStore } from "@/stores/use-theme-store";
import { useUserStore } from "@/stores/use-user-store";
type UserStatusActionsProps = {
showConfig?: boolean;
variant?: "default" | "canvas";
onOpenShortcuts?: () => void;
accountOpen?: boolean;
onAccountOpenChange?: (open: boolean) => void;
accountRef?: RefObject<HTMLDivElement | null>;
getPopupContainer?: (node: HTMLElement) => HTMLElement;
avatarClassName?: string;
avatarStyle?: CSSProperties;
gitHubClassName?: string;
gitHubStyle?: CSSProperties;
versionStyle?: CSSProperties;
iconStyle?: CSSProperties;
};
export function UserStatusActions({
showConfig = true,
variant = "default",
onOpenShortcuts,
accountOpen,
onAccountOpenChange,
accountRef,
getPopupContainer,
avatarClassName,
avatarStyle,
gitHubClassName,
gitHubStyle,
versionStyle,
iconStyle,
}: UserStatusActionsProps) {
const theme = useThemeStore((state) => state.theme);
const setTheme = useThemeStore((state) => state.setTheme);
const user = useUserStore((state) => state.user);
const logout = useUserStore((state) => state.clearSession);
const openConfigDialog = useConfigStore((state) => state.openConfigDialog);
const canvasTheme = canvasThemes[theme];
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 iconStyle: CSSProperties | undefined = variant === "canvas" ? { color: canvasTheme.node.text } : undefined;
const versionStyle = iconStyle;
const gitHubClassName = variant === "canvas" ? "size-11 text-base" : undefined;
const gitHubStyle = iconStyle;
const avatarStyle: CSSProperties | undefined = variant === "canvas" ? { borderColor: canvasTheme.toolbar.border, color: canvasTheme.node.text } : undefined;
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> }] : []),
@@ -95,7 +92,7 @@ export function UserStatusActions({
>
<button
type="button"
className={cn("inline-flex size-7 shrink-0 items-center justify-center rounded-full border border-stone-300 bg-transparent p-0 text-xs font-semibold leading-none text-stone-800 transition hover:border-stone-500 hover:text-stone-950 dark:border-stone-700 dark:text-stone-100 dark:hover:border-stone-400 dark:hover:text-white", avatarClassName)}
className="inline-flex size-7 shrink-0 items-center justify-center rounded-full border border-stone-300 bg-transparent p-0 text-xs font-semibold leading-none text-stone-800 transition hover:border-stone-500 hover:text-stone-950 dark:border-stone-700 dark:text-stone-100 dark:hover:border-stone-400 dark:hover:text-white"
style={avatarStyle}
aria-label="账户菜单"
>