From ac2e355a7aaa5b56101da62ec111720a3eaa10d0 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 | 3 +- 3 files changed, 34 insertions(+), 50 deletions(-) diff --git a/app/globals.css b/app/globals.css index 223165c7d..7890f50d4 100644 --- a/app/globals.css +++ b/app/globals.css @@ -642,6 +642,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 3120eb0d8..8d6324889 100644 --- a/components/canvas/CanvasChatPanel.tsx +++ b/components/canvas/CanvasChatPanel.tsx @@ -14916,10 +14916,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) ); @@ -17332,6 +17328,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 ? (
@@ -18420,49 +18417,7 @@ export function CanvasChatPanel({ ) : null}
) : null} - {!isWorkspacePresentation && !isDetailGenerationMode && !isVideoWorkspace && (activeComposerMode === "image" || isImageAgentComposer) ? ( -
- -
- ) : null} + {isClawdMode && clawdTableFiles.length > 0 ? (
{clawdTableFiles.map((file, index) => ( @@ -18795,7 +18750,7 @@ export function CanvasChatPanel({ }} /> ))} - {!isWorkspacePresentation && !isDetailGenerationMode && activeComposerMode !== "image" && (isClawdMode || !isVideoModel || showVideoAttachmentButton) && ( + {!isWorkspacePresentation && !isDetailGenerationMode && (isClawdMode || !isVideoModel || showVideoAttachmentButton) && ( isClawdMode ? ( @@ -18873,6 +18828,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" ? ( @@ -18904,7 +18861,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 3cba7f56f..f3be904db 100644 --- a/components/image-params-bar.tsx +++ b/components/image-params-bar.tsx @@ -500,7 +500,8 @@ export function ImageParamsBar({ title="生成参数" aria-label={`比例：${params.aspectRatio}，分辨率：${params.imageSize}`} > - {qualityLabel} · {selectedAspectLabel} · {currentImageSize} · {selectedImageCount} {referencePresentation ? "张" : "img"} + {referencePresentation ?