diff --git a/src/components/ai/ExternalAIPanel.vue b/src/components/ai/ExternalAIPanel.vue
index ed2761d..915963f 100644
--- a/src/components/ai/ExternalAIPanel.vue
+++ b/src/components/ai/ExternalAIPanel.vue
@@ -8,13 +8,15 @@
         :autosize="{ minRows: 3, maxRows: 8 }"
         placeholder="粘贴你发给外部 AI 的提示词..."
       />
-      <div class="field-label" style="margin-top: 12px">AI 代码</div>
-      <n-input
-        v-model:value="rawCode"
-        type="textarea"
-        :autosize="{ minRows: 6, maxRows: 16 }"
-        placeholder="粘贴外部 AI 返回的完整 HTML 代码..."
-      />
+      <div class="code-field">
+        <div class="field-label" style="margin-top: 12px">完整的代码</div>
+        <n-input
+          v-model:value="rawCode"
+          type="textarea"
+          class="code-input"
+          placeholder="粘贴完整的前端代码..."
+        />
+      </div>
       <div v-if="splitResult" class="split-result">
         <n-tag size="small" type="success"
           >HTML · {{ splitResult.html.length }} 字符</n-tag
@@ -128,6 +130,29 @@ async function submit() {
   min-height: 0;
   overflow-y: auto;
   padding: 12px;
+  display: flex;
+  flex-direction: column;
+}
+
+.code-field {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.code-input {
+  flex: 1;
+  min-height: 0;
+}
+
+.code-input :deep(.n-input__textarea) {
+  height: 100%;
+}
+
+.code-input :deep(.n-input__textarea-el) {
+  height: 100%;
+  resize: none;
 }
 
 .field-label {
diff --git a/src/components/editor/Editor.vue b/src/components/editor/Editor.vue
index fb766f3..2ec8e21 100644
--- a/src/components/editor/Editor.vue
+++ b/src/components/editor/Editor.vue
@@ -18,6 +18,12 @@ const styleTheme = EditorView.baseTheme({
   },
 })
 
+const bgColors: Record<string, string> = {
+  html: "#fff6f3",
+  css: "#f3f6ff",
+  js: "#fffdf0",
+}
+
 interface Props {
   language?: "html" | "css" | "js"
   fontSize?: number
@@ -35,12 +41,22 @@ const lang = computed(() => {
   if (props.language === "css") return css()
   return javascript()
 })
+
+const bgTheme = computed(() => {
+  const bg = bgColors[props.language] ?? "#ffffff"
+  return EditorView.theme({
+    "&": { backgroundColor: bg },
+    ".cm-gutters": { backgroundColor: bg },
+  })
+})
+
+const extensions = computed(() => [styleTheme, bgTheme.value, lang.value])
 </script>
 <template>
   <Codemirror
     v-model="code"
     indentWithTab
-    :extensions="[styleTheme, lang]"
+    :extensions="extensions"
     :tabSize="4"
     :style="{ height: '100%', fontSize: props.fontSize + 'px' }"
   />
diff --git a/src/components/editor/Editors.vue b/src/components/editor/Editors.vue
index fd3b16b..2d951ff 100644
--- a/src/components/editor/Editors.vue
+++ b/src/components/editor/Editors.vue
@@ -1,6 +1,8 @@
 <template>
+  <div class="editors-root">
   <n-tabs
     :value="tab"
+    :class="`tab-active-${tab}`"
     pane-class="pane"
     style="height: 100%"
     type="card"
@@ -73,6 +75,7 @@
       />
     </template>
   </n-tabs>
+  </div>
 </template>
 <script lang="ts" setup>
 import { Icon } from "@iconify/vue"
@@ -185,4 +188,28 @@ async function formatAndSubmit() {
 .label {
   font-size: 16px;
 }
+
+:deep(.n-tabs-nav .n-tabs-tab[data-name="html"]) {
+  background-color: #fff6f3 !important;
+}
+:deep(.n-tabs-nav .n-tabs-tab[data-name="css"]) {
+  background-color: #f3f6ff !important;
+}
+:deep(.n-tabs-nav .n-tabs-tab[data-name="js"]) {
+  background-color: #fffdf0 !important;
+}
+
+.editors-root {
+  height: 100%;
+}
+
+:deep(.tab-active-html .n-tab-pane) {
+  background-color: #fff6f3;
+}
+:deep(.tab-active-css .n-tab-pane) {
+  background-color: #f3f6ff;
+}
+:deep(.tab-active-js .n-tab-pane) {
+  background-color: #fffdf0;
+}
 </style>