优化无限画布为沉浸布局并接入侧栏品牌入口

This commit is contained in:
Your Name 2026-02-09 00:49:35 +08:00
parent d7d2548673
commit 1178e539f4
2 changed files with 36 additions and 50 deletions

View File

@ -1,9 +1,5 @@
import { Metadata } from "next";
import { Suspense } from "react";
import { cookies } from "next/headers";
import { auth } from "@/app/(auth)/auth";
import { TopNavbar } from "@/components/top-navbar";
import { getSiteSettings, getNavLinks, getTutorialVideos } from "@/lib/db/queries";
export const metadata: Metadata = {
title: "无限画布",
@ -17,51 +13,7 @@ export default function CanvasEditorLayout({
}) {
return (
<Suspense fallback={<div className="h-screen w-screen bg-background" />}>
<CanvasLayoutWrapper>{children}</CanvasLayoutWrapper>
<div className="h-screen w-screen overflow-hidden bg-background">{children}</div>
</Suspense>
);
}
async function CanvasLayoutWrapper({ children }: { children: React.ReactNode }) {
const [session, siteSettings, navLinks, tutorialVideos] = await Promise.all([
auth(),
getSiteSettings(),
getNavLinks(),
getTutorialVideos(),
]);
return (
<div className="h-screen w-screen overflow-hidden bg-background">
<TopNavbar
siteName={siteSettings.siteName}
siteLogo={siteSettings.siteLogo || undefined}
siteLogoDark={siteSettings.siteLogoDark || undefined}
isAdmin={session?.user?.type === "admin"}
customLinks={navLinks.map(link => ({
id: link.id,
name: link.name,
url: link.url,
order: link.order,
toolboxGroup: link.toolboxGroup || 1,
}))}
toolbox1Name={siteSettings.toolbox1Name || "工具箱"}
toolbox1Enabled={siteSettings.toolbox1Enabled ?? true}
toolbox2Name={siteSettings.toolbox2Name || "工具箱2"}
toolbox2Enabled={siteSettings.toolbox2Enabled ?? false}
tutorialVideos={tutorialVideos.map(v => ({
id: v.id,
title: v.title,
videoUrl: v.videoUrl,
coverUrl: v.coverUrl,
description: v.description,
order: v.order,
}))}
tutorialEnabled={siteSettings.tutorialEnabled ?? false}
rankingEnabled={siteSettings.rankingEnabled ?? true}
/>
<div className="h-full pl-16">
{children}
</div>
</div>
);
}

View File

@ -2,6 +2,7 @@
import { useEffect, useState, useCallback, use } from "react";
import { useRouter, useParams } from "next/navigation";
import useSWR from "swr";
import {
ArrowLeft,
Save,
@ -65,7 +66,7 @@ import { CanvasChatPanel } from "@/components/canvas/CanvasChatPanel";
import { CanvasFileListPanel } from "@/components/canvas/CanvasFileListPanel";
import { ObjectPickerOverlay } from "@/components/canvas/ObjectPickerOverlay";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { cn } from "@/lib/utils";
import { cn, fetcher } from "@/lib/utils";
import { MessageSquare, FolderOpen, Grid2X2 } from "lucide-react";
interface PageProps {
@ -122,6 +123,12 @@ export default function CanvasEditorPage({ params }: PageProps) {
const [isPanelOpen, setIsPanelOpen] = useState(true);
// 面板模式: 'chat' 聊天面板, 'fileList' 文件列表
const [panelMode, setPanelMode] = useState<'chat' | 'fileList'>('chat');
const { data: siteSettingsData } = useSWR<{
siteName?: string;
siteLogo?: string | null;
siteLogoDark?: string | null;
}>("/api/site-settings", fetcher);
// 生成配置
const [prompt, setPrompt] = useState("");
@ -572,6 +579,33 @@ export default function CanvasEditorPage({ params }: PageProps) {
{/* 5. Floating Bottom Toolbar (Left) */}
<div className="absolute left-4 top-1/2 -translate-y-1/2 z-20">
<div className="flex flex-col items-center gap-2 p-1.5 rounded-2xl border bg-background/80 backdrop-blur-md shadow-2xl">
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
onClick={() => router.push("/")}
className="h-auto w-12 rounded-xl px-1.5 py-1.5 flex flex-col items-center gap-1"
>
{(siteSettingsData?.siteLogo || siteSettingsData?.siteLogoDark) ? (
<img
src={siteSettingsData?.siteLogo || siteSettingsData?.siteLogoDark || ""}
alt={siteSettingsData?.siteName || "返回首页"}
className="h-5 w-5 object-contain"
draggable={false}
/>
) : (
<Grid3X3 className="h-4 w-4" />
)}
<span className="max-w-[44px] truncate text-[10px] leading-tight text-muted-foreground">
{siteSettingsData?.siteName || "首页"}
</span>
</Button>
</TooltipTrigger>
<TooltipContent side="right">返回首页</TooltipContent>
</Tooltip>
<Separator orientation="horizontal" className="w-5 my-0.5" />
{/* Tools: Select, Pan, Add Text, Add Image, Add Video */}
<Tooltip>
<TooltipTrigger asChild>