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

Adjust agent mode layout in canvas
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-03-10 21:47:35 +08:00
parent b1afb74724
commit 3afb31870b
1 changed files with 70 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -165,14 +165,8 @@ export default function CanvasEditorPage({ params }: PageProps) {
: null;
const resolvedPanelWidth = viewportWidth > 0
? isAgentMode
? Math.min(
520,
Math.max(Math.floor((viewportWidth - DOCKED_PANEL_INSET * 2) / 2), 340)
)
: Math.min(FLOATING_PANEL_WIDTH, Math.max(viewportWidth - DOCKED_PANEL_INSET, 0))
? Math.min(FLOATING_PANEL_WIDTH, Math.max(viewportWidth - DOCKED_PANEL_INSET, 0))
: FLOATING_PANEL_WIDTH;
const agentPanelWidth = isAgentMode ? resolvedPanelWidth : 0;
const panelOcclusionRight = isPanelOpen ? resolvedPanelWidth + DOCKED_PANEL_INSET : 0;
const floatingToolbarOffset = isPanelOpen ? -(panelOcclusionRight / 2) : 0;
const compactControlsLeft = FLOATING_UI_GAP;
@ -705,6 +699,73 @@ export default function CanvasEditorPage({ params }: PageProps) {
);
}
const brandEntry = (
<div className="absolute top-4 left-4 z-20">
<Button
variant="ghost"
onClick={goHome}
className="h-10 gap-2 rounded-none border-0 bg-transparent px-0 shadow-none hover:bg-transparent"
>
{(siteSettingsData?.siteLogo || siteSettingsData?.siteLogoDark) ? (
<img
src={siteSettingsData?.siteLogo || siteSettingsData?.siteLogoDark || ""}
alt={siteSettingsData?.siteName || "返回首页"}
className="h-7 w-7 object-contain"
draggable={false}
/>
) : (
<Grid3X3 className="h-5 w-5" />
)}
<span className="max-w-[180px] truncate text-base font-semibold text-foreground">
{siteSettingsData?.siteName || "返回首页"}
</span>
</Button>
</div>
);
const agentDisabledNotice =
requestedAgentMode && !isAgentFeatureEnabled ? (
<div className="absolute top-4 left-1/2 z-20 -translate-x-1/2">
<div className="inline-flex items-center gap-2 rounded-full border border-amber-200 bg-amber-50 px-4 py-2 text-sm text-amber-800 shadow-sm dark:border-amber-900/60 dark:bg-amber-950/80 dark:text-amber-200">
<AlertCircle className="h-4 w-4" />
<span>智能体功能未开启，请联系管理员在系统设置中开启。</span>
</div>
</div>
) : null;
if (isAgentMode) {
return (
<TooltipProvider>
<div className="relative h-dvh w-full overflow-hidden bg-background">
{brandEntry}
{agentDisabledNotice}
<div className="absolute inset-0 flex pt-[72px]">
<div className="min-w-0 flex-1 border-r bg-white dark:bg-zinc-950">
<AgentPresetPanel
selectedPresetId={selectedAgentPresetId}
onSelectPreset={handleSelectAgentPreset}
/>
</div>
<div
className="shrink-0 border-l bg-white dark:bg-zinc-950"
style={{ width: FLOATING_PANEL_WIDTH }}
>
<div className="h-full overflow-hidden">
<CanvasChatPanel
chatId={`canvas-${id}`}
onClose={() => {}}
selectedAgentPresetId={isAgentFeatureEnabled ? selectedAgentPresetId : null}
/>
</div>
</div>
</div>
</div>
</TooltipProvider>
);
}
return (
<TooltipProvider>
<div className="relative h-dvh w-full overflow-hidden overscroll-none bg-background">
@ -714,38 +775,8 @@ export default function CanvasEditorPage({ params }: PageProps) {
<CanvasWorkspace occlusionRight={panelOcclusionRight} />
</div>
{/* Brand Entry (Top Left) */}
<div className="absolute top-4 left-4 z-20">
<Button
variant="ghost"
onClick={goHome}
className="h-10 gap-2 rounded-none border-0 bg-transparent px-0 shadow-none hover:bg-transparent"
>
{(siteSettingsData?.siteLogo || siteSettingsData?.siteLogoDark) ? (
<img
src={siteSettingsData?.siteLogo || siteSettingsData?.siteLogoDark || ""}
alt={siteSettingsData?.siteName || "返回首页"}
className="h-7 w-7 object-contain"
draggable={false}
/>
) : (
<Grid3X3 className="h-5 w-5" />
)}
<span className="max-w-[180px] truncate text-base font-semibold text-foreground">
{siteSettingsData?.siteName || "返回首页"}
</span>
</Button>
</div>
{/* Agent Disabled Notice */}
{requestedAgentMode && !isAgentFeatureEnabled ? (
<div className="absolute top-4 left-1/2 z-20 -translate-x-1/2">
<div className="inline-flex items-center gap-2 rounded-full border border-amber-200 bg-amber-50 px-4 py-2 text-sm text-amber-800 shadow-sm dark:border-amber-900/60 dark:bg-amber-950/80 dark:text-amber-200">
<AlertCircle className="h-4 w-4" />
<span>智能体功能未开启，请联系管理员在系统设置中开启。</span>
</div>
</div>
) : null}
{brandEntry}
{agentDisabledNotice}
{/* 2. Floating Actions (Top Right) */}
{!isPanelOpen && (
@ -762,26 +793,6 @@ export default function CanvasEditorPage({ params }: PageProps) {
)}
{/* 4. Floating Sidebar (Right) */}
{isAgentMode ? (
<div
className="absolute z-10 transition-all duration-300 ease-in-out"
style={{
top: DOCKED_PANEL_INSET,
left: DOCKED_PANEL_INSET,
bottom: DOCKED_PANEL_INSET,
width: agentPanelWidth,
maxWidth: `calc(100vw - ${DOCKED_PANEL_INSET}px)`,
}}
>
<div className="h-full w-full overflow-hidden border-r bg-white dark:bg-zinc-950">
<AgentPresetPanel
selectedPresetId={selectedAgentPresetId}
onSelectPreset={handleSelectAgentPreset}
/>
</div>
</div>
) : null}
<div className={cn(
"absolute z-10 transition-all duration-300 ease-in-out",
isPanelOpen ? "translate-x-0 opacity-100" : "translate-x-[120%] opacity-0 pointer-events-none"