From 6b3e22f4e9f9e20f3b9cbf2f218329c0f04dd23b Mon Sep 17 00:00:00 2001
From: ddCat <2695092045@qq.com>
Date: Sat, 22 Aug 2026 18:10:58 +0800
Subject: [PATCH] =?UTF-8?q?fix(canvas):=20=E6=8F=90=E7=A4=BA=E8=AF=8D?=
 =?UTF-8?q?=E5=8D=A1=E7=89=87=20-=20=E6=8C=89=E5=86=85=E5=AE=B9=E8=87=AA?=
 =?UTF-8?q?=E9=80=82=E5=BA=94=E9=AB=98=E5=BA=A6=E5=B9=B6=E9=9A=90=E8=97=8F?=
 =?UTF-8?q?=E6=97=A0=E6=95=88=E5=8F=82=E6=95=B0=E5=8C=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas/canvas-node-prompt-panel.tsx       | 23 +++++++++++++------
 .../canvas-resource-mention-textarea.tsx      |  2 +-
 web/src/styles/globals.css                    |  6 ++---
 3 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/web/src/components/canvas/canvas-node-prompt-panel.tsx b/web/src/components/canvas/canvas-node-prompt-panel.tsx
index af30e3fe0..20ba0aa4d 100644
--- a/web/src/components/canvas/canvas-node-prompt-panel.tsx
+++ b/web/src/components/canvas/canvas-node-prompt-panel.tsx
@@ -60,8 +60,8 @@ export function CanvasNodePromptPanel({ node, isRunning, onPromptChange, onConfi
     const [presetOpen, setPresetOpen] = useState(false);
     const [expandedPresetOpen, setExpandedPresetOpen] = useState(false);
     const [expandedPromptOpen, setExpandedPromptOpen] = useState(false);
-    const [promptContentHeight, setPromptContentHeight] = useState(PROMPT_EDITOR_MIN_HEIGHT);
-    const [expandedPromptContentHeight, setExpandedPromptContentHeight] = useState(PROMPT_EDITOR_EXPANDED_MIN_HEIGHT);
+    const [promptContentHeight, setPromptContentHeight] = useState(() => estimatePromptContentHeight(savedPrompt, false));
+    const [expandedPromptContentHeight, setExpandedPromptContentHeight] = useState(() => estimatePromptContentHeight(savedPrompt, true));
     const [manualPromptHeight, setManualPromptHeight] = useState<number | null>(null);
     const [manualExpandedPromptHeight, setManualExpandedPromptHeight] = useState<number | null>(null);
     const [paramsExpanded, setParamsExpanded] = useState(false); // #98 决策2：B区参数区折叠状态（手风琴）
@@ -103,6 +103,7 @@ export function CanvasNodePromptPanel({ node, isRunning, onPromptChange, onConfi
     });
     const activeReferenceCount = activeReferences.length;
     const videoFrameOptions = mentionReferences.filter((item) => item.active && item.kind === "image").map((item) => ({ nodeId: item.nodeId, label: item.label, title: item.title, previewUrl: item.previewUrl }));
+    const hasVideoPromptTools = mode === "video" && !simpleMode && videoFrameOptions.length > 0;
     const monochromeAccent = theme.node.activeStroke;
     const composerTokens = {
         "--canvas-composer-surface": theme.node.panel,
@@ -113,7 +114,6 @@ export function CanvasNodePromptPanel({ node, isRunning, onPromptChange, onConfi
     } as CSSProperties;
     const composerSurfaceStyle = {
         ...composerTokens,
-        border: `1px solid color-mix(in srgb, ${theme.node.edge} 42%, transparent)`,
         background: theme.node.panel,
         color: theme.node.text,
         boxShadow: theme.node.shadow,
@@ -134,8 +134,8 @@ export function CanvasNodePromptPanel({ node, isRunning, onPromptChange, onConfi
     useEffect(() => {
         setExpandedPromptOpen(false);
         setExpandedPresetOpen(false);
-        setPromptContentHeight(PROMPT_EDITOR_MIN_HEIGHT);
-        setExpandedPromptContentHeight(PROMPT_EDITOR_EXPANDED_MIN_HEIGHT);
+        setPromptContentHeight(estimatePromptContentHeight(savedPrompt, false));
+        setExpandedPromptContentHeight(estimatePromptContentHeight(savedPrompt, true));
         setManualPromptHeight(null);
         setManualExpandedPromptHeight(null);
     }, [node.id]);
@@ -357,7 +357,7 @@ export function CanvasNodePromptPanel({ node, isRunning, onPromptChange, onConfi
             {renderPromptEditor(false)}
 
             {/* B区 参数区（对应 #98 决策2：默认折叠，手风琴展开）*/}
-            {mode === "video" && !simpleMode ? (
+            {hasVideoPromptTools ? (
                 <div className="canvas-node-composer-parameters overflow-hidden">
                     <button
                         type="button"
@@ -401,7 +401,7 @@ export function CanvasNodePromptPanel({ node, isRunning, onPromptChange, onConfi
                 <div className="flex min-h-0 flex-col gap-2.5 p-3" style={{ ...composerTokens, color: theme.node.text }}>
                     <div className="shrink-0 pr-8">{renderComposerHeader(true)}</div>
                     {renderPromptEditor(true)}
-                    {mode === "video" && !simpleMode ? (
+                    {hasVideoPromptTools ? (
                         <div className="canvas-node-composer-parameters shrink-0">
                             <CanvasVideoPromptTools metadata={node.metadata} frameOptions={videoFrameOptions} onMetadataChange={(patch) => onConfigChange(node.id, patch)} />
                         </div>
@@ -572,6 +572,15 @@ function promptEditorBounds(expanded: boolean, hasReferences: boolean) {
     return { min, max };
 }
 
+function estimatePromptContentHeight(value: string, expanded: boolean) {
+    if (!value.trim()) return expanded ? PROMPT_EDITOR_EXPANDED_MIN_HEIGHT : PROMPT_EDITOR_MIN_HEIGHT;
+    const charsPerLine = expanded ? 34 : 38;
+    const lineCount = value.split("\n").reduce((total, line) => total + Math.max(1, Math.ceil(Array.from(line).length / charsPerLine)), 0);
+    const lineHeight = expanded ? PROMPT_EDITOR_EXPANDED_LINE_HEIGHT : PROMPT_EDITOR_LINE_HEIGHT;
+    const verticalPadding = expanded ? PROMPT_EDITOR_EXPANDED_VERTICAL_PADDING : PROMPT_EDITOR_VERTICAL_PADDING;
+    return Math.max(expanded ? PROMPT_EDITOR_EXPANDED_MIN_HEIGHT : PROMPT_EDITOR_MIN_HEIGHT, lineCount * lineHeight + verticalPadding);
+}
+
 function clampPromptHeight(height: number, bounds: { min: number; max: number }) {
     return Math.min(bounds.max, Math.max(bounds.min, height));
 }
diff --git a/web/src/components/canvas/canvas-resource-mention-textarea.tsx b/web/src/components/canvas/canvas-resource-mention-textarea.tsx
index 39aea8355..ab8b20612 100644
--- a/web/src/components/canvas/canvas-resource-mention-textarea.tsx
+++ b/web/src/components/canvas/canvas-resource-mention-textarea.tsx
@@ -120,7 +120,7 @@ export const CanvasResourceMentionTextarea = forwardRef<HTMLTextAreaElement, Pro
         });
         observer.observe(container);
         return () => observer.disconnect();
-    }, [onContentSizeChange, reportContentSize, useRichEditor]);
+    }, [onContentSizeChange, reportContentSize, useRichEditor, value]);
 
     const focusEditor = (selectionStart?: number) => {
         requestAnimationFrame(() => {
diff --git a/web/src/styles/globals.css b/web/src/styles/globals.css
index ac5a6e301..aa4077622 100644
--- a/web/src/styles/globals.css
+++ b/web/src/styles/globals.css
@@ -6909,8 +6909,8 @@
     }
 
     .canvas-node-composer-parameters {
-        margin-top: var(--space-1);
-        padding-top: var(--space-2);
+        margin-top: 0;
+        padding-top: var(--space-1);
     }
 
     .canvas-node-composer-footer {
@@ -6994,7 +6994,7 @@
     .canvas-node-composer-resize-handle {
         display: grid;
         width: 100%;
-        height: var(--space-4);
+        height: var(--space-2);
         place-items: center;
         border: 0;
         background: transparent;