优化无限画布为沉浸布局并接入侧栏品牌入口
This commit is contained in:
parent
d7d2548673
commit
1178e539f4
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user