lunanting/ai-chatbot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: adjust canvas layout - move toolbar to left, save to left, increase chat height
Some checks failed
Lint / build (20) (push) Has been cancelled
Details
Playwright Tests / test (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Your Name 2026-01-24 21:40:46 +08:00
parent f5c52bfdc6
commit 30950a89dc
1 changed files with 34 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
app/canvas/[id]/page.tsx
View File

@ -369,7 +369,7 @@ export default function CanvasEditorPage({ params }: PageProps) {
</div>
{/* 2. Floating Header (Top Left) */}
<div className="absolute top-20 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>
<TooltipTrigger asChild>
<Button variant="ghost" size="icon" onClick={() => router.push('/')} className="rounded-lg h-8 w-8">
@ -404,37 +404,40 @@ export default function CanvasEditorPage({ params }: PageProps) {
{projectTitle}
</button>
)}
</div>
{/* 3. Floating Actions (Top Right) */}
<div className="absolute top-20 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">
{isGenerating && (
<div className="flex items-center gap-1.5 text-xs text-muted-foreground px-2 border-r mr-1">
<Separator orientation="vertical" className="h-5" />
{/* Save Button (Moved to Left) */}
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="sm"
onClick={handleSave}
disabled={isSaving}
className="rounded-lg h-8"
>
{isSaving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
<span className="ml-2 hidden sm:inline">保存</span>
</Button>
</TooltipTrigger>
<TooltipContent>保存 (Ctrl+S)</TooltipContent>
</Tooltip>
{isGenerating && (
<>
<Separator orientation="vertical" className="h-5" />
<div className="flex items-center gap-1.5 text-xs text-muted-foreground px-2">
<Loader2 className="h-3 w-3 animate-spin" />
<span className="hidden sm:inline">生成中...</span>
</div>
)}
{/* Save Button */}
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="sm"
onClick={handleSave}
disabled={isSaving}
className="rounded-lg h-8"
>
{isSaving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
<span className="ml-2 hidden sm:inline">保存</span>
</Button>
</TooltipTrigger>
<TooltipContent>保存 (Ctrl+S)</TooltipContent>
</Tooltip>
<Separator orientation="vertical" className="h-5" />
</>
)}
</div>
{/* 3. Floating Actions (Top Right) */}
<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">
{/* Panel Toggle */}
<Tooltip>
<TooltipTrigger asChild>
@ -454,7 +457,7 @@ export default function CanvasEditorPage({ params }: PageProps) {
{/* 4. Floating Sidebar (Right) */}
<div className={cn(
"absolute top-36 right-4 bottom-24 z-10 w-[400px] transition-all duration-300 ease-in-out",
"absolute top-20 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"
)}>
<div className="h-full w-full rounded-2xl border bg-background/95 backdrop-blur-md shadow-2xl overflow-hidden flex flex-col">
@ -637,8 +640,8 @@ export default function CanvasEditorPage({ params }: PageProps) {
</div>
</div>
{/* 5. Floating Bottom Toolbar (Center) */}
<div className="absolute bottom-8 left-1/2 -translate-x-1/2 z-20">
{/* 5. Floating Bottom Toolbar (Left) */}
<div className="absolute bottom-8 left-4 z-20">
<div className="flex items-center gap-1.5 p-2 rounded-2xl border bg-background/80 backdrop-blur-md shadow-2xl">
{/* Tools: Select, Pan, Add Text, Add Image, Add Video */}
<Tooltip>