add 添加默认示例

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 语句的调用树，便于分析引用关系
 
 ## 文档
 

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>
+</style>

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]);
 };

src/examples/init.json

@@ -0,0 +1,11 @@
+{
+  "main": "必填, 代码从这里开始生成, 用 @规则名() 引用其他语句",
+  "规则名": "可以编写任意 SQL 语句 @规则名2() @动态传参(a = 求给 ||| b = star)",
+  "规则名2": {
+    "sql": "用 #{参数名} 指定可被替换的值",
+    "params": {
+      "参数名": "在 params 中指定静态参数, 会优先被替换"
+    }
+  },
+  "动态传参": "#{a}鱼皮#{b}"
+}