优化: 编辑器容器改为可拖拽的分割面板

package.json

@@ -11,10 +11,12 @@
     "@ant-design/icons-vue": "^6.1.0",
     "ant-design-vue": "^3.2.3",
     "monaco-editor": "^0.33.0",
+    "splitpanes": "^3.1.5",
     "sql-formatter": "^4.0.2",
     "vue": "^3.2.25"
   },
   "devDependencies": {
+    "@types/splitpanes": "^2.2.6",
     "@typescript-eslint/eslint-plugin": "^5.23.0",
     "@typescript-eslint/parser": "^5.23.0",
     "@vitejs/plugin-vue": "^2.3.1",

src/App.vue

@@ -5,6 +5,8 @@ import { onMounted, ref, toRaw } from "vue";
 import * as monaco from "monaco-editor";
 import { format } from "sql-formatter";
 import { GithubOutlined } from "@ant-design/icons-vue";
+import { Splitpanes, Pane } from "splitpanes";
+import "splitpanes/dist/splitpanes.css";
 
 import EditorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
 import JsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
@@ -137,22 +139,22 @@ onMounted(() => {
       </a-space>
     </a-row>
     <div style="margin-top: 16px" />
-    <a-row :gutter="[16, 16]">
+    <splitpanes class="default-theme">
-      <a-col :sm="24" :md="12">
+      <pane>
         <div
           id="inputContainer"
           ref="inputContainer"
           style="height: 80vh; max-width: 100%"
         />
-      </a-col>
+      </pane>
-      <a-col :sm="24" :md="12">
+      <pane>
         <div
           id="outputContainer"
           ref="outputContainer"
           style="height: 80vh; max-width: 100%"
         />
-      </a-col>
+      </pane>
-    </a-row>
+    </splitpanes>
     <br />
     <div style="margin-bottom: 16px">
       yupi：你能体会手写一句 3000 行的 SQL、牵一发而动全身的恐惧么？