chore: 渲染端通过 api 获取数据

apps/renderer/src/App.vue

@@ -1,267 +1,11 @@
 <script setup lang="ts">
-import { onMounted } from 'vue';
+import { onMounted, computed, watch } from 'vue';
+import { ElLoading  } from 'element-plus';
 import Postmate from 'postmate';
 import { createRenderer } from '@vtj/renderer'
-import { type BlockSchema } from '@vtj/core'
+import { getFile } from './io';
+import { useQuery } from '@tanstack/vue-query';
 
-const dsl: BlockSchema ={
-  "name": "List",
-  "locked": false,
-  "inject": [],
-  "state": {
-    "applicationList": {
-      "type": "JSExpression",
-      "value": "[]"
-    }
-  },
-  "lifeCycles": {
-    "mounted": {
-      "type": "JSFunction",
-      "value": "() => {\r\n    this.getApplicationList().then(res => {\r\n        this.state.applicationList = res.list\r\n    })\r\n}"
-    }
-  },
-  "methods": {},
-  "computed": {},
-  "watch": [],
-  "css": "",
-  "props": [],
-  "emits": [],
-  "slots": [],
-  "dataSources": {
-    "getApplicationList": {
-      "type": "api",
-      "ref": "esnarea6u",
-      "name": "getApplicationList",
-      "label": "https://custom-chart-pre-api.shiyue.com/",
-      "transform": {
-        "type": "JSFunction",
-        "value": "(res) => {\n    return res;\n}"
-      },
-      "test": {
-        "type": "JSFunction",
-        "value": "() => this.runApi({\n    /* 在这里可输入接口参数  */\n})"
-      },
-      "mockTemplate": {
-        "type": "JSFunction"
-      }
-    }
-  },
-  "__VTJ_BLOCK__": true,
-  "__VERSION__": "1740735328808",
-  "id": "ic98nyzx7",
-  "nodes": [
-    {
-      "id": "lvv6dsl62",
-      "name": "ElTable",
-      "from": "element-plus",
-      "invisible": false,
-      "locked": false,
-      "children": [
-        {
-          "id": "pfh43lnvu",
-          "name": "ElTableColumn",
-          "from": "element-plus",
-          "invisible": false,
-          "locked": false,
-          "children": "",
-          "props": {
-            "prop": "id",
-            "label": "应用 id",
-            "fixed": "left",
-            "index": 1
-          },
-          "directives": [],
-          "events": {}
-        },
-        {
-          "id": "sz31teqlm",
-          "name": "ElTableColumn",
-          "from": "element-plus",
-          "invisible": false,
-          "locked": false,
-          "children": [],
-          "props": {
-            "prop": "name",
-            "label": "应用名称"
-          },
-          "directives": [],
-          "events": {}
-        },
-        {
-          "id": "45tlsubsf",
-          "name": "ElTableColumn",
-          "from": "element-plus",
-          "invisible": false,
-          "locked": false,
-          "children": [
-            {
-              "id": "esnffq4yb",
-              "name": "ElTag",
-              "from": "element-plus",
-              "invisible": false,
-              "locked": false,
-              "slot": {
-                "name": "default",
-                "params": [
-                  "row",
-                  "column",
-                  "$index"
-                ]
-              },
-              "children": {
-                "type": "JSExpression",
-                "value": "this.context.row.active === true ? '运行中' : '已下架'"
-              },
-              "props": {
-                "closable": false,
-                "disable-transitions": true,
-                "hit": false,
-                "size": "small"
-              },
-              "directives": [],
-              "events": {}
-            }
-          ],
-          "props": {
-            "prop": "active",
-            "label": "状态"
-          },
-          "directives": [],
-          "events": {}
-        },
-        {
-          "id": "wiozj7tbe",
-          "name": "ElTableColumn",
-          "from": "element-plus",
-          "invisible": false,
-          "locked": false,
-          "children": [
-            {
-              "id": "2320850l3f",
-              "name": "ElButton",
-              "from": "element-plus",
-              "invisible": false,
-              "locked": false,
-              "slot": {
-                "name": "default",
-                "params": [
-                  "row",
-                  "column",
-                  "$index"
-                ]
-              },
-              "children": "进入项目",
-              "props": {
-                "type": "primary",
-                "size": "small",
-                "plain": false,
-                "text": true,
-                "bg": false,
-                "loadingIcon": "Loading",
-                "icon": "VtjIconProject"
-              },
-              "directives": [],
-              "events": {
-                "click": {
-                  "name": "click",
-                  "handler": {
-                    "type": "JSFunction",
-                    "value": "() => {\r\n\r\n}"
-                  },
-                  "modifiers": {}
-                }
-              }
-            },
-            {
-              "id": "1e8qs5f6xn",
-              "name": "ElPopconfirm",
-              "from": "element-plus",
-              "invisible": false,
-              "locked": false,
-              "slot": {
-                "name": "default",
-                "params": [
-                  "row",
-                  "column",
-                  "$index"
-                ]
-              },
-              "children": [
-                {
-                  "id": "1hscpv89nf",
-                  "name": "ElButton",
-                  "from": "element-plus",
-                  "invisible": false,
-                  "locked": false,
-                  "slot": {
-                    "name": "reference",
-                    "params": []
-                  },
-                  "children": "下架",
-                  "props": {
-                    "size": "small",
-                    "plain": false,
-                    "text": true,
-                    "bg": false,
-                    "link": false,
-                    "round": false,
-                    "circle": false,
-                    "loading": false,
-                    "icon": "Delete",
-                    "type": "warning"
-                  },
-                  "directives": [],
-                  "events": {}
-                }
-              ],
-              "props": {
-                "title": "是否删除?",
-                "confirmButtonText": "删除",
-                "iconColor": "#FF1100"
-              },
-              "directives": [],
-              "events": {
-                "confirm": {
-                  "name": "confirm",
-                  "handler": {
-                    "type": "JSFunction",
-                    "value": "() => {\r\n    console.log('this.context.row', this.context.row)\r\n    console.log(this.context.row.active)\r\n}"
-                  },
-                  "modifiers": {
-                    "once": true
-                  }
-                }
-              }
-            }
-          ],
-          "props": {
-            "prop": "address",
-            "label": "操作",
-            "fixed": "right"
-          },
-          "directives": [],
-          "events": {}
-        }
-      ],
-      "props": {
-        "data": {
-          "type": "JSExpression",
-          "value": "this.state.applicationList"
-        },
-        "size": "small",
-        "highlightCurrentRow": true,
-        "show-summary": false,
-        "lazy": true,
-        "scrollbar-always-on": true,
-        "flexible": true,
-        "stripe": true,
-        "showHeader": true
-      },
-      "directives": [],
-      "events": {}
-    }
-  ]
-};
 
 onMounted(() => {
 const handshake = new Postmate.Model({});
@@ -271,11 +15,34 @@ handshake.then(parent => {
   });
 });
 
-const { renderer } = createRenderer({
-  dsl,
+const { data: file, isFetching } = useQuery({
+  queryKey: ['file', '45tncm34d'],
+  queryFn: async () => {
+    return getFile('45tncm34d');
+  },
+  retry: 3,
+  retryDelay: 2000,
+});
+
+watch(isFetching, (newVal) => {
+  if (newVal) {
+    ElLoading.service({
+      text: '低代码文件加载中...',
+    });
+  } else {
+    ElLoading.service().close();
+  }
+});
+
+const renderer = computed(() => {
+  console.log(file?.value?.dsl.id);
+  if (file?.value?.dsl) {
+    return createRenderer({ dsl: file.value.dsl }).renderer;
+  }
+  return null;
 });
 </script>
 
 <template>
-  <component :is="renderer" />
+  <component :is="renderer" v-if="renderer" />
 </template>

apps/renderer/src/index.ts

@@ -1,10 +1,15 @@
 import { createApp } from "vue";
 import "@sy/web-vitals";
 import { IconsPlugin } from "@vtj/icons";
+import { VueQueryPlugin } from "@tanstack/vue-query";
 // import "@sy/low-code-shared/styles/reset.css";
 
 import App from "./App.vue";
 import ElementPlus from "element-plus";
 import "element-plus/dist/index.css";
 
-createApp(App).use(ElementPlus).use(IconsPlugin).mount("#low-code-renderer");
+createApp(App)
+  .use(ElementPlus)
+  .use(IconsPlugin)
+  .use(VueQueryPlugin)
+  .mount("#low-code-renderer");

apps/renderer/src/io/file.ts

@@ -0,0 +1,16 @@
+import { BlockSchema } from "@vtj/core";
+import instance from "./instance";
+
+export type LowCodeFileSchema = {
+  project_id: number;
+  publish: boolean;
+  active: boolean;
+  dsl: BlockSchema;
+  file_path?: string;
+  file_id?: string;
+};
+
+export const getFile = async (id: string): Promise<LowCodeFileSchema> => {
+  const response = await instance.get(`/api/v1/files/${id}`);
+  return response.data;
+};

apps/renderer/src/io/index.ts

@@ -0,0 +1 @@
+export * from "./file";

apps/renderer/src/io/instance.ts

@@ -0,0 +1,30 @@
+import axios from "axios";
+
+const baseApiUrl = "https://custom-chart-pre-api.shiyue.com/";
+
+// 创建独立实例
+const instance = axios.create({
+  baseURL: baseApiUrl, // 基础URL直接放在实例配置中
+});
+
+// 请求拦截器改为使用实例
+instance.interceptors.request.use(
+  (config) => {
+    // 可在此处添加统一请求头等配置
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+instance.interceptors.response.use(
+  (response) => {
+    return response.data;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+// 导出实例
+export default instance;