fix: adjust canvas layout after nav removal

Move canvas floating panels up and align logo/icon styling with the left rail navigation.
This commit is contained in:
Your Name 2026-02-03 15:28:20 +08:00
parent 04706deb17
commit fd5f93ba58
2 changed files with 11 additions and 9 deletions

View File

@ -459,7 +459,7 @@ export default function CanvasEditorPage({ params }: PageProps) {
</div> </div>
{/* 2. Floating Header (Top Left) */} {/* 2. Floating Header (Top Left) */}
<div className="absolute top-16 left-4 z-20 flex items-center gap-2 bg-background/80 backdrop-blur-md border rounded-xl p-1.5 shadow-sm"> <div className="absolute top-4 left-4 z-20 flex items-center gap-2 bg-background/80 backdrop-blur-md border rounded-xl p-1.5 shadow-sm">
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<Button variant="ghost" size="icon" onClick={() => router.push('/')} className="rounded-lg h-8 w-8"> <Button variant="ghost" size="icon" onClick={() => router.push('/')} className="rounded-lg h-8 w-8">
@ -510,7 +510,7 @@ export default function CanvasEditorPage({ params }: PageProps) {
{/* 3. Floating Actions (Top Right) */} {/* 3. Floating Actions (Top Right) */}
{!isPanelOpen && ( {!isPanelOpen && (
<div className="absolute top-16 right-4 z-20 flex items-center gap-2"> <div className="absolute top-4 right-4 z-20 flex items-center gap-2">
<div className="bg-background/80 backdrop-blur-md border rounded-xl p-1.5 shadow-sm flex items-center gap-1"> <div className="bg-background/80 backdrop-blur-md border rounded-xl p-1.5 shadow-sm flex items-center gap-1">
{/* Panel Toggle */} {/* Panel Toggle */}
<Tooltip> <Tooltip>
@ -532,7 +532,7 @@ export default function CanvasEditorPage({ params }: PageProps) {
{/* 4. Floating Sidebar (Right) */} {/* 4. Floating Sidebar (Right) */}
<div className={cn( <div className={cn(
"absolute top-16 right-4 bottom-4 z-10 w-[400px] transition-all duration-300 ease-in-out", "absolute top-4 right-4 bottom-4 z-10 w-[400px] transition-all duration-300 ease-in-out",
isPanelOpen ? "translate-x-0 opacity-100" : "translate-x-[120%] opacity-0 pointer-events-none" isPanelOpen ? "translate-x-0 opacity-100" : "translate-x-[120%] opacity-0 pointer-events-none"
)}> )}>
<div className="h-full w-full rounded-2xl border bg-background/95 backdrop-blur-md shadow-2xl overflow-hidden flex flex-col"> <div className="h-full w-full rounded-2xl border bg-background/95 backdrop-blur-md shadow-2xl overflow-hidden flex flex-col">

View File

@ -121,8 +121,10 @@ export function TopNavbar({
} }
}; };
// 决定显示哪个 LOGO // 决定显示哪个 LOGO(浅色用普通,深色用暗色)
const displayLogo = (siteLogoDark && siteLogoDark.trim() !== "") ? siteLogoDark : siteLogo; const displayLogo = resolvedTheme === "dark"
? (siteLogoDark && siteLogoDark.trim() !== "" ? siteLogoDark : siteLogo)
: (siteLogo && siteLogo.trim() !== "" ? siteLogo : siteLogoDark);
const getShortLabel = (label: string) => { const getShortLabel = (label: string) => {
const trimmed = label.trim(); const trimmed = label.trim();
@ -309,7 +311,7 @@ export function TopNavbar({
window.location.href = "/featured"; window.location.href = "/featured";
}} }}
> >
<Sparkles className="h-5 w-5 text-yellow-400" /> <Sparkles className="h-5 w-5" />
<span className={navLabelClass}>{getShortLabel("AI精选")}</span> <span className={navLabelClass}>{getShortLabel("AI精选")}</span>
</a> </a>
@ -324,7 +326,7 @@ export function TopNavbar({
type="button" type="button"
title="功能教程" title="功能教程"
> >
<PlayCircle className="h-5 w-5 text-green-400" /> <PlayCircle className="h-5 w-5" />
<span className={navLabelClass}>{getShortLabel("功能教程")}</span> <span className={navLabelClass}>{getShortLabel("功能教程")}</span>
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
@ -383,7 +385,7 @@ export function TopNavbar({
type="button" type="button"
title="精选榜单" title="精选榜单"
> >
<Trophy className="h-5 w-5 text-orange-400" /> <Trophy className="h-5 w-5" />
<span className={navLabelClass}>{getShortLabel("精选榜")}</span> <span className={navLabelClass}>{getShortLabel("精选榜")}</span>
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
@ -453,7 +455,7 @@ export function TopNavbar({
type="button" type="button"
title="无限画布" title="无限画布"
> >
<LayoutGrid className="h-5 w-5 text-purple-400" /> <LayoutGrid className="h-5 w-5" />
<span className={navLabelClass}>{getShortLabel("无限画布")}</span> <span className={navLabelClass}>{getShortLabel("无限画布")}</span>
</button> </button>