From caac5af5cdde6744de1d30f07cded0cfb563cf9b Mon Sep 17 00:00:00 2001
From: yupi <592789970@qq.com>
Date: Sat, 14 May 2022 14:03:30 +0800
Subject: [PATCH] =?UTF-8?q?add=20=E6=B7=BB=E5=8A=A0=E9=BB=98=E8=AE=A4?=
 =?UTF-8?q?=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md              |  4 +++-
 src/App.vue            | 27 +++++++++++----------------
 src/examples/index.ts  | 10 ++++++++--
 src/examples/init.json | 11 +++++++++++
 4 files changed, 33 insertions(+), 19 deletions(-)
 create mode 100644 src/examples/init.json

diff --git a/README.md b/README.md
index 5d53232..ac2dabf 100644
--- a/README.md
+++ b/README.md
@@ -13,6 +13,7 @@
 1. 将 SQL 的编写逻辑 `结构化` ，像写文章大纲一样编写和阅读 SQL
 2. 重复的 SQL 只需编写一次 ，SQL 变动时修改一处即可
 3. 可以针对某部分 SQL 进行传参和调试
+4. 查看 SQL 语句的引用树
 
 ## 应用场景
 
@@ -61,7 +62,8 @@ from
 2. 支持一键生成 SQL
 3. 支持参数透传，比如 @a(xx = #{yy})，yy 变量可传递给 @a 公式
 4. 支持嵌套传参（将子查询作为参数），比如 @a(xx = @b(yy = 1))
-5. 不限制用户在 JSON 中编写的内容，因此该工具也可以作为重复代码生成器来使用。
+5. 不限制用户在 JSON 中编写的内容，因此该工具也可以作为重复代码生成器来使用
+6. 支持查看 SQL 语句的调用树，便于分析引用关系
 
 ## 文档
 
diff --git a/src/App.vue b/src/App.vue
index 64c88fc..0a77373 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { doGenerateSQL } from "./generator";
 import { importExample } from "./examples";
-import { onMounted, ref, toRaw } from "vue";
+import { onMounted, ref, toRaw, watch } from "vue";
 import * as monaco from "monaco-editor";
 import { format } from "sql-formatter";
 import { GithubOutlined } from "@ant-design/icons-vue";
@@ -65,23 +65,13 @@ const showInvokeTree = () => {
   drawerVisible.value = true;
 };
 
-const initJSONValue =
-  "{\n" +
-  '    "main": {\n' +
-  '        "sql": "select * from @union_all_layer(分区 = 2021) where 分区 = #{分区}",\n' +
-  '        "params": {\n' +
-  '            "分区": 2022\n' +
-  "        }\n" +
-  "    },\n" +
-  '    "union_all_layer": {\n' +
-  '        "sql": "select * from xx where 分区 = #{分区}"\n' +
-  "    }\n" +
-  "}";
+const initJSONValue = importExample("init");
 
 onMounted(() => {
   if (inputContainer.value) {
+    const initValue = localStorage.getItem("draft") ?? initJSONValue;
     inputEditor.value = monaco.editor.create(inputContainer.value, {
-      value: localStorage.getItem("draft") ?? initJSONValue,
+      value: initValue,
       language: "json",
       theme: "vs-dark",
       formatOnPaste: true,
@@ -90,6 +80,11 @@ onMounted(() => {
         enabled: false,
       },
     });
+    setTimeout(() => {
+      if (inputEditor.value) {
+        inputEditor.value.getAction("editor.action.formatDocument").run();
+      }
+    }, 500);
     setInterval(() => {
       if (inputEditor.value) {
         localStorage.setItem("draft", toRaw(inputEditor.value).getValue());
@@ -165,7 +160,7 @@ onMounted(() => {
       v-model:visible="drawerVisible"
       title="调用树"
       placement="right"
-      body-style="width: 50vw"
+      :body-style="{ width: '50vw' }"
     >
       <SearchableTree :tree="invokeTree" />
     </a-drawer>
@@ -180,4 +175,4 @@ onMounted(() => {
 .ant-drawer-content-wrapper {
   width: auto !important;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/examples/index.ts b/src/examples/index.ts
index 4aadbd1..4c25e74 100644
--- a/src/examples/index.ts
+++ b/src/examples/index.ts
@@ -1,3 +1,9 @@
-export const importExample = () => {
-  alert(1);
+import init from "./init.json";
+
+const exampleMap: Record<string, any> = {
+  init,
+};
+
+export const importExample = (key: string) => {
+  return JSON.stringify(exampleMap[key]);
 };
diff --git a/src/examples/init.json b/src/examples/init.json
new file mode 100644
index 0000000..bb58c54
--- /dev/null
+++ b/src/examples/init.json
@@ -0,0 +1,11 @@
+{
+  "main": "必填, 代码从这里开始生成, 用 @规则名() 引用其他语句",
+  "规则名": "可以编写任意 SQL 语句 @规则名2() @动态传参(a = 求给 ||| b = star)",
+  "规则名2": {
+    "sql": "用 #{参数名} 指定可被替换的值",
+    "params": {
+      "参数名": "在 params 中指定静态参数, 会优先被替换"
+    }
+  },
+  "动态传参": "#{a}鱼皮#{b}"
+}
\ No newline at end of file