1 жил өмнө · 4bcf6fd3c7
--- a/.gitignore
+++ b/.gitignore
@@ -4,3 +4,6 @@ dist
 
															 dist-ssr
														
 
															 *.local
														
 
															 .vscode
														
 
															+.idea
														
 
															+.workflow
														
 
															+.husky
														
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
 
															     <meta charset="UTF-8" />
														
 
															     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
														
 
															     <meta name="renderer" content="webkit" />
														
 
															-    <meta name="description" content="GoView 是高效、高性能的拖拽式低代码数据可视化开发平台，将页面元素封装为基础组件，无需编写代码即可完成业务需求。">
														
 
															+    <meta name="description" content="GoView 是高效、高性能的拖拽式低代码数据可视化开发平台，将页面元素封装为基础组件，无需编写代码即可完成业务需求。 ">
														
 
															     <meta name="keywords" content="GoView，goview，低代码，可视化">
														
 
															     <meta name="author" content="奔跑的面条，面条">
														
 
															     <meta
														
@@ -14,6 +14,7 @@
 
															     <link rel="icon" href="./favicon.ico" />
														
 
															     <title>GoView</title>
														
 
															     <link rel="stylesheet" href="./index.css" />
														
 
															+      <script src="js/esobjs-xe2-plugin/dist-web/xe2-assets/js/load-common.js"></script>
														
 
															   </head>
														
 
															   <body>
														
 
															     <div id="appProvider" style="display: none;"></div>
														
--- a/package.json
+++ b/package.json
@@ -1,8 +1,9 @@
 
															 {
														
 
															+  "type": "module",
														
 
															   "name": "go-view",
														
 
															   "version": "2.1.6",
														
 
															   "engines": {
														
 
															-    "node": ">=16.14 <18.0.0"
														
 
															+    "node": ">=12.0"
														
 
															   },
														
 
															   "scripts": {
														
 
															     "dev": "vite --host",
														
@@ -16,34 +17,48 @@
 
															   "dependencies": {
														
 
															     "@amap/amap-jsapi-loader": "^1.0.1",
														
 
															     "@amap/amap-jsapi-types": "^0.0.8",
														
 
															+    "@iconify/json": "^2.2.158",
														
 
															     "@types/color": "^3.0.3",
														
 
															     "@types/crypto-js": "^4.1.1",
														
 
															     "@types/keymaster": "^1.6.30",
														
 
															     "@types/lodash": "^4.14.184",
														
 
															+    "@visactor/vchart": "^1.12.3",
														
 
															+    "@visactor/vchart-theme": "^1.12.1",
														
 
															     "animate.css": "^4.1.1",
														
 
															-    "axios": "^0.27.2",
														
 
															+    "axios": "^1.4.0",
														
 
															+    "cesium": "1.99",
														
 
															     "color": "^4.2.3",
														
 
															     "crypto-js": "^4.1.1",
														
 
															+    "dayjs": "^1.11.7",
														
 
															     "dom-helpers": "^5.2.1",
														
 
															     "echarts-liquidfill": "^3.1.0",
														
 
															     "echarts-stat": "^1.2.0",
														
 
															     "echarts-wordcloud": "^2.0.0",
														
 
															+    "esobjs-xe2-plugin": "^0.1.126-beta-0.3",
														
 
															     "gsap": "^3.11.3",
														
 
															     "highlight.js": "^11.5.0",
														
 
															     "html2canvas": "^1.4.1",
														
 
															+    "iconify-icon": "^1.0.8",
														
 
															     "keymaster": "^1.6.2",
														
 
															+    "mitt": "^3.0.0",
														
 
															     "monaco-editor": "^0.33.0",
														
 
															     "naive-ui": "2.34.3",
														
 
															     "pinia": "^2.0.13",
														
 
															+    "pnpm": "^8.7.0",
														
 
															     "screenfull": "^6.0.1",
														
 
															     "three": "^0.145.0",
														
 
															+    "vite-plugin-cesium": "^1.2.23",
														
 
															     "vue": "^3.2.31",
														
 
															     "vue-demi": "^0.13.1",
														
 
															-    "vue-i18n": "^9.2.2",
														
 
															+    "vue-i18n": "9.2.2",
														
 
															     "vue-router": "4.0.12",
														
 
															+    "vue-xe2-plugin": "^0.1.3",
														
 
															     "vue3-lazyload": "^0.2.5-beta",
														
 
															     "vue3-sketch-ruler": "^1.3.3",
														
 
															-    "vuedraggable": "^4.1.0"
														
 
															+    "vuedraggable": "^4.1.0",
														
 
															+    "xbsj-xe2": "^0.1.16",
														
 
															+    "xbsj-xe2-assets": "^0.1.16",
														
 
															+    "smplotting-xe2-plugin": "^0.1.3"
														
 
															   },
														
 
															   "devDependencies": {
														
 
															     "@commitlint/cli": "^17.0.2",
														
@@ -54,8 +69,8 @@
 
															     "@typescript-eslint/parser": "^5.18.0",
														
 
															     "@vicons/carbon": "^0.12.0",
														
 
															     "@vicons/ionicons5": "~0.11.0",
														
 
															-    "@vitejs/plugin-vue": "^1.10.2",
														
 
															-    "@vitejs/plugin-vue-jsx": "^1.3.9",
														
 
															+    "@vitejs/plugin-vue": "^4.2.3",
														
 
															+    "@vitejs/plugin-vue-jsx": "^3.0.1",
														
 
															     "@vue/compiler-sfc": "^3.2.31",
														
 
															     "@vueuse/core": "^7.7.1",
														
 
															     "commitlint": "^17.0.2",
														
@@ -66,6 +81,7 @@
 
															     "eslint-plugin-import": "^2.26.0",
														
 
															     "eslint-plugin-prettier": "^4.0.0",
														
 
															     "eslint-plugin-vue": "^8.5.0",
														
 
															+    "esobjs-xe2-plugin-assets": "^0.1.14",
														
 
															     "husky": "^8.0.1",
														
 
															     "lodash": "~4.17.21",
														
 
															     "mockjs": "^1.1.0",
														
@@ -74,11 +90,13 @@
 
															     "sass": "^1.49.11",
														
 
															     "sass-loader": "^12.6.0",
														
 
															     "typescript": "4.6.3",
														
 
															-    "vite": "2.9.9",
														
 
															+    "vite": "4.3.6",
														
 
															     "vite-plugin-compression": "^0.5.1",
														
 
															+    "vite-plugin-externals": "^0.6.2",
														
 
															     "vite-plugin-importer": "^0.2.5",
														
 
															     "vite-plugin-mock": "^2.9.6",
														
 
															     "vite-plugin-monaco-editor": "^1.1.0",
														
 
															+    "vite-plugin-static-copy": "^1.0.6",
														
 
															     "vue-echarts": "^6.0.2",
														
 
															     "vue-tsc": "^0.28.10"
														
 
															   }
														
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/preview.yml
+++ b/preview.yml
@@ -0,0 +1,10 @@
 
															+# preview.yml
														
 
															+autoOpen: true # 打开工作空间时是否自动开启所有应用的预览
														
 
															+apps:
														
 
															+  - port: 3000 # 应用的端口
														
 
															+    run: npm i --registry=https://registry.npmmirror.com && npm run dev # 应用的启动命令
														
 
															+    command: # 使用此命令启动服务，且不执行run
														
 
															+    root: ./ # 应用的启动目录
														
 
															+    name: GoView # 应用名称
														
 
															+    description: 开源、精美、便捷的「数据可视化」低代码开发平台 # 应用描述
														
 
															+    autoOpen: true # 打开工作空间时是否自动开启预览（优先级高于根级 autoOpen)
														
--- a/src/App.vue
+++ b/src/App.vue
@@ -19,6 +19,34 @@ import { GoAppProvider } from '@/components/GoAppProvider'
 
															 import { I18n } from '@/components/I18n'
														
 
															 import { useSystemInit, useDarkThemeHook, useThemeOverridesHook, useCode, useLang } from '@/hooks'
														
 
															+//字节图表全局配置部分
														
 
															+import vScreenVolcanoBlue from '@visactor/vchart-theme/public/vScreenVolcanoBlue.json';
														
 
															+import VChart from '@visactor/vchart';
														
 
															+import {IGlobalMarkThemeByName, IGlobalMarkThemeByType, ITheme} from "@visactor/vchart/esm/theme/interface";
														
 
															+import {languages} from "monaco-editor";
														
 
															+import type {IColorKey} from "@visactor/vchart/esm/theme/color-scheme/interface";
														
 
															+import type {ITokenKey} from "@visactor/vchart/esm/theme/token";
														
 
															+import type {ISeriesTheme} from "@visactor/vchart/esm/series/interface";
														
 
															+import type {IComponentTheme} from "@visactor/vchart/esm/component/interface";
														
 
															+const myVScreenVolcanoBlue: Partial<ITheme> = {
														
 
															+   ...vScreenVolcanoBlue,
														
 
															+  type:"dark",
														
 
															+  background:vScreenVolcanoBlue.background as IColorKey,
														
 
															+  fontFamily:vScreenVolcanoBlue.fontFamily as ITokenKey,
														
 
															+  mark:vScreenVolcanoBlue.mark as IGlobalMarkThemeByType,
														
 
															+  markByName:vScreenVolcanoBlue.markByName as IGlobalMarkThemeByName,
														
 
															+  series:vScreenVolcanoBlue.series as ISeriesTheme,
														
 
															+  component: vScreenVolcanoBlue.component as unknown  as IComponentTheme
														
 
															+  // 其他字段逐个检查和断言
														
 
															+};
														
 
															+
														
 
															+VChart.ThemeManager.registerTheme('vScreenVolcanoBlue',myVScreenVolcanoBlue);
														
 
															+// apply the theme
														
 
															+VChart.ThemeManager.setCurrentTheme('vScreenVolcanoBlue');
														
 
															+//字节图标配置部分END
														
 
															+
														
 
															+
														
 
															+
														
 
															 // 暗黑主题
														
 
															 const darkTheme = useDarkThemeHook()
														
--- a/src/api/axios.ts
+++ b/src/api/axios.ts
@@ -1,12 +1,32 @@
 
															 import axios, { AxiosResponse, AxiosRequestConfig, Axios } from 'axios'
														
 
															 import { ResultEnum, ModuleTypeEnum } from "@/enums/httpEnum"
														
 
															-import { PageEnum, ErrorPageNameMap } from "@/enums/pageEnum"
														
 
															+import {PageEnum, ErrorPageNameMap, PreviewEnum} from "@/enums/pageEnum"
														
 
															 import { StorageEnum } from '@/enums/storageEnum'
														
 
															 import { axiosPre } from '@/settings/httpSetting'
														
 
															 import { SystemStoreEnum, SystemStoreUserInfoEnum } from '@/store/modules/systemStore/systemStore.d'
														
 
															-import { redirectErrorPage, getLocalStorage, routerTurnByName, isPreview } from '@/utils'
														
 
															+import {
														
 
															+    redirectErrorPage,
														
 
															+    getLocalStorage,
														
 
															+    routerTurnByName,
														
 
															+    isPreview,
														
 
															+    clearAllSessio,
														
 
															+    clearAllStorage,
														
 
															+    setLocalStorage,
														
 
															+    setSessionStorage, fetchRouteParamsLocation, fetchRouteName, logout, fetchRoutePath
														
 
															+} from '@/utils'
														
 
															 import { fetchAllowList } from './axios.config'
														
 
															 import includes from 'lodash/includes'
														
 
															+import {useSystemStore} from "@/store/modules/systemStore/systemStore";
														
 
															+import { useDialog } from 'naive-ui'
														
 
															+// Axios 无感知刷新令牌，参考 https://www.dashingdog.cn/article/11 与 https://segmentfault.com/a/1190000020210980 实现
														
 
															+// 请求队列
														
 
															+let requestList: any[] = []
														
 
															+// 是否正在刷新中
														
 
															+let isRefreshToken = false
														
 
															+// 请求路径
														
 
															+let base_url=`${import.meta.env.PROD ? import.meta.env.VITE_PRO_PATH : ''}${axiosPre}`
														
 
															+
														
 
															+const dialog = useDialog()
														
 
															 export interface MyResponseType<T> {
														
 
															   code: ResultEnum
														
@@ -19,7 +39,7 @@ export interface MyRequestInstance extends Axios {
 
															 }
														
 
															 const axiosInstance = axios.create({
														
 
															-  baseURL: `${import.meta.env.PROD ? import.meta.env.VITE_PRO_PATH : ''}${axiosPre}`,
														
 
															+  baseURL: base_url,
														
 
															   timeout: ResultEnum.TIMEOUT,
														
 
															 }) as unknown as MyRequestInstance
														
@@ -27,6 +47,7 @@ axiosInstance.interceptors.request.use(
 
															   (config: AxiosRequestConfig) => {
														
 
															     // 获取 tenantId
														
 
															     const info = getLocalStorage(StorageEnum.GO_SYSTEM_STORE)
														
 
															+      // console.log(window.location)
														
 
															     const tenantId = info ? info[SystemStoreEnum.TENANT_INFO]['tenantId'] : undefined
														
 
															     if (tenantId) {
														
 
															       config.headers = {
														
@@ -57,15 +78,18 @@ axiosInstance.interceptors.request.use(
 
															 // 响应拦截器
														
 
															 axiosInstance.interceptors.response.use(
														
 
															-  (res: AxiosResponse) => {
														
 
															+    async (res: AxiosResponse<any>) => {
														
 
															+    const config = res.config
														
 
															+
														
 
															+    const { code,msg } = res.data as { code: number,msg:string }
														
 
															+
														
 
															+     if (code === undefined || code === null) return Promise.resolve(res)
														
 
															     // 预览页面错误不进行处理
														
 
															-    if (isPreview()) {
														
 
															+    if (isPreview()&&code!==ResultEnum.TOKEN_OVERDUE) {
														
 
															       return Promise.resolve(res.data)
														
 
															     }
														
 
															     // 如果是验证码的返回，直接返回数据
														
 
															-    const { code } = res.data as { code: number }
														
 
															-    if (code === undefined || code === null) return Promise.resolve(res)
														
 
															     // 成功
														
 
															     if (code === ResultEnum.SUCCESS) {
														
@@ -74,9 +98,68 @@ axiosInstance.interceptors.response.use(
 
															     // 登录过期
														
 
															     if (code === ResultEnum.TOKEN_OVERDUE) {
														
 
															-      window['$message'].error(window['$t']('http.token_overdue_message'))
														
 
															-      routerTurnByName(PageEnum.BASE_LOGIN_NAME)
														
 
															-      return Promise.resolve(res.data)
														
 
															+        // 如果未认证，并且未进行刷新令牌，说明可能是访问令牌过期了
														
 
															+        console.log('Auth2:-------------------准备刷新令牌-----------------')
														
 
															+        if (!isRefreshToken) {
														
 
															+            isRefreshToken = true
														
 
															+            const info = getLocalStorage(StorageEnum.GO_SYSTEM_STORE)
														
 
															+            // console.log(window.location)
														
 
															+            const refreshToken = info ? info[SystemStoreEnum.USER_INFO][SystemStoreUserInfoEnum.USER_REFRESH_TOKEN] : undefined
														
 
															+            // 1. 如果获取不到刷新令牌，则只能执行登出操作
														
 
															+
														
 
															+            if (!refreshToken) {
														
 
															+                console.log('无刷新令牌,即将返回。')
														
 
															+                return handleAuthorized()
														
 
															+            }
														
 
															+            // 2. 进行刷新访问令牌
														
 
															+            try {
														
 
															+                const systemStore = useSystemStore()
														
 
															+                const refreshTokenRes = await getTefreshToken()
														
 
															+                // 2.1 刷新成功，则回放队列的请求 + 当前请求
														
 
															+                systemStore.setItem(SystemStoreEnum.USER_INFO, {
														
 
															+                    [SystemStoreUserInfoEnum.USER_TOKEN]: (await refreshTokenRes).data.data.accessToken,
														
 
															+                    [SystemStoreUserInfoEnum.USER_REFRESH_TOKEN]: (await refreshTokenRes).data.data.refreshToken,
														
 
															+                    [SystemStoreUserInfoEnum.TOKEN_NAME]: 'Authorization'
														
 
															+                })
														
 
															+                //修改当前访问令牌
														
 
															+                // config.headers!.Authorization = 'Bearer ' + (await refreshTokenRes).data.data.accessToken
														
 
															+                const userInfo = info[SystemStoreEnum.USER_INFO]
														
 
															+                config.headers = {
														
 
															+                    ...config.headers,
														
 
															+                    [userInfo[SystemStoreUserInfoEnum.TOKEN_NAME] || 'token']: 'Bearer ' + userInfo[SystemStoreUserInfoEnum.USER_TOKEN] || ''
														
 
															+                }
														
 
															+
														
 
															+                requestList.forEach((cb: any) => {
														
 
															+                    cb()
														
 
															+                })
														
 
															+                requestList = []
														
 
															+                console.log('Auth2:-------------------令牌刷新成功-----------------')
														
 
															+                return axiosInstance(config)
														
 
															+            } catch (e) {
														
 
															+                // 为什么需要 catch 异常呢？刷新失败时，请求因为 Promise.reject 触发异常。
														
 
															+                // 2.2 刷新失败，只回放队列的请求
														
 
															+                requestList.forEach((cb: any) => {
														
 
															+                    cb()
														
 
															+                })
														
 
															+                // 提示是否要登出。即不回放当前请求！不然会形成递归
														
 
															+                return handleAuthorized()
														
 
															+            } finally {
														
 
															+                requestList = []
														
 
															+                isRefreshToken = false
														
 
															+            }
														
 
															+        } else {
														
 
															+            console.log('Auth2:-------------------已添加刷新队列-----------------')
														
 
															+            const info = getLocalStorage(StorageEnum.GO_SYSTEM_STORE)
														
 
															+            // 添加到队列，等待刷新获取到新的令牌
														
 
															+            return new Promise((resolve) => {
														
 
															+                requestList.push(() => {
														
 
															+                    const userInfo = info[SystemStoreEnum.USER_INFO]
														
 
															+                    config.headers!.Authorization = 'Bearer ' + userInfo[SystemStoreUserInfoEnum.USER_TOKEN] // 让每个请求携带自定义token 请根据实际情况自行修改
														
 
															+                    resolve(axiosInstance(config))
														
 
															+                })
														
 
															+            })
														
 
															+        }
														
 
															+
														
 
															     }
														
 
															     // 固定错误码重定向
														
@@ -85,6 +168,17 @@ axiosInstance.interceptors.response.use(
 
															       return Promise.resolve(res.data)
														
 
															     }
														
 
															+        if (code !== 200) {
														
 
															+            if (msg === '无效的刷新令牌') {
														
 
															+                // hard coding：忽略这个提示，直接登出
														
 
															+                console.log(msg)
														
 
															+                return handleAuthorized()
														
 
															+            } else {
														
 
															+                window['$message'].error(msg)
														
 
															+            }
														
 
															+            return Promise.reject('error')
														
 
															+        }
														
 
															+
														
 
															     // 提示错误
														
 
															     window['$message'].error(window['$t']((res.data as any).msg))
														
 
															     return Promise.resolve(res.data)
														
@@ -94,4 +188,32 @@ axiosInstance.interceptors.response.use(
 
															   }
														
 
															 )
														
 
															+
														
 
															+const getTefreshToken = async () => {
														
 
															+    let tenantData =  getLocalStorage(StorageEnum.GO_SYSTEM_STORE)
														
 
															+    axios.defaults.headers.common['tenant-id'] = tenantData[SystemStoreEnum.TENANT_INFO]['tenantId'] ?? undefined;
														
 
															+    return await axios.post(base_url + '/system/auth/refresh-token?refreshToken=' + tenantData[SystemStoreEnum.USER_INFO][SystemStoreUserInfoEnum.USER_REFRESH_TOKEN] ?? undefined)
														
 
															+}
														
 
															+
														
 
															+
														
 
															+const handleAuthorized  = () =>{
														
 
															+    // window['$message'].error(window['$t']('http.token_overdue_message'))
														
 
															+    console.log(useDialog())
														
 
															+    window['$dialog'].warning( {title: '登录已超时',
														
 
															+        content: '登录超时，请重新登录。',
														
 
															+        positiveText: '确定',
														
 
															+        negativeText: '取消',
														
 
															+        onPositiveClick: () => {
														
 
															+            // session 不需要清除 clearAllSessio() //清除所有Session缓存
														
 
															+            clearAllStorage() //清除所有Storage缓存
														
 
															+            //临时缓存跳回目录进行登录重新跳回
														
 
															+            if('/chart/preview' === fetchRoutePath()){
														
 
															+                setSessionStorage('setRedirectPath','/chart/preview')
														
 
															+                setSessionStorage('setRedirectPathId', fetchRouteParamsLocation())
														
 
															+            }
														
 
															+            logout()
														
 
															+            return Promise.resolve(window['$t']('http.token_overdue_message'))
														
 
															+        }
														
 
															+    })
														
 
															+}
														
 
															 export default axiosInstance
														
--- a/src/api/mock/graph.json
+++ b/src/api/mock/graph.json
@@ -0,0 +1,100 @@
 
															+{
														
 
															+    "nodes": [
														
 
															+      {
														
 
															+        "id": "0",
														
 
															+        "name": "Myriel",
														
 
															+        "symbolSize": "@integer(0, 50)",
														
 
															+        "x": -266.82776,
														
 
															+        "y": 299.6904,
														
 
															+        "value": "@integer(0, 50)",
														
 
															+        "category": 3
														
 
															+      },
														
 
															+      {
														
 
															+        "id": "1",
														
 
															+        "name": "Napoleon",
														
 
															+        "symbolSize": "@integer(0, 50)",
														
 
															+        "x": -418.08344,
														
 
															+        "y": 446.8853,
														
 
															+        "value": "@integer(0, 50)",
														
 
															+        "category": 5
														
 
															+      },
														
 
															+      {
														
 
															+        "id": "2",
														
 
															+        "name": "MlleBaptistine",
														
 
															+        "symbolSize": "@integer(0, 50)",
														
 
															+        "x": -212.76357,
														
 
															+        "y": 245.29176,
														
 
															+        "value": "@integer(0, 50)",
														
 
															+        "category": 1
														
 
															+      },
														
 
															+      {
														
 
															+        "id": "3",
														
 
															+        "name": "MmeMagloire",
														
 
															+        "symbolSize": "@integer(0, 50)",
														
 
															+        "x": -242.82404,
														
 
															+        "y": 235.26283,
														
 
															+        "value": "@integer(0, 50)",
														
 
															+        "category": 1
														
 
															+      },
														
 
															+      {
														
 
															+        "id": "4",
														
 
															+        "name": "CountessDeLo",
														
 
															+        "symbolSize": "@integer(0, 50)",
														
 
															+        "x": -379.30386,
														
 
															+        "y": 429.06424,
														
 
															+        "value": "@integer(0, 50)",
														
 
															+        "category": 0
														
 
															+      }
														
 
															+    ],
														
 
															+    "links": [
														
 
															+      {
														
 
															+        "source": "1",
														
 
															+        "target": "@integer(2, 4)"
														
 
															+      },
														
 
															+      {
														
 
															+        "source": "2",
														
 
															+        "target": "@integer(3, 4)"
														
 
															+      },
														
 
															+      {
														
 
															+        "source": "3",
														
 
															+        "target": "@integer(0, 2)"
														
 
															+      },
														
 
															+      {
														
 
															+        "source": "3",
														
 
															+        "target": "@integer(0, 1)"
														
 
															+      },
														
 
															+      {
														
 
															+        "source": "4",
														
 
															+        "target": "@integer(0, 3)"
														
 
															+      }
														
 
															+    ],
														
 
															+    "categories": [
														
 
															+      {
														
 
															+        "name": "A"
														
 
															+      },
														
 
															+      {
														
 
															+        "name": "B"
														
 
															+      },
														
 
															+      {
														
 
															+        "name": "C"
														
 
															+      },
														
 
															+      {
														
 
															+        "name": "D"
														
 
															+      },
														
 
															+      {
														
 
															+        "name": "E"
														
 
															+      },
														
 
															+      {
														
 
															+        "name": "F"
														
 
															+      },
														
 
															+      {
														
 
															+        "name": "G"
														
 
															+      },
														
 
															+      {
														
 
															+        "name": "H"
														
 
															+      },
														
 
															+      {
														
 
															+        "name": "I"
														
 
															+      }
														
 
															+    ]
														
 
															+  }
														
--- a/src/api/mock/index.ts
+++ b/src/api/mock/index.ts
@@ -19,6 +19,8 @@ export const capsuleUrl = '/mock/capsule'
 
															 export const wordCloudUrl = '/mock/wordCloud'
														
 
															 export const treemapUrl = '/mock/treemap'
														
 
															 export const threeEarth01Url = '/mock/threeEarth01Data'
														
 
															+export const sankeyUrl = '/mock/sankey'
														
 
															+export const graphUrl = '/mock/graphData'
														
 
															 const mockObject: MockMethod[] = [
														
 
															   {
														
@@ -103,6 +105,16 @@ const mockObject: MockMethod[] = [
 
															     method: RequestHttpEnum.GET,
														
 
															     response: () => test.threeEarth01Data
														
 
															   },
														
 
															+  {
														
 
															+    url: sankeyUrl,
														
 
															+    method: RequestHttpEnum.GET,
														
 
															+    response: () => test.fetchSankey
														
 
															+  },
														
 
															+  {
														
 
															+    url: graphUrl,
														
 
															+    method: RequestHttpEnum.GET,
														
 
															+    response: () => test.graphData
														
 
															+  },
														
 
															 ]
														
 
															 export default mockObject
														
--- a/src/api/mock/sankey.json
+++ b/src/api/mock/sankey.json
@@ -0,0 +1,86 @@
 
															+{
														
 
															+  "label": [
														
 
															+    {
														
 
															+      "name": "a"
														
 
															+    },
														
 
															+    {
														
 
															+      "name": "b"
														
 
															+    },
														
 
															+    {
														
 
															+      "name": "a1"
														
 
															+    },
														
 
															+    {
														
 
															+      "name": "a2"
														
 
															+    },
														
 
															+    {
														
 
															+      "name": "b1"
														
 
															+    },
														
 
															+    {
														
 
															+      "name": "b2"
														
 
															+    }
														
 
															+  ],
														
 
															+  "links": [
														
 
															+    {
														
 
															+      "source": "a",
														
 
															+      "target": "a1",
														
 
															+      "value": "@integer(0, 10)"
														
 
															+    },
														
 
															+    {
														
 
															+      "source": "a",
														
 
															+      "target": "a2",
														
 
															+      "value": "@integer(0, 10)"
														
 
															+    },
														
 
															+    {
														
 
															+      "source": "b",
														
 
															+      "target": "b1",
														
 
															+      "value": "@integer(0, 10)"
														
 
															+    },
														
 
															+    {
														
 
															+      "source": "a",
														
 
															+      "target": "b1",
														
 
															+      "value": "@integer(0, 10)"
														
 
															+    },
														
 
															+    {
														
 
															+      "source": "b1",
														
 
															+      "target": "a1",
														
 
															+      "value": "@integer(0, 10)"
														
 
															+    },
														
 
															+    {
														
 
															+      "source": "b1",
														
 
															+      "target": "b2",
														
 
															+      "value": "@integer(0, 10)"
														
 
															+    }
														
 
															+  ],
														
 
															+  "levels": [
														
 
															+    {
														
 
															+      "depth": 0,
														
 
															+      "itemStyle": {
														
 
															+        "color": "#decbe4"
														
 
															+      },
														
 
															+      "lineStyle": {
														
 
															+        "color": "source",
														
 
															+        "opacity": 0.9
														
 
															+      }
														
 
															+    },
														
 
															+    {
														
 
															+      "depth": 1,
														
 
															+      "itemStyle": {
														
 
															+        "color": "#b3cde3"
														
 
															+      },
														
 
															+      "lineStyle": {
														
 
															+        "color": "source",
														
 
															+        "opacity": 0.6
														
 
															+      }
														
 
															+    },
														
 
															+    {
														
 
															+      "depth": 2,
														
 
															+      "itemStyle": {
														
 
															+        "color": "#ccebc5"
														
 
															+      },
														
 
															+      "lineStyle": {
														
 
															+        "color": "source",
														
 
															+        "opacity": 0.6
														
 
															+      }
														
 
															+    }
														
 
															+  ]
														
 
															+}
														
--- a/src/api/mock/test.mock.ts
+++ b/src/api/mock/test.mock.ts
@@ -2,6 +2,8 @@ import heatmapJson from './heatMapData.json'
 
															 import scatterJson from './scatter.json'
														
 
															 import mapJson from './map.json'
														
 
															 import tTreemapJson from './treemap.json'
														
 
															+import sankeyJson from './sankey.json'
														
 
															+import graphDataJson from './graph.json'
														
 
															 export default {
														
 
															   // 单图表
														
@@ -219,5 +221,19 @@ export default {
 
															         'endArray|10': [{ name: '@name', N: '@integer(10, 100)', E: '@integer(10, 100)' }]
														
 
															       }
														
 
															     ]
														
 
															-  }
														
 
															+  },
														
 
															+  // 桑基图
														
 
															+  fetchSankey: {
														
 
															+    code: 0,
														
 
															+    status: 200,
														
 
															+    msg: '请求成功',
														
 
															+    data: sankeyJson
														
 
															+  },
														
 
															+  // 关系图
														
 
															+  graphData: {
														
 
															+    code: 0,
														
 
															+    status: 200,
														
 
															+    msg: '请求成功',
														
 
															+    data: graphDataJson
														
 
															+  },
														
 
															 }
														
--- a/src/assets/images/chart/charts/bar_line.png
+++ b/src/assets/images/chart/charts/bar_line.png
--- a/src/assets/images/chart/charts/dial.png
+++ b/src/assets/images/chart/charts/dial.png
--- a/src/assets/images/chart/charts/graph.png
+++ b/src/assets/images/chart/charts/graph.png
--- a/src/assets/images/chart/charts/ground_glass.png
+++ b/src/assets/images/chart/charts/ground_glass.png
--- a/src/assets/images/chart/charts/grouped_stacked_rose_chart.png
+++ b/src/assets/images/chart/charts/grouped_stacked_rose_chart.png
--- a/src/assets/images/chart/charts/map_cesium.png
+++ b/src/assets/images/chart/charts/map_cesium.png
--- a/src/assets/images/chart/charts/polar_coordinate_axis.png
+++ b/src/assets/images/chart/charts/polar_coordinate_axis.png
--- a/src/assets/images/chart/charts/sankey.png
+++ b/src/assets/images/chart/charts/sankey.png
--- a/src/assets/images/chart/charts/visactor_bar_line.png
+++ b/src/assets/images/chart/charts/visactor_bar_line.png
--- a/src/assets/images/chart/charts/visactor_biax_line.png
+++ b/src/assets/images/chart/charts/visactor_biax_line.png
--- a/src/assets/images/chart/charts/visactor_instrument.png
+++ b/src/assets/images/chart/charts/visactor_instrument.png
--- a/src/assets/images/chart/charts/visactor_line.png
+++ b/src/assets/images/chart/charts/visactor_line.png
--- a/src/assets/images/chart/charts/weather.png
+++ b/src/assets/images/chart/charts/weather.png
--- a/src/assets/images/chart/decorates/Pipeline_H.png
+++ b/src/assets/images/chart/decorates/Pipeline_H.png
--- a/src/assets/images/chart/decorates/Pipeline_V.png
+++ b/src/assets/images/chart/decorates/Pipeline_V.png
--- a/src/assets/images/chart/decorates/bottom_decorate_1.png
+++ b/src/assets/images/chart/decorates/bottom_decorate_1.png
--- a/src/assets/images/chart/decorates/decorates08.png
+++ b/src/assets/images/chart/decorates/decorates08.png
--- a/src/assets/images/chart/decorates/flow-circle.png
+++ b/src/assets/images/chart/decorates/flow-circle.png
--- a/src/assets/images/chart/decorates/flow-zhexian.png
+++ b/src/assets/images/chart/decorates/flow-zhexian.png
--- a/src/assets/images/chart/decorates/fullScreen.png
+++ b/src/assets/images/chart/decorates/fullScreen.png
--- a/src/assets/images/chart/decorates/right_decorate_1.png
+++ b/src/assets/images/chart/decorates/right_decorate_1.png
--- a/src/assets/images/chart/decorates/round_dot.png
+++ b/src/assets/images/chart/decorates/round_dot.png
--- a/src/assets/images/chart/decorates/status_lamp.png
+++ b/src/assets/images/chart/decorates/status_lamp.png
--- a/src/assets/images/chart/icons/icon.png
+++ b/src/assets/images/chart/icons/icon.png
--- a/src/assets/images/chart/informations/inputs_date.png
+++ b/src/assets/images/chart/informations/inputs_date.png
--- a/src/assets/images/chart/informations/inputs_input.png
+++ b/src/assets/images/chart/informations/inputs_input.png
--- a/src/assets/images/chart/informations/inputs_pagination.png
+++ b/src/assets/images/chart/informations/inputs_pagination.png
--- a/src/assets/images/chart/informations/inputs_select.png
+++ b/src/assets/images/chart/informations/inputs_select.png
--- a/src/assets/images/chart/informations/inputs_tab.png
+++ b/src/assets/images/chart/informations/inputs_tab.png
--- a/src/assets/images/chart/informations/photo_carousel.png
+++ b/src/assets/images/chart/informations/photo_carousel.png
--- a/src/assets/images/chart/informations/text_card.png
+++ b/src/assets/images/chart/informations/text_card.png
--- a/src/assets/images/chart/photos/upload.png
+++ b/src/assets/images/chart/photos/upload.png
--- a/src/assets/images/chart/tables/tables_basic.png
+++ b/src/assets/images/chart/tables/tables_basic.png
--- a/src/assets/images/chart_background.png
+++ b/src/assets/images/chart_background.png
--- a/src/assets/images/decoration/background_image_1.jpg
+++ b/src/assets/images/decoration/background_image_1.jpg
--- a/src/assets/images/decoration/background_image_2.jpg
+++ b/src/assets/images/decoration/background_image_2.jpg
--- a/src/assets/images/decoration/background_image_3.jpg
+++ b/src/assets/images/decoration/background_image_3.jpg
--- a/src/assets/images/decoration/background_image_4.png
+++ b/src/assets/images/decoration/background_image_4.png
--- a/src/assets/images/decoration/background_image_5.png
+++ b/src/assets/images/decoration/background_image_5.png
--- a/src/assets/images/decoration/big_title_base_image_0.png
+++ b/src/assets/images/decoration/big_title_base_image_0.png
--- a/src/assets/images/decoration/big_title_base_image_2.png
+++ b/src/assets/images/decoration/big_title_base_image_2.png
--- a/src/assets/images/decoration/big_title_base_image_3.png
+++ b/src/assets/images/decoration/big_title_base_image_3.png
--- a/src/assets/images/decoration/big_title_base_image_4.png
+++ b/src/assets/images/decoration/big_title_base_image_4.png
--- a/src/assets/images/decoration/big_title_base_image_5.png
+++ b/src/assets/images/decoration/big_title_base_image_5.png
--- a/src/assets/images/decoration/big_title_base_image_6.png
+++ b/src/assets/images/decoration/big_title_base_image_6.png
--- a/src/assets/images/decoration/big_title_base_image_7.png
+++ b/src/assets/images/decoration/big_title_base_image_7.png
--- a/src/assets/images/decoration/bottom_decorate_1.png
+++ b/src/assets/images/decoration/bottom_decorate_1.png
--- a/src/assets/images/decoration/right_decorate_1.png
+++ b/src/assets/images/decoration/right_decorate_1.png
--- a/src/assets/images/decoration/title_base_image_0.png
+++ b/src/assets/images/decoration/title_base_image_0.png
--- a/src/assets/images/decoration/title_base_image_11.png
+++ b/src/assets/images/decoration/title_base_image_11.png
--- a/src/assets/images/decoration/title_base_image_12.png
+++ b/src/assets/images/decoration/title_base_image_12.png
--- a/src/assets/images/decoration/title_base_image_13.png
+++ b/src/assets/images/decoration/title_base_image_13.png
--- a/src/assets/images/decoration/title_base_image_14.png
+++ b/src/assets/images/decoration/title_base_image_14.png
--- a/src/assets/images/decoration/title_base_image_15.png
+++ b/src/assets/images/decoration/title_base_image_15.png
--- a/src/assets/images/decoration/title_base_image_16.png
+++ b/src/assets/images/decoration/title_base_image_16.png
--- a/src/assets/images/decoration/title_base_image_3.png
+++ b/src/assets/images/decoration/title_base_image_3.png
--- a/src/assets/images/decoration/title_base_image_4.png
+++ b/src/assets/images/decoration/title_base_image_4.png
--- a/src/assets/images/decoration/title_base_image_5.png
+++ b/src/assets/images/decoration/title_base_image_5.png
--- a/src/assets/images/decoration/title_base_image_6.png
+++ b/src/assets/images/decoration/title_base_image_6.png
--- a/src/assets/images/decoration/title_base_image_7.png
+++ b/src/assets/images/decoration/title_base_image_7.png
--- a/src/assets/images/decoration/title_base_image_8.png
+++ b/src/assets/images/decoration/title_base_image_8.png
--- a/src/assets/images/decoration/title_base_image_9.png
+++ b/src/assets/images/decoration/title_base_image_9.png
--- a/src/assets/images/decoration/xm56fRJH.jpg
+++ b/src/assets/images/decoration/xm56fRJH.jpg
--- a/src/assets/images/decoration/上边框.png
+++ b/src/assets/images/decoration/上边框.png
--- a/src/assets/images/decoration/干净小标题底图.png
+++ b/src/assets/images/decoration/干净小标题底图.png
--- a/src/assets/images/decoration/底座.png
+++ b/src/assets/images/decoration/底座.png
--- a/src/assets/images/decoration/模块外框.png
+++ b/src/assets/images/decoration/模块外框.png
--- a/src/assets/images/decoration/模块边框2.png
+++ b/src/assets/images/decoration/模块边框2.png
--- a/src/assets/images/decoration/点位.png
+++ b/src/assets/images/decoration/点位.png
--- a/src/assets/images/decoration/装饰绿点点.png
+++ b/src/assets/images/decoration/装饰绿点点.png
--- a/src/assets/images/decoration/边框.png
+++ b/src/assets/images/decoration/边框.png
--- a/src/assets/images/decoration/边框流线.webm
+++ b/src/assets/images/decoration/边框流线.webm
--- a/src/assets/videos/charts-img-db_id_17bwi76fzta800.mp4
+++ b/src/assets/videos/charts-img-db_id_17bwi76fzta800.mp4
--- a/src/assets/videos/charts-img-db_id_cqlw0qmjt4o00.mp4
+++ b/src/assets/videos/charts-img-db_id_cqlw0qmjt4o00.mp4
--- a/src/assets/videos/dynamic_circle.mp4
+++ b/src/assets/videos/dynamic_circle.mp4
--- a/src/components/GoIconify/index.ts
+++ b/src/components/GoIconify/index.ts
@@ -0,0 +1,3 @@
 
															+import GoIconify from './index.vue';
														
 
															+
														
 
															+export { GoIconify };
														
--- a/src/components/GoIconify/index.vue
+++ b/src/components/GoIconify/index.vue
@@ -0,0 +1,34 @@
 
															+<template>
														
 
															+  <iconify-icon
														
 
															+    :icon="icon"
														
 
															+    :rotate="`${rotate}deg`"
														
 
															+    :width="width"
														
 
															+    :style="{
														
 
															+      color: color
														
 
															+    }"
														
 
															+  ></iconify-icon>
														
 
															+</template>
														
 
															+
														
 
															+<script setup lang="ts">
														
 
															+defineProps({
														
 
															+  icon: {
														
 
															+    type: String,
														
 
															+    required: true
														
 
															+  },
														
 
															+  color: {
														
 
															+    type: String,
														
 
															+    default: '#999999',
														
 
															+    required: false
														
 
															+  },
														
 
															+  width: {
														
 
															+    type: [String, Number],
														
 
															+    default: '20',
														
 
															+    required: false
														
 
															+  },
														
 
															+  rotate: {
														
 
															+    type: [String, Number],
														
 
															+    default: '0',
														
 
															+    required: false
														
 
															+  }
														
 
															+})
														
 
															+</script>
														
--- a/src/components/Pages/ChartGlobImage/index.vue
+++ b/src/components/Pages/ChartGlobImage/index.vue
@@ -1,5 +1,5 @@
 
															 <template>
														
 
															-  <img class="list-img" v-lazy="imageInfo" alt="图表图片" />
														
 
															+  <img class="list-img" v-lazy="imageInfo" :alt="imageInfo" />
														
 
															 </template>
														
 
															 <script setup lang="ts">
														
--- a/src/components/Pages/ChartItemSetting/EchartsRendererSetting.vue
+++ b/src/components/Pages/ChartItemSetting/EchartsRendererSetting.vue
@@ -0,0 +1,45 @@
 
															+<template>
														
 
															+  <n-radio-group :value="props.modelValue || INHERIT_VALUE" @update:value="handleChange">
														
 
															+    <n-space>
														
 
															+      <n-tooltip :show-arrow="false" trigger="hover" v-for="item in rendererList" :key="item.value">
														
 
															+        <template #trigger>
														
 
															+          <n-radio :value="item.value">
														
 
															+            {{ item.value }}
														
 
															+          </n-radio>
														
 
															+        </template>
														
 
															+        {{ item.desc }}
														
 
															+      </n-tooltip>
														
 
															+    </n-space>
														
 
															+  </n-radio-group>
														
 
															+</template>
														
 
															+<script setup lang="ts">
														
 
															+import { type EchartsRenderer } from '@/settings/chartThemes'
														
 
															+
														
 
															+const props = defineProps<{ modelValue?: EchartsRenderer; includeInherit?: boolean }>()
														
 
															+const emits = defineEmits(['update:modelValue'])
														
 
															+
														
 
															+const INHERIT_VALUE = 'inherit'
														
 
															+
														
 
															+const handleChange = (val: EchartsRenderer & typeof INHERIT_VALUE) => {
														
 
															+  emits('update:modelValue', val === INHERIT_VALUE ? undefined : val)
														
 
															+}
														
 
															+
														
 
															+const rendererList = [
														
 
															+  {
														
 
															+    value: 'svg',
														
 
															+    desc: '在缩放场景下具有更好的表现'
														
 
															+  },
														
 
															+  {
														
 
															+    value: 'canvas',
														
 
															+    desc: '数据量较大（经验判断 > 1k）、较多交互时，建议选择'
														
 
															+  },
														
 
															+  ...(props.includeInherit
														
 
															+    ? [
														
 
															+        {
														
 
															+          value: INHERIT_VALUE,
														
 
															+          desc: '默认继承全局配置'
														
 
															+        }
														
 
															+      ]
														
 
															+    : [])
														
 
															+]
														
 
															+</script>
														
--- a/src/components/Pages/ChartItemSetting/GlobalSetting.vue
+++ b/src/components/Pages/ChartItemSetting/GlobalSetting.vue
@@ -1,4 +1,34 @@
 
															 <template>
														
 
															+  <collapse-item name="渲染器">
														
 
															+    <setting-item-box :alone="true">
														
 
															+      <template #name>
														
 
															+        <n-text>全局</n-text>
														
 
															+        <n-tooltip trigger="hover">
														
 
															+          <template #trigger>
														
 
															+            <n-icon size="21" :depth="3">
														
 
															+              <help-outline-icon></help-outline-icon>
														
 
															+            </n-icon>
														
 
															+          </template>
														
 
															+          <n-text>所有echarts图表组件默认都将采用所选的渲染器进行渲染</n-text>
														
 
															+        </n-tooltip>
														
 
															+      </template>
														
 
															+      <EchartsRendererSetting v-model="themeSetting.renderer" />
														
 
															+    </setting-item-box>
														
 
															+    <setting-item-box :alone="true">
														
 
															+      <template #name>
														
 
															+        <n-text>当前</n-text>
														
 
															+        <n-tooltip trigger="hover">
														
 
															+          <template #trigger>
														
 
															+            <n-icon size="21" :depth="3">
														
 
															+              <help-outline-icon></help-outline-icon>
														
 
															+            </n-icon>
														
 
															+          </template>
														
 
															+          <n-text>仅当前组件采用指定渲染器渲染</n-text>
														
 
															+        </n-tooltip>
														
 
															+      </template>
														
 
															+      <EchartsRendererSetting v-model="optionData.renderer" includeInherit />
														
 
															+    </setting-item-box>
														
 
															+  </collapse-item>
														
 
															   <collapse-item v-if="title" name="标题">
														
 
															     <template #header>
														
 
															       <n-switch v-model:value="title.show" size="small"></n-switch>
														
@@ -227,9 +257,36 @@
 
															       <n-switch v-model:value="legend.show" size="small"></n-switch>
														
 
															     </template>
														
 
															     <setting-item-box name="图例文字">
														
 
															-      <setting-item>
														
 
															+      <setting-item name="颜色">
														
 
															         <n-color-picker size="small" v-model:value="legend.textStyle.color"></n-color-picker>
														
 
															       </setting-item>
														
 
															+      <setting-item name="大小">
														
 
															+        <n-input-number v-model:value="legend.textStyle.fontSize" :min="1" size="small"></n-input-number>
														
 
															+      </setting-item>
														
 
															+    </setting-item-box>
														
 
															+    <setting-item-box name="图例位置">
														
 
															+      <setting-item name="x轴">
														
 
															+        <n-select v-model:value="legend.x" size="small" :options="legendConfig.lengendX" />
														
 
															+      </setting-item>
														
 
															+      <setting-item name="y轴">
														
 
															+        <n-select v-model:value="legend.y" size="small" :options="legendConfig.lengendY" />
														
 
															+      </setting-item>
														
 
															+    </setting-item-box>
														
 
															+    <setting-item-box name="图例信息">
														
 
															+      <setting-item name="方向">
														
 
															+        <n-select v-model:value="legend.orient" size="small" :options="legendConfig.orient" />
														
 
															+      </setting-item>
														
 
															+      <setting-item name="形状">
														
 
															+        <n-select v-model:value="legend.icon" size="small" :options="legendConfig.shape" />
														
 
															+      </setting-item>
														
 
															+    </setting-item-box>
														
 
															+    <setting-item-box name="图例大小">
														
 
															+      <setting-item name="宽">
														
 
															+        <n-input-number v-model:value="legend.itemWidth" :min="1" size="small"></n-input-number>
														
 
															+      </setting-item>
														
 
															+      <setting-item name="高">
														
 
															+        <n-input-number v-model:value="legend.itemHeight" :min="1" size="small"></n-input-number>
														
 
															+      </setting-item>
														
 
															     </setting-item-box>
														
 
															   </collapse-item>
														
@@ -279,10 +336,15 @@
 
															 </template>
														
 
															 <script setup lang="ts">
														
 
															-import { PropType, computed } from 'vue'
														
 
															+import { PropType, computed, watch } from 'vue'
														
 
															 import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
														
 
															-import { axisConfig } from '@/packages/chartConfiguration/echarts/index'
														
 
															+import { axisConfig, legendConfig } from '@/packages/chartConfiguration/echarts/index'
														
 
															 import { CollapseItem, SettingItemBox, SettingItem, GlobalSettingPosition } from '@/components/Pages/ChartItemSetting'
														
 
															+import { icon } from '@/plugins'
														
 
															+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
														
 
															+import EchartsRendererSetting from './EchartsRendererSetting.vue'
														
 
															+
														
 
															+const { HelpOutlineIcon } = icon.ionicons5
														
 
															 const props = defineProps({
														
 
															   optionData: {
														
@@ -296,6 +358,12 @@ const props = defineProps({
 
															   }
														
 
															 })
														
 
															+const chartEditStore = useChartEditStore()
														
 
															+const themeSetting = computed(() => {
														
 
															+  const chartThemeSetting = chartEditStore.getEditCanvasConfig.chartThemeSetting
														
 
															+  return chartThemeSetting
														
 
															+})
														
 
															+
														
 
															 const title = computed(() => {
														
 
															   return props.optionData.title
														
 
															 })
														
@@ -319,4 +387,18 @@ const grid = computed(() => {
 
															 const visualMap = computed(() => {
														
 
															   return props.optionData.visualMap
														
 
															 })
														
 
															+
														
 
															+// 监听legend color颜色改变type = scroll的颜色
														
 
															+watch(() => legend.value && legend.value.textStyle.color, (newVal) => {
														
 
															+  if (legend.value && newVal) {
														
 
															+     if (!legend.value.pageTextStyle) {
														
 
															+      legend.value.pageTextStyle = { color: newVal }
														
 
															+    } else {
														
 
															+      legend.value.pageTextStyle.color = newVal
														
 
															+    }
														
 
															+  }
														
 
															+}, {
														
 
															+  immediate: true,
														
 
															+  deep: true,
														
 
															+})
														
 
															 </script>
														
--- a/src/components/Pages/ChartItemSetting/StylesSetting.vue
+++ b/src/components/Pages/ChartItemSetting/StylesSetting.vue
@@ -69,6 +69,22 @@
 
															       </setting-item>
														
 
															     </setting-item-box>
														
 
															+    <!--  预设滤镜  -->
														
 
															+    <div v-if="presetImageList.length" class="preset-filter">
														
 
															+      <n-image
														
 
															+        class="preset-img"
														
 
															+        width="46"
														
 
															+        preview-disabled
														
 
															+        object-fit="scale-down"
														
 
															+        v-for="(item, index) in presetImageList"
														
 
															+        :key="index"
														
 
															+        :class="{ 'active-preset': item.hueRotate === chartStyles.hueRotate }"
														
 
															+        :style="{ filter: `hue-rotate(${item.hueRotate}deg)` }"
														
 
															+        :src="item.src"
														
 
															+        @click="() => (chartStyles.hueRotate = item.hueRotate)"
														
 
															+      ></n-image>
														
 
															+    </div>
														
 
															+
														
 
															     <!-- 混合模式 -->
														
 
															     <setting-item-box v-if="!isCanvas" :alone="true">
														
 
															       <template #name>
														
@@ -149,10 +165,12 @@
 
															 </template>
														
 
															 <script setup lang="ts">
														
 
															-import { PropType } from 'vue'
														
 
															+import { ref, PropType } from 'vue'
														
 
															 import { PickCreateComponentType, BlendModeEnumList } from '@/packages/index.d'
														
 
															 import { SettingItemBox, SettingItem, CollapseItem } from '@/components/Pages/ChartItemSetting'
														
 
															 import { icon } from '@/plugins'
														
 
															+import logoImg from '@/assets/logo.png'
														
 
															+import { useDesignStore } from '@/store/modules/designStore/designStore'
														
 
															 const props = defineProps({
														
 
															   isGroup: {
														
@@ -175,10 +193,48 @@ const { HelpOutlineIcon } = icon.ionicons5
 
															 const sliderFormatTooltip = (v: string) => {
														
 
															   return `${(parseFloat(v) * 100).toFixed(0)}%`
														
 
															 }
														
 
															+
														
 
															 // 角度格式化
														
 
															 const degFormatTooltip = (v: string) => {
														
 
															   return `${v}deg`
														
 
															 }
														
 
															+
														
 
															+// 预设滤镜
														
 
															+interface presetImageData {
														
 
															+  index: number
														
 
															+  src: string
														
 
															+  hueRotate: number
														
 
															+}
														
 
															+
														
 
															+const presetImageList = ref([] as presetImageData[])
														
 
															+for (let i = 1; i <= 12; i++) {
														
 
															+  presetImageList.value.push({
														
 
															+    index: i,
														
 
															+    src: logoImg,
														
 
															+    hueRotate: i * 30
														
 
															+  })
														
 
															+}
														
 
															 </script>
														
 
															-<style lang="scss" scoped></style>
														
 
															+<style lang="scss" scoped>
														
 
															+// 预设滤镜
														
 
															+.preset-filter {
														
 
															+  margin: 20px 0 10px 0;
														
 
															+  display: flex;
														
 
															+  flex-wrap: wrap;
														
 
															+  justify-content: space-between;
														
 
															+  .preset-img {
														
 
															+    margin-bottom: 10px;
														
 
															+    padding: 2px;
														
 
															+    border-radius: 6px;
														
 
															+    transition: 0.2s all;
														
 
															+    cursor: pointer;
														
 
															+    &:hover {
														
 
															+      box-shadow: 0 0 0 2px #66a9c9;
														
 
															+    }
														
 
															+  }
														
 
															+  .active-preset {
														
 
															+    box-shadow: 0 0 0 2px #66a9c9;
														
 
															+  }
														
 
															+}
														
 
															+</style>
														
--- a/src/components/Pages/Flipper/index.vue
+++ b/src/components/Pages/Flipper/index.vue
@@ -1,13 +1,13 @@
 
															 <template>
														
 
															-  <div class="go-Flipper" :class="[flipType, { go: isFlipping }]">
														
 
															+  <div class="go-flipper" :class="[flipType, { go: isFlipping }]">
														
 
															     <div class="digital front" :data-front="frontTextFromData"></div>
														
 
															     <div class="digital back" :data-back="backTextFromData"></div>
														
 
															   </div>
														
 
															 </template>
														
 
															 <script lang="ts" setup>
														
 
															-import { ref, PropType, watch } from 'vue'
														
 
															-import { FlipType }  from './index'
														
 
															+import { ref, PropType, watch, nextTick } from 'vue'
														
 
															+import { FlipType } from './index'
														
 
															 const props = defineProps({
														
 
															   flipType: {
														
@@ -43,6 +43,10 @@ const props = defineProps({
 
															   backColor: {
														
 
															     type: String,
														
 
															     default: '#000000'
														
 
															+  },
														
 
															+  borderWidth: {
														
 
															+    type: Number,
														
 
															+    default: 2
														
 
															   }
														
 
															 })
														
@@ -50,19 +54,27 @@ const isFlipping = ref(false)
 
															 const frontTextFromData = ref(props.count || 0)
														
 
															 const backTextFromData = ref(props.count || 0)
														
 
															+let timeoutID: any = 0
														
 
															+
														
 
															 // 翻牌
														
 
															-const flip = (front: string | number, back: string | number) => {
														
 
															+const flip = async (front: string | number, back: string | number) => {
														
 
															   // 如果处于翻转中，则不执行
														
 
															-  if (isFlipping.value) return
														
 
															+  if (isFlipping.value) {
														
 
															+    isFlipping.value = false // 立即结束此次动画
														
 
															+    clearTimeout(timeoutID) // 清除上一个计时器任务
														
 
															+    await nextTick()
														
 
															+    await flip(front, back) // 开始最后一次翻牌任务
														
 
															+    return
														
 
															+  }
														
 
															+
														
 
															   // 设置翻盘前后数据
														
 
															   backTextFromData.value = back
														
 
															   frontTextFromData.value = front
														
 
															-
														
 
															   // 设置翻转状态为true
														
 
															   isFlipping.value = true
														
 
															   // 翻牌结束的行为
														
 
															-  setTimeout(() => {
														
 
															+  timeoutID = setTimeout(() => {
														
 
															     isFlipping.value = false // 设置翻转状态为false
														
 
															     frontTextFromData.value = back
														
 
															   }, props.duration)
														
@@ -86,6 +98,7 @@ $radius: v-bind('`${props.radius}px`');
 
															 $width: v-bind('`${props.width}px`');
														
 
															 $height: v-bind('`${props.height}px`');
														
 
															 $perspective: v-bind('`${props.height * 2}px`');
														
 
															+$borderWidth: v-bind('`${props.borderWidth * 2}px`');
														
 
															 $speed: v-bind('`${props.duration / 1000}s`');
														
 
															 $shadowColor: #000000;
														
 
															 $lineColor: #4a9ef8;
														
@@ -125,13 +138,12 @@ $lineColor: #4a9ef8;
 
															 }
														
 
															 // #endregion
														
 
															-.go-Flipper {
														
 
															+.go-flipper {
														
 
															   display: inline-block;
														
 
															   position: relative;
														
 
															   width: $width;
														
 
															   height: $height;
														
 
															   line-height: $height;
														
 
															-  border: solid 1px $backColor;
														
 
															   border-radius: $radius;
														
 
															   background: $frontColor;
														
 
															   font-size: $width;
														
@@ -139,6 +151,17 @@ $lineColor: #4a9ef8;
 
															   box-shadow: 0 0 6px rgba($color: $shadowColor, $alpha: 0.5); // 阴影部分
														
 
															   text-align: center;
														
 
															   // font-family: 'Helvetica Neue';
														
 
															+  &::after {
														
 
															+    content: '';
														
 
															+    position: absolute;
														
 
															+    z-index: 10;
														
 
															+    left: 0;
														
 
															+    top: 0;
														
 
															+    right: 0;
														
 
															+    bottom: 0;
														
 
															+    box-shadow: inset 0 0 $borderWidth 0 $frontColor; // 内测阴影部分
														
 
															+    border-radius: $radius;
														
 
															+  }
														
 
															   .digital:before,
														
 
															   .digital:after {
														
@@ -186,11 +209,13 @@ $lineColor: #4a9ef8;
 
															   &.down.go .front:before {
														
 
															     transform-origin: 50% 100%;
														
 
															     animation: frontFlipDown $speed ease-in-out both;
														
 
															-    box-shadow: 0 -2px 6px rgba($color: $lineColor, $alpha: 0.3);
														
 
															+    box-shadow: 0 -2px $borderWidth 0 $frontColor;
														
 
															     backface-visibility: hidden;
														
 
															   }
														
 
															   &.down.go .back:after {
														
 
															     animation: backFlipDown $speed ease-in-out both;
														
 
															+    box-shadow: 0 2px $borderWidth 0 $frontColor;
														
 
															+    backface-visibility: hidden;
														
 
															   }
														
 
															   /*向上翻*/
														
 
															   &.up .front:after {
														
@@ -208,11 +233,13 @@ $lineColor: #4a9ef8;
 
															   &.up.go .front:after {
														
 
															     transform-origin: 50% 0;
														
 
															     animation: frontFlipUp $speed ease-in-out both;
														
 
															-    box-shadow: 0 2px 6px rgba($color: $lineColor, $alpha: 0.3);
														
 
															+    box-shadow: 0 2px $borderWidth 0 $frontColor;
														
 
															     backface-visibility: hidden;
														
 
															   }
														
 
															   &.up.go .back:before {
														
 
															     animation: backFlipUp $speed ease-in-out both;
														
 
															+    box-shadow: 0 -2px $borderWidth 0 $frontColor;
														
 
															+    backface-visibility: hidden;
														
 
															   }
														
 
															 }
														
 
															 </style>
														
--- a/src/components/Pages/ThemeColorSelect/index.vue
+++ b/src/components/Pages/ThemeColorSelect/index.vue
@@ -36,7 +36,7 @@
 
															       </div>
														
 
															       <div class="model-footer">
														
 
															         中国色列表来自于：
														
 
															-        <n-a href="http://zhongguose.com">http://zhongguose.com</n-a>
														
 
															+        <n-a href="http://zhongguose.com" target="_blank">http://zhongguose.com</n-a>
														
 
															       </div>
														
 
															     </div>
														
 
															   </n-modal>
														
@@ -157,6 +157,7 @@ $height: 85vh;
 
															     }
														
 
															   }
														
 
															   .model-footer {
														
 
															+    z-index: 1;
														
 
															     text-align: end;
														
 
															   }
														
 
															 }
														
--- a/src/enums/editPageEnum.ts
+++ b/src/enums/editPageEnum.ts
@@ -12,7 +12,9 @@ export enum DragKeyEnum {
 
															 // 不同页面保存操作
														
 
															 export enum SavePageEnum {
														
 
															   CHART = 'SaveChart',
														
 
															-  JSON = 'SaveJSON'
														
 
															+  CHART_TO_PREVIEW = 'ChartToPreview',
														
 
															+  JSON = 'SaveJSON',
														
 
															+  CLOSE = 'close'
														
 
															 }
														
 
															 // 操作枚举
														
@@ -46,6 +48,7 @@ export enum MenuEnum {
 
															   UN_GROUP = 'unGroup',
														
 
															   // 后退
														
 
															   BACK = 'back',
														
 
															+  // 前进
														
 
															   FORWORD = 'forward',
														
 
															   // 保存
														
 
															   SAVE = 'save',
														
--- a/src/enums/eventEnum.ts
+++ b/src/enums/eventEnum.ts
@@ -7,15 +7,38 @@ export enum BaseEvent {
 
															   // 移入
														
 
															   ON_MOUSE_ENTER = 'mouseenter',
														
 
															   // 移出
														
 
															-  ON_MOUSE_LEAVE = 'mouseleave',
														
 
															+  ON_MOUSE_LEAVE = 'mouseleave'
														
 
															+}
														
 
															+
														
 
															+// 组件交互回调事件
														
 
															+export enum InteractEvents {
														
 
															+  INTERACT_ON = 'interactOn',
														
 
															+  INTERACT_COMPONENT_ID = 'interactComponentId',
														
 
															+  INTERACT_FN = 'interactFn'
														
 
															+}
														
 
															+
														
 
															+// 全局组件交互回调事件触发的类型（当然可以自定义名称）
														
 
															+export enum InteractEventOn {
														
 
															+  CLICK = 'click',
														
 
															+  CHANGE = 'change'
														
 
															+}
														
 
															+
														
 
															+// 确定交互组件触发类型 key名称
														
 
															+export const COMPONENT_INTERACT_EVENT_KET = 'componentInteractEventKey'
														
 
															+
														
 
															+// 交互式组件的触发配置
														
 
															+export type InteractActionsType = {
														
 
															+  interactType: InteractEventOn
														
 
															+  interactName: string
														
 
															+  componentEmitEvents: { [T: string]: { value: any; label: string }[] }
														
 
															 }
														
 
															 // vue3 生命周期事件
														
 
															-export enum EventLife { 
														
 
															+export enum EventLife {
														
 
															   // 渲染之后
														
 
															   VNODE_MOUNTED = 'vnodeMounted',
														
 
															   // 渲染之前
														
 
															-  VNODE_BEFORE_MOUNT = 'vnodeBeforeMount',
														
 
															+  VNODE_BEFORE_MOUNT = 'vnodeBeforeMount'
														
 
															 }
														
 
															 // 内置字符串函数对象列表
														
@@ -28,4 +51,9 @@ export const excludeParseEventKeyList = [
 
															   BaseEvent.ON_MOUSE_LEAVE,
														
 
															   //过滤器
														
 
															   'filter'
														
 
															-]
														
 
															+]
														
 
															+// 内置字符串函数键值列表
														
 
															+export const excludeParseEventValueList = [
														
 
															+  // 请求里的函数语句
														
 
															+  'javascript:'
														
 
															+]
														
--- a/src/enums/storageEnum.ts
+++ b/src/enums/storageEnum.ts
@@ -3,6 +3,12 @@ export enum StorageEnum {
 
															   GO_SETTING_STORE = 'GO_SETTING',
														
 
															   // 登录信息
														
 
															   GO_SYSTEM_STORE = 'GO_SYSTEM',
														
 
															+  // 全局设置
														
 
															+  GO_SYSTEM_SETTING_STORE = 'GO_SYSTEM_SETTING',
														
 
															+  // token 等信息
														
 
															+  GO_ACCESS_TOKEN_STORE = 'GO_ACCESS_TOKEN',
														
 
															+  // 登录信息
														
 
															+  GO_LOGIN_INFO_STORE = 'GO_LOGIN_INFO',
														
 
															   // 语言
														
 
															   GO_LANG_STORE = 'GO_LANG',
														
 
															   // 当前选择的主题
														
@@ -10,5 +16,7 @@ export enum StorageEnum {
 
															   // 工作台布局配置
														
 
															   GO_CHART_LAYOUT_STORE = 'GO_CHART_LAYOUT',
														
 
															   // 工作台需要保存的数据
														
 
															-  GO_CHART_STORAGE_LIST = 'GO_CHART_STORAGE_LIST'
														
 
															+  GO_CHART_STORAGE_LIST = 'GO_CHART_STORAGE_LIST',
														
 
															+  // 用户存储的图片媒体
														
 
															+  GO_USER_MEDIA_PHOTOS = 'GO_USER_MEDIA_PHOTOS'
														
 
															 }
														
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -5,4 +5,5 @@ export * from '@/hooks/useChartDataFetch.hook'
 
															 export * from '@/hooks/useSystemInit.hook'
														
 
															 export * from '@/hooks/useChartDataPondFetch.hook'
														
 
															 export * from '@/hooks/useLifeHandler.hook'
														
 
															-export * from '@/hooks/useLang.hook'
														
 
															+export * from '@/hooks/useLang.hook'
														
 
															+export * from '@/hooks/useChartInteract.hook'
														
--- a/src/hooks/useCanvasInitOptions.hook.ts
+++ b/src/hooks/useCanvasInitOptions.hook.ts
@@ -0,0 +1,26 @@
 
															+import { inject, type Ref } from 'vue'
														
 
															+import { EchartsRenderer } from '@/settings/chartThemes'
														
 
															+import { SCALE_KEY } from '@/views/preview/hooks/useScale.hook'
														
 
															+import { use } from 'echarts/core'
														
 
															+import { CanvasRenderer, SVGRenderer } from 'echarts/renderers'
														
 
															+
														
 
															+use([CanvasRenderer, SVGRenderer])
														
 
															+
														
 
															+type InitOptions = {
														
 
															+  renderer: EchartsRenderer
														
 
															+  devicePixelRatio?: number
														
 
															+}
														
 
															+
														
 
															+// 获取需要给当前echarts组件设置什么初始值
														
 
															+export function useCanvasInitOptions(option: any, themeSetting: any) {
														
 
															+  const renderer = option.renderer || themeSetting.renderer
														
 
															+  const initOptions: InitOptions = { renderer }
														
 
															+  const scaleRef = inject<Ref<{ width: number; height: number }>>(SCALE_KEY) || { value: { width: 1, height: 1 } }
														
 
															+
														
 
															+  if (renderer === 'canvas') {
														
 
															+    initOptions.devicePixelRatio = Math.ceil(
														
 
															+      Math.max(window.devicePixelRatio, scaleRef.value.width, scaleRef.value.height)
														
 
															+    )
														
 
															+  }
														
 
															+  return initOptions
														
 
															+}
														
--- a/src/hooks/useChartDataFetch.hook.ts
+++ b/src/hooks/useChartDataFetch.hook.ts
@@ -1,4 +1,4 @@
 
															-import { ref, toRefs, toRaw } from 'vue'
														
 
															+import { ref, toRefs, toRaw, watch } from 'vue'
														
 
															 import type VChart from 'vue-echarts'
														
 
															 import { customizeHttp } from '@/api/http'
														
 
															 import { useChartDataPondFetch } from '@/hooks/'
														
@@ -6,6 +6,8 @@ import { CreateComponentType, ChartFrameEnum } from '@/packages/index.d'
 
															 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
														
 
															 import { RequestDataTypeEnum } from '@/enums/httpEnum'
														
 
															 import { isPreview, newFunctionHandle, intervalUnitHandle } from '@/utils'
														
 
															+import { setOption } from '@/packages/public/chart'
														
 
															+import { isNil } from 'lodash'
														
 
															 // 获取类型
														
 
															 type ChartEditStoreType = typeof useChartEditStore
														
@@ -23,7 +25,7 @@ export const useChartDataFetch = (
 
															 ) => {
														
 
															   const vChartRef = ref<typeof VChart | null>(null)
														
 
															   let fetchInterval: any = 0
														
 
															-
														
 
															+  console.log("vChartRef:",vChartRef)
														
 
															   // 数据池
														
 
															   const { addGlobalDataInterface } = useChartDataPondFetch()
														
@@ -34,7 +36,7 @@ export const useChartDataFetch = (
 
															   const echartsUpdateHandle = (dataset: any) => {
														
 
															     if (chartFrame === ChartFrameEnum.ECHARTS) {
														
 
															       if (vChartRef.value) {
														
 
															-        vChartRef.value.setOption({ dataset: dataset })
														
 
															+        setOption(vChartRef.value, { dataset: dataset }, false)
														
 
															       }
														
 
															     }
														
 
															   }
														
@@ -71,14 +73,16 @@ export const useChartDataFetch = (
 
															         clearInterval(fetchInterval)
														
 
															         const fetchFn = async () => {
														
 
															+          console.log("监听到更改")
														
 
															           const res = await customizeHttp(toRaw(targetComponent.request), toRaw(chartEditStore.getRequestGlobalConfig))
														
 
															           if (res) {
														
 
															             try {
														
 
															               const filter = targetComponent.filter
														
 
															-              echartsUpdateHandle(newFunctionHandle(res?.data, res, filter))
														
 
															+              const { data } = res
														
 
															+              echartsUpdateHandle(newFunctionHandle(data, res, filter))
														
 
															               // 更新回调函数
														
 
															               if (updateCallback) {
														
 
															-                updateCallback(newFunctionHandle(res?.data, res, filter))
														
 
															+                updateCallback(newFunctionHandle(data, res, filter))
														
 
															               }
														
 
															             } catch (error) {
														
 
															               console.error(error)
														
@@ -86,14 +90,26 @@ export const useChartDataFetch = (
 
															           }
														
 
															         }
														
 
															-        // 立即调用
														
 
															-        fetchFn()
														
 
															+        // 普通初始化与组件交互处理监听
														
 
															+        watch(
														
 
															+          () => targetComponent.request.requestParams,
														
 
															+          () => {
														
 
															+            fetchFn()
														
 
															+          },
														
 
															+          {
														
 
															+            immediate: true,
														
 
															+            deep: true
														
 
															+          }
														
 
															+        )
														
 
															+
														
 
															         // 定时时间
														
 
															-        const time = targetInterval && targetInterval.value ? targetInterval.value : globalRequestInterval.value
														
 
															+        const time = targetInterval && !isNil(targetInterval.value) ? targetInterval.value : globalRequestInterval.value
														
 
															         // 单位
														
 
															-        const unit = targetInterval && targetInterval.value ? targetUnit.value : globalUnit.value
														
 
															+        const unit = targetInterval && !isNil(targetInterval.value) ? targetUnit.value : globalUnit.value
														
 
															         // 开启轮询
														
 
															-        if (time) fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit))
														
 
															+        if (time) {
														
 
															+          fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit))
														
 
															+        }
														
 
															       }
														
 
															       // eslint-disable-next-line no-empty
														
 
															     } catch (error) {
														
@@ -102,10 +118,17 @@ export const useChartDataFetch = (
 
															   }
														
 
															   if (isPreview()) {
														
 
															-    // 判断是否是数据池类型
														
 
															+    console.log("是否是数据池:",targetComponent.request.requestDataType === RequestDataTypeEnum.Pond)
														
 
															+    console.log(targetComponent)
														
 
															     targetComponent.request.requestDataType === RequestDataTypeEnum.Pond
														
 
															-      ? addGlobalDataInterface(targetComponent, useChartEditStore, updateCallback || echartsUpdateHandle)
														
 
															+      ? addGlobalDataInterface(targetComponent, useChartEditStore, (newData: any) => {
														
 
															+          echartsUpdateHandle(newData)
														
 
															+          if (updateCallback) updateCallback(newData)
														
 
															+        })
														
 
															       : requestIntervalFn()
														
 
															+  } else {
														
 
															+    requestIntervalFn()
														
 
															   }
														
 
															+  console.log("vChartRef:",vChartRef)
														
 
															   return { vChartRef }
														
 
															 }