Merge 6fb9b4951e into cd1c1fb8cb

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]">
-      <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、牵一发而动全身的恐惧么？

src/components/SearchableTree.vue

@@ -14,9 +14,15 @@
       @expand="onExpand"
     >
       <template #title="{ title, sql, params, resultSQL }">
-        <a-popover title="详情" placement="top">
+        <a-popover title="详情" placement="top" trigger="click">
           <template #content>
-            <div style="max-width: 600px">
+            <div
+              style="
+                max-width: 600px;
+                max-height: calc(100vh - 70px);
+                overflow: auto;
+              "
+            >
               <p>
                 <b>替换前语句：</b>
                 <a-typography-paragraph copyable>
@@ -51,12 +57,9 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 
-const props = defineProps<{ tree?: InvokeTree }>();
-
-const tree = ref(props.tree);
-if (!tree.value) {
-  tree.value = [];
-}
+const props = withDefaults(defineProps<{ tree?: InvokeTree }>(), {
+  tree: () => [],
+});
 
 const expandedKeys = ref<string[]>([]);
 const searchValue = ref<string>("");
@@ -98,16 +101,16 @@ const generateList = (data: InvokeTreeNode[], preKey: string) => {
     }
   }
 };
-generateList(tree.value, "");
+generateList(props.tree, "");
 
 watch(searchValue, (value) => {
-  if (!tree?.value) {
+  if (!props.tree.length) {
     return;
   }
   expandedKeys.value = dataList
     .map((item: InvokeTreeNode) => {
       if (item.title.indexOf(value) > -1) {
-        return getParentKey(item.key, tree.value as InvokeTree);
+        return getParentKey(item.key, props.tree as InvokeTree);
       }
       return null;
     })

src/generator/index.ts

@@ -11,7 +11,7 @@ export function doGenerateSQL(json: InputJSON) {
   if (!sql) {
     return null;
   }
-  const initTreeNode = {
+  const initTreeNode: InvokeTreeNode = {
     title: "main",
     sql,
     children: [],
@@ -26,7 +26,7 @@ export function doGenerateSQL(json: InputJSON) {
   );
   return {
     resultSQL,
-    invokeTree: rootInvokeTreeNode.children[0], // 取第一个作为根节点
+    invokeTree: rootInvokeTreeNode.children![0], // 取第一个作为根节点
   };
 }
 
@@ -156,7 +156,7 @@ function replaceSubSql(
     const params: Record<string, string> = {};
     for (const singleParamsStr of singleParamsStrArray) {
       // 必须分成 2 段
-      const keyValueArray = singleParamsStr.split("=", 2);
+      const keyValueArray = singleParamsStr.split(/=(.+)/, 2);
       if (keyValueArray.length < 2) {
         continue;
       }