fix(ui): 修复 VariableAwareInput 占位符显示问题

- 使用 CodeMirror 6 官方 placeholder 扩展替代 aria-placeholder 方案
- 修复 autosize: true 时高度计算返回对象格式
- 添加 flex 布局支持容器高度自适应
- 更新占位符 CSS 样式使用 .cm-placeholder 选择器

Author: linshenkx

packages/ui/src/components/OutputDisplayCore.vue

@@ -135,10 +135,11 @@
             @update:model-value="handleSourceInput"
             :readonly="mode !== 'editable' || streaming"
             :placeholder="placeholder"
-            :autosize="{ minRows: 10, maxRows: 20 }"
+            :autosize="true"
             v-bind="variableData"
             @variable-extracted="handleVariableExtracted"
             @add-missing-variable="handleAddMissingVariable"
+            style="height: 100%; min-height: 0;"
           />
 
           <!-- Basic/Image 模式：使用普通输入框 -->

packages/ui/src/components/variable-extraction/VariableAwareInput.vue

@@ -50,7 +50,7 @@
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount, watch, computed } from 'vue'
 
-import { EditorView, highlightSpecialChars, drawSelection, dropCursor, rectangularSelection, crosshairCursor, keymap } from "@codemirror/view";
+import { EditorView, highlightSpecialChars, drawSelection, dropCursor, rectangularSelection, crosshairCursor, keymap, placeholder as cmPlaceholder } from "@codemirror/view";
 import { EditorState, Compartment } from "@codemirror/state";
 import { history, historyKeymap, defaultKeymap, indentWithTab } from "@codemirror/commands";
 import { foldGutter, foldKeymap, indentOnInput, bracketMatching, defaultHighlightStyle, syntaxHighlighting } from "@codemirror/language";
@@ -356,7 +356,11 @@ const handleAddMissingVariable = (varName: string) => {
 const editorHeight = computed(() => {
     const autosize = props.autosize;
     if (typeof autosize === "boolean") {
-        return autosize ? "auto" : "200px";
+        // autosize === true 时，完全自适应容器高度（100%）
+        // autosize === false 时，使用固定高度
+        return autosize
+            ? { min: '100%', max: 'none' }
+            : { min: '200px', max: '200px' };
     }
     const minRows = autosize.minRows || 4;
     const maxRows = autosize.maxRows || 12;
@@ -601,11 +605,9 @@ onMounted(() => {
                     checkSelection();
                 }
             }),
-            // 占位符
+            // 占位符（使用官方 placeholder 扩展）
             placeholderCompartment.of(
-                EditorView.contentAttributes.of({
-                    "aria-placeholder": props.placeholder,
-                }),
+                props.placeholder ? cmPlaceholder(props.placeholder) : []
             ),
         ],
     });
@@ -700,9 +702,7 @@ watch(
         editorView.dispatch({
             effects: [
                 placeholderCompartment.reconfigure(
-                    EditorView.contentAttributes.of({
-                        "aria-placeholder": placeholder,
-                    }),
+                    placeholder ? cmPlaceholder(placeholder) : []
                 ),
             ],
         });
@@ -824,13 +824,18 @@ defineExpose({
 .variable-aware-input-wrapper {
     position: relative;
     width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
 }
 
 .codemirror-container {
     border: 1px solid var(--n-border-color);
     border-radius: var(--n-border-radius);
     overflow: hidden;
     transition: border-color 0.3s var(--n-bezier);
+    flex: 1;
+    min-height: 0;
 }
 
 .codemirror-container:hover {
@@ -867,12 +872,11 @@ defineExpose({
     word-break: break-word;
 }
 
-/* 占位符样式 */
-.codemirror-container :deep(.cm-content[aria-placeholder]:empty::before) {
-    content: attr(aria-placeholder);
+/* 占位符样式（使用 CodeMirror 官方 placeholder 扩展） */
+.codemirror-container :deep(.cm-placeholder) {
     color: var(--n-placeholder-color);
     pointer-events: none;
-    position: absolute;
+    font-style: italic;
 }
 
 /* 自动完成面板样式 */