Merge branch 'master-fetch-dev' into master-fetch

Edge浏览器不行 Edg应该也是<-1

Signed-off-by: CarnivalO <xmwjn@qq.com>

.workflow/branch-pipeline.yml

@@ -0,0 +1,51 @@
+version: '1.0'
+name: branch-pipeline
+displayName: BranchPipeline
+stages:
+  - stage: 
+    name: compile
+    displayName: 编译
+    steps:
+      - step: build@nodejs
+        name: build_nodejs
+        displayName: Nodejs 构建
+        # 支持8.16.2、10.17.0、12.16.1、14.16.0、15.12.0五个版本
+        nodeVersion: 14.16.0
+        # 构建命令：安装依赖 -> 清除上次打包产物残留 -> 执行构建 【请根据项目实际产出进行填写】
+        commands:
+          - npm install && rm -rf ./dist && npm run build
+        # 非必填字段，开启后表示将构建产物暂存，但不会上传到制品库中，7天后自动清除
+        artifacts:
+            # 构建产物名字，作为产物的唯一标识可向下传递，支持自定义，默认为BUILD_ARTIFACT。在下游可以通过${BUILD_ARTIFACT}方式引用来获取构建物地址
+          - name: BUILD_ARTIFACT
+            # 构建产物获取路径，是指代码编译完毕之后构建物的所在路径
+            path:
+              - ./dist
+      - step: publish@general_artifacts
+        name: publish_general_artifacts
+        displayName: 上传制品
+        # 上游构建任务定义的产物名，默认BUILD_ARTIFACT
+        dependArtifact: BUILD_ARTIFACT
+        # 上传到制品库时的制品命名，默认output
+        artifactName: output
+        dependsOn: build_nodejs
+  - stage: 
+    name: release
+    displayName: 发布
+    steps:
+      - step: publish@release_artifacts
+        name: publish_release_artifacts
+        displayName: '发布'
+        # 上游上传制品任务的产出
+        dependArtifact: output
+        # 发布制品版本号
+        version: '1.0.0.0'
+        # 是否开启版本号自增，默认开启
+        autoIncrement: true
+triggers:
+  push:
+    branches:
+      exclude:
+        - master
+      include:
+        - .*

.workflow/master-pipeline.yml

@@ -0,0 +1,49 @@
+version: '1.0'
+name: master-pipeline
+displayName: MasterPipeline
+stages:
+  - stage: 
+    name: compile
+    displayName: 编译
+    steps:
+      - step: build@nodejs
+        name: build_nodejs
+        displayName: Nodejs 构建
+        # 支持8.16.2、10.17.0、12.16.1、14.16.0、15.12.0五个版本
+        nodeVersion: 14.16.0
+        # 构建命令：安装依赖 -> 清除上次打包产物残留 -> 执行构建 【请根据项目实际产出进行填写】
+        commands:
+          - npm install && rm -rf ./dist && npm run build
+        # 非必填字段，开启后表示将构建产物暂存，但不会上传到制品库中，7天后自动清除
+        artifacts:
+            # 构建产物名字，作为产物的唯一标识可向下传递，支持自定义，默认为BUILD_ARTIFACT。在下游可以通过${BUILD_ARTIFACT}方式引用来获取构建物地址
+          - name: BUILD_ARTIFACT
+            # 构建产物获取路径，是指代码编译完毕之后构建物的所在路径
+            path:
+              - ./dist
+      - step: publish@general_artifacts
+        name: publish_general_artifacts
+        displayName: 上传制品
+        # 上游构建任务定义的产物名，默认BUILD_ARTIFACT
+        dependArtifact: BUILD_ARTIFACT
+        # 上传到制品库时的制品命名，默认output
+        artifactName: output
+        dependsOn: build_nodejs
+  - stage: 
+    name: release
+    displayName: 发布
+    steps:
+      - step: publish@release_artifacts
+        name: publish_release_artifacts
+        displayName: '发布'
+        # 上游上传制品任务的产出
+        dependArtifact: output
+        # 发布制品版本号
+        version: '1.0.0.0'
+        # 是否开启版本号自增，默认开启
+        autoIncrement: true
+triggers:
+  push:
+    branches:
+      include:
+        - master

.workflow/pr-pipeline.yml

@@ -0,0 +1,36 @@
+version: '1.0'
+name: pr-pipeline
+displayName: PRPipeline
+stages:
+  - stage: 
+    name: compile
+    displayName: 编译
+    steps:
+      - step: build@nodejs
+        name: build_nodejs
+        displayName: Nodejs 构建
+        # 支持8.16.2、10.17.0、12.16.1、14.16.0、15.12.0五个版本
+        nodeVersion: 14.16.0
+        # 构建命令：安装依赖 -> 清除上次打包产物残留 -> 执行构建 【请根据项目实际产出进行填写】
+        commands:
+          - npm install && rm -rf ./dist && npm run build
+        # 非必填字段，开启后表示将构建产物暂存，但不会上传到制品库中，7天后自动清除
+        artifacts:
+            # 构建产物名字，作为产物的唯一标识可向下传递，支持自定义，默认为BUILD_ARTIFACT。在下游可以通过${BUILD_ARTIFACT}方式引用来获取构建物地址
+          - name: BUILD_ARTIFACT
+            # 构建产物获取路径，是指代码编译完毕之后构建物的所在路径
+            path:
+              - ./dist
+      - step: publish@general_artifacts
+        name: publish_general_artifacts
+        displayName: 上传制品
+        # 上游构建任务定义的产物名，默认BUILD_ARTIFACT
+        dependArtifact: BUILD_ARTIFACT
+        # 上传到制品库时的制品命名，默认output
+        artifactName: output
+        dependsOn: build_nodejs
+triggers:
+  pr:
+    branches:
+      include:
+        - master

package.json

@@ -1,6 +1,9 @@
 {
   "name": "go-view",
-  "version": "2.1.3",
+  "version": "2.1.6",
+  "engines": {
+    "node": ">=16.14 <18.0.0"
+  },
   "scripts": {
     "dev": "vite --host",
     "build": "vue-tsc --noEmit && vite build",
@@ -21,6 +24,7 @@
     "axios": "^0.27.2",
     "color": "^4.2.3",
     "crypto-js": "^4.1.1",
+    "dom-helpers": "^5.2.1",
     "echarts-liquidfill": "^3.1.0",
     "echarts-stat": "^1.2.0",
     "echarts-wordcloud": "^2.0.0",
@@ -29,13 +33,13 @@
     "html2canvas": "^1.4.1",
     "keymaster": "^1.6.2",
     "monaco-editor": "^0.33.0",
-    "naive-ui": "2.33.4",
+    "naive-ui": "2.34.3",
     "pinia": "^2.0.13",
     "screenfull": "^6.0.1",
     "three": "^0.145.0",
     "vue": "^3.2.31",
     "vue-demi": "^0.13.1",
-    "vue-i18n": "9.1.10",
+    "vue-i18n": "^9.2.2",
     "vue-router": "4.0.12",
     "vue3-lazyload": "^0.2.5-beta",
     "vue3-sketch-ruler": "^1.3.3",
@@ -78,4 +82,4 @@
     "vue-echarts": "^6.0.2",
     "vue-tsc": "^0.28.10"
   }
-}
+}

pnpm-lock.yaml

@@ -25,6 +25,7 @@ specifiers:
   commitlint: ^17.0.2
   crypto-js: ^4.1.1
   default-passive-events: ^2.0.0
+  dom-helpers: ^5.2.1
   echarts: ^5.3.2
   echarts-liquidfill: ^3.1.0
   echarts-stat: ^1.2.0
@@ -42,7 +43,7 @@ specifiers:
   lodash: ~4.17.21
   mockjs: ^1.1.0
   monaco-editor: ^0.33.0
-  naive-ui: 2.33.4
+  naive-ui: 2.34.3
   pinia: ^2.0.13
   plop: ^3.0.5
   prettier: ^2.6.2
@@ -59,7 +60,7 @@ specifiers:
   vue: ^3.2.31
   vue-demi: ^0.13.1
   vue-echarts: ^6.0.2
-  vue-i18n: 9.1.10
+  vue-i18n: ^9.2.2
   vue-router: 4.0.12
   vue-tsc: ^0.28.10
   vue3-lazyload: ^0.2.5-beta
@@ -77,6 +78,7 @@ dependencies:
   axios: 0.27.2
   color: 4.2.3
   crypto-js: 4.1.1
+  dom-helpers: 5.2.1
   echarts-liquidfill: 3.1.0_echarts@5.3.3
   echarts-stat: 1.2.0
   echarts-wordcloud: 2.0.0_echarts@5.3.3
@@ -85,13 +87,13 @@ dependencies:
   html2canvas: 1.4.1
   keymaster: 1.6.2
   monaco-editor: 0.33.0
-  naive-ui: 2.33.4_vue@3.2.37
+  naive-ui: 2.34.3_vue@3.2.37
   pinia: 2.0.14_ub5l46u3nefphax5x2tezui4oq
   screenfull: 6.0.1
   three: 0.145.0
   vue: 3.2.37
   vue-demi: 0.13.1_vue@3.2.37
-  vue-i18n: 9.1.10_vue@3.2.37
+  vue-i18n: 9.2.2_vue@3.2.37
   vue-router: 4.0.12_vue@3.2.37
   vue3-lazyload: 0.2.5-beta_2yymnzrok6eda47acnj2yjm3ae
   vue3-sketch-ruler: 1.3.4_vue@3.2.37
@@ -402,6 +404,13 @@ packages:
       - supports-color
     dev: true
 
+  /@babel/runtime/7.20.6:
+    resolution: {integrity: sha512-Q+8MqP7TiHMWzSfwiJwXCjyf4GYA4Dgw3emg/7xmwsdLJOZUp+nMqcOwOzzYheuM1rhDu8FSj2l0aoMygEuXuA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      regenerator-runtime: 0.13.11
+    dev: false
+
   /@babel/template/7.16.7:
     resolution: {integrity: sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==}
     engines: {node: '>=6.9.0'}
@@ -671,60 +680,42 @@ packages:
     resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
     dev: true
 
-  /@intlify/core-base/9.1.10:
-    resolution: {integrity: sha512-So9CNUavB/IsZ+zBmk2Cv6McQp6vc2wbGi1S0XQmJ8Vz+UFcNn9MFXAe9gY67PreIHrbLsLxDD0cwo1qsxM1Nw==}
-    engines: {node: '>= 10'}
+  /@intlify/core-base/9.2.2:
+    resolution: {integrity: sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==}
+    engines: {node: '>= 14'}
     dependencies:
-      '@intlify/devtools-if': 9.1.10
-      '@intlify/message-compiler': 9.1.10
-      '@intlify/message-resolver': 9.1.10
-      '@intlify/runtime': 9.1.10
-      '@intlify/shared': 9.1.10
-      '@intlify/vue-devtools': 9.1.10
+      '@intlify/devtools-if': 9.2.2
+      '@intlify/message-compiler': 9.2.2
+      '@intlify/shared': 9.2.2
+      '@intlify/vue-devtools': 9.2.2
     dev: false
 
-  /@intlify/devtools-if/9.1.10:
-    resolution: {integrity: sha512-SHaKoYu6sog3+Q8js1y3oXLywuogbH1sKuc7NSYkN3GElvXSBaMoCzW+we0ZSFqj/6c7vTNLg9nQ6rxhKqYwnQ==}
-    engines: {node: '>= 10'}
+  /@intlify/devtools-if/9.2.2:
+    resolution: {integrity: sha512-4ttr/FNO29w+kBbU7HZ/U0Lzuh2cRDhP8UlWOtV9ERcjHzuyXVZmjyleESK6eVP60tGC9QtQW9yZE+JeRhDHkg==}
+    engines: {node: '>= 14'}
     dependencies:
-      '@intlify/shared': 9.1.10
+      '@intlify/shared': 9.2.2
     dev: false
 
-  /@intlify/message-compiler/9.1.10:
-    resolution: {integrity: sha512-+JiJpXff/XTb0EadYwdxOyRTB0hXNd4n1HaJ/a4yuV960uRmPXaklJsedW0LNdcptd/hYUZtCkI7Lc9J5C1gxg==}
-    engines: {node: '>= 10'}
+  /@intlify/message-compiler/9.2.2:
+    resolution: {integrity: sha512-IUrQW7byAKN2fMBe8z6sK6riG1pue95e5jfokn8hA5Q3Bqy4MBJ5lJAofUsawQJYHeoPJ7svMDyBaVJ4d0GTtA==}
+    engines: {node: '>= 14'}
     dependencies:
-      '@intlify/message-resolver': 9.1.10
-      '@intlify/shared': 9.1.10
+      '@intlify/shared': 9.2.2
       source-map: 0.6.1
     dev: false
 
-  /@intlify/message-resolver/9.1.10:
-    resolution: {integrity: sha512-5YixMG/M05m0cn9+gOzd4EZQTFRUu8RGhzxJbR1DWN21x/Z3bJ8QpDYj6hC4FwBj5uKsRfKpJQ3Xqg98KWoA+w==}
-    engines: {node: '>= 10'}
+  /@intlify/shared/9.2.2:
+    resolution: {integrity: sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==}
+    engines: {node: '>= 14'}
     dev: false
 
-  /@intlify/runtime/9.1.10:
-    resolution: {integrity: sha512-7QsuByNzpe3Gfmhwq6hzgXcMPpxz8Zxb/XFI6s9lQdPLPe5Lgw4U1ovRPZTOs6Y2hwitR3j/HD8BJNGWpJnOFA==}
-    engines: {node: '>= 10'}
+  /@intlify/vue-devtools/9.2.2:
+    resolution: {integrity: sha512-+dUyqyCHWHb/UcvY1MlIpO87munedm3Gn6E9WWYdWrMuYLcoIoOEVDWSS8xSwtlPU+kA+MEQTP6Q1iI/ocusJg==}
+    engines: {node: '>= 14'}
     dependencies:
-      '@intlify/message-compiler': 9.1.10
-      '@intlify/message-resolver': 9.1.10
-      '@intlify/shared': 9.1.10
-    dev: false
-
-  /@intlify/shared/9.1.10:
-    resolution: {integrity: sha512-Om54xJeo1Vw+K1+wHYyXngE8cAbrxZHpWjYzMR9wCkqbhGtRV5VLhVc214Ze2YatPrWlS2WSMOWXR8JktX/IgA==}
-    engines: {node: '>= 10'}
-    dev: false
-
-  /@intlify/vue-devtools/9.1.10:
-    resolution: {integrity: sha512-5l3qYARVbkWAkagLu1XbDUWRJSL8br1Dj60wgMaKB0+HswVsrR6LloYZTg7ozyvM621V6+zsmwzbQxbVQyrytQ==}
-    engines: {node: '>= 10'}
-    dependencies:
-      '@intlify/message-resolver': 9.1.10
-      '@intlify/runtime': 9.1.10
-      '@intlify/shared': 9.1.10
+      '@intlify/core-base': 9.2.2
+      '@intlify/shared': 9.2.2
     dev: false
 
   /@jridgewell/gen-mapping/0.1.1:
@@ -889,6 +880,10 @@ packages:
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
     dev: true
 
+  /@types/katex/0.14.0:
+    resolution: {integrity: sha512-+2FW2CcT0K3P+JMR8YG846bmDwplKUTsWgT2ENwdQ1UdVfRk3GQrh6Mi4sTopy30gI8Uau5CEqHTDZ6YvWIUPA==}
+    dev: false
+
   /@types/keymaster/1.6.30:
     resolution: {integrity: sha512-mtL/NuDBX72zmyIa3cYHA1bQj1WAYlSC4eZcIQj+DHJkcRyTRF2XJXo7DBmkkY8TEq7XaAf7B8TGxs5PHhjRtw==}
     dev: false
@@ -1219,6 +1214,10 @@ packages:
     resolution: {integrity: sha512-IiA0SvDrJEgXvVxjNkHPFfDx6SXw0b/TUkqMcDZWNg9fnCAHbTpoo59YfJ9QLFkwa3raau5vSlRVzMSLDnfdtQ==}
     dev: false
 
+  /@vue/devtools-api/6.4.5:
+    resolution: {integrity: sha512-JD5fcdIuFxU4fQyXUu3w2KpAJHzTVdN+p4iOX2lMWSHMOoQdMAcpFLZzm9Z/2nmsoZ1a96QEhZ26e50xLBsgOQ==}
+    dev: false
+
   /@vue/reactivity-transform/3.2.37:
     resolution: {integrity: sha512-IWopkKEb+8qpu/1eMKVeXrK0NLw9HicGviJzhJDEyfxTR9e1WtpnnbYkJWurX6WwoFP0sz10xQg8yL8lgskAZg==}
     dependencies:
@@ -1912,7 +1911,7 @@ packages:
     dev: true
 
   /csstype/2.6.20:
-    resolution: {integrity: sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npm.taobao.org/csstype/-/csstype-2.6.20.tgz}
+    resolution: {integrity: sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==}
     dev: false
 
   /csstype/3.0.11:
@@ -2065,6 +2064,13 @@ packages:
     resolution: {integrity: sha512-LLBi6pEqS6Do3EKQ3J0NqHWV5hhb78Pi8vvESYwyOy2c31ZEZVdtitdzsQsKb7878PEERhzUk0ftqGhG6Mz+pQ==}
     dev: true
 
+  /dom-helpers/5.2.1:
+    resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
+    dependencies:
+      '@babel/runtime': 7.20.6
+      csstype: 3.0.11
+    dev: false
+
   /dom-serializer/1.4.1:
     resolution: {integrity: sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==}
     dependencies:
@@ -3830,13 +3836,14 @@ packages:
     resolution: {integrity: sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==}
     dev: true
 
-  /naive-ui/2.33.4_vue@3.2.37:
-    resolution: {integrity: sha512-4tK2lWx3v8sbEeTLG/tL5Ur9VvZyUxSnC0VcTO6NO1rM/D15JXg8jVwQCRFYnEp7mp3gfD5B3i8kN4JisTeiFA==}
+  /naive-ui/2.34.3_vue@3.2.37:
+    resolution: {integrity: sha512-fUMr0dzb/iGsOTWgoblPVobY5X5dihQ1eam5dA+H74oyLYAvgX4pL96xQFPBLIYqvyRFBAsN85kHN5pLqdtpxA==}
     peerDependencies:
       vue: ^3.0.0
     dependencies:
       '@css-render/plugin-bem': 0.15.10_css-render@0.15.10
       '@css-render/vue3-ssr': 0.15.10_vue@3.2.37
+      '@types/katex': 0.14.0
       '@types/lodash': 4.14.185
       '@types/lodash-es': 4.17.6
       async-validator: 4.1.1
@@ -4462,6 +4469,10 @@ packages:
       strip-indent: 3.0.0
     dev: true
 
+  /regenerator-runtime/0.13.11:
+    resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==}
+    dev: false
+
   /regexp.prototype.flags/1.4.3:
     resolution: {integrity: sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==}
     engines: {node: '>= 0.4'}
@@ -5385,16 +5396,16 @@ packages:
       - supports-color
     dev: true
 
-  /vue-i18n/9.1.10_vue@3.2.37:
-    resolution: {integrity: sha512-jpr7gV5KPk4n+sSPdpZT8Qx3XzTcNDWffRlHV/cT2NUyEf+sEgTTmLvnBAibjOFJ0zsUyZlVTAWH5DDnYep+1g==}
-    engines: {node: '>= 10'}
+  /vue-i18n/9.2.2_vue@3.2.37:
+    resolution: {integrity: sha512-yswpwtj89rTBhegUAv9Mu37LNznyu3NpyLQmozF3i1hYOhwpG8RjcjIFIIfnu+2MDZJGSZPXaKWvnQA71Yv9TQ==}
+    engines: {node: '>= 14'}
     peerDependencies:
       vue: ^3.0.0
     dependencies:
-      '@intlify/core-base': 9.1.10
-      '@intlify/shared': 9.1.10
-      '@intlify/vue-devtools': 9.1.10
-      '@vue/devtools-api': 6.1.4
+      '@intlify/core-base': 9.2.2
+      '@intlify/shared': 9.2.2
+      '@intlify/vue-devtools': 9.2.2
+      '@vue/devtools-api': 6.4.5
       vue: 3.2.37
     dev: false
 

src/api/axios.ts

@@ -55,6 +55,8 @@ axiosInstance.interceptors.response.use(
     }
     const { code } = res.data as { code: number }
 
+    if (code === undefined || code === null) return Promise.resolve(res)
+
     // 成功
     if (code === ResultEnum.SUCCESS) {
       return Promise.resolve(res.data)

src/api/mock/test.mock.ts

@@ -10,8 +10,8 @@ export default {
     status: 200,
     msg: '请求成功',
     data: {
-      dimensions: ['product', 'dataOne'],
-      'source|50': [
+    dimensions: ['product', 'dataOne'],
+      'source|20': [
         {
           product: '@name',
           'dataOne|0-900': 3
@@ -26,12 +26,8 @@ export default {
     msg: '请求成功',
     data: {
       dimensions: ['name', 'value'],
-      source: [
-        { name: '厦门', 'value|0-40': 20 },
-        { name: '南阳', 'value|20-60': 40 },
-        { name: '北京', 'value|40-80': 60 },
-        { name: '上海', 'value|60-100': 80 },
-        { name: '新疆', value: 100 }
+      "source|2-5": [
+        { 'name|+1': ["厦门","福州","北京","上海","新疆","郑州","湖南","内蒙古"], 'value|0-40': 20 },
       ]
     }
   },
@@ -41,12 +37,13 @@ export default {
     status: 200,
     msg: '请求成功',
     data: {
-      dimensions: ['product', 'dataOne', 'dataTwo'],
-      'source|50': [
+      dimensions: ['product', 'dataOne', 'dataTwo', 'dataThree'],
+      'source|20': [
         {
           product: '@name',
           'dataOne|100-900': 3,
-          'dataTwo|100-900': 3
+          'dataTwo|100-900': 3,
+          'dataThree|100-900': 3
         }
       ]
     }

src/components/GoLangSelect/index.vue

@@ -14,16 +14,19 @@
 </template>
 
 <script lang="ts" setup>
+import { useI18n } from "vue-i18n";
 import { useLangStore } from '@/store/modules/langStore/langStore'
 import { langList } from '@/i18n/index'
 import { LangEnum } from '@/enums/styleEnum'
 import { icon } from '@/plugins'
 
 const { LanguageIcon } = icon.ionicons5
+const { locale } = useI18n();
 const langStore = useLangStore()
 const options = langList
 
 const handleSelect = (key: LangEnum) => {
+  locale.value = key;
   langStore.changeLang(key)
 }
 </script>

src/components/GoSystemInfo/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-modal v-model:show="modelShow" @afterLeave="closeHandle">
+  <n-modal v-model:show="modelShowRef" @afterLeave="closeHandle">
     <n-list bordered class="go-system-info">
       <template #header>
         <n-space justify="space-between">
@@ -51,10 +51,10 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelShow'])
 const { HelpOutlineIcon, CloseIcon } = icon.ionicons5
-const modelShow = ref(false)
+const modelShowRef = ref(false)
 
 watch(() => props.modelShow, (newValue) => {
-  modelShow.value = newValue
+  modelShowRef.value = newValue
 })
 
 const closeHandle = () => {

src/components/GoSystemSet/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-modal v-model:show="modelShow" @afterLeave="closeHandle">
+  <n-modal v-model:show="modelShowRef" @afterLeave="closeHandle">
     <n-list bordered class="go-system-setting">
       <template #header>
         <n-space justify="space-between">
@@ -82,7 +82,7 @@ const props = defineProps({
 const emit = defineEmits(['update:modelShow'])
 const { HelpOutlineIcon, CloseIcon } = icon.ionicons5
 const settingStore = useSettingStore()
-const modelShow = ref(false)
+const modelShowRef = ref(false)
 
 const list = reactive<ListType[]>([
   {
@@ -168,7 +168,7 @@ const list = reactive<ListType[]>([
 ])
 
 watch(() => props.modelShow, (newValue) => {
-  modelShow.value = newValue
+  modelShowRef.value = newValue
 })
 
 const closeHandle = () => {

src/components/Pages/ChartGlobImage/index.ts

@@ -0,0 +1,3 @@
+import ChartGlobImage from './index.vue'
+
+export { ChartGlobImage }

src/components/Pages/ChartGlobImage/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <img class="list-img" v-lazy="imageInfo" alt="图表图片" />
+</template>
+
+<script setup lang="ts">
+import { ref, PropType, watch } from 'vue'
+import { fetchImages } from '@/packages'
+import { ConfigType } from '@/packages/index.d'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<ConfigType>,
+    required: true
+  }
+})
+
+const imageInfo = ref('')
+
+// 获取图片
+const fetchImageUrl = async () => {
+  imageInfo.value = await fetchImages(props.chartConfig)
+}
+
+watch(
+  () => props.chartConfig.key,
+  () => fetchImageUrl(),
+  {
+    immediate: true
+  }
+)
+</script>

src/enums/editPageEnum.ts

@@ -66,7 +66,8 @@ export enum WinKeyboard {
   ALT = ' alt',
   CTRL_SOURCE_KEY = 'control',
   SHIFT_SOURCE_KEY = 'shift',
-  ALT_SOURCE_KEY = 'alt'
+  ALT_SOURCE_KEY = 'alt',
+  SPACE = 'Space'
 }
 
 // Mac 键盘枚举
@@ -77,7 +78,8 @@ export enum MacKeyboard {
   ALT = '⌥',
   CTRL_SOURCE_KEY = '⌘',
   SHIFT_SOURCE_KEY = '⇧',
-  ALT_SOURCE_KEY = '⌥'
+  ALT_SOURCE_KEY = '⌥',
+  SPACE = 'Space'
 }
 
 // 同步状态枚举

src/enums/eventEnum.ts

@@ -0,0 +1,31 @@
+// 基础事件类型(vue不加 on)
+export enum BaseEvent {
+  // 点击
+  ON_CLICK = 'click',
+  // 双击
+  ON_DBL_CLICK = 'dblclick',
+  // 移入
+  ON_MOUSE_ENTER = 'mouseenter',
+  // 移出
+  ON_MOUSE_LEAVE = 'mouseleave',
+}
+
+// vue3 生命周期事件
+export enum EventLife { 
+  // 渲染之后
+  VNODE_MOUNTED = 'vnodeMounted',
+  // 渲染之前
+  VNODE_BEFORE_MOUNT = 'vnodeBeforeMount',
+}
+
+// 内置字符串函数对象列表
+export const excludeParseEventKeyList = [
+  EventLife.VNODE_BEFORE_MOUNT,
+  EventLife.VNODE_MOUNTED,
+  BaseEvent.ON_CLICK,
+  BaseEvent.ON_DBL_CLICK,
+  BaseEvent.ON_MOUSE_ENTER,
+  BaseEvent.ON_MOUSE_LEAVE,
+  //过滤器
+  'filter'
+]

src/hooks/useLifeHandler.hook.ts

@@ -1,4 +1,5 @@
-import { CreateComponentType, CreateComponentGroupType, EventLife, BaseEvent } from '@/packages/index.d'
+import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
+import { EventLife } from '@/enums/eventEnum'
 import * as echarts from 'echarts'
 
 // 所有图表组件集合对象

src/i18n/index.ts

@@ -23,6 +23,8 @@ export const langList = [
 ]
 
 const i18n = createI18n({
+  legacy: false,
+  globalInjection:true,
   locale: langStorage?.lang || lang,
   fallbackLocale: langStorage?.lang || lang,
   messages: {

src/packages/components/Charts/Bars/BarCommon/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/bar_x.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const BarCommonConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.BAR,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.ECHARTS,
-  image
+  image: 'bar_x.png'
 }

src/packages/components/Charts/Bars/BarCrossrange/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/bar_y.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const BarCrossrangeConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.BAR,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.ECHARTS,
-  image
+  image: 'bar_y.png'
 }

src/packages/components/Charts/Bars/CapsuleChart/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/capsule.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const CapsuleChartConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.BAR,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.COMMON,
-  image
+  image: 'capsule.png'
 }

src/packages/components/Charts/Bars/CapsuleChart/index.vue

@@ -111,18 +111,18 @@ watch(
   }
 )
 
-const calcData = (data: any) => {
-  mergeConfig(props.chartConfig.option)
-  calcCapsuleLengthAndLabelData()
-}
-
-const mergeConfig = (data: any) => {
-  state.mergedConfig = cloneDeep(data || {})
+const calcData = (data: any, type?: string) => {
+  let cloneConfig = cloneDeep(props.chartConfig.option || {})
+  state.mergedConfig = cloneConfig
+  if (type == 'preview') {
+    cloneConfig.dataset = data
+  }
+  calcCapsuleLengthAndLabelData(state.mergedConfig.dataset)
 }
 
 // 数据解析
-const calcCapsuleLengthAndLabelData = () => {
-  const { source } = state.mergedConfig.dataset
+const calcCapsuleLengthAndLabelData = (dataset: any) => {
+  const { source } = dataset
   if (!source.length) return
 
   state.capsuleItemHeight = numberSizeHandle(state.mergedConfig.itemHeight)
@@ -151,7 +151,7 @@ onMounted(() => {
 
 // 预览
 useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
-  calcData(newData)
+  calcData(newData, 'preview')
 })
 </script>
 

src/packages/components/Charts/Lines/LineCommon/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/line.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const LineCommonConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.LINE,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.ECHARTS,
-  image
+  image: 'line.png'
 }

src/packages/components/Charts/Lines/LineGradientSingle/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/line_gradient_single.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const LineGradientSingleConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.LINE,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.ECHARTS,
-  image
+  image: 'line_gradient_single.png'
 }

src/packages/components/Charts/Lines/LineGradients/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/line_gradient.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const LineGradientsConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.LINE,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.ECHARTS,
-  image
+  image: 'line_gradient.png'
 }

src/packages/components/Charts/Lines/LineLinearSingle/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/line_linear_single.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const LineLinearSingleConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.LINE,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.ECHARTS,
-  image
+  image: 'line_linear_single.png'
 }

src/packages/components/Charts/Maps/MapAmap/index.ts

@@ -1,5 +1,4 @@
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
-import image from '@/assets/images/chart/charts/map_amap.png'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const MapAmapConfig: ConfigType = {
@@ -11,5 +10,5 @@ export const MapAmapConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.MAP,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.COMMON,
-  image
+  image: 'map_amap.png'
 }

src/packages/components/Charts/Maps/MapBase/index.ts

@@ -1,5 +1,4 @@
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
-import image from '@/assets/images/chart/charts/map.png'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const MapBaseConfig: ConfigType = {
@@ -11,5 +10,5 @@ export const MapBaseConfig: ConfigType = {
     categoryName: ChatCategoryEnumName.MAP,
     package: PackagesCategoryEnum.CHARTS,
     chartFrame: ChartFrameEnum.COMMON,
-    image
-  }
+    image: 'map.png'
+}

src/packages/components/Charts/Mores/Funnel/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/funnel.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const FunnelConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.ECHARTS,
-  image
+  image: 'funnel.png'
 }

src/packages/components/Charts/Mores/Heatmap/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/heatmap.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const HeatmapConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.COMMON,
-  image
+  image: 'heatmap.png'
 }

src/packages/components/Charts/Mores/Process/index.ts

@@ -1,5 +1,3 @@
-// 展示图片
-import image from '@/assets/images/chart/charts/process.png'
 // 公共类型声明
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 // 当前[信息模块]分类声明
@@ -21,5 +19,5 @@ export const ProcessConfig: ConfigType = {
   // 包分类
   package: PackagesCategoryEnum.CHARTS,
   // 图片
-  image: image
+  image: 'process.png'
 }

src/packages/components/Charts/Mores/Radar/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/radar.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const RadarConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.COMMON,
-  image
+  image: 'radar.png'
 }

src/packages/components/Charts/Mores/TreeMap/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/tree_map.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const TreeMapConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.COMMON,
-  image
+  image: 'tree_map.png'
 }

src/packages/components/Charts/Mores/WaterPolo/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/water_WaterPolo.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const WaterPoloConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.COMMON,
-  image
+  image: 'water_WaterPolo.png'
 }

src/packages/components/Charts/Pies/PieCircle/index.ts

@@ -11,5 +11,5 @@ export const PieCircleConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.PIE,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.ECHARTS,
-  image
+  image: 'pie-circle.png'
 }

src/packages/components/Charts/Pies/PieCommon/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/pie.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const PieCommonConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.PIE,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.ECHARTS,
-  image
+  image: 'pie.png'
 }

src/packages/components/Charts/Scatters/ScatterCommon/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/scatter-multi.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const ScatterCommonConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.SCATTER,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.ECHARTS,
-  image
+  image: 'scatter-multi.png'
 }

src/packages/components/Charts/Scatters/ScatterLogarithmicRegression/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/scatter-logarithmic-regression.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const ScatterLogarithmicRegressionConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.SCATTER,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.ECHARTS,
-  image
+  image: 'scatter-logarithmic-regression.png'
 }

src/packages/components/Decorates/Borders/Border01/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/border01.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -10,5 +9,5 @@ export const Border01Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'border01.png'
 }

src/packages/components/Decorates/Borders/Border02/index.ts

@@ -10,5 +10,5 @@ export const Border02Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'border02.png'
 }

src/packages/components/Decorates/Borders/Border03/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/border03.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -10,5 +9,5 @@ export const Border03Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'border03.png'
 }

src/packages/components/Decorates/Borders/Border04/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/border04.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -10,5 +9,5 @@ export const Border04Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'border04.png'
 }

src/packages/components/Decorates/Borders/Border05/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/border05.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -10,5 +9,5 @@ export const Border05Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'border05.png'
 }

src/packages/components/Decorates/Borders/Border06/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/border06.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -10,5 +9,5 @@ export const Border06Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'border06.png'
 }

src/packages/components/Decorates/Borders/Border07/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/border07.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -10,5 +9,5 @@ export const Border07Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'border07.png'
 }

src/packages/components/Decorates/Borders/Border08/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/border08.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -10,5 +9,5 @@ export const Border08Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'border08.png'
 }

src/packages/components/Decorates/Borders/Border09/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/border09.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -10,5 +9,5 @@ export const Border09Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'border09.png'
 }

src/packages/components/Decorates/Borders/Border10/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/border10.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -10,5 +9,5 @@ export const Border10Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'border10.png'
 }

src/packages/components/Decorates/Borders/Border11/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/border11.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -10,5 +9,5 @@ export const Border11Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'border11.png'
 }

src/packages/components/Decorates/Borders/Border12/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/border12.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -10,5 +9,5 @@ export const Border12Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'border12.png'
 }

src/packages/components/Decorates/Borders/Border13/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/border13.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -10,5 +9,5 @@ export const Border13Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'border13.png'
 }

src/packages/components/Decorates/Decorates/Decorates01/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/decorates01.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
@@ -10,5 +9,5 @@ export const Decorates01Config: ConfigType = {
   category: ChatCategoryEnum.DECORATE,
   categoryName: ChatCategoryEnumName.DECORATE,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'decorates01.png'
 }

src/packages/components/Decorates/Decorates/Decorates02/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/decorates02.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
@@ -10,5 +9,5 @@ export const Decorates02Config: ConfigType = {
   category: ChatCategoryEnum.DECORATE,
   categoryName: ChatCategoryEnumName.DECORATE,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'decorates02.png'
 }

src/packages/components/Decorates/Decorates/Decorates03/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/decorates03.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -10,5 +9,5 @@ export const Decorates03Config: ConfigType = {
   category: ChatCategoryEnum.DECORATE,
   categoryName: ChatCategoryEnumName.DECORATE,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'decorates01.png'
 }

src/packages/components/Decorates/Decorates/Decorates04/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/decorates04.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -10,5 +9,5 @@ export const Decorates04Config: ConfigType = {
   category: ChatCategoryEnum.DECORATE,
   categoryName: ChatCategoryEnumName.DECORATE,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'decorates04.png'
 }

src/packages/components/Decorates/Decorates/Decorates05/index.ts

@@ -10,5 +10,5 @@ export const Decorates05Config: ConfigType = {
   category: ChatCategoryEnum.DECORATE,
   categoryName: ChatCategoryEnumName.DECORATE,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'decorates05.png'
 }

src/packages/components/Decorates/Decorates/Decorates06/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/decorates06.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const Decorates06Config: ConfigType = {
   categoryName: ChatCategoryEnumName.DECORATE,
   package: PackagesCategoryEnum.DECORATES,
   chartFrame: ChartFrameEnum.COMMON,
-  image
+  image: 'decorates06.png'
 }

src/packages/components/Decorates/Mores/Clock/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/clock.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const ClockConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.DECORATES,
   chartFrame: ChartFrameEnum.STATIC,
-  image
+  image: 'clock.png'
 }

src/packages/components/Decorates/Mores/CountDown/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/countdown.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -10,5 +9,5 @@ export const CountDownConfig: ConfigType = {
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'countdown.png'
 }

src/packages/components/Decorates/Mores/FlipperNumber/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/flipper-number.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -10,5 +9,5 @@ export const FlipperNumberConfig: ConfigType = {
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'flipper-number.png'
 }

src/packages/components/Decorates/Mores/Number/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/number.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -10,5 +9,5 @@ export const NumberConfig: ConfigType = {
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'number.png'
 }

src/packages/components/Decorates/Mores/TimeCommon/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/time.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
@@ -10,5 +9,5 @@ export const TimeCommonConfig: ConfigType = {
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'time.png'
 }

src/packages/components/Decorates/Mores/TimeCommon/index.vue

@@ -26,7 +26,7 @@ let yearMonthDay = ref('2021-2-3')
 let nowData = ref('08:00:00')
 let newData = ref('2021-2-3 08:00:00')
 let boxShadow = ref('none')
-
+let timer: any = null
 const { w, h } = toRefs(props.chartConfig.attr)
 
 let {
@@ -60,7 +60,7 @@ watch(
   }
 )
 onMounted(() => {
-  const timer = setInterval(() => {
+  timer = setInterval(() => {
     var datetime = new Date()
     var year = datetime.getFullYear()
     var month = datetime.getMonth() + 1 < 10 ? '0' + (datetime.getMonth() + 1) : datetime.getMonth() + 1
@@ -81,7 +81,7 @@ onMounted(() => {
   }, 500)
 })
 onUnmounted(() => {
-  clearInterval()
+  clearInterval(timer)
 })
 useChartDataFetch(props.chartConfig, useChartEditStore)
 </script>

src/packages/components/Decorates/Three/ThreeEarth01/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/threeEarth01.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const ThreeEarth01Config: ConfigType = {
   categoryName: ChatCategoryEnumName.THREE,
   package: PackagesCategoryEnum.DECORATES,
   chartFrame: ChartFrameEnum.STATIC,
-  image
+  image: 'threeEarth01.png'
 }

src/packages/components/Decorates/Three/ThreeEarth01/index.vue

@@ -66,7 +66,7 @@ watch(
 // DOM 渲染之后进行初始化
 onMounted(() => {
   try {
-    if (navigator.userAgent.indexOf('Chrome') < -1 || navigator.userAgent.indexOf('Edg') > -1) {
+    if (navigator.userAgent.indexOf('Chrome') < -1 || navigator.userAgent.indexOf('Edg') < -1) {
       window['$message'].error('三维地图组件仅在【谷歌】浏览器上能正常展示！')
       chartEditStore.removeComponentList(undefined, false)
       return

src/packages/components/Informations/Mores/Iframe/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/informations/iframe.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const IframeConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.INFORMATIONS,
   chartFrame: ChartFrameEnum.COMMON,
-  image
+  image: 'iframe.png'
 }

src/packages/components/Informations/Mores/Image/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/informations/photo.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const ImageConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.INFORMATIONS,
   chartFrame: ChartFrameEnum.COMMON,
-  image
+  image: 'photo.png'
 }

src/packages/components/Informations/Mores/Video/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/informations/video.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const VideoConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.INFORMATIONS,
   chartFrame: ChartFrameEnum.COMMON,
-  image
+  image: 'video.png'
 }

src/packages/components/Informations/Mores/WordCloud/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/informations/words_cloud.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const WordCloudConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.INFORMATIONS,
   chartFrame: ChartFrameEnum.COMMON,
-  image
+  image: 'words_cloud.png'
 }

src/packages/components/Informations/Texts/TextBarrage/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/informations/text_barrage.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
@@ -10,5 +9,5 @@ export const TextBarrageConfig: ConfigType = {
   category: ChatCategoryEnum.TEXT,
   categoryName: ChatCategoryEnumName.TEXT,
   package: PackagesCategoryEnum.INFORMATIONS,
-  image
+  image: 'text_barrage.png'
 }

src/packages/components/Informations/Texts/TextCommon/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/informations/text_static.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
@@ -10,5 +9,5 @@ export const TextCommonConfig: ConfigType = {
   category: ChatCategoryEnum.TEXT,
   categoryName: ChatCategoryEnumName.TEXT,
   package: PackagesCategoryEnum.INFORMATIONS,
-  image
+  image: 'text_static.png'
 }

src/packages/components/Informations/Texts/TextGradient/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/informations/text_gradient.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const TextGradientConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.TEXT,
   package: PackagesCategoryEnum.INFORMATIONS,
   chartFrame: ChartFrameEnum.NAIVE_UI,
-  image
+  image: 'text_gradient.png'
 }

src/packages/components/Tables/Tables/TableList/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/tables/tables_list.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const TableListConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.TABLE,
   package: PackagesCategoryEnum.TABLES,
   chartFrame: ChartFrameEnum.COMMON,
-  image
+  image: 'tables_list.png'
 }

src/packages/components/Tables/Tables/TableScrollBoard/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/tables/table_scrollboard.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const TableScrollBoardConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.TABLE,
   package: PackagesCategoryEnum.TABLES,
   chartFrame: ChartFrameEnum.COMMON,
-  image
+  image: 'table_scrollboard.png'
 }

src/packages/index.d.ts

@@ -1,3 +1,4 @@
+import { BaseEvent, EventLife } from '@/enums/eventEnum'
 import type { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 import type { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
 
@@ -22,7 +23,7 @@ export type ConfigType = {
   categoryName: string
   package: string
   chartFrame?: ChartFrameEnum
-  image: string | (() => Promise<typeof import('*.png')>)
+  image: string
 }
 
 // 数据请求
@@ -90,26 +91,6 @@ export const BlendModeEnumList = [
   { label: '亮度', value: 'luminosity' }
 ]
 
-// 基础事件类型(vue不加 on)
-export enum BaseEvent {
-  // 点击
-  ON_CLICK = 'click',
-  // 双击
-  ON_DBL_CLICK = 'dblclick',
-  // 移入
-  ON_MOUSE_ENTER = 'mouseenter',
-  // 移出
-  ON_MOUSE_LEAVE = 'mouseleave',
-}
-
-// vue3 生命周期事件
-export enum EventLife { 
-  // 渲染之后
-  VNODE_MOUNTED = 'vnodeMounted',
-  // 渲染之前
-  VNODE_BEFORE_MOUNT = 'vnodeBeforeMount',
-}
-
 // 组件实例类
 export interface PublicConfigType {
   id: string

src/packages/index.ts

@@ -2,15 +2,11 @@ import { ChartList } from '@/packages/components/Charts/index'
 import { DecorateList } from '@/packages/components/Decorates/index'
 import { InformationList } from '@/packages/components/Informations/index'
 import { TableList } from '@/packages/components/Tables/index'
-import {
-  PackagesCategoryEnum,
-  PackagesType,
-  ConfigType,
-  FetchComFlagType
-} from '@/packages/index.d'
+import { PackagesCategoryEnum, PackagesType, ConfigType, FetchComFlagType } from '@/packages/index.d'
 
-const configModules = import.meta.globEager("./components/**/config.vue")
-const indexModules = import.meta.globEager("./components/**/index.vue")
+const configModules = import.meta.globEager('./components/**/config.vue')
+const indexModules = import.meta.globEager('./components/**/index.vue')
+const imagesModules = import.meta.globEager('../assets/images/chart/**')
 
 // * 所有图表
 export let packagesList: PackagesType = {
@@ -24,7 +20,7 @@ export let packagesList: PackagesType = {
  * * 获取目标组件配置信息
  * @param targetData
  */
- export const createComponent = async (targetData: ConfigType) => {
+export const createComponent = async (targetData: ConfigType) => {
   const { category, key } = targetData
   const chart = await import(`./components/${targetData.package}/${category}/${key}/config.ts`)
   return new chart.default()
@@ -36,10 +32,10 @@ export let packagesList: PackagesType = {
  * @param {FetchComFlagType} flag 标识 0为展示组件, 1为配置组件
  */
 const fetchComponent = (chartName: string, flag: FetchComFlagType) => {
-  const module = flag === FetchComFlagType.VIEW ? indexModules: configModules
+  const module = flag === FetchComFlagType.VIEW ? indexModules : configModules
   for (const key in module) {
     const urlSplit = key.split('/')
-    if(urlSplit[urlSplit.length -2 ] === chartName) {
+    if (urlSplit[urlSplit.length - 2] === chartName) {
       return module[key]
     }
   }
@@ -49,7 +45,7 @@ const fetchComponent = (chartName: string, flag: FetchComFlagType) => {
  * * 获取展示组件
  * @param {ConfigType} dropData 配置项
  */
- export const fetchChartComponent = (dropData: ConfigType) => {
+export const fetchChartComponent = (dropData: ConfigType) => {
   const { key } = dropData
   return fetchComponent(key, FetchComFlagType.VIEW)?.default
 }
@@ -58,7 +54,28 @@ const fetchComponent = (chartName: string, flag: FetchComFlagType) => {
  * * 获取配置组件
  * @param {ConfigType} dropData 配置项
  */
- export const fetchConfigComponent = (dropData: ConfigType) => {
+export const fetchConfigComponent = (dropData: ConfigType) => {
   const { key } = dropData
   return fetchComponent(key, FetchComFlagType.CONFIG)?.default
-}
+}
+
+/**
+ * * 获取图片内容
+ * @param {ConfigType} targetData 配置项
+ */
+export const fetchImages = async (targetData?: ConfigType) => {
+  if (!targetData) return ''
+  // 新数据动态处理
+  const { image, package: targetDataPackage } = targetData
+  // 兼容旧数据
+  if (image.includes('@') || image.includes('base64')) return image
+
+  const imageName = image.substring(image.lastIndexOf('/') + 1)
+  for (const key in imagesModules) {
+    const urlSplit = key.split('/')
+    if (urlSplit[urlSplit.length - 1] === imageName) {
+      return imagesModules[key]?.default
+    }
+  }
+  return ''
+}

src/packages/public/publicConfig.ts

@@ -1,6 +1,7 @@
 import { getUUID } from '@/utils'
 import { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { groupTitle } from '@/settings/designSetting'
+import { BaseEvent, EventLife } from '@/enums/eventEnum'
 import {
   RequestHttpEnum,
   RequestDataTypeEnum,
@@ -9,8 +10,6 @@ import {
   RequestBodyEnum
 } from '@/enums/httpEnum'
 import {
-  BaseEvent,
-  EventLife,
   ChartFrameEnum,
   PublicConfigType,
   CreateComponentType,

src/settings/designColorRecommend.json

@@ -6,6 +6,13 @@
     "name": "碧空绿",
     "pinyin": "bikonlv"
   },
+  {
+    "CMYK": [73, 17, 20, 1],
+    "RGB": [102, 169, 201],
+    "hex": "#66a9c9",
+    "name": "涧石蓝",
+    "pinyin": "jianshilan"
+  },
   {
     "CMYK": [4, 13, 67, 0],
     "RGB": [248, 223, 114],
@@ -19,12 +26,5 @@
     "hex": "#3c7eff",
     "name": "深海蓝",
     "pinyin": "shenhailan"
-  },
-  {
-    "CMYK": [59, 12, 19, 0],
-    "RGB": [138, 188, 209],
-    "hex": "#8abcd1",
-    "name": "秋波蓝",
-    "pinyin": "qiubolan"
   }
 ]

src/store/modules/chartEditStore/chartEditStore.d.ts

@@ -75,6 +75,7 @@ export type EditCanvasType = {
 
 // 画布数据/滤镜/背景色/宽高主题等
 export enum EditCanvasConfigEnum {
+  PROJECT_NAME = 'projectName',
   WIDTH = 'width',
   HEIGHT = 'height',
   CHART_THEME_COLOR = 'chartThemeColor',
@@ -90,7 +91,7 @@ export type EditCanvasConfigType = {
   // ID
   [EditCanvasConfigEnum.PROJECT_ID]: string,
   // 项目名称
-  [EditCanvasConfigEnum.PROJECT_NAME]: string,
+  [EditCanvasConfigEnum.PROJECT_NAME]?: string,
   // 项目描述
   [EditCanvasConfigEnum.REMARKS]: string,
   // 滤镜-启用
@@ -112,6 +113,8 @@ export type EditCanvasConfigType = {
   [FilterEnum.SKEW_X]: number
   [FilterEnum.SKEW_Y]: number
   [FilterEnum.BLEND_MODE]: string
+  // 大屏名称
+  [EditCanvasConfigEnum.PROJECT_NAME]?: string
   // 大屏宽度
   [EditCanvasConfigEnum.WIDTH]: number
   // 大屏高度

src/store/modules/chartEditStore/chartEditStore.ts

@@ -93,6 +93,8 @@ export const useChartEditStore = defineStore({
     // -----------------------
     // 画布属性（需存储给后端）
     editCanvasConfig: {
+      // 项目名称
+      projectName: undefined,
       // 默认宽度
       width: 1920,
       // 默认高度

src/store/modules/chartLayoutStore/chartLayoutStore.d.ts

@@ -1,5 +1,5 @@
 export enum ChartModeEnum {
-  SINGLE= 'single',
+  SINGLE = 'single',
   DOUBLE = 'double'
 }
 
@@ -13,7 +13,9 @@ export enum ChartLayoutStoreEnum {
   CHARTS = 'charts',
   DETAILS = 'details',
   Chart_TYPE = 'chartType',
-  LAYER_TYPE = 'layerType'
+  LAYER_TYPE = 'layerType',
+  PERCENTAGE = 'percentage',
+  RE_POSITION_CANVAS = 'rePositionCanvas'
 }
 
 export interface ChartLayoutType {
@@ -27,4 +29,8 @@ export interface ChartLayoutType {
   [ChartLayoutStoreEnum.Chart_TYPE]: ChartModeEnum
   // 层级展示方式
   [ChartLayoutStoreEnum.LAYER_TYPE]: LayerModeEnum
+  // 当前正在加载的数量
+  [ChartLayoutStoreEnum.PERCENTAGE]: number
+  // 是否重置当前画布位置
+  [ChartLayoutStoreEnum.RE_POSITION_CANVAS]: boolean
 }

src/store/modules/chartLayoutStore/chartLayoutStore.ts

@@ -24,6 +24,10 @@ export const useChartLayoutStore = defineStore({
     chartType: ChartModeEnum.SINGLE,
     // 图层类型（默认图片）
     layerType: LayerModeEnum.THUMBNAIL,
+    // 当前加载数量
+    percentage: 0,
+    // 是否重置当前画布位置
+    rePositionCanvas: false,
     // 防止值不存在
     ...storageChartLayout
   }),
@@ -42,6 +46,12 @@ export const useChartLayoutStore = defineStore({
     },
     getLayerType(): LayerModeEnum {
       return this.layerType
+    },
+    getPercentage(): number {
+      return this.percentage
+    },
+    getRePositionCanvas(): boolean {
+      return this.rePositionCanvas
     }
   },
   actions: {
@@ -49,11 +59,19 @@ export const useChartLayoutStore = defineStore({
       this.$patch(state => {
         state[key] = value
       })
+      // 存储本地
       setLocalStorage(GO_CHART_LAYOUT_STORE, this.$state)
+      // 这里需要标记重置画布位置
+      this.rePositionCanvas = true;
       // 重新计算拖拽区域缩放比例
       setTimeout(() => {
         chartEditStore.computedScale()
       }, 500)
+    },
+    setItemUnHandle<T extends keyof ChartLayoutType, K extends ChartLayoutType[T]>(key: T, value: K): void {
+      this.$patch(state => {
+        state[key] = value
+      })
     }
   }
 })

src/store/modules/langStore/langStore.ts

@@ -2,7 +2,6 @@ import { defineStore } from 'pinia'
 import { lang } from '@/settings/designSetting'
 import { LangStateType } from './langStore.d'
 import { LangEnum } from '@/enums/styleEnum'
-import i18n from '@/i18n/index'
 import { setLocalStorage, getLocalStorage, reloadRoutePage } from '@/utils'
 import { StorageEnum } from '@/enums/storageEnum'
 import { useSettingStore } from '@/store/modules/settingStore/settingStore'
@@ -25,10 +24,8 @@ export const useLangStore = defineStore({
   actions: {
     changeLang(lang: LangEnum): void {
       const settingStore = useSettingStore()
-      
       if (this.lang === lang) return
       this.lang = lang
-      i18n.global.locale = lang
       setLocalStorage(GO_LANG_STORE, this.$state)
 
       if (settingStore.getChangeLangReload) {

src/styles/common/mixins/mixins.scss

@@ -17,7 +17,7 @@
 }
 
 @mixin deep() {
-  :deep {
+  :deep() {
     @content;
   }
 }

src/utils/storage.ts

@@ -1,3 +1,5 @@
+import { JSONStringify, JSONParse } from './utils'
+
 /**
  * * 存储本地会话数据
  * @param k 键名
@@ -6,7 +8,7 @@
  */
 export const setLocalStorage = <T>(k: string, v: T) => {
   try {
-    window.localStorage.setItem(k, JSON.stringify(v))
+    window.localStorage.setItem(k, JSONStringify(v))
   } catch (error) {
     return false
   }
@@ -20,7 +22,7 @@ export const setLocalStorage = <T>(k: string, v: T) => {
 export const getLocalStorage = (k: string) => {
   const item = window.localStorage.getItem(k)
   try {
-    return item ? JSON.parse(item) : item
+    return item ? JSONParse(item) : item
   } catch (err) {
     return item
   }
@@ -55,7 +57,7 @@ export const setSessionStorage = <T>(k: string, v: T) => {
 export const getSessionStorage: (k: string) => any = (k: string) => {
   const item = window.sessionStorage.getItem(k)
   try {
-    return item ? JSON.parse(item) : item
+    return item ? JSONParse(item) : item
   } catch (err) {
     return item
   }

src/utils/utils.ts

@@ -10,6 +10,7 @@ import cloneDeep from 'lodash/cloneDeep'
 import { WinKeyboard } from '@/enums/editPageEnum'
 import { RequestHttpIntervalEnum, RequestParamsObjType } from '@/enums/httpEnum'
 import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
+import { excludeParseEventKeyList } from '@/enums/eventEnum'
 
 /**
  * * 判断是否是开发环境
@@ -250,15 +251,70 @@ export const objToCookie = (obj: RequestParamsObjType) => {
  * @returns
  */
 export const setKeyboardDressShow = (keyCode?: number) => {
-  const code = new Map([[17, WinKeyboard.CTRL]])
+  const code = new Map([
+    [17, WinKeyboard.CTRL],
+    [32, WinKeyboard.SPACE]
+  ])
 
   const dom = document.getElementById('keyboard-dress-show')
   if (!dom) return
   if (!keyCode) {
+    window.onKeySpacePressHold?.(false)
     dom.innerText = ''
     return
   }
   if (keyCode && code.has(keyCode)) {
+    if (keyCode == 32) window.onKeySpacePressHold?.(true)
     dom.innerText = `按下了「${code.get(keyCode)}」键`
   }
 }
+
+/**
+ * * JSON序列化，支持函数和 undefined
+ * @param data
+ */
+export const JSONStringify = <T>(data: T) => {
+  return JSON.stringify(
+    data,
+    (key, val) => {
+      // 处理函数丢失问题
+      if (typeof val === 'function') {
+        return `${val}`
+      }
+      // 处理 undefined 丢失问题
+      if (typeof val === 'undefined') {
+        return null
+      }
+      return val
+    },
+    2
+  )
+}
+
+/**
+ * * JSON反序列化，支持函数和 undefined
+ * @param data
+ */
+export const JSONParse = (data: string) => {
+  return JSON.parse(data, (k, v) => {
+    if (excludeParseEventKeyList.includes(k)) return v
+    if (typeof v === 'string' && v.indexOf && (v.indexOf('function') > -1 || v.indexOf('=>') > -1)) {
+      return eval(`(function(){return ${v}})()`)
+    } else if (typeof v === 'string' && v.indexOf && (v.indexOf('return ') > -1)) {
+      const baseLeftIndex = v.indexOf('(')
+      if (baseLeftIndex > -1) {
+        const newFn = `function ${v.substring(baseLeftIndex)}`
+        return eval(`(function(){return ${newFn}})()`)
+      }
+    }
+    return v
+  })
+}
+
+/**
+ * * 修改顶部标题
+ * @param title
+ */
+export const setTitle = (title?: string) => {
+  title && (document.title = title)
+}

src/views/chart/ContentBox/index.vue

@@ -18,14 +18,14 @@
       </n-space>
     </div>
 
-    <div
-      class="content"
-      :class="{
-        'content-height-show-top-bottom': showBottom || showTop,
-        'content-height-show-both': showBottom && showTop
-      }"
-    >
-      <template v-if="xScroll">
+    <div class="content" :class="{
+      'content-height-show-top-bottom': showBottom || showTop,
+      'content-height-show-both': showBottom && showTop
+    }">
+      <template v-if="disabledScroll">
+        <slot></slot>
+      </template>
+      <template v-else-if="xScroll">
         <n-scrollbar x-scrollable>
           <n-scrollbar>
             <slot></slot>
@@ -83,7 +83,11 @@ defineProps({
   xScroll: {
     type: Boolean,
     default: false
-  }
+  },
+  disabledScroll: {
+    type: Boolean,
+    default: false
+  },
 })
 
 const backHandle = () => {
@@ -93,41 +97,52 @@ const backHandle = () => {
 
 <style lang="scss" scoped>
 $topOrBottomHeight: 40px;
+
 @include go(content-box) {
   height: calc(100vh - #{$--header-height});
   margin: 1px;
   margin-bottom: 0;
+
   &.bg-depth0 {
     @include fetch-bg-color('background-color1');
+
     .bottom,
     .top {
       @include fetch-bg-color('background-color1');
     }
   }
+
   &.bg-depth1 {
     @include fetch-bg-color('background-color1');
+
     .bottom,
     .top {
       @include fetch-bg-color('background-color2');
     }
   }
+
   &.bg-depth2 {
     @include fetch-bg-color('background-color2');
+
     .bottom,
     .top {
       @include fetch-bg-color('background-color3');
     }
   }
+
   &.bg-depth3 {
     @include fetch-bg-color('background-color3');
+
     .bottom,
     .top {
       @include fetch-bg-color('background-color4');
     }
   }
+
   &.flex {
     flex: 1;
   }
+
   .top,
   .bottom {
     display: flex;
@@ -138,10 +153,12 @@ $topOrBottomHeight: 40px;
     padding: 0 10px;
     border-top: 1px solid;
     @include fetch-border-color('hover-border-color');
+
     .mt-1 {
       margin-top: 2px;
     }
   }
+
   .top {
     border-bottom: 1px solid;
     @include fetch-border-color('background-color1');
@@ -159,6 +176,7 @@ $topOrBottomHeight: 40px;
   .content-height-show-top-bottom {
     height: calc(100vh - #{$--header-height} - #{$topOrBottomHeight});
   }
+
   .content-height-show-both {
     height: calc(100vh - #{$--header-height} - #{$topOrBottomHeight} - #{$topOrBottomHeight});
   }

src/views/chart/ContentCharts/components/ChartsItemBox/index.vue

@@ -22,7 +22,7 @@
           </n-text>
         </div>
         <div class="list-center go-flex-center go-transition">
-          <img class="list-img" v-lazy="item.image" alt="图表图片" />
+          <chart-glob-image class="list-img" :chartConfig="item"></chart-glob-image>
         </div>
         <div class="list-bottom">
           <n-text class="list-bottom-text" depth="3">
@@ -37,16 +37,19 @@
 <script setup lang="ts">
 import { PropType, watch, ref, Ref, computed, nextTick } from 'vue'
 import { MacOsControlBtn } from '@/components/Tips/MacOsControlBtn/index'
+import { ChartGlobImage } from '@/components/Pages/ChartGlobImage'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { ChartModeEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
-import { componentInstall, loadingStart, loadingFinish, loadingError } from '@/utils'
+import { componentInstall, loadingStart, loadingFinish, loadingError, JSONStringify } from '@/utils'
 import { DragKeyEnum } from '@/enums/editPageEnum'
 import { createComponent } from '@/packages'
 import { ConfigType, CreateComponentType } from '@/packages/index.d'
 import { fetchConfigComponent, fetchChartComponent } from '@/packages/index'
+
 import omit from 'lodash/omit'
+
 const chartEditStore = useChartEditStore()
 
 defineProps({
@@ -70,7 +73,7 @@ const dragStartHandle = (e: DragEvent, item: ConfigType) => {
   componentInstall(item.chartKey, fetchChartComponent(item))
   componentInstall(item.conKey, fetchConfigComponent(item))
   // 将配置项绑定到拖拽属性上
-  e!.dataTransfer!.setData(DragKeyEnum.DRAG_KEY, JSON.stringify(omit(item, ['image'])))
+  e!.dataTransfer!.setData(DragKeyEnum.DRAG_KEY, JSONStringify(omit(item, ['image'])))
   // 修改状态
   chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CREATE, true)
 }

src/views/chart/ContentCharts/components/ChartsSearch/index.vue

@@ -37,7 +37,7 @@
               :title="item.title"
               @click="selectChartHandle(item)"
             >
-              <img class="list-item-img" v-lazy="item.image" alt="展示图" />
+              <chart-glob-image class="list-item-img" :chartConfig="item"></chart-glob-image>
               <n-text class="list-item-fs" depth="2">{{ item.title }}</n-text>
             </div>
           </n-scrollbar>
@@ -77,6 +77,7 @@ import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayou
 import { isString, addEventListener, removeEventListener } from '@/utils'
 import { fetchConfigComponent, fetchChartComponent } from '@/packages/index'
 import { componentInstall, loadingStart, loadingFinish, loadingError } from '@/utils'
+import { ChartGlobImage } from '@/components/Pages/ChartGlobImage'
 
 const props = defineProps({
   menuOptions: {

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataPond/components/ChartDataPondControl/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-modal class="go-chart-data-pond-control" v-model:show="modelShow" :mask-closable="false">
+  <n-modal class="go-chart-data-pond-control" v-model:show="modelShowRef" :mask-closable="false">
     <n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 900px; height: 650px">
       <template #header></template>
       <template #header-extra> </template>
@@ -37,7 +37,6 @@
 
   <!-- 请求配置model -->
   <pond-data-request
-    v-if="requestShow"
     v-model:modelShow="requestShow"
     :targetDataRequest="editData"
     :isEdit="isEdit"
@@ -59,7 +58,7 @@ import { icon } from '@/plugins'
 import { getUUID, goDialog } from '@/utils'
 import { cloneDeep } from 'lodash'
 
-defineProps({
+const props = defineProps({
   modelShow: Boolean
 })
 
@@ -68,6 +67,7 @@ const { PencilIcon } = icon.ionicons5
 const { chartEditStore, targetData } = useTargetData()
 const { requestDataPond } = toRefs(chartEditStore.getRequestGlobalConfig)
 const requestShow = ref(false)
+const modelShowRef = ref(false)
 const loading = ref(false)
 const isEdit = ref(false)
 const editData = ref<RequestDataPondItemType>()
@@ -82,6 +82,10 @@ const pondData = computed(() => {
   return data[0]
 })
 
+watch(() => props.modelShow, (newValue) => {
+  modelShowRef.value = newValue
+})
+
 watch(
   () => pondData.value,
   newValue => {

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-modal class="go-chart-data-request" v-model:show="modelShow" :mask-closable="false" :closeOnEsc="false">
+  <n-modal class="go-chart-data-request" v-model:show="modelShowRef" :mask-closable="false" :closeOnEsc="false">
     <n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 1000px; height: 800px">
       <template #header></template>
       <template #header-extra> </template>
@@ -29,7 +29,7 @@
 </template>
 
 <script script lang="ts" setup>
-import { toRefs, PropType } from 'vue'
+import { ref, toRefs, PropType, watch } from 'vue'
 import { RequestContentTypeEnum } from '@/enums/httpEnum'
 import { useTargetData } from '../../../hooks/useTargetData.hook'
 import { RequestGlobalConfig } from './components/RequestGlobalConfig'
@@ -50,11 +50,22 @@ const { dataSyncUpdate } = useSync()
 // 解构基础配置
 const { chartConfig } = toRefs(props.targetData as CreateComponentType)
 const { requestContentType } = toRefs((props.targetData as CreateComponentType).request)
+const modelShowRef = ref(false)
 const requestContentTypeObj = {
   [RequestContentTypeEnum.DEFAULT]: '普通请求',
   [RequestContentTypeEnum.SQL]: 'SQL 请求'
 }
 
+watch(
+  () => props.modelShow,
+  newValue => {
+    modelShowRef.value = newValue
+  },
+  {
+    immediate: true
+  }
+)
+
 const closeHandle = () => {
   emit('update:modelShow', false)
 }

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/pondIndex.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-modal class="go-chart-data-request" v-model:show="modelShow" :mask-closable="false" :closeOnEsc="false">
+  <n-modal class="go-chart-data-request" v-model:show="modelShowRef" :mask-closable="false" :closeOnEsc="false">
     <n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 1000px; height: 800px">
       <template #header></template>
       <template #header-extra> </template>
@@ -42,7 +42,7 @@
 </template>
 
 <script script lang="ts" setup>
-import { PropType, ref, watchEffect } from 'vue'
+import { PropType, ref, watch } from 'vue'
 import { RequestContentTypeEnum } from '@/enums/httpEnum'
 import { useTargetData } from '../../../hooks/useTargetData.hook'
 import { RequestGlobalConfig } from './components/RequestGlobalConfig'
@@ -60,6 +60,12 @@ const emit = defineEmits(['update:modelShow', 'editSaveHandle'])
 const { dataSyncUpdate } = useSync()
 const pondName = ref()
 const inputInstRef = ref()
+const modelShowRef = ref(false)
+
+watch(() => props.modelShow, (newValue) => {
+  modelShowRef.value = newValue
+})
+
 
 const closeHandle = () => {
   emit('update:modelShow', false)

src/views/chart/ContentConfigurations/components/ChartData/hooks/useFile.hooks.ts

@@ -1,7 +1,7 @@
 import { ref, toRef, nextTick } from 'vue'
 import { UploadCustomRequestOptions } from 'naive-ui'
 import { FileTypeEnum } from '@/enums/fileTypeEnum'
-import { readFile, downloadTextFile } from '@/utils'
+import { readFile, downloadTextFile, JSONStringify, JSONParse } from '@/utils'
 
 export const useFile = (targetData: any) => {
   const uploadFileListRef = ref()
@@ -23,7 +23,7 @@ export const useFile = (targetData: any) => {
     nextTick(() => {
       if (file.file) {
         readFile(file.file).then((fileData: any) => {
-          targetData.value.option.dataset = JSON.parse(fileData)
+          targetData.value.option.dataset = JSONParse(fileData)
         })
       } else {
         window['$message'].error('导入数据失败，请稍后重试或联系管理员！')
@@ -35,7 +35,7 @@ export const useFile = (targetData: any) => {
   const download = () => {
     try {
       window['$message'].success('下载中，请耐心等待...')
-      downloadTextFile(JSON.stringify(targetData.value.option.dataset), undefined, 'json')
+      downloadTextFile(JSONStringify(targetData.value.option.dataset), undefined, 'json')
     } catch (error) {
       window['$message'].error('下载失败，数据错误！')
     }

src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventAdvancedHandle/index.vue

@@ -164,7 +164,8 @@ import { useTargetData } from '../../../hooks/useTargetData.hook'
 import { templateList } from './importTemplate'
 import { npmPkgs } from '@/hooks'
 import { icon } from '@/plugins'
-import { CreateComponentType, EventLife } from '@/packages/index.d'
+import { CreateComponentType } from '@/packages/index.d'
+import { EventLife } from '@/enums/eventEnum'
 
 const { targetData, chartEditStore } = useTargetData()
 const { DocumentTextIcon, ChevronDownIcon, PencilIcon } = icon.ionicons5

src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventBaseHandle/index.vue

@@ -127,7 +127,7 @@
 import { ref, computed, watch, toRefs, toRaw } from 'vue'
 import { MonacoEditor } from '@/components/Pages/MonacoEditor'
 import { useTargetData } from '../../../hooks/useTargetData.hook'
-import { CreateComponentType, BaseEvent } from '@/packages/index.d'
+import { BaseEvent } from '@/enums/eventEnum'
 import { icon } from '@/plugins'
 
 const { targetData, chartEditStore } = useTargetData()

src/views/chart/ContentEdit/components/EditBottom/index.vue

@@ -172,7 +172,7 @@ $max-width: 670px;
     .scale-slider {
       position: relative;
       top: -4px;
-      width: 200px;
+      width: 100px;
     }
   }
 }

src/views/chart/ContentEdit/components/EditRange/index.vue

@@ -55,6 +55,8 @@ const rangeModelStyle = computed(() => {
   position: relative;
   transform-origin: left top;
   background-size: cover;
+  border-radius: 20px;
+  overflow: hidden;
   @include fetch-border-color('hover-border-color');
   @include fetch-bg-color('background-color2');
   @include go(edit-range-model) {

src/views/chart/ContentEdit/components/EditRule/index.vue

@@ -1,49 +1,166 @@
 <template>
-  <sketch-rule
-    v-if="configShow"
-    :thick="thick"
-    :scale="scale"
-    :width="canvasBox().width"
-    :height="canvasBox().height"
-    :startX="startX"
-    :startY="startY"
-    :lines="lines"
-  ></sketch-rule>
+  <div class="go-sketch-rule">
+    <sketch-rule
+      v-if="sketchRuleReDraw"
+      :thick="thick"
+      :scale="scale"
+      :width="canvasBox().width"
+      :height="canvasBox().height"
+      :startX="startX"
+      :startY="startY"
+      :lines="lines"
+      :palette="paletteStyle"
+    >
+    </sketch-rule>
+    <div ref="$app" class="edit-screens" @scroll="handleScroll">
+      <div ref="$container" class="edit-screen-container" :style="{ width: width * 2 + 'px' }">
+        <div
+          ref="refSketchRuleBox"
+          class="canvas"
+          @mousedown="dragCanvas"
+          :style="{ marginLeft: '-' + (canvasBox().width / 2 - 25) + 'px' }"
+        >
+          <div :style="{ pointerEvents: isPressSpace ? 'none' : 'auto' }">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 修复右下角白点用的 -->
+    <div v-if="designStore.getDarkTheme" class="fix-edit-screens-block"></div>
+  </div>
 </template>
-
 <script setup lang="ts">
-import { ref, toRefs, computed, watch, nextTick, onBeforeUnmount } from 'vue'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { ref, reactive, onMounted, toRefs, watch, onUnmounted, computed } from 'vue'
+import { listen } from 'dom-helpers'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
+import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
+import throttle from 'lodash/throttle'
 
 const chartEditStore = useChartEditStore()
 const chartLayoutStore = useChartLayoutStore()
 const designStore = useDesignStore()
 
-const { width, height } = toRefs(chartEditStore.getEditCanvasConfig)
-const { scale, lockScale } = toRefs(chartEditStore.getEditCanvas)
-const { getLayers, getCharts, getDetails } = toRefs(chartLayoutStore)
-
-const configShow = ref(true)
-
-// x轴标尺开始的坐标数值
-const startX = -10
-// y轴标尺开始的坐标数值
-const startY = -10
-// 标尺的厚度
 const thick = 20
-// 初始化水平标尺上的参考线
-const lines = {
-  h: [],
-  v: []
+let prevMoveXValue = [0, 0]
+let prevMoveYValue = [0, 0]
+
+const $app = ref()
+const sketchRuleReDraw = ref(true)
+const refSketchRuleBox = ref()
+const $container = ref()
+const isPressSpace = ref(false)
+const cursorStyle = ref('auto')
+const { width, height } = toRefs(chartEditStore.getEditCanvasConfig)
+const startX = ref(0)
+const startY = ref(0)
+const lines = reactive({ h: [], v: [] })
+
+const scale = computed(() => {
+  return chartEditStore.getEditCanvas.scale
+})
+
+// 滚动条拖动的高度
+const containerWidth = computed(() => {
+  return `${height.value * 2}px`
+})
+
+// 主题
+const paletteStyle = computed(() => {
+  const isDarkTheme = designStore.getDarkTheme
+  return isDarkTheme
+    ? {
+        bgColor: '#18181c',
+        longfgColor: '#4d4d4d',
+        shortfgColor: '#4d4d4d',
+        fontColor: '#4d4d4d',
+        shadowColor: '#18181c',
+        borderColor: '#18181c',
+        cornerActiveColor: '#18181c'
+      }
+    : {}
+})
+
+// 颜色
+const themeColor = computed(() => {
+  return designStore.getAppTheme
+})
+
+// 处理鼠标拖动
+const handleWheel = (e: any) => {
+  if (e.ctrlKey || e.metaKey) {
+    e.preventDefault()
+    let resScale = scale.value
+    // 放大(200%)
+    if (e.wheelDelta >= 0 && scale.value < 2) {
+      resScale = scale.value + 0.05
+      chartEditStore.setScale(resScale)
+      return
+    }
+    // 缩小(10%)
+    if (e.wheelDelta < 0 && scale.value > 0.1) {
+      resScale = scale.value - 0.05
+      chartEditStore.setScale(resScale)
+    }
+  }
 }
 
+// 滚动条处理
+const handleScroll = () => {
+  if (!$app.value) return
+  const screensRect = $app.value.getBoundingClientRect()
+  const canvasRect = refSketchRuleBox.value.getBoundingClientRect()
+  // 标尺开始的刻度
+  startX.value = (screensRect.left + thick - canvasRect.left) / scale.value
+  startY.value = (screensRect.top + thick - canvasRect.top) / scale.value
+}
+
+// 拖拽处理
+const dragCanvas = (e: any) => {
+  e.preventDefault()
+  e.stopPropagation()
+
+  if (e.which == 2) isPressSpace.value = true
+  else if (!window.$KeyboardActive?.space) return
+  // @ts-ignore
+  document.activeElement?.blur()
+
+  const startX = e.pageX
+  const startY = e.pageY
+
+  const listenMousemove = listen(window, 'mousemove', (e: any) => {
+    const nx = e.pageX - startX
+    const ny = e.pageY - startY
+
+    const [prevMoveX1, prevMoveX2] = prevMoveXValue
+    const [prevMoveY1, prevMoveY2] = prevMoveYValue
+
+    prevMoveXValue = [prevMoveX2, nx]
+    prevMoveYValue = [prevMoveY2, ny]
+
+    $app.value.scrollLeft -=
+      prevMoveX2 > prevMoveX1 ? Math.abs(prevMoveX2 - prevMoveX1) : -Math.abs(prevMoveX2 - prevMoveX1)
+    $app.value.scrollTop -=
+      prevMoveY2 > prevMoveY1 ? Math.abs(prevMoveY2 - prevMoveY1) : -Math.abs(prevMoveY2 - prevMoveY1)
+  })
+
+  const listenMouseup = listen(window, 'mouseup', () => {
+    listenMousemove()
+    listenMouseup()
+    prevMoveXValue = [0, 0]
+    prevMoveYValue = [0, 0]
+    isPressSpace.value = false
+  })
+}
+
+// 计算画布大小
 const canvasBox = () => {
   const layoutDom = document.getElementById('go-chart-edit-layout')
   if (layoutDom) {
     return {
-      height: layoutDom.clientHeight - 40,
+      height: layoutDom.clientHeight - 25,
       width: layoutDom.clientWidth
     }
   }
@@ -53,83 +170,109 @@ const canvasBox = () => {
   }
 }
 
-// 颜色
-const themeColor = computed(() => {
-  return designStore.getAppTheme
-})
-
-// 处理标尺重制大小
-const ruleChangeHandle = () => {
-  configShow.value = false
+// 重绘标尺
+const reDraw = () => {
+  sketchRuleReDraw.value = false
   setTimeout(() => {
-    configShow.value = true
-  })
+    sketchRuleReDraw.value = true
+  }, 10)
 }
 
-const ruleChangeHandleTimeOut = () => {
-  if (lockScale.value) {
-    setTimeout(() => {
-      ruleChangeHandle()
-    }, 500)
+// 滚动居中
+const canvasPosCenter = () => {
+  const { width: containerWidth, height: containerHeight } = $container.value.getBoundingClientRect()
+  const { width, height } = canvasBox()
+
+  $app.value.scrollLeft = containerWidth / 2 - width / 2
+  $app.value.scrollTop = containerHeight / 2 - height / 2
+}
+
+// 处理主题变化
+watch(
+  () => designStore.getDarkTheme,
+  () => {
+    reDraw()
   }
-}
+)
 
+// // 处理标尺重制大小
 watch(
   () => scale.value,
-  () => ruleChangeHandle()
+  (newValue, oldValue) => {
+    if (oldValue !== newValue && chartLayoutStore.getRePositionCanvas) {
+      chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.RE_POSITION_CANVAS, false)
+      handleScroll()
+      setTimeout(() => {
+        canvasPosCenter()
+        reDraw()
+      }, 400)
+    } else {
+      throttle(reDraw, 20)
+    }
+  }
 )
 
+// 处理鼠标样式
 watch(
-  () => getLayers.value,
-  () => ruleChangeHandleTimeOut()
+  () => isPressSpace.value,
+  newValue => {
+    cursorStyle.value = newValue ? 'grab' : 'auto'
+  }
 )
 
-watch(
-  () => getCharts.value,
-  () => ruleChangeHandleTimeOut()
-)
+onMounted(() => {
+  if ($app.value) {
+    $app.value.addEventListener('wheel', handleWheel, { passive: false })
+    canvasPosCenter()
+  }
+})
 
-watch(
-  () => getDetails.value,
-  () => ruleChangeHandleTimeOut()
-)
+onUnmounted(() => {
+  if ($app.value) {
+    $app.value.removeEventListener('wheel', handleWheel)
+  }
+})
 
+window.onKeySpacePressHold = (isHold: boolean) => {
+  isPressSpace.value = isHold
+}
 </script>
 
 <style>
 /* 使用 SCSS 会报错，直接使用最基础的 CSS 进行修改，
 此库有计划 Vue3 版本，但是开发的时候还没发布 */
-
 #mb-ruler {
   top: 0;
   left: 0;
 }
-/* 适配底部的工具栏不遮盖 */
-#mb-ruler .v-container {
-  height: calc(100% - 65px) !important;
-}
+
 /* 横线 */
 #mb-ruler .v-container .lines .line {
   /* 最大缩放 200% */
   width: 200vw !important;
   border-top: 1px dashed v-bind('themeColor') !important;
 }
+
 #mb-ruler .v-container .indicator {
   border-bottom: 1px dashed v-bind('themeColor') !important;
 }
+
 /* 竖线 */
 #mb-ruler .h-container .lines .line {
   /* 最大缩放 200% */
   height: 200vh !important;
   border-left: 1px dashed v-bind('themeColor') !important;
 }
+
 #mb-ruler .h-container .indicator {
   border-left: 1px dashed v-bind('themeColor') !important;
 }
+
 /* 坐标数值背景颜色 */
 #mb-ruler .indicator .value {
   background-color: rgba(0, 0, 0, 0);
 }
+
 /* 删除按钮 */
 #mb-ruler .line .del {
   padding: 0;
@@ -142,3 +285,72 @@ watch(
   border-width: 0 !important;
 }
 </style>
+
+<style lang="scss" scoped>
+@include go('sketch-rule') {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+
+  .edit-screens {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    user-select: none;
+    padding-bottom: 0px;
+
+    /* firefox */
+    scrollbar-color: rgba(144, 146, 152, 0.3) transparent;
+    scrollbar-width: thin;
+
+    /* chrome */
+    &::-webkit-scrollbar,
+    &::-webkit-scrollbar-track-piece {
+      background-color: transparent;
+    }
+
+    &::-webkit-scrollbar {
+      width: 7px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 5px;
+      background-color: rgba(144, 146, 152, 0.3);
+    }
+  }
+
+  .fix-edit-screens-block {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 10px;
+    height: 10px;
+    background-color: $--color-dark-bg-1;
+  }
+
+  .edit-screen-container {
+    position: absolute;
+    height: v-bind('containerWidth');
+    top: 0;
+    left: 0;
+  }
+
+  .canvas {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform-origin: 50% 0;
+    transform: translateY(-50%);
+
+    &:hover {
+      cursor: v-bind('cursorStyle');
+    }
+
+    &:active {
+      cursor: crosshair;
+    }
+  }
+}
+</style>

src/views/chart/ContentEdit/components/EditSelect/index.vue

@@ -93,7 +93,7 @@ watch(
     position: absolute;
     width: 100%;
     height: 100%;
-    border-radius: 10px;
+    border-radius: 5px;
     overflow: hidden;
   }
   .select-border {
@@ -107,7 +107,7 @@ watch(
   .select-background {
     top: 2px;
     left: 2px;
-    opacity: 0.03;
+    opacity: 0.2;
     background-color: v-bind('themeColor');
   }
 }

src/views/chart/ContentEdit/components/EditShortcutKey/ShortcutKeyModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-modal v-model:show="modelShow" :mask-closable="true" @afterLeave="closeHandle">
+  <n-modal v-model:show="modelShowRef" :mask-closable="true" @afterLeave="closeHandle">
     <n-table class="model-content" :bordered="false" :single-line="false">
       <thead>
         <tr>
@@ -19,7 +19,8 @@
         <tr v-for="(item, index) in shortcutKeyOptions" :key="index">
           <td>{{ item.label }}</td>
           <td>{{ item.win }}</td>
-          <td>
+          <td v-if="item.macSource">{{ item.mac }}</td>
+          <td v-else>
             <n-gradient-text :size="22">{{ item.mac.substr(0, 1) }}</n-gradient-text>
             + {{ item.mac.substr(3) }}
           </td>
@@ -30,39 +31,37 @@
 </template>
 
 <script setup lang="ts">
+import { watch, ref } from 'vue'
 import { icon } from '@/plugins'
 import { WinKeyboard, MacKeyboard } from '@/enums/editPageEnum'
 
 const { CloseIcon } = icon.ionicons5
+const modelShowRef = ref(false)
 
 const emit = defineEmits(['update:modelShow'])
 
-defineProps({
+const props = defineProps({
   modelShow: Boolean
 })
 
+
+watch(() => props.modelShow, (newValue) => {
+  modelShowRef.value = newValue
+})
+
 // 快捷键
 const shortcutKeyOptions = [
   {
-    label: '向上移动',
-    win: `${WinKeyboard.CTRL.toUpperCase()} + ↑ `,
+    label: '拖拽画布',
+    win: `${WinKeyboard.SPACE.toUpperCase()} + 🖱️ `,
+    mac: `${MacKeyboard.SPACE.toUpperCase()} + 🖱️ `,
+    macSource: true
+  },
+  {
+    label: '向 上/右/下/左 移动',
+    win: `${WinKeyboard.CTRL.toUpperCase()} + ↑ 或 → 或 ↓ 或 ←`,
     mac: `${MacKeyboard.CTRL.toUpperCase()} + ↑ `
   },
-  {
-    label: '向右移动',
-    win: `${WinKeyboard.CTRL.toUpperCase()} + → `,
-    mac: `${MacKeyboard.CTRL.toUpperCase()} + → `
-  },
-  {
-    label: '向下移动',
-    win: `${WinKeyboard.CTRL.toUpperCase()} + ↓ `,
-    mac: `${MacKeyboard.CTRL.toUpperCase()} + ↓ `
-  },
-  {
-    label: '向左移动',
-    win: `${WinKeyboard.CTRL.toUpperCase()} + ← `,
-    mac: `${MacKeyboard.CTRL.toUpperCase()} + ← `
-  },
   {
     label: '锁定',
     win: `${WinKeyboard.CTRL.toUpperCase()} + L `,
@@ -134,6 +133,7 @@ const shortcutKeyOptions = [
     mac: `${MacKeyboard.CTRL.toUpperCase()} + ${WinKeyboard.SHIFT.toUpperCase()} + G `
   }
 ]
+
 const closeHandle = () => {
   emit('update:modelShow', false)
 }

src/views/chart/ContentEdit/components/EditTools/hooks/useFile.hooks.ts

@@ -1,7 +1,7 @@
 import { ref, nextTick } from 'vue'
 import { UploadCustomRequestOptions } from 'naive-ui'
 import { FileTypeEnum } from '@/enums/fileTypeEnum'
-import { readFile, goDialog } from '@/utils'
+import { readFile, goDialog, JSONParse } from '@/utils'
 import { useSync } from '@/views/chart/hooks/useSync.hook'
 
 export const useFile = () => {
@@ -33,7 +33,7 @@ export const useFile = () => {
             // 新增
             onPositiveCallback: async () => {
               try {
-                fileData = JSON.parse(fileData)
+                fileData = JSONParse(fileData)
                 await updateComponent(fileData, false, true)
                 window['$message'].success('导入成功！')
               } catch (error) {
@@ -44,7 +44,7 @@ export const useFile = () => {
             // 覆盖
             onNegativeCallback: async () => {
               try {
-                fileData = JSON.parse(fileData)
+                fileData = JSONParse(fileData)
                 await updateComponent(fileData, true, true)
                 window['$message'].success('导入成功！')
               } catch (error) {

src/views/chart/ContentEdit/components/EditTools/index.vue

@@ -172,18 +172,18 @@ const updateToSession = (id: string) => {
 
 // 配置列表
 const btnList: BtnListType[] = [
-  {
-    key: 'export',
-    type: TypeEnum.BUTTON,
-    name: '导出',
-    icon: ShareIcon,
-    handle: exportHandle
-  },
   {
     key: 'import',
     type: TypeEnum.IMPORTUPLOAD,
     name: '导入',
-    icon: DownloadIcon
+    icon: ShareIcon
+  },
+  {
+    key: 'export',
+    type: TypeEnum.BUTTON,
+    name: '导出',
+    icon: DownloadIcon,
+    handle: exportHandle
   },
   {
     key: 'edit',