Merge branch 'chore/update-go-view-version' into 'main_dev'

chore: 更新go-view基线版本至v1.2.6

See merge request yunteng/thingskit-view!69

 {
   "name": "go-view",
-  "version": "1.2.0",
+  "version": "1.2.6",
   "engines": {
-    "node": ">=16.14 <18.0.0"
+    "node": ">=12.0"
   },
   "scripts": {
     "dev": "vite --host",
@@ -37,6 +37,7 @@
     "html2canvas": "^1.4.1",
     "jwt-decode": "^3.1.2",
     "keymaster": "^1.6.2",
+    "mitt": "^3.0.0",
     "monaco-editor": "^0.33.0",
     "naive-ui": "2.34.3",
     "pinia": "^2.0.13",
@@ -56,6 +57,8 @@
   "devDependencies": {
     "@commitlint/cli": "^17.0.2",
     "@commitlint/config-conventional": "^17.0.2",
+    "@iconify/types": "^2.0.0",
+    "@iconify/vue": "^4.1.1",
     "@types/node": "^16.11.26",
     "@types/qs": "^6.9.7",
     "@types/three": "^0.144.0",
@@ -64,8 +67,8 @@
     "@typescript-eslint/parser": "^5.18.0",
     "@vicons/carbon": "^0.12.0",
     "@vicons/ionicons5": "~0.11.0",
-    "@vitejs/plugin-vue": "^1.10.2",
-    "@vitejs/plugin-vue-jsx": "^1.3.9",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vitejs/plugin-vue-jsx": "^3.0.1",
     "@vue/compiler-sfc": "^3.2.31",
     "@vueuse/core": "^7.7.1",
     "commitlint": "^17.0.2",
@@ -84,7 +87,7 @@
     "sass": "^1.49.11",
     "sass-loader": "^12.6.0",
     "typescript": "4.6.3",
-    "vite": "2.9.9",
+    "vite": "4.3.6",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-html": "^3.2.0",
     "vite-plugin-importer": "^0.2.5",

-lockfileVersion: '6.0'
+lockfileVersion: '6.1'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
 
 dependencies:
   '@amap/amap-jsapi-loader':
@@ -61,6 +65,9 @@ dependencies:
   keymaster:
     specifier: ^1.6.2
     version: 1.6.2
+  mitt:
+    specifier: ^3.0.0
+    version: 3.0.0
   monaco-editor:
     specifier: ^0.33.0
     version: 0.33.0
@@ -85,6 +92,9 @@ dependencies:
   vue:
     specifier: ^3.2.31
     version: 3.2.37
+  vue-3d-loader:
+    specifier: ^2.1.7
+    version: 2.1.7
   vue-demi:
     specifier: ^0.13.1
     version: 0.13.1(vue@3.2.37)
@@ -111,6 +121,12 @@ devDependencies:
   '@commitlint/config-conventional':
     specifier: ^17.0.2
     version: 17.0.2
+  '@iconify/types':
+    specifier: ^2.0.0
+    version: 2.0.0
+  '@iconify/vue':
+    specifier: ^4.1.1
+    version: 4.1.1(vue@3.2.37)
   '@types/node':
     specifier: ^16.11.26
     version: 16.11.40
@@ -136,11 +152,11 @@ devDependencies:
     specifier: ~0.11.0
     version: 0.11.0
   '@vitejs/plugin-vue':
-    specifier: ^1.10.2
-    version: 1.10.2(vite@2.9.9)
+    specifier: ^4.2.3
+    version: 4.2.3(vite@4.3.6)(vue@3.2.37)
   '@vitejs/plugin-vue-jsx':
-    specifier: ^1.3.9
-    version: 1.3.10
+    specifier: ^3.0.1
+    version: 3.0.1(vite@4.3.6)(vue@3.2.37)
   '@vue/compiler-sfc':
     specifier: ^3.2.31
     version: 3.2.37
@@ -196,20 +212,20 @@ devDependencies:
     specifier: 4.6.3
     version: 4.6.3
   vite:
-    specifier: 2.9.9
-    version: 2.9.9(sass@1.52.3)
+    specifier: 4.3.6
+    version: 4.3.6(@types/node@16.11.40)(sass@1.52.3)
   vite-plugin-compression:
     specifier: ^0.5.1
-    version: 0.5.1(vite@2.9.9)
+    version: 0.5.1(vite@4.3.6)
   vite-plugin-html:
     specifier: ^3.2.0
-    version: 3.2.0(vite@2.9.9)
+    version: 3.2.0(vite@4.3.6)
   vite-plugin-importer:
     specifier: ^0.2.5
     version: 0.2.5
   vite-plugin-mock:
     specifier: ^2.9.6
-    version: 2.9.6(mockjs@1.1.0)(rollup@2.75.6)(vite@2.9.9)
+    version: 2.9.6(mockjs@1.1.0)(rollup@2.75.6)(vite@4.3.6)
   vite-plugin-monaco-editor:
     specifier: ^1.1.0
     version: 1.1.0(monaco-editor@0.33.0)
@@ -245,11 +261,23 @@ packages:
       '@babel/highlight': 7.17.12
     dev: true
 
+  /@babel/code-frame@7.22.5:
+    resolution: {integrity: sha512-Xmwn266vad+6DAqEB2A6V/CcZVp62BbwVmcOJc2RPuwih1kw02TjQvWVWlcKGbBPd+8/0V5DEkOcizRGYsspYQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/highlight': 7.22.5
+    dev: true
+
   /@babel/compat-data@7.18.5:
     resolution: {integrity: sha512-BxhE40PVCBxVEJsSBhB6UWyAuqJRxGsAw8BdHMJ3AKGydcwuWW4kOO3HmqBQAdcq/OP+/DlTVxLvsCzRTnZuGg==}
     engines: {node: '>=6.9.0'}
     dev: true
 
+  /@babel/compat-data@7.22.5:
+    resolution: {integrity: sha512-4Jc/YuIaYqKnDDz892kPIledykKg12Aw1PYX5i/TY28anJtacvM1Rrr8wbieB9GfEJwlzqT0hUEao0CxEebiDA==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
   /@babel/core@7.18.5:
     resolution: {integrity: sha512-MGY8vg3DxMnctw0LdvSEojOsumc70g0t18gNyUdAZqB1Rpd1Bqo/svHGvt+UJ6JcGX+DIekGFDxxIWofBxLCnQ==}
     engines: {node: '>=6.9.0'}
@@ -273,6 +301,29 @@ packages:
       - supports-color
     dev: true
 
+  /@babel/core@7.22.5:
+    resolution: {integrity: sha512-SBuTAjg91A3eKOvD+bPEz3LlhHZRNu1nFOVts9lzDJTXshHTjII0BAtDS3Y2DAkdZdDKWVZGVwkDfc4Clxn1dg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@ampproject/remapping': 2.2.0
+      '@babel/code-frame': 7.22.5
+      '@babel/generator': 7.22.5
+      '@babel/helper-compilation-targets': 7.22.5(@babel/core@7.22.5)
+      '@babel/helper-module-transforms': 7.22.5
+      '@babel/helpers': 7.22.5
+      '@babel/parser': 7.22.5
+      '@babel/template': 7.22.5
+      '@babel/traverse': 7.22.5
+      '@babel/types': 7.22.5
+      convert-source-map: 1.8.0
+      debug: 4.3.4
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@babel/generator@7.18.2:
     resolution: {integrity: sha512-W1lG5vUwFvfMd8HVXqdfbuG7RuaSrTCCD8cl8fP8wOivdbtbIg2Db3IWUcgvfxKbbn6ZBGYRW/Zk1MIwK49mgw==}
     engines: {node: '>=6.9.0'}
@@ -282,11 +333,21 @@ packages:
       jsesc: 2.5.2
     dev: true
 
-  /@babel/helper-annotate-as-pure@7.16.7:
-    resolution: {integrity: sha512-s6t2w/IPQVTAET1HitoowRGXooX8mCgtuP5195wD/QJPV6wYjpujCGF7JuMODVX2ZAJOf1GT6DT9MHEZvLOFSw==}
+  /@babel/generator@7.22.5:
+    resolution: {integrity: sha512-+lcUbnTRhd0jOewtFSedLyiPsD5tswKkbgcezOqqWFUVNEwoUTlpPOBmvhG7OXWLR4jMdv0czPGH5XbflnD1EA==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.18.4
+      '@babel/types': 7.22.5
+      '@jridgewell/gen-mapping': 0.3.3
+      '@jridgewell/trace-mapping': 0.3.17
+      jsesc: 2.5.2
+    dev: true
+
+  /@babel/helper-annotate-as-pure@7.22.5:
+    resolution: {integrity: sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.22.5
     dev: true
 
   /@babel/helper-compilation-targets@7.18.2(@babel/core@7.18.5):
@@ -302,20 +363,36 @@ packages:
       semver: 6.3.0
     dev: true
 
-  /@babel/helper-create-class-features-plugin@7.18.0(@babel/core@7.18.5):
-    resolution: {integrity: sha512-Kh8zTGR9de3J63e5nS0rQUdRs/kbtwoeQQ0sriS0lItjC96u8XXZN6lKpuyWd2coKSU13py/y+LTmThLuVX0Pg==}
+  /@babel/helper-compilation-targets@7.22.5(@babel/core@7.22.5):
+    resolution: {integrity: sha512-Ji+ywpHeuqxB8WDxraCiqR0xfhYjiDE/e6k7FuIaANnoOFxAHskHChz4vA1mJC9Lbm01s1PVAGhQY4FUKSkGZw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
     dependencies:
-      '@babel/core': 7.18.5
-      '@babel/helper-annotate-as-pure': 7.16.7
-      '@babel/helper-environment-visitor': 7.18.2
-      '@babel/helper-function-name': 7.17.9
-      '@babel/helper-member-expression-to-functions': 7.17.7
-      '@babel/helper-optimise-call-expression': 7.16.7
-      '@babel/helper-replace-supers': 7.18.2
-      '@babel/helper-split-export-declaration': 7.16.7
+      '@babel/compat-data': 7.22.5
+      '@babel/core': 7.22.5
+      '@babel/helper-validator-option': 7.22.5
+      browserslist: 4.21.7
+      lru-cache: 5.1.1
+      semver: 6.3.0
+    dev: true
+
+  /@babel/helper-create-class-features-plugin@7.22.5(@babel/core@7.22.5):
+    resolution: {integrity: sha512-xkb58MyOYIslxu3gKmVXmjTtUPvBU4odYzbiIQbWwLKIHCsx6UGZGX6F1IznMFVnDdirseUZopzN+ZRt8Xb33Q==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.22.5
+      '@babel/helper-annotate-as-pure': 7.22.5
+      '@babel/helper-environment-visitor': 7.22.5
+      '@babel/helper-function-name': 7.22.5
+      '@babel/helper-member-expression-to-functions': 7.22.5
+      '@babel/helper-optimise-call-expression': 7.22.5
+      '@babel/helper-replace-supers': 7.22.5
+      '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
+      '@babel/helper-split-export-declaration': 7.22.5
+      semver: 6.3.0
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -325,6 +402,11 @@ packages:
     engines: {node: '>=6.9.0'}
     dev: true
 
+  /@babel/helper-environment-visitor@7.22.5:
+    resolution: {integrity: sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
   /@babel/helper-function-name@7.17.9:
     resolution: {integrity: sha512-7cRisGlVtiVqZ0MW0/yFB4atgpGLWEHUVYnb448hZK4x+vih0YO5UoS11XIYtZYqHd0dIPMdUSv8q5K4LdMnIg==}
     engines: {node: '>=6.9.0'}
@@ -333,6 +415,14 @@ packages:
       '@babel/types': 7.18.4
     dev: true
 
+  /@babel/helper-function-name@7.22.5:
+    resolution: {integrity: sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/template': 7.22.5
+      '@babel/types': 7.22.5
+    dev: true
+
   /@babel/helper-hoist-variables@7.16.7:
     resolution: {integrity: sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==}
     engines: {node: '>=6.9.0'}
@@ -340,11 +430,18 @@ packages:
       '@babel/types': 7.18.4
     dev: true
 
-  /@babel/helper-member-expression-to-functions@7.17.7:
-    resolution: {integrity: sha512-thxXgnQ8qQ11W2wVUObIqDL4p148VMxkt5T/qpN5k2fboRyzFGFmKsTGViquyM5QHKUy48OZoca8kw4ajaDPyw==}
+  /@babel/helper-hoist-variables@7.22.5:
+    resolution: {integrity: sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.18.4
+      '@babel/types': 7.22.5
+    dev: true
+
+  /@babel/helper-member-expression-to-functions@7.22.5:
+    resolution: {integrity: sha512-aBiH1NKMG0H2cGZqspNvsaBe6wNGjbJjuLy29aU+eDZjSbbN53BaxlpB02xm9v34pLTZ1nIQPFYn2qMZoa5BQQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.22.5
     dev: true
 
   /@babel/helper-module-imports@7.16.7:
@@ -354,6 +451,13 @@ packages:
       '@babel/types': 7.18.4
     dev: true
 
+  /@babel/helper-module-imports@7.22.5:
+    resolution: {integrity: sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.22.5
+    dev: true
+
   /@babel/helper-module-transforms@7.18.0:
     resolution: {integrity: sha512-kclUYSUBIjlvnzN2++K9f2qzYKFgjmnmjwL4zlmU5f8ZtzgWe8s0rUPSTGy2HmK4P8T52MQsS+HTQAgZd3dMEA==}
     engines: {node: '>=6.9.0'}
@@ -370,11 +474,27 @@ packages:
       - supports-color
     dev: true
 
-  /@babel/helper-optimise-call-expression@7.16.7:
-    resolution: {integrity: sha512-EtgBhg7rd/JcnpZFXpBy0ze1YRfdm7BnBX4uKMBd3ixa3RGAE002JZB66FJyNH7g0F38U05pXmA5P8cBh7z+1w==}
+  /@babel/helper-module-transforms@7.22.5:
+    resolution: {integrity: sha512-+hGKDt/Ze8GFExiVHno/2dvG5IdstpzCq0y4Qc9OJ25D4q3pKfiIP/4Vp3/JvhDkLKsDK2api3q3fpIgiIF5bw==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.18.4
+      '@babel/helper-environment-visitor': 7.22.5
+      '@babel/helper-module-imports': 7.22.5
+      '@babel/helper-simple-access': 7.22.5
+      '@babel/helper-split-export-declaration': 7.22.5
+      '@babel/helper-validator-identifier': 7.22.5
+      '@babel/template': 7.22.5
+      '@babel/traverse': 7.22.5
+      '@babel/types': 7.22.5
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/helper-optimise-call-expression@7.22.5:
+    resolution: {integrity: sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.22.5
     dev: true
 
   /@babel/helper-plugin-utils@7.17.12:
@@ -382,15 +502,21 @@ packages:
     engines: {node: '>=6.9.0'}
     dev: true
 
-  /@babel/helper-replace-supers@7.18.2:
-    resolution: {integrity: sha512-XzAIyxx+vFnrOxiQrToSUOzUOn0e1J2Li40ntddek1Y69AXUTXoDJ40/D5RdjFu7s7qHiaeoTiempZcbuVXh2Q==}
+  /@babel/helper-plugin-utils@7.22.5:
+    resolution: {integrity: sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/helper-replace-supers@7.22.5:
+    resolution: {integrity: sha512-aLdNM5I3kdI/V9xGNyKSF3X/gTyMUBohTZ+/3QdQKAA9vxIiy12E+8E2HoOP1/DjeqU+g6as35QHJNMDDYpuCg==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/helper-environment-visitor': 7.18.2
-      '@babel/helper-member-expression-to-functions': 7.17.7
-      '@babel/helper-optimise-call-expression': 7.16.7
-      '@babel/traverse': 7.18.5
-      '@babel/types': 7.18.4
+      '@babel/helper-environment-visitor': 7.22.5
+      '@babel/helper-member-expression-to-functions': 7.22.5
+      '@babel/helper-optimise-call-expression': 7.22.5
+      '@babel/template': 7.22.5
+      '@babel/traverse': 7.22.5
+      '@babel/types': 7.22.5
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -402,6 +528,20 @@ packages:
       '@babel/types': 7.18.4
     dev: true
 
+  /@babel/helper-simple-access@7.22.5:
+    resolution: {integrity: sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.22.5
+    dev: true
+
+  /@babel/helper-skip-transparent-expression-wrappers@7.22.5:
+    resolution: {integrity: sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.22.5
+    dev: true
+
   /@babel/helper-split-export-declaration@7.16.7:
     resolution: {integrity: sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==}
     engines: {node: '>=6.9.0'}
@@ -409,15 +549,37 @@ packages:
       '@babel/types': 7.18.4
     dev: true
 
+  /@babel/helper-split-export-declaration@7.22.5:
+    resolution: {integrity: sha512-thqK5QFghPKWLhAV321lxF95yCg2K3Ob5yw+M3VHWfdia0IkPXUtoLH8x/6Fh486QUvzhb8YOWHChTVen2/PoQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.22.5
+    dev: true
+
+  /@babel/helper-string-parser@7.22.5:
+    resolution: {integrity: sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
   /@babel/helper-validator-identifier@7.16.7:
     resolution: {integrity: sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==}
     engines: {node: '>=6.9.0'}
 
+  /@babel/helper-validator-identifier@7.22.5:
+    resolution: {integrity: sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
   /@babel/helper-validator-option@7.16.7:
     resolution: {integrity: sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ==}
     engines: {node: '>=6.9.0'}
     dev: true
 
+  /@babel/helper-validator-option@7.22.5:
+    resolution: {integrity: sha512-R3oB6xlIVKUnxNUxbmgq7pKjxpru24zlimpE8WK47fACIlM0II/Hm1RS8IaOI7NgCr6LNS+jl5l75m20npAziw==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
   /@babel/helpers@7.18.2:
     resolution: {integrity: sha512-j+d+u5xT5utcQSzrh9p+PaJX94h++KN+ng9b9WEJq7pkUPAd61FGqhjuUEdfknb3E/uDBb7ruwEeKkIxNJPIrg==}
     engines: {node: '>=6.9.0'}
@@ -429,6 +591,17 @@ packages:
       - supports-color
     dev: true
 
+  /@babel/helpers@7.22.5:
+    resolution: {integrity: sha512-pSXRmfE1vzcUIDFQcSGA5Mr+GxBV9oiRKDuDxXvWQQBCh8HoIjs/2DlDB7H8smac1IVrB9/xdXj2N3Wol9Cr+Q==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/template': 7.22.5
+      '@babel/traverse': 7.22.5
+      '@babel/types': 7.22.5
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@babel/highlight@7.17.12:
     resolution: {integrity: sha512-7yykMVF3hfZY2jsHZEEgLc+3x4o1O+fYyULu11GynEUQNwB6lua+IIQn1FiJxNucd5UlyJryrwsOh8PL9Sn8Qg==}
     engines: {node: '>=6.9.0'}
@@ -438,6 +611,15 @@ packages:
       js-tokens: 4.0.0
     dev: true
 
+  /@babel/highlight@7.22.5:
+    resolution: {integrity: sha512-BSKlD1hgnedS5XRnGOljZawtag7H1yPfQp0tdNJCHoH6AZ+Pcm9VvkrK59/Yy593Ypg0zMxH2BxD1VPYUQ7UIw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-validator-identifier': 7.22.5
+      chalk: 2.4.2
+      js-tokens: 4.0.0
+    dev: true
+
   /@babel/parser@7.18.5:
     resolution: {integrity: sha512-YZWVaglMiplo7v8f1oMQ5ZPQr0vn7HPeZXxXWsxXJRjGVrzUFn9OxFQl1sb5wzfootjA/yChhW84BV+383FSOw==}
     engines: {node: '>=6.0.0'}
@@ -445,6 +627,14 @@ packages:
     dependencies:
       '@babel/types': 7.18.4
 
+  /@babel/parser@7.22.5:
+    resolution: {integrity: sha512-DFZMC9LJUG9PLOclRC32G63UXwzqS2koQC8dkx+PLdmt1xSePYpbT/NbsrJy8Q/muXz7o/h/d4A7Fuyixm559Q==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+    dependencies:
+      '@babel/types': 7.22.5
+    dev: true
+
   /@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.18.5):
     resolution: {integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==}
     peerDependencies:
@@ -454,36 +644,37 @@ packages:
       '@babel/helper-plugin-utils': 7.17.12
     dev: true
 
-  /@babel/plugin-syntax-jsx@7.17.12(@babel/core@7.18.5):
+  /@babel/plugin-syntax-jsx@7.17.12(@babel/core@7.22.5):
     resolution: {integrity: sha512-spyY3E3AURfxh/RHtjx5j6hs8am5NbUBGfcZ2vB3uShSpZdQyXSf5rR5Mk76vbtlAZOelyVQ71Fg0x9SG4fsog==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.18.5
-      '@babel/helper-plugin-utils': 7.17.12
+      '@babel/core': 7.22.5
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
-  /@babel/plugin-syntax-typescript@7.17.12(@babel/core@7.18.5):
-    resolution: {integrity: sha512-TYY0SXFiO31YXtNg3HtFwNJHjLsAyIIhAhNWkQ5whPPS7HWUFlg9z0Ta4qAQNjQbP1wsSt/oKkmZ/4/WWdMUpw==}
+  /@babel/plugin-syntax-typescript@7.22.5(@babel/core@7.22.5):
+    resolution: {integrity: sha512-1mS2o03i7t1c6VzH6fdQ3OA8tcEIxwG18zIPRp+UY1Ihv6W+XZzBCVxExF9upussPXJ0xE9XRHwMoNs1ep/nRQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.18.5
-      '@babel/helper-plugin-utils': 7.17.12
+      '@babel/core': 7.22.5
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
-  /@babel/plugin-transform-typescript@7.18.4(@babel/core@7.18.5):
-    resolution: {integrity: sha512-l4vHuSLUajptpHNEOUDEGsnpl9pfRLsN1XUoDQDD/YBuXTM+v37SHGS+c6n4jdcZy96QtuUuSvZYMLSSsjH8Mw==}
+  /@babel/plugin-transform-typescript@7.22.5(@babel/core@7.22.5):
+    resolution: {integrity: sha512-SMubA9S7Cb5sGSFFUlqxyClTA9zWJ8qGQrppNUm05LtFuN1ELRFNndkix4zUJrC9F+YivWwa1dHMSyo0e0N9dA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.18.5
-      '@babel/helper-create-class-features-plugin': 7.18.0(@babel/core@7.18.5)
-      '@babel/helper-plugin-utils': 7.17.12
-      '@babel/plugin-syntax-typescript': 7.17.12(@babel/core@7.18.5)
+      '@babel/core': 7.22.5
+      '@babel/helper-annotate-as-pure': 7.22.5
+      '@babel/helper-create-class-features-plugin': 7.22.5(@babel/core@7.22.5)
+      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/plugin-syntax-typescript': 7.22.5(@babel/core@7.22.5)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -504,6 +695,15 @@ packages:
       '@babel/types': 7.18.4
     dev: true
 
+  /@babel/template@7.22.5:
+    resolution: {integrity: sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.22.5
+      '@babel/parser': 7.22.5
+      '@babel/types': 7.22.5
+    dev: true
+
   /@babel/traverse@7.18.5:
     resolution: {integrity: sha512-aKXj1KT66sBj0vVzk6rEeAO6Z9aiiQ68wfDgge3nHhA/my6xMM/7HGQUNumKZaoa2qUPQ5whJG9aAifsxUKfLA==}
     engines: {node: '>=6.9.0'}
@@ -522,6 +722,24 @@ packages:
       - supports-color
     dev: true
 
+  /@babel/traverse@7.22.5:
+    resolution: {integrity: sha512-7DuIjPgERaNo6r+PZwItpjCZEa5vyw4eJGufeLxrPdBXBoLcCJCIasvK6pK/9DVNrLZTLFhUGqaC6X/PA007TQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.22.5
+      '@babel/generator': 7.22.5
+      '@babel/helper-environment-visitor': 7.22.5
+      '@babel/helper-function-name': 7.22.5
+      '@babel/helper-hoist-variables': 7.22.5
+      '@babel/helper-split-export-declaration': 7.22.5
+      '@babel/parser': 7.22.5
+      '@babel/types': 7.22.5
+      debug: 4.3.4
+      globals: 11.12.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@babel/types@7.18.4:
     resolution: {integrity: sha512-ThN1mBcMq5pG/Vm2IcBmPPfyPXbd8S02rS+OBIDENdufvqC7Z/jHPCv9IcP01277aKtDI8g/2XysBN4hA8niiw==}
     engines: {node: '>=6.9.0'}
@@ -529,6 +747,15 @@ packages:
       '@babel/helper-validator-identifier': 7.16.7
       to-fast-properties: 2.0.0
 
+  /@babel/types@7.22.5:
+    resolution: {integrity: sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-string-parser': 7.22.5
+      '@babel/helper-validator-identifier': 7.22.5
+      to-fast-properties: 2.0.0
+    dev: true
+
   /@commitlint/cli@17.0.2:
     resolution: {integrity: sha512-Axe89Js0YzGGd4gxo3JLlF7yIdjOVpG1LbOorGc6PfYF+drBh14PvarSDLzyd2TNqdylUCq9wb9/A88ZjIdyhA==}
     engines: {node: '>=v14'}
@@ -689,32 +916,230 @@ packages:
       chalk: 4.1.2
     dev: true
 
-  /@cspotcode/source-map-support@0.8.1:
-    resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
+  /@cspotcode/source-map-support@0.8.1:
+    resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
+    engines: {node: '>=12'}
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.9
+    dev: true
+
+  /@css-render/plugin-bem@0.15.10(css-render@0.15.10):
+    resolution: {integrity: sha512-V7b08sM2PWJlXI7BJiVIa0Sg30H3u/jHay4AclNXfF2yRFwwb4ZJjggsMfzwj3WSihAdNf2WTqvOU5qsOD80Dg==}
+    peerDependencies:
+      css-render: ~0.15.10
+    dependencies:
+      css-render: 0.15.10
+    dev: false
+
+  /@css-render/vue3-ssr@0.15.10(vue@3.2.37):
+    resolution: {integrity: sha512-keGKnkB2nyVGoA8GezMKNsmvTGXEzgLOGGlgshwOTSEzd1dsROyZ2m/khJ9jV5zbzDM4rWeAWbWF0zwHemsJcw==}
+    peerDependencies:
+      vue: ^3.0.11
+    dependencies:
+      vue: 3.2.37
+    dev: false
+
+  /@emotion/hash@0.8.0:
+    resolution: {integrity: sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==}
+    dev: false
+
+  /@esbuild/android-arm64@0.17.19:
+    resolution: {integrity: sha512-KBMWvEZooR7+kzY0BtbTQn0OAYY7CsiydT63pVEaPtVYF0hXbUaOyZog37DKxK7NF3XacBJOpYT4adIJh+avxA==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/android-arm@0.17.19:
+    resolution: {integrity: sha512-rIKddzqhmav7MSmoFCmDIb6e2W57geRsM94gV2l38fzhXMwq7hZoClug9USI2pFRGL06f4IOPHHpFNOkWieR8A==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/android-x64@0.17.19:
+    resolution: {integrity: sha512-uUTTc4xGNDT7YSArp/zbtmbhO0uEEK9/ETW29Wk1thYUJBz3IVnvgEiEwEa9IeLyvnpKrWK64Utw2bgUmDveww==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/darwin-arm64@0.17.19:
+    resolution: {integrity: sha512-80wEoCfF/hFKM6WE1FyBHc9SfUblloAWx6FJkFWTWiCoht9Mc0ARGEM47e67W9rI09YoUxJL68WHfDRYEAvOhg==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/darwin-x64@0.17.19:
+    resolution: {integrity: sha512-IJM4JJsLhRYr9xdtLytPLSH9k/oxR3boaUIYiHkAawtwNOXKE8KoU8tMvryogdcT8AU+Bflmh81Xn6Q0vTZbQw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/freebsd-arm64@0.17.19:
+    resolution: {integrity: sha512-pBwbc7DufluUeGdjSU5Si+P3SoMF5DQ/F/UmTSb8HXO80ZEAJmrykPyzo1IfNbAoaqw48YRpv8shwd1NoI0jcQ==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/freebsd-x64@0.17.19:
+    resolution: {integrity: sha512-4lu+n8Wk0XlajEhbEffdy2xy53dpR06SlzvhGByyg36qJw6Kpfk7cp45DR/62aPH9mtJRmIyrXAS5UWBrJT6TQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-arm64@0.17.19:
+    resolution: {integrity: sha512-ct1Tg3WGwd3P+oZYqic+YZF4snNl2bsnMKRkb3ozHmnM0dGWuxcPTTntAF6bOP0Sp4x0PjSF+4uHQ1xvxfRKqg==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-arm@0.17.19:
+    resolution: {integrity: sha512-cdmT3KxjlOQ/gZ2cjfrQOtmhG4HJs6hhvm3mWSRDPtZ/lP5oe8FWceS10JaSJC13GBd4eH/haHnqf7hhGNLerA==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-ia32@0.17.19:
+    resolution: {integrity: sha512-w4IRhSy1VbsNxHRQpeGCHEmibqdTUx61Vc38APcsRbuVgK0OPEnQ0YD39Brymn96mOx48Y2laBQGqgZ0j9w6SQ==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-loong64@0.17.19:
+    resolution: {integrity: sha512-2iAngUbBPMq439a+z//gE+9WBldoMp1s5GWsUSgqHLzLJ9WoZLZhpwWuym0u0u/4XmZ3gpHmzV84PonE+9IIdQ==}
+    engines: {node: '>=12'}
+    cpu: [loong64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-mips64el@0.17.19:
+    resolution: {integrity: sha512-LKJltc4LVdMKHsrFe4MGNPp0hqDFA1Wpt3jE1gEyM3nKUvOiO//9PheZZHfYRfYl6AwdTH4aTcXSqBerX0ml4A==}
+    engines: {node: '>=12'}
+    cpu: [mips64el]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-ppc64@0.17.19:
+    resolution: {integrity: sha512-/c/DGybs95WXNS8y3Ti/ytqETiW7EU44MEKuCAcpPto3YjQbyK3IQVKfF6nbghD7EcLUGl0NbiL5Rt5DMhn5tg==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-riscv64@0.17.19:
+    resolution: {integrity: sha512-FC3nUAWhvFoutlhAkgHf8f5HwFWUL6bYdvLc/TTuxKlvLi3+pPzdZiFKSWz/PF30TB1K19SuCxDTI5KcqASJqA==}
+    engines: {node: '>=12'}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-s390x@0.17.19:
+    resolution: {integrity: sha512-IbFsFbxMWLuKEbH+7sTkKzL6NJmG2vRyy6K7JJo55w+8xDk7RElYn6xvXtDW8HCfoKBFK69f3pgBJSUSQPr+4Q==}
+    engines: {node: '>=12'}
+    cpu: [s390x]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-x64@0.17.19:
+    resolution: {integrity: sha512-68ngA9lg2H6zkZcyp22tsVt38mlhWde8l3eJLWkyLrp4HwMUr3c1s/M2t7+kHIhvMjglIBrFpncX1SzMckomGw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/netbsd-x64@0.17.19:
+    resolution: {integrity: sha512-CwFq42rXCR8TYIjIfpXCbRX0rp1jo6cPIUPSaWwzbVI4aOfX96OXY8M6KNmtPcg7QjYeDmN+DD0Wp3LaBOLf4Q==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [netbsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/openbsd-x64@0.17.19:
+    resolution: {integrity: sha512-cnq5brJYrSZ2CF6c35eCmviIN3k3RczmHz8eYaVlNasVqsNY+JKohZU5MKmaOI+KkllCdzOKKdPs762VCPC20g==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [openbsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/sunos-x64@0.17.19:
+    resolution: {integrity: sha512-vCRT7yP3zX+bKWFeP/zdS6SqdWB8OIpaRq/mbXQxTGHnIxspRtigpkUcDMlSCOejlHowLqII7K2JKevwyRP2rg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [sunos]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/win32-arm64@0.17.19:
+    resolution: {integrity: sha512-yYx+8jwowUstVdorcMdNlzklLYhPxjniHWFKgRqH7IFlUEa0Umu3KuYplf1HUZZ422e3NU9F4LGb+4O0Kdcaag==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/win32-ia32@0.17.19:
+    resolution: {integrity: sha512-eggDKanJszUtCdlVs0RB+h35wNlb5v4TWEkq4vZcmVt5u/HiDZrTXe2bWFQUez3RgNHwx/x4sk5++4NSSicKkw==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/win32-x64@0.17.19:
+    resolution: {integrity: sha512-lAhycmKnVOuRYNtRtatQR1LPQf2oYCkRGkSFnseDAKPl8lu5SOsK/e1sXe5a0Pc5kHIHe6P2I/ilntNv2xf3cA==}
     engines: {node: '>=12'}
-    dependencies:
-      '@jridgewell/trace-mapping': 0.3.9
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
     dev: true
-
-  /@css-render/plugin-bem@0.15.10(css-render@0.15.10):
-    resolution: {integrity: sha512-V7b08sM2PWJlXI7BJiVIa0Sg30H3u/jHay4AclNXfF2yRFwwb4ZJjggsMfzwj3WSihAdNf2WTqvOU5qsOD80Dg==}
-    peerDependencies:
-      css-render: ~0.15.10
-    dependencies:
-      css-render: 0.15.10
-    dev: false
-
-  /@css-render/vue3-ssr@0.15.10(vue@3.2.37):
-    resolution: {integrity: sha512-keGKnkB2nyVGoA8GezMKNsmvTGXEzgLOGGlgshwOTSEzd1dsROyZ2m/khJ9jV5zbzDM4rWeAWbWF0zwHemsJcw==}
-    peerDependencies:
-      vue: ^3.0.11
-    dependencies:
-      vue: 3.2.37
-    dev: false
-
-  /@emotion/hash@0.8.0:
-    resolution: {integrity: sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==}
-    dev: false
+    optional: true
 
   /@eslint/eslintrc@1.3.0:
     resolution: {integrity: sha512-UWW0TMTmk2d7hLcWD1/e2g5HDM/HQ3csaLSqXCfqwh4uNDuNqlaKWXmEsL4Cs41Z0KnILNvwbHAah3C2yt06kw==}
@@ -748,6 +1173,19 @@ packages:
     resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
     dev: true
 
+  /@iconify/types@2.0.0:
+    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
+    dev: true
+
+  /@iconify/vue@4.1.1(vue@3.2.37):
+    resolution: {integrity: sha512-RL85Bm/DAe8y6rT6pux7D2FJSiUEM/TPfyK7GrbAOfTSwrhvwJW+S5yijdGcmtXouA8MtuH9C7l4hiSE4mLMjg==}
+    peerDependencies:
+      vue: '>=3'
+    dependencies:
+      '@iconify/types': 2.0.0
+      vue: 3.2.37
+    dev: true
+
   /@intlify/core-base@9.2.2:
     resolution: {integrity: sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==}
     engines: {node: '>= 14'}
@@ -803,6 +1241,15 @@ packages:
       '@jridgewell/trace-mapping': 0.3.13
     dev: true
 
+  /@jridgewell/gen-mapping@0.3.3:
+    resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      '@jridgewell/set-array': 1.1.1
+      '@jridgewell/sourcemap-codec': 1.4.14
+      '@jridgewell/trace-mapping': 0.3.17
+    dev: true
+
   /@jridgewell/resolve-uri@3.0.7:
     resolution: {integrity: sha512-8cXDaBBHOr2pQ7j77Y6Vp5VDT2sIqWyWQ56TjEq4ih/a4iST3dItRe8Q9fp0rrIl9DoKhWQtUQz/YpOxLkXbNA==}
     engines: {node: '>=6.0.0'}
@@ -1049,6 +1496,12 @@ packages:
       '@types/node': 17.0.43
     dev: true
 
+  /@types/three@0.143.2:
+    resolution: {integrity: sha512-HjsRWvd6rsXViFeOdU97/pHNDQknzJbFI0/5MrQ0joOlK0uixQH40sDJs/LwkNHhFYUvVENXAUQdKDeiQChHDw==}
+    dependencies:
+      '@types/webxr': 0.5.0
+    dev: false
+
   /@types/three@0.144.0:
     resolution: {integrity: sha512-psvEs6q5rLN50jUYZ3D4pZMfxTbdt3A243blt0my7/NcL6chaCZpHe2csbCtx0SOD9fI/XnF3wnVUAYZGqCSYg==}
     dependencies:
@@ -1067,7 +1520,6 @@ packages:
 
   /@types/webxr@0.5.0:
     resolution: {integrity: sha512-IUMDPSXnYIbEO2IereEFcgcqfDREOgmbGqtrMpVPpACTU6pltYLwHgVkrnYv0XhWEcjio9sYEfIEzgn3c7nDqA==}
-    dev: true
 
   /@typescript-eslint/eslint-plugin@5.28.0(@typescript-eslint/parser@5.28.0)(eslint@8.17.0)(typescript@4.6.3):
     resolution: {integrity: sha512-DXVU6Cg29H2M6EybqSg2A+x8DgO9TCUBRp4QEXQHJceLS7ogVDP0g3Lkg/SZCqcvkAP/RruuQqK0gdlkgmhSUA==}
@@ -1236,27 +1688,31 @@ packages:
       is-function: 1.0.2
     dev: false
 
-  /@vitejs/plugin-vue-jsx@1.3.10:
-    resolution: {integrity: sha512-Cf5zznh4yNMiEMBfTOztaDVDmK1XXfgxClzOSUVUc8WAmHzogrCUeM8B05ABzuGtg0D1amfng+mUmSIOFGP3Pw==}
-    engines: {node: '>=12.0.0'}
+  /@vitejs/plugin-vue-jsx@3.0.1(vite@4.3.6)(vue@3.2.37):
+    resolution: {integrity: sha512-+Jb7ggL48FSPS1uhPnJbJwWa9Sr90vQ+d0InW+AhBM22n+cfuYqJZDckBc+W3QSHe1WDvewMZfa4wZOtk5pRgw==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      vite: ^4.0.0
+      vue: ^3.0.0
     dependencies:
-      '@babel/core': 7.18.5
-      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.18.5)
-      '@babel/plugin-transform-typescript': 7.18.4(@babel/core@7.18.5)
-      '@rollup/pluginutils': 4.2.1
-      '@vue/babel-plugin-jsx': 1.1.1(@babel/core@7.18.5)
-      hash-sum: 2.0.0
+      '@babel/core': 7.22.5
+      '@babel/plugin-transform-typescript': 7.22.5(@babel/core@7.22.5)
+      '@vue/babel-plugin-jsx': 1.1.1(@babel/core@7.22.5)
+      vite: 4.3.6(@types/node@16.11.40)(sass@1.52.3)
+      vue: 3.2.37
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@vitejs/plugin-vue@1.10.2(vite@2.9.9):
-    resolution: {integrity: sha512-/QJ0Z9qfhAFtKRY+r57ziY4BSbGUTGsPRMpB/Ron3QPwBZM4OZAZHdTa4a8PafCwU5DTatXG8TMDoP8z+oDqJw==}
-    engines: {node: '>=12.0.0'}
+  /@vitejs/plugin-vue@4.2.3(vite@4.3.6)(vue@3.2.37):
+    resolution: {integrity: sha512-R6JDUfiZbJA9cMiguQ7jxALsgiprjBeHL5ikpXfJCH62pPHtI+JdJ5xWj6Ev73yXSlYl86+blXn1kZHQ7uElxw==}
+    engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
-      vite: ^2.5.10
+      vite: ^4.0.0
+      vue: ^3.2.25
     dependencies:
-      vite: 2.9.9(sass@1.52.3)
+      vite: 4.3.6(@types/node@16.11.40)(sass@1.52.3)
+      vue: 3.2.37
     dev: true
 
   /@volar/code-gen@0.38.9:
@@ -1293,11 +1749,11 @@ packages:
     resolution: {integrity: sha512-hz4R8tS5jMn8lDq6iD+yWL6XNB699pGIVLk7WSJnn1dbpjaazsjZQkieJoRX6gW5zpYSCFqQ7jUquPNY65tQYA==}
     dev: true
 
-  /@vue/babel-plugin-jsx@1.1.1(@babel/core@7.18.5):
+  /@vue/babel-plugin-jsx@1.1.1(@babel/core@7.22.5):
     resolution: {integrity: sha512-j2uVfZjnB5+zkcbc/zsOc0fSNGCMMjaEXP52wdwdIfn0qjFfEYpYZBFKFg+HHnQeJCVrjOeO0YxgaL7DMrym9w==}
     dependencies:
       '@babel/helper-module-imports': 7.16.7
-      '@babel/plugin-syntax-jsx': 7.17.12(@babel/core@7.18.5)
+      '@babel/plugin-syntax-jsx': 7.17.12(@babel/core@7.22.5)
       '@babel/template': 7.16.7
       '@babel/traverse': 7.18.5
       '@babel/types': 7.18.4
@@ -1803,6 +2259,17 @@ packages:
       picocolors: 1.0.0
     dev: true
 
+  /browserslist@4.21.7:
+    resolution: {integrity: sha512-BauCXrQ7I2ftSqd2mvKHGo85XR0u7Ru3C/Hxsy/0TkfCtjrmAbPdzLGasmoiBxplpDXlPvdjX9u7srIMfgasNA==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+    dependencies:
+      caniuse-lite: 1.0.30001497
+      electron-to-chromium: 1.4.425
+      node-releases: 2.0.12
+      update-browserslist-db: 1.0.11(browserslist@4.21.7)
+    dev: true
+
   /buffer-from@1.1.2:
     resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
     dev: true
@@ -1867,6 +2334,10 @@ packages:
     resolution: {integrity: sha512-mImKeCkyGDAHNywYFA4bqnLAzTUvVkqPvhY4DV47X+Gl2c5Z8c3KNETnXp14GQt11LvxE8AwjzGxJ+rsikiOzg==}
     dev: true
 
+  /caniuse-lite@1.0.30001497:
+    resolution: {integrity: sha512-I4/duVK4wL6rAK/aKZl3HXB4g+lIZvaT4VLAn2rCgJ38jVLb0lv2Xug6QuqmxXFVRJMF74SPPWPJ/1Sdm3vCzw==}
+    dev: true
+
   /capital-case@1.0.4:
     resolution: {integrity: sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==}
     dependencies:
@@ -2471,6 +2942,10 @@ packages:
     resolution: {integrity: sha512-niPzKBSYPG06gxLKO0c2kEmgdRMTtIbNrBlvD31Ld8Q57b/K0218U4j8u/OOt25XE1eFOn47FcmQVdx9R1qqxA==}
     dev: true
 
+  /electron-to-chromium@1.4.425:
+    resolution: {integrity: sha512-wv1NufHxu11zfDbY4fglYQApMswleE9FL/DSeyOyauVXDZ+Kco96JK/tPfBUaDqfRarYp2WH2hJ/5UnVywp9Jg==}
+    dev: true
+
   /emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
     dev: true
@@ -2546,218 +3021,40 @@ packages:
       is-symbol: 1.0.4
     dev: true
 
-  /esbuild-android-64@0.14.43:
-    resolution: {integrity: sha512-kqFXAS72K6cNrB6RiM7YJ5lNvmWRDSlpi7ZuRZ1hu1S3w0zlwcoCxWAyM23LQUyZSs1PbjHgdbbfYAN8IGh6xg==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [android]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-android-arm64@0.14.43:
-    resolution: {integrity: sha512-bKS2BBFh+7XZY9rpjiHGRNA7LvWYbZWP87pLehggTG7tTaCDvj8qQGOU/OZSjCSKDYbgY7Q+oDw8RlYQ2Jt2BA==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [android]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-darwin-64@0.14.43:
-    resolution: {integrity: sha512-/3PSilx011ttoieRGkSZ0XV8zjBf2C9enV4ScMMbCT4dpx0mFhMOpFnCHkOK0pWGB8LklykFyHrWk2z6DENVUg==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-darwin-arm64@0.14.43:
-    resolution: {integrity: sha512-1HyFUKs8DMCBOvw1Qxpr5Vv/ThNcVIFb5xgXWK3pyT40WPvgYIiRTwJCvNs4l8i5qWF8/CK5bQxJVDjQvtv0Yw==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-freebsd-64@0.14.43:
-    resolution: {integrity: sha512-FNWc05TPHYgaXjbPZO5/rJKSBslfG6BeMSs8GhwnqAKP56eEhvmzwnIz1QcC9cRVyO+IKqWNfmHFkCa1WJTULA==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [freebsd]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-freebsd-arm64@0.14.43:
-    resolution: {integrity: sha512-amrYopclz3VohqisOPR6hA3GOWA3LZC1WDLnp21RhNmoERmJ/vLnOpnrG2P/Zao+/erKTCUqmrCIPVtj58DRoA==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [freebsd]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-linux-32@0.14.43:
-    resolution: {integrity: sha512-KoxoEra+9O3AKVvgDFvDkiuddCds6q71owSQEYwjtqRV7RwbPzKxJa6+uyzUulHcyGVq0g15K0oKG5CFBcvYDw==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-linux-64@0.14.43:
-    resolution: {integrity: sha512-EwINwGMyiJMgBby5/SbMqKcUhS5AYAZ2CpEBzSowsJPNBJEdhkCTtEjk757TN/wxgbu3QklqDM6KghY660QCUw==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-linux-arm64@0.14.43:
-    resolution: {integrity: sha512-UlSpjMWllAc70zYbHxWuDS3FJytyuR/gHJYBr8BICcTNb/TSOYVBg6U7b3jZ3mILTrgzwJUHwhEwK18FZDouUQ==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-linux-arm@0.14.43:
-    resolution: {integrity: sha512-e6YzQUoDxxtyamuF12eVzzRC7bbEFSZohJ6igQB9tBqnNmIQY3fI6Cns3z2wxtbZ3f2o6idkD2fQnlvs2902Dg==}
-    engines: {node: '>=12'}
-    cpu: [arm]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-linux-mips64le@0.14.43:
-    resolution: {integrity: sha512-f+v8cInPEL1/SDP//CfSYzcDNgE4CY3xgDV81DWm3KAPWzhvxARrKxB1Pstf5mB56yAslJDxu7ryBUPX207EZA==}
-    engines: {node: '>=12'}
-    cpu: [mips64el]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-linux-ppc64le@0.14.43:
-    resolution: {integrity: sha512-5wZYMDGAL/K2pqkdIsW+I4IR41kyfHr/QshJcNpUfK3RjB3VQcPWOaZmc+74rm4ZjVirYrtz+jWw0SgxtxRanA==}
-    engines: {node: '>=12'}
-    cpu: [ppc64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-linux-riscv64@0.14.43:
-    resolution: {integrity: sha512-lYcAOUxp85hC7lSjycJUVSmj4/9oEfSyXjb/ua9bNl8afonaduuqtw7hvKMoKuYnVwOCDw4RSfKpcnIRDWq+Bw==}
-    engines: {node: '>=12'}
-    cpu: [riscv64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-linux-s390x@0.14.43:
-    resolution: {integrity: sha512-27e43ZhHvhFE4nM7HqtUbMRu37I/4eNSUbb8FGZWszV+uLzMIsHDwLoBiJmw7G9N+hrehNPeQ4F5Ujad0DrUKQ==}
-    engines: {node: '>=12'}
-    cpu: [s390x]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-netbsd-64@0.14.43:
-    resolution: {integrity: sha512-2mH4QF6hHBn5zzAfxEI/2eBC0mspVsZ6UVo821LpAJKMvLJPBk3XJO5xwg7paDqSqpl7p6IRrAenW999AEfJhQ==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [netbsd]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-openbsd-64@0.14.43:
-    resolution: {integrity: sha512-ZhQpiZjvqCqO8jKdGp9+8k9E/EHSA+zIWOg+grwZasI9RoblqJ1QiZqqi7jfd6ZrrG1UFBNGe4m0NFxCFbMVbg==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [openbsd]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-sunos-64@0.14.43:
-    resolution: {integrity: sha512-DgxSi9DaHReL9gYuul2rrQCAapgnCJkh3LSHPKsY26zytYppG0HgkgVF80zjIlvEsUbGBP/GHQzBtrezj/Zq1Q==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [sunos]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-windows-32@0.14.43:
-    resolution: {integrity: sha512-Ih3+2O5oExiqm0mY6YYE5dR0o8+AspccQ3vIAtRodwFvhuyGLjb0Hbmzun/F3Lw19nuhPMu3sW2fqIJ5xBxByw==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-windows-64@0.14.43:
-    resolution: {integrity: sha512-8NsuNfI8xwFuJbrCuI+aBqNTYkrWErejFO5aYM+yHqyHuL8mmepLS9EPzAzk8rvfaJrhN0+RvKWAcymViHOKEw==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-windows-arm64@0.14.43:
-    resolution: {integrity: sha512-7ZlD7bo++kVRblJEoG+cepljkfP8bfuTPz5fIXzptwnPaFwGS6ahvfoYzY7WCf5v/1nX2X02HDraVItTgbHnKw==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild@0.11.3:
     resolution: {integrity: sha512-BzVRHcCtFepjS9WcqRjqoIxLqgpK21a8J4Zi4msSGxDxiXVO1IbcqT1KjhdDDnJxKfe7bvzZrvMEX+bVO0Elcw==}
     hasBin: true
     requiresBuild: true
     dev: true
 
-  /esbuild@0.14.43:
-    resolution: {integrity: sha512-Uf94+kQmy/5jsFwKWiQB4hfo/RkM9Dh7b79p8yqd1tshULdr25G2szLz631NoH3s2ujnKEKVD16RmOxvCNKRFA==}
+  /esbuild@0.17.19:
+    resolution: {integrity: sha512-XQ0jAPFkK/u3LcVRcvVHQcTIqD6E2H1fvZMA5dQPSOWb3suUbWbfbRf94pjc0bNzRYLfIrDRQXr7X+LHIm5oHw==}
     engines: {node: '>=12'}
     hasBin: true
     requiresBuild: true
     optionalDependencies:
-      esbuild-android-64: 0.14.43
-      esbuild-android-arm64: 0.14.43
-      esbuild-darwin-64: 0.14.43
-      esbuild-darwin-arm64: 0.14.43
-      esbuild-freebsd-64: 0.14.43
-      esbuild-freebsd-arm64: 0.14.43
-      esbuild-linux-32: 0.14.43
-      esbuild-linux-64: 0.14.43
-      esbuild-linux-arm: 0.14.43
-      esbuild-linux-arm64: 0.14.43
-      esbuild-linux-mips64le: 0.14.43
-      esbuild-linux-ppc64le: 0.14.43
-      esbuild-linux-riscv64: 0.14.43
-      esbuild-linux-s390x: 0.14.43
-      esbuild-netbsd-64: 0.14.43
-      esbuild-openbsd-64: 0.14.43
-      esbuild-sunos-64: 0.14.43
-      esbuild-windows-32: 0.14.43
-      esbuild-windows-64: 0.14.43
-      esbuild-windows-arm64: 0.14.43
+      '@esbuild/android-arm': 0.17.19
+      '@esbuild/android-arm64': 0.17.19
+      '@esbuild/android-x64': 0.17.19
+      '@esbuild/darwin-arm64': 0.17.19
+      '@esbuild/darwin-x64': 0.17.19
+      '@esbuild/freebsd-arm64': 0.17.19
+      '@esbuild/freebsd-x64': 0.17.19
+      '@esbuild/linux-arm': 0.17.19
+      '@esbuild/linux-arm64': 0.17.19
+      '@esbuild/linux-ia32': 0.17.19
+      '@esbuild/linux-loong64': 0.17.19
+      '@esbuild/linux-mips64el': 0.17.19
+      '@esbuild/linux-ppc64': 0.17.19
+      '@esbuild/linux-riscv64': 0.17.19
+      '@esbuild/linux-s390x': 0.17.19
+      '@esbuild/linux-x64': 0.17.19
+      '@esbuild/netbsd-x64': 0.17.19
+      '@esbuild/openbsd-x64': 0.17.19
+      '@esbuild/sunos-x64': 0.17.19
+      '@esbuild/win32-arm64': 0.17.19
+      '@esbuild/win32-ia32': 0.17.19
+      '@esbuild/win32-x64': 0.17.19
     dev: true
 
   /escalade@3.1.1:
@@ -3469,10 +3766,6 @@ packages:
     dependencies:
       function-bind: 1.1.1
 
-  /hash-sum@2.0.0:
-    resolution: {integrity: sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==}
-    dev: true
-
   /he@1.2.0:
     resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
     hasBin: true
@@ -3928,6 +4221,12 @@ packages:
     hasBin: true
     dev: true
 
+  /json5@2.2.3:
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
+    engines: {node: '>=6'}
+    hasBin: true
+    dev: true
+
   /jsonfile@6.1.0:
     resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
     dependencies:
@@ -4053,6 +4352,12 @@ packages:
       tslib: 2.4.0
     dev: true
 
+  /lru-cache@5.1.1:
+    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
+    dependencies:
+      yallist: 3.1.1
+    dev: true
+
   /lru-cache@6.0.0:
     resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
     engines: {node: '>=10'}
@@ -4185,6 +4490,10 @@ packages:
     resolution: {integrity: sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==}
     dev: true
 
+  /mitt@3.0.0:
+    resolution: {integrity: sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ==}
+    dev: false
+
   /mkdirp@1.0.4:
     resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==}
     engines: {node: '>=10'}
@@ -4267,6 +4576,12 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  /nanoid@3.3.6:
+    resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+    dev: true
+
   /natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
     dev: true
@@ -4308,6 +4623,10 @@ packages:
       upper-case: 2.0.2
     dev: true
 
+  /node-releases@2.0.12:
+    resolution: {integrity: sha512-QzsYKWhXTWx8h1kIvqfnC++o0pEmpRQA/aenALsL2F4pqNVr7YzcdMlDij5WBnwftRbJCNJL/O7zdKaxKPHqgQ==}
+    dev: true
+
   /node-releases@2.0.5:
     resolution: {integrity: sha512-U9h1NLROZTq9uE1SNffn6WuPDg8icmi3ns4rEl/oTfIle4iLjTliCzgTsbaIFMq/Xn078/lfY/BL0GWZ+psK4Q==}
     dev: true
@@ -4697,6 +5016,15 @@ packages:
       picocolors: 1.0.0
       source-map-js: 1.0.2
 
+  /postcss@8.4.24:
+    resolution: {integrity: sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.6
+      picocolors: 1.0.0
+      source-map-js: 1.0.2
+    dev: true
+
   /prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
@@ -4904,6 +5232,14 @@ packages:
       fsevents: 2.3.2
     dev: true
 
+  /rollup@3.24.0:
+    resolution: {integrity: sha512-OgraHOIg2YpHQTjl0/ymWfFNBEyPucB7lmhXrQUh38qNOegxLapSPFs9sNr0qKR75awW41D93XafoR2QfhBdUQ==}
+    engines: {node: '>=14.18.0', npm: '>=8.0.0'}
+    hasBin: true
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
+
   /run-async@2.4.1:
     resolution: {integrity: sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==}
     engines: {node: '>=0.12.0'}
@@ -5294,6 +5630,10 @@ packages:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
     dev: true
 
+  /three@0.143.0:
+    resolution: {integrity: sha512-oKcAGYHhJ46TGEuHjodo2n6TY2R6lbvrkp+feKZxqsUL/WkH7GKKaeu6RHeyb2Xjfk2dPLRKLsOP0KM2VgT8Zg==}
+    dev: false
+
   /three@0.145.0:
     resolution: {integrity: sha512-EKoHQEtEJ4CB6b2BGMBgLZrfwLjXcSUfoI/MiIXUuRpeYsfK5aPWbYhdtIVWOH+x6X0TouldHKHBuc/LAiFzAw==}
     dev: false
@@ -5477,6 +5817,17 @@ packages:
     engines: {node: '>= 0.8'}
     dev: true
 
+  /update-browserslist-db@1.0.11(browserslist@4.21.7):
+    resolution: {integrity: sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+    dependencies:
+      browserslist: 4.21.7
+      escalade: 3.1.1
+      picocolors: 1.0.0
+    dev: true
+
   /upper-case-first@2.0.2:
     resolution: {integrity: sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==}
     dependencies:
@@ -5571,7 +5922,7 @@ packages:
       global: 4.4.0
     dev: false
 
-  /vite-plugin-compression@0.5.1(vite@2.9.9):
+  /vite-plugin-compression@0.5.1(vite@4.3.6):
     resolution: {integrity: sha512-5QJKBDc+gNYVqL/skgFAP81Yuzo9R+EAf19d+EtsMF/i8kFUpNi3J/H01QD3Oo8zBQn+NzoCIFkpPLynoOzaJg==}
     peerDependencies:
       vite: '>=2.0.0'
@@ -5579,12 +5930,12 @@ packages:
       chalk: 4.1.2
       debug: 4.3.4
       fs-extra: 10.1.0
-      vite: 2.9.9(sass@1.52.3)
+      vite: 4.3.6(@types/node@16.11.40)(sass@1.52.3)
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /vite-plugin-html@3.2.0(vite@2.9.9):
+  /vite-plugin-html@3.2.0(vite@4.3.6):
     resolution: {integrity: sha512-2VLCeDiHmV/BqqNn5h2V+4280KRgQzCFN47cst3WiNK848klESPQnzuC3okH5XHtgwHH/6s1Ho/YV6yIO0pgoQ==}
     peerDependencies:
       vite: '>=2.0.0'
@@ -5601,7 +5952,7 @@ packages:
       html-minifier-terser: 6.1.0
       node-html-parser: 5.4.2
       pathe: 0.2.0
-      vite: 2.9.9(sass@1.52.3)
+      vite: 4.3.6(@types/node@16.11.40)(sass@1.52.3)
     dev: true
 
   /vite-plugin-importer@0.2.5:
@@ -5614,7 +5965,7 @@ packages:
       - supports-color
     dev: true
 
-  /vite-plugin-mock@2.9.6(mockjs@1.1.0)(rollup@2.75.6)(vite@2.9.9):
+  /vite-plugin-mock@2.9.6(mockjs@1.1.0)(rollup@2.75.6)(vite@4.3.6):
     resolution: {integrity: sha512-/Rm59oPppe/ncbkSrUuAxIQihlI2YcBmnbR4ST1RA2VzM1C0tEQc1KlbQvnUGhXECAGTaQN2JyasiwXP6EtKgg==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
@@ -5631,7 +5982,7 @@ packages:
       fast-glob: 3.2.11
       mockjs: 1.1.0
       path-to-regexp: 6.2.1
-      vite: 2.9.9(sass@1.52.3)
+      vite: 4.3.6(@types/node@16.11.40)(sass@1.52.3)
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -5645,26 +5996,35 @@ packages:
       monaco-editor: 0.33.0
     dev: true
 
-  /vite@2.9.9(sass@1.52.3):
-    resolution: {integrity: sha512-ffaam+NgHfbEmfw/Vuh6BHKKlI/XIAhxE5QSS7gFLIngxg171mg1P3a4LSRME0z2ZU1ScxoKzphkipcYwSD5Ew==}
-    engines: {node: '>=12.2.0'}
+  /vite@4.3.6(@types/node@16.11.40)(sass@1.52.3):
+    resolution: {integrity: sha512-cqIyLSbA6gornMS659AXTVKF7cvSHMdKmJJwQ9DXq3lwsT1uZSdktuBRlpHQ8VnOWx0QHtjDwxPpGtyo9Fh/Qg==}
+    engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
     peerDependencies:
+      '@types/node': '>= 14'
       less: '*'
       sass: '*'
       stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
     peerDependenciesMeta:
+      '@types/node':
+        optional: true
       less:
         optional: true
       sass:
         optional: true
       stylus:
         optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
     dependencies:
-      esbuild: 0.14.43
-      postcss: 8.4.14
-      resolve: 1.22.0
-      rollup: 2.75.6
+      '@types/node': 16.11.40
+      esbuild: 0.17.19
+      postcss: 8.4.24
+      rollup: 3.24.0
       sass: 1.52.3
     optionalDependencies:
       fsevents: 2.3.2
@@ -5679,6 +6039,14 @@ packages:
       vue: 3.2.37
     dev: false
 
+  /vue-3d-loader@2.1.7:
+    resolution: {integrity: sha512-nOwCfxs7r5u4rvb5ir1TecUG9kHnwVYRhjwvuXnSbmIh+8v5+UG90YzXWMjRX5qu9EYqJrIUAJyzE+6SRfamcw==}
+    dependencies:
+      '@types/three': 0.143.2
+      three: 0.143.0
+      vue: 3.2.37
+    dev: false
+
   /vue-demi@0.12.5(vue@3.2.37):
     resolution: {integrity: sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==}
     engines: {node: '>=12'}
@@ -5870,7 +6238,7 @@ packages:
       '@webassemblyjs/wasm-parser': 1.11.1
       acorn: 8.7.1
       acorn-import-assertions: 1.8.0(acorn@8.7.1)
-      browserslist: 4.20.4
+      browserslist: 4.21.7
       chrome-trace-event: 1.0.3
       enhanced-resolve: 5.12.0
       es-module-lexer: 0.9.3
@@ -5945,6 +6313,10 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /yallist@3.1.1:
+    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
+    dev: true
+
   /yallist@4.0.0:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
     dev: true

+{
+    "nodes": [
+      {
+        "id": "0",
+        "name": "Myriel",
+        "symbolSize": "@integer(0, 50)",
+        "x": -266.82776,
+        "y": 299.6904,
+        "value": "@integer(0, 50)",
+        "category": 3
+      },
+      {
+        "id": "1",
+        "name": "Napoleon",
+        "symbolSize": "@integer(0, 50)",
+        "x": -418.08344,
+        "y": 446.8853,
+        "value": "@integer(0, 50)",
+        "category": 5
+      },
+      {
+        "id": "2",
+        "name": "MlleBaptistine",
+        "symbolSize": "@integer(0, 50)",
+        "x": -212.76357,
+        "y": 245.29176,
+        "value": "@integer(0, 50)",
+        "category": 1
+      },
+      {
+        "id": "3",
+        "name": "MmeMagloire",
+        "symbolSize": "@integer(0, 50)",
+        "x": -242.82404,
+        "y": 235.26283,
+        "value": "@integer(0, 50)",
+        "category": 1
+      },
+      {
+        "id": "4",
+        "name": "CountessDeLo",
+        "symbolSize": "@integer(0, 50)",
+        "x": -379.30386,
+        "y": 429.06424,
+        "value": "@integer(0, 50)",
+        "category": 0
+      }
+    ],
+    "links": [
+      {
+        "source": "1",
+        "target": "@integer(2, 4)"
+      },
+      {
+        "source": "2",
+        "target": "@integer(3, 4)"
+      },
+      {
+        "source": "3",
+        "target": "@integer(0, 2)"
+      },
+      {
+        "source": "3",
+        "target": "@integer(0, 1)"
+      },
+      {
+        "source": "4",
+        "target": "@integer(0, 3)"
+      }
+    ],
+    "categories": [
+      {
+        "name": "A"
+      },
+      {
+        "name": "B"
+      },
+      {
+        "name": "C"
+      },
+      {
+        "name": "D"
+      },
+      {
+        "name": "E"
+      },
+      {
+        "name": "F"
+      },
+      {
+        "name": "G"
+      },
+      {
+        "name": "H"
+      },
+      {
+        "name": "I"
+      }
+    ]
+  }
\ No newline at end of file

@@ -19,6 +19,8 @@ export const capsuleUrl = '/mock/capsule'
 export const wordCloudUrl = '/mock/wordCloud'
 export const treemapUrl = '/mock/treemap'
 export const threeEarth01Url = '/mock/threeEarth01Data'
+export const sankeyUrl = '/mock/sankey'
+export const graphUrl = '/mock/graphData'
 
 const mockObject: MockMethod[] = [
   {
@@ -103,6 +105,16 @@ const mockObject: MockMethod[] = [
     method: RequestHttpEnum.GET,
     response: () => test.threeEarth01Data
   },
+  {
+    url: sankeyUrl,
+    method: RequestHttpEnum.GET,
+    response: () => test.fetchSankey
+  },
+  {
+    url: graphUrl,
+    method: RequestHttpEnum.GET,
+    response: () => test.graphData
+  },
 ]
 
 export default mockObject

+{
+  "label": [
+    {
+      "name": "a"
+    },
+    {
+      "name": "b"
+    },
+    {
+      "name": "a1"
+    },
+    {
+      "name": "a2"
+    },
+    {
+      "name": "b1"
+    },
+    {
+      "name": "b2"
+    }
+  ],
+  "links": [
+    {
+      "source": "a",
+      "target": "a1",
+      "value": "@integer(0, 10)"
+    },
+    {
+      "source": "a",
+      "target": "a2",
+      "value": "@integer(0, 10)"
+    },
+    {
+      "source": "b",
+      "target": "b1",
+      "value": "@integer(0, 10)"
+    },
+    {
+      "source": "a",
+      "target": "b1",
+      "value": "@integer(0, 10)"
+    },
+    {
+      "source": "b1",
+      "target": "a1",
+      "value": "@integer(0, 10)"
+    },
+    {
+      "source": "b1",
+      "target": "b2",
+      "value": "@integer(0, 10)"
+    }
+  ],
+  "levels": [
+    {
+      "depth": 0,
+      "itemStyle": {
+        "color": "#decbe4"
+      },
+      "lineStyle": {
+        "color": "source",
+        "opacity": 0.9
+      }
+    },
+    {
+      "depth": 1,
+      "itemStyle": {
+        "color": "#b3cde3"
+      },
+      "lineStyle": {
+        "color": "source",
+        "opacity": 0.6
+      }
+    },
+    {
+      "depth": 2,
+      "itemStyle": {
+        "color": "#ccebc5"
+      },
+      "lineStyle": {
+        "color": "source",
+        "opacity": 0.6
+      }
+    }
+  ]
+}

@@ -2,6 +2,8 @@ import heatmapJson from './heatMapData.json'
 import scatterJson from './scatter.json'
 import mapJson from './map.json'
 import tTreemapJson from './treemap.json'
+import sankeyJson from './sankey.json'
+import graphDataJson from './graph.json'
 
 export default {
   // 单图表
@@ -219,5 +221,19 @@ export default {
         'endArray|10': [{ name: '@name', N: '@integer(10, 100)', E: '@integer(10, 100)' }]
       }
     ]
-  }
+  },
+  // 桑基图
+  fetchSankey: {
+    code: 0,
+    status: 200,
+    msg: '请求成功',
+    data: sankeyJson
+  },
+  // 关系图
+  graphData: {
+    code: 0,
+    status: 200,
+    msg: '请求成功',
+    data: graphDataJson
+  },
 }

@@ -35,7 +35,11 @@ import Person from './person.png'
 
 import { icon } from '@/plugins'
 import { useUserStore } from '@/store/external/modules/user'
-const { ChatboxEllipsesIcon, PersonIcon, LogOutOutlineIcon, SettingsSharpIcon } = icon.ionicons5
+const { 
+  PersonIcon,
+  LogOutOutlineIcon,
+  SettingsSharpIcon
+} = icon.ionicons5
 
 const t = window['$t']
 

@@ -257,9 +257,36 @@
       <n-switch v-model:value="legend.show" size="small"></n-switch>
     </template>
     <setting-item-box name="图例文字">
-      <setting-item>
+      <setting-item name="颜色">
         <n-color-picker size="small" v-model:value="legend.textStyle.color"></n-color-picker>
       </setting-item>
+      <setting-item name="大小">
+        <n-input-number v-model:value="legend.textStyle.fontSize" :min="1" size="small"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="图例位置">
+      <setting-item name="x轴">
+        <n-select v-model:value="legend.x" size="small" :options="legendConfig.lengendX" />
+      </setting-item>
+      <setting-item name="y轴">
+        <n-select v-model:value="legend.y" size="small" :options="legendConfig.lengendY" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="图例信息">
+      <setting-item name="方向">
+        <n-select v-model:value="legend.orient" size="small" :options="legendConfig.orient" />
+      </setting-item>
+      <setting-item name="形状">
+        <n-select v-model:value="legend.icon" size="small" :options="legendConfig.shape" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="图例大小">
+      <setting-item name="宽">
+        <n-input-number v-model:value="legend.itemWidth" :min="1" size="small"></n-input-number>
+      </setting-item>
+      <setting-item name="高">
+        <n-input-number v-model:value="legend.itemHeight" :min="1" size="small"></n-input-number>
+      </setting-item>
     </setting-item-box>
   </collapse-item>
 
@@ -309,9 +336,9 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, computed } from 'vue'
+import { PropType, computed, watch } from 'vue'
 import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
-import { axisConfig } from '@/packages/chartConfiguration/echarts/index'
+import { axisConfig, legendConfig } from '@/packages/chartConfiguration/echarts/index'
 import { CollapseItem, SettingItemBox, SettingItem, GlobalSettingPosition } from '@/components/Pages/ChartItemSetting'
 import { icon } from '@/plugins'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
@@ -360,4 +387,14 @@ const grid = computed(() => {
 const visualMap = computed(() => {
   return props.optionData.visualMap
 })
+
+// 监听legend color颜色改变type = scroll的颜色
+watch(() => legend.value && legend.value.textStyle.color, (newVal) => {
+  if (legend.value && newVal) {
+    legend.value.pageTextStyle.color = newVal
+  } 
+}, {
+  immediate: true,
+  deep: true,
+})
 </script>

 <template>
-  <div class="go-Flipper" :class="[flipType, { go: isFlipping }]">
+  <div class="go-flipper" :class="[flipType, { go: isFlipping }]">
     <div class="digital front" :data-front="frontTextFromData"></div>
     <div class="digital back" :data-back="backTextFromData"></div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, PropType, watch } from 'vue'
-import { FlipType }  from './index'
+import { ref, PropType, watch, nextTick } from 'vue'
+import { FlipType } from './index'
 
 const props = defineProps({
   flipType: {
@@ -43,6 +43,10 @@ const props = defineProps({
   backColor: {
     type: String,
     default: '#000000'
+  },
+  borderWidth: {
+    type: Number,
+    default: 2
   }
 })
 
@@ -50,19 +54,27 @@ const isFlipping = ref(false)
 const frontTextFromData = ref(props.count || 0)
 const backTextFromData = ref(props.count || 0)
 
+let timeoutID: any = 0
+
 // 翻牌
-const flip = (front: string | number, back: string | number) => {
+const flip = async (front: string | number, back: string | number) => {
   // 如果处于翻转中，则不执行
-  if (isFlipping.value) return
+  if (isFlipping.value) {
+    isFlipping.value = false // 立即结束此次动画
+    clearTimeout(timeoutID) // 清除上一个计时器任务
+    await nextTick()
+    await flip(front, back) // 开始最后一次翻牌任务
+    return
+  }
+
   // 设置翻盘前后数据
   backTextFromData.value = back
   frontTextFromData.value = front
-
   // 设置翻转状态为true
   isFlipping.value = true
 
   // 翻牌结束的行为
-  setTimeout(() => {
+  timeoutID = setTimeout(() => {
     isFlipping.value = false // 设置翻转状态为false
     frontTextFromData.value = back
   }, props.duration)
@@ -86,6 +98,7 @@ $radius: v-bind('`${props.radius}px`');
 $width: v-bind('`${props.width}px`');
 $height: v-bind('`${props.height}px`');
 $perspective: v-bind('`${props.height * 2}px`');
+$borderWidth: v-bind('`${props.borderWidth * 2}px`');
 $speed: v-bind('`${props.duration / 1000}s`');
 $shadowColor: #000000;
 $lineColor: #4a9ef8;
@@ -125,13 +138,12 @@ $lineColor: #4a9ef8;
 }
 // #endregion
 
-.go-Flipper {
+.go-flipper {
   display: inline-block;
   position: relative;
   width: $width;
   height: $height;
   line-height: $height;
-  border: solid 1px $backColor;
   border-radius: $radius;
   background: $frontColor;
   font-size: $width;
@@ -139,6 +151,17 @@ $lineColor: #4a9ef8;
   box-shadow: 0 0 6px rgba($color: $shadowColor, $alpha: 0.5); // 阴影部分
   text-align: center;
   // font-family: 'Helvetica Neue';
+  &::after {
+    content: '';
+    position: absolute;
+    z-index: 10;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    box-shadow: inset 0 0 $borderWidth 0 $frontColor; // 内测阴影部分
+    border-radius: $radius;
+  }
 
   .digital:before,
   .digital:after {
@@ -191,6 +214,8 @@ $lineColor: #4a9ef8;
   }
   &.down.go .back:after {
     animation: backFlipDown $speed ease-in-out both;
+    box-shadow: 0 2px $borderWidth 0 $frontColor;
+    backface-visibility: hidden;
   }
   /*向上翻*/
   &.up .front:after {
@@ -213,6 +238,8 @@ $lineColor: #4a9ef8;
   }
   &.up.go .back:before {
     animation: backFlipUp $speed ease-in-out both;
+    box-shadow: 0 -2px $borderWidth 0 $frontColor;
+    backface-visibility: hidden;
   }
 }
 </style>

@@ -12,6 +12,7 @@ export enum DragKeyEnum {
 // 不同页面保存操作
 export enum SavePageEnum {
   CHART = 'SaveChart',
+  CHART_TO_PREVIEW = 'ChartToPreview',
   JSON = 'SaveJSON',
   CLOSE = 'close'
 }

@@ -12,5 +12,7 @@ export enum StorageEnum {
   // 工作台布局配置
   GO_CHART_LAYOUT_STORE = 'GO_CHART_LAYOUT',
   // 工作台需要保存的数据
-  GO_CHART_STORAGE_LIST = 'GO_CHART_STORAGE_LIST'
+  GO_CHART_STORAGE_LIST = 'GO_CHART_STORAGE_LIST',
+  // 用户存储的图片媒体
+  GO_USER_MEDIA_PHOTOS = 'GO_USER_MEDIA_PHOTOS'
 }

@@ -80,10 +80,11 @@ export const originUseChartDataFetch = (
           if (res) {
             try {
               const filter = targetComponent.filter
-              echartsUpdateHandle(newFunctionHandle(res?.data, res, filter))
+              const { data } = res
+              echartsUpdateHandle(newFunctionHandle(data, res, filter))
               // 更新回调函数
               if (updateCallback) {
-                updateCallback(newFunctionHandle(res?.data, res, filter))
+                updateCallback(newFunctionHandle(data, res, filter))
               }
             } catch (error) {
               console.error(error)

@@ -2,7 +2,7 @@
   <router-view #default="{ Component, route }">
     <transition name="fade" mode="out-in" appear>
       <component
-        v-if="route.noKeepAlive"
+        v-if="route.meta.noKeepAlive"
         :is="Component"
         :key="route.fullPath"
       ></component>

 export * from './axis'
 export * from './line'
-export * from './label'
\ No newline at end of file
+export * from './label'
+export * from './legend'
\ No newline at end of file

+export const legendConfig = {
+  // X轴位置
+  lengendX: [
+    {
+      label: '靠左',
+      value: 'left'
+    },
+    {
+      label: '居中',
+      value: 'center'
+    },
+    {
+      label: '靠右',
+      value: 'right'
+    }
+  ],
+  // y轴位置
+  lengendY: [
+    {
+      label: '靠上',
+      value: 'top'
+    },
+    {
+      label: '居中',
+      value: 'center'
+    },
+    {
+      label: '靠下',
+      value: 'bottom'
+    }
+  ],
+  // 排列方向
+  orient: [
+    {
+      label: '水平',
+      value: 'horizontal'
+    },
+    {
+      label: '垂直',
+      value: 'vertical'
+    }
+  ],
+  // 形状
+  shape: [
+    {
+      label: '圆形',
+      value: 'circle'
+    },
+    {
+      label: '方形',
+      value: 'rect'
+    },
+    {
+      label: '圆角方形',
+      value: 'roundRect'
+    },
+    {
+      label: '三角形',
+      value: 'triangle'
+    },
+    {
+      label: '钢笔形',
+      value: 'pin'
+    },
+    {
+      label: '箭头形',
+      value: 'arrow'
+    }
+  ]
+}

 <template>
-  <v-chart
-    ref="vChartRef"
-    :init-options="initOptions"
-    :theme="themeColor"
-    :option="option"
-    :manual-update="isPreview()"
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()"
     :update-options="{
       replaceMerge: replaceMergeArr
-    }"
-    autoresize
-  ></v-chart>
+    }" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
@@ -27,6 +20,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 import { isPreview } from '@/utils'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import isObject from 'lodash/isObject'
+import cloneDeep from 'lodash/cloneDeep'
 
 const props = defineProps({
   themeSetting: {
@@ -61,11 +55,23 @@ watch(
       if (!isObject(newData) || !('dimensions' in newData)) return
       if (Array.isArray(newData?.dimensions)) {
         const seriesArr = []
-        for (let i = 0; i < newData.dimensions.length - 1; i++) {
-          seriesArr.push(seriesItem)
+        // 对oldData进行判断，防止传入错误数据之后对旧维度判断产生干扰
+        // 此处计算的是dimensions的Y轴维度，若是dimensions.length为0或1，则默认为1，排除X轴维度干扰
+        const oldDimensions = Array.isArray(oldData?.dimensions)&&oldData.dimensions.length >= 1 ? oldData.dimensions.length : 1; 
+        const newDimensions = newData.dimensions.length >= 1 ? newData.dimensions.length : 1;
+        const dimensionsGap = newDimensions - oldDimensions;
+        if (dimensionsGap < 0) {
+          props.chartConfig.option.series.splice(newDimensions - 1)
+        } else if (dimensionsGap > 0) {
+          if(!oldData || !oldData?.dimensions || !Array.isArray(oldData?.dimensions) || !oldData?.dimensions.length ) {
+              props.chartConfig.option.series=[]
+          }
+          for (let i = 0; i < dimensionsGap; i++) {
+            seriesArr.push(cloneDeep(seriesItem))
+          }
+          props.chartConfig.option.series.push(...seriesArr)
         }
         replaceMergeArr.value = ['series']
-        props.chartConfig.option.series = seriesArr
         nextTick(() => {
           replaceMergeArr.value = []
         })

@@ -26,6 +26,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 import { isPreview } from '@/utils'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import isObject from 'lodash/isObject'
+import cloneDeep from 'lodash/cloneDeep'
 
 const props = defineProps({
   themeSetting: {
@@ -61,7 +62,7 @@ watch(
       if (Array.isArray(newData?.dimensions)) {
         const seriesArr = []
         for (let i = 0; i < newData.dimensions.length - 1; i++) {
-          seriesArr.push(seriesItem)
+          seriesArr.push(cloneDeep(seriesItem))
         }
         replaceMergeArr.value = ['series']
         props.chartConfig.option.series = seriesArr

@@ -16,7 +16,8 @@ export enum ThemeEnum {
   MACARON = 'macaron',
   BLUE = 'blue',
   DARKBLUE = 'darkblue',
-  WINE = 'wine'
+  WINE = 'wine',
+  WEIXIN = 'tileLayer'
 }
 
 export enum LangEnum {

@@ -8,7 +8,7 @@ import AMapLoader from '@amap/amap-jsapi-loader'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartDataFetch } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { MarkerEnum } from './config'
+import { MarkerEnum, ThemeEnum } from './config'
 import { isArray } from '@/utils'
 
 const props = defineProps({
@@ -51,7 +51,6 @@ const initMap = (newData: any) => {
         resizeEnable: true,
         zoom: amapZindex.value, // 地图显示的缩放级别
         center: [amapLon.value, amapLat.value],
-        mapStyle: `amap://styles/${amapStyleKeyCustom.value !== '' ? amapStyleKeyCustom.value : amapStyleKey.value}`, //自定义地图的显示样式
         lang: lang.value,
         features: features.value,
         pitch: pitch.value, // 地图俯仰角度，有效范围 0 度- 83 度
@@ -60,6 +59,14 @@ const initMap = (newData: any) => {
         willReadFrequently: true
       })
       dataHandle(props.chartConfig.option.dataset)
+      let satellite = new AMap.TileLayer.Satellite()
+      let roadNet = new AMap.TileLayer.RoadNet()
+      if (newData.amapStyleKey === ThemeEnum.WEIXIN) {
+        mapIns.add([satellite, roadNet])
+      } else {
+        mapIns.remove([satellite, roadNet])
+        mapIns.setMapStyle(`amap://styles/${amapStyleKeyCustom.value !== '' ? amapStyleKeyCustom.value : amapStyleKey.value}`)
+      }
     })
     .catch(e => {})
 }

+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { DialConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const includes = []
+const option = {
+  backgroundColor: '#0E1327',
+  dataset:70,
+  series: [{
+      type: "gauge",
+      data: [{
+          value: 70,
+          itemStyle: { // 指针样式
+              color: '#2AF4FF'
+          }
+      }],
+      min: 0, //最小刻度
+      max: 100, //最大刻度
+      splitNumber: 10, //刻度数量
+      center: ['50%', '55%'],
+      radius: '80%',
+      axisLine: {
+        lineStyle: {
+        color: [
+            [0, 'rgba(0,212,230,0.5)'],
+            [1, 'rgba(28,128,245,0)']
+          ],
+          width: 170
+        }
+      },
+      axisLabel: { // 文字样式
+        color: '#eee', 
+        fontSize: 14,
+      },
+      axisTick: {
+        show: false,
+      },
+      splitLine: {
+        show: false,
+      },
+      detail: {
+        show: false,
+      },
+      pointer: {
+        length: '80%',
+        width: 4
+      },
+      animationDuration: 2000,
+    },
+    {
+      name: '外部刻度',
+      type: 'gauge',
+      center: ['50%', '55%'],
+      radius: '90%',
+      axisLine: {
+        show: true,
+        lineStyle: {
+          width: 25,
+          color: [ // 表盘外部颜色
+            [0, '#1369E380'],
+            [1, '#1369E380']
+          ],
+        }
+      }, 
+      axisLabel: {
+        show:false,
+      },
+      axisTick: {
+        splitNumber: 5,
+        lineStyle: { //刻度颜色
+          color: '#42E5FB',
+          width: 2,
+        },
+      },
+      splitLine: {
+        length: 15,
+        lineStyle: {
+          color: '#42E5FB',
+        }
+      },
+    },
+  ]
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = DialConfig.key
+  public chartConfig = cloneDeep(DialConfig)
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}

+<template>
+    <!-- 遍历 seriesList -->
+    <CollapseItem :name="`圆环`" :expanded="true">
+      <SettingItemBox name="数据">
+        <SettingItem name="数值">
+          <n-input-number v-model:value="config.dataset" :min="dialConfig.min" :max="dialConfig.max" :step="1" size="small" placeholder="数值">
+          </n-input-number>
+        </SettingItem>
+      </SettingItemBox>
+      <!-- Echarts 全局设置 -->
+      <!-- 表盘刻度字体 -->
+      <SettingItemBox name="字体">
+        <SettingItem name="颜色">
+          <n-color-picker size="small" :modes="['hex']" v-model:value="dialConfig.axisLabel.color"></n-color-picker>
+        </SettingItem>
+        <SettingItem name="字体大小">
+          <n-input-number
+            v-model:value="dialConfig.axisLabel.fontSize"
+            :min="0"
+            :step="1"
+            size="small"
+            placeholder="字体大小"
+          >
+          </n-input-number>
+        </SettingItem>
+      </SettingItemBox>
+      <!-- 表盘 -->
+      <SettingItemBox name="表盘外部">
+        <SettingItem name="颜色" >
+          <n-color-picker size="small" :modes="['hex']" v-model:value="config.series[1].axisLine.lineStyle.color[1][1]"></n-color-picker>
+        </SettingItem>
+      </SettingItemBox>
+      <!-- 指针 -->
+      <SettingItemBox name="指针">
+        <SettingItem name="颜色" >
+          <n-color-picker size="small" :modes="['hex']" v-model:value="dialConfig.data[0].itemStyle.color"></n-color-picker>
+        </SettingItem>
+        <SettingItem name="宽度">
+          <n-input-number v-model:value="dialConfig.pointer.width" :min="0" :step="1" size="small" placeholder="数值">
+          </n-input-number>
+        </SettingItem>
+      </SettingItemBox>
+      <SettingItemBox name="刻度">
+        <SettingItem name="最小值">
+          <n-input-number v-model:value="dialConfig.min" :min="0" :step="1" size="small" placeholder="数值">
+          </n-input-number>
+        </SettingItem>
+        <SettingItem name="最大值">
+          <n-input-number v-model:value="dialConfig.max" :min="0" :step="1" size="small" placeholder="数值">
+          </n-input-number>
+        </SettingItem>
+        <SettingItem name="颜色" >
+          <n-color-picker size="small" :modes="['hex']" v-model:value="config.series[1].axisTick.lineStyle.color" @update:value="updateClick"></n-color-picker>
+        </SettingItem>
+      </SettingItemBox>
+  
+    </CollapseItem>
+  </template>
+  
+  <script setup lang="ts">
+  import { PropType, computed } from 'vue'
+  import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+  import { GlobalThemeJsonType } from '@/settings/chartThemes'
+  
+  const props = defineProps({
+    optionData: {
+      type: Object as PropType<GlobalThemeJsonType>,
+      required: true
+    }
+  })
+  
+  const config = computed(() => {
+    return props.optionData
+  })
+  
+  const dialConfig = computed(() => {
+    return props.optionData.series[0]
+  })
+  
+  const updateClick = (val: any) => {
+    props.optionData.series[1].splitLine.lineStyle.color=val
+  }
+  </script>
++  
\ No newline at end of file

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const DialConfig: ConfigType = {
+  key: 'Dial',
+  chartKey: 'VDial',
+  conKey: 'VCDial',
+  title: '表盘',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.COMMON,
+  image:'dial.png'
+}

+<template>
+  <v-chart :theme="themeColor" :init-options="initOptions" :option="option.value" autoresize> </v-chart>
+</template>
+
+<script setup lang="ts">
+import { PropType, reactive, watch } from 'vue'
+import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { PieChart } from 'echarts/charts'
+import { mergeTheme } from '@/packages/public/chart'
+import config, { includes } from './config'
+import { useChartDataFetch } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent, TitleComponent } from 'echarts/components'
+
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
+use([DatasetComponent, CanvasRenderer, PieChart, GridComponent, TooltipComponent, LegendComponent, TitleComponent])
+
+const option = reactive({
+  value: {}
+})
+
+const dataHandle = (newData: any) => {
+  let config = props.chartConfig.option
+  config.series[0].data[0].value = newData
+  option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+  option.value = props.chartConfig.option
+}
+
+// 配置时
+watch(
+  () => props.chartConfig.option.dataset,
+  newData => {
+    try {
+      dataHandle(newData)
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    immediate: true,
+    deep: false
+  }
+)
+
+// 预览时
+useChartDataFetch(props.chartConfig, useChartEditStore, (resData: number) => {
+  // @ts-ignore
+  option.value.series[0].data[0].value = resData
+})
+</script>

+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { GraphConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+
+export const includes = []
+
+// 关系图布局
+export const GraphLayout = [
+  { label: '无', value: 'none' },
+  { label: '环形', value: 'circular' }
+]
+
+// 标签开关
+export const LabelSwitch = [
+  { label: '开启', value: 1 },
+  { label: '关闭', value: 0 }
+]
+
+// 标签位置
+export const LabelPosition = [
+  { label: '左侧', value: 'left' },
+  { label: '右侧', value: 'right' },
+  { label: '顶部', value: 'top' },
+  { label: '底部', value: 'bottom' },
+  { label: '内部', value: 'inside' },
+]
+
+export const option = {
+    dataset: { ...dataJson },
+    tooltip: {},
+    legend:{
+      show:true,
+      textStyle:{
+        color:"#eee",
+        fontSize: 14 ,
+      },
+      data: dataJson.categories.map(function (a) {
+          return a.name;
+      })
+    },
+    series: [
+      {
+        type: 'graph',
+        layout: 'none', // none circular环形布局
+        data: dataJson.nodes,
+        links: dataJson.links,
+        categories: dataJson.categories,
+        label: { // 标签
+          show: 1,
+          position: 'right',
+          formatter: '{b}'
+        },
+        labelLayout: {
+          hideOverlap: true
+        },
+        lineStyle: {
+          color: 'source', // 线条颜色
+          curveness: 0.2 // 线条卷曲程度
+        }
+      }
+    ]
+  };
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = GraphConfig.key
+  public chartConfig = cloneDeep(GraphConfig)
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}

+<template>
+  <div>
+    <CollapseItem name="关系图" :expanded="true">
+      <SettingItemBox name="样式">
+        <setting-item name="布局">
+          <n-select v-model:value="graphConfig.layout" :options="GraphLayout" size="small" />
+        </setting-item>
+      </SettingItemBox>
+      <SettingItemBox name="标签">
+        <setting-item name="展示">
+          <n-select v-model:value="graphConfig.label.show" :options="LabelSwitch" size="small" />
+        </setting-item>
+        <setting-item name="位置">
+          <n-select v-model:value="graphConfig.label.position" :options="LabelPosition" size="small" />
+        </setting-item>
+      </SettingItemBox>
+      <SettingItemBox name="线条">
+        <SettingItem name="弧线">
+        <!-- 需要输入两位的小数才会变化 -->
+          <n-input-number
+          v-model:value="optionData.series[0].lineStyle.curveness"
+          :min="0"
+          :step="0.01"
+          placeholder="弯曲程度"
+          size="small"
+        ></n-input-number>
+        </SettingItem>
+      </SettingItemBox>
+      <SettingItemBox name="图例">
+        <SettingItem name="颜色">
+          <n-color-picker
+            size="small"
+            :modes="['hex']"
+            v-model:value="optionData.legend.textStyle.color"
+        ></n-color-picker>
+        </SettingItem>
+        <SettingItem name="文本">
+          <n-input-number v-model:value="optionData.legend.textStyle.fontSize" :min="0" :step="1" size="small" placeholder="文字大小">
+          </n-input-number>
+        </SettingItem>
+      </SettingItemBox>
+    </CollapseItem>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { option, GraphLayout, LabelSwitch, LabelPosition } from './config'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option & GlobalThemeJsonType>,
+    required: true
+  }
+})
+
+const graphConfig = computed<typeof option.series[0]>(() => {
+  return props.optionData.series[0]
+})
+</script>

+{
+    "nodes": [
+      {
+        "id": "0",
+        "name": "Myriel",
+        "symbolSize": 19.12381,
+        "x": -266.82776,
+        "y": 299.6904,
+        "value": 28.685715,
+        "category": 0
+      },
+      {
+        "id": "1",
+        "name": "Napoleon",
+        "symbolSize": 2.6666666666666665,
+        "x": -418.08344,
+        "y": 446.8853,
+        "value": 4,
+        "category": 0
+      },
+      {
+        "id": "2",
+        "name": "MlleBaptistine",
+        "symbolSize": 6.323809333333333,
+        "x": -212.76357,
+        "y": 245.29176,
+        "value": 9.485714,
+        "category": 1
+      },
+      {
+        "id": "3",
+        "name": "MmeMagloire",
+        "symbolSize": 6.323809333333333,
+        "x": -242.82404,
+        "y": 235.26283,
+        "value": 9.485714,
+        "category": 1
+      },
+      {
+        "id": "4",
+        "name": "CountessDeLo",
+        "symbolSize": 2.6666666666666665,
+        "x": -379.30386,
+        "y": 429.06424,
+        "value": 4,
+        "category": 0
+      },
+      {
+        "id": "5",
+        "name": "Geborand",
+        "symbolSize": 2.6666666666666665,
+        "x": -417.26337,
+        "y": 406.03506,
+        "value": 4,
+        "category": 0
+      },
+      {
+        "id": "6",
+        "name": "Champtercier",
+        "symbolSize": 2.6666666666666665,
+        "x": -332.6012,
+        "y": 485.16974,
+        "value": 4,
+        "category": 0
+      },
+      {
+        "id": "7",
+        "name": "Cravatte",
+        "symbolSize": 2.6666666666666665,
+        "x": -382.69568,
+        "y": 475.09113,
+        "value": 4,
+        "category": 0
+      },
+      {
+        "id": "8",
+        "name": "Count",
+        "symbolSize": 2.6666666666666665,
+        "x": -320.384,
+        "y": 387.17325,
+        "value": 4,
+        "category": 0
+      },
+      {
+        "id": "9",
+        "name": "OldMan",
+        "symbolSize": 2.6666666666666665,
+        "x": -344.39832,
+        "y": 451.16772,
+        "value": 4,
+        "category": 0
+      },
+      {
+        "id": "10",
+        "name": "Labarre",
+        "symbolSize": 2.6666666666666665,
+        "x": -89.34107,
+        "y": 234.56128,
+        "value": 4,
+        "category": 1
+      },
+      {
+        "id": "11",
+        "name": "Valjean",
+        "symbolSize": 66.66666666666667,
+        "x": -87.93029,
+        "y": -6.8120565,
+        "value": 100,
+        "category": 1
+      },
+      {
+        "id": "12",
+        "name": "Marguerite",
+        "symbolSize": 4.495239333333333,
+        "x": -339.77908,
+        "y": -184.69139,
+        "value": 6.742859,
+        "category": 1
+      },
+      {
+        "id": "13",
+        "name": "MmeDeR",
+        "symbolSize": 2.6666666666666665,
+        "x": -194.31313,
+        "y": 178.55301,
+        "value": 4,
+        "category": 1
+      },
+      {
+        "id": "14",
+        "name": "Isabeau",
+        "symbolSize": 2.6666666666666665,
+        "x": -158.05168,
+        "y": 201.99768,
+        "value": 4,
+        "category": 1
+      },
+      {
+        "id": "15",
+        "name": "Gervais",
+        "symbolSize": 2.6666666666666665,
+        "x": -127.701546,
+        "y": 242.55057,
+        "value": 4,
+        "category": 1
+      },
+      {
+        "id": "16",
+        "name": "Tholomyes",
+        "symbolSize": 17.295237333333333,
+        "x": -385.2226,
+        "y": -393.5572,
+        "value": 25.942856,
+        "category": 2
+      },
+      {
+        "id": "17",
+        "name": "Listolier",
+        "symbolSize": 13.638097333333334,
+        "x": -516.55884,
+        "y": -393.98975,
+        "value": 20.457146,
+        "category": 2
+      },
+      {
+        "id": "18",
+        "name": "Fameuil",
+        "symbolSize": 13.638097333333334,
+        "x": -464.79382,
+        "y": -493.57944,
+        "value": 20.457146,
+        "category": 2
+      },
+      {
+        "id": "19",
+        "name": "Blacheville",
+        "symbolSize": 13.638097333333334,
+        "x": -515.1624,
+        "y": -456.9891,
+        "value": 20.457146,
+        "category": 2
+      },
+      {
+        "id": "20",
+        "name": "Favourite",
+        "symbolSize": 13.638097333333334,
+        "x": -408.12122,
+        "y": -464.5048,
+        "value": 20.457146,
+        "category": 2
+      },
+      {
+        "id": "21",
+        "name": "Dahlia",
+        "symbolSize": 13.638097333333334,
+        "x": -456.44113,
+        "y": -425.13303,
+        "value": 20.457146,
+        "category": 2
+      },
+      {
+        "id": "22",
+        "name": "Zephine",
+        "symbolSize": 13.638097333333334,
+        "x": -459.1107,
+        "y": -362.5133,
+        "value": 20.457146,
+        "category": 2
+      },
+      {
+        "id": "23",
+        "name": "Fantine",
+        "symbolSize": 28.266666666666666,
+        "x": -313.42786,
+        "y": -289.44803,
+        "value": 42.4,
+        "category": 2
+      },
+      {
+        "id": "24",
+        "name": "MmeThenardier",
+        "symbolSize": 20.95238266666667,
+        "x": 4.6313396,
+        "y": -273.8517,
+        "value": 31.428574,
+        "category": 7
+      },
+      {
+        "id": "25",
+        "name": "Thenardier",
+        "symbolSize": 30.095235333333335,
+        "x": 82.80825,
+        "y": -203.1144,
+        "value": 45.142853,
+        "category": 7
+      },
+      {
+        "id": "26",
+        "name": "Cosette",
+        "symbolSize": 20.95238266666667,
+        "x": 78.64646,
+        "y": -31.512747,
+        "value": 31.428574,
+        "category": 6
+      },
+      {
+        "id": "27",
+        "name": "Javert",
+        "symbolSize": 31.923806666666668,
+        "x": -81.46074,
+        "y": -204.20204,
+        "value": 47.88571,
+        "category": 7
+      },
+      {
+        "id": "28",
+        "name": "Fauchelevent",
+        "symbolSize": 8.152382000000001,
+        "x": -225.73984,
+        "y": 82.41631,
+        "value": 12.228573,
+        "category": 4
+      },
+      {
+        "id": "29",
+        "name": "Bamatabois",
+        "symbolSize": 15.466666666666667,
+        "x": -385.6842,
+        "y": -20.206686,
+        "value": 23.2,
+        "category": 3
+      },
+      {
+        "id": "30",
+        "name": "Perpetue",
+        "symbolSize": 4.495239333333333,
+        "x": -403.92447,
+        "y": -197.69823,
+        "value": 6.742859,
+        "category": 2
+      },
+      {
+        "id": "31",
+        "name": "Simplice",
+        "symbolSize": 8.152382000000001,
+        "x": -281.4253,
+        "y": -158.45137,
+        "value": 12.228573,
+        "category": 2
+      },
+      {
+        "id": "32",
+        "name": "Scaufflaire",
+        "symbolSize": 2.6666666666666665,
+        "x": -122.41348,
+        "y": 210.37503,
+        "value": 4,
+        "category": 1
+      },
+      {
+        "id": "33",
+        "name": "Woman1",
+        "symbolSize": 4.495239333333333,
+        "x": -234.6001,
+        "y": -113.15067,
+        "value": 6.742859,
+        "category": 1
+      },
+      {
+        "id": "34",
+        "name": "Judge",
+        "symbolSize": 11.809524666666666,
+        "x": -387.84915,
+        "y": 58.7059,
+        "value": 17.714287,
+        "category": 3
+      },
+      {
+        "id": "35",
+        "name": "Champmathieu",
+        "symbolSize": 11.809524666666666,
+        "x": -338.2307,
+        "y": 87.48405,
+        "value": 17.714287,
+        "category": 3
+      },
+      {
+        "id": "36",
+        "name": "Brevet",
+        "symbolSize": 11.809524666666666,
+        "x": -453.26874,
+        "y": 58.94648,
+        "value": 17.714287,
+        "category": 3
+      },
+      {
+        "id": "37",
+        "name": "Chenildieu",
+        "symbolSize": 11.809524666666666,
+        "x": -386.44904,
+        "y": 140.05937,
+        "value": 17.714287,
+        "category": 3
+      },
+      {
+        "id": "38",
+        "name": "Cochepaille",
+        "symbolSize": 11.809524666666666,
+        "x": -446.7876,
+        "y": 123.38005,
+        "value": 17.714287,
+        "category": 3
+      },
+      {
+        "id": "39",
+        "name": "Pontmercy",
+        "symbolSize": 6.323809333333333,
+        "x": 336.49738,
+        "y": -269.55914,
+        "value": 9.485714,
+        "category": 6
+      },
+      {
+        "id": "40",
+        "name": "Boulatruelle",
+        "symbolSize": 2.6666666666666665,
+        "x": 29.187843,
+        "y": -460.13132,
+        "value": 4,
+        "category": 7
+      },
+      {
+        "id": "41",
+        "name": "Eponine",
+        "symbolSize": 20.95238266666667,
+        "x": 238.36697,
+        "y": -210.00926,
+        "value": 31.428574,
+        "category": 7
+      },
+      {
+        "id": "42",
+        "name": "Anzelma",
+        "symbolSize": 6.323809333333333,
+        "x": 189.69513,
+        "y": -346.50662,
+        "value": 9.485714,
+        "category": 7
+      },
+      {
+        "id": "43",
+        "name": "Woman2",
+        "symbolSize": 6.323809333333333,
+        "x": -187.00418,
+        "y": -145.02663,
+        "value": 9.485714,
+        "category": 6
+      },
+      {
+        "id": "44",
+        "name": "MotherInnocent",
+        "symbolSize": 4.495239333333333,
+        "x": -252.99521,
+        "y": 129.87549,
+        "value": 6.742859,
+        "category": 4
+      },
+      {
+        "id": "45",
+        "name": "Gribier",
+        "symbolSize": 2.6666666666666665,
+        "x": -296.07935,
+        "y": 163.11964,
+        "value": 4,
+        "category": 4
+      },
+      {
+        "id": "46",
+        "name": "Jondrette",
+        "symbolSize": 2.6666666666666665,
+        "x": 550.3201,
+        "y": 522.4031,
+        "value": 4,
+        "category": 5
+      },
+      {
+        "id": "47",
+        "name": "MmeBurgon",
+        "symbolSize": 4.495239333333333,
+        "x": 488.13535,
+        "y": 356.8573,
+        "value": 6.742859,
+        "category": 5
+      },
+      {
+        "id": "48",
+        "name": "Gavroche",
+        "symbolSize": 41.06667066666667,
+        "x": 387.89572,
+        "y": 110.462326,
+        "value": 61.600006,
+        "category": 8
+      },
+      {
+        "id": "49",
+        "name": "Gillenormand",
+        "symbolSize": 13.638097333333334,
+        "x": 126.4831,
+        "y": 68.10622,
+        "value": 20.457146,
+        "category": 6
+      },
+      {
+        "id": "50",
+        "name": "Magnon",
+        "symbolSize": 4.495239333333333,
+        "x": 127.07365,
+        "y": -113.05923,
+        "value": 6.742859,
+        "category": 6
+      },
+      {
+        "id": "51",
+        "name": "MlleGillenormand",
+        "symbolSize": 13.638097333333334,
+        "x": 162.63559,
+        "y": 117.6565,
+        "value": 20.457146,
+        "category": 6
+      },
+      {
+        "id": "52",
+        "name": "MmePontmercy",
+        "symbolSize": 4.495239333333333,
+        "x": 353.66415,
+        "y": -205.89165,
+        "value": 6.742859,
+        "category": 6
+      },
+      {
+        "id": "53",
+        "name": "MlleVaubois",
+        "symbolSize": 2.6666666666666665,
+        "x": 165.43939,
+        "y": 339.7736,
+        "value": 4,
+        "category": 6
+      },
+      {
+        "id": "54",
+        "name": "LtGillenormand",
+        "symbolSize": 8.152382000000001,
+        "x": 137.69348,
+        "y": 196.1069,
+        "value": 12.228573,
+        "category": 6
+      },
+      {
+        "id": "55",
+        "name": "Marius",
+        "symbolSize": 35.58095333333333,
+        "x": 206.44687,
+        "y": -13.805411,
+        "value": 53.37143,
+        "category": 6
+      },
+      {
+        "id": "56",
+        "name": "BaronessT",
+        "symbolSize": 4.495239333333333,
+        "x": 194.82993,
+        "y": 224.78036,
+        "value": 6.742859,
+        "category": 6
+      },
+      {
+        "id": "57",
+        "name": "Mabeuf",
+        "symbolSize": 20.95238266666667,
+        "x": 597.6618,
+        "y": 135.18481,
+        "value": 31.428574,
+        "category": 8
+      },
+      {
+        "id": "58",
+        "name": "Enjolras",
+        "symbolSize": 28.266666666666666,
+        "x": 355.78366,
+        "y": -74.882454,
+        "value": 42.4,
+        "category": 8
+      },
+      {
+        "id": "59",
+        "name": "Combeferre",
+        "symbolSize": 20.95238266666667,
+        "x": 515.2961,
+        "y": -46.167564,
+        "value": 31.428574,
+        "category": 8
+      },
+      {
+        "id": "60",
+        "name": "Prouvaire",
+        "symbolSize": 17.295237333333333,
+        "x": 614.29285,
+        "y": -69.3104,
+        "value": 25.942856,
+        "category": 8
+      },
+      {
+        "id": "61",
+        "name": "Feuilly",
+        "symbolSize": 20.95238266666667,
+        "x": 550.1917,
+        "y": -128.17537,
+        "value": 31.428574,
+        "category": 8
+      },
+      {
+        "id": "62",
+        "name": "Courfeyrac",
+        "symbolSize": 24.609526666666667,
+        "x": 436.17184,
+        "y": -12.7286825,
+        "value": 36.91429,
+        "category": 8
+      },
+      {
+        "id": "63",
+        "name": "Bahorel",
+        "symbolSize": 22.780953333333333,
+        "x": 602.55225,
+        "y": 16.421427,
+        "value": 34.17143,
+        "category": 8
+      },
+      {
+        "id": "64",
+        "name": "Bossuet",
+        "symbolSize": 24.609526666666667,
+        "x": 455.81955,
+        "y": -115.45826,
+        "value": 36.91429,
+        "category": 8
+      },
+      {
+        "id": "65",
+        "name": "Joly",
+        "symbolSize": 22.780953333333333,
+        "x": 516.40784,
+        "y": 47.242233,
+        "value": 34.17143,
+        "category": 8
+      },
+      {
+        "id": "66",
+        "name": "Grantaire",
+        "symbolSize": 19.12381,
+        "x": 646.4313,
+        "y": -151.06331,
+        "value": 28.685715,
+        "category": 8
+      },
+      {
+        "id": "67",
+        "name": "MotherPlutarch",
+        "symbolSize": 2.6666666666666665,
+        "x": 668.9568,
+        "y": 204.65488,
+        "value": 4,
+        "category": 8
+      },
+      {
+        "id": "68",
+        "name": "Gueulemer",
+        "symbolSize": 19.12381,
+        "x": 78.4799,
+        "y": -347.15146,
+        "value": 28.685715,
+        "category": 7
+      },
+      {
+        "id": "69",
+        "name": "Babet",
+        "symbolSize": 19.12381,
+        "x": 150.35959,
+        "y": -298.50797,
+        "value": 28.685715,
+        "category": 7
+      },
+      {
+        "id": "70",
+        "name": "Claquesous",
+        "symbolSize": 19.12381,
+        "x": 137.3717,
+        "y": -410.2809,
+        "value": 28.685715,
+        "category": 7
+      },
+      {
+        "id": "71",
+        "name": "Montparnasse",
+        "symbolSize": 17.295237333333333,
+        "x": 234.87747,
+        "y": -400.85983,
+        "value": 25.942856,
+        "category": 7
+      },
+      {
+        "id": "72",
+        "name": "Toussaint",
+        "symbolSize": 6.323809333333333,
+        "x": 40.942253,
+        "y": 113.78272,
+        "value": 9.485714,
+        "category": 1
+      },
+      {
+        "id": "73",
+        "name": "Child1",
+        "symbolSize": 4.495239333333333,
+        "x": 437.939,
+        "y": 291.58234,
+        "value": 6.742859,
+        "category": 8
+      },
+      {
+        "id": "74",
+        "name": "Child2",
+        "symbolSize": 4.495239333333333,
+        "x": 466.04922,
+        "y": 283.3606,
+        "value": 6.742859,
+        "category": 8
+      },
+      {
+        "id": "75",
+        "name": "Brujon",
+        "symbolSize": 13.638097333333334,
+        "x": 238.79364,
+        "y": -314.06345,
+        "value": 20.457146,
+        "category": 7
+      },
+      {
+        "id": "76",
+        "name": "MmeHucheloup",
+        "symbolSize": 13.638097333333334,
+        "x": 712.18353,
+        "y": 4.8131495,
+        "value": 20.457146,
+        "category": 8
+      }
+    ],
+    "links": [
+      {
+        "source": "1",
+        "target": "0"
+      },
+      {
+        "source": "2",
+        "target": "0"
+      },
+      {
+        "source": "3",
+        "target": "0"
+      },
+      {
+        "source": "3",
+        "target": "2"
+      },
+      {
+        "source": "4",
+        "target": "0"
+      },
+      {
+        "source": "5",
+        "target": "0"
+      },
+      {
+        "source": "6",
+        "target": "0"
+      },
+      {
+        "source": "7",
+        "target": "0"
+      },
+      {
+        "source": "8",
+        "target": "0"
+      },
+      {
+        "source": "9",
+        "target": "0"
+      },
+      {
+        "source": "11",
+        "target": "0"
+      },
+      {
+        "source": "11",
+        "target": "2"
+      },
+      {
+        "source": "11",
+        "target": "3"
+      },
+      {
+        "source": "11",
+        "target": "10"
+      },
+      {
+        "source": "12",
+        "target": "11"
+      },
+      {
+        "source": "13",
+        "target": "11"
+      },
+      {
+        "source": "14",
+        "target": "11"
+      },
+      {
+        "source": "15",
+        "target": "11"
+      },
+      {
+        "source": "17",
+        "target": "16"
+      },
+      {
+        "source": "18",
+        "target": "16"
+      },
+      {
+        "source": "18",
+        "target": "17"
+      },
+      {
+        "source": "19",
+        "target": "16"
+      },
+      {
+        "source": "19",
+        "target": "17"
+      },
+      {
+        "source": "19",
+        "target": "18"
+      },
+      {
+        "source": "20",
+        "target": "16"
+      },
+      {
+        "source": "20",
+        "target": "17"
+      },
+      {
+        "source": "20",
+        "target": "18"
+      },
+      {
+        "source": "20",
+        "target": "19"
+      },
+      {
+        "source": "21",
+        "target": "16"
+      },
+      {
+        "source": "21",
+        "target": "17"
+      },
+      {
+        "source": "21",
+        "target": "18"
+      },
+      {
+        "source": "21",
+        "target": "19"
+      },
+      {
+        "source": "21",
+        "target": "20"
+      },
+      {
+        "source": "22",
+        "target": "16"
+      },
+      {
+        "source": "22",
+        "target": "17"
+      },
+      {
+        "source": "22",
+        "target": "18"
+      },
+      {
+        "source": "22",
+        "target": "19"
+      },
+      {
+        "source": "22",
+        "target": "20"
+      },
+      {
+        "source": "22",
+        "target": "21"
+      },
+      {
+        "source": "23",
+        "target": "11"
+      },
+      {
+        "source": "23",
+        "target": "12"
+      },
+      {
+        "source": "23",
+        "target": "16"
+      },
+      {
+        "source": "23",
+        "target": "17"
+      },
+      {
+        "source": "23",
+        "target": "18"
+      },
+      {
+        "source": "23",
+        "target": "19"
+      },
+      {
+        "source": "23",
+        "target": "20"
+      },
+      {
+        "source": "23",
+        "target": "21"
+      },
+      {
+        "source": "23",
+        "target": "22"
+      },
+      {
+        "source": "24",
+        "target": "11"
+      },
+      {
+        "source": "24",
+        "target": "23"
+      },
+      {
+        "source": "25",
+        "target": "11"
+      },
+      {
+        "source": "25",
+        "target": "23"
+      },
+      {
+        "source": "25",
+        "target": "24"
+      },
+      {
+        "source": "26",
+        "target": "11"
+      },
+      {
+        "source": "26",
+        "target": "16"
+      },
+      {
+        "source": "26",
+        "target": "24"
+      },
+      {
+        "source": "26",
+        "target": "25"
+      },
+      {
+        "source": "27",
+        "target": "11"
+      },
+      {
+        "source": "27",
+        "target": "23"
+      },
+      {
+        "source": "27",
+        "target": "24"
+      },
+      {
+        "source": "27",
+        "target": "25"
+      },
+      {
+        "source": "27",
+        "target": "26"
+      },
+      {
+        "source": "28",
+        "target": "11"
+      },
+      {
+        "source": "28",
+        "target": "27"
+      },
+      {
+        "source": "29",
+        "target": "11"
+      },
+      {
+        "source": "29",
+        "target": "23"
+      },
+      {
+        "source": "29",
+        "target": "27"
+      },
+      {
+        "source": "30",
+        "target": "23"
+      },
+      {
+        "source": "31",
+        "target": "11"
+      },
+      {
+        "source": "31",
+        "target": "23"
+      },
+      {
+        "source": "31",
+        "target": "27"
+      },
+      {
+        "source": "31",
+        "target": "30"
+      },
+      {
+        "source": "32",
+        "target": "11"
+      },
+      {
+        "source": "33",
+        "target": "11"
+      },
+      {
+        "source": "33",
+        "target": "27"
+      },
+      {
+        "source": "34",
+        "target": "11"
+      },
+      {
+        "source": "34",
+        "target": "29"
+      },
+      {
+        "source": "35",
+        "target": "11"
+      },
+      {
+        "source": "35",
+        "target": "29"
+      },
+      {
+        "source": "35",
+        "target": "34"
+      },
+      {
+        "source": "36",
+        "target": "11"
+      },
+      {
+        "source": "36",
+        "target": "29"
+      },
+      {
+        "source": "36",
+        "target": "34"
+      },
+      {
+        "source": "36",
+        "target": "35"
+      },
+      {
+        "source": "37",
+        "target": "11"
+      },
+      {
+        "source": "37",
+        "target": "29"
+      },
+      {
+        "source": "37",
+        "target": "34"
+      },
+      {
+        "source": "37",
+        "target": "35"
+      },
+      {
+        "source": "37",
+        "target": "36"
+      },
+      {
+        "source": "38",
+        "target": "11"
+      },
+      {
+        "source": "38",
+        "target": "29"
+      },
+      {
+        "source": "38",
+        "target": "34"
+      },
+      {
+        "source": "38",
+        "target": "35"
+      },
+      {
+        "source": "38",
+        "target": "36"
+      },
+      {
+        "source": "38",
+        "target": "37"
+      },
+      {
+        "source": "39",
+        "target": "25"
+      },
+      {
+        "source": "40",
+        "target": "25"
+      },
+      {
+        "source": "41",
+        "target": "24"
+      },
+      {
+        "source": "41",
+        "target": "25"
+      },
+      {
+        "source": "42",
+        "target": "24"
+      },
+      {
+        "source": "42",
+        "target": "25"
+      },
+      {
+        "source": "42",
+        "target": "41"
+      },
+      {
+        "source": "43",
+        "target": "11"
+      },
+      {
+        "source": "43",
+        "target": "26"
+      },
+      {
+        "source": "43",
+        "target": "27"
+      },
+      {
+        "source": "44",
+        "target": "11"
+      },
+      {
+        "source": "44",
+        "target": "28"
+      },
+      {
+        "source": "45",
+        "target": "28"
+      },
+      {
+        "source": "47",
+        "target": "46"
+      },
+      {
+        "source": "48",
+        "target": "11"
+      },
+      {
+        "source": "48",
+        "target": "25"
+      },
+      {
+        "source": "48",
+        "target": "27"
+      },
+      {
+        "source": "48",
+        "target": "47"
+      },
+      {
+        "source": "49",
+        "target": "11"
+      },
+      {
+        "source": "49",
+        "target": "26"
+      },
+      {
+        "source": "50",
+        "target": "24"
+      },
+      {
+        "source": "50",
+        "target": "49"
+      },
+      {
+        "source": "51",
+        "target": "11"
+      },
+      {
+        "source": "51",
+        "target": "26"
+      },
+      {
+        "source": "51",
+        "target": "49"
+      },
+      {
+        "source": "52",
+        "target": "39"
+      },
+      {
+        "source": "52",
+        "target": "51"
+      },
+      {
+        "source": "53",
+        "target": "51"
+      },
+      {
+        "source": "54",
+        "target": "26"
+      },
+      {
+        "source": "54",
+        "target": "49"
+      },
+      {
+        "source": "54",
+        "target": "51"
+      },
+      {
+        "source": "55",
+        "target": "11"
+      },
+      {
+        "source": "55",
+        "target": "16"
+      },
+      {
+        "source": "55",
+        "target": "25"
+      },
+      {
+        "source": "55",
+        "target": "26"
+      },
+      {
+        "source": "55",
+        "target": "39"
+      },
+      {
+        "source": "55",
+        "target": "41"
+      },
+      {
+        "source": "55",
+        "target": "48"
+      },
+      {
+        "source": "55",
+        "target": "49"
+      },
+      {
+        "source": "55",
+        "target": "51"
+      },
+      {
+        "source": "55",
+        "target": "54"
+      },
+      {
+        "source": "56",
+        "target": "49"
+      },
+      {
+        "source": "56",
+        "target": "55"
+      },
+      {
+        "source": "57",
+        "target": "41"
+      },
+      {
+        "source": "57",
+        "target": "48"
+      },
+      {
+        "source": "57",
+        "target": "55"
+      },
+      {
+        "source": "58",
+        "target": "11"
+      },
+      {
+        "source": "58",
+        "target": "27"
+      },
+      {
+        "source": "58",
+        "target": "48"
+      },
+      {
+        "source": "58",
+        "target": "55"
+      },
+      {
+        "source": "58",
+        "target": "57"
+      },
+      {
+        "source": "59",
+        "target": "48"
+      },
+      {
+        "source": "59",
+        "target": "55"
+      },
+      {
+        "source": "59",
+        "target": "57"
+      },
+      {
+        "source": "59",
+        "target": "58"
+      },
+      {
+        "source": "60",
+        "target": "48"
+      },
+      {
+        "source": "60",
+        "target": "58"
+      },
+      {
+        "source": "60",
+        "target": "59"
+      },
+      {
+        "source": "61",
+        "target": "48"
+      },
+      {
+        "source": "61",
+        "target": "55"
+      },
+      {
+        "source": "61",
+        "target": "57"
+      },
+      {
+        "source": "61",
+        "target": "58"
+      },
+      {
+        "source": "61",
+        "target": "59"
+      },
+      {
+        "source": "61",
+        "target": "60"
+      },
+      {
+        "source": "62",
+        "target": "41"
+      },
+      {
+        "source": "62",
+        "target": "48"
+      },
+      {
+        "source": "62",
+        "target": "55"
+      },
+      {
+        "source": "62",
+        "target": "57"
+      },
+      {
+        "source": "62",
+        "target": "58"
+      },
+      {
+        "source": "62",
+        "target": "59"
+      },
+      {
+        "source": "62",
+        "target": "60"
+      },
+      {
+        "source": "62",
+        "target": "61"
+      },
+      {
+        "source": "63",
+        "target": "48"
+      },
+      {
+        "source": "63",
+        "target": "55"
+      },
+      {
+        "source": "63",
+        "target": "57"
+      },
+      {
+        "source": "63",
+        "target": "58"
+      },
+      {
+        "source": "63",
+        "target": "59"
+      },
+      {
+        "source": "63",
+        "target": "60"
+      },
+      {
+        "source": "63",
+        "target": "61"
+      },
+      {
+        "source": "63",
+        "target": "62"
+      },
+      {
+        "source": "64",
+        "target": "11"
+      },
+      {
+        "source": "64",
+        "target": "48"
+      },
+      {
+        "source": "64",
+        "target": "55"
+      },
+      {
+        "source": "64",
+        "target": "57"
+      },
+      {
+        "source": "64",
+        "target": "58"
+      },
+      {
+        "source": "64",
+        "target": "59"
+      },
+      {
+        "source": "64",
+        "target": "60"
+      },
+      {
+        "source": "64",
+        "target": "61"
+      },
+      {
+        "source": "64",
+        "target": "62"
+      },
+      {
+        "source": "64",
+        "target": "63"
+      },
+      {
+        "source": "65",
+        "target": "48"
+      },
+      {
+        "source": "65",
+        "target": "55"
+      },
+      {
+        "source": "65",
+        "target": "57"
+      },
+      {
+        "source": "65",
+        "target": "58"
+      },
+      {
+        "source": "65",
+        "target": "59"
+      },
+      {
+        "source": "65",
+        "target": "60"
+      },
+      {
+        "source": "65",
+        "target": "61"
+      },
+      {
+        "source": "65",
+        "target": "62"
+      },
+      {
+        "source": "65",
+        "target": "63"
+      },
+      {
+        "source": "65",
+        "target": "64"
+      },
+      {
+        "source": "66",
+        "target": "48"
+      },
+      {
+        "source": "66",
+        "target": "58"
+      },
+      {
+        "source": "66",
+        "target": "59"
+      },
+      {
+        "source": "66",
+        "target": "60"
+      },
+      {
+        "source": "66",
+        "target": "61"
+      },
+      {
+        "source": "66",
+        "target": "62"
+      },
+      {
+        "source": "66",
+        "target": "63"
+      },
+      {
+        "source": "66",
+        "target": "64"
+      },
+      {
+        "source": "66",
+        "target": "65"
+      },
+      {
+        "source": "67",
+        "target": "57"
+      },
+      {
+        "source": "68",
+        "target": "11"
+      },
+      {
+        "source": "68",
+        "target": "24"
+      },
+      {
+        "source": "68",
+        "target": "25"
+      },
+      {
+        "source": "68",
+        "target": "27"
+      },
+      {
+        "source": "68",
+        "target": "41"
+      },
+      {
+        "source": "68",
+        "target": "48"
+      },
+      {
+        "source": "69",
+        "target": "11"
+      },
+      {
+        "source": "69",
+        "target": "24"
+      },
+      {
+        "source": "69",
+        "target": "25"
+      },
+      {
+        "source": "69",
+        "target": "27"
+      },
+      {
+        "source": "69",
+        "target": "41"
+      },
+      {
+        "source": "69",
+        "target": "48"
+      },
+      {
+        "source": "69",
+        "target": "68"
+      },
+      {
+        "source": "70",
+        "target": "11"
+      },
+      {
+        "source": "70",
+        "target": "24"
+      },
+      {
+        "source": "70",
+        "target": "25"
+      },
+      {
+        "source": "70",
+        "target": "27"
+      },
+      {
+        "source": "70",
+        "target": "41"
+      },
+      {
+        "source": "70",
+        "target": "58"
+      },
+      {
+        "source": "70",
+        "target": "68"
+      },
+      {
+        "source": "70",
+        "target": "69"
+      },
+      {
+        "source": "71",
+        "target": "11"
+      },
+      {
+        "source": "71",
+        "target": "25"
+      },
+      {
+        "source": "71",
+        "target": "27"
+      },
+      {
+        "source": "71",
+        "target": "41"
+      },
+      {
+        "source": "71",
+        "target": "48"
+      },
+      {
+        "source": "71",
+        "target": "68"
+      },
+      {
+        "source": "71",
+        "target": "69"
+      },
+      {
+        "source": "71",
+        "target": "70"
+      },
+      {
+        "source": "72",
+        "target": "11"
+      },
+      {
+        "source": "72",
+        "target": "26"
+      },
+      {
+        "source": "72",
+        "target": "27"
+      },
+      {
+        "source": "73",
+        "target": "48"
+      },
+      {
+        "source": "74",
+        "target": "48"
+      },
+      {
+        "source": "74",
+        "target": "73"
+      },
+      {
+        "source": "75",
+        "target": "25"
+      },
+      {
+        "source": "75",
+        "target": "41"
+      },
+      {
+        "source": "75",
+        "target": "48"
+      },
+      {
+        "source": "75",
+        "target": "68"
+      },
+      {
+        "source": "75",
+        "target": "69"
+      },
+      {
+        "source": "75",
+        "target": "70"
+      },
+      {
+        "source": "75",
+        "target": "71"
+      },
+      {
+        "source": "76",
+        "target": "48"
+      },
+      {
+        "source": "76",
+        "target": "58"
+      },
+      {
+        "source": "76",
+        "target": "62"
+      },
+      {
+        "source": "76",
+        "target": "63"
+      },
+      {
+        "source": "76",
+        "target": "64"
+      },
+      {
+        "source": "76",
+        "target": "65"
+      },
+      {
+        "source": "76",
+        "target": "66"
+      }
+    ],
+    "categories": [
+      {
+        "name": "A"
+      },
+      {
+        "name": "B"
+      },
+      {
+        "name": "C"
+      },
+      {
+        "name": "D"
+      },
+      {
+        "name": "E"
+      },
+      {
+        "name": "F"
+      },
+      {
+        "name": "G"
+      },
+      {
+        "name": "H"
+      },
+      {
+        "name": "I"
+      }
+    ]
+  }
\ No newline at end of file

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const GraphConfig: ConfigType = {
+  key: 'Graph',
+  chartKey: 'VGraph',
+  conKey: 'VCGraph',
+  title: '关系图',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'graph.png'
+}

+<template>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, PropType, watch } from 'vue'
+import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
+import dataJson from './data.json'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { RadarChart } from 'echarts/charts'
+import { includes } from './config'
+import { mergeTheme, setOption } from '@/packages/public/chart'
+import { useChartDataFetch } from '@/hooks'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { isPreview } from '@/utils'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
+use([DatasetComponent, CanvasRenderer, RadarChart, GridComponent, TooltipComponent, LegendComponent])
+
+const vChartRef = ref<typeof VChart>()
+
+const option = computed(() => {
+  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+})
+
+const dataSetHandle = (dataset: typeof dataJson) => {
+  if (dataset.nodes) {
+    props.chartConfig.option.series[0].data = dataset.nodes
+  }
+  if (dataset.links) {
+    props.chartConfig.option.series[0].links = dataset.links
+  }
+  if (dataset.categories) {
+    props.chartConfig.option.series[0].categories = dataset.categories
+    // @ts-ignore
+    props.chartConfig.option.legend.data = dataset.categories.map((i: { name: string }) => i.name)
+  }
+  if (vChartRef.value && isPreview()) {
+    setOption(vChartRef.value, props.chartConfig.option)
+  }
+}
+
+watch(
+  () => props.chartConfig.option.dataset,
+  newData => {
+    try {
+      dataSetHandle(newData)
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    deep: false
+  }
+)
+
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: typeof dataJson) => {
+  dataSetHandle(newData)
+})
+</script>

+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { SankeyConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+
+export const includes = ['legend']
+
+// 图表方向
+export const orientList = [
+  { label: '水平', value: 'horizontal' },
+  { label: '垂直', value: 'vertical' }
+]
+
+// 标签展示
+export const toolTipSwitch = [
+  { label: '开启', value: 1 },
+  { label: '关闭', value: 0 }
+]
+
+export const option = {
+  dataset: { ...dataJson },
+  tooltip: {
+    show: 1,
+    trigger: 'item',
+    triggerOn: 'mousemove'
+  },
+  series: {
+    type: 'sankey',
+    layout: 'none',
+    orient:'horizontal',
+    data: dataJson.label,
+    links: dataJson.links,
+    levels: dataJson.levels
+  }
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = SankeyConfig.key
+  public chartConfig = cloneDeep(SankeyConfig)
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}

+<template>
+  <div>
+    <CollapseItem name="桑基图" :expanded="true">
+      <SettingItemBox name="样式">
+        <SettingItem name="方向">
+          <n-select
+            v-model:value="sankeyConfig.orient"
+            size="small"
+            :options="orientList"
+            placeholder="选择方向"
+          />
+        </SettingItem>
+        <SettingItem name="提示标签">
+          <n-select
+            v-model:value="optionData.tooltip.show"
+            size="small"
+            :options="toolTipSwitch"
+            placeholder="是否开启"
+          />
+        </SettingItem>
+      </SettingItemBox>
+    </CollapseItem>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { option, orientList, toolTipSwitch } from './config'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option & GlobalThemeJsonType>,
+    required: true
+  }
+})
+
+const sankeyConfig = computed<typeof option.series>(() => {
+  return props.optionData.series
+})
+
+</script>

+{
+  "label": [
+    {
+      "name": "a"
+    },
+    {
+      "name": "b"
+    },
+    {
+      "name": "a1"
+    },
+    {
+      "name": "a2"
+    },
+    {
+      "name": "b1"
+    },
+    {
+      "name": "b2"
+    }
+  ],
+  "links": [
+    {
+      "source": "a",
+      "target": "a1",
+      "value": 5
+    },
+    {
+      "source": "a",
+      "target": "a2",
+      "value": 3
+    },
+    {
+      "source": "b",
+      "target": "b1",
+      "value": 8
+    },
+    {
+      "source": "a",
+      "target": "b1",
+      "value": 3
+    },
+    {
+      "source": "b1",
+      "target": "a1",
+      "value": 1
+    },
+    {
+      "source": "b1",
+      "target": "b2",
+      "value": 2
+    }
+  ],
+  "levels": [
+    {
+      "depth": 0,
+      "itemStyle": {
+        "color": "#decbe4"
+      },
+      "lineStyle": {
+        "color": "source",
+        "opacity": 0.9
+      }
+    },
+    {
+      "depth": 1,
+      "itemStyle": {
+        "color": "#b3cde3"
+      },
+      "lineStyle": {
+        "color": "source",
+        "opacity": 0.6
+      }
+    },
+    {
+      "depth": 2,
+      "itemStyle": {
+        "color": "#ccebc5"
+      },
+      "lineStyle": {
+        "color": "source",
+        "opacity": 0.6
+      }
+    }
+  ]
+}

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const SankeyConfig: ConfigType = {
+  key: 'Sankey',
+  chartKey: 'VSankey',
+  conKey: 'VCSankey',
+  title: '桑基图',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'sankey.png'
+}

+<template>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, PropType, watch } from 'vue'
+import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
+import dataJson from './data.json'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { RadarChart } from 'echarts/charts'
+import { includes } from './config'
+import { mergeTheme, setOption } from '@/packages/public/chart'
+import { useChartDataFetch } from '@/hooks'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { isPreview } from '@/utils'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
+use([DatasetComponent, CanvasRenderer, RadarChart, GridComponent, TooltipComponent, LegendComponent])
+
+const vChartRef = ref<typeof VChart>()
+
+const option = computed(() => {
+  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+})
+
+const dataHandle = (dataset: typeof dataJson) => {
+  if (dataset.label) {
+    props.chartConfig.option.series.data = dataset.label
+  }
+  if (dataset.links) {
+    props.chartConfig.option.series.links = dataset.links
+  }
+  if (dataset.levels) {
+    props.chartConfig.option.series.levels = dataset.levels
+  }
+  if (vChartRef.value && isPreview()) {
+    setOption(vChartRef.value, props.chartConfig.option)
+  }
+}
+
+watch(
+  () => props.chartConfig.option.dataset,
+  newData => {
+    try {
+      dataHandle(newData)
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    deep: true
+  }
+)
+
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: typeof dataJson) => {
+  dataHandle(newData)
+})
+</script>

@@ -8,7 +8,6 @@
     <SettingItemBox name="内容">
       <SettingItem name="数值">
         <n-input-number
-          :disabled="true"
           v-model:value="item.data[0]"
           :min="0"
           :step="0.01"

@@ -4,5 +4,8 @@ import { FunnelConfig } from './Funnel/index'
 import { HeatmapConfig } from './Heatmap/index'
 import { WaterPoloConfig } from './WaterPolo/index'
 import { TreeMapConfig } from './TreeMap/index'
+import { DialConfig } from './Dial/index'
+import { SankeyConfig } from './Sankey/index'
+import { GraphConfig } from './Graph/index'
 
-export default [ProcessConfig, RadarConfig, FunnelConfig, HeatmapConfig, WaterPoloConfig, TreeMapConfig]
+export default [ProcessConfig, RadarConfig, FunnelConfig, HeatmapConfig, WaterPoloConfig, TreeMapConfig, GraphConfig, SankeyConfig, DialConfig]

@@ -18,7 +18,14 @@ export const PieTypeObject = {
   [PieTypeEnum.ROSE]: 'rose'
 }
 
+// 其它配置
+const otherConfig = {
+  // 轮播动画
+  isCarousel: false,
+}
+
 const option = {
+  ...otherConfig,
   type: 'ring',
   tooltip: {
     show: true,

@@ -7,6 +7,17 @@
         <n-select v-model:value="optionData.type" size="small" :options="fontWeightOptions" />
       </SettingItem>
     </SettingItemBox>
+    <SettingItemBox name="动画" :alone="true">
+      <SettingItem>
+        <n-space>
+          <n-switch v-model:value="optionData.isCarousel" size="small"></n-switch>
+          <n-text>开启<n-text :depth="3">（将自动隐藏图例）</n-text></n-text>
+        </n-space>
+      </SettingItem>
+      <SettingItem>
+        <n-text :depth="3">无鼠标点击图例场景时，可强行打开图例</n-text>
+      </SettingItem>
+    </SettingItemBox>
     <SettingItemBox name="标签">
       <SettingItem>
         <n-space>

 <template>
-  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
+  <v-chart ref="vChartRef" autoresize :init-options="initOptions" :theme="themeColor" :option="option"
+    :manual-update="isPreview()" @mouseover="handleHighlight" @mouseout="handleDownplay"></v-chart>
 </template>
 
 <script setup lang="ts">
-import { computed, PropType, reactive, watch } from 'vue'
+import { computed, onMounted, PropType, reactive, watch } from 'vue'
 import VChart from 'vue-echarts'
 import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use } from 'echarts/core'
@@ -15,6 +16,7 @@ import { useChartDataFetch } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { isPreview } from '@/utils'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+import dataJson from './data.json'
 
 const props = defineProps({
   themeSetting: {
@@ -30,8 +32,10 @@ const props = defineProps({
     required: true
   }
 })
-
 const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+let seriesDataNum = -1
+let seriesDataMaxLength = 0
+let intervalInstance: any = null
 
 use([DatasetComponent, CanvasRenderer, PieChart, GridComponent, TooltipComponent, LegendComponent])
 
@@ -39,6 +43,54 @@ const option = computed(() => {
   return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
 })
 
+// 会重新选择需要选中和展示的数据
+const handleSeriesData = () => {
+  if (seriesDataNum > -1) {
+    vChartRef.value?.dispatchAction({
+      type: 'downplay',
+      dataIndex: seriesDataNum
+    })
+  }
+  seriesDataNum = seriesDataNum >= seriesDataMaxLength - 1 ? 0 : seriesDataNum + 1
+  vChartRef.value?.dispatchAction({
+    type: 'highlight',
+    dataIndex: seriesDataNum
+  })
+}
+
+// 新增轮播
+const addPieInterval = (newData?: typeof dataJson, skipPre = false) => {
+  if (!skipPre && !Array.isArray(newData?.source)) return
+  if (!skipPre) seriesDataMaxLength = newData?.source.length || 0
+  clearInterval(intervalInstance)
+  intervalInstance = setInterval(() => {
+    handleSeriesData()
+  }, 1000)
+}
+
+// 取消轮播
+const clearPieInterval = () => {
+  vChartRef.value?.dispatchAction({
+    type: 'downplay',
+    dataIndex: seriesDataNum
+  })
+  clearInterval(intervalInstance)
+  intervalInstance = null
+}
+
+// 处理鼠标聚焦高亮内容
+const handleHighlight = () => {
+  clearPieInterval()
+}
+
+// 处理鼠标取消悬浮
+const handleDownplay = () => {
+  if (props.chartConfig.option.isCarousel && !intervalInstance) {
+    // 恢复轮播
+    addPieInterval(undefined, true)
+  }
+}
+
 watch(
   () => props.chartConfig.option.type,
   newData => {
@@ -60,5 +112,27 @@ watch(
   { deep: false, immediate: true }
 )
 
+watch(
+  () => props.chartConfig.option.isCarousel,
+  newData => {
+    if (newData) {
+      addPieInterval(undefined, true)
+      props.chartConfig.option.legend.show = false
+    } else {
+      props.chartConfig.option.legend.show = true
+      clearPieInterval()
+    }
+  }
+)
+
 const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
+
+
+
+onMounted(() => {
+  seriesDataMaxLength = dataJson.source.length
+  if (props.chartConfig.option.isCarousel) {
+    addPieInterval(undefined, true)
+  }
+})
 </script>

@@ -16,6 +16,7 @@ export interface OptionType {
   flipperGap: number
   flipperType: FlipType
   flipperSpeed: number
+  flipperBorderWidth: number
 }
 
 export const option: OptionType = {
@@ -28,7 +29,8 @@ export const option: OptionType = {
   flipperRadius: 5,
   flipperGap: 10,
   flipperType: 'down',
-  flipperSpeed: 450
+  flipperSpeed: 450,
+  flipperBorderWidth: 0,
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -16,12 +16,16 @@
       <setting-item name="高度">
         <n-input-number v-model:value="optionData.flipperHeight" size="small" :min="1"></n-input-number>
       </setting-item>
-      <setting-item name="间隔">
-        <n-input-number v-model:value="optionData.flipperGap" size="small" :min="0"></n-input-number>
+      <setting-item name="边框">
+        <n-input-number v-model:value="optionData.flipperBorderWidth" size="small" :min="0" :max="10"></n-input-number>
       </setting-item>
       <setting-item name="圆角">
         <n-input-number v-model:value="optionData.flipperRadius" size="small" :min="0"></n-input-number>
       </setting-item>
+      <setting-item name="翻牌间隔">
+        <n-input-number v-model:value="optionData.flipperGap" size="small" :min="0"></n-input-number>
+      </setting-item>
+      <setting-item />
       <setting-item name="背景色">
         <n-color-picker
           size="small"

@@ -9,6 +9,7 @@
       :radius="flipperRadius"
       :flip-type="flipperType"
       :duration="flipperSpeed"
+      :border-width="flipperBorderWidth"
       v-for="(item, index) in flipperData"
       :key="index"
       class="go-d-block"
@@ -42,7 +43,8 @@ const {
   flipperRadius,
   flipperGap,
   flipperType,
-  flipperSpeed
+  flipperSpeed,
+  flipperBorderWidth
 } = toRefs(props.chartConfig.option as OptionType)
 
 const flipperData = ref<string[] | number[]>([])

+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { chartInitConfig } from '@/settings/designSetting'
+import { PipelineHConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  color_type: 1,
+  o_color: '#0a7ae2',
+  i_color: '#119bfa',
+  line_class: 'svg_ani_flow'
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = PipelineHConfig.key
+  public attr = { ...chartInitConfig, w: 500, h: 15, zIndex: -1 }
+  public chartConfig = cloneDeep(PipelineHConfig)
+  public option = cloneDeep(option)
+}

+<template>
+  <CollapseItem name="管道" :expanded="true">
+    <SettingItemBox name="默认颜色">
+      <SettingItem>
+        <n-select v-model:value="optionData.color_type" :options="colorOptions" @update:value="handleColorChange" />
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="管道颜色">
+      <SettingItem>
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.o_color"></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="水流颜色">
+      <SettingItem>
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.i_color"></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="流向">
+      <SettingItem>
+        <n-select v-model:value="optionData.line_class" :options="options" />
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType, ref } from 'vue'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const options = ref([
+  {
+    value: 'svg_ani_flow',
+    label: '正向'
+  },
+  {
+    value: 'svg_ani_flow_back',
+    label: '反向'
+  },
+  {
+    value: 'svg_ani_flow_stop',
+    label: '停止'
+  }
+])
+
+const colorOptions = ref([
+  {
+    value: 1,
+    label: '蓝'
+  },
+  {
+    value: 2,
+    label: '黄'
+  }
+])
+
+// 默认颜色
+const handleColorChange = (e: number) => {
+  switch (e) {
+    case 1:
+      props.optionData.o_color = '#0a7ae2'
+      props.optionData.i_color = '#119bfa'
+      break
+    case 2:
+      props.optionData.o_color = '#ff9d00'
+      props.optionData.i_color = '#f7ea37'
+      break
+  }
+}
+</script>

+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const PipelineHConfig: ConfigType = {
+  key: 'PipelineH',
+  chartKey: 'VPipelineH',
+  conKey: 'VCPipelineH',
+  title: '管道-横向',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.DECORATES,
+  image: 'Pipeline_H.png'
+}

+<template>
+  <div class="go-decorates-line">
+    <svg :width="w" :height="h">
+      <line :x1="0" :y1="h / 2" :x2="w" :y2="h / 2" :stroke="o_color" :stroke-width="h"></line>
+      <line :x1="0" :y1="h / 2" :x2="w" :y2="h / 2" :stroke="i_color" :stroke-width="h / 2" :class="line_class"></line>
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const { o_color, i_color, line_class } = toRefs(props.chartConfig.option)
+</script>
+
+<style lang="scss" scoped>
+.go-decorates-line {
+  font-size: 0;
+}
+
+/* 正向流动效果 */
+.svg_ani_flow {
+  stroke-dasharray: 1000;
+  stroke-dashoffset: 1000;
+  animation: ani_flow 10s linear infinite;
+  animation-fill-mode: forwards;
+  -webkit-animation: ani_flow 10s linear infinite;
+  -webkit-animation-fill-mode: forwards;
+}
+
+@keyframes ani_flow {
+  from {
+    stroke-dasharray: 10, 5;
+  }
+
+  to {
+    stroke-dasharray: 13, 5;
+  }
+}
+@-webkit-keyframes ani_flow {
+  from {
+    stroke-dasharray: 10, 5;
+  }
+
+  to {
+    stroke-dasharray: 13, 5;
+  }
+}
+
+/* 停止流动效果 */
+.svg_ani_flow_stop {
+  stroke-dasharray: 1000;
+  stroke-dashoffset: 1000;
+  animation: ani_flow_stop 10s linear infinite;
+  animation-fill-mode: forwards;
+  -webkit-animation: ani_flow_stop 10s linear infinite;
+  -webkit-animation-fill-mode: forwards;
+}
+
+@keyframes ani_flow_stop {
+  from {
+    stroke-dasharray: 10, 5;
+  }
+
+  to {
+    stroke-dasharray: 10, 5;
+  }
+}
+@-webkit-keyframes ani_flow_stop {
+  from {
+    stroke-dasharray: 10, 5;
+  }
+
+  to {
+    stroke-dasharray: 10, 5;
+  }
+}
+/* 反向流动效果 */
+.svg_ani_flow_back {
+  stroke-dasharray: 1000;
+  stroke-dashoffset: 1000;
+  animation: ani_flow_back 10s linear infinite;
+  animation-fill-mode: forwards;
+  -webkit-animation: ani_flow_back 10s linear infinite;
+  -webkit-animation-fill-mode: forwards;
+}
+
+@keyframes ani_flow_back {
+  from {
+    stroke-dasharray: 13, 5;
+  }
+
+  to {
+    stroke-dasharray: 10, 5;
+  }
+}
+@-webkit-keyframes ani_flow_stop {
+  from {
+    stroke-dasharray: 10, 5;
+  }
+
+  to {
+    stroke-dasharray: 10, 5;
+  }
+}
+/* 以最大40高度填充 */
+.svg_ani_fill_h40 {
+  animation: ani_fill_h40 5s linear infinite;
+  animation-fill-mode: forwards;
+  -webkit-animation: ani_fill_h40 5s linear infinite;
+  -webkit-animation-fill-mode: forwards;
+}
+
+@keyframes ani_fill_h40 {
+  from {
+    height: 0px;
+  }
+
+  to {
+    height: 40px;
+  }
+}
+@-webkit-keyframes ani_flow_stop {
+  from {
+    stroke-dasharray: 10, 5;
+  }
+
+  to {
+    stroke-dasharray: 10, 5;
+  }
+}
+</style>

+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { chartInitConfig } from '@/settings/designSetting'
+import { PipelineVConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  color_type: 1,
+  o_color: '#0a7ae2',
+  i_color: '#119bfa',
+  line_class: 'svg_ani_flow'
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = PipelineVConfig.key
+  public attr = { ...chartInitConfig, w: 15, h: 500, zIndex: -1 }
+  public chartConfig = cloneDeep(PipelineVConfig)
+  public option = cloneDeep(option)
+}

+<template>
+  <CollapseItem name="管道" :expanded="true">
+    <SettingItemBox name="默认颜色">
+      <SettingItem>
+        <n-select v-model:value="optionData.color_type" :options="colorOptions" @update:value="handleColorChange" />
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="管道颜色">
+      <SettingItem>
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.o_color"></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="水流颜色">
+      <SettingItem>
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.i_color"></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="流向">
+      <SettingItem>
+        <n-select v-model:value="optionData.line_class" :options="options" />
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType, ref } from 'vue'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const options = ref([
+  {
+    value: 'svg_ani_flow',
+    label: '正向'
+  },
+  {
+    value: 'svg_ani_flow_back',
+    label: '反向'
+  },
+  {
+    value: 'svg_ani_flow_stop',
+    label: '停止'
+  }
+])
+
+const colorOptions = ref([
+  {
+    value: 1,
+    label: '蓝'
+  },
+  {
+    value: 2,
+    label: '黄'
+  }
+])
+
+// 默认颜色
+const handleColorChange = (e: number) => {
+  switch (e) {
+    case 1:
+      props.optionData.o_color = '#0a7ae2'
+      props.optionData.i_color = '#119bfa'
+      break
+    case 2:
+      props.optionData.o_color = '#ff9d00'
+      props.optionData.i_color = '#f7ea37'
+      break
+  }
+}
+</script>

+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const PipelineVConfig: ConfigType = {
+  key: 'PipelineV',
+  chartKey: 'VPipelineV',
+  conKey: 'VCPipelineV',
+  title: '管道-纵向',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.DECORATES,
+  image: 'Pipeline_V.png'
+}
+

+<template>
+  <div class="go-decorates-line">
+    <svg :width="w" :height="h">
+      <line :x1="w / 2" :y1="0" :x2="w / 2" :y2="h" :stroke="o_color" :stroke-width="w"></line>
+      <line :x1="w / 2" :y1="0" :x2="w / 2" :y2="h" :stroke="i_color" :stroke-width="w / 2" :class="line_class"></line>
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const { o_color, i_color, line_class } = toRefs(props.chartConfig.option)
+</script>
+
+<style lang="scss" scoped>
+.go-decorates-line {
+  font-size: 0;
+}
+
+/* 正向流动效果 */
+.svg_ani_flow {
+  stroke-dasharray: 1000;
+  stroke-dashoffset: 1000;
+  animation: ani_flow 10s linear infinite;
+  animation-fill-mode: forwards;
+  -webkit-animation: ani_flow 10s linear infinite;
+  -webkit-animation-fill-mode: forwards;
+}
+
+@keyframes ani_flow {
+  from {
+    stroke-dasharray: 10, 5;
+  }
+
+  to {
+    stroke-dasharray: 13, 5;
+  }
+}
+@-webkit-keyframes ani_flow {
+  from {
+    stroke-dasharray: 10, 5;
+  }
+
+  to {
+    stroke-dasharray: 13, 5;
+  }
+}
+
+/* 停止流动效果 */
+.svg_ani_flow_stop {
+  stroke-dasharray: 1000;
+  stroke-dashoffset: 1000;
+  animation: ani_flow_stop 10s linear infinite;
+  animation-fill-mode: forwards;
+  -webkit-animation: ani_flow_stop 10s linear infinite;
+  -webkit-animation-fill-mode: forwards;
+}
+
+@keyframes ani_flow_stop {
+  from {
+    stroke-dasharray: 10, 5;
+  }
+
+  to {
+    stroke-dasharray: 10, 5;
+  }
+}
+@-webkit-keyframes ani_flow_stop {
+  from {
+    stroke-dasharray: 10, 5;
+  }
+
+  to {
+    stroke-dasharray: 10, 5;
+  }
+}
+/* 反向流动效果 */
+.svg_ani_flow_back {
+  stroke-dasharray: 1000;
+  stroke-dashoffset: 1000;
+  animation: ani_flow_back 10s linear infinite;
+  animation-fill-mode: forwards;
+  -webkit-animation: ani_flow_back 10s linear infinite;
+  -webkit-animation-fill-mode: forwards;
+}
+
+@keyframes ani_flow_back {
+  from {
+    stroke-dasharray: 13, 5;
+  }
+
+  to {
+    stroke-dasharray: 10, 5;
+  }
+}
+@-webkit-keyframes ani_flow_back {
+  from {
+    stroke-dasharray: 13, 5;
+  }
+
+  to {
+    stroke-dasharray: 10, 5;
+  }
+}
+</style>

@@ -3,5 +3,7 @@ import { TimeCommonConfig } from './TimeCommon/index'
 import { ClockConfig } from './Clock/index'
 import { CountDownConfig } from './CountDown/index'
 import { FlipperNumberConfig } from './FlipperNumber'
+import { PipelineHConfig } from './PipelineH/index'
+import { PipelineVConfig } from './PipelineV/index'
 
-export default [NumberConfig, FlipperNumberConfig, TimeCommonConfig, CountDownConfig, ClockConfig]
+export default [NumberConfig, FlipperNumberConfig, TimeCommonConfig, CountDownConfig, ClockConfig, PipelineHConfig, PipelineVConfig]

@@ -15,11 +15,11 @@ export interface IResources {
 const fileSuffix = ['earth', 'gradient', 'redCircle', 'label', 'aperture', 'glow', 'light_column', 'aircraft']
 const textures: ITextures[] = []
 
-const modules = import.meta.globEager("../../images/earth/*");
+const modules: Record<string, { default: string }> = import.meta.glob("../../images/earth/*", { eager: true });
 
-for(let item in modules) {
+for (const item in modules) {
   const n = item.split('/').pop()
-  if(n) {
+  if (n) {
     textures.push({
       name: n.split('.')[0],
       url: modules[item].default

+import { IconConfig } from '../Default/Icon/index'
+import { PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../index.d'
+
+const iconNames = [
+  'uim:adobe',
+  'uim:airplay',
+  'uim:align',
+  'uim:angle-double-down',
+  'uim:angle-double-left',
+  'uim:angle-double-right',
+  'uim:angle-double-up',
+  'uim:angle-down',
+  'uim:angle-left',
+  'uim:angle-right',
+  'uim:angle-up',
+  'uim:android-alt',
+  'uim:apple',
+  'uim:apps',
+  'uim:bag',
+  'uim:battery-bolt',
+  'uim:bing',
+  'uim:box',
+  'uim:briefcase',
+  'uim:calender',
+  'uim:chart',
+  'uim:chart-pie',
+  'uim:circle-layer',
+  'uim:clinic-medical',
+  'uim:clock',
+  'uim:comment-alt',
+  'uim:comment-alt-dots',
+  'uim:docker',
+  'uim:download-alt',
+  'uim:dribbble',
+  'uim:dropbox',
+  'uim:entry',
+  'uim:exclamation-circle',
+  'uim:exclamation-triangle',
+  'uim:exit',
+  'uim:facebook',
+  'uim:facebook-messenger',
+  'uim:facebook-messenger-alt',
+  'uim:google-drive',
+  'uim:google-play',
+  'uim:graph-bar',
+  'uim:head-side-mask',
+  'uim:horizontal-align-left',
+  'uim:hospital',
+  'uim:house-user',
+  'uim:image-v',
+  'uim:key-skeleton',
+  'uim:layer-group',
+  'uim:layers-alt',
+  'uim:link-h',
+  'uim:microscope',
+  'uim:microsoft',
+  'uim:object-group',
+  'uim:object-ungroup',
+  'uim:paypal',
+  'uim:refresh',
+  'uim:repeat',
+  'uim:right-indent-alt',
+  'uim:rocket',
+  'uim:shield-plus',
+  'uim:social-distancing',
+  'uim:telegram-alt',
+  'uim:user-md',
+  'uim:toilet-paper',
+  'uim:youtube'
+]
+const iconList = iconNames.map(name => ({
+  ...IconConfig,
+  category: ChatCategoryEnum.COMMON,
+  categoryName: ChatCategoryEnumName.COMMON,
+  package: PackagesCategoryEnum.ICONS,
+  image: name,
+  icon: name,
+  dataset: name,
+  title: name.replace('uim:', ''),
+  redirectComponent: `${IconConfig.package}/${IconConfig.category}/${IconConfig.key}` // 跳转组件路径规则：packageName/categoryName/componentKey
+}))
+
+export default iconList

+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { chartInitConfig } from '@/settings/designSetting'
+import { IconConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  // 图标名称
+  dataset: 'uim:apple',
+  color: '#03A9F4',
+  size: 64,
+  rotate: 0 // 旋转角度
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = IconConfig.key
+  public attr = { ...chartInitConfig, w: 64, h: 64, zIndex: 1 }
+  public chartConfig = cloneDeep(IconConfig)
+  public option = cloneDeep(option)
+}

+<template>
+  <collapse-item name="属性" :expanded="true">
+    <setting-item-box name="样式">
+      <setting-item name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.color"></n-color-picker>
+      </setting-item>
+      <setting-item name="尺寸">
+        <n-input-number v-model:value="optionData.size" size="small" :min="0" placeholder="尺寸"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="旋转">
+      <setting-item name="旋转">
+        <n-select v-model:value="optionData.rotate" size="small" :options="rotateMode"></n-select>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { option } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+// 旋转方式
+const rotateMode = [
+  {
+    value: 0,
+    label: '0°'
+  },
+  {
+    value: 1,
+    label: '90°'
+  },
+  {
+    value: 2,
+    label: '180°'
+  },
+  {
+    value: 3,
+    label: '270°'
+  }
+]
+</script>

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const IconConfig: ConfigType = {
+  key: 'Icon',
+  chartKey: 'VIcon',
+  conKey: 'VCIcon',
+  title: '图标',
+  category: ChatCategoryEnum.DEFAULT,
+  categoryName: ChatCategoryEnumName.DEFAULT,
+  package: PackagesCategoryEnum.ICONS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'icon.png'
+}

+<template>
+  <div class="go-icon-box">
+    <Icon :icon="((dataset || '') as string)" :color="color" :width="size" :rotate="rotate" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { Icon } from '@iconify/vue'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const { dataset, color, size, rotate } = toRefs(props.chartConfig.option)
+</script>
+
+<style lang="scss" scoped>
+@include go('icon-box') {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: v-bind('`${w}px`');
+  height: v-bind('`${h}px`');
+}
+</style>

+import { IconConfig } from '../Default/Icon/index'
+import { PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../index.d'
+
+const iconNames = [
+  'line-md:beer-alt-filled-loop',
+  'line-md:beer-alt-twotone-loop',
+  'line-md:cloud-braces-loop',
+  'line-md:cloud-download-loop',
+  'line-md:cloud-download-outline-loop',
+  'line-md:cloud-upload-loop',
+  'line-md:cloud-upload-outline-loop',
+  'line-md:coffee-half-empty-twotone-loop',
+  'line-md:coffee-loop',
+  'line-md:coffee-twotone-loop',
+  'line-md:downloading-loop',
+  'line-md:github-loop',
+  'line-md:light-dark-loop',
+  'line-md:loading-alt-loop',
+  'line-md:loading-loop',
+  'line-md:loading-twotone-loop',
+  'line-md:moon-alt-loop',
+  'line-md:moon-alt-to-sunny-outline-loop-transition',
+  'line-md:moon-filled-loop',
+  'line-md:moon-filled-to-sunny-filled-loop-transition',
+  'line-md:star-pulsating-filled-loop',
+  'line-md:star-pulsating-loop',
+  'line-md:star-pulsating-twotone-loop',
+  'line-md:upload-loop',
+  'line-md:upload-outline-loop',
+  'line-md:uploading-loop'
+]
+const iconList = iconNames.map(name => ({
+  ...IconConfig,
+  category: ChatCategoryEnum.ML,
+  categoryName: ChatCategoryEnumName.ML,
+  package: PackagesCategoryEnum.ICONS,
+  image: name,
+  icon: name,
+  dataset: name,
+  title: name.replace('line-md:', ''),
+  redirectComponent: `${IconConfig.package}/${IconConfig.category}/${IconConfig.key}` // 跳转组件路径规则：packageName/categoryName/componentKey
+}))
+
+export default iconList

+import { IconConfig } from '../Default/Icon/index'
+import { PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../index.d'
+
+const iconNames = [
+  'wi:cloud',
+  'wi:cloudy',
+  'wi:cloudy-gusts',
+  'wi:cloudy-windy',
+  'wi:day-cloudy',
+  'wi:day-cloudy-high',
+  'wi:day-hail',
+  'wi:day-haze',
+  'wi:day-light-wind',
+  'wi:day-lightning',
+  'wi:day-rain',
+  'wi:day-rain-mix',
+  'wi:day-rain-wind',
+  'wi:day-showers',
+  'wi:day-sleet',
+  'wi:day-sleet-storm',
+  'wi:day-snow',
+  'wi:day-snow-thunderstorm',
+  'wi:day-snow-wind',
+  'wi:day-sprinkle',
+  'wi:day-storm-showers',
+  'wi:day-sunny',
+  'wi:day-sunny-overcast',
+  'wi:hail',
+  'wi:horizon',
+  'wi:horizon-alt',
+  'wi:hot',
+  'wi:lightning',
+  'wi:night-alt-cloudy',
+  'wi:night-alt-cloudy-gusts',
+  'wi:night-alt-cloudy-high',
+  'wi:night-alt-hail',
+  'wi:night-alt-lightning',
+  'wi:umbrella'
+]
+const iconList = iconNames.map(name => ({
+  ...IconConfig,
+  category: ChatCategoryEnum.WEATHER,
+  categoryName: ChatCategoryEnumName.WEATHER,
+  package: PackagesCategoryEnum.ICONS,
+  image: name,
+  icon: name,
+  dataset: name,
+  title: name.replace('wi:', ''),
+  redirectComponent: `${IconConfig.package}/${IconConfig.category}/${IconConfig.key}` // 跳转组件路径规则：packageName/categoryName/componentKey
+}))
+
+export default iconList

+export enum ChatCategoryEnum {
+  ML = 'MaterialLine',
+  COMMON = 'Common',
+  WEATHER = 'Weather',
+  DEFAULT = 'Default' // 这个仅用来表示组件分类目录，不要在 index.ts 中导入
+}
+
+export enum ChatCategoryEnumName {
+  ML = '动画',
+  COMMON = '通用',
+  WEATHER = '天气',
+  DEFAULT = '默认'
+}

+import MaterialLine from './MaterialLine'
+import Common from './Common'
+import Weather from './Weather'
+
+export const IconList = [...MaterialLine, ...Weather, ...Common]

@@ -12,7 +12,9 @@ export const option = {
   [COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATE,
   // 下拉展示
   isPanel: 0,
-  dataset: dayjs().valueOf()
+  dataset: dayjs().valueOf(),
+  differValue: 0
+
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

 <template>
   <collapse-item name="展示方式" :expanded="true">
     <setting-item-box name="选择方式">
-      <n-select
-        v-model:value="optionData.isPanel"
-        size="small"
-        :options="panelOptions"
-      />
+      <n-select v-model:value="optionData.isPanel" size="small" :options="panelOptions" />
     </setting-item-box>
   </collapse-item>
 
   <collapse-item name="时间配置" :expanded="true">
     <setting-item-box name="基础">
       <setting-item name="类型">
-        <n-select
-          v-model:value="optionData.componentInteractEventKey"
-          size="small"
-          :options="datePickerTypeOptions"
-        />
+        <n-select v-model:value="optionData.componentInteractEventKey" size="small" :options="datePickerTypeOptions" />
       </setting-item>
     </setting-item-box>
 
     <setting-item-box name="默认值" :alone="true">
-      <n-date-picker
-        size="small"
-        v-model:value="optionData.dataset"
-        :type="optionData.componentInteractEventKey"
-      />
+      <n-date-picker size="small" v-model:value="optionData.dataset" :type="optionData.componentInteractEventKey" />
+    </setting-item-box>
+
+    <setting-item-box :alone="true">
+      <template #name>
+        <n-text>动态</n-text>
+        <n-tooltip trigger="hover">
+          <template #trigger>
+            <n-icon size="21" :depth="3">
+              <help-outline-icon></help-outline-icon>
+            </n-icon>
+          </template>
+          <n-text>动态值不为0时，默认值:取当天时间相加当前值</n-text>
+        </n-tooltip>
+      </template>
+      <n-input-number v-model:value="optionData.differValue" class="input-num-width" size="small" :min="-40" :max="40">
+        <template #suffix> 天 </template>
+      </n-input-number>
     </setting-item-box>
   </collapse-item>
 </template>

@@ -39,9 +39,9 @@ const onChange = (v: number | number[]) => {
       props.chartConfig,
       useChartEditStore,
       {
-        [ComponentInteractParamsEnum.DATE_START]: v[0] | dayjs().valueOf(),
-        [ComponentInteractParamsEnum.DATE_END]: v[1] | dayjs().valueOf(),
-        [ComponentInteractParamsEnum.DATE_RANGE]: `${v[0]}-${v[1]}`
+        [ComponentInteractParamsEnum.DATE_START]: v[0] || dayjs().valueOf(),
+        [ComponentInteractParamsEnum.DATE_END]: v[1] || dayjs().valueOf(),
+        [ComponentInteractParamsEnum.DATE_RANGE]: `${v[0] || dayjs().valueOf()}-${v[1] || dayjs().valueOf()}`
       },
       InteractEventOn.CHANGE
     )
@@ -50,7 +50,7 @@ const onChange = (v: number | number[]) => {
     useChartInteract(
       props.chartConfig,
       useChartEditStore,
-      { [ComponentInteractParamsEnum.DATE]: v },
+      { [ComponentInteractParamsEnum.DATE]: v || dayjs().valueOf() },
       InteractEventOn.CHANGE
     )
   }
@@ -68,6 +68,25 @@ watch(
     immediate: true
   }
 )
+
+// 手动更新
+watch(
+  () => props.chartConfig.option.differValue,
+  (newData: number) => {
+    if (props.chartConfig.option.differValue === 0) return
+    if (typeof option.dataset === 'object') {
+      option.dataset[0] = dayjs().add(newData, 'day').valueOf()
+      option.dataset[1] = dayjs().add(newData, 'day').valueOf()
+    } else {
+      option.dataset = dayjs().add(newData, 'day').valueOf()
+    }
+    // 关联目标组件首次请求带上默认内容
+    onChange(newData)
+  },
+  {
+    immediate: true
+  }
+)
 </script>
 
 <style lang="scss" scoped>

@@ -3,11 +3,11 @@ import { CreateComponentType } from '@/packages/index.d'
 import { CarouselConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 import logo from '@/assets/logo.png'
-
+ 
 // 示例图片资源
-const modules = import.meta.globEager("./images/*");
+const modules: Record<string, { default: string }>  = import.meta.glob("./images/*", {eager: true});
 const dataset = [logo]
-for (var item in modules) {
+for (const item in modules) {
   dataset.push(modules[item].default)
 }
 

@@ -7,7 +7,8 @@
       :fallback-src="requireErrorImg()"
       :width="w"
       :height="h"
-    ></n-image>
+      lazy
+    />
   </div>
 </template>
 

@@ -2,7 +2,7 @@
   <collapse-item name="信息" :expanded="true">
     <setting-item-box name="文字" :alone="true">
       <setting-item>
-        <n-input v-model:value="optionData.dataset" size="small"></n-input>
+        <n-input v-model:value="optionData.dataset" type="textarea" size="small"></n-input>
       </setting-item>
     </setting-item-box>
     <setting-item-box name="链接" :alone="true">
@@ -30,11 +30,7 @@
         <n-input-number v-model:value="optionData.fontSize" size="small" placeholder="字体大小"></n-input-number>
       </setting-item>
       <setting-item name="字体粗细">
-        <n-select
-          v-model:value="optionData.fontWeight"
-          size="small"
-          :options="fontWeightOptions"
-        />
+        <n-select v-model:value="optionData.fontWeight" size="small" :options="fontWeightOptions" />
       </setting-item>
       <setting-item name="X轴内边距">
         <n-input-number v-model:value="optionData.paddingX" size="small" placeholder="输入内边距"></n-input-number>
@@ -87,9 +83,7 @@
 
 <script setup lang="ts">
 import { PropType } from 'vue'
-import { option, WritingModeEnum, WritingModeObject,
-  FontWeightEnum,
-  FontWeightObject, } from './config'
+import { option, WritingModeEnum, WritingModeObject, FontWeightEnum, FontWeightObject } from './config'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 const props = defineProps({
   optionData: {
@@ -117,13 +111,13 @@ const verticalOptions = [
 const fontWeightOptions = [
   {
     label: FontWeightEnum.NORMAL,
-    value: FontWeightObject[FontWeightEnum.NORMAL],
+    value: FontWeightObject[FontWeightEnum.NORMAL]
   },
   {
     label: FontWeightEnum.BOLD,
-    value: FontWeightObject[FontWeightEnum.BOLD],
-  },
-];
+    value: FontWeightObject[FontWeightEnum.BOLD]
+  }
+]
 const handleLinkClick = () => {
   window.open(props.optionData.linkHead + props.optionData.link)
 }

 <template>
   <div class="go-text-box">
     <div class="content">
-      <span style="cursor: pointer" v-if="link" @click="click">{{ option.dataset }}</span>
-      <span v-else>{{ option.dataset }}</span>
+      <span style="cursor: pointer; white-space: pre-wrap" v-if="link" @click="click"></span>
+      <span style="white-space: pre-wrap" v-else>{{ option.dataset }}</span>
     </div>
   </div>
 </template>
@@ -82,7 +82,7 @@ const click = () => {
     border-width: v-bind('borderWidth + "px"');
     border-radius: v-bind('borderRadius + "px"');
     border-color: v-bind('borderColor');
-    
+
     background-color: v-bind('backgroundColor');
   }
 }

+import { ChartFrameEnum, ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ImageConfig } from '@/packages/components/Informations/Mores/Image/index'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../index.d'
+import { setLocalStorage, getLocalStorage, goDialog } from '@/utils'
+import { StorageEnum } from '@/enums/storageEnum'
+import { FileTypeEnum } from '@/enums/fileTypeEnum'
+import { backgroundImageSize } from '@/settings/designSetting'
+import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
+
+const StoreKey = StorageEnum.GO_USER_MEDIA_PHOTOS
+
+/**
+ * 上传完成事件类型
+ */
+type UploadCompletedEventType = {
+  fileName: string
+  url: string
+}
+
+const userPhotosList: ConfigType[] = getLocalStorage(StoreKey) || []
+
+const uploadFile = (callback: Function | null = null) => {
+  const input = document.createElement('input')
+  input.type = 'file'
+  input.accept = '.png,.jpg,.jpeg,.gif' // 这里只允许部分图片类型
+  input.onchange = async () => {
+    if (!input.files || !input.files.length) return
+    const file = input.files[0]
+    const { name, size, type } = file
+    if (size > 1024 * 1024 * backgroundImageSize) {
+      window['$message'].warning(`图片超出 ${backgroundImageSize}M 限制，请重新上传！`)
+      return false
+    }
+    if (type !== FileTypeEnum.PNG && type !== FileTypeEnum.JPEG && type !== FileTypeEnum.GIF) {
+      window['$message'].warning('文件格式不符合，请重新上传！')
+      return false
+    }
+    const reader = new FileReader()
+    reader.onload = () => {
+      const eventObj: UploadCompletedEventType = { fileName: name, url: reader.result as string }
+      callback && callback(eventObj)
+    }
+    reader.readAsDataURL(file)
+  }
+  input.click()
+}
+
+const addConfig = {
+  ...ImageConfig,
+  category: ChatCategoryEnum.PRIVATE,
+  categoryName: ChatCategoryEnumName.PRIVATE,
+  package: PackagesCategoryEnum.PHOTOS,
+  chartFrame: ChartFrameEnum.STATIC,
+  title: '点击上传图片',
+  image: 'upload.png',
+  redirectComponent: `${ImageConfig.package}/${ImageConfig.category}/${ImageConfig.key}`, // 跳转组件路径规则：packageName/categoryName/componentKey
+  disabled: true,
+  configEvents: {
+    // 点击上传事件
+    addHandle: (photoConfig: ConfigType) => {
+      goDialog({
+        message: `图片需小于 ${backgroundImageSize}M 且只暂存在浏览器中。当前图片暂存上限5M，超过不再缓存新图片，请自行对接后端接口！现编译成 base64 进行渲染，对接后端后请使用【URL地址】进行交互！`,
+        transformOrigin: 'center',
+        onPositiveCallback: () => {
+          uploadFile((e: UploadCompletedEventType) => {
+            // 和上传组件一样配置，更换标题，图片，预设数据
+            const packagesStore = usePackagesStore()
+            const newPhoto = {
+              ...ImageConfig,
+              category: ChatCategoryEnum.PRIVATE,
+              categoryName: ChatCategoryEnumName.PRIVATE,
+              package: PackagesCategoryEnum.PHOTOS,
+              chartFrame: ChartFrameEnum.STATIC,
+              title: e.fileName,
+              image: e.url,
+              dataset: e.url,
+              redirectComponent: `${ImageConfig.package}/${ImageConfig.category}/${ImageConfig.key}` // 跳转组件路径规则：packageName/categoryName/componentKey
+            }
+            userPhotosList.unshift(newPhoto)
+            // 存储在本地数据中
+            setLocalStorage(StoreKey, userPhotosList)
+            // 插入到上传按钮前的位置
+            packagesStore.addPhotos(newPhoto, 1)
+          })
+        }
+      })
+    }
+  }
+}
+
+export default [addConfig, ...userPhotosList]

+import { ChartFrameEnum, PackagesCategoryEnum } from '@/packages/index.d'
+import { ImageConfig } from '@/packages/components/Informations/Mores/Image/index'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../index.d'
+
+// 远程共享库（调接口获取图像列表）
+const imageList = [
+  { imageName: 'carousel1', imageUrl: 'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg' },
+  { imageName: 'carousel2', imageUrl: 'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg' }
+]
+
+const photoConfigList = imageList.map(i => ({
+  ...ImageConfig,
+  category: ChatCategoryEnum.SHARE,
+  categoryName: ChatCategoryEnumName.SHARE,
+  package: PackagesCategoryEnum.PHOTOS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: i.imageUrl,
+  dataset: i.imageUrl,
+  title: i.imageName,
+  redirectComponent: `${ImageConfig.package}/${ImageConfig.category}/${ImageConfig.key}` // 跳转组件路径规则：packageName/categoryName/componentKey
+}))
+
+export default photoConfigList

+export enum ChatCategoryEnum {
+  PRIVATE = 'Private',
+  SHARE = 'Share'
+}
+
+export enum ChatCategoryEnumName {
+  PRIVATE = '私有图',
+  SHARE = '共享图'
+}

+import Private from './Private'
+import Share from './Share'
+
+export const PhotoList = [...Private, ...Share]

@@ -3,12 +3,8 @@
     <setting-item-box name="背景上传" :alone="true">
       <setting-item>
         <n-card class="upload-box">
-          <n-upload
-            :show-file-list="false"
-            v-model:file-list="uploadFileListRef"
-            :customRequest="customRequest"
-            :onBeforeUpload="beforeUploadHandle"
-          >
+          <n-upload :show-file-list="false" v-model:file-list="uploadFileListRef" :customRequest="customRequest"
+            :onBeforeUpload="beforeUploadHandle">
             <n-upload-dragger>
               <img v-if="optionData.backgroundImage" class="upload-show" :src="optionData.backgroundImage" alt="背景" />
               <div class="upload-img" v-show="!optionData.backgroundImage">
@@ -32,14 +28,8 @@
     </setting-item-box>
     <setting-item-box name="背景选择" :alone="true">
       <setting-item>
-        <n-select
-          size="small"
-          placeholder="请选择您要使用的背景"
-          style="width: 250px"
-          v-model:value="selectValue"
-          :options="selectBgOptions"
-          @update:value="selectBgValueHandle"
-        />
+        <n-select size="small" placeholder="请选择您要使用的背景" style="width: 250px" v-model:value="selectValue"
+          :options="selectBgOptions" @update:value="selectBgValueHandle" />
       </setting-item>
     </setting-item-box>
     <setting-item-box name="文字" :alone="true">
@@ -83,11 +73,7 @@
     </setting-item-box>
     <setting-item-box name="文字">
       <setting-item name="字体大小">
-        <n-input-number
-          v-model:value="optionData.textRightFontSize"
-          size="small"
-          placeholder="字体大小"
-        ></n-input-number>
+        <n-input-number v-model:value="optionData.textRightFontSize" size="small" placeholder="字体大小"></n-input-number>
       </setting-item>
       <setting-item name="字体位置x轴">
         <n-input-number v-model:value="optionData.xT" size="small" placeholder="字体位置"></n-input-number>
@@ -133,7 +119,7 @@ const selectValue = ref('headerBg08')
 
 // TODO待封装 成传文件夹名字获取下面所有图片
 const getFetchImages = () => {
-  const imagesModules = import.meta.globEager('@/assets/external/headbackground/*')
+  const imagesModules: Record<string, { default: string }> = import.meta.glob('@/assets/external/headbackground/*', { eager: true })
   selectBgOptions.value = Object.keys(imagesModules).map(item => ({
     label: imagesModules[item]?.default.split('/').at(-1),
     value: imagesModules[item]?.default
@@ -199,31 +185,38 @@ const clearImage = () => {
 <style lang="scss" scoped>
 // $uploadWidth: 215px;
 $uploadHeight: 193px;
+
 .upload-box {
   cursor: pointer;
   margin-bottom: 20px;
+
   @include deep() {
     .n-card__content {
       padding: 0;
       overflow: hidden;
     }
+
     .n-upload-dragger {
       padding: 5px;
       // width: $uploadWidth;
     }
   }
+
   .upload-show {
     width: -webkit-fill-available;
     height: $uploadHeight;
     border-radius: 5px;
   }
+
   .upload-img {
     display: flex;
     flex-direction: column;
     align-items: center;
+
     img {
       height: 150px;
     }
+
     .upload-desc {
       padding: 10px 0;
     }

@@ -3,16 +3,24 @@ import { ConfigType } from "../index.d"
 import { matchExternalPrefixReg } from "./useWidgetKey"
 
 const getAllConfigFile = async () => {
-  return import.meta.glob('../components/**/config.ts')
+  return import.meta.glob('../components/**/config.ts', )
 }
 
 const getChartConfigFile = async (path: string) => {
   const fileList = await getAllConfigFile()
   return fileList[path]() as any
-}
+} 
 
 export const createComponent = async (configType: ConfigType) => {
-  const { key, chartKey, category, package: packageName } = configType
+  const { key, chartKey, category, package: packageName, redirectComponent } = configType
+  // redirectComponent 是给图片组件库和图标组件库使用的
+  if (redirectComponent) {
+    const [packageName, categoryName, keyName] = redirectComponent.split('/')
+    const filePath = `../components/${packageName}/${categoryName}/${keyName}/config.ts`
+    const redirectChart = await getChartConfigFile(filePath)
+    return new redirectChart.default()
+  }
+
   const hasExternalPrefix = matchExternalPrefixReg.test(chartKey)
   const filePath = `../components${hasExternalPrefix ? '/external' : ''}/${packageName}/${category}/${key}/config.ts`
   const chart = await getChartConfigFile(filePath)

@@ -15,15 +15,34 @@ export enum ChartFrameEnum {
 
 // 组件配置
 export type ConfigType = {
+  // 组件 key
   key: string
+  // 画布组件 key
   chartKey: string
+  // 右侧设置面板组件 key
   conKey: string
+  // 标题
   title: string
+  // 分类
   category: string
+  // 分类名称
   categoryName: string
+  // 所属包
   package: string
+  // 归类
   chartFrame?: ChartFrameEnum
+  // 预览图
   image: string
+  // 从指定路径创建创建该组件
+  redirectComponent?: string
+  // 组件预设的 dataset 值(图片/图标)
+  dataset?: any
+  // 禁用 拖拽或双击生成组件
+  disabled?: boolean
+  // 图标
+  icon?: string
+  // 事件
+  configEvents?: { [T: string]: Function }
 }
 
 // 数据请求
@@ -120,7 +139,7 @@ export interface PublicConfigType {
   }
   filter?: string
   status: StatusType
-  interactActions?: InteractActionsType[],
+  interactActions?: InteractActionsType[]
   events: {
     baseEvent: {
       [K in BaseEvent]?: string
@@ -139,7 +158,8 @@ export interface PublicConfigType {
 export interface CreateComponentType extends PublicConfigType, requestConfig {
   key: string
   chartConfig: ConfigType
-  option: GlobalThemeJsonType,
+  option: GlobalThemeJsonType
+  groupList?: Array<CreateComponentType>
 }
 
 // 组件成组实例类
@@ -155,6 +175,8 @@ export enum PackagesCategoryEnum {
   CHARTS = 'Charts',
   TABLES = 'Tables',
   INFORMATIONS = 'Informations',
+  PHOTOS = 'Photos',
+  ICONS = 'Icons',
   DECORATES = 'Decorates'
 }
 
@@ -163,6 +185,8 @@ export enum PackagesCategoryName {
   CHARTS = '图表',
   TABLES = '列表',
   INFORMATIONS = '信息',
+  PHOTOS = '图片',
+  ICONS = '图标',
   DECORATES = '小组件'
 }
 
@@ -177,5 +201,7 @@ export type PackagesType = {
   [PackagesCategoryEnum.CHARTS]: ConfigType[]
   [PackagesCategoryEnum.INFORMATIONS]: ConfigType[]
   [PackagesCategoryEnum.TABLES]: ConfigType[]
+  [PackagesCategoryEnum.PHOTOS]: ConfigType[]
+  [PackagesCategoryEnum.ICONS]: ConfigType[]
   [PackagesCategoryEnum.DECORATES]: ConfigType[]
 }

@@ -2,19 +2,31 @@ 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 { PhotoList } from '@/packages/components/Photos/index'
+import { IconList } from '@/packages/components/Icons/index'
+
 import { PackagesCategoryEnum, PackagesType, ConfigType, FetchComFlagType } from '@/packages/index.d'
 import { useInjectLib } from './components/external/utils/useInjectLib'
 
-const configModules = import.meta.globEager('./components/**/config.vue')
-const indexModules = import.meta.globEager('./components/**/index.vue')
-const imagesModules = import.meta.globEager('../assets/images/chart/**')
+const configModules: Record<string, { default: string }> = import.meta.glob('./components/**/config.vue', {
+  eager: true
+})
+const indexModules: Record<string, { default: string }> = import.meta.glob('./components/**/index.vue', {
+  eager: true
+})
+const imagesModules: Record<string, { default: string }> = import.meta.glob('../assets/images/chart/**', {
+  eager: true
+})
+
 
-// * 所有图表
+// * 所有图表 
 export const packagesList: PackagesType = {
   [PackagesCategoryEnum.CHARTS]: ChartList,
   [PackagesCategoryEnum.INFORMATIONS]: InformationList,
   [PackagesCategoryEnum.TABLES]: TableList,
-  [PackagesCategoryEnum.DECORATES]: DecorateList
+  [PackagesCategoryEnum.DECORATES]: DecorateList,
+  [PackagesCategoryEnum.PHOTOS]: PhotoList,
+  [PackagesCategoryEnum.ICONS]: IconList
 }
 
 /**
@@ -22,7 +34,13 @@ export const packagesList: PackagesType = {
  * @param targetData
  */
 export const createComponent = async (targetData: ConfigType) => {
-  const { category, key } = targetData
+  const { redirectComponent, category, key } = targetData
+  // redirectComponent 是给图片组件库和图标组件库使用的
+  if (redirectComponent) {
+    const [packageName, categoryName, keyName] = redirectComponent.split('/')
+    const redirectChart = await import(`./components/${packageName}/${categoryName}/${keyName}/config.ts`)
+    return new redirectChart.default()
+  }
   const chart = await import(`./components/${targetData.package}/${category}/${key}/config.ts`)
   return new chart.default()
 }
@@ -66,6 +84,8 @@ export const fetchConfigComponent = (dropData: ConfigType) => {
  */
 export const fetchImages = async (targetData?: ConfigType) => {
   if (!targetData) return ''
+  // 正则判断图片是否为 url，是则直接返回该 url
+  if (/^(http|https):\/\/([\w.]+\/?)\S*/.test(targetData.image)) return targetData.image
   // 新数据动态处理
   const { image, package: targetDataPackage } = targetData
   // 兼容旧数据

@@ -61,13 +61,14 @@ import {
   Pulse as PulseIcon,
   Folder as FolderIcon,
   FolderOpen as FolderOpenIcon,
-  Image as ImageIcon,
+  ImageOutline as ImageIcon,
   Images as ImagesIcon,
   List as ListIcon,
   EyeOutline as EyeOutlineIcon,
   EyeOffOutline as EyeOffOutlineIcon,
   Albums as AlbumsIcon,
-  Analytics as AnalyticsIcon
+  Analytics as AnalyticsIcon,
+  AirplaneOutline as AirPlaneOutlineIcon
 } from '@vicons/ionicons5'
 
 import {
@@ -238,10 +239,12 @@ const ionicons5 = {
   // 眼睛
   EyeOutlineIcon,
   EyeOffOutlineIcon,
-  // 图表列表 
+  // 图表列表
   AlbumsIcon,
   // 分析
-  AnalyticsIcon
+  AnalyticsIcon,
+  // 飞机
+  AirPlaneOutlineIcon
 }
 
 const carbon = {

@@ -86,8 +86,18 @@
   },
   "legend": {
     "show": true,
-    "top": "5%",
+    "type": "scroll",
+    "x": "center",
+    "y": "top",
+    "icon": "circle",
+    "orient": "horizontal",
     "textStyle": {
+      "color": "#B9B8CE",
+      "fontSize": 18
+    },
+    "itemHeight": 15,
+    "itemWidth": 15,
+    "pageTextStyle": {
       "color": "#B9B8CE"
     }
   },

@@ -2212,9 +2212,9 @@
     "pinyin": "tengluozi"
   },
   {
-    "CMYK": [57, 62, 16, 2],
-    "RGB": [128, 109, 158],
-    "hex": "#806d9e",
+    "CMYK": [34, 39, 0, 24],
+    "RGB": [128, 118, 195],
+    "hex": "#8076c3",
     "name": "槿紫",
     "pinyin": "jinzi"
   },

@@ -9,12 +9,12 @@ export const lang = LangEnum.ZH
 export const watermarkText = "GoView 低代码平台"
 
 // 分组名称
-export const groupTitle = '分组'
+export const groupTitle = "分组"
 
 // 主题配置
 export const theme = {
   // 默认是否开启深色主题
-  darkTheme: false,
+  darkTheme: true,
   //默认主题色
   appTheme: '#51d6a9',
   appThemeDetail: null,

@@ -191,7 +191,7 @@ export const useChartEditStore = defineStore({
       this.targetChart.hoverId = hoverId
     },
     // * 设置目标数据 select
-    setTargetSelectChart(selectId?: string | string[], push = false) {
+    setTargetSelectChart(selectId?: string | string[], push: boolean = false) {
       // 重复选中
       if (this.targetChart.selectId.find((e: string) => e === selectId)) return
 
@@ -512,7 +512,7 @@ export const useChartEditStore = defineStore({
               item.id = getUUID()
             })
           }
-
+        
           return e
         }
         const isCut = recordCharts.type === HistoryActionTypeEnum.CUT

@@ -55,7 +55,11 @@ export const useChartLayoutStore = defineStore({
     }
   },
   actions: {
-    setItem<T extends keyof ChartLayoutType, K extends ChartLayoutType[T]>(key: T, value: K): void {
+    setItem<T extends keyof ChartLayoutType, K extends ChartLayoutType[T]>(
+      key: T,
+      value: K,
+      computedScale = true
+    ): void {
       this.$patch(state => {
         state[key] = value
       })
@@ -64,9 +68,11 @@ export const useChartLayoutStore = defineStore({
       // 这里需要标记重置画布位置
       this.rePositionCanvas = true;
       // 重新计算拖拽区域缩放比例
-      setTimeout(() => {
-        chartEditStore.computedScale()
-      }, 500)
+      if (computedScale) {
+        setTimeout(() => {
+          chartEditStore.computedScale()
+        }, 500)
+      }
     },
     setItemUnHandle<T extends keyof ChartLayoutType, K extends ChartLayoutType[T]>(key: T, value: K): void {
       this.$patch(state => {

@@ -4,5 +4,6 @@ export { ConfigType }
 
 export { PackagesType }
 export interface PackagesStoreType {
-  packagesList: PackagesType
+  packagesList: PackagesType,
+  newPhoto?: ConfigType
 }

 import { defineStore } from 'pinia'
-import { PackagesStoreType, PackagesType } from './packagesStore.d'
-import { packagesList } from '@/packages/index'
-
-// 组件 pakages
+import { ConfigType, PackagesStoreType, PackagesType } from './packagesStore.d'
+import { packagesList } from '@/packages/index'
+import { StorageEnum } from '@/enums/storageEnum'
+import { getLocalStorage, setLocalStorage } from '@/utils'
+
+// 组件 packages
 export const usePackagesStore = defineStore({
   id: 'usePackagesStore',
   state: (): PackagesStoreType => ({
-    packagesList: Object.freeze(packagesList)
+    packagesList: Object.freeze(packagesList),
+    newPhoto: undefined
   }),
   getters: {
     getPackagesList(): PackagesType {
       return this.packagesList
     }
+  },
+  actions: {
+    addPhotos(newPhoto: ConfigType, index: number) {
+      this.newPhoto = newPhoto
+      this.packagesList.Photos.splice(index, 0, newPhoto)
+    },
+    deletePhotos(photoInfo: ConfigType, index: number) {
+      this.packagesList.Photos.splice(index, 1)
+      const StoreKey = StorageEnum.GO_USER_MEDIA_PHOTOS
+      const userPhotosList = getLocalStorage(StoreKey)
+      userPhotosList.splice(index - 1, 1)
+      setLocalStorage(StoreKey, userPhotosList)
+    }
   }
 })

@@ -317,6 +317,11 @@ export const JSONStringify = <T>(data: T) => {
   )
 }
 
+export const evalFn = (fn: string) => {
+  var Fun = Function // 一个变量指向Function，防止前端编译工具报错
+  return new Fun('return ' + fn)()
+}
+
 /**
  * * JSON反序列化，支持函数和 undefined
  * @param data

@@ -9,11 +9,12 @@
       <div
         class="item-box"
         v-for="(item, index) in menuOptions"
-        :key="index"
+        :key="item.title"
         draggable
-        @dragstart="dragStartHandle($event, item)"
-        @dragend="dragendHandle"
+        @dragstart="!item.disabled && dragStartHandle($event, item)"
+        @dragend="!item.disabled && dragendHandle"
         @dblclick="dblclickHandle(item)"
+        @click="clickHandle(item)"
       >
         <div class="list-header">
           <mac-os-control-btn class="list-header-control-btn" :mini="true" :disabled="true"></mac-os-control-btn>
@@ -21,14 +22,28 @@
             <n-ellipsis>{{ item.title }}</n-ellipsis>
           </n-text>
         </div>
-        <div class="list-center go-flex-center go-transition">
-          <chart-glob-image class="list-img" :chartConfig="item"></chart-glob-image>
+        <div class="list-center go-flex-center go-transition" draggable="true">
+          <Icon v-if="item.icon" class="list-img" :icon="item.icon" color="#999" width="48" />
+          <chart-glob-image v-else class="list-img" :chartConfig="item" />
         </div>
         <div class="list-bottom">
           <n-text class="list-bottom-text" depth="3">
             <n-ellipsis style="max-width: 90%">{{ item.title }}</n-ellipsis>
           </n-text>
         </div>
+        <!-- 遮罩 -->
+        <div v-if="item.disabled" class="list-model"></div>
+        <!-- 工具栏 -->
+        <div v-if="isShowTools(item)" class="list-tools go-transition" @click="deleteHandle(item, index)">
+          <n-button text type="default" color="#ffffff">
+            <template #icon>
+              <n-icon>
+                <TrashIcon />
+              </n-icon>
+            </template>
+            <span>删除</span>
+          </n-button>
+        </div>
       </div>
     </div>
   </div>
@@ -42,11 +57,15 @@ 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, JSONStringify } from '@/utils'
+import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
+import { componentInstall, loadingStart, loadingFinish, loadingError, JSONStringify, goDialog } from '@/utils'
 import { DragKeyEnum } from '@/enums/editPageEnum'
 // import { createComponent } from '@/packages'
-import { ConfigType, CreateComponentType } from '@/packages/index.d'
+import { ConfigType, CreateComponentType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum } from '@/packages/components/Photos/index.d'
 import { fetchConfigComponent, fetchChartComponent } from '@/packages/index'
+import { Icon } from '@iconify/vue'
+import { icon } from '@/plugins'
 
 // THINGS_KIT 覆盖原始创建组件逻辑
 import { createComponent } from '@/packages/external/override'
@@ -54,8 +73,10 @@ import { createComponent } from '@/packages/external/override'
 import omit from 'lodash/omit'
 
 const chartEditStore = useChartEditStore()
+const { TrashIcon } = icon.ionicons5
 
-defineProps({
+const emit = defineEmits(['deletePhoto'])
+const props = defineProps({
   menuOptions: {
     type: Array as PropType<ConfigType[]>,
     default: () => []
@@ -65,6 +86,11 @@ defineProps({
 const chartLayoutStore = useChartLayoutStore()
 const contentChartsItemBoxRef = ref()
 
+// 判断工具栏展示
+const isShowTools = (item: ConfigType) => {
+  return !item.disabled && item.package === PackagesCategoryEnum.PHOTOS && item.category === ChatCategoryEnum.PRIVATE
+}
+
 // 组件展示状态
 const chartMode: Ref<ChartModeEnum> = computed(() => {
   return chartLayoutStore.getChartType
@@ -72,6 +98,7 @@ const chartMode: Ref<ChartModeEnum> = computed(() => {
 
 // 拖拽处理
 const dragStartHandle = (e: DragEvent, item: ConfigType) => {
+  if (item.disabled) return
   // 动态注册图表组件
   componentInstall(item.chartKey, fetchChartComponent(item))
   componentInstall(item.conKey, fetchConfigComponent(item))
@@ -88,6 +115,7 @@ const dragendHandle = () => {
 
 // 双击添加
 const dblclickHandle = async (item: ConfigType) => {
+  if (item.disabled) return
   try {
     loadingStart()
     // 动态注册图表组件
@@ -95,18 +123,39 @@ const dblclickHandle = async (item: ConfigType) => {
     componentInstall(item.conKey, fetchConfigComponent(item))
     // 创建新图表组件
     let newComponent: CreateComponentType = await createComponent(item)
+    if (item.redirectComponent) {
+      item.dataset && (newComponent.option.dataset = item.dataset)
+      newComponent.chartConfig.title = item.title
+      newComponent.chartConfig.chartFrame = item.chartFrame
+    }
     // 添加
     chartEditStore.addComponentList(newComponent, false, true)
     // 选中
     chartEditStore.setTargetSelectChart(newComponent.id)
     loadingFinish()
   } catch (error) {
-    console.log(error)
     loadingError()
     window['$message'].warning(`图表正在研发中, 敬请期待...`)
   }
 }
 
+// 单击事件
+const clickHandle = (item: ConfigType) => {
+  item?.configEvents?.addHandle(item)
+}
+
+const deleteHandle = (item: ConfigType, index: number) => {
+  goDialog({
+    message: '是否删除此图片？',
+    transformOrigin: 'center',
+    onPositiveCallback: () => {
+      const packagesStore = usePackagesStore()
+      emit('deletePhoto', item, index)
+      packagesStore.deletePhotos(item, index)
+    }
+  })
+}
+
 watch(
   () => chartMode.value,
   (newValue: ChartModeEnum) => {
@@ -139,6 +188,7 @@ $halfCenterHeight: 50px;
   gap: 9px;
   transition: all 0.7s linear;
   .item-box {
+    position: relative;
     margin: 0;
     width: $itemWidth;
     overflow: hidden;
@@ -149,7 +199,10 @@ $halfCenterHeight: 50px;
     &:hover {
       @include hover-border-color('background-color4');
       .list-img {
-        transform: scale(1.1);
+        transform: scale(1.08);
+      }
+      .list-tools {
+        opacity: 1;
       }
     }
     .list-header {
@@ -161,6 +214,7 @@ $halfCenterHeight: 50px;
       &-text {
         font-size: 12px;
         margin-left: 8px;
+        user-select: none;
       }
     }
     .list-center {
@@ -169,8 +223,9 @@ $halfCenterHeight: 50px;
       overflow: hidden;
       .list-img {
         height: 100px;
-        width: 140px;
+        max-width: 140px;
         border-radius: 6px;
+        object-fit: contain;
         @extend .go-transition;
       }
     }
@@ -181,6 +236,33 @@ $halfCenterHeight: 50px;
         padding-left: 5px;
       }
     }
+    .list-model {
+      z-index: 1;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0);
+    }
+    .list-tools {
+      position: absolute;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      bottom: 0;
+      left: 0;
+      margin: 0 4px 2px;
+      height: 26px;
+      width: calc(100% - 8px);
+      opacity: 0;
+      border-radius: 6px;
+      backdrop-filter: blur(20px);
+      background-color: rgba(255, 255, 255, 0.15);
+      &:hover {
+        background-color: rgba(232, 128, 128, 0.7);
+      }
+    }
   }
   &.single {
     .item-box {
@@ -200,6 +282,9 @@ $halfCenterHeight: 50px;
     .item-box {
       width: $halfItemWidth;
       max-width: $maxItemWidth;
+      .list-img {
+        max-width: 76px;
+      }
     }
     .list-center {
       height: $halfCenterHeight;
@@ -208,6 +293,7 @@ $halfCenterHeight: 50px;
         height: $halfCenterHeight;
         width: auto;
         transition: all 0.2s;
+        object-fit: contain;
       }
     }
     .list-bottom {

@@ -11,8 +11,8 @@
       @update:value="clickItemHandle"
     ></n-menu>
     <div class="chart-content-list">
-      <n-scrollbar>
-        <charts-item-box :menuOptions="packages.selectOptions"></charts-item-box>
+      <n-scrollbar trigger="none">
+        <charts-item-box :menuOptions="packages.selectOptions" @deletePhoto="deleteHandle"></charts-item-box>
       </n-scrollbar>
     </div>
   </div>
@@ -23,8 +23,11 @@ import { ref, watch, computed, reactive } from 'vue'
 import { ConfigType } from '@/packages/index.d'
 import { useSettingStore } from '@/store/modules/settingStore/settingStore'
 import { loadAsyncComponent } from '@/utils'
+import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
+import { PackagesCategoryEnum } from '@/packages/index.d'
 
 const ChartsItemBox = loadAsyncComponent(() => import('../ChartsItemBox/index.vue'))
+const packagesStore = usePackagesStore()
 
 const props = defineProps({
   selectOptions: {
@@ -61,7 +64,7 @@ let packages = reactive<{
   saveSelectOptions: {}
 })
 
-const selectValue = ref<string>()
+const selectValue = ref<string>('all')
 
 // 设置初始列表
 const setSelectOptions = (categorys: any) => {
@@ -79,7 +82,6 @@ watch(
     if (!newData) return
     newData.list.forEach((e: ConfigType) => {
       const value: ConfigType[] = (packages.categorys as any)[e.category]
-      // @ts-ignore
       packages.categorys[e.category] = value && value.length ? [...value, e] : [e]
       packages.categoryNames[e.category] = e.categoryName
       packages.categorys['all'].push(e)
@@ -100,6 +102,22 @@ watch(
   }
 )
 
+watch(
+  () => packagesStore.newPhoto,
+  newPhoto => {
+    if (!newPhoto) return
+    const newPhotoCategory = newPhoto.category
+    packages.categorys[newPhotoCategory].splice(1, 0, newPhoto)
+    packages.categorys['all'].splice(1, 0, newPhoto)
+  }
+)
+
+// 删除图片
+const deleteHandle = (item: ConfigType, index: number) => {
+  packages.categorys[item.category].splice(index, 1)
+  packages.categorys['all'].splice(index, 1)
+}
+
 // 处理点击事件
 const clickItemHandle = (key: string) => {
   packages.selectOptions = packages.categorys[key]
@@ -119,6 +137,7 @@ $menuWidth: 65px;
     @include fetch-bg-color('background-color2-shallow');
   }
   .chart-content-list {
+    width: 200px;
     flex: 1;
     display: flex;
     flex-direction: column;

@@ -37,7 +37,8 @@
               :title="item.title"
               @click="selectChartHandle(item)"
             >
-              <chart-glob-image class="list-item-img" :chartConfig="item"></chart-glob-image>
+              <Icon v-if="item.icon" class="list-img" :icon="item.icon" color="#999" width="20" />
+              <chart-glob-image v-else class="list-item-img" :chartConfig="item" />
               <n-text class="list-item-fs" depth="2">{{ item.title }}</n-text>
             </div>
           </n-scrollbar>
@@ -72,7 +73,7 @@ import { icon } from '@/plugins'
 // THINGS_KIT 覆盖原始创建组件逻辑
 import { createComponent } from '@/packages/external/override'
 import { ConfigType, CreateComponentType } from '@/packages/index.d'
-import { themeColor, MenuOptionsType } from '../../hooks/useAside.hook'
+import { themeColor } from '../../hooks/useLayout.hook'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { ChartModeEnum, ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
@@ -80,6 +81,7 @@ import { isString, addEventListener, removeEventListener } from '@/utils'
 import { fetchConfigComponent, fetchChartComponent } from '@/packages/index'
 import { componentInstall, loadingStart, loadingFinish, loadingError } from '@/utils'
 import { ChartGlobImage } from '@/components/Pages/ChartGlobImage'
+import { Icon } from '@iconify/vue'
 
 const props = defineProps({
   menuOptions: {
@@ -131,7 +133,9 @@ const searchHandle = (key: string | null) => {
   }
   loading.value = true
   showPopover.value = true
-  searchRes.value = List.filter((e: ConfigType) => !key || e.title.toLowerCase().includes(key.toLowerCase()))
+  searchRes.value = List.filter(
+    (e: ConfigType) => !e.disabled && (!key || e.title.toLowerCase().includes(key.toLowerCase()))
+  )
   setTimeout(() => {
     loading.value = undefined
   }, 500)
@@ -148,6 +152,7 @@ const listenerCloseHandle = (e: Event) => {
 
 // 选择处理
 const selectChartHandle = async (item: ConfigType) => {
+  if (item.disabled) return
   try {
     loadingStart()
     // 动态注册图表组件
@@ -155,6 +160,11 @@ const selectChartHandle = async (item: ConfigType) => {
     componentInstall(item.conKey, fetchConfigComponent(item))
     // 创建新图表组件
     let newComponent: CreateComponentType = await createComponent(item)
+    if (item.redirectComponent) {
+      item.dataset && (newComponent.option.dataset = item.dataset)
+      newComponent.chartConfig.title = item.title
+      newComponent.chartConfig.chartFrame = item.chartFrame
+    }
     // 添加
     chartEditStore.addComponentList(newComponent, false, true)
     // 选中
@@ -163,7 +173,6 @@ const selectChartHandle = async (item: ConfigType) => {
     closeHandle()
     loadingFinish()
   } catch (error) {
-    console.log(error)
     loadingError()
     window['$message'].warning(`图表正在研发中, 敬请期待...`)
   }
@@ -224,10 +233,16 @@ $searchWidth: 176px;
             font-size: 12px;
           }
           &-img {
-            height: 28px;
+            height: 20px;
+            max-width: 30px;
             margin-right: 5px;
             border-radius: 5px;
           }
+          & > svg {
+            min-width: 20px;
+            min-height: 20px;
+            margin-right: 5px;
+          }
           &:hover {
             &::before {
               content: '';

-import { shallowReactive, ref } from 'vue'
+import { ref, watch, computed } from 'vue'
 import { icon } from '@/plugins'
 import { renderLang, renderIcon } from '@/utils'
 import { themeColor, setItem, getCharts } from './useLayout.hook'
-import { PackagesCategoryEnum, PackagesCategoryName, PackagesType } from '@/packages/index.d'
-// 图表
+import { PackagesCategoryEnum, PackagesCategoryName, ConfigType, PackagesType } from '@/packages/index.d'
 import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
 import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
 // THINGS_KIT 追加组件库进入aside 侧边栏
 import { useInjectAside } from './external/useInjectAside'
+
 // 图标
-const { BarChartIcon } = icon.ionicons5
+const { AirPlaneOutlineIcon, ImageIcon, BarChartIcon } = icon.ionicons5
 const {
   TableSplitIcon,
   RoadmapIcon,
@@ -32,65 +32,77 @@ const menuOptions: MenuOptionsType[] = []
 const packagesListObj = {
   [PackagesCategoryEnum.CHARTS]: {
     icon: renderIcon(RoadmapIcon),
-    label: PackagesCategoryName.CHARTS,
+    label: PackagesCategoryName.CHARTS
   },
   [PackagesCategoryEnum.INFORMATIONS]: {
     icon: renderIcon(SpellCheckIcon),
-    label: PackagesCategoryName.INFORMATIONS,
+    label: PackagesCategoryName.INFORMATIONS
   },
   [PackagesCategoryEnum.TABLES]: {
     icon: renderIcon(TableSplitIcon),
-    label: PackagesCategoryName.TABLES,
+    label: PackagesCategoryName.TABLES
   },
   [PackagesCategoryEnum.DECORATES]: {
     icon: renderIcon(GraphicalDataFlowIcon),
-    label: PackagesCategoryName.DECORATES,
+    label: PackagesCategoryName.DECORATES
   },
+  [PackagesCategoryEnum.PHOTOS]: {
+    icon: renderIcon(ImageIcon),
+    label: PackagesCategoryName.PHOTOS
+  },
+  [PackagesCategoryEnum.ICONS]: {
+    icon: renderIcon(AirPlaneOutlineIcon),
+    label: PackagesCategoryName.ICONS
+  }
 }
 // THINGS_KIT 追加组件库进入aside 侧边栏
 useInjectAside(packagesListObj as any)
+export const useAsideHook = () => {
+  const packagesStore = usePackagesStore()
+  const menuOptions: MenuOptionsType[] = []
 
-// 处理列表
-const handlePackagesList = () => {
-  for (const val in getPackagesList) {
-    menuOptions.push({
-      key: val,
-      // @ts-ignore
-      icon: packagesListObj[val].icon,
-      // @ts-ignore
-      label: packagesListObj[val].label,
-      // @ts-ignore
-      list: getPackagesList[val],
-    })
+  // 处理列表
+  const handlePackagesList = () => {
+    for (const val in packagesStore.getPackagesList) {
+      menuOptions.push({
+        key: val,
+        // @ts-ignore
+        icon: packagesListObj[val].icon,
+        // @ts-ignore
+        label: packagesListObj[val].label,
+        // @ts-ignore
+        list: packagesStore.getPackagesList[val]
+      })
+    }
   }
-}
-handlePackagesList()
+  handlePackagesList()
 
-// 记录选中值
-let beforeSelect: string = menuOptions[0]['key']
-const selectValue = ref<string>(menuOptions[0]['key'])
+  // 记录选中值
+  let beforeSelect: string = menuOptions[0]['key']
+  const selectValue = ref<string>(menuOptions[0]['key'])
 
-// 选中的对象值
-const selectOptions = ref(menuOptions[0])
+  // 选中的对象值
+  const selectOptions = ref(menuOptions[0])
 
-// 点击 item
-const clickItemHandle = (key: string, item: any) => {
-  selectOptions.value = item
-  // 处理折叠
-  if (beforeSelect === key) {
-    setItem(ChartLayoutStoreEnum.CHARTS, !getCharts.value)
-  } else {
-    setItem(ChartLayoutStoreEnum.CHARTS, true)
+  // 点击 item
+  const clickItemHandle = (key: string, item: any) => {
+    selectOptions.value = item
+    // 处理折叠
+    if (beforeSelect === key) {
+      setItem(ChartLayoutStoreEnum.CHARTS, !getCharts.value, false)
+    } else {
+      setItem(ChartLayoutStoreEnum.CHARTS, true, false)
+    }
+    beforeSelect = key
   }
-  beforeSelect = key
-}
 
-export {
-  getCharts,
-  BarChartIcon,
-  themeColor,
-  selectOptions,
-  selectValue,
-  clickItemHandle,
-  menuOptions,
+  return {
+    getCharts,
+    BarChartIcon,
+    themeColor,
+    selectOptions,
+    selectValue,
+    clickItemHandle,
+    menuOptions, 
+  }
 }

@@ -9,7 +9,7 @@ import { useDesignStore } from '@/store/modules/designStore/designStore'
 const designStore = useDesignStore()
 const themeColor = ref(designStore.getAppTheme)
 
-// 结构控制
+// 结构控制 
 const { setItem } = useChartLayoutStore()
 const { getCharts } = toRefs(useChartLayoutStore())
 
@@ -17,4 +17,4 @@ export {
   themeColor,
   setItem,
   getCharts
-}
\ No newline at end of file
+}

 <template>
   <!-- 左侧所有组件的展示列表 -->
-  <content-box
-    class="go-content-charts"
-    :class="{ scoped: !getCharts }"
-    title="组件"
-    :depth="1"
-    :backIcon="false"
-  >
+  <content-box class="go-content-charts" :class="{ scoped: !getCharts }" title="组件" :depth="1" :backIcon="false">
     <template #icon>
       <n-icon size="14" :depth="2">
         <bar-chart-icon></bar-chart-icon>
@@ -28,13 +22,7 @@
           @update:value="clickItemHandle"
         ></n-menu>
         <div class="menu-component-box">
-          <go-skeleton
-            :load="!selectOptions"
-            round
-            text
-            :repeat="2"
-            style="width: 90%"
-          ></go-skeleton>
+          <go-skeleton :load="!selectOptions" round text :repeat="2" style="width: 90%"></go-skeleton>
           <charts-option-content
             v-if="selectOptions"
             :selectOptions="selectOptions"
@@ -50,15 +38,9 @@
 import { ContentBox } from '../ContentBox/index'
 import { ChartsOptionContent } from './components/ChartsOptionContent'
 import { ChartsSearch } from './components/ChartsSearch'
-import {
-  getCharts,
-  BarChartIcon,
-  themeColor,
-  selectOptions,
-  selectValue,
-  clickItemHandle,
-  menuOptions,
-} from './hooks/useAside.hook'
+import { useAsideHook } from './hooks/useAside.hook'
+
+const { getCharts, BarChartIcon, themeColor, selectOptions, selectValue, clickItemHandle, menuOptions } = useAsideHook()
 </script>
 
 <style lang="scss" scoped>

@@ -30,7 +30,7 @@
         :onBeforeUpload="beforeUploadHandle"
       >
         <n-upload-dragger>
-          <img v-if="canvasConfig.backgroundImage" class="upload-show" :src="getBackgroundImagePath(canvasConfig.backgroundImage)" alt="背景" />
+          <img v-if="canvasConfig.backgroundImage" class="upload-show" :src="canvasConfig.backgroundImage" alt="背景" />
           <div class="upload-img" v-show="!canvasConfig.backgroundImage">
             <img src="@/assets/images/canvas/noImage.png" />
             <n-text class="upload-desc" depth="3">

@@ -130,8 +130,9 @@ const sendHandle = async () => {
     const res = await customizeHttp(toRaw(targetData.value.request), toRaw(chartEditStore.getRequestGlobalConfig))
     loading.value = false
     if (res) {
-      if (!res?.data && !targetData.value.filter) window['$message'].warning('您的数据不符合默认格式，请配置过滤器！')
-      targetData.value.option.dataset = newFunctionHandle(res?.data, res, targetData.value.filter)
+      const { data } = res
+      if (!data && !targetData.value.filter) window['$message'].warning('您的数据不符合默认格式，请配置过滤器！')
+      targetData.value.option.dataset = newFunctionHandle(data, res, targetData.value.filter)
       showMatching.value = true
       return
     }

 <template>
   <!-- 组件配置 -->
   <n-divider class="go-my-3" title-placement="left"></n-divider>
-  <setting-item-box
-    :itemRightStyle="{
-      gridTemplateColumns: '6fr 2fr'
-    }"
-    style="padding-right: 25px"
-  >
+  <setting-item-box :itemRightStyle="{
+    gridTemplateColumns: '6fr 2fr'
+  }" style="padding-right: 25px">
     <template #name>
       地址
       <n-tooltip trigger="hover" v-if="isDev()">
@@ -37,13 +34,8 @@
     </setting-item>
     <setting-item name="更新间隔，为 0 只会初始化">
       <n-input-group>
-        <n-input-number
-          v-model:value.trim="requestInterval"
-          class="select-time-number"
-          min="0"
-          :show-button="false"
-          placeholder="默认使用全局数据"
-        >
+        <n-input-number v-model:value.trim="requestInterval" class="select-time-number" min="0" :show-button="false"
+          placeholder="默认使用全局数据">
         </n-input-number>
         <!-- 单位 -->
         <n-select class="select-time-options" v-model:value="requestIntervalUnit" :options="selectTimeOptions" />
@@ -65,6 +57,7 @@ import { RequestHeader } from '../RequestHeader'
 import { isDev } from '@/utils'
 import { icon } from '@/plugins'
 import {
+  graphUrl,
   chartDataUrl,
   chartSingleDataUrl,
   rankListUrl,
@@ -80,7 +73,8 @@ import {
   capsuleUrl,
   wordCloudUrl,
   treemapUrl,
-  threeEarth01Url
+  threeEarth01Url,
+  sankeyUrl
 } from '@/api/mock'
 
 const props = defineProps({
@@ -142,6 +136,12 @@ const apiList = [
   },
   {
     value: `【三维地球】${threeEarth01Url}`
+  },
+  {
+    value: `【桑基图】${sankeyUrl}`
+  },
+  {
+    value: `【关系图】${graphUrl}`
   }
 ]
 </script>
@@ -150,9 +150,11 @@ const apiList = [
 .select-time-number {
   width: 100%;
 }
+
 .select-time-options {
   width: 100px;
 }
+
 .select-type-options {
   width: 120px;
 }

@@ -58,7 +58,7 @@
                 <help-outline-icon></help-outline-icon>
               </n-icon>
             </template>
-            <n-text>不支持「静态组件」和「分组」</n-text>
+            <n-text>不支持「静态组件」</n-text>
           </n-tooltip>
         </template>
         <n-select
@@ -169,7 +169,27 @@ const fnDimensionsAndSource = (interactOn: InteractEventOn | undefined) => {
 
 // 绑定组件列表
 const fnEventsOptions = (): Array<SelectOption | SelectGroupOption> => {
-  const filterOptionList = chartEditStore.componentList.filter(item => {
+  // 扁平化树形数据
+  const fnFlattern = (
+    data: Array<CreateComponentType | CreateComponentGroupType>
+  ): Array<CreateComponentType | CreateComponentGroupType> => {
+    return data.reduce(
+      (
+        iter: Array<CreateComponentType | CreateComponentGroupType>,
+        val: CreateComponentType | CreateComponentGroupType
+      ) => {
+        if (val.groupList && val.groupList.length > 0) {
+          iter.push(val)
+        } else {
+          iter.push(val)
+        }
+        return val.groupList ? [...iter, ...fnFlattern(val.groupList)] : iter
+      },
+      []
+    )
+  }
+
+  const filterOptionList = fnFlattern(chartEditStore.componentList).filter(item => {
     // 排除自己
     const isNotSelf = item.id !== targetData.value.id
     // 排除静态组件

@@ -23,6 +23,8 @@
 <script setup lang="ts">
 import { computed, PropType } from 'vue'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
+
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
 import { useSizeStyle, usePointStyle } from '../../hooks/useStyle.hook'
@@ -55,6 +57,9 @@ const themeColor = computed(() => {
 
 // 计算当前选中目标
 const hover = computed(() => {
+  const isDrag = chartEditStore.getEditCanvas[EditCanvasTypeEnum.IS_DRAG]
+  if (isDrag) return false
+
   if (props.item.status.lock) return false
   return props.item.id === chartEditStore.getTargetChart.hoverId
 })

@@ -24,6 +24,11 @@ export const syncData = () => {
   })
 }
 
+// 同步数据到预览页
+export const syncDataToPreview = () => {
+  dispatchEvent(new CustomEvent(SavePageEnum.CHART_TO_PREVIEW, { detail: chartEditStore.getStorageInfo }))
+}
+
 // 侦听器更新
 const useSyncUpdateHandle = () => {
   // 定义侦听器变量
@@ -48,8 +53,8 @@ const useSyncUpdateHandle = () => {
     //   document.hasFocus() && syncData()
     // }, editToJsonInterval)
 
-    // 失焦同步数据（暂不开启）
-    // addEventListener('blur', syncData)
+    // 失焦同步数据
+    addEventListener('blur', syncDataToPreview)
 
     // 监听编辑器保存事件 刷新工作台图表
     addEventListener(SavePageEnum.JSON, updateFn)

@@ -324,6 +324,15 @@ $asideBottom: 70px;
           border-radius: 25px;
         }
       }
+      &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        width: 100%;
+        height: 10px;
+        bottom: -10px;
+        cursor: pointer;
+      }
     }
     /* 最小化 */
     &.isMini {
@@ -350,6 +359,7 @@ $asideBottom: 70px;
         50% {
           opacity: 0;
           bottom: calc(#{$dockMiniBottom} - 10px);
+          pointer-events: none;
         }
         100% {
           opacity: 1;
@@ -364,15 +374,6 @@ $asideBottom: 70px;
         display: none;
       }
     }
-    &::after {
-      content: '';
-      position: absolute;
-      left: 0;
-      width: 100%;
-      height: 20px;
-      bottom: -20px;
-      cursor: pointer;
-    }
   }
 }
 </style>

@@ -30,9 +30,16 @@ export const dragHandle = async (e: DragEvent) => {
     // 修改状态
     chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CREATE, false)
     const dropData: Exclude<ConfigType, ['image']> = JSONParse(drayDataString)
+    if (dropData.disabled) return
 
     // 创建新图表组件
     const newComponent: CreateComponentType = await createComponent(dropData)
+    console.log(newComponent)
+    if (dropData.redirectComponent) {
+      dropData.dataset && (newComponent.option.dataset = dropData.dataset)
+      newComponent.chartConfig.title = dropData.title
+      newComponent.chartConfig.chartFrame = dropData.chartFrame
+    } 
 
     setComponentPosition(newComponent, e.offsetX - newComponent.attr.w / 2, e.offsetY - newComponent.attr.h / 2)
     chartEditStore.addComponentList(newComponent, false, true)

@@ -5,8 +5,9 @@ import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStor
 const chartEditStore = useChartEditStore()
 
 // 布局处理
-export const useLayout = () => {
-  onMounted(() => {
+export const useLayout = (fn: () => Promise<void>) => {
+  const removeScale: Function = () => { }
+  onMounted(async () => {
     // 设置 Dom 值(ref 不生效先用 document)
     chartEditStore.setEditCanvas(
       EditCanvasTypeEnum.EDIT_LAYOUT_DOM,
@@ -17,13 +18,16 @@ export const useLayout = () => {
       document.getElementById('go-chart-edit-content')
     )
 
+    // 获取数据
+    await fn()
     // 监听初始化
     const removeScale = chartEditStore.listenerScale()
 
-    onUnmounted(() => {
-      chartEditStore.setEditCanvas(EditCanvasTypeEnum.EDIT_LAYOUT_DOM, null)
-      chartEditStore.setEditCanvas(EditCanvasTypeEnum.EDIT_CONTENT_DOM, null)
-      removeScale()
-    })
   })
-}
\ No newline at end of file
+
+  onUnmounted(() => {
+    chartEditStore.setEditCanvas(EditCanvasTypeEnum.EDIT_LAYOUT_DOM, null)
+    chartEditStore.setEditCanvas(EditCanvasTypeEnum.EDIT_CONTENT_DOM, null)
+    removeScale()
+  })
+}

@@ -113,10 +113,10 @@ const { handleContextMenu } = useContextMenu()
 const { dataSyncFetch, intervalDataSyncUpdate } = useSyncRemote()
 
 // 编辑时注入scale变量，消除警告
-provide(SCALE_KEY, null);
+provide(SCALE_KEY, null)
 
 // 布局处理
-useLayout()
+useLayout(async () => {})
 
 // 点击事件
 const { mouseenterHandle, mouseleaveHandle, mousedownHandle, mouseClickHandle } = useMouseHandle()
@@ -188,6 +188,7 @@ const rangeStyle = computed(() => {
 // 键盘事件
 onMounted(() => {
   useAddKeyboard()
+  // THINGS_KIT 
   // 获取数据
   dataSyncFetch()
   // 定时更新数据

@@ -11,7 +11,7 @@
       <!-- 模块展示按钮 -->
       <n-tooltip v-for="item in btnList" :key="item.key" placement="bottom" trigger="hover">
         <template #trigger>
-          <n-button size="small" ghost :type="styleHandle(item)" @click="clickHandle(item)">
+          <n-button size="small" ghost :type="styleHandle(item)" :focusable="false" @click="clickHandle(item)">
             <component :is="item.icon"></component>
           </n-button>
         </template>

@@ -58,7 +58,7 @@ const previewHandle = () => {
 // 发布
 const sendHandle = () => {
   goDialog({
-    message: '想体验发布功能，请前往 master-fetch 分支查看: https://demo.mtruning.club/#/login',
+    message: '想体验发布功能，请前往查看: https://demo.mtruning.club/#/login。源码需切换到：master-fetch 分支。',
     positiveText: '了然',
     closeNegativeText: true,
     onPositiveCallback: () => {}

@@ -20,7 +20,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, PropType, ref, watch } from 'vue'
+import { computed, PropType, ref } from 'vue'
 import { requireErrorImg } from '@/utils'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'

@@ -88,6 +88,7 @@ export const useSyncRemote = () => {
       return
     }
     projectInfoStore.setSaveStatus(SyncEnum.START)
+    console.log(dataViewContent)
     // 保存数据
     const saveContent = {
       dataViewContent: {

@@ -137,6 +137,11 @@ export const useSync = () => {
     ) => {
       // 补充 class 上的方法
       let newComponent: CreateComponentType = await createComponent(_componentInstance.chartConfig)
+      if (_componentInstance.chartConfig.redirectComponent) {
+        _componentInstance.chartConfig.dataset && (newComponent.option.dataset = _componentInstance.chartConfig.dataset)
+        newComponent.chartConfig.title = _componentInstance.chartConfig.title
+        newComponent.chartConfig.chartFrame = _componentInstance.chartConfig.chartFrame
+      }
       if (callBack) {
         if (changeId) {
           callBack(componentMerge(newComponent, { ..._componentInstance, id: getUUID() }))
@@ -190,6 +195,11 @@ export const useSync = () => {
           } else {
             await create(comItem as CreateComponentType)
           }
+          if (percentage === 100) {
+            // 清除历史记录
+            chartHistoryStore.clearBackStack()
+            chartHistoryStore.clearForwardStack()
+          }
         }
       } else {
         // 非组件(顺便排除脏数据)

@@ -59,6 +59,8 @@
                 <n-form-item path="username">
                   <n-input
                     v-model:value="formInline.username"
+                    type="text"
+                    maxlength="16"
                     :placeholder="$t('global.form_account')"
                   >
                     <template #prefix>
@@ -72,6 +74,7 @@
                   <n-input
                     v-model:value="formInline.password"
                     type="password"
+                    maxlength="16"
                     show-password-on="click"
                     :placeholder="$t('global.form_password')"
                   >

@@ -13,13 +13,13 @@ import Preview from './index.vue'
 
 let key = ref(Date.now())
 
-  // 数据变更 -> 组件销毁重建
-  ;[SavePageEnum.JSON, SavePageEnum.CHART].forEach((saveEvent: string) => {
-    if (!window.opener) return
-    window.opener.addEventListener(saveEvent, async (e: any) => {
-      const localStorageInfo: ChartEditStorageType = await getSessionStorageInfo() as unknown as ChartEditStorageType
-      setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [{ ...e.detail, id: localStorageInfo.id }])
-      key.value = Date.now()
-    })
-  })
+// 数据变更 -> 组件销毁重建
+;[SavePageEnum.JSON, SavePageEnum.CHART_TO_PREVIEW].forEach((saveEvent: string) => {
+  if (!window.opener) return
+  window.opener.addEventListener(saveEvent, async (e: any) => {
+    const localStorageInfo: ChartEditStorageType = await getSessionStorageInfo() as unknown as ChartEditStorageType
+    setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [{ ...e.detail, id: localStorageInfo.id }])
+    key.value = Date.now()
+  })
+})
 </script>

@@ -132,20 +132,6 @@ const selectOptions = ref([
     icon: renderIcon(BrowsersOutlineIcon)
   },
   {
-    label: renderLang('global.r_copy'),
-    key: 'copy',
-    icon: renderIcon(CopyIcon)
-  },
-  {
-    label: renderLang('global.r_rename'),
-    key: 'rename',
-    icon: renderIcon(PencilIcon)
-  },
-  {
-    type: 'divider',
-    key: 'd1'
-  },
-  {
     label: props.cardData?.release
       ? renderLang('global.r_unpublish')
       : renderLang('global.r_publish'),
@@ -153,15 +139,6 @@ const selectOptions = ref([
     icon: renderIcon(SendIcon)
   },
   {
-    label: renderLang('global.r_download'),
-    key: 'download',
-    icon: renderIcon(DownloadIcon)
-  },
-  {
-    type: 'divider',
-    key: 'd2'
-  },
-  {
     label: renderLang('global.r_delete'),
     key: 'delete',
     icon: renderIcon(TrashIcon)

@@ -45,8 +45,7 @@ const collapsed = ref<boolean>(false)
 const { getAsideCollapsedWidth } = toRefs(useSettingStore())
 
 const route = useRoute()
-const routeRame = computed(() => route.name)
-const menuValue = ref(routeRame)
+const menuValue = computed(() => route.name)
 
 const menuOptions = menuOptionsInit()