fix (core): 修复编辑器显示混乱问题

Author: qianmoQ

src/App.vue

@@ -12,14 +12,16 @@
 
     <div class="flex-1 flex overflow-hidden">
       <!-- 代码编辑器 -->
-      <div class="flex-1 flex flex-col">
-        <div class="bg-gray-100 px-4 py-2 border-b border-gray-200 flex items-center justify-between">
+      <div class="flex-1 flex flex-col overflow-hidden">
+        <div class="bg-gray-100 px-4 py-2 border-b border-gray-200 flex items-center justify-between flex-shrink-0">
           <h2 class="text-sm font-medium text-gray-700">{{ getLanguageDisplayName(currentLanguage) }} 代码编辑器</h2>
           <div class="text-xs text-gray-500">
             <strong>{{ code.length }}</strong> 字符, <strong>{{ code.split('\n').length }}</strong> 行
           </div>
         </div>
-        <CodeEditor v-model="code" class="flex-1" :language="currentLanguage"/>
+        <div class="flex-1 overflow-hidden">
+          <CodeEditor v-model="code" class="h-full" :language="currentLanguage"/>
+        </div>
       </div>
 
       <!-- 输出 -->

src/components/CodeEditor.vue

@@ -1,19 +1,20 @@
 <template>
-  <div class="flex bg-white h-full relative">
+  <div class="flex bg-white h-full relative overflow-hidden">
     <!-- 行号 -->
     <div ref="lineNumbersRef"
-         class="bg-gray-50 text-gray-400 text-sm font-mono py-4 px-3 select-none border-r border-gray-200 overflow-hidden flex-shrink-0 z-10">
+         class="bg-gray-50 text-gray-400 text-sm font-mono px-3 pb-4 select-none border-r border-gray-200 overflow-hidden flex-shrink-0 z-10"
+         style="padding-top: 0;">
       <div v-for="(num, index) in lineNumbers" :key="index" class="h-6 leading-6 text-right">
         {{ num }}
       </div>
     </div>
 
     <!-- 语法高亮容器 -->
-    <div class="flex-1 relative">
+    <div class="flex-1 relative overflow-hidden">
       <!-- 高亮显示层 -->
       <pre ref="highlightRef"
-           class="absolute inset-0 p-4 font-mono text-sm leading-6 bg-transparent pointer-events-none overflow-hidden whitespace-pre-wrap z-0"
-           style="margin: 0; border: 0; word-break: break-word; white-space: pre-wrap;"
+           class="absolute inset-0 px-4 pb-4 font-mono text-sm leading-6 bg-transparent pointer-events-none overflow-auto whitespace-pre-wrap z-0"
+           style="margin: 0; border: 0; padding-top: 0; word-break: break-word; white-space: pre-wrap;"
            v-html="highlightedCode"></pre>
 
       <!-- 代码输入框 -->
@@ -22,8 +23,8 @@
                 @input="handleInput"
                 @keydown="handleKeyDown"
                 @scroll="handleScroll"
-                class="absolute inset-0 p-4 font-mono text-sm leading-6 resize-none outline-none bg-transparent z-10"
-                style="color: transparent; caret-color: #374151; margin: 0; border: 0; word-break: break-word; white-space: pre-wrap;"
+                class="absolute inset-0 px-4 pb-4 font-mono text-sm leading-6 resize-none outline-none bg-transparent z-10 overflow-auto"
+                style="color: transparent; caret-color: #374151; margin: 0; border: 0; padding-top: 0; word-break: break-word; white-space: pre-wrap;"
                 placeholder="在此输入代码..."
                 spellcheck="false">
       </textarea>