From fe25f91ab02b662440f071ab83e6e4c794ce3d29 Mon Sep 17 00:00:00 2001
From: watchingfun <wenhuan2333@gmail.com>
Date: Wed, 17 Jan 2024 11:25:54 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96:=20=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=99=A8=E5=AE=B9=E5=99=A8=E6=94=B9=E4=B8=BA=E5=8F=AF=E6=8B=96?=
 =?UTF-8?q?=E6=8B=BD=E7=9A=84=E5=88=86=E5=89=B2=E9=9D=A2=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json |  2 ++
 src/App.vue  | 14 ++++++++------
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 57dcdd8..e42190c 100644
--- a/package.json
+++ b/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",
diff --git a/src/App.vue b/src/App.vue
index 4a28cc6..d8ac32c 100644
--- a/src/App.vue
+++ b/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]">
-      <a-col :sm="24" :md="12">
+    <splitpanes class="default-theme">
+      <pane>
         <div
           id="inputContainer"
           ref="inputContainer"
           style="height: 80vh; max-width: 100%"
         />
-      </a-col>
-      <a-col :sm="24" :md="12">
+      </pane>
+      <pane>
         <div
           id="outputContainer"
           ref="outputContainer"
           style="height: 80vh; max-width: 100%"
         />
-      </a-col>
-    </a-row>
+      </pane>
+    </splitpanes>
     <br />
     <div style="margin-bottom: 16px">
       yupi：你能体会手写一句 3000 行的 SQL、牵一发而动全身的恐惧么？