feat: 新增预览接口数据动态获取功能

src/hooks/useChartDataFetch.hook.ts

@@ -1,15 +1,18 @@
-import { toRefs, watchEffect } from 'vue'
+import { ref, toRefs, watchEffect, nextTick } from 'vue'
+import type VChart from 'vue-echarts'
 import { http } from '@/api/http'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { RequestDataTypeEnum } from '@/enums/httpEnum'
+import { isPreview } from '@/utils'
 
 /**
- * 数据监听与更改
+ * 图表的 setdata 数据监听与更改
  * @param chartConfig
  */
 export const useChartDataFetch = (chartConfig: CreateComponentType) => {
-  let fetchInterval:any = 0
+  const vChartRef = ref<typeof VChart | null>(null)
+  let fetchInterval: any = 0
 
   watchEffect(() => {
     clearInterval(fetchInterval)
@@ -25,15 +28,23 @@ export const useChartDataFetch = (chartConfig: CreateComponentType) => {
     // 处理地址
     if (requestUrl?.value && requestInterval.value > 0) {
       // requestOriginUrl 允许为空
-      const completePath = requestOriginUrl && requestOriginUrl.value + requestUrl.value
+      const completePath =
+        requestOriginUrl && requestOriginUrl.value + requestUrl.value
       if (!completePath) return
 
       fetchInterval = setInterval(async () => {
         const res = await http(requestHttpType.value)(completePath || '', {})
-        if(res.data) {
-          chartConfig.option.dataset = res.data as any
+        if (res.data) {
+          nextTick(() => {
+            chartConfig.option.dataset = res.data as any
+            if(isPreview() && vChartRef.value) {
+              vChartRef.value.setOption(chartConfig.option)
+            }
+          })
         }
       }, requestInterval.value * 1000)
     }
   })
+
+  return { vChartRef }
 }

src/hooks/useCode.hook.ts

@@ -2,6 +2,7 @@ import hljs from 'highlight.js/lib/core'
 import json from 'highlight.js/lib/languages/json'
 import typescript from 'highlight.js/lib/languages/typescript'
 
+// * code 展示
 export const useCode = () => {
   hljs.registerLanguage('json', json)
   hljs.registerLanguage('typescript', typescript)

src/hooks/usePreviewScale.hook.ts

@@ -1,6 +1,7 @@
 import { ref } from 'vue'
 import throttle from 'lodash/throttle'
 
+// * 屏幕缩放适配
 export const usePreviewScale = (
   width: number,
   height: number,

src/hooks/useTheme.hook.ts

@@ -5,7 +5,7 @@ import { borderRadius } from '@/settings/designSetting'
 import { toLight } from '@/utils'
 
 /**
- * 设置全局主题
+ * * 设置全局主题
  */
 export const useThemeOverridesHook = () => {
   const designStore = useDesignStore()