diff --git a/.workflow/branch-pipeline.yml b/.workflow/branch-pipeline.yml
new file mode 100644
index 00000000..1128d8a4
--- /dev/null
+++ b/.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:
+        - .*
diff --git a/.workflow/master-pipeline.yml b/.workflow/master-pipeline.yml
new file mode 100644
index 00000000..8faf2bcc
--- /dev/null
+++ b/.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
diff --git a/.workflow/pr-pipeline.yml b/.workflow/pr-pipeline.yml
new file mode 100644
index 00000000..1a05dd09
--- /dev/null
+++ b/.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
diff --git a/package.json b/package.json
index bc0f5a13..046ab291 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,9 @@
 {
   "name": "go-view",
   "version": "1.1.11",
+  "engines": {
+    "node": ">=16.14 <18.0.0"
+  },
   "scripts": {
     "dev": "vite --host",
     "build": "vue-tsc --noEmit && vite build",
@@ -30,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.9",
+    "vue-i18n": "^9.2.2",
     "vue-router": "4.0.12",
     "vue3-lazyload": "^0.2.5-beta",
     "vue3-sketch-ruler": "^1.3.3",
@@ -79,4 +82,4 @@
     "vue-echarts": "^6.0.2",
     "vue-tsc": "^0.28.10"
   }
-}
\ No newline at end of file
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7a0f90e3..b57b0e70 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -43,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
@@ -60,7 +60,7 @@ specifiers:
   vue: ^3.2.31
   vue-demi: ^0.13.1
   vue-echarts: ^6.0.2
-  vue-i18n: 9.1.9
+  vue-i18n: ^9.2.2
   vue-router: 4.0.12
   vue-tsc: ^0.28.10
   vue3-lazyload: ^0.2.5-beta
@@ -87,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.9_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
@@ -680,60 +680,42 @@ packages:
     resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
     dev: true
 
-  /@intlify/core-base/9.1.9:
-    resolution: {integrity: sha512-x5T0p/Ja0S8hs5xs+ImKyYckVkL4CzcEXykVYYV6rcbXxJTe2o58IquSqX9bdncVKbRZP7GlBU1EcRaQEEJ+vw==}
-    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.9
-      '@intlify/message-compiler': 9.1.9
-      '@intlify/message-resolver': 9.1.9
-      '@intlify/runtime': 9.1.9
-      '@intlify/shared': 9.1.9
-      '@intlify/vue-devtools': 9.1.9
+      '@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.9:
-    resolution: {integrity: sha512-oKSMKjttG3Ut/1UGEZjSdghuP3fwA15zpDPcjkf/1FjlOIm6uIBGMNS5jXzsZy593u+P/YcnrZD6cD3IVFz9vQ==}
-    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.9
+      '@intlify/shared': 9.2.2
     dev: false
 
-  /@intlify/message-compiler/9.1.9:
-    resolution: {integrity: sha512-6YgCMF46Xd0IH2hMRLCssZI3gFG4aywidoWQ3QP4RGYQXQYYfFC54DxhSgfIPpVoPLQ+4AD29eoYmhiHZ+qLFQ==}
-    engines: {node: '>= 10'}
+  /@intlify/message-compiler/9.2.2:
+    resolution: {integrity: sha512-IUrQW7byAKN2fMBe8z6sK6riG1pue95e5jfokn8hA5Q3Bqy4MBJ5lJAofUsawQJYHeoPJ7svMDyBaVJ4d0GTtA==}
+    engines: {node: '>= 14'}
     dependencies:
-      '@intlify/message-resolver': 9.1.9
-      '@intlify/shared': 9.1.9
+      '@intlify/shared': 9.2.2
       source-map: 0.6.1
     dev: false
 
-  /@intlify/message-resolver/9.1.9:
-    resolution: {integrity: sha512-Lx/DBpigeK0sz2BBbzv5mu9/dAlt98HxwbG7xLawC3O2xMF9MNWU5FtOziwYG6TDIjNq0O/3ZbOJAxwITIWXEA==}
-    engines: {node: '>= 10'}
+  /@intlify/shared/9.2.2:
+    resolution: {integrity: sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==}
+    engines: {node: '>= 14'}
     dev: false
 
-  /@intlify/runtime/9.1.9:
-    resolution: {integrity: sha512-XgPw8+UlHCiie3fI41HPVa/VDJb3/aSH7bLhY1hJvlvNV713PFtb4p4Jo+rlE0gAoMsMCGcsiT982fImolSltg==}
-    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.9
-      '@intlify/message-resolver': 9.1.9
-      '@intlify/shared': 9.1.9
-    dev: false
-
-  /@intlify/shared/9.1.9:
-    resolution: {integrity: sha512-xKGM1d0EAxdDFCWedcYXOm6V5Pfw/TMudd6/qCdEb4tv0hk9EKeg7lwQF1azE0dP2phvx0yXxrt7UQK+IZjNdw==}
-    engines: {node: '>= 10'}
-    dev: false
-
-  /@intlify/vue-devtools/9.1.9:
-    resolution: {integrity: sha512-YPehH9uL4vZcGXky4Ev5qQIITnHKIvsD2GKGXgqf+05osMUI6WSEQHaN9USRa318Rs8RyyPCiDfmA0hRu3k7og==}
-    engines: {node: '>= 10'}
-    dependencies:
-      '@intlify/message-resolver': 9.1.9
-      '@intlify/runtime': 9.1.9
-      '@intlify/shared': 9.1.9
+      '@intlify/core-base': 9.2.2
+      '@intlify/shared': 9.2.2
     dev: false
 
   /@jridgewell/gen-mapping/0.1.1:
@@ -898,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
@@ -1228,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:
@@ -3846,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
@@ -5405,16 +5396,16 @@ packages:
       - supports-color
     dev: true
 
-  /vue-i18n/9.1.9_vue@3.2.37:
-    resolution: {integrity: sha512-JeRdNVxS2OGp1E+pye5XB6+M6BBkHwAv9C80Q7+kzoMdUDGRna06tjC0vCB/jDX9aWrl5swxOMFcyAr7or8XTA==}
-    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.9
-      '@intlify/shared': 9.1.9
-      '@intlify/vue-devtools': 9.1.9
-      '@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
 
diff --git a/src/api/mock/test.mock.ts b/src/api/mock/test.mock.ts
index a58cac53..f84b8cc3 100644
--- a/src/api/mock/test.mock.ts
+++ b/src/api/mock/test.mock.ts
@@ -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 },
       ]
     }
   },
diff --git a/src/components/GoLangSelect/index.vue b/src/components/GoLangSelect/index.vue
index 7989276a..0cf4a883 100644
--- a/src/components/GoLangSelect/index.vue
+++ b/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>
diff --git a/src/components/GoSystemInfo/index.vue b/src/components/GoSystemInfo/index.vue
index d38c1e03..f190da7e 100644
--- a/src/components/GoSystemInfo/index.vue
+++ b/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 = () => {
diff --git a/src/components/GoSystemSet/index.vue b/src/components/GoSystemSet/index.vue
index db43cf63..45129a88 100644
--- a/src/components/GoSystemSet/index.vue
+++ b/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 = () => {
diff --git a/src/enums/editPageEnum.ts b/src/enums/editPageEnum.ts
index 4b26802d..07d51e70 100644
--- a/src/enums/editPageEnum.ts
+++ b/src/enums/editPageEnum.ts
@@ -79,5 +79,6 @@ export enum MacKeyboard {
   ALT = '⌥',
   CTRL_SOURCE_KEY = '⌘',
   SHIFT_SOURCE_KEY = '⇧',
-  ALT_SOURCE_KEY = '⌥'
+  ALT_SOURCE_KEY = '⌥',
+  SPACE = 'Space'
 }
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
index 06576c37..b6d851c0 100644
--- a/src/i18n/index.ts
+++ b/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: {
diff --git a/src/packages/components/Charts/Bars/BarCommon/index.ts b/src/packages/components/Charts/Bars/BarCommon/index.ts
index a4247970..f142acf9 100644
--- a/src/packages/components/Charts/Bars/BarCommon/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Charts/Bars/BarCrossrange/index.ts b/src/packages/components/Charts/Bars/BarCrossrange/index.ts
index a85f9fe9..8888851e 100644
--- a/src/packages/components/Charts/Bars/BarCrossrange/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Charts/Bars/CapsuleChart/index.ts b/src/packages/components/Charts/Bars/CapsuleChart/index.ts
index a0fc6291..69d75962 100644
--- a/src/packages/components/Charts/Bars/CapsuleChart/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Charts/Bars/CapsuleChart/index.vue b/src/packages/components/Charts/Bars/CapsuleChart/index.vue
index 87971d01..804ae0dc 100644
--- a/src/packages/components/Charts/Bars/CapsuleChart/index.vue
+++ b/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>
 
diff --git a/src/packages/components/Charts/Lines/LineCommon/index.ts b/src/packages/components/Charts/Lines/LineCommon/index.ts
index 1897682e..bdd99189 100644
--- a/src/packages/components/Charts/Lines/LineCommon/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Charts/Lines/LineGradientSingle/index.ts b/src/packages/components/Charts/Lines/LineGradientSingle/index.ts
index d2ff3e84..69f66502 100644
--- a/src/packages/components/Charts/Lines/LineGradientSingle/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Charts/Lines/LineGradients/index.ts b/src/packages/components/Charts/Lines/LineGradients/index.ts
index aa4273d7..1145dcb0 100644
--- a/src/packages/components/Charts/Lines/LineGradients/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Charts/Lines/LineLinearSingle/index.ts b/src/packages/components/Charts/Lines/LineLinearSingle/index.ts
index 1b774bde..d96ecdaa 100644
--- a/src/packages/components/Charts/Lines/LineLinearSingle/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Charts/Maps/MapAmap/index.ts b/src/packages/components/Charts/Maps/MapAmap/index.ts
index 02b3998b..27e9579f 100644
--- a/src/packages/components/Charts/Maps/MapAmap/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Charts/Maps/MapBase/index.ts b/src/packages/components/Charts/Maps/MapBase/index.ts
index 5567697e..4010cf38 100644
--- a/src/packages/components/Charts/Maps/MapBase/index.ts
+++ b/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
-  }
\ No newline at end of file
+    image: 'map.png'
+}
\ No newline at end of file
diff --git a/src/packages/components/Charts/Mores/Funnel/index.ts b/src/packages/components/Charts/Mores/Funnel/index.ts
index da99c3fb..d553edad 100644
--- a/src/packages/components/Charts/Mores/Funnel/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Charts/Mores/Heatmap/index.ts b/src/packages/components/Charts/Mores/Heatmap/index.ts
index 8953153e..d8c833b2 100644
--- a/src/packages/components/Charts/Mores/Heatmap/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Charts/Mores/Process/index.ts b/src/packages/components/Charts/Mores/Process/index.ts
index 093aa03a..c4591ea4 100644
--- a/src/packages/components/Charts/Mores/Process/index.ts
+++ b/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'
 }
\ No newline at end of file
diff --git a/src/packages/components/Charts/Mores/Radar/index.ts b/src/packages/components/Charts/Mores/Radar/index.ts
index 35a95ece..d7b9f2f9 100644
--- a/src/packages/components/Charts/Mores/Radar/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Charts/Mores/TreeMap/index.ts b/src/packages/components/Charts/Mores/TreeMap/index.ts
index 5ccc28c5..614b58d4 100644
--- a/src/packages/components/Charts/Mores/TreeMap/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Charts/Mores/WaterPolo/index.ts b/src/packages/components/Charts/Mores/WaterPolo/index.ts
index 2d1500d2..0fd42de7 100644
--- a/src/packages/components/Charts/Mores/WaterPolo/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Charts/Pies/PieCircle/index.ts b/src/packages/components/Charts/Pies/PieCircle/index.ts
index 78c8bed7..079bf607 100644
--- a/src/packages/components/Charts/Pies/PieCircle/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Charts/Pies/PieCommon/index.ts b/src/packages/components/Charts/Pies/PieCommon/index.ts
index d8394c08..85d9bda3 100644
--- a/src/packages/components/Charts/Pies/PieCommon/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Charts/Scatters/ScatterCommon/index.ts b/src/packages/components/Charts/Scatters/ScatterCommon/index.ts
index 0c1d695f..08a9f043 100644
--- a/src/packages/components/Charts/Scatters/ScatterCommon/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Charts/Scatters/ScatterLogarithmicRegression/index.ts b/src/packages/components/Charts/Scatters/ScatterLogarithmicRegression/index.ts
index b9674705..3fe75d8e 100644
--- a/src/packages/components/Charts/Scatters/ScatterLogarithmicRegression/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Decorates/Borders/Border01/index.ts b/src/packages/components/Decorates/Borders/Border01/index.ts
index 396caf56..4cc33f6a 100644
--- a/src/packages/components/Decorates/Borders/Border01/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Decorates/Borders/Border02/index.ts b/src/packages/components/Decorates/Borders/Border02/index.ts
index b5f72afe..29d4ecde 100644
--- a/src/packages/components/Decorates/Borders/Border02/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Decorates/Borders/Border03/index.ts b/src/packages/components/Decorates/Borders/Border03/index.ts
index 6574e3a7..0f2759a8 100644
--- a/src/packages/components/Decorates/Borders/Border03/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Decorates/Borders/Border04/index.ts b/src/packages/components/Decorates/Borders/Border04/index.ts
index 2d34e3c5..42b351c4 100644
--- a/src/packages/components/Decorates/Borders/Border04/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Decorates/Borders/Border05/index.ts b/src/packages/components/Decorates/Borders/Border05/index.ts
index 7cdfb822..b9c71cd2 100644
--- a/src/packages/components/Decorates/Borders/Border05/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Decorates/Borders/Border06/index.ts b/src/packages/components/Decorates/Borders/Border06/index.ts
index cb73818e..f32e3be4 100644
--- a/src/packages/components/Decorates/Borders/Border06/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Decorates/Borders/Border07/index.ts b/src/packages/components/Decorates/Borders/Border07/index.ts
index c9c56853..4d751913 100644
--- a/src/packages/components/Decorates/Borders/Border07/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Decorates/Borders/Border08/index.ts b/src/packages/components/Decorates/Borders/Border08/index.ts
index 9d52aee1..7096ea1e 100644
--- a/src/packages/components/Decorates/Borders/Border08/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Decorates/Borders/Border09/index.ts b/src/packages/components/Decorates/Borders/Border09/index.ts
index 0733ba92..45078b02 100644
--- a/src/packages/components/Decorates/Borders/Border09/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Decorates/Borders/Border10/index.ts b/src/packages/components/Decorates/Borders/Border10/index.ts
index 02f96a73..e059257c 100644
--- a/src/packages/components/Decorates/Borders/Border10/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Decorates/Borders/Border11/index.ts b/src/packages/components/Decorates/Borders/Border11/index.ts
index eb75beb6..12bc1245 100644
--- a/src/packages/components/Decorates/Borders/Border11/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Decorates/Borders/Border12/index.ts b/src/packages/components/Decorates/Borders/Border12/index.ts
index 9a9686e0..ecd82162 100644
--- a/src/packages/components/Decorates/Borders/Border12/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Decorates/Borders/Border13/index.ts b/src/packages/components/Decorates/Borders/Border13/index.ts
index 7f756116..05144893 100644
--- a/src/packages/components/Decorates/Borders/Border13/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Decorates/Decorates/Decorates01/index.ts b/src/packages/components/Decorates/Decorates/Decorates01/index.ts
index 85795892..8e9f760c 100644
--- a/src/packages/components/Decorates/Decorates/Decorates01/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Decorates/Decorates/Decorates02/index.ts b/src/packages/components/Decorates/Decorates/Decorates02/index.ts
index 6c4caaca..09e73328 100644
--- a/src/packages/components/Decorates/Decorates/Decorates02/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Decorates/Decorates/Decorates03/index.ts b/src/packages/components/Decorates/Decorates/Decorates03/index.ts
index f7dcf43f..a580504a 100644
--- a/src/packages/components/Decorates/Decorates/Decorates03/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Decorates/Decorates/Decorates04/index.ts b/src/packages/components/Decorates/Decorates/Decorates04/index.ts
index 5c608583..32c4b839 100644
--- a/src/packages/components/Decorates/Decorates/Decorates04/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Decorates/Decorates/Decorates05/index.ts b/src/packages/components/Decorates/Decorates/Decorates05/index.ts
index 9b3396fc..ba1405d4 100644
--- a/src/packages/components/Decorates/Decorates/Decorates05/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Decorates/Decorates/Decorates06/index.ts b/src/packages/components/Decorates/Decorates/Decorates06/index.ts
index 3e3dadaa..6667bfa2 100644
--- a/src/packages/components/Decorates/Decorates/Decorates06/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Decorates/Mores/Clock/index.ts b/src/packages/components/Decorates/Mores/Clock/index.ts
index 7a0ad487..6048dd00 100644
--- a/src/packages/components/Decorates/Mores/Clock/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Decorates/Mores/CountDown/index.ts b/src/packages/components/Decorates/Mores/CountDown/index.ts
index 6755fdda..58648fcd 100644
--- a/src/packages/components/Decorates/Mores/CountDown/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Decorates/Mores/FlipperNumber/index.ts b/src/packages/components/Decorates/Mores/FlipperNumber/index.ts
index b4fce9cd..5928be54 100644
--- a/src/packages/components/Decorates/Mores/FlipperNumber/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Decorates/Mores/Number/index.ts b/src/packages/components/Decorates/Mores/Number/index.ts
index ff9a9469..59726cf6 100644
--- a/src/packages/components/Decorates/Mores/Number/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Decorates/Mores/TimeCommon/index.ts b/src/packages/components/Decorates/Mores/TimeCommon/index.ts
index 0bdd8924..427d25d2 100644
--- a/src/packages/components/Decorates/Mores/TimeCommon/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Decorates/Mores/TimeCommon/index.vue b/src/packages/components/Decorates/Mores/TimeCommon/index.vue
index a8e41763..a2f4d638 100644
--- a/src/packages/components/Decorates/Mores/TimeCommon/index.vue
+++ b/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>
diff --git a/src/packages/components/Decorates/Three/ThreeEarth01/index.ts b/src/packages/components/Decorates/Three/ThreeEarth01/index.ts
index fbaf4b75..1bb29b93 100644
--- a/src/packages/components/Decorates/Three/ThreeEarth01/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Informations/Mores/Iframe/index.ts b/src/packages/components/Informations/Mores/Iframe/index.ts
index d87036cb..9409eaec 100644
--- a/src/packages/components/Informations/Mores/Iframe/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Informations/Mores/Image/index.ts b/src/packages/components/Informations/Mores/Image/index.ts
index ad186f30..3be876db 100644
--- a/src/packages/components/Informations/Mores/Image/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Informations/Mores/Video/index.ts b/src/packages/components/Informations/Mores/Video/index.ts
index c10ced02..769cfc50 100644
--- a/src/packages/components/Informations/Mores/Video/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Informations/Mores/WordCloud/index.ts b/src/packages/components/Informations/Mores/WordCloud/index.ts
index 7eb0c6ed..05949f70 100644
--- a/src/packages/components/Informations/Mores/WordCloud/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Informations/Texts/TextBarrage/index.ts b/src/packages/components/Informations/Texts/TextBarrage/index.ts
index a93cf259..95e5016f 100644
--- a/src/packages/components/Informations/Texts/TextBarrage/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Informations/Texts/TextCommon/index.ts b/src/packages/components/Informations/Texts/TextCommon/index.ts
index ffce3131..7adeea94 100644
--- a/src/packages/components/Informations/Texts/TextCommon/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Informations/Texts/TextGradient/index.ts b/src/packages/components/Informations/Texts/TextGradient/index.ts
index 67bd4951..1ab75ac0 100644
--- a/src/packages/components/Informations/Texts/TextGradient/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Tables/Tables/TableList/index.ts b/src/packages/components/Tables/Tables/TableList/index.ts
index 5d40a2bc..51d502f7 100644
--- a/src/packages/components/Tables/Tables/TableList/index.ts
+++ b/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'
 }
diff --git a/src/packages/components/Tables/Tables/TableScrollBoard/index.ts b/src/packages/components/Tables/Tables/TableScrollBoard/index.ts
index 20130987..5ecc6e66 100644
--- a/src/packages/components/Tables/Tables/TableScrollBoard/index.ts
+++ b/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'
 }
diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts
index fbdfa2f5..f431bf75 100644
--- a/src/packages/index.d.ts
+++ b/src/packages/index.d.ts
@@ -22,7 +22,7 @@ export type ConfigType = {
   categoryName: string
   package: string
   chartFrame?: ChartFrameEnum
-  image: string | (() => Promise<typeof import('*.png')>)
+  image: string
 }
 
 // 数据请求
diff --git a/src/packages/index.ts b/src/packages/index.ts
index 25476aa1..d568afcb 100644
--- a/src/packages/index.ts
+++ b/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,27 @@ 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
-}
\ No newline at end of file
+}
+
+/**
+ * * 获取图片内容
+ * @param {ConfigType} targetData 配置项
+ */
+export const fetchImages = async (targetData: ConfigType) => {
+  // 新数据动态处理
+  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 ''
+}
diff --git a/src/settings/designColorRecommend.json b/src/settings/designColorRecommend.json
index 79420979..51ba9739 100644
--- a/src/settings/designColorRecommend.json
+++ b/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"
   }
 ]
diff --git a/src/store/modules/chartEditStore/chartEditStore.d.ts b/src/store/modules/chartEditStore/chartEditStore.d.ts
index 78927f70..0084f673 100644
--- a/src/store/modules/chartEditStore/chartEditStore.d.ts
+++ b/src/store/modules/chartEditStore/chartEditStore.d.ts
@@ -48,6 +48,7 @@ export type EditCanvasType = {
 
 // 滤镜/背景色/宽高主题等
 export enum EditCanvasConfigEnum {
+  PROJECT_NAME = 'projectName',
   WIDTH = 'width',
   HEIGHT = 'height',
   CHART_THEME_COLOR = 'chartThemeColor',
@@ -78,6 +79,8 @@ export interface EditCanvasConfigType {
   [FilterEnum.SKEW_X]: number
   [FilterEnum.SKEW_Y]: number
   [FilterEnum.BLEND_MODE]: string
+  // 大屏名称
+  [EditCanvasConfigEnum.PROJECT_NAME]?: string
   // 大屏宽度
   [EditCanvasConfigEnum.WIDTH]: number
   // 大屏高度
diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts
index 16a4eda4..81d7a3b5 100644
--- a/src/store/modules/chartEditStore/chartEditStore.ts
+++ b/src/store/modules/chartEditStore/chartEditStore.ts
@@ -75,6 +75,8 @@ export const useChartEditStore = defineStore({
     // -----------------------
     // 画布属性（需存储给后端）
     editCanvasConfig: {
+      // 项目名称
+      projectName: undefined,
       // 默认宽度
       width: 1920,
       // 默认高度
diff --git a/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts b/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts
index b1155ea5..b485dd59 100644
--- a/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts
+++ b/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
 }
diff --git a/src/store/modules/chartLayoutStore/chartLayoutStore.ts b/src/store/modules/chartLayoutStore/chartLayoutStore.ts
index c50bd520..c2b63592 100644
--- a/src/store/modules/chartLayoutStore/chartLayoutStore.ts
+++ b/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
+      })
     }
   }
 })
diff --git a/src/store/modules/langStore/langStore.ts b/src/store/modules/langStore/langStore.ts
index d1795e6c..2b7d2709 100644
--- a/src/store/modules/langStore/langStore.ts
+++ b/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) {
diff --git a/src/styles/common/mixins/mixins.scss b/src/styles/common/mixins/mixins.scss
index 39374ff1..ec6f2ccd 100644
--- a/src/styles/common/mixins/mixins.scss
+++ b/src/styles/common/mixins/mixins.scss
@@ -17,7 +17,7 @@
 }
 
 @mixin deep() {
-  :deep {
+  :deep() {
     @content;
   }
 }
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 51b296ae..0a123db3 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -291,3 +291,45 @@ export const setKeyboardDressShow = (keyCode?: number) => {
   }
 }
 
+/**
+ * * JSON序列化，支持函数和 undefined
+ * @param data
+ */
+export const JSONStringify = (data: object) => {
+  return JSON.stringify(
+    data,
+    (key, val) => {
+      // 处理函数丢失问题
+      if (typeof val === 'function') {
+        return `${val}`
+      }
+      // 处理 undefined 丢失问题
+      if (typeof val === 'undefined') {
+        return 'undefined'
+      }
+      return val
+    },
+    2
+  )
+}
+
+/**
+ * * JSON反序列化，支持函数和 undefined
+ * @param data
+ */
+export const JSONParse = (data: string) => {
+  return JSON.parse(data, (k, v) => {
+    if (typeof v === 'string' && v.indexOf && (v.indexOf('function') > -1 || v.indexOf('=>') > -1)) {
+      return eval(`(function(){return ${v}})()`)
+    }
+    return v
+  })
+}
+
+/**
+ * * 修改顶部标题
+ * @param title
+ */
+export const setTitle = (title?: string) => {
+  title && (document.title = title)
+}
\ No newline at end of file
diff --git a/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue b/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue
index 655fe824..b6b9beeb 100644
--- a/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue
+++ b/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="图表图片" />
+          <charts-item-image class="list-img" :chartConfig="item"></charts-item-image>
         </div>
         <div class="list-bottom">
           <n-text class="list-bottom-text" depth="3">
@@ -37,16 +37,18 @@
 <script setup lang="ts">
 import { PropType, watch, ref, Ref, computed, nextTick } from 'vue'
 import { MacOsControlBtn } from '@/components/Tips/MacOsControlBtn/index'
+import { ChartsItemImage } from '../ChartsItemImage'
 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 +72,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)
 }
diff --git a/src/views/chart/ContentCharts/components/ChartsItemImage/index.ts b/src/views/chart/ContentCharts/components/ChartsItemImage/index.ts
new file mode 100644
index 00000000..698542b4
--- /dev/null
+++ b/src/views/chart/ContentCharts/components/ChartsItemImage/index.ts
@@ -0,0 +1,3 @@
+import ChartsItemImage from './index.vue'
+
+export { ChartsItemImage }
diff --git a/src/views/chart/ContentCharts/components/ChartsItemImage/index.vue b/src/views/chart/ContentCharts/components/ChartsItemImage/index.vue
new file mode 100644
index 00000000..d5ba9f18
--- /dev/null
+++ b/src/views/chart/ContentCharts/components/ChartsItemImage/index.vue
@@ -0,0 +1,24 @@
+<template>
+  <img class="list-img" v-lazy="imageInfo" alt="图表图片" />
+</template>
+
+<script setup lang="ts">
+import { ref, PropType } 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)
+}
+fetchImageUrl()
+</script>
diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataPond/components/ChartDataPondControl/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataPond/components/ChartDataPondControl/index.vue
index c9c3016f..3ff3c6c2 100644
--- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataPond/components/ChartDataPondControl/index.vue
+++ b/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 => {
diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/index.vue
index 9b1fd134..995e1f23 100644
--- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/index.vue
+++ b/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'
@@ -46,11 +46,22 @@ const emit = defineEmits(['update:modelShow', 'sendHandle'])
 // 解构基础配置
 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)
 }
diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/pondIndex.vue b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/pondIndex.vue
index 6bc0a000..62ebd505 100644
--- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/pondIndex.vue
+++ b/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'
@@ -58,6 +58,12 @@ const emit = defineEmits(['update:modelShow', 'editSaveHandle'])
 
 const pondName = ref()
 const inputInstRef = ref()
+const modelShowRef = ref(false)
+
+watch(() => props.modelShow, (newValue) => {
+  modelShowRef.value = newValue
+})
+
 
 const closeHandle = () => {
   emit('update:modelShow', false)
diff --git a/src/views/chart/ContentConfigurations/components/ChartData/hooks/useFile.hooks.ts b/src/views/chart/ContentConfigurations/components/ChartData/hooks/useFile.hooks.ts
index 42f38798..08258951 100644
--- a/src/views/chart/ContentConfigurations/components/ChartData/hooks/useFile.hooks.ts
+++ b/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('下载失败，数据错误！')
     }
diff --git a/src/views/chart/ContentEdit/components/EditRule/index.vue b/src/views/chart/ContentEdit/components/EditRule/index.vue
index 13078ec4..e200bee7 100644
--- a/src/views/chart/ContentEdit/components/EditRule/index.vue
+++ b/src/views/chart/ContentEdit/components/EditRule/index.vue
@@ -35,8 +35,12 @@ import { ref, reactive, onMounted, toRefs, watch, onUnmounted, computed } from '
 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 thick = 20
@@ -84,6 +88,7 @@ const themeColor = computed(() => {
   return designStore.getAppTheme
 })
 
+// 处理鼠标拖动
 const handleWheel = (e: any) => {
   if (e.ctrlKey || e.metaKey) {
     e.preventDefault()
@@ -102,6 +107,7 @@ const handleWheel = (e: any) => {
   }
 }
 
+// 滚动条处理
 const handleScroll = () => {
   if (!$app.value) return
   const screensRect = $app.value.getBoundingClientRect()
@@ -111,6 +117,7 @@ const handleScroll = () => {
   startY.value = (screensRect.top + thick - canvasRect.top) / scale.value
 }
 
+// 拖拽处理
 const dragCanvas = (e: any) => {
   e.preventDefault()
   e.stopPropagation()
@@ -148,6 +155,7 @@ const dragCanvas = (e: any) => {
   })
 }
 
+// 计算画布大小
 const canvasBox = () => {
   const layoutDom = document.getElementById('go-chart-edit-layout')
   if (layoutDom) {
@@ -162,7 +170,7 @@ const canvasBox = () => {
   }
 }
 
-// 在位置不动的情况下重绘标尺
+// 重绘标尺
 const reDraw = () => {
   sketchRuleReDraw.value = false
   setTimeout(() => {
@@ -170,13 +178,6 @@ const reDraw = () => {
   }, 10)
 }
 
-watch(
-  () => designStore.getDarkTheme,
-  () => {
-    reDraw()
-  }
-)
-
 // 滚动居中
 const canvasPosCenter = () => {
   const { width: containerWidth, height: containerHeight } = $container.value.getBoundingClientRect()
@@ -186,20 +187,32 @@ const canvasPosCenter = () => {
   $app.value.scrollTop = containerHeight / 2 - height / 2
 }
 
-// 处理标尺重制大小
+// 处理主题变化
+watch(
+  () => designStore.getDarkTheme,
+  () => {
+    reDraw()
+  }
+)
+
+// // 处理标尺重制大小
 watch(
   () => scale.value,
   (newValue, oldValue) => {
-    if (oldValue !== newValue) {
+    if (oldValue !== newValue && chartLayoutStore.getRePositionCanvas) {
+      chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.RE_POSITION_CANVAS, false)
       handleScroll()
-      chartEditStore.setScale(newValue)
       setTimeout(() => {
         canvasPosCenter()
-      }, 500)
+        reDraw()
+      }, 400)
+    } else {
+      throttle(reDraw, 20)
     }
   }
 )
 
+// 处理鼠标样式
 watch(
   () => isPressSpace.value,
   newValue => {
diff --git a/src/views/chart/ContentEdit/components/EditSelect/index.vue b/src/views/chart/ContentEdit/components/EditSelect/index.vue
index 1a8df6c7..90fc086b 100644
--- a/src/views/chart/ContentEdit/components/EditSelect/index.vue
+++ b/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');
   }
 }
diff --git a/src/views/chart/ContentEdit/components/EditShortcutKey/ShortcutKeyModal.vue b/src/views/chart/ContentEdit/components/EditShortcutKey/ShortcutKeyModal.vue
index 24af3ca7..fbc7496a 100644
--- a/src/views/chart/ContentEdit/components/EditShortcutKey/ShortcutKeyModal.vue
+++ b/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 `,
@@ -129,6 +128,7 @@ const shortcutKeyOptions = [
     mac: `${MacKeyboard.CTRL_SOURCE_KEY.toUpperCase()} + ${WinKeyboard.SHIFT.toUpperCase()} + G `
   }
 ]
+
 const closeHandle = () => {
   emit('update:modelShow', false)
 }
diff --git a/src/views/chart/ContentEdit/components/EditTools/hooks/useFile.hooks.ts b/src/views/chart/ContentEdit/components/EditTools/hooks/useFile.hooks.ts
index 587b9fe4..d492cc80 100644
--- a/src/views/chart/ContentEdit/components/EditTools/hooks/useFile.hooks.ts
+++ b/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 = () => {
@@ -34,7 +34,7 @@ export const useFile = () => {
             // 新增
             onPositiveCallback: async () => {
               try {
-                fileData = JSON.parse(fileData)
+                fileData = JSONParse(fileData)
                 await updateComponent(fileData, false, true)
                 window['$message'].success('导入成功！')
               } catch (error) {
@@ -45,7 +45,7 @@ export const useFile = () => {
             // 覆盖
             onNegativeCallback: async () => {
               try {
-                fileData = JSON.parse(fileData)
+                fileData = JSONParse(fileData)
                 await updateComponent(fileData, true, true)
                 window['$message'].success('导入成功！')
               } catch (error) {
diff --git a/src/views/chart/ContentEdit/components/EditTools/utils/index.ts b/src/views/chart/ContentEdit/components/EditTools/utils/index.ts
index 39876c08..39e7af13 100644
--- a/src/views/chart/ContentEdit/components/EditTools/utils/index.ts
+++ b/src/views/chart/ContentEdit/components/EditTools/utils/index.ts
@@ -1,5 +1,5 @@
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { canvasCut, downloadTextFile } from '@/utils'
+import { canvasCut, downloadTextFile, JSONStringify } from '@/utils'
 const chartEditStore = useChartEditStore()
 
 // 导出
@@ -9,9 +9,7 @@ export const exportHandle = () => {
 
   // 导出数据
   downloadTextFile(
-    JSON.stringify(chartEditStore.getStorageInfo || [], (k, v) => {
-      return v === undefined ? null : v
-    }),
+    JSONStringify(chartEditStore.getStorageInfo || []),
     undefined,
     'json'
   )
diff --git a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts
index 82fce985..3aae5547 100644
--- a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts
+++ b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts
@@ -6,7 +6,7 @@ import { CreateComponentType, CreateComponentGroupType, PickCreateComponentType
 import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
-import { loadingStart, loadingFinish, loadingError, setComponentPosition } from '@/utils'
+import { loadingStart, loadingFinish, loadingError, setComponentPosition, JSONParse } from '@/utils'
 import { throttle, cloneDeep } from 'lodash'
 
 const chartEditStore = useChartEditStore()
@@ -28,7 +28,7 @@ export const dragHandle = async (e: DragEvent) => {
 
     // 修改状态
     chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CREATE, false)
-    const dropData: Exclude<ConfigType, ['image']> = JSON.parse(drayDataString)
+    const dropData: Exclude<ConfigType, ['image']> = JSONParse(drayDataString)
 
     // 创建新图表组件
     let newComponent: CreateComponentType = await createComponent(dropData)
@@ -152,7 +152,7 @@ export const mousedownBoxSelect = (e: MouseEvent, item?: CreateComponentType | C
         }
       }
     })
-  }, 20)
+  }, 30)
 
   // 鼠标抬起
   const mouseup = () => {
diff --git a/src/views/chart/ContentHeader/headerTitle/index.vue b/src/views/chart/ContentHeader/headerTitle/index.vue
index 6d0d4eae..3b8efb71 100644
--- a/src/views/chart/ContentHeader/headerTitle/index.vue
+++ b/src/views/chart/ContentHeader/headerTitle/index.vue
@@ -30,9 +30,13 @@
 
 <script setup lang="ts">
 import { ref, nextTick, computed } from 'vue'
-import { fetchRouteParamsLocation } from '@/utils'
+import { fetchRouteParamsLocation, setTitle } from '@/utils'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { icon } from '@/plugins'
+
 const { FishIcon } = icon.ionicons5
+const chartEditStore = useChartEditStore()
 
 const focus = ref<boolean>(false)
 const inputInstRef = ref(null)
@@ -51,7 +55,10 @@ const title = ref<string>(fetchProhectInfoById() || '')
 const comTitle = computed(() => {
   // eslint-disable-next-line vue/no-side-effects-in-computed-properties
   title.value = title.value.replace(/\s/g, '')
-  return title.value.length ? title.value : '新项目'
+  const newTitle = title.value.length ? title.value : '新项目'
+  setTitle(`工作空间-${newTitle}`)
+  chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.PROJECT_NAME, newTitle)
+  return newTitle
 })
 
 const handleFocus = () => {
diff --git a/src/views/chart/ContentLayers/components/LayersListItem/index.vue b/src/views/chart/ContentLayers/components/LayersListItem/index.vue
index 1d5af943..d77ed451 100644
--- a/src/views/chart/ContentLayers/components/LayersListItem/index.vue
+++ b/src/views/chart/ContentLayers/components/LayersListItem/index.vue
@@ -5,7 +5,7 @@
         class="list-img"
         object-fit="contain"
         preview-disabled
-        :src="image"
+        :src="imageInfo"
         :fallback-src="requireErrorImg()"
       ></n-image>
       <n-ellipsis style="margin-right: auto">
@@ -20,16 +20,18 @@
 </template>
 
 <script setup lang="ts">
-import { computed, PropType } from 'vue'
+import { computed, PropType, ref, watch } from 'vue'
 import { requireErrorImg } from '@/utils'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { LayerModeEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
+import { fetchImages } from '@/packages'
+import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
 import { LayersStatus } from '../LayersStatus/index'
 
 const props = defineProps({
   componentData: {
-    type: Object,
+    type: Object as PropType<CreateComponentType | CreateComponentGroupType>,
     required: true
   },
   isGroup: {
@@ -45,9 +47,13 @@ const props = defineProps({
 // 全局颜色
 const designStore = useDesignStore()
 const chartEditStore = useChartEditStore()
+const imageInfo = ref('')
 
-// eslint-disable-next-line vue/no-setup-props-destructure
-const { image } = props.componentData.chartConfig
+// 获取图片
+const fetchImageUrl = async () => {
+  imageInfo.value = await fetchImages(props.componentData.chartConfig)
+}
+fetchImageUrl()
 
 // 颜色
 const themeColor = computed(() => {
diff --git a/src/views/chart/ContentLoad/index.ts b/src/views/chart/ContentLoad/index.ts
new file mode 100644
index 00000000..7e41ed39
--- /dev/null
+++ b/src/views/chart/ContentLoad/index.ts
@@ -0,0 +1,3 @@
+import ContentLoad from './index.vue'
+
+export { ContentLoad }
diff --git a/src/views/chart/ContentLoad/index.vue b/src/views/chart/ContentLoad/index.vue
new file mode 100644
index 00000000..2b7f46cf
--- /dev/null
+++ b/src/views/chart/ContentLoad/index.vue
@@ -0,0 +1,40 @@
+<template>
+  <n-modal :show="showModal" :close-on-esc="false" transform-origin="center">
+    <div>
+      <span> 拼命加载中... </span>
+      <n-progress type="line" :color="themeColor" :percentage="percentage" style="width: 300px" />
+    </div>
+  </n-modal>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue'
+import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
+import { useDesignStore } from '@/store/modules/designStore/designStore'
+
+const chartLayoutStore = useChartLayoutStore()
+const designStore = useDesignStore()
+const showModal = ref(false)
+const percentage = ref(0)
+
+// 颜色
+const themeColor = computed(() => {
+  return designStore.getAppTheme
+})
+
+// 监听百分比
+watch(
+  () => chartLayoutStore.getPercentage,
+  newValue => {
+    if (newValue === 0) {
+      setTimeout(() => {
+        percentage.value = newValue
+        showModal.value = false
+      }, 500);
+      return
+    }
+    percentage.value = newValue
+    showModal.value = newValue > 0
+  }
+)
+</script>
diff --git a/src/views/chart/hooks/useSync.hook.ts b/src/views/chart/hooks/useSync.hook.ts
index 3d551f00..a0783962 100644
--- a/src/views/chart/hooks/useSync.hook.ts
+++ b/src/views/chart/hooks/useSync.hook.ts
@@ -2,6 +2,8 @@ import { getUUID } from '@/utils'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { ChartEditStoreEnum, ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
+import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
+import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
 import { fetchChartComponent, fetchConfigComponent, createComponent } from '@/packages/index'
 import { BaseEvent, EventLife, CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
 import { PublicGroupConfigClass } from '@/packages/public/publicConfig'
@@ -85,7 +87,7 @@ const componentMerge = (newObject: any, sources: any, notComponent = false) => {
 export const useSync = () => {
   const chartEditStore = useChartEditStore()
   const chartHistoryStore = useChartHistoryStore()
-
+  const chartLayoutStore = useChartLayoutStore()
   /**
    * * 组件动态注册
    * @param projectData 项目数据
@@ -151,7 +153,13 @@ export const useSync = () => {
     for (const key in projectData) {
       // 组件
       if (key === ChartEditStoreEnum.COMPONENT_LIST) {
+        let loadIndex = 0
+        const listLength = projectData[key].length;
         for (const comItem of projectData[key]) {
+          // 设置加载数量
+          let percentage = parseInt((parseFloat(`${++loadIndex / listLength}`) * 100).toString())
+          chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.PERCENTAGE, percentage)
+          // 判断类型
           if (comItem.isGroup) {
             // 创建分组
             let groupClass = new PublicGroupConfigClass()
@@ -182,6 +190,9 @@ export const useSync = () => {
         componentMerge(chartEditStore[key], projectData[key], true)
       }
     }
+
+    // 清除数量
+    chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.PERCENTAGE, 0)
   }
 
   return {
diff --git a/src/views/chart/index.vue b/src/views/chart/index.vue
index 46cbfe3e..89c60d95 100644
--- a/src/views/chart/index.vue
+++ b/src/views/chart/index.vue
@@ -32,6 +32,8 @@
     :on-clickoutside="onClickOutSide"
     @select="handleMenuSelect"
   ></n-dropdown>
+  <!-- 加载蒙层 -->
+  <content-load></content-load>
 </template>
 
 <script setup lang="ts">
@@ -53,6 +55,7 @@ const HeaderTitle = loadAsyncComponent(() => import('./ContentHeader/headerTitle
 const ContentLayers = loadAsyncComponent(() => import('./ContentLayers/index.vue'))
 const ContentCharts = loadAsyncComponent(() => import('./ContentCharts/index.vue'))
 const ContentConfigurations = loadAsyncComponent(() => import('./ContentConfigurations/index.vue'))
+const ContentLoad = loadAsyncComponent(() => import('./ContentLoad/index.vue'))
 
 // 右键
 const {
diff --git a/src/views/edit/index.vue b/src/views/edit/index.vue
index 42d1e4ab..6240570d 100644
--- a/src/views/edit/index.vue
+++ b/src/views/edit/index.vue
@@ -38,7 +38,7 @@ import { MonacoEditor } from '@/components/Pages/MonacoEditor'
 import { SavePageEnum } from '@/enums/editPageEnum'
 import { getSessionStorageInfo } from '../preview/utils'
 import type { ChartEditStorageType } from '../preview/index.d'
-import { setSessionStorage } from '@/utils'
+import { setSessionStorage, JSONStringify, JSONParse, setTitle } from '@/utils'
 import { StorageEnum } from '@/enums/storageEnum'
 import { icon } from '@/plugins'
 
@@ -48,7 +48,8 @@ const content = ref('')
 // 从sessionStorage 获取数据
 async function getDataBySession() {
   const localStorageInfo: ChartEditStorageType = await getSessionStorageInfo() as unknown as ChartEditStorageType
-  content.value = JSON.stringify(localStorageInfo, undefined, 2)
+  setTitle(`编辑-${localStorageInfo.editCanvasConfig.projectName}`)
+  content.value = JSONStringify(localStorageInfo)
 }
 setTimeout(getDataBySession)
 
@@ -72,7 +73,7 @@ async function importJSON() {
 // 同步 [画布页失去焦点时同步数据到JSON页，JSON页Ctrl+S 时同步数据到画布页]
 window.opener.addEventListener(SavePageEnum.CHART, (e: any) => {
   setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [e.detail])
-  content.value = JSON.stringify(e.detail, undefined, 2)
+  content.value = JSONStringify(e.detail)
 })
 
 // 窗口失焦 + 保存 => 同步数据
@@ -90,7 +91,7 @@ async function updateSync() {
     return window['$message'].error('源窗口已关闭，视图同步失败')
   }
   try {
-    const detail = JSON.parse(content.value)
+    const detail = JSONParse(content.value)
     delete detail.id
     // 保持id不变
     window.opener.dispatchEvent(new CustomEvent(SavePageEnum.JSON, { detail }))
diff --git a/src/views/preview/components/PreviewRenderList/index.vue b/src/views/preview/components/PreviewRenderList/index.vue
index 8ed703d1..ee5ea39c 100644
--- a/src/views/preview/components/PreviewRenderList/index.vue
+++ b/src/views/preview/components/PreviewRenderList/index.vue
@@ -2,7 +2,7 @@
   <div
     class="chart-item"
     v-for="(item, index) in localStorageInfo.componentList"
-    :class="animationsClass(item.styles.animations)"
+    :class="[animationsClass(item.styles.animations), !item.isGroup && 'hidden']"
     :key="item.id"
     :style="{
       ...getComponentAttrStyle(item.attr, index),
@@ -78,6 +78,8 @@ onMounted(() => {
 <style lang="scss" scoped>
 .chart-item {
   position: absolute;
-  overflow: hidden;
+  &.hidden {
+    overflow: hidden;
+  }
 }
 </style>
diff --git a/src/views/preview/index.vue b/src/views/preview/index.vue
index fbe74eca..e11a3092 100644
--- a/src/views/preview/index.vue
+++ b/src/views/preview/index.vue
@@ -29,7 +29,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { PreviewRenderList } from './components/PreviewRenderList'
-import { getFilterStyle } from '@/utils'
+import { getFilterStyle, setTitle } from '@/utils'
 import { getEditCanvasConfigStyle, getSessionStorageInfo } from './utils'
 import { useComInstall } from './hooks/useComInstall.hook'
 import { useScale } from './hooks/useScale.hook'
@@ -38,6 +38,7 @@ import { PreviewScaleEnum } from '@/enums/styleEnum'
 import type { ChartEditStorageType } from './index.d'
 
 const localStorageInfo: ChartEditStorageType = getSessionStorageInfo() as ChartEditStorageType
+setTitle(`预览-${localStorageInfo.editCanvasConfig.projectName}`)
 
 const previewRefStyle = computed(() => {
   return {
diff --git a/src/views/project/items/components/ProjectItemsCard/index.vue b/src/views/project/items/components/ProjectItemsCard/index.vue
index b042d229..63ec3c91 100644
--- a/src/views/project/items/components/ProjectItemsCard/index.vue
+++ b/src/views/project/items/components/ProjectItemsCard/index.vue
@@ -89,6 +89,7 @@ import { renderIcon, renderLang,  requireErrorImg } from '@/utils'
 import { icon } from '@/plugins'
 import { MacOsControlBtn } from '@/components/Tips/MacOsControlBtn'
 import { Chartype } from '../../index.d'
+import { log } from 'console'
 const {
   EllipsisHorizontalCircleSharpIcon,
   CopyIcon,
diff --git a/src/views/project/items/components/ProjectItemsList/hooks/useModal.hook.ts b/src/views/project/items/components/ProjectItemsList/hooks/useModal.hook.ts
index 89894b03..16434efd 100644
--- a/src/views/project/items/components/ProjectItemsList/hooks/useModal.hook.ts
+++ b/src/views/project/items/components/ProjectItemsList/hooks/useModal.hook.ts
@@ -1,7 +1,8 @@
-import { ref, Ref } from 'vue'
+import { ref } from 'vue'
 import { ChartEnum } from '@/enums/pageEnum'
 import { fetchPathByName, routerTurnByPath } from '@/utils'
-import { Chartype } from '../../..'
+import { Chartype } from '../../../index.d'
+
 export const useModalDataInit = () => {
   const modalShow = ref<boolean>(false)
   const modalData = ref<Chartype | null>(null)
diff --git a/src/views/project/items/components/ProjectItemsList/index.vue b/src/views/project/items/components/ProjectItemsList/index.vue
index dc4f9206..80d0c2ff 100644
--- a/src/views/project/items/components/ProjectItemsList/index.vue
+++ b/src/views/project/items/components/ProjectItemsList/index.vue
@@ -25,7 +25,7 @@
   </div>
   <project-items-modal-card
     v-if="modalData"
-    v-model:modalShow="modalShow"
+    :modalShow="modalShow"
     :cardData="modalData"
     @close="closeModal"
     @edit="editHandle"
@@ -41,8 +41,7 @@ import { useDataListInit } from './hooks/useData.hook'
 
 const { CopyIcon, EllipsisHorizontalCircleSharpIcon } = icon.ionicons5
 const { list, deleteHandle } = useDataListInit()
-const { modalData, modalShow, closeModal, resizeHandle, editHandle } =
-  useModalDataInit()
+const { modalData, modalShow, closeModal, resizeHandle, editHandle } = useModalDataInit()
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/project/items/components/ProjectItemsModalCard/index.vue b/src/views/project/items/components/ProjectItemsModalCard/index.vue
index 938f2e5c..3515552f 100644
--- a/src/views/project/items/components/ProjectItemsModalCard/index.vue
+++ b/src/views/project/items/components/ProjectItemsModalCard/index.vue
@@ -2,7 +2,7 @@
   <!-- mask-closable 暂时是失效的，不知道为啥 -->
   <n-modal
     class="go-modal-box"
-    v-model:show="modalShow"
+    v-model:show="showRef"
     @afterLeave="closeHandle"
   >
     <n-card hoverable size="small">
@@ -75,20 +75,36 @@
 </template>
 
 <script setup lang="ts">
-import { reactive } from 'vue'
+import { ref, reactive, watch } from 'vue'
 import { renderIcon, renderLang } from '@/utils'
 import { icon } from '@/plugins'
 import { MacOsControlBtn } from '@/components/Tips/MacOsControlBtn'
 
 const { HammerIcon } = icon.ionicons5
-
+const showRef = ref(false)
 const emit = defineEmits(['close', 'edit'])
 
 const props = defineProps({
-  modalShow: Boolean,
-  cardData: Object
+  modalShow: {
+    required: true,
+    type: Boolean
+  },
+  cardData: {
+    required: true,
+    type: Object
+  }
 })
 
+watch(
+  () => props.modalShow,
+  newValue => {
+    showRef.value = newValue
+  },
+  {
+    immediate: true
+  }
+)
+
 // 处理url获取
 const requireUrl = (name: string) => {
   return new URL(`../../../../../assets/images/${name}`, import.meta.url).href
diff --git a/src/views/project/layout/components/ProjectLayoutCreate/components/CreateModal/index.vue b/src/views/project/layout/components/ProjectLayoutCreate/components/CreateModal/index.vue
index 2cbae29e..6f4cb853 100644
--- a/src/views/project/layout/components/ProjectLayoutCreate/components/CreateModal/index.vue
+++ b/src/views/project/layout/components/ProjectLayoutCreate/components/CreateModal/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <n-modal v-model:show="show" class="go-create-modal">
+  <n-modal v-model:show="showRef" class="go-create-modal" @afterLeave="closeHandle">
     <n-space size="large">
       <n-card class="card-box" hoverable>
         <template #header>
@@ -35,20 +35,21 @@
 </template>
 
 <script lang="ts" setup>
-import { watch, reactive } from 'vue'
+import { ref, watch, shallowRef } from 'vue'
 import { icon } from '@/plugins'
 import { PageEnum, ChartEnum } from '@/enums/pageEnum'
 import { fetchPathByName, routerTurnByPath, renderLang, getUUID } from '@/utils'
 
 const { FishIcon, CloseIcon } = icon.ionicons5
 const { StoreIcon, ObjectStorageIcon } = icon.carbon
-const $t = window['$t']
+const showRef = ref(false)
+
 const emit = defineEmits(['close'])
 const props = defineProps({
   show: Boolean
 })
 
-const typeList = reactive([
+const typeList = shallowRef([
   {
     title: renderLang('project.new_project'),
     key: ChartEnum.CHART_HOME_NAME,
@@ -69,11 +70,8 @@ const typeList = reactive([
   }
 ])
 
-// 解决点击模态层不会触发 @on-after-leave 的问题
 watch(props, newValue => {
-  if (!newValue.show) {
-    closeHandle()
-  }
+  showRef.value = newValue.show
 })
 
 // 关闭对话框
@@ -92,7 +90,7 @@ const btnHandle = (key: string) => {
 <style lang="scss" scoped>
 $cardWidth: 570px;
 
-@include go("create-modal") {
+@include go('create-modal') {
   position: fixed;
   top: 200px;
   left: 50%;
@@ -103,7 +101,7 @@ $cardWidth: 570px;
     border: 1px solid rgba(0, 0, 0, 0);
     @extend .go-transition;
     &:hover {
-      @include hover-border-color("hover-border-color");
+      @include hover-border-color('hover-border-color');
     }
     &-tite {
       font-size: 14px;