From 281174d7870d1308e34c17c1f3d025f863f77c64 Mon Sep 17 00:00:00 2001 From: 134 Date: Wed, 21 Oct 2026 08:54:58 +0800 Subject: [PATCH] fix(canvas): adapt composer controls to panel width and remove reference placeholder --- app/globals.css | 26 +++++++++++++ components/canvas/CanvasChatPanel.tsx | 55 +++------------------------ components/image-params-bar.tsx | 4 +- 3 files changed, 35 insertions(+), 50 deletions(-) diff --git a/app/globals.css b/app/globals.css index d8c350788..33c4c58e1 100644 --- a/app/globals.css +++ b/app/globals.css @@ -630,6 +630,32 @@ .lovart-canvas-surface [data-lovart-chat="true"] [data-canvas-composer-mode="image"] .lovart-composer-footer > div:last-child { flex: 1 1 0; min-width: 0; gap: 0; } .lovart-canvas-surface [data-lovart-chat="true"] [data-canvas-composer-mode="image"] .lovart-composer-send { min-width: 32px; width: auto; height: 32px; padding: 0 8px; gap: 2px; font-size: 13px; font-weight: 400; } +/* Adapt to the resizable chat panel, independently of the browser width. */ +.lovart-canvas-surface [data-lovart-chat="true"] [data-canvas-responsive-composer="true"] { container: canvas-composer / inline-size; } +.lovart-canvas-surface [data-lovart-chat="true"] [data-canvas-responsive-composer="true"] .lovart-composer-footer { gap: 4px; } +.lovart-canvas-surface [data-lovart-chat="true"] [data-canvas-responsive-composer="true"] .lovart-composer-footer > div:first-child { flex: 0 0 auto; overflow: visible; padding-right: 0; } +.lovart-canvas-surface [data-lovart-chat="true"] [data-canvas-responsive-composer="true"] .lovart-composer-footer > div:last-child { flex: 0 1 auto; min-width: 0; } +.lovart-canvas-surface [data-lovart-chat="true"] [data-canvas-responsive-composer="true"] .lovart-composer-mode-selector { width: auto; max-width: none; } +.lovart-image-params-icon { display: none; } +@container canvas-composer (max-width: 480px) { + .lovart-canvas-surface [data-lovart-chat="true"] [data-canvas-responsive-composer="true"] .lovart-composer-mode-selector { width: 32px; min-width: 32px; padding: 0; } + .lovart-composer-mode-selector .lovart-composer-mode-label, + .lovart-composer-mode-selector [data-reference-icon="chevron-down"] { display: none; } + .lovart-composer-mode-selector > span > :first-child { margin-right: 0; } +} +@container canvas-composer (max-width: 360px) { + .lovart-canvas-surface [data-lovart-chat="true"] [data-canvas-responsive-composer="true"] .lovart-model-selector { flex: 0 0 32px; width: 32px; padding: 0; justify-content: center; } + .lovart-model-selector > span:not([data-reference-icon]), + .lovart-model-selector > [data-reference-icon="chevron-down"] { display: none; } + .lovart-canvas-surface [data-lovart-chat="true"] .lovart-model-selector > [data-reference-icon]:first-child { margin-right: 0; } +} +@container canvas-composer (max-width: 280px) { + .lovart-canvas-surface [data-lovart-chat="true"] [data-canvas-responsive-composer="true"] .lovart-image-params { width: 32px; min-width: 32px; padding: 0; justify-content: center; } + .lovart-image-params .lovart-image-params-icon { display: block; } + .lovart-image-params .lovart-image-params-label, + .lovart-image-params > [data-reference-icon="chevron-down"] { display: none; } +} + /* The existing image toolbar is scaled to 80%; these dimensions render at the reference's 44px bar, 32px buttons, and 20px icons. */ .lovart-image-action-bar { diff --git a/components/canvas/CanvasChatPanel.tsx b/components/canvas/CanvasChatPanel.tsx index fbb7a1298..329d64890 100644 --- a/components/canvas/CanvasChatPanel.tsx +++ b/components/canvas/CanvasChatPanel.tsx @@ -14824,10 +14824,6 @@ export function CanvasChatPanel({ const isComposerUploading = Boolean(composerUploadProgress); const isSubmitting = isActiveChatPending || isDetailGenerating || isClawdSubmitting || isComposerUploading; - const composerReferenceUploadProgress = - composerUploadProgress?.target === "composer-reference" - ? composerUploadProgress - : null; const hasInputOrAttachments = Boolean( input.trim() || attachments.length > 0 || (!isDetailGenerationMode && selectedSkillTag) ); @@ -17222,6 +17218,7 @@ export function CanvasChatPanel({ )} data-canvas-chat-input-anchor="true" data-canvas-composer-mode={activeComposerMode} + data-canvas-responsive-composer={!isWorkspacePresentation && !isVideoWorkspace && !isDetailGenerationMode ? "true" : undefined} > {isWorkspacePresentation && !isDetailGenerationMode ? (
@@ -18310,49 +18307,7 @@ export function CanvasChatPanel({ ) : null}
) : null} - {!isWorkspacePresentation && !isDetailGenerationMode && !isVideoWorkspace && (activeComposerMode === "image" || isImageAgentComposer) ? ( -
- -
- ) : null} + {isClawdMode && clawdTableFiles.length > 0 ? (
{clawdTableFiles.map((file, index) => ( @@ -18685,7 +18640,7 @@ export function CanvasChatPanel({ }} /> ))} - {!isWorkspacePresentation && !isDetailGenerationMode && activeComposerMode !== "image" && (isClawdMode || !isVideoModel || showVideoAttachmentButton) && ( + {!isWorkspacePresentation && !isDetailGenerationMode && (isClawdMode || !isVideoModel || showVideoAttachmentButton) && ( isClawdMode ? ( @@ -18763,6 +18718,8 @@ export function CanvasChatPanel({ ? "bg-[#242529] text-zinc-100 hover:bg-[#2c2d33]" : "bg-[#eeeeef] text-[#20242a] hover:bg-[#e7e7e8] dark:bg-white/10 dark:text-zinc-100 dark:hover:bg-white/14" )} + title={activeModeLabel} + aria-label={`切换模式，当前为 ${activeModeLabel}`} > {activeComposerMode === "clawd" ? ( @@ -18794,7 +18751,7 @@ export function CanvasChatPanel({ item={null} /> )} - {activeModeLabel} + {activeModeLabel} {!isWorkspacePresentation && !isVideoWorkspace ? ( ) : isComposerModeMenuOpen ? ( diff --git a/components/image-params-bar.tsx b/components/image-params-bar.tsx index 3d861d200..321e3b514 100644 --- a/components/image-params-bar.tsx +++ b/components/image-params-bar.tsx @@ -498,8 +498,10 @@ export function ImageParamsBar({ variant="ghost" className={cn("h-8 shrink-0 rounded-full bg-[#f1f1f2] px-2.5 text-[13px] font-normal text-[#20242a] hover:bg-[#e9eaec] focus-visible:ring-0 focus-visible:ring-offset-0 dark:bg-[#242529] dark:text-zinc-100 dark:hover:bg-[#2c2d33]", referencePresentation && "lovart-image-params")} title="生成参数" + aria-label="生成参数" > - {qualityLabel} · {selectedAspectLabel} · {selectedImageCount} {referencePresentation ? "张" : "img"} + {referencePresentation ?