Adjust agent mode layout in canvas
This commit is contained in:
parent
b1afb74724
commit
3afb31870b
@ -165,14 +165,8 @@ export default function CanvasEditorPage({ params }: PageProps) {
|
|||||||
: null;
|
: null;
|
||||||
|
|
||||||
const resolvedPanelWidth = viewportWidth > 0
|
const resolvedPanelWidth = viewportWidth > 0
|
||||||
? isAgentMode
|
? Math.min(FLOATING_PANEL_WIDTH, Math.max(viewportWidth - DOCKED_PANEL_INSET, 0))
|
||||||
? 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))
|
|
||||||
: FLOATING_PANEL_WIDTH;
|
: FLOATING_PANEL_WIDTH;
|
||||||
const agentPanelWidth = isAgentMode ? resolvedPanelWidth : 0;
|
|
||||||
const panelOcclusionRight = isPanelOpen ? resolvedPanelWidth + DOCKED_PANEL_INSET : 0;
|
const panelOcclusionRight = isPanelOpen ? resolvedPanelWidth + DOCKED_PANEL_INSET : 0;
|
||||||
const floatingToolbarOffset = isPanelOpen ? -(panelOcclusionRight / 2) : 0;
|
const floatingToolbarOffset = isPanelOpen ? -(panelOcclusionRight / 2) : 0;
|
||||||
const compactControlsLeft = FLOATING_UI_GAP;
|
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 (
|
return (
|
||||||
<TooltipProvider>
|
<TooltipProvider>
|
||||||
<div className="relative h-dvh w-full overflow-hidden overscroll-none bg-background">
|
<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} />
|
<CanvasWorkspace occlusionRight={panelOcclusionRight} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Brand Entry (Top Left) */}
|
{brandEntry}
|
||||||
<div className="absolute top-4 left-4 z-20">
|
{agentDisabledNotice}
|
||||||
<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}
|
|
||||||
|
|
||||||
{/* 2. Floating Actions (Top Right) */}
|
{/* 2. Floating Actions (Top Right) */}
|
||||||
{!isPanelOpen && (
|
{!isPanelOpen && (
|
||||||
@ -762,26 +793,6 @@ export default function CanvasEditorPage({ params }: PageProps) {
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
{/* 4. Floating Sidebar (Right) */}
|
{/* 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(
|
<div className={cn(
|
||||||
"absolute z-10 transition-all duration-300 ease-in-out",
|
"absolute z-10 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"
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user