From 669973460f9e22de94df36c048a840515d6d7f06 Mon Sep 17 00:00:00 2001
From: lhx-666-cool <d3032471065@yeah.net>
Date: Thu, 5 Mar 2026 15:27:34 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BA=86=E5=89=8D=E7=AB=AF?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=EF=BC=8C=E7=8E=B0=E5=9C=A8=E5=8F=AF=E4=BB=A5?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E8=BE=93=E5=85=A5=E8=BE=93=E5=87=BA=E6=A1=86?=
 =?UTF-8?q?=E7=9A=84=E5=A4=A7=E5=B0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/pages/CodePage.vue | 812 ++++++++++++++++++++++++++++++++++---
 1 file changed, 754 insertions(+), 58 deletions(-)

diff --git a/web/src/pages/CodePage.vue b/web/src/pages/CodePage.vue
index 9e81109..f491c92 100644
--- a/web/src/pages/CodePage.vue
+++ b/web/src/pages/CodePage.vue
@@ -1,69 +1,126 @@
 <template>
-  <div class="bg-[#282c34] text-md flex justify-center items-center w-[100vw] flex-1 min-h-0">
-    <div class="w-3/4 h-3/4 bg-[#282c34] text-sm scale-133 flex">
-      <div class="w-3/4 h-full min-w-0 ">
-        <div ref="editorContainer" class="w-full h-full">
+  <div class="code-page">
+    <div class="workbench" :style="workbenchStyle">
+      <div
+        ref="workspaceRef"
+        class="workspace"
+        :class="panelPosition === 'right' ? 'workspace-right' : 'workspace-bottom'"
+      >
+        <div class="editor-pane">
+          <div ref="editorContainer" class="editor-surface"></div>
+        </div>
+
+        <div
+          class="splitter"
+          :class="[
+            panelPosition === 'right' ? 'splitter-vertical' : 'splitter-horizontal',
+            { 'is-active': isResizing }
+          ]"
+          @pointerdown="startResize"
+        ></div>
+
+        <div
+          ref="ioPaneRef"
+          class="io-pane"
+          :class="panelPosition === 'bottom' ? 'io-pane-horizontal' : 'io-pane-vertical'"
+          :style="ioPaneStyle"
+        >
+          <div class="io-section" :style="ioInputStyle">
+            <div class="io-header">
+              <span>输入</span>
+              <div class="header-spacer"></div>
+              <button class="action-btn" type="button" @click="handleRun(false)">
+                <img :src="saveIcon" alt="save" />
+              </button>
+              <button class="action-btn" type="button" @click="handleRun(true)">
+                <img :src="runIcon" alt="run" />
+              </button>
+            </div>
+            <div class="io-content">
+              <textarea
+                id="stdin"
+                name="stdin"
+                class="input-area"
+                placeholder="请输入测试样例"
+                v-model="stdin"
+              ></textarea>
+            </div>
+          </div>
+
+          <div
+            class="io-splitter"
+            :class="[
+              panelPosition === 'bottom' ? 'io-splitter-vertical' : 'io-splitter-horizontal',
+              { 'is-active': isIoResizing }
+            ]"
+            @pointerdown="startIoResize"
+          ></div>
+
+          <div class="io-section" :style="ioOutputStyle">
+            <div class="io-header">
+              <span>输出</span>
+            </div>
+            <div class="io-content output-area">
+              <div v-show="time !== 0" class="run-time">运行时间：{{ time }} ms</div>
+              <pre class="output-text">{{ status !== 'completed' ? status : (stdout === '' ? 'Empty' : stdout) }}</pre>
+              <pre v-show="stderr !== ''" class="output-text output-error">{{ stderr }}</pre>
+              <pre v-show="log !== ''" class="output-text output-error">{{ log }}</pre>
+            </div>
+          </div>
         </div>
       </div>
 
-      <div class="flex-1 bg-stone-900 min-w-0 text-xs">
-        <div class="h-1/2 text-white flex flex-col">
-          <div class="bg-stone-700 p-1 px-2 flex items-center">
-            <div>
-              输入
-            </div>
-            <div class="flex-1 min-w-0">
-            </div>
-            <div class="h-4 w-4 mr-2" @click="handleRun(false)">
-              <img :src="saveIcon" alt="run">
-            </div>
-            <div class="h-4 w-4" @click="handleRun(true)">
-              <img :src="runIcon" alt="run">
-            </div>
-          </div>
-          <div class="flex-1 min-h-0 ">
-            <div class="w-full h-full overflow-hidden">
-              <textarea name="stdin" id="stdin"
-                class="w-full h-full resize-none outline-none border-0 p-2 whitespace-pre-wrap" placeholder="请输入测试样例"
-                v-model="stdin"></textarea>
-            </div>
-          </div>
-        </div>
-        <div class="h-1/2 text-white flex flex-col">
-          <div class="bg-stone-700 p-1 px-2">
-            输出
-          </div>
-          <div class="flex-1 min-h-0 overflow-auto">
-            <div class="w-full h-full p-2">
-              <!-- {{ stdout === '' ? 'Empty' : stdout }} -->
-              <div v-show="time !== 0">
-                运行时间：{{ time }} ms
-              </div>
-              <pre class="whitespace-pre-wrap break-words">{{ status !== 'completed' ? status : (stdout === '' ? 'Empty' : stdout) }}</pre>
-              <pre v-show="stderr !== ''" class="text-red-500 whitespace-pre-wrap break-words">{{ stderr }}</pre>
-              <pre v-show="log !== ''" class="text-red-500 whitespace-pre-wrap break-words">{{ log }}</pre>
-            </div>
-          </div>
-        </div>
-      </div>
+      <aside class="right-toolbar">
+        <button
+          class="tool-btn"
+          :class="{ active: panelPosition === 'right' }"
+          type="button"
+          @click="setPanelPosition('right')"
+          title="输出区在右侧"
+        >
+          右
+        </button>
+        <button
+          class="tool-btn"
+          :class="{ active: panelPosition === 'bottom' }"
+          type="button"
+          @click="setPanelPosition('bottom')"
+          title="输出区在下方"
+        >
+          下
+        </button>
+
+        <div class="toolbar-divider"></div>
+
+        <button class="tool-btn" type="button" @click="adjustFontScale(ZOOM_STEP)" title="放大字体">
+          A+
+        </button>
+        <button class="tool-btn" type="button" @click="adjustFontScale(-ZOOM_STEP)" title="缩小字体">
+          A-
+        </button>
+        <button class="tool-btn" type="button" @click="resetFontScale" title="重置字体">
+          100
+        </button>
+        <div class="zoom-label">{{ fontScale }}%</div>
+      </aside>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, defineProps, onUnmounted } from 'vue'
+import { ref, onMounted, defineProps, onUnmounted, computed, watch, nextTick } from 'vue'
 import { EditorView } from '@codemirror/view'
-import { EditorState } from '@codemirror/state'
+import { Compartment, EditorState } from '@codemirror/state'
 import { cpp } from '@codemirror/lang-cpp'
 import { basicSetup } from 'codemirror'
 import { languageServer } from 'codemirror-languageserver';
 import { keymap } from '@codemirror/view'
-import { indentMore, indentLess, insertTab, indentWithTab } from "@codemirror/commands";
-import { oneDark } from "@codemirror/theme-one-dark";
+import { indentMore, indentLess, insertTab } from "@codemirror/commands";
+import { oneDark, oneDarkHighlightStyle } from "@codemirror/theme-one-dark";
 import runIcon from '../assets/run.svg'
 import saveIcon from '../assets/save.svg'
 import { useRouter } from 'vue-router'
-import { indentUnit } from '@codemirror/language';
+import { defaultHighlightStyle, indentUnit, syntaxHighlighting } from '@codemirror/language';
 
 const router = useRouter()
 
@@ -82,6 +139,27 @@ const time = ref(0)
 const log = ref('')
 const isLoading = ref(false)
 const editorView = ref<EditorView | null>(null)
+const workspaceRef = ref<HTMLElement | null>(null)
+const ioPaneRef = ref<HTMLElement | null>(null)
+const isResizing = ref(false)
+const isIoResizing = ref(false)
+
+type PanelPosition = 'right' | 'bottom'
+const panelPosition = ref<PanelPosition>('right')
+const panelSize = ref(36)
+const ioSplit = ref(50)
+const fontScale = ref(100)
+
+const ZOOM_STEP = 5
+const ZOOM_MIN = 70
+const ZOOM_MAX = 180
+
+const PANEL_POSITION_KEY = 'code_panel_position'
+const PANEL_SIZE_KEY = 'code_panel_size'
+const IO_SPLIT_KEY = 'code_io_split_ratio'
+const FONT_SCALE_KEY = 'code_font_scale'
+
+const editorThemeCompartment = new Compartment()
 
 const serverUri = window.CONFIG.LSP_SERVER !== '__LSP_SERVER_URL_PLACEHOLDER__' ? window.CONFIG.LSP_SERVER : import.meta.env.VITE_LSP_SERVER;
 const backend = window.CONFIG.BACKEND !== '__BACKEND_URL_PLACEHOLDER__' ? window.CONFIG.BACKEND : import.meta.env.VITE_BACKEND;
@@ -94,8 +172,238 @@ const ls = languageServer({
 });
 const editorContainer = ref<HTMLElement | null>(null)
 
+const workbenchStyle = computed(() => ({
+  '--ui-font-size': `${Math.max(11, Math.round((16 * fontScale.value) / 100))}px`,
+} as Record<string, string>))
+
+const ioPaneStyle = computed(() => ({
+  flexBasis: `${panelSize.value}%`,
+}))
+
+const ioInputStyle = computed(() => ({
+  flex: `0 0 ${ioSplit.value}%`,
+}))
+
+const ioOutputStyle = computed(() => ({
+  flex: `0 0 ${100 - ioSplit.value}%`,
+}))
+
+function clampPanelSize(value: number, position: PanelPosition = panelPosition.value) {
+  const min = position === 'right' ? 12 : 14
+  const max = position === 'right' ? 56 : 70
+  return Math.min(max, Math.max(min, value))
+}
+
+function clampIoSplit(value: number) {
+  return Math.min(80, Math.max(20, value))
+}
+
+function clampFontScale(value: number) {
+  return Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, value))
+}
+
+function createEditorTheme(scale: number) {
+  const fontPx = Math.max(12, Math.round((16 * scale) / 100))
+  return EditorView.theme({
+    "&": { height: "100%" },
+    ".cm-scroller": { overflow: "auto" },
+    ".cm-content, .cm-gutters": {
+      fontSize: `${fontPx}px`,
+      lineHeight: '1.6',
+      fontFamily: '"JetBrains Mono", "Fira Code", "Cascadia Code", "Consolas", monospace'
+    }
+  })
+}
+
+function requestEditorMeasure() {
+  if (!editorView.value) {
+    return
+  }
+  editorView.value.requestMeasure()
+}
+
+function applyEditorTheme(scale: number = fontScale.value) {
+  if (!editorView.value) {
+    return
+  }
+  editorView.value.dispatch({
+    effects: editorThemeCompartment.reconfigure(createEditorTheme(scale))
+  })
+}
+
+function setPanelPosition(position: PanelPosition) {
+  if (panelPosition.value === position) {
+    return
+  }
+  panelPosition.value = position
+}
+
+function setFontScale(value: number) {
+  const next = clampFontScale(value)
+  if (next === fontScale.value) {
+    return
+  }
+  fontScale.value = next
+}
+
+function adjustFontScale(delta: number) {
+  setFontScale(fontScale.value + delta)
+}
+
+function resetFontScale() {
+  setFontScale(100)
+}
+
+function handleZoomKeydown(event: KeyboardEvent) {
+  const hasModifier = event.ctrlKey || event.metaKey
+  if (!hasModifier) {
+    return
+  }
+
+  if (event.key === '+' || event.key === '=' || event.code === 'NumpadAdd') {
+    event.preventDefault()
+    adjustFontScale(ZOOM_STEP)
+    return
+  }
+
+  if (event.key === '-' || event.code === 'NumpadSubtract') {
+    event.preventDefault()
+    adjustFontScale(-ZOOM_STEP)
+    return
+  }
+
+  if (event.key === '0' || event.code === 'Digit0' || event.code === 'Numpad0') {
+    event.preventDefault()
+    resetFontScale()
+  }
+}
+
+let lastWheelZoomTime = 0
+
+function handleZoomWheel(event: WheelEvent) {
+  if (!(event.ctrlKey || event.metaKey)) {
+    return
+  }
+
+  event.preventDefault()
+  const now = Date.now()
+  if (now - lastWheelZoomTime < 35) {
+    return
+  }
+  lastWheelZoomTime = now
+  adjustFontScale(event.deltaY < 0 ? ZOOM_STEP : -ZOOM_STEP)
+}
+
+let resizeCleanup: (() => void) | null = null
+let ioResizeCleanup: (() => void) | null = null
+
+function stopResize() {
+  if (!resizeCleanup) {
+    return
+  }
+  resizeCleanup()
+  resizeCleanup = null
+}
+
+function stopIoResize() {
+  if (!ioResizeCleanup) {
+    return
+  }
+  ioResizeCleanup()
+  ioResizeCleanup = null
+}
+
+function startResize(event: PointerEvent) {
+  if (!workspaceRef.value) {
+    return
+  }
+  event.preventDefault()
+  stopResize()
+  isResizing.value = true
+  document.body.classList.add('is-resizing-panel')
+  document.body.style.cursor = panelPosition.value === 'right' ? 'col-resize' : 'row-resize'
+
+  const handlePointerMove = (moveEvent: PointerEvent) => {
+    if (!workspaceRef.value) {
+      return
+    }
+    const rect = workspaceRef.value.getBoundingClientRect()
+    if (rect.width <= 0 || rect.height <= 0) {
+      return
+    }
+
+    if (panelPosition.value === 'right') {
+      const size = ((rect.right - moveEvent.clientX) / rect.width) * 100
+      panelSize.value = clampPanelSize(size, 'right')
+    } else {
+      const size = ((rect.bottom - moveEvent.clientY) / rect.height) * 100
+      panelSize.value = clampPanelSize(size, 'bottom')
+    }
+  }
+
+  const handlePointerUp = () => {
+    stopResize()
+  }
+
+  window.addEventListener('pointermove', handlePointerMove)
+  window.addEventListener('pointerup', handlePointerUp, { once: true })
+
+  resizeCleanup = () => {
+    window.removeEventListener('pointermove', handlePointerMove)
+    window.removeEventListener('pointerup', handlePointerUp)
+    document.body.classList.remove('is-resizing-panel')
+    document.body.style.removeProperty('cursor')
+    isResizing.value = false
+    requestEditorMeasure()
+  }
+}
+
+function startIoResize(event: PointerEvent) {
+  if (!ioPaneRef.value) {
+    return
+  }
+  event.preventDefault()
+  stopIoResize()
+  isIoResizing.value = true
+  document.body.classList.add('is-resizing-panel')
+  document.body.style.cursor = panelPosition.value === 'bottom' ? 'col-resize' : 'row-resize'
+
+  const handlePointerMove = (moveEvent: PointerEvent) => {
+    if (!ioPaneRef.value) {
+      return
+    }
+    const rect = ioPaneRef.value.getBoundingClientRect()
+    if (rect.width <= 0 || rect.height <= 0) {
+      return
+    }
+
+    if (panelPosition.value === 'bottom') {
+      const size = ((moveEvent.clientX - rect.left) / rect.width) * 100
+      ioSplit.value = clampIoSplit(size)
+    } else {
+      const size = ((moveEvent.clientY - rect.top) / rect.height) * 100
+      ioSplit.value = clampIoSplit(size)
+    }
+  }
+
+  const handlePointerUp = () => {
+    stopIoResize()
+  }
+
+  window.addEventListener('pointermove', handlePointerMove)
+  window.addEventListener('pointerup', handlePointerUp, { once: true })
+
+  ioResizeCleanup = () => {
+    window.removeEventListener('pointermove', handlePointerMove)
+    window.removeEventListener('pointerup', handlePointerUp)
+    document.body.classList.remove('is-resizing-panel')
+    document.body.style.removeProperty('cursor')
+    isIoResizing.value = false
+  }
+}
+
 function getStatus(id: string) {
-  fetch(backend + `/api/pastes/${props.id}`)
+  fetch(backend + `/api/pastes/${id}`)
     .then(res => res.json())
     .then(res => {
       stdin.value = res.stdin
@@ -110,7 +418,50 @@ function getStatus(id: string) {
     })
 }
 
+watch(panelPosition, (position) => {
+  panelSize.value = clampPanelSize(panelSize.value, position)
+  localStorage.setItem(PANEL_POSITION_KEY, position)
+  nextTick(() => requestEditorMeasure())
+})
+
+watch(panelSize, (size) => {
+  localStorage.setItem(PANEL_SIZE_KEY, String(size))
+  requestEditorMeasure()
+})
+
+watch(ioSplit, (size) => {
+  localStorage.setItem(IO_SPLIT_KEY, String(size))
+})
+
+watch(fontScale, (size) => {
+  localStorage.setItem(FONT_SCALE_KEY, String(size))
+  applyEditorTheme(size)
+  requestEditorMeasure()
+})
+
 onMounted(() => {
+  const savedPosition = localStorage.getItem(PANEL_POSITION_KEY)
+  if (savedPosition === 'right' || savedPosition === 'bottom') {
+    panelPosition.value = savedPosition
+  }
+
+  const savedSize = Number(localStorage.getItem(PANEL_SIZE_KEY))
+  if (!Number.isNaN(savedSize)) {
+    panelSize.value = clampPanelSize(savedSize, panelPosition.value)
+  }
+
+  const savedIoSplit = Number(localStorage.getItem(IO_SPLIT_KEY))
+  if (!Number.isNaN(savedIoSplit)) {
+    ioSplit.value = clampIoSplit(savedIoSplit)
+  }
+
+  const savedScale = Number(localStorage.getItem(FONT_SCALE_KEY))
+  if (!Number.isNaN(savedScale)) {
+    fontScale.value = clampFontScale(savedScale)
+  }
+
+  window.addEventListener('keydown', handleZoomKeydown)
+  window.addEventListener('wheel', handleZoomWheel, { passive: false })
 
   const oldCode = localStorage.getItem('code')
   stdin.value = localStorage.getItem('stdin') || ''
@@ -121,14 +472,11 @@ onMounted(() => {
       cpp(),
       ls,
       indentUnit.of("    "),
-      EditorView.theme({
-        "&": { height: "100%" },
-        ".cm-scroller": { overflow: "auto" }
-      }),
+      editorThemeCompartment.of(createEditorTheme(fontScale.value)),
       EditorView.updateListener.of((update) => {
         if (update.docChanged && update.selectionSet) {
           const cursorParams = update.state.selection.main.head;
-          
+
           update.view.dispatch({
             effects: EditorView.scrollIntoView(cursorParams, { y: "nearest" })
           });
@@ -140,6 +488,8 @@ onMounted(() => {
         // 如果需要在行中插入真实 Tab：
         { key: "Mod-Tab", run: insertTab },
       ]),
+      syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+      syntaxHighlighting(oneDarkHighlightStyle),
       oneDark,
     ]
   })
@@ -147,6 +497,9 @@ onMounted(() => {
     state,
     parent: editorContainer.value as HTMLElement
   })
+
+  nextTick(() => requestEditorMeasure())
+
   console.log(props.id)
   if (props.id !== null && props.id !== undefined && props.id !== '') {
     isLoading.value = true
@@ -170,7 +523,7 @@ onMounted(() => {
         time.value = res.execution_time_ms
         log.value = res.compile_log
         if (status.value === 'pending' || status.value === 'running') {
-          let timer = setInterval(() => {
+          const timer = setInterval(() => {
             getStatus(props.id)
             if (status.value !== 'pending' && status.value !== 'running') {
               clearInterval(timer)
@@ -189,6 +542,11 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
+  stopResize()
+  stopIoResize()
+  window.removeEventListener('keydown', handleZoomKeydown)
+  window.removeEventListener('wheel', handleZoomWheel)
+
   if (editorView.value) {
     console.log("Destroying CodeMirror EditorView and closing LSP connection...");
     editorView.value.destroy();
@@ -243,6 +601,344 @@ setInterval(() => {
   }
 }, 1000)
 
-
-
 </script>
+
+<style scoped>
+.code-page {
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+  background:
+    radial-gradient(circle at 10% 6%, rgba(59, 67, 102, 0.32), transparent 36%),
+    radial-gradient(circle at 88% 88%, rgba(0, 122, 204, 0.15), transparent 33%),
+    #1e1e1e;
+  color: #d4d4d4;
+  overflow: hidden;
+}
+
+.workbench {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  min-width: 0;
+  display: flex;
+  background: #1e1e1e;
+  font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", "Consolas", monospace;
+}
+
+.workspace {
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  display: flex;
+}
+
+.workspace-right {
+  flex-direction: row;
+}
+
+.workspace-bottom {
+  flex-direction: column;
+}
+
+.editor-pane {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  background: #1e1e1e;
+}
+
+.editor-surface {
+  width: 100%;
+  height: 100%;
+}
+
+.splitter {
+  flex-shrink: 0;
+  background: #2d2d30;
+  position: relative;
+  transition: background-color 120ms ease;
+}
+
+.splitter:hover,
+.splitter.is-active {
+  background: #007acc;
+}
+
+.splitter-vertical {
+  width: 6px;
+  cursor: col-resize;
+}
+
+.splitter-vertical::after {
+  content: "";
+  position: absolute;
+  left: 2px;
+  right: 2px;
+  top: 50%;
+  height: 52px;
+  transform: translateY(-50%);
+  border-radius: 999px;
+  background: repeating-linear-gradient(to bottom, transparent, transparent 6px, rgba(255, 255, 255, 0.24) 6px, rgba(255, 255, 255, 0.24) 8px);
+}
+
+.splitter-horizontal {
+  height: 6px;
+  cursor: row-resize;
+}
+
+.splitter-horizontal::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  bottom: 2px;
+  left: 50%;
+  width: 52px;
+  transform: translateX(-50%);
+  border-radius: 999px;
+  background: repeating-linear-gradient(to right, transparent, transparent 6px, rgba(255, 255, 255, 0.24) 6px, rgba(255, 255, 255, 0.24) 8px);
+}
+
+.io-pane {
+  min-height: 110px;
+  min-width: 130px;
+  display: flex;
+  background: #252526;
+  border-left: 1px solid #2d2d30;
+}
+
+.io-pane-vertical {
+  flex-direction: column;
+}
+
+.io-pane-horizontal {
+  flex-direction: row;
+}
+
+.workspace-bottom .io-pane {
+  border-left: 0;
+  border-top: 1px solid #2d2d30;
+}
+
+.io-section {
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.io-splitter {
+  flex-shrink: 0;
+  background: #2d2d30;
+  position: relative;
+  transition: background-color 120ms ease;
+}
+
+.io-splitter:hover,
+.io-splitter.is-active {
+  background: #007acc;
+}
+
+.io-splitter-horizontal {
+  height: 6px;
+  cursor: row-resize;
+}
+
+.io-splitter-horizontal::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  bottom: 2px;
+  left: 50%;
+  width: 40px;
+  transform: translateX(-50%);
+  border-radius: 999px;
+  background: repeating-linear-gradient(to right, transparent, transparent 5px, rgba(255, 255, 255, 0.24) 5px, rgba(255, 255, 255, 0.24) 7px);
+}
+
+.io-splitter-vertical {
+  width: 6px;
+  cursor: col-resize;
+}
+
+.io-splitter-vertical::after {
+  content: "";
+  position: absolute;
+  left: 2px;
+  right: 2px;
+  top: 50%;
+  height: 40px;
+  transform: translateY(-50%);
+  border-radius: 999px;
+  background: repeating-linear-gradient(to bottom, transparent, transparent 5px, rgba(255, 255, 255, 0.24) 5px, rgba(255, 255, 255, 0.24) 7px);
+}
+
+.io-pane-horizontal .io-section + .io-section .io-header {
+  border-left: 1px solid #2d2d30;
+}
+
+.io-header {
+  height: 32px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 10px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #c5c8ce;
+  background: #2d2d30;
+  border-bottom: 1px solid #222;
+}
+
+.header-spacer {
+  flex: 1;
+  min-width: 0;
+}
+
+.action-btn {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  cursor: pointer;
+}
+
+.action-btn:hover {
+  background: #3c3c40;
+}
+
+.action-btn img {
+  width: 18px;
+  height: 18px;
+}
+
+.io-content {
+  flex: 1;
+  min-height: 0;
+}
+
+.input-area {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  outline: 0;
+  resize: none;
+  padding: 10px;
+  background: #1e1e1e;
+  color: #d4d4d4;
+  font-family: inherit;
+  font-size: var(--ui-font-size);
+  line-height: 1.6;
+  white-space: pre-wrap;
+}
+
+.output-area {
+  overflow: auto;
+  padding: 10px;
+  background: #1e1e1e;
+}
+
+.run-time {
+  color: #4fc1ff;
+  margin-bottom: 8px;
+  font-size: var(--ui-font-size);
+}
+
+.output-text {
+  margin: 0;
+  font-size: var(--ui-font-size);
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.output-error {
+  color: #f48771;
+}
+
+.right-toolbar {
+  width: 60px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 6px;
+  border-left: 1px solid #2d2d30;
+  background: linear-gradient(180deg, #2a2a2d 0%, #252526 30%, #252526 100%);
+}
+
+.tool-btn {
+  width: 100%;
+  min-height: 30px;
+  border: 1px solid #3a3a3d;
+  border-radius: 6px;
+  background: #2f2f32;
+  color: #c9ccd3;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  cursor: pointer;
+  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
+}
+
+.tool-btn:hover {
+  background: #38383c;
+  border-color: #4b4b4f;
+}
+
+.tool-btn.active {
+  background: #0e639c;
+  border-color: #1177bb;
+  color: #ffffff;
+}
+
+.toolbar-divider {
+  width: 100%;
+  height: 1px;
+  background: #3b3b3d;
+  margin: 4px 0;
+}
+
+.zoom-label {
+  width: 100%;
+  text-align: center;
+  padding: 4px 0;
+  border-radius: 6px;
+  background: #1f1f21;
+  color: #9fa4ad;
+  font-size: 11px;
+  border: 1px solid #353538;
+}
+
+:deep(.cm-editor) {
+  height: 100%;
+}
+
+:global(body.is-resizing-panel) {
+  user-select: none;
+}
+
+@media (max-width: 900px) {
+  .right-toolbar {
+    width: 54px;
+    padding: 8px 4px;
+    gap: 6px;
+  }
+
+  .io-pane {
+    min-width: 110px;
+    min-height: 100px;
+  }
+
+  .io-splitter-vertical {
+    width: 5px;
+  }
+}
+</style>