diff --git a/package.json b/package.json
index b97c669..eb1b722 100644
--- a/package.json
+++ b/package.json
@@ -57,6 +57,10 @@
     "@sa/hooks": "workspace:*",
     "@sa/materials": "workspace:*",
     "@sa/utils": "workspace:*",
+    "@visactor/vchart": "1.12.11",
+    "@visactor/vchart-theme": "1.12.2",
+    "@visactor/vtable-editors": "1.10.5",
+    "@visactor/vtable-gantt": "1.10.5",
     "@vueuse/components": "11.2.0",
     "@vueuse/core": "11.2.0",
     "clipboard": "2.0.11",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b6e1ba6..0427c67 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -41,6 +41,18 @@ importers:
       '@sa/utils':
         specifier: workspace:*
         version: link:packages/utils
+      '@visactor/vchart':
+        specifier: 1.12.11
+        version: 1.12.11
+      '@visactor/vchart-theme':
+        specifier: 1.12.2
+        version: 1.12.2(@visactor/vchart@1.12.11)
+      '@visactor/vtable-editors':
+        specifier: 1.10.5
+        version: 1.10.5
+      '@visactor/vtable-gantt':
+        specifier: 1.10.5
+        version: 1.10.5
       '@vueuse/components':
         specifier: 11.2.0
         version: 11.2.0(vue@3.5.13)
@@ -2126,6 +2138,136 @@ packages:
     resolution: {integrity: sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==}
     dev: true
 
+  /@resvg/resvg-js-android-arm-eabi@2.4.1:
+    resolution: {integrity: sha512-AA6f7hS0FAPpvQMhBCf6f1oD1LdlqNXKCxAAPpKh6tR11kqV0YIB9zOlIYgITM14mq2YooLFl6XIbbvmY+jwUw==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@resvg/resvg-js-android-arm64@2.4.1:
+    resolution: {integrity: sha512-/QleoRdPfsEuH9jUjilYcDtKK/BkmWcK+1LXM8L2nsnf/CI8EnFyv7ZzCj4xAIvZGAy9dTYr/5NZBcTwxG2HQg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@resvg/resvg-js-darwin-arm64@2.4.1:
+    resolution: {integrity: sha512-U1oMNhea+kAXgiEXgzo7EbFGCD1Edq5aSlQoe6LMly6UjHzgx2W3N5kEXCwU/CgN5FiQhZr7PlSJSlcr7mdhfg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@resvg/resvg-js-darwin-x64@2.4.1:
+    resolution: {integrity: sha512-avyVh6DpebBfHHtTQTZYSr6NG1Ur6TEilk1+H0n7V+g4F7x7WPOo8zL00ZhQCeRQ5H4f8WXNWIEKL8fwqcOkYw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@resvg/resvg-js-linux-arm-gnueabihf@2.4.1:
+    resolution: {integrity: sha512-isY/mdKoBWH4VB5v621co+8l101jxxYjuTkwOLsbW+5RK9EbLciPlCB02M99ThAHzI2MYxIUjXNmNgOW8btXvw==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@resvg/resvg-js-linux-arm64-gnu@2.4.1:
+    resolution: {integrity: sha512-uY5voSCrFI8TH95vIYBm5blpkOtltLxLRODyhKJhGfskOI7XkRw5/t1u0sWAGYD8rRSNX+CA+np86otKjubrNg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@resvg/resvg-js-linux-arm64-musl@2.4.1:
+    resolution: {integrity: sha512-6mT0+JBCsermKMdi/O2mMk3m7SqOjwi9TKAwSngRZ/nQoL3Z0Z5zV+572ztgbWr0GODB422uD8e9R9zzz38dRQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@resvg/resvg-js-linux-x64-gnu@2.4.1:
+    resolution: {integrity: sha512-60KnrscLj6VGhkYOJEmmzPlqqfcw1keDh6U+vMcNDjPhV3B5vRSkpP/D/a8sfokyeh4VEacPSYkWGezvzS2/mg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@resvg/resvg-js-linux-x64-musl@2.4.1:
+    resolution: {integrity: sha512-0AMyZSICC1D7ge115cOZQW8Pcad6PjWuZkBFF3FJuSxC6Dgok0MQnLTs2MfMdKBlAcwO9dXsf3bv9tJZj8pATA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@resvg/resvg-js-win32-arm64-msvc@2.4.1:
+    resolution: {integrity: sha512-76XDFOFSa3d0QotmcNyChh2xHwk+JTFiEQBVxMlHpHMeq7hNrQJ1IpE1zcHSQvrckvkdfLboKRrlGB86B10Qjw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@resvg/resvg-js-win32-ia32-msvc@2.4.1:
+    resolution: {integrity: sha512-odyVFGrEWZIzzJ89KdaFtiYWaIJh9hJRW/frcEcG3agJ464VXkN/2oEVF5ulD+5mpGlug9qJg7htzHcKxDN8sg==}
+    engines: {node: '>= 10'}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@resvg/resvg-js-win32-x64-msvc@2.4.1:
+    resolution: {integrity: sha512-vY4kTLH2S3bP+puU5x7hlAxHv+ulFgcK6Zn3efKSr0M0KnZ9A3qeAjZteIpkowEFfUeMPNg2dvvoFRJA9zqxSw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@resvg/resvg-js@2.4.1:
+    resolution: {integrity: sha512-wTOf1zerZX8qYcMmLZw3czR4paI4hXqPjShNwJRh5DeHxvgffUS5KM7XwxtbIheUW6LVYT5fhT2AJiP6mU7U4A==}
+    engines: {node: '>= 10'}
+    optionalDependencies:
+      '@resvg/resvg-js-android-arm-eabi': 2.4.1
+      '@resvg/resvg-js-android-arm64': 2.4.1
+      '@resvg/resvg-js-darwin-arm64': 2.4.1
+      '@resvg/resvg-js-darwin-x64': 2.4.1
+      '@resvg/resvg-js-linux-arm-gnueabihf': 2.4.1
+      '@resvg/resvg-js-linux-arm64-gnu': 2.4.1
+      '@resvg/resvg-js-linux-arm64-musl': 2.4.1
+      '@resvg/resvg-js-linux-x64-gnu': 2.4.1
+      '@resvg/resvg-js-linux-x64-musl': 2.4.1
+      '@resvg/resvg-js-win32-arm64-msvc': 2.4.1
+      '@resvg/resvg-js-win32-ia32-msvc': 2.4.1
+      '@resvg/resvg-js-win32-x64-msvc': 2.4.1
+    dev: false
+
   /@rollup/pluginutils@5.1.0:
     resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==}
     engines: {node: '>=14.0.0'}
@@ -2512,6 +2654,56 @@ packages:
     engines: {node: '>=10.13.0'}
     dev: true
 
+  /@turf/boolean-clockwise@6.5.0:
+    resolution: {integrity: sha512-45+C7LC5RMbRWrxh3Z0Eihsc8db1VGBO5d9BLTOAwU4jR6SgsunTfRWR16X7JUwIDYlCVEmnjcXJNi/kIU3VIw==}
+    dependencies:
+      '@turf/helpers': 6.5.0
+      '@turf/invariant': 6.5.0
+    dev: false
+
+  /@turf/clone@6.5.0:
+    resolution: {integrity: sha512-mzVtTFj/QycXOn6ig+annKrM6ZlimreKYz6f/GSERytOpgzodbQyOgkfwru100O1KQhhjSudKK4DsQ0oyi9cTw==}
+    dependencies:
+      '@turf/helpers': 6.5.0
+    dev: false
+
+  /@turf/flatten@6.5.0:
+    resolution: {integrity: sha512-IBZVwoNLVNT6U/bcUUllubgElzpMsNoCw8tLqBw6dfYg9ObGmpEjf9BIYLr7a2Yn5ZR4l7YIj2T7kD5uJjZADQ==}
+    dependencies:
+      '@turf/helpers': 6.5.0
+      '@turf/meta': 6.5.0
+    dev: false
+
+  /@turf/helpers@6.5.0:
+    resolution: {integrity: sha512-VbI1dV5bLFzohYYdgqwikdMVpe7pJ9X3E+dlr425wa2/sMJqYDhTO++ec38/pcPvPE6oD9WEEeU3Xu3gza+VPw==}
+    dev: false
+
+  /@turf/invariant@6.5.0:
+    resolution: {integrity: sha512-Wv8PRNCtPD31UVbdJE/KVAWKe7l6US+lJItRR/HOEW3eh+U/JwRCSUl/KZ7bmjM/C+zLNoreM2TU6OoLACs4eg==}
+    dependencies:
+      '@turf/helpers': 6.5.0
+    dev: false
+
+  /@turf/meta@3.14.0:
+    resolution: {integrity: sha512-OtXqLQuR9hlQ/HkAF/OdzRea7E0eZK1ay8y8CBXkoO2R6v34CsDrWYLMSo0ZzMsaQDpKo76NPP2GGo+PyG1cSg==}
+    dev: false
+
+  /@turf/meta@6.5.0:
+    resolution: {integrity: sha512-RrArvtsV0vdsCBegoBtOalgdSOfkBrTJ07VkpiCnq/491W67hnMWmDu7e6Ztw0C3WldRYTXkg3SumfdzZxLBHA==}
+    dependencies:
+      '@turf/helpers': 6.5.0
+    dev: false
+
+  /@turf/rewind@6.5.0:
+    resolution: {integrity: sha512-IoUAMcHWotBWYwSYuYypw/LlqZmO+wcBpn8ysrBNbazkFNkLf3btSDZMkKJO/bvOzl55imr/Xj4fi3DdsLsbzQ==}
+    dependencies:
+      '@turf/boolean-clockwise': 6.5.0
+      '@turf/clone': 6.5.0
+      '@turf/helpers': 6.5.0
+      '@turf/invariant': 6.5.0
+      '@turf/meta': 6.5.0
+    dev: false
+
   /@types/bmapgl@0.0.7:
     resolution: {integrity: sha512-3R0wFbZtynfHBJq0v477amaNH3t2u2CzBo46ViIPDdOTEJJ+Ma/ql4X8tS2XjDZcZhDAr6QDWoqV8SZvp6STvA==}
     dev: true
@@ -3137,6 +3329,250 @@ packages:
       - vue
     dev: true
 
+  /@visactor/vchart-theme@1.12.2(@visactor/vchart@1.12.11):
+    resolution: {integrity: sha512-r298TUdK+CKbHGVYWgQnNSEB5uqpFvF2/aMNZ/2POQnd2CovAPJOx2nTE6hAcOn8rra2FwJ2xF8AyP1O5OhrTw==}
+    peerDependencies:
+      '@visactor/vchart': '>=1.10.4'
+    dependencies:
+      '@visactor/vchart': 1.12.11
+    dev: false
+
+  /@visactor/vchart@1.12.11:
+    resolution: {integrity: sha512-1DfrmArxl9SLsD90AvrPNdy3YPaGzHojCzZo57WqNlDb2IheStu0u6jsoy07svKqLQxyjwRp7yIQHK7HEKvI7A==}
+    dependencies:
+      '@visactor/vdataset': 0.18.18
+      '@visactor/vgrammar-core': 0.14.14
+      '@visactor/vgrammar-hierarchy': 0.14.14
+      '@visactor/vgrammar-projection': 0.14.14
+      '@visactor/vgrammar-sankey': 0.14.14
+      '@visactor/vgrammar-util': 0.14.14
+      '@visactor/vgrammar-venn': 0.14.14
+      '@visactor/vgrammar-wordcloud': 0.14.14
+      '@visactor/vgrammar-wordcloud-shape': 0.14.14
+      '@visactor/vrender-components': 0.20.14
+      '@visactor/vrender-core': 0.20.14
+      '@visactor/vrender-kits': 0.20.14
+      '@visactor/vscale': 0.18.18
+      '@visactor/vutils': 0.18.18
+      '@visactor/vutils-extension': 1.12.11
+    dev: false
+
+  /@visactor/vdataset@0.18.18:
+    resolution: {integrity: sha512-lye23zpineMKV42JmuJaOY3fgl7aWhyDIwK9dWooqZzP14AFukPoK7ZvUeuKZihLrHxqtCg2VWEjovnh9O1RUg==}
+    dependencies:
+      '@turf/flatten': 6.5.0
+      '@turf/helpers': 6.5.0
+      '@turf/rewind': 6.5.0
+      '@visactor/vutils': 0.18.18
+      d3-dsv: 2.0.0
+      d3-geo: 1.12.1
+      d3-hexbin: 0.2.2
+      d3-hierarchy: 3.1.2
+      eventemitter3: 4.0.7
+      geobuf: 3.0.2
+      geojson-dissolve: 3.1.0
+      path-browserify: 1.0.1
+      pbf: 3.3.0
+      point-at-length: 1.1.0
+      simple-statistics: 7.8.7
+      simplify-geojson: 1.0.5
+      topojson-client: 3.1.0
+    dev: false
+
+  /@visactor/vgrammar-coordinate@0.14.14:
+    resolution: {integrity: sha512-ihuWr+7VotZvpMSNfXOc6OU7GBhNAZLYTHLgusae+Qq9o5ZBYgndAV3Gd1NKrcq6lMXlgchpBHSBt99M0wvAQw==}
+    dependencies:
+      '@visactor/vgrammar-util': 0.14.14
+      '@visactor/vutils': 0.18.18
+    dev: false
+
+  /@visactor/vgrammar-core@0.14.14:
+    resolution: {integrity: sha512-pLn/BBfpdZFmIDsSQx1L3VfU4mEzT8W4VoAlqssSZusQK9ijVqo/6taUqXgDRUy9m4T01S1RJg0xUx10pGrS8w==}
+    dependencies:
+      '@visactor/vdataset': 0.18.18
+      '@visactor/vgrammar-coordinate': 0.14.14
+      '@visactor/vgrammar-util': 0.14.14
+      '@visactor/vrender-components': 0.20.14
+      '@visactor/vrender-core': 0.20.14
+      '@visactor/vrender-kits': 0.20.14
+      '@visactor/vscale': 0.18.18
+      '@visactor/vutils': 0.18.18
+    dev: false
+
+  /@visactor/vgrammar-hierarchy@0.14.14:
+    resolution: {integrity: sha512-28TO4R8tgPi604N5YgHsejrPNhoTXjc+cBYdzskfc4z8EK3bZArYIjbZTUwHGtrl4Ql/e1hzMoieJVPa3BM2zw==}
+    dependencies:
+      '@visactor/vgrammar-core': 0.14.14
+      '@visactor/vgrammar-util': 0.14.14
+      '@visactor/vrender-core': 0.20.14
+      '@visactor/vrender-kits': 0.20.14
+      '@visactor/vutils': 0.18.18
+    dev: false
+
+  /@visactor/vgrammar-projection@0.14.14:
+    resolution: {integrity: sha512-ilJ5ogP99q0QCWUkWfV+sc339LlUkAwrQIaXyWLqt+c77UxBVRhrXLG/h8FIAPXIEShApje1SYm9Nn8fQjc8kA==}
+    dependencies:
+      '@visactor/vgrammar-core': 0.14.14
+      '@visactor/vgrammar-util': 0.14.14
+      '@visactor/vutils': 0.18.18
+      d3-geo: 1.12.1
+    dev: false
+
+  /@visactor/vgrammar-sankey@0.14.14:
+    resolution: {integrity: sha512-ApodG82KZN+XSOftxPKWwGPufE6htXcqVuEdXLmBlLwO5hr+F++HQV8JP1slhYXW0bkYgtOsPOdHkAxbca6Yqw==}
+    dependencies:
+      '@visactor/vgrammar-core': 0.14.14
+      '@visactor/vgrammar-util': 0.14.14
+      '@visactor/vrender-core': 0.20.14
+      '@visactor/vrender-kits': 0.20.14
+      '@visactor/vutils': 0.18.18
+    dev: false
+
+  /@visactor/vgrammar-util@0.14.14:
+    resolution: {integrity: sha512-UDP98/G5DJJl50KjxLKxz8CKMqVlHqpJF3Awkum56x+Hq7VWOyvTc/PX8933FXiTDQcLARJNU/2sDBsbhzxJDg==}
+    dependencies:
+      '@visactor/vrender-core': 0.20.14
+      '@visactor/vutils': 0.18.18
+    dev: false
+
+  /@visactor/vgrammar-venn@0.14.14:
+    resolution: {integrity: sha512-fu/kztwABVc24gdPpj+zhdbJRSEz0c6Prr4tGBFyWBgf2pCBleFH/Nxvk4JMtAAJ1KJQGWaazJU/TkKYvh1bdQ==}
+    dependencies:
+      '@visactor/vgrammar-core': 0.14.14
+      '@visactor/vgrammar-util': 0.14.14
+      '@visactor/vrender-core': 0.20.14
+      '@visactor/vrender-kits': 0.20.14
+      '@visactor/vutils': 0.18.18
+    dev: false
+
+  /@visactor/vgrammar-wordcloud-shape@0.14.14:
+    resolution: {integrity: sha512-1b8xwSi8DApEKiahT/NArLTKHQEgjzbn6AnSTX+9qiqSCd/fvWId9N02yWBIurCNvrsA025dbo/yTaaVsh+vaA==}
+    dependencies:
+      '@visactor/vgrammar-core': 0.14.14
+      '@visactor/vgrammar-util': 0.14.14
+      '@visactor/vrender-core': 0.20.14
+      '@visactor/vrender-kits': 0.20.14
+      '@visactor/vscale': 0.18.18
+      '@visactor/vutils': 0.18.18
+    dev: false
+
+  /@visactor/vgrammar-wordcloud@0.14.14:
+    resolution: {integrity: sha512-jK7yc2KxYDuCQmcQXOTjyfoDcJwN9+1pOF9nZYO4Oh1mXul+5KcPiEbRa3uXUeYE8OXUjDGtyF6aTWgtvRqLEA==}
+    dependencies:
+      '@visactor/vgrammar-core': 0.14.14
+      '@visactor/vgrammar-util': 0.14.14
+      '@visactor/vrender-core': 0.20.14
+      '@visactor/vrender-kits': 0.20.14
+      '@visactor/vutils': 0.18.18
+    dev: false
+
+  /@visactor/vrender-components@0.20.14:
+    resolution: {integrity: sha512-GVU+dYq5qPBdOmg+87wi3F/3U40rqjQHnEBygnEZFhQbNcJGhgDMl4kAXNxq4YanxkDlHHFpQmfhqvOnZ6HngA==}
+    dependencies:
+      '@visactor/vrender-core': 0.20.14
+      '@visactor/vrender-kits': 0.20.14
+      '@visactor/vscale': 0.18.18
+      '@visactor/vutils': 0.18.18
+    dev: false
+
+  /@visactor/vrender-components@0.21.0-alpha.2:
+    resolution: {integrity: sha512-1r85YiQvF8jsnNKE8Zr4xEhbf5BGDAo7TBwVWvpAwkCYDzv6vP7dzxX9+K6aoft8jgKJiIeP8T2xVvlUqHoEqw==}
+    dependencies:
+      '@visactor/vrender-core': 0.21.0-alpha.2
+      '@visactor/vrender-kits': 0.21.0-alpha.2
+      '@visactor/vscale': 0.18.18
+      '@visactor/vutils': 0.18.18
+    dev: false
+
+  /@visactor/vrender-core@0.20.14:
+    resolution: {integrity: sha512-eIHD4V2fl3Ps6UZlx0Ef6S/1iTOjKGZP39Lpn7+KO4G45O39EQwB8J8KmgrY/kmZDLCy93aH1QYPJhKVWQdTTw==}
+    dependencies:
+      '@visactor/vutils': 0.18.18
+      color-convert: 2.0.1
+    dev: false
+
+  /@visactor/vrender-core@0.21.0-alpha.2:
+    resolution: {integrity: sha512-rfgt+KajHSqtGNm2O/iZpNcX7AjgiQGF7coeGkZraN87l3nN2uGBFosI6E2kCJ4IURB7d2e7zAGdyoANQ/Hzeg==}
+    dependencies:
+      '@visactor/vutils': 0.18.18
+      color-convert: 2.0.1
+    dev: false
+
+  /@visactor/vrender-kits@0.20.14:
+    resolution: {integrity: sha512-seA+Af//ydPWLwuS461eti8vIukxGcy+84m2qnic7q0F774NZLYeNrWUlHw46Hu7SBQhAyZrb8GU9Hp+fPnLiw==}
+    dependencies:
+      '@resvg/resvg-js': 2.4.1
+      '@visactor/vrender-core': 0.20.14
+      '@visactor/vutils': 0.18.18
+      roughjs: 4.5.2
+    dev: false
+
+  /@visactor/vrender-kits@0.21.0-alpha.2:
+    resolution: {integrity: sha512-P+tAv1oPIWydCPdGvT+02XgemOLKbZ97OztjHQyN5H4ykzw9uCYBmrCDsWrkMaAoYYzjnp3D0u/XFhY5viH1HQ==}
+    dependencies:
+      '@resvg/resvg-js': 2.4.1
+      '@visactor/vrender-core': 0.21.0-alpha.2
+      '@visactor/vutils': 0.18.18
+      roughjs: 4.5.2
+    dev: false
+
+  /@visactor/vscale@0.18.18:
+    resolution: {integrity: sha512-iRG4kv+5Fv4KX3AxEfV95XU3I6OmF0QizyAhqHxKa7L1MaT+MRvDDk5zHWf1E8gialLbL2xDe3GnT6g/4u5jhA==}
+    dependencies:
+      '@visactor/vutils': 0.18.18
+    dev: false
+
+  /@visactor/vtable-editors@1.10.5:
+    resolution: {integrity: sha512-JR5pURj/n/QyjfXONM4gRxURB/cKgWw61NC2+26fO8mOTvi6HccvoaliCEYWBAVtyrHySfOAL6fVpH06PkJrFw==}
+    dev: false
+
+  /@visactor/vtable-gantt@1.10.5:
+    resolution: {integrity: sha512-e/ZgapdYzXgHlUN5aqsSz9DRxxCX6Cwm3fyeCyto1Em9NabRDvSfCJES0wc1TFhCns6Zc5WJnkvpZO3qhUEg8g==}
+    dependencies:
+      '@visactor/vdataset': 0.18.18
+      '@visactor/vscale': 0.18.18
+      '@visactor/vtable': 1.10.5
+      '@visactor/vtable-editors': 1.10.5
+      '@visactor/vutils': 0.18.18
+      cssfontparser: 1.2.1
+    dev: false
+
+  /@visactor/vtable@1.10.5:
+    resolution: {integrity: sha512-SoEaVgkFl4+89kAMn+Q0qaDboQP93cKm3+frcbqz5lSzMrhw9v1rf+S3f3kljrAxVGMbWKv+g4cy5kXQNxq8Iw==}
+    dependencies:
+      '@visactor/vdataset': 0.18.18
+      '@visactor/vrender-components': 0.21.0-alpha.2
+      '@visactor/vrender-core': 0.21.0-alpha.2
+      '@visactor/vrender-kits': 0.21.0-alpha.2
+      '@visactor/vscale': 0.18.18
+      '@visactor/vtable-editors': 1.10.5
+      '@visactor/vutils': 0.18.18
+      '@visactor/vutils-extension': 1.11.14
+      cssfontparser: 1.2.1
+    dev: false
+
+  /@visactor/vutils-extension@1.11.14:
+    resolution: {integrity: sha512-vfViZphXJBH0NwCHIoe8S1/+tDtykEKIfsLMIHprh7Azv7fVSB1eotG00SAegK75E18ARQGNXF1DxixUFiXSIQ==}
+    dependencies:
+      '@visactor/vdataset': 0.18.18
+      '@visactor/vutils': 0.18.18
+    dev: false
+
+  /@visactor/vutils-extension@1.12.11:
+    resolution: {integrity: sha512-0skd9Vnb//R9i34AvQtufkhpvyULaWXq8FjHNF1LEuAnDA6GjlPwtW0lxMtqpEQmNE+2aPfQUQr4rKop7nmbGA==}
+    dependencies:
+      '@visactor/vdataset': 0.18.18
+      '@visactor/vutils': 0.18.18
+    dev: false
+
+  /@visactor/vutils@0.18.18:
+    resolution: {integrity: sha512-byEJefqxiCz3UWe+YedEVjsdPtnJOAtKdRYi4qT9ojgACdd6QqlWs53Eb7PlMZgWDxVxqkxJP2bZnRKw+ME0Xg==}
+    dependencies:
+      '@turf/helpers': 6.5.0
+      '@turf/invariant': 6.5.0
+      eventemitter3: 4.0.7
+    dev: false
+
   /@vitejs/plugin-vue-jsx@4.1.0(vite@5.4.11)(vue@3.5.13):
     resolution: {integrity: sha512-KuRejz7KAFvhXDzOudlaS2IyygAwoAEEMtHAdcRSy/8cA5iKH043Qudcz48zsC0M0vvN5iKwIwNMuWbBYn6/Yg==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -3776,6 +4212,10 @@ packages:
       call-bind: 1.0.7
       is-array-buffer: 3.0.4
 
+  /array-source@0.0.4:
+    resolution: {integrity: sha512-frNdc+zBn80vipY+GdcJkLEbMWj3xmzArYApmUGxoiV8uAu/ygcs9icPdsGdA26h0MkHUMW6EN2piIvVx+M5Mw==}
+    dev: false
+
   /array-union@2.1.0:
     resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
     engines: {node: '>=8'}
@@ -4311,7 +4751,6 @@ packages:
     engines: {node: '>=7.0.0'}
     dependencies:
       color-name: 1.1.4
-    dev: true
 
   /color-name@1.1.3:
     resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
@@ -4371,6 +4810,25 @@ packages:
   /concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
+  /concat-stream@1.4.11:
+    resolution: {integrity: sha512-X3JMh8+4je3U1cQpG87+f9lXHDrqcb2MVLg9L7o8b1UZ0DzhRrUpdn65ttzu10PpJPPI3MQNkis+oha6TSA9Mw==}
+    engines: {'0': node >= 0.8}
+    dependencies:
+      inherits: 2.0.4
+      readable-stream: 1.1.14
+      typedarray: 0.0.7
+    dev: false
+
+  /concat-stream@2.0.0:
+    resolution: {integrity: sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==}
+    engines: {'0': node >= 6.0}
+    dependencies:
+      buffer-from: 1.1.2
+      inherits: 2.0.4
+      readable-stream: 3.6.2
+      typedarray: 0.0.6
+    dev: false
+
   /confbox@0.1.7:
     resolution: {integrity: sha512-uJcB/FKZtBMCJpK8MQji6bJHgu1tixKPxRLeGkNzBoOZzpnZUJm0jm2/sBDWcuBx1dYgxV4JU+g5hmNxCyAmdA==}
     dev: true
@@ -4430,6 +4888,10 @@ packages:
     requiresBuild: true
     dev: false
 
+  /core-util-is@1.0.3:
+    resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
+    dev: false
+
   /cors@2.8.5:
     resolution: {integrity: sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==}
     engines: {node: '>= 0.10'}
@@ -4494,6 +4956,10 @@ packages:
     hasBin: true
     dev: true
 
+  /cssfontparser@1.2.1:
+    resolution: {integrity: sha512-6tun4LoZnj7VN6YeegOVb67KBX/7JJsqvj+pv3ZA7F878/eN33AbGa5b/S/wXxS/tcp8nc40xRUrsPlxIyNUPg==}
+    dev: false
+
   /csso@4.2.0:
     resolution: {integrity: sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==}
     engines: {node: '>=8.0.0'}
@@ -4555,6 +5021,15 @@ packages:
       rw: 1.3.3
     dev: false
 
+  /d3-dsv@2.0.0:
+    resolution: {integrity: sha512-E+Pn8UJYx9mViuIUkoc93gJGGYut6mSDKy2+XaPwccwkRGlR+LO97L2VCCRjQivTwLHkSnAJG7yo00BWY6QM+w==}
+    hasBin: true
+    dependencies:
+      commander: 2.20.3
+      iconv-lite: 0.4.24
+      rw: 1.3.3
+    dev: false
+
   /d3-dsv@3.0.1:
     resolution: {integrity: sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==}
     engines: {node: '>=12'}
@@ -4599,6 +5074,12 @@ packages:
       d3-geo: 1.6.4
     dev: false
 
+  /d3-geo@1.12.1:
+    resolution: {integrity: sha512-XG4d1c/UJSEX9NfU02KwBL6BYPj8YKHxgBEw5om2ZnTRSbIcego6dhHwcxuSR3clxh0EpE38os1DVPOmnYtTPg==}
+    dependencies:
+      d3-array: 1.2.4
+    dev: false
+
   /d3-geo@1.6.4:
     resolution: {integrity: sha512-O5Q3iftLc6/EdU1MHUm+O29NoKKN/cyQtySnD9/yEEcinN+q4ng+H56e2Yn1YWdfZBoiaRVtR2NoJ3ivKX5ptQ==}
     dependencies:
@@ -4618,6 +5099,10 @@ packages:
       d3-array: 3.2.4
     dev: false
 
+  /d3-hexbin@0.2.2:
+    resolution: {integrity: sha512-KS3fUT2ReD4RlGCjvCEm1RgMtp2NFZumdMu4DBzQK8AZv3fXRM6Xm8I4fSU07UXvH4xxg03NwWKWdvxfS/yc4w==}
+    dev: false
+
   /d3-hexjson@1.1.1:
     resolution: {integrity: sha512-WMF1juFJwAx6LzdEVKlsCGZz+7QUG7VMJDtg8uD3cfNwWOTgMiy6qBRRGU7LSY2KbmEObu3BV5ZQbq9l/BvUZQ==}
     dependencies:
@@ -6033,6 +6518,12 @@ packages:
       flat-cache: 4.0.1
     dev: true
 
+  /file-source@0.6.1:
+    resolution: {integrity: sha512-1R1KneL7eTXmXfKxC10V/9NeGOdbsAXJ+lQ//fvvcHUgtaZcZDWNJNblxAoVOyV1cj45pOtUrR3vZTBwqcW8XA==}
+    dependencies:
+      stream-source: 0.3.5
+    dev: false
+
   /fill-range@4.0.0:
     resolution: {integrity: sha512-VcpLTWqWDiTerugjj8e3+esbg+skS3M9e54UuR3iCeIDMXCLTsAH8hTSzDQU/X6/6t3eYkOKoZSef2PlU6U1XQ==}
     engines: {node: '>=0.10.0'}
@@ -6218,6 +6709,37 @@ packages:
     engines: {node: '>=6.9.0'}
     dev: true
 
+  /geobuf@3.0.2:
+    resolution: {integrity: sha512-ASgKwEAQQRnyNFHNvpd5uAwstbVYmiTW0Caw3fBb509tNTqXyAAPMyFs5NNihsLZhLxU1j/kjFhkhLWA9djuVg==}
+    hasBin: true
+    dependencies:
+      concat-stream: 2.0.0
+      pbf: 3.3.0
+      shapefile: 0.6.6
+    dev: false
+
+  /geojson-dissolve@3.1.0:
+    resolution: {integrity: sha512-JXHfn+A3tU392HA703gJbjmuHaQOAE/C1KzbELCczFRFux+GdY6zt1nKb1VMBHp4LWeE7gUY2ql+g06vJqhiwQ==}
+    dependencies:
+      '@turf/meta': 3.14.0
+      geojson-flatten: 0.2.4
+      geojson-linestring-dissolve: 0.0.1
+      topojson-client: 3.1.0
+      topojson-server: 3.0.1
+    dev: false
+
+  /geojson-flatten@0.2.4:
+    resolution: {integrity: sha512-LiX6Jmot8adiIdZ/fthbcKKPOfWjTQchX/ggHnwMZ2e4b0I243N1ANUos0LvnzepTEsj0+D4fIJ5bKhBrWnAHA==}
+    hasBin: true
+    dependencies:
+      get-stdin: 6.0.0
+      minimist: 1.2.0
+    dev: false
+
+  /geojson-linestring-dissolve@0.0.1:
+    resolution: {integrity: sha512-Y8I2/Ea28R/Xeki7msBcpMvJL2TaPfaPKP8xqueJfQ9/jEhps+iOJxOR2XCBGgVb12Z6XnDb1CMbaPfLepsLaw==}
+    dev: false
+
   /get-caller-file@2.0.5:
     resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
     engines: {node: 6.* || 8.* || >= 10.*}
@@ -6238,6 +6760,11 @@ packages:
       has-symbols: 1.0.3
       hasown: 2.0.2
 
+  /get-stdin@6.0.0:
+    resolution: {integrity: sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==}
+    engines: {node: '>=4'}
+    dev: false
+
   /get-stream@8.0.1:
     resolution: {integrity: sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==}
     engines: {node: '>=16'}
@@ -6596,7 +7123,6 @@ packages:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
     requiresBuild: true
     dev: false
-    optional: true
 
   /ignore@5.3.1:
     resolution: {integrity: sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==}
@@ -7684,6 +8210,14 @@ packages:
       brace-expansion: 2.0.1
     dev: true
 
+  /minimist@1.2.0:
+    resolution: {integrity: sha512-7Wl+Jz+IGWuSdgsQEJ4JunV0si/iMhg42MnQQG6h1R6TNeVenp4U9x5CC5v/gYqz/fENLQITAWXidNtVL0NNbw==}
+    dev: false
+
+  /minimist@1.2.6:
+    resolution: {integrity: sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==}
+    dev: false
+
   /minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
 
@@ -8148,7 +8682,10 @@ packages:
 
   /path-browserify@1.0.1:
     resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
-    dev: true
+
+  /path-data-parser@0.1.0:
+    resolution: {integrity: sha512-NOnmBpt5Y2RWbuv0LMzsayp3lVylAHLPUTut412ZA3l+C4uw4ZVkQbjShYCQ8TCpUMdPapr4YjUqLYD6v68j+w==}
+    dev: false
 
   /path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
@@ -8188,6 +8725,13 @@ packages:
       minipass: 7.1.2
     dev: true
 
+  /path-source@0.1.3:
+    resolution: {integrity: sha512-dWRHm5mIw5kw0cs3QZLNmpUWty48f5+5v9nWD2dw3Y0Hf+s01Ag8iJEWV0Sm0kocE8kK27DrIowha03e1YR+Qw==}
+    dependencies:
+      array-source: 0.0.4
+      file-source: 0.6.1
+    dev: false
+
   /path-type@4.0.0:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
@@ -8208,6 +8752,14 @@ packages:
     resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
     dev: true
 
+  /pbf@3.3.0:
+    resolution: {integrity: sha512-XDF38WCH3z5OV/OVa8GKUNtLAyneuzbCisx7QUCF8Q6Nutx0WnJrQe5O+kOtBlLfRNUws98Y58Lblp+NJG5T4Q==}
+    hasBin: true
+    dependencies:
+      ieee754: 1.2.1
+      resolve-protobuf-schema: 2.1.0
+    dev: false
+
   /pdfast@0.2.0:
     resolution: {integrity: sha512-cq6TTu6qKSFUHwEahi68k/kqN2mfepjkGrG9Un70cgdRRKLKY6Rf8P8uvP2NvZktaQZNF3YE7agEkLj0vGK9bA==}
     dev: false
@@ -8290,6 +8842,17 @@ packages:
       parse-svg-path: 0.1.2
     dev: false
 
+  /points-on-curve@0.2.0:
+    resolution: {integrity: sha512-0mYKnYYe9ZcqMCWhUjItv/oHjvgEsfKvnUTg8sAtnHr3GVy7rGkXCb6d5cSyqrWqL4k81b9CPg3urd+T7aop3A==}
+    dev: false
+
+  /points-on-path@0.2.1:
+    resolution: {integrity: sha512-25ClnWWuw7JbWZcgqY/gJ4FQWadKxGWk+3kR/7kD0tCaDtPPMj7oHu2ToLaVhfpnHrZzYby2w6tUA0eOIuUg8g==}
+    dependencies:
+      path-data-parser: 0.1.0
+      points-on-curve: 0.2.0
+    dev: false
+
   /posix-character-classes@0.1.1:
     resolution: {integrity: sha512-xTgYBc3fuo7Yt7JbiuFxSYGToMoz8fLoE6TC9Wx1P/u+LfeThMOAqmuyECnlBaaJb+u1m9hHiXUEtwW4OzfUJg==}
     engines: {node: '>=0.10.0'}
@@ -8544,6 +9107,10 @@ packages:
       sisteransi: 1.0.5
     dev: true
 
+  /protocol-buffers-schema@3.6.0:
+    resolution: {integrity: sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw==}
+    dev: false
+
   /proxy-from-env@1.1.0:
     resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
     dev: false
@@ -8644,6 +9211,15 @@ packages:
       type-fest: 0.6.0
     dev: true
 
+  /readable-stream@1.1.14:
+    resolution: {integrity: sha512-+MeVjFf4L44XUkhM1eYbD8fyEsxcV81pqMSR5gblfcLCHfZvbrqy4/qYHE+/R5HoBUT11WV5O08Cr1n3YXkWVQ==}
+    dependencies:
+      core-util-is: 1.0.3
+      inherits: 2.0.4
+      isarray: 0.0.1
+      string_decoder: 0.10.31
+    dev: false
+
   /readable-stream@3.6.2:
     resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
     engines: {node: '>= 6'}
@@ -8735,6 +9311,12 @@ packages:
     resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
     dev: true
 
+  /resolve-protobuf-schema@2.1.0:
+    resolution: {integrity: sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==}
+    dependencies:
+      protocol-buffers-schema: 3.6.0
+    dev: false
+
   /resolve-url@0.2.1:
     resolution: {integrity: sha512-ZuF55hVUQaaczgOIwqWzkEcEidmlD/xl44x1UZnhOXcYuFN2S6+rcxpG+C1N3So0wvNI3DmJICUFfu2SxhBmvg==}
     deprecated: https://github.com/lydell/resolve-url#deprecated
@@ -8831,6 +9413,14 @@ packages:
       fsevents: 2.3.3
     dev: true
 
+  /roughjs@4.5.2:
+    resolution: {integrity: sha512-2xSlLDKdsWyFxrveYWk9YQ/Y9UfK38EAMRNkYkMqYBJvPX8abCa9PN0x3w02H8Oa6/0bcZICJU+U95VumPqseg==}
+    dependencies:
+      path-data-parser: 0.1.0
+      points-on-curve: 0.2.0
+      points-on-path: 0.2.1
+    dev: false
+
   /run-applescript@7.0.0:
     resolution: {integrity: sha512-9by4Ij99JUr/MCFBUkDKLWK3G9HVXmabKz9U5MlIAIuvuzkiOicRYs8XJLxX+xahD+mLiiCYDqF9dKAgtzKP1A==}
     engines: {node: '>=18'}
@@ -8957,6 +9547,18 @@ packages:
       split-string: 3.1.0
     dev: true
 
+  /shapefile@0.6.6:
+    resolution: {integrity: sha512-rLGSWeK2ufzCVx05wYd+xrWnOOdSV7xNUW5/XFgx3Bc02hBkpMlrd2F1dDII7/jhWzv0MSyBFh5uJIy9hLdfuw==}
+    hasBin: true
+    dependencies:
+      array-source: 0.0.4
+      commander: 2.20.3
+      path-source: 0.1.3
+      slice-source: 0.4.1
+      stream-source: 0.3.5
+      text-encoding: 0.6.4
+    dev: false
+
   /shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
     engines: {node: '>=8'}
@@ -9019,6 +9621,10 @@ packages:
     resolution: {integrity: sha512-zGwn0DDRa9Zel4H4n2pjTFIyGoAGpnpjrGIctreCxj5XWrcx9v7Xy7270FkC967WMmcvuc8ZU7m0ZG+hGN7gAA==}
     dev: false
 
+  /simple-statistics@7.8.7:
+    resolution: {integrity: sha512-ed5FwTNYvkMTfbCai1U+r3symP+lIPKWCqKdudpN4NFNMn9RtDlFtSyAQhCp4oPH0YBjWu/qnW+5q5ZkPB3uHQ==}
+    dev: false
+
   /simple-swizzle@0.2.2:
     resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
     dependencies:
@@ -9045,6 +9651,19 @@ packages:
       - '@vue/composition-api'
     dev: false
 
+  /simplify-geojson@1.0.5:
+    resolution: {integrity: sha512-02l1W4UipP5ivNVq6kX15mAzCRIV1oI3tz0FUEyOsNiv1ltuFDjbNhO+nbv/xhbDEtKqWLYuzpWhUsJrjR/ypA==}
+    hasBin: true
+    dependencies:
+      concat-stream: 1.4.11
+      minimist: 1.2.6
+      simplify-geometry: 0.0.2
+    dev: false
+
+  /simplify-geometry@0.0.2:
+    resolution: {integrity: sha512-ZEyrplkqgCqDlL7V8GbbYgTLlcnNF+MWWUdy8s8ZeJru50bnI71rDew/I+HG36QS2mPOYAq1ZjwNXxHJ8XOVBw==}
+    dev: false
+
   /sirv@2.0.4:
     resolution: {integrity: sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==}
     engines: {node: '>= 10'}
@@ -9088,6 +9707,10 @@ packages:
       is-fullwidth-code-point: 5.0.0
     dev: true
 
+  /slice-source@0.4.1:
+    resolution: {integrity: sha512-YiuPbxpCj4hD9Qs06hGAz/OZhQ0eDuALN0lRWJez0eD/RevzKqGdUx1IOMUnXgpr+sXZLq3g8ERwbAH0bCb8vg==}
+    dev: false
+
   /snapdragon-node@2.1.1:
     resolution: {integrity: sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==}
     engines: {node: '>=0.10.0'}
@@ -9231,6 +9854,10 @@ packages:
       object-copy: 0.1.0
     dev: true
 
+  /stream-source@0.3.5:
+    resolution: {integrity: sha512-ZuEDP9sgjiAwUVoDModftG0JtYiLUV8K4ljYD1VyUMRWtbVf92474o4kuuul43iZ8t/hRuiDAx1dIJSvirrK/g==}
+    dev: false
+
   /strict-uri-encode@1.1.0:
     resolution: {integrity: sha512-R3f198pcvnB+5IpnBlRkphuE9n46WyVl8I39W/ZUTZLz4nqSP/oLYUrcnJrw462Ds8he4YKMov2efsTIw1BDGQ==}
     engines: {node: '>=0.10.0'}
@@ -9292,6 +9919,10 @@ packages:
       define-properties: 1.2.1
       es-object-atoms: 1.0.0
 
+  /string_decoder@0.10.31:
+    resolution: {integrity: sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==}
+    dev: false
+
   /string_decoder@1.3.0:
     resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
     dependencies:
@@ -9562,6 +10193,11 @@ packages:
       source-map-support: 0.5.21
     dev: false
 
+  /text-encoding@0.6.4:
+    resolution: {integrity: sha512-hJnc6Qg3dWoOMkqP53F0dzRIgtmsAge09kxUIqGrEUS4qr5rWLckGYaQAVr+opBrIMRErGgy6f5aPnyPpyGRfg==}
+    deprecated: no longer maintained
+    dev: false
+
   /text-table@0.2.0:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
     dev: true
@@ -9630,6 +10266,13 @@ packages:
       commander: 2.20.3
     dev: false
 
+  /topojson-server@3.0.1:
+    resolution: {integrity: sha512-/VS9j/ffKr2XAOjlZ9CgyyeLmgJ9dMwq6Y0YEON8O7p/tGGk+dCWnrE03zEdu7i4L7YsFZLEPZPzCvcB7lEEXw==}
+    hasBin: true
+    dependencies:
+      commander: 2.20.3
+    dev: false
+
   /totalist@3.0.1:
     resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
     engines: {node: '>=6'}
@@ -9782,6 +10425,14 @@ packages:
       typed-array-byte-offset: 1.0.2
     dev: true
 
+  /typedarray@0.0.6:
+    resolution: {integrity: sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==}
+    dev: false
+
+  /typedarray@0.0.7:
+    resolution: {integrity: sha512-ueeb9YybpjhivjbHP2LdFDAjbS948fGEPj+ACAMs4xCMmh72OCOMQWBQKlaN4ZNQ04yfLSDLSx1tGRIoWimObQ==}
+    dev: false
+
   /typeit@8.8.7:
     resolution: {integrity: sha512-sSVpy+cjeFP6Z+fZqiHzUSShg5yYFeJEt/Qut/bX945+Axyq+Yq+GPOuuk+sofoccSv8nNX/ibOOHkbki2mEpg==}
     requiresBuild: true
diff --git a/src/assets/svg-icon/visactor.svg b/src/assets/svg-icon/visactor.svg
new file mode 100644
index 0000000..5c4e884
--- /dev/null
+++ b/src/assets/svg-icon/visactor.svg
@@ -0,0 +1,3 @@
+<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M100 10C149.706 10 190 50.2944 190 100C190 108.029 188.949 115.812 186.976 123.219L136.254 39.4666H136.195C131.638 32.531 123.789 27.9518 114.87 27.9518C105.952 27.9518 98.1024 32.531 93.5456 39.4666H93.4853L92.8532 40.5821C92.731 40.7907 92.6117 41.0012 92.4953 41.2136L36.9057 139.312C34.7053 143.082 33.4445 147.467 33.4445 152.147C33.4445 156.134 34.3599 159.908 35.9919 163.269C19.9218 147.012 10 124.665 10 100C10 50.2944 50.2944 10 100 10ZM53.4722 177.056C55.2341 177.441 57.0641 177.644 58.9415 177.644C73.0231 177.644 84.4384 166.228 84.4384 152.147C84.4384 147.63 83.2642 143.388 81.2043 139.709L81.2172 139.704L68.7932 118.202C62.0989 106.608 66.0716 91.7816 77.6663 85.0874C89.261 78.3932 104.087 82.3658 110.781 93.9605L154.607 168.236L154.625 168.229C155.082 168.971 155.575 169.689 156.103 170.378C140.717 182.659 121.216 190 100 190C82.9725 190 67.0494 185.271 53.4722 177.056Z" fill="currentColor"/>
+</svg>
diff --git a/src/hooks/common/vchart.ts b/src/hooks/common/vchart.ts
new file mode 100644
index 0000000..caf2a29
--- /dev/null
+++ b/src/hooks/common/vchart.ts
@@ -0,0 +1,158 @@
+import { computed, effectScope, onScopeDispose, ref, watch } from 'vue';
+import { useElementSize } from '@vueuse/core';
+import VChart, { registerLiquidChart } from '@visactor/vchart';
+import type { ISpec, ITheme } from '@visactor/vchart';
+import light from '@visactor/vchart-theme/public/light.json';
+import dark from '@visactor/vchart-theme/public/dark.json';
+import { useThemeStore } from '@/store/modules/theme';
+
+registerLiquidChart();
+
+// register the theme
+VChart.ThemeManager.registerTheme('light', light as ITheme);
+VChart.ThemeManager.registerTheme('dark', dark as ITheme);
+
+interface ChartHooks {
+  onRender?: (chart: VChart) => void | Promise<void>;
+  onUpdated?: (chart: VChart) => void | Promise<void>;
+  onDestroy?: (chart: VChart) => void | Promise<void>;
+}
+
+export function useVChart<T extends ISpec>(specFactory: () => T, hooks: ChartHooks = {}) {
+  const scope = effectScope();
+  const themeStore = useThemeStore();
+  const darkMode = computed(() => themeStore.darkMode);
+
+  const domRef = ref<HTMLElement | null>(null);
+  const initialSize = { width: 0, height: 0 };
+  const { width, height } = useElementSize(domRef, initialSize);
+
+  let chart: VChart | null = null;
+  const spec: T = specFactory();
+
+  const { onRender, onUpdated, onDestroy } = hooks;
+
+  /**
+   * whether can render chart
+   *
+   * when domRef is ready and initialSize is valid
+   */
+  function canRender() {
+    return domRef.value && initialSize.width > 0 && initialSize.height > 0;
+  }
+
+  /** is chart rendered */
+  function isRendered() {
+    return Boolean(domRef.value && chart);
+  }
+
+  /**
+   * update chart spec
+   *
+   * @param callback callback function
+   */
+  async function updateSpec(callback: (opts: T, optsFactory: () => T) => ISpec = () => spec) {
+    if (!isRendered()) return;
+
+    const updatedOpts = callback(spec, specFactory);
+
+    Object.assign(spec, updatedOpts);
+
+    if (isRendered()) {
+      chart?.release();
+    }
+
+    chart?.updateSpec({ ...updatedOpts }, true);
+
+    await onUpdated?.(chart!);
+  }
+
+  function setSpec(newSpec: T) {
+    chart?.updateSpec(newSpec);
+  }
+
+  /** render chart */
+  async function render() {
+    if (!isRendered()) {
+      // apply the theme
+      if (darkMode.value) {
+        VChart.ThemeManager.setCurrentTheme('dark');
+      } else {
+        VChart.ThemeManager.setCurrentTheme('light');
+      }
+
+      chart = new VChart(spec, { dom: domRef.value as HTMLElement });
+      chart.renderSync();
+
+      await onRender?.(chart);
+    }
+  }
+
+  /** resize chart */
+  function resize() {
+    // chart?.resize();
+  }
+
+  /** destroy chart */
+  async function destroy() {
+    if (!chart) return;
+
+    await onDestroy?.(chart);
+    chart?.release();
+    chart = null;
+  }
+
+  /** change chart theme */
+  async function changeTheme() {
+    await destroy();
+    await render();
+    await onUpdated?.(chart!);
+  }
+
+  /**
+   * render chart by size
+   *
+   * @param w width
+   * @param h height
+   */
+  async function renderChartBySize(w: number, h: number) {
+    initialSize.width = w;
+    initialSize.height = h;
+
+    // size is abnormal, destroy chart
+    if (!canRender()) {
+      await destroy();
+
+      return;
+    }
+
+    // resize chart
+    if (isRendered()) {
+      resize();
+    }
+
+    // render chart
+    await render();
+  }
+
+  scope.run(() => {
+    watch([width, height], ([newWidth, newHeight]) => {
+      renderChartBySize(newWidth, newHeight);
+    });
+
+    watch(darkMode, () => {
+      changeTheme();
+    });
+  });
+
+  onScopeDispose(() => {
+    destroy();
+    scope.stop();
+  });
+
+  return {
+    domRef,
+    updateSpec,
+    setSpec
+  };
+}
diff --git a/src/locales/langs/en-us.ts b/src/locales/langs/en-us.ts
index 852cebd..73bd10a 100644
--- a/src/locales/langs/en-us.ts
+++ b/src/locales/langs/en-us.ts
@@ -205,6 +205,7 @@ const local: App.I18n.Schema = {
     plugin_charts: 'Charts',
     plugin_charts_echarts: 'ECharts',
     plugin_charts_antv: 'AntV',
+    plugin_charts_vchart: 'VChart',
     plugin_editor: 'Editor',
     plugin_editor_quill: 'Quill',
     plugin_editor_markdown: 'Markdown',
diff --git a/src/locales/langs/zh-cn.ts b/src/locales/langs/zh-cn.ts
index 79cf9b5..2ff6b16 100644
--- a/src/locales/langs/zh-cn.ts
+++ b/src/locales/langs/zh-cn.ts
@@ -205,6 +205,7 @@ const local: App.I18n.Schema = {
     plugin_charts: '图表',
     plugin_charts_echarts: 'ECharts',
     plugin_charts_antv: 'AntV',
+    plugin_charts_vchart: 'VChart',
     plugin_editor: '编辑器',
     plugin_editor_quill: '富文本编辑器',
     plugin_editor_markdown: 'MD 编辑器',
diff --git a/src/plugins/ui.ts b/src/plugins/ui.ts
index c7c5217..203c5bb 100644
--- a/src/plugins/ui.ts
+++ b/src/plugins/ui.ts
@@ -1,5 +1,5 @@
 import type { App } from 'vue';
-import ElementPlus, { ElTable } from 'element-plus';
+import ElementPlus, { ElCard, ElTable } from 'element-plus';
 
 /** global table column align */
 ElTable.TableColumn.props.align = {
@@ -7,6 +7,12 @@ ElTable.TableColumn.props.align = {
   default: 'center'
 };
 
+/** global ElCard shadow */
+ElCard.props.shadow = {
+  type: String,
+  default: 'never'
+};
+
 /** full import ElementPlus */
 export const setupUI = (app: App) => {
   app.use(ElementPlus);
diff --git a/src/router/elegant/imports.ts b/src/router/elegant/imports.ts
index 75f1b1f..924ae51 100644
--- a/src/router/elegant/imports.ts
+++ b/src/router/elegant/imports.ts
@@ -42,6 +42,7 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
   plugin_barcode: () => import("@/views/plugin/barcode/index.vue"),
   plugin_charts_antv: () => import("@/views/plugin/charts/antv/index.vue"),
   plugin_charts_echarts: () => import("@/views/plugin/charts/echarts/index.vue"),
+  plugin_charts_vchart: () => import("@/views/plugin/charts/vchart/index.vue"),
   plugin_copy: () => import("@/views/plugin/copy/index.vue"),
   plugin_editor_markdown: () => import("@/views/plugin/editor/markdown/index.vue"),
   plugin_editor_quill: () => import("@/views/plugin/editor/quill/index.vue"),
diff --git a/src/router/elegant/routes.ts b/src/router/elegant/routes.ts
index 16b29a3..ca294bb 100644
--- a/src/router/elegant/routes.ts
+++ b/src/router/elegant/routes.ts
@@ -424,6 +424,16 @@ export const generatedRoutes: GeneratedRoute[] = [
               i18nKey: 'route.plugin_charts_echarts',
               icon: 'simple-icons:apacheecharts'
             }
+          },
+          {
+            name: 'plugin_charts_vchart',
+            path: '/plugin/charts/vchart',
+            component: 'view.plugin_charts_vchart',
+            meta: {
+              title: 'plugin_charts_vchart',
+              i18nKey: 'route.plugin_charts_vchart',
+              localIcon: 'visactor'
+            }
           }
         ]
       },
diff --git a/src/router/elegant/transform.ts b/src/router/elegant/transform.ts
index 47347a1..a67a34f 100644
--- a/src/router/elegant/transform.ts
+++ b/src/router/elegant/transform.ts
@@ -213,6 +213,7 @@ const routeMap: RouteMap = {
   "plugin_charts": "/plugin/charts",
   "plugin_charts_antv": "/plugin/charts/antv",
   "plugin_charts_echarts": "/plugin/charts/echarts",
+  "plugin_charts_vchart": "/plugin/charts/vchart",
   "plugin_copy": "/plugin/copy",
   "plugin_editor": "/plugin/editor",
   "plugin_editor_markdown": "/plugin/editor/markdown",
diff --git a/src/typings/elegant-router.d.ts b/src/typings/elegant-router.d.ts
index cf915cf..4e3e22a 100644
--- a/src/typings/elegant-router.d.ts
+++ b/src/typings/elegant-router.d.ts
@@ -67,6 +67,7 @@ declare module "@elegant-router/types" {
     "plugin_charts": "/plugin/charts";
     "plugin_charts_antv": "/plugin/charts/antv";
     "plugin_charts_echarts": "/plugin/charts/echarts";
+    "plugin_charts_vchart": "/plugin/charts/vchart";
     "plugin_copy": "/plugin/copy";
     "plugin_editor": "/plugin/editor";
     "plugin_editor_markdown": "/plugin/editor/markdown";
@@ -184,6 +185,7 @@ declare module "@elegant-router/types" {
     | "plugin_barcode"
     | "plugin_charts_antv"
     | "plugin_charts_echarts"
+    | "plugin_charts_vchart"
     | "plugin_copy"
     | "plugin_editor_markdown"
     | "plugin_editor_quill"
diff --git a/src/views/_builtin/login/index.vue b/src/views/_builtin/login/index.vue
index 6550ab7..b0d6972 100644
--- a/src/views/_builtin/login/index.vue
+++ b/src/views/_builtin/login/index.vue
@@ -55,7 +55,7 @@ const bgColor = computed(() => {
 <template>
   <div class="relative size-full flex-center overflow-hidden" :style="{ backgroundColor: bgColor }">
     <WaveBg :theme-color="bgThemeColor" />
-    <ElCard shadow="never" :bordered="false" class="relative z-4 w-auto rd-12px">
+    <ElCard class="relative z-4 w-auto rd-12px">
       <div class="w-400px lt-sm:w-300px">
         <header class="flex-y-center justify-between">
           <SystemLogo class="text-64px text-primary lt-sm:text-48px" />
diff --git a/src/views/about/index.vue b/src/views/about/index.vue
index 5638bab..f6c9609 100644
--- a/src/views/about/index.vue
+++ b/src/views/about/index.vue
@@ -44,24 +44,10 @@ const latestBuildTime = BUILD_TIME;
 
 <template>
   <ElSpace direction="vertical" fill :size="16">
-    <ElCard
-      shadow="never"
-      :header="$t('page.about.title')"
-      :bordered="false"
-      size="small"
-      segmented
-      class="card-wrapper"
-    >
+    <ElCard :header="$t('page.about.title')" size="small" segmented class="card-wrapper">
       <p>{{ $t('page.about.introduction') }}</p>
     </ElCard>
-    <ElCard
-      shadow="never"
-      :header="$t('page.about.projectInfo.title')"
-      :bordered="false"
-      size="small"
-      segmented
-      class="card-wrapper"
-    >
+    <ElCard :header="$t('page.about.projectInfo.title')" size="small" class="card-wrapper">
       <ElDescriptions label-placement="left" border :column="column">
         <ElDescriptionsItem :label="$t('page.about.projectInfo.version')">
           <ElTag type="primary">{{ pkgJson.version }}</ElTag>
@@ -81,28 +67,14 @@ const latestBuildTime = BUILD_TIME;
         </ElDescriptionsItem>
       </ElDescriptions>
     </ElCard>
-    <ElCard
-      shadow="never"
-      :header="$t('page.about.prdDep')"
-      :bordered="false"
-      size="small"
-      segmented
-      class="card-wrapper"
-    >
+    <ElCard :header="$t('page.about.prdDep')" class="card-wrapper">
       <ElDescriptions label-placement="left" border :column="column">
         <ElDescriptionsItem v-for="item in pkgJson.dependencies" :key="item.name" :label="item.name">
           {{ item.version }}
         </ElDescriptionsItem>
       </ElDescriptions>
     </ElCard>
-    <ElCard
-      shadow="never"
-      :header="$t('page.about.devDep')"
-      :bordered="false"
-      size="small"
-      segmented
-      class="card-wrapper"
-    >
+    <ElCard :header="$t('page.about.devDep')" class="card-wrapper">
       <ElDescriptions label-placement="left" border :column="column">
         <ElDescriptionsItem v-for="item in pkgJson.devDependencies" :key="item.name" :label="item.name">
           {{ item.version }}
diff --git a/src/views/alova/request/index.vue b/src/views/alova/request/index.vue
index f579f90..4cefc2e 100644
--- a/src/views/alova/request/index.vue
+++ b/src/views/alova/request/index.vue
@@ -36,21 +36,16 @@ async function handleRepeatedModalError() {
 
 <template>
   <ElSpace direction="vertical" fill :size="16">
-    <ElCard :header="$t('request.logout')" shadow="never" size="small" class="card-wrapper">
+    <ElCard :header="$t('request.logout')" class="card-wrapper">
       <ElButton @click="logout">{{ $t('common.trigger') }}</ElButton>
     </ElCard>
-    <ElCard :header="$t('request.logoutWithModal')" shadow="never" size="small" class="card-wrapper">
+    <ElCard :header="$t('request.logoutWithModal')" class="card-wrapper">
       <ElButton @click="logoutWithModal">{{ $t('common.trigger') }}</ElButton>
     </ElCard>
-    <ElCard :header="$t('request.refreshToken')" shadow="never" size="small" class="card-wrapper">
+    <ElCard :header="$t('request.refreshToken')" class="card-wrapper">
       <ElButton @click="refreshToken">{{ $t('common.trigger') }}</ElButton>
     </ElCard>
-    <ElCard
-      :header="$t('page.function.request.repeatedErrorOccurOnce')"
-      shadow="never"
-      size="small"
-      class="card-wrapper"
-    >
+    <ElCard :header="$t('page.function.request.repeatedErrorOccurOnce')" class="card-wrapper">
       <ElButton @click="handleRepeatedMessageError">{{ $t('page.function.request.repeatedError') }}(Message)</ElButton>
       <ElButton class="ml-12px" @click="handleRepeatedModalError">
         {{ $t('page.function.request.repeatedError') }}(Modal)
diff --git a/src/views/alova/scenes/index.vue b/src/views/alova/scenes/index.vue
index 1ee5f39..192d943 100644
--- a/src/views/alova/scenes/index.vue
+++ b/src/views/alova/scenes/index.vue
@@ -9,17 +9,17 @@ import CrossComponentRequest from './modules/cross-component-request.vue';
 
 <template>
   <ElSpace direction="vertical" fill :size="16">
-    <ElCard :header="$t('page.alova.scenes.captchaSend')" shadow="never" class="card-wrapper">
+    <ElCard :header="$t('page.alova.scenes.captchaSend')" class="card-wrapper">
       <CaptchaVerification class="w-1/3" />
     </ElCard>
-    <ElCard :header="$t('page.alova.scenes.autoRequest')" shadow="never" class="card-wrapper">
+    <ElCard :header="$t('page.alova.scenes.autoRequest')" class="card-wrapper">
       <ElSpace :wrap="false">
         <BrowserVisibilityRequest />
         <PollingRequest />
         <NetworkToggleRequest />
       </ElSpace>
     </ElCard>
-    <ElCard :header="$t('page.alova.scenes.requestCrossComponent')" shadow="never" class="card-wrapper">
+    <ElCard :header="$t('page.alova.scenes.requestCrossComponent')" class="card-wrapper">
       <CrossComponentRequest />
     </ElCard>
   </ElSpace>
diff --git a/src/views/alova/user/index.vue b/src/views/alova/user/index.vue
index b373af7..9e2e006 100644
--- a/src/views/alova/user/index.vue
+++ b/src/views/alova/user/index.vue
@@ -142,7 +142,7 @@ const { columnChecks, columns } = useCheckedColumns<typeof fetchGetUserList>(()
 <template>
   <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
     <UserSearch v-model:model="searchParams" @search="getDataByPage" />
-    <ElCard shadow="never" :header="$t('page.manage.user.title')" class="sm:flex-1-hidden card-wrapper">
+    <ElCard :header="$t('page.manage.user.title')" class="sm:flex-1-hidden card-wrapper">
       <template #header-extra>
         <TableHeaderOperation
           v-model:columns="columnChecks"
diff --git a/src/views/alova/user/modules/user-search.vue b/src/views/alova/user/modules/user-search.vue
index 0a3c8a3..9cf237b 100644
--- a/src/views/alova/user/modules/user-search.vue
+++ b/src/views/alova/user/modules/user-search.vue
@@ -42,7 +42,7 @@ async function search() {
 </script>
 
 <template>
-  <ElCard shadow="never" size="small" class="card-wrapper">
+  <ElCard class="card-wrapper">
     <ElCollapse :default-expanded-names="['user-search']">
       <ElCollapseItem :title="$t('common.search')" name="user-search">
         <ElForm ref="formRef" :model="model" :rules="rules" label-position="right" :label-width="80">
diff --git a/src/views/function/request/index.vue b/src/views/function/request/index.vue
index 17dbb1f..cbd4236 100644
--- a/src/views/function/request/index.vue
+++ b/src/views/function/request/index.vue
@@ -36,22 +36,16 @@ async function handleRepeatedModalError() {
 
 <template>
   <ElSpace direction="vertical" fill :size="16">
-    <ElCard shadow="never" :header="$t('request.logout')" size="small" segmented class="card-wrapper">
+    <ElCard :header="$t('request.logout')" class="card-wrapper">
       <ElButton @click="logout">{{ $t('common.trigger') }}</ElButton>
     </ElCard>
-    <ElCard shadow="never" :header="$t('request.logoutWithModal')" size="small" segmented class="card-wrapper">
+    <ElCard :header="$t('request.logoutWithModal')" class="card-wrapper">
       <ElButton @click="logoutWithModal">{{ $t('common.trigger') }}</ElButton>
     </ElCard>
-    <ElCard shadow="never" :header="$t('request.refreshToken')" size="small" segmented class="card-wrapper">
+    <ElCard :header="$t('request.refreshToken')" class="card-wrapper">
       <ElButton @click="refreshToken">{{ $t('common.trigger') }}</ElButton>
     </ElCard>
-    <ElCard
-      shadow="never"
-      :header="$t('page.function.request.repeatedErrorOccurOnce')"
-      size="small"
-      segmented
-      class="card-wrapper"
-    >
+    <ElCard :header="$t('page.function.request.repeatedErrorOccurOnce')" class="card-wrapper">
       <ElButton @click="handleRepeatedMessageError">{{ $t('page.function.request.repeatedError') }}(Message)</ElButton>
       <ElButton class="ml-12px" @click="handleRepeatedModalError">
         {{ $t('page.function.request.repeatedError') }}(Modal)
diff --git a/src/views/function/tab/index.vue b/src/views/function/tab/index.vue
index 3f8eb30..cb2bef8 100644
--- a/src/views/function/tab/index.vue
+++ b/src/views/function/tab/index.vue
@@ -22,13 +22,7 @@ function resetTabLabel() {
 
 <template>
   <ElSpace direction="vertical" fill :size="16">
-    <ElCard
-      shadow="never"
-      :header="$t('page.function.tab.tabOperate.title')"
-      size="small"
-      segmented
-      class="card-wrapper"
-    >
+    <ElCard :header="$t('page.function.tab.tabOperate.title')" class="card-wrapper">
       <ElDivider content-position="left">{{ $t('page.function.tab.tabOperate.addTab') }}</ElDivider>
       <ElButton @click="routerPushByKey('about')">{{ $t('page.function.tab.tabOperate.addTabDesc') }}</ElButton>
       <ElDivider content-position="left">{{ $t('page.function.tab.tabOperate.closeTab') }}</ElDivider>
@@ -50,7 +44,7 @@ function resetTabLabel() {
         </ElButton>
       </ElSpace>
     </ElCard>
-    <ElCard shadow="never" :header="$t('page.function.tab.tabTitle.title')" size="small" segmented class="card-wrapper">
+    <ElCard :header="$t('page.function.tab.tabTitle.title')" class="card-wrapper">
       <ElDivider content-position="left">{{ $t('page.function.tab.tabTitle.changeTitle') }}</ElDivider>
       <ElInput v-model="tabLabel" class="max-w-240px">
         <template #append>
diff --git a/src/views/function/toggle-auth/index.vue b/src/views/function/toggle-auth/index.vue
index e8add25..a60ab54 100644
--- a/src/views/function/toggle-auth/index.vue
+++ b/src/views/function/toggle-auth/index.vue
@@ -62,7 +62,7 @@ async function handleToggleAccount(account: Account) {
 
 <template>
   <ElSpace direction="vertical" fill :size="16">
-    <ElCard shadow="never" :header="$t('route.function_toggle-auth')" size="small" segmented class="card-wrapper">
+    <ElCard :header="$t('route.function_toggle-auth')" class="card-wrapper">
       <ElDescriptions direction="vertical" border :column="1">
         <ElDescriptionsItem :label="$t('page.manage.user.userRole')">
           <ElSpace>
@@ -84,13 +84,7 @@ async function handleToggleAccount(account: Account) {
         </ElDescriptionsItem>
       </ElDescriptions>
     </ElCard>
-    <ElCard
-      shadow="never"
-      :header="$t('page.function.toggleAuth.authHook')"
-      size="small"
-      segmented
-      class="card-wrapper"
-    >
+    <ElCard :header="$t('page.function.toggleAuth.authHook')" class="card-wrapper">
       <ElSpace>
         <ElButton v-if="hasAuth('B_CODE1')">{{ $t('page.function.toggleAuth.superAdminVisible') }}</ElButton>
         <ElButton v-if="hasAuth('B_CODE2')">{{ $t('page.function.toggleAuth.adminVisible') }}</ElButton>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 5b50933..e4e63f0 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -19,12 +19,12 @@ const gap = computed(() => (appStore.isMobile ? 0 : 16));
     <CardData class="mb-16px" />
     <ElRow :gutter="gap">
       <ElCol :lg="14" :sm="24" class="mb-16px">
-        <ElCard shadow="never" class="card-wrapper">
+        <ElCard class="card-wrapper">
           <LineChart />
         </ElCard>
       </ElCol>
       <ElCol :lg="10" :sm="24" class="mb-16px">
-        <ElCard shadow="never" class="card-wrapper">
+        <ElCard class="card-wrapper">
           <PieChart />
         </ElCard>
       </ElCol>
diff --git a/src/views/home/modules/card-data.vue b/src/views/home/modules/card-data.vue
index 5457e2d..f67c757 100644
--- a/src/views/home/modules/card-data.vue
+++ b/src/views/home/modules/card-data.vue
@@ -76,7 +76,7 @@ function getGradientColor(color: CardData['color']) {
 </script>
 
 <template>
-  <ElCard shadow="never" size="small" class="card-wrapper">
+  <ElCard class="card-wrapper">
     <!-- define component start: GradientBg -->
     <DefineGradientBg v-slot="{ $slots, gradientColor }">
       <div class="rd-8px px-16px pb-4px pt-8px text-white" :style="{ backgroundImage: gradientColor }">
diff --git a/src/views/home/modules/creativity-banner.vue b/src/views/home/modules/creativity-banner.vue
index 685a34a..f81d95d 100644
--- a/src/views/home/modules/creativity-banner.vue
+++ b/src/views/home/modules/creativity-banner.vue
@@ -5,7 +5,7 @@ defineOptions({ name: 'CreativityBanner' });
 </script>
 
 <template>
-  <ElCard shadow="never" :header="$t('page.home.creativity')" size="small" class="h-full card-wrapper">
+  <ElCard :header="$t('page.home.creativity')" class="h-full card-wrapper">
     <div class="h-full flex-center">
       <icon-local-banner class="text-400px text-primary sm:text-320px" />
     </div>
diff --git a/src/views/home/modules/header-banner.vue b/src/views/home/modules/header-banner.vue
index 5fc625d..ea848fc 100644
--- a/src/views/home/modules/header-banner.vue
+++ b/src/views/home/modules/header-banner.vue
@@ -25,7 +25,7 @@ const statisticData = computed<StatisticData[]>(() => [
 </script>
 
 <template>
-  <ElCard shadow="never" class="card-wrapper">
+  <ElCard class="card-wrapper">
     <ElRow :gutter="gap" class="px-8px">
       <ElCol :md="18" :sm="24">
         <div class="flex-y-center">
diff --git a/src/views/home/modules/line-chart.vue b/src/views/home/modules/line-chart.vue
index e272d00..7a167d3 100644
--- a/src/views/home/modules/line-chart.vue
+++ b/src/views/home/modules/line-chart.vue
@@ -141,7 +141,7 @@ init();
 </script>
 
 <template>
-  <ElCard shadow="never" class="card-wrapper">
+  <ElCard class="card-wrapper">
     <div ref="domRef" class="h-360px overflow-hidden"></div>
   </ElCard>
 </template>
diff --git a/src/views/home/modules/pie-chart.vue b/src/views/home/modules/pie-chart.vue
index aed0f1c..6245481 100644
--- a/src/views/home/modules/pie-chart.vue
+++ b/src/views/home/modules/pie-chart.vue
@@ -99,7 +99,7 @@ init();
 </script>
 
 <template>
-  <ElCard shadow="never" class="card-wrapper">
+  <ElCard class="card-wrapper">
     <div ref="domRef" class="h-360px overflow-hidden"></div>
   </ElCard>
 </template>
diff --git a/src/views/home/modules/project-news.vue b/src/views/home/modules/project-news.vue
index 3832131..34fc655 100644
--- a/src/views/home/modules/project-news.vue
+++ b/src/views/home/modules/project-news.vue
@@ -20,7 +20,7 @@ const newses = computed<NewsItem[]>(() => [
 </script>
 
 <template>
-  <ElCard shadow="never" size="small" segmented class="card-wrapper">
+  <ElCard class="card-wrapper">
     <template #header>
       <ElRow>
         <ElCol :span="18">{{ $t('page.home.projectNews.title') }}</ElCol>
diff --git a/src/views/manage/menu/index.vue b/src/views/manage/menu/index.vue
index 3cb21c7..2220d3b 100644
--- a/src/views/manage/menu/index.vue
+++ b/src/views/manage/menu/index.vue
@@ -189,7 +189,7 @@ init();
 
 <template>
   <div ref="wrapperRef" class="flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
-    <ElCard shadow="never" size="small" class="sm:flex-1-hidden card-wrapper">
+    <ElCard class="sm:flex-1-hidden card-wrapper">
       <template #header>
         <div class="flex items-center justify-between">
           <p>{{ $t('page.manage.menu.title') }}</p>
diff --git a/src/views/manage/role/index.vue b/src/views/manage/role/index.vue
index 2d50b79..824cb43 100644
--- a/src/views/manage/role/index.vue
+++ b/src/views/manage/role/index.vue
@@ -109,7 +109,7 @@ function edit(id: number) {
 <template>
   <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
     <RoleSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getDataByPage" />
-    <ElCard shadow="never" :header="$t('page.manage.role.title')" class="sm:flex-1-hidden card-wrapper">
+    <ElCard :header="$t('page.manage.role.title')" class="sm:flex-1-hidden card-wrapper">
       <template #header-extra>
         <TableHeaderOperation
           v-model:columns="columnChecks"
diff --git a/src/views/manage/role/modules/role-search.vue b/src/views/manage/role/modules/role-search.vue
index e748615..5755572 100644
--- a/src/views/manage/role/modules/role-search.vue
+++ b/src/views/manage/role/modules/role-search.vue
@@ -24,7 +24,7 @@ function search() {
 </script>
 
 <template>
-  <ElCard shadow="never" class="card-wrapper">
+  <ElCard class="card-wrapper">
     <ElCollapse :default-expanded-names="['role-search']">
       <ElCollapseItem :title="$t('common.search')" name="role-search">
         <ElForm :model="model" label-position="right" :label-width="80">
diff --git a/src/views/manage/user/index.vue b/src/views/manage/user/index.vue
index 05f9ca6..414c321 100644
--- a/src/views/manage/user/index.vue
+++ b/src/views/manage/user/index.vue
@@ -135,7 +135,7 @@ function edit(id: number) {
 <template>
   <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
     <UserSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getDataByPage" />
-    <ElCard shadow="never" size="small" class="sm:flex-1-hidden card-wrapper">
+    <ElCard class="sm:flex-1-hidden card-wrapper">
       <template #header>
         <div class="flex items-center justify-between">
           <p>{{ $t('page.manage.user.title') }}</p>
diff --git a/src/views/manage/user/modules/user-search.vue b/src/views/manage/user/modules/user-search.vue
index 93e831c..c1bb0ff 100644
--- a/src/views/manage/user/modules/user-search.vue
+++ b/src/views/manage/user/modules/user-search.vue
@@ -41,7 +41,7 @@ async function search() {
 </script>
 
 <template>
-  <ElCard shadow="never" :bordered="false" size="small" class="card-wrapper">
+  <ElCard class="card-wrapper">
     <ElCollapse>
       <ElCollapseItem :title="$t('common.search')" name="user-search">
         <ElForm ref="formRef" :model="model" :rules="rules" label-position="right" :label-width="80">
diff --git a/src/views/plugin/barcode/index.vue b/src/views/plugin/barcode/index.vue
index 9e7e15f..733e22b 100644
--- a/src/views/plugin/barcode/index.vue
+++ b/src/views/plugin/barcode/index.vue
@@ -98,7 +98,7 @@ onMounted(() => {
 
 <template>
   <div class="overflow-hidden">
-    <ElCard shadow="never" header="条形码" class="h-full card-wrapper">
+    <ElCard header="条形码" class="h-full card-wrapper">
       <ElScrollbar class="h-full">
         <ElRow :gutter="12" class="w-[calc(100%-12px)]">
           <ElCol v-for="item in codes" :key="item.id" :lg="8" :md="12" :sm="24" class="mb-24px">
diff --git a/src/views/plugin/charts/antv/index.vue b/src/views/plugin/charts/antv/index.vue
index e0e6d01..3985193 100644
--- a/src/views/plugin/charts/antv/index.vue
+++ b/src/views/plugin/charts/antv/index.vue
@@ -55,7 +55,7 @@ onMounted(() => {
 
 <template>
   <div class="h-full">
-    <ElCard header="AntV G6 Next" shadow="never" class="h-full card-wrapper">
+    <ElCard header="AntV G6 Next" class="h-full card-wrapper">
       <AntvFlow ref="antvFlowRef" :data="flowData" :selected="selectedNode" :behaviors="behaviors" />
       <ElDivider />
       <ElButton @click="selectedNode = 'N5'">选中节点N5(需要自行处理选中事件，不会触发元素点击)</ElButton>
diff --git a/src/views/plugin/charts/echarts/index.vue b/src/views/plugin/charts/echarts/index.vue
index 2d05750..4a46f58 100644
--- a/src/views/plugin/charts/echarts/index.vue
+++ b/src/views/plugin/charts/echarts/index.vue
@@ -66,25 +66,25 @@ onUnmounted(() => {
 
 <template>
   <ElSpace fill :size="16">
-    <ElCard shadow="never" class="card-wrapper">
+    <ElCard class="card-wrapper">
       <div ref="pieRef" class="h-400px" />
     </ElCard>
-    <ElCard shadow="never" class="card-wrapper">
+    <ElCard class="card-wrapper">
       <div ref="lineRef" class="h-400px" />
     </ElCard>
-    <ElCard shadow="never" class="card-wrapper">
+    <ElCard class="card-wrapper">
       <div ref="barRef" class="h-400px" />
     </ElCard>
-    <ElCard shadow="never" class="card-wrapper">
+    <ElCard class="card-wrapper">
       <div ref="radarRef" class="h-400px"></div>
     </ElCard>
-    <ElCard shadow="never" class="card-wrapper">
+    <ElCard class="card-wrapper">
       <div ref="scatterRef" class="h-600px"></div>
     </ElCard>
-    <ElCard shadow="never" class="card-wrapper">
+    <ElCard class="card-wrapper">
       <div ref="pictorialBarRef" class="h-600px" />
     </ElCard>
-    <ElCard shadow="never" class="card-wrapper">
+    <ElCard class="card-wrapper">
       <div ref="gaugeRef" class="h-640px" />
     </ElCard>
   </ElSpace>
diff --git a/src/views/plugin/charts/vchart/data.ts b/src/views/plugin/charts/vchart/data.ts
new file mode 100644
index 0000000..3617fd8
--- /dev/null
+++ b/src/views/plugin/charts/vchart/data.ts
@@ -0,0 +1,872 @@
+import type {
+  IAreaChartSpec,
+  IBarChartSpec,
+  ICircularProgressChartSpec,
+  IHistogramChartSpec,
+  IIndicatorSpec,
+  ILiquidChartSpec,
+  IWordCloudChartSpec
+} from '@visactor/vchart';
+import type { IAnimationConfig } from '@visactor/vgrammar-core';
+
+export const shapeWordCloudSpec: IWordCloudChartSpec = {
+  type: 'wordCloud',
+  maskShape: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/log.jpeg',
+  nameField: 'challenge_name',
+  valueField: 'sum_count',
+  seriesField: 'challenge_name',
+  data: [
+    {
+      name: 'data',
+      values: [
+        {
+          challenge_name: '刘浩存',
+          sum_count: 957
+        },
+        {
+          challenge_name: '刘昊然',
+          sum_count: 942
+        },
+        {
+          challenge_name: '喜欢',
+          sum_count: 842
+        },
+        {
+          challenge_name: '真的',
+          sum_count: 828
+        },
+        {
+          challenge_name: '四海',
+          sum_count: 665
+        },
+        {
+          challenge_name: '好看',
+          sum_count: 627
+        },
+        {
+          challenge_name: '评论',
+          sum_count: 574
+        },
+        {
+          challenge_name: '好像',
+          sum_count: 564
+        },
+        {
+          challenge_name: '沈腾',
+          sum_count: 554
+        },
+        {
+          challenge_name: '不像',
+          sum_count: 540
+        },
+        {
+          challenge_name: '多少钱',
+          sum_count: 513
+        },
+        {
+          challenge_name: '韩寒',
+          sum_count: 513
+        },
+        {
+          challenge_name: '不知道',
+          sum_count: 499
+        },
+        {
+          challenge_name: '感觉',
+          sum_count: 499
+        },
+        {
+          challenge_name: '尹正',
+          sum_count: 495
+        },
+        {
+          challenge_name: '不看',
+          sum_count: 487
+        },
+        {
+          challenge_name: '奥特之父',
+          sum_count: 484
+        },
+        {
+          challenge_name: '阿姨',
+          sum_count: 482
+        },
+        {
+          challenge_name: '支持',
+          sum_count: 482
+        },
+        {
+          challenge_name: '父母',
+          sum_count: 479
+        },
+        {
+          challenge_name: '一条',
+          sum_count: 462
+        },
+        {
+          challenge_name: '女主',
+          sum_count: 456
+        },
+        {
+          challenge_name: '确实',
+          sum_count: 456
+        },
+        {
+          challenge_name: '票房',
+          sum_count: 456
+        },
+        {
+          challenge_name: '无语',
+          sum_count: 443
+        },
+        {
+          challenge_name: '干干净净',
+          sum_count: 443
+        },
+        {
+          challenge_name: '为啥',
+          sum_count: 426
+        },
+        {
+          challenge_name: '爱情',
+          sum_count: 425
+        },
+        {
+          challenge_name: '喜剧',
+          sum_count: 422
+        },
+        {
+          challenge_name: '春节',
+          sum_count: 414
+        },
+        {
+          challenge_name: '剧情',
+          sum_count: 414
+        },
+        {
+          challenge_name: '人生',
+          sum_count: 409
+        },
+        {
+          challenge_name: '风格',
+          sum_count: 408
+        },
+        {
+          challenge_name: '演员',
+          sum_count: 403
+        },
+        {
+          challenge_name: '成长',
+          sum_count: 403
+        },
+        {
+          challenge_name: '玩意',
+          sum_count: 402
+        },
+        {
+          challenge_name: '文学',
+          sum_count: 397
+        }
+      ]
+    }
+  ]
+};
+
+export const circularProgressTickSpec: ICircularProgressChartSpec & { indicator: IIndicatorSpec } = {
+  type: 'circularProgress',
+  data: [
+    {
+      id: 'id0',
+      values: [
+        {
+          type: 'Tradition Industries',
+          value: 0.795,
+          text: '79.5%'
+        },
+        {
+          type: 'Business Companies',
+          value: 0.5,
+          text: '50%'
+        },
+        {
+          type: 'Customer-facing Companies',
+          value: 0.25,
+          text: '25%'
+        }
+      ]
+    }
+  ],
+  color: ['rgb(255, 222, 0)', 'rgb(171, 205, 5)', 'rgb(0, 154, 68)'],
+  valueField: 'value',
+  categoryField: 'type',
+  seriesField: 'type',
+  radius: 0.8,
+  innerRadius: 0.4,
+  tickMask: {
+    visible: true,
+    angle: 10,
+    offsetAngle: 0,
+    forceAlign: true,
+    style: {
+      cornerRadius: 15
+    }
+  },
+  axes: [
+    {
+      visible: false,
+      type: 'linear',
+      orient: 'angle'
+    },
+    {
+      visible: false,
+      type: 'band',
+      orient: 'radius'
+    }
+  ],
+  indicator: {
+    visible: true,
+    trigger: 'hover',
+    title: {
+      visible: true,
+      field: 'type',
+      autoLimit: true,
+      style: {
+        fontSize: 20,
+        fill: 'black'
+      }
+    },
+    content: [
+      {
+        visible: true,
+        field: 'text',
+        style: {
+          fontSize: 16,
+          fill: 'gray'
+        }
+      }
+    ]
+  },
+  legends: {
+    visible: true,
+    orient: 'bottom',
+    title: {
+      visible: false
+    }
+  }
+};
+
+export const liquidChartSmartInvertSpec: ILiquidChartSpec & { indicator: IIndicatorSpec } = {
+  type: 'liquid',
+  valueField: 'value',
+  data: {
+    id: 'data',
+    values: [
+      {
+        value: 0.8
+      }
+    ]
+  },
+  maskShape: 'drop', // 水滴
+  // maskShape: 'circle',
+  // maskShape: 'star',
+  indicatorSmartInvert: true,
+  indicator: {
+    visible: true,
+    title: {
+      visible: true,
+      style: {
+        text: '进度'
+      }
+    },
+    content: [
+      {
+        visible: true,
+        style: {
+          fill: 'black',
+          text: '80%'
+        }
+      }
+    ]
+  },
+  liquidBackground: {
+    style: {
+      fill: 'blue'
+    }
+  }
+};
+
+const goldenMedals: Record<number, any[]> = {
+  2000: [
+    { country: 'USA', value: 37 },
+    { country: 'Russia', value: 32 },
+    { country: 'China', value: 28 },
+    { country: 'Australia', value: 16 },
+    { country: 'Germany', value: 13 },
+    { country: 'France', value: 13 },
+    { country: 'Italy', value: 13 },
+    { country: 'Netherlands', value: 12 },
+    { country: 'Cuba', value: 11 },
+    { country: 'U.K.', value: 11 }
+  ],
+  2004: [
+    { country: 'USA', value: 36 },
+    { country: 'China', value: 32 },
+    { country: 'Russia', value: 28 },
+    { country: 'Australia', value: 17 },
+    { country: 'Japan', value: 16 },
+    { country: 'Germany', value: 13 },
+    { country: 'France', value: 11 },
+    { country: 'Italy', value: 10 },
+    { country: 'South Korea', value: 9 },
+    { country: 'U.K.', value: 9 }
+  ],
+  2008: [
+    { country: 'China', value: 48 },
+    { country: 'USA', value: 36 },
+    { country: 'Russia', value: 24 },
+    { country: 'U.K.', value: 19 },
+    { country: 'Germany', value: 16 },
+    { country: 'Australia', value: 14 },
+    { country: 'South Korea', value: 13 },
+    { country: 'Japan', value: 9 },
+    { country: 'Italy', value: 8 },
+    { country: 'France', value: 7 }
+  ],
+  2012: [
+    { country: 'USA', value: 46 },
+    { country: 'China', value: 39 },
+    { country: 'U.K.', value: 29 },
+    { country: 'Russia', value: 19 },
+    { country: 'South Korea', value: 13 },
+    { country: 'Germany', value: 11 },
+    { country: 'France', value: 11 },
+    { country: 'Australia', value: 8 },
+    { country: 'Italy', value: 8 },
+    { country: 'Hungary', value: 8 }
+  ],
+  2016: [
+    { country: 'USA', value: 46 },
+    { country: 'U.K.', value: 27 },
+    { country: 'China', value: 26 },
+    { country: 'Russia', value: 19 },
+    { country: 'Germany', value: 17 },
+    { country: 'Japan', value: 12 },
+    { country: 'France', value: 10 },
+    { country: 'South Korea', value: 9 },
+    { country: 'Italy', value: 8 },
+    { country: 'Australia', value: 8 }
+  ],
+  2020: [
+    { country: 'USA', value: 39 },
+    { country: 'China', value: 38 },
+    { country: 'Japan', value: 27 },
+    { country: 'U.K.', value: 22 },
+    { country: 'Russian Olympic Committee', value: 20 },
+    { country: 'Australia', value: 17 },
+    { country: 'Netherlands', value: 10 },
+    { country: 'France', value: 10 },
+    { country: 'Germany', value: 10 },
+    { country: 'Italy', value: 10 }
+  ]
+};
+
+const colors = {
+  China: '#d62728',
+  USA: '#1664FF',
+  Russia: '#B2CFFF',
+  'U.K.': '#1AC6FF',
+  Australia: '#94EFFF',
+  Japan: '#FF8A00',
+  Cuba: '#FFCE7A',
+  Germany: '#3CC780',
+  France: '#B9EDCD',
+  Italy: '#7442D4',
+  'South Korea': '#DDC5FA',
+  'Russian Olympic Committee': '#B2CFFF',
+  Netherlands: '#FFC400',
+  Hungary: '#FAE878'
+};
+
+const dataSpecs = Object.keys(goldenMedals).map(year => {
+  return {
+    data: [
+      {
+        id: 'id',
+        values: (goldenMedals[year as unknown as number] as any)
+          .sort((a: any, b: any) => b.value - a.value)
+          .map((v: any) => {
+            return { ...v, fill: (colors as any)[v.country] };
+          })
+      },
+      {
+        id: 'year',
+        values: [{ year }]
+      }
+    ]
+  };
+});
+const duration = 1000;
+const exchangeDuration = 600;
+
+export const rankingBarSpec: IBarChartSpec = {
+  type: 'bar',
+  padding: {
+    top: 12,
+    right: 100,
+    bottom: 12
+  },
+  data: dataSpecs[0].data,
+  direction: 'horizontal',
+  yField: 'country',
+  xField: 'value',
+  seriesField: 'country',
+  bar: {
+    style: {
+      fill: (datum: any) => datum.fill
+    }
+  },
+  axes: [
+    {
+      animation: true,
+      orient: 'bottom',
+      type: 'linear',
+      visible: true,
+      max: 50,
+      grid: {
+        visible: true
+      }
+    },
+    {
+      animation: true,
+      id: 'axis-left',
+      orient: 'left',
+      width: 130,
+      tick: { visible: false },
+      label: { visible: true },
+      type: 'band'
+    }
+  ],
+  title: {
+    visible: true,
+    text: 'Top 10 Olympic Gold Medals by Country Since 2000'
+  },
+  animationUpdate: {
+    bar: [
+      {
+        type: 'update',
+        options: { excludeChannels: ['y'] },
+        easing: 'linear',
+        duration
+      },
+      {
+        channel: ['y'],
+        easing: 'circInOut',
+        duration: exchangeDuration
+      }
+    ],
+    axis: {
+      duration: exchangeDuration,
+      easing: 'circInOut'
+    }
+  } as Record<string, IAnimationConfig>,
+  animationEnter: {
+    bar: [
+      {
+        type: 'moveIn',
+        duration: exchangeDuration,
+        easing: 'circInOut',
+        options: {
+          direction: 'y',
+          orient: 'negative'
+        }
+      }
+    ]
+  },
+  animationExit: {
+    bar: [
+      {
+        type: 'fadeOut',
+        duration: exchangeDuration
+      }
+    ]
+  },
+  customMark: [
+    {
+      type: 'text',
+      dataId: 'year',
+      style: {
+        textBaseline: 'bottom',
+        fontSize: 200,
+        textAlign: 'right',
+        fontFamily: 'PingFang SC',
+        fontWeight: 600,
+        text: (datum: any) => datum.year,
+        x: (_datum: any, ctx: any) => {
+          return ctx.vchart.getChart().getCanvasRect()?.width - 50;
+        },
+        y: (_datum: any, ctx: any) => {
+          return ctx.vchart.getChart().getCanvasRect()?.height - 50;
+        },
+        fill: 'grey',
+        fillOpacity: 0.5
+      }
+    }
+  ],
+  player: {
+    type: 'continuous',
+    orient: 'bottom',
+    auto: true,
+    loop: true,
+    dx: 80,
+    position: 'middle',
+    interval: duration,
+    specs: dataSpecs,
+    slider: {
+      railStyle: {
+        height: 6
+      }
+    },
+    controller: {
+      backward: {
+        style: {
+          size: 12
+        }
+      },
+      forward: {
+        style: {
+          size: 12
+        }
+      },
+      start: {
+        order: 1,
+        position: 'end'
+      }
+    }
+  }
+};
+
+export const stackedDashAreaSpec: IAreaChartSpec = {
+  type: 'area',
+  data: {
+    values: [
+      { month: 'Jan', country: 'Africa', value: 4229 },
+      { month: 'Jan', country: 'EU', value: 4376 },
+      { month: 'Jan', country: 'China', value: 3054 },
+      { month: 'Jan', country: 'USA', value: 12814 },
+      { month: 'Feb', country: 'Africa', value: 3932 },
+      { month: 'Feb', country: 'EU', value: 3987 },
+      { month: 'Feb', country: 'China', value: 5067 },
+      { month: 'Feb', country: 'USA', value: 13012 },
+      { month: 'Mar', country: 'Africa', value: 5221 },
+      { month: 'Mar', country: 'EU', value: 3574 },
+      { month: 'Mar', country: 'China', value: 7004 },
+      { month: 'Mar', country: 'USA', value: 11624 },
+      { month: 'Apr', country: 'Africa', value: 9256 },
+      { month: 'Apr', country: 'EU', value: 4376 },
+      { month: 'Apr', country: 'China', value: 9054 },
+      { month: 'Apr', country: 'USA', value: 8814 },
+      { month: 'May', country: 'Africa', value: 3308 },
+      { month: 'May', country: 'EU', value: 4572 },
+      { month: 'May', country: 'China', value: 12043 },
+      { month: 'May', country: 'USA', value: 12998 },
+      { month: 'Jun', country: 'Africa', value: 5432 },
+      { month: 'Jun', country: 'EU', value: 3417 },
+      { month: 'Jun', country: 'China', value: 15067 },
+      { month: 'Jun', country: 'USA', value: 12321 },
+      { month: 'Jul', country: 'Africa', value: 13701 },
+      { month: 'Jul', country: 'EU', value: 5231 },
+      { month: 'Jul', country: 'China', value: 10119 },
+      { month: 'Jul', country: 'USA', value: 10342 },
+      { month: 'Aug', country: 'Africa', value: 4008, forecast: true },
+      { month: 'Aug', country: 'EU', value: 4572, forecast: true },
+      { month: 'Aug', country: 'China', value: 12043, forecast: true },
+      { month: 'Aug', country: 'USA', value: 22998, forecast: true },
+      { month: 'Sept', country: 'Africa', value: 18712, forecast: true },
+      { month: 'Sept', country: 'EU', value: 6134, forecast: true },
+      { month: 'Sept', country: 'China', value: 10419, forecast: true },
+      { month: 'Sept', country: 'USA', value: 11261, forecast: true }
+    ]
+  },
+  stack: true,
+  xField: 'month',
+  yField: 'value',
+  seriesField: 'country',
+  point: {
+    style: {
+      size: 0
+    },
+    state: {
+      dimension_hover: {
+        size: 10,
+        outerBorder: {
+          distance: 0,
+          lineWidth: 6,
+          strokeOpacity: 0.2
+        }
+      }
+    }
+  },
+  line: {
+    style: {
+      // Configure the lineDash attribute based on the forecast field value of the data
+      lineDash: (data: any) => {
+        if (data.forecast) {
+          return [5, 5];
+        }
+        return [0];
+      }
+    }
+  },
+  area: {
+    style: {
+      fillOpacity: 0.5,
+      textureColor: '#fff',
+      textureSize: 14,
+      // Configure the texture attribute based on the forecast field value of the data
+      texture: (data: any) => {
+        if (data.forecast) {
+          return 'bias-rl';
+        }
+        return '';
+      }
+    }
+  },
+  legends: [{ visible: true, position: 'middle', orient: 'bottom' }],
+  crosshair: {
+    xField: {
+      visible: true,
+      line: {
+        type: 'line'
+      }
+    }
+  }
+};
+
+export const barMarkPointSpec: IBarChartSpec = {
+  type: 'bar',
+  height: 300,
+  data: [
+    {
+      id: 'barData',
+      values: [
+        { time: '10:20', cost: 2 },
+        { time: '10:30', cost: 1 },
+        { time: '10:40', cost: 1 },
+        { time: '10:50', cost: 2 },
+        { time: '11:00', cost: 2 },
+        { time: '11:10', cost: 2 },
+        { time: '11:20', cost: 1 },
+        { time: '11:30', cost: 1 },
+        { time: '11:40', cost: 2 },
+        { time: '11:50', cost: 1 }
+      ]
+    }
+  ],
+  xField: 'time',
+  yField: 'cost',
+  crosshair: {
+    xField: {
+      visible: true,
+      line: {
+        type: 'rect',
+        style: {
+          fill: 'rgb(85,208,93)',
+          fillOpacity: 0.1
+        }
+      },
+      bindingAxesIndex: [1],
+      defaultSelect: {
+        axisIndex: 1,
+        datum: '10:20'
+      }
+    }
+  },
+  label: {
+    visible: true,
+    animation: false,
+    formatMethod: (datum: any) => `${datum}分钟`,
+    style: {
+      fill: 'rgb(155,155,155)'
+    }
+  },
+  bar: {
+    style: {
+      fill: 'rgb(85,208,93)',
+      cornerRadius: [4, 4, 0, 0],
+      width: 30
+    }
+  },
+  markPoint: [
+    {
+      coordinate: {
+        time: '10:20',
+        cost: 2
+      },
+      itemContent: {
+        type: 'text',
+        // autoRotate: false,
+        offsetY: -10,
+        text: {
+          dy: 14,
+          text: '2分钟',
+          style: {
+            fill: 'white',
+            fontSize: 14
+          },
+          labelBackground: {
+            padding: [5, 10, 5, 10],
+            style: {
+              fill: '#000',
+              cornerRadius: 5
+            }
+          }
+        }
+      },
+      itemLine: {
+        endSymbol: {
+          visible: true,
+          style: {
+            angle: Math.PI,
+            scaleY: 0.4,
+            fill: '#000',
+            dy: 4,
+            stroke: '#000'
+          }
+        },
+        startSymbol: { visible: false },
+        line: {
+          style: {
+            visible: false
+          }
+        }
+      }
+    }
+  ],
+  animationUpdate: false,
+  axes: [
+    {
+      orient: 'left',
+      max: 10,
+      label: { visible: false },
+      grid: {
+        style: { lineDash: [4, 4] }
+      }
+    },
+    {
+      orient: 'bottom',
+      label: {
+        formatMethod: (datum: any) => {
+          return datum === '10:20' ? '当前' : datum;
+        },
+        style: (datum: any) => {
+          return {
+            fontSize: datum === '10:20' ? 14 : 12,
+            fill: datum === '10:20' ? 'black' : 'grey'
+          };
+        }
+      },
+      paddingOuter: 0.5,
+      paddingInner: 0,
+      grid: {
+        visible: true,
+        alignWithLabel: false,
+        style: { lineDash: [4, 4] }
+      }
+    }
+  ]
+};
+
+export const histogramDifferentBinSpec: IHistogramChartSpec = {
+  type: 'histogram',
+  xField: 'from',
+  x2Field: 'to',
+  yField: 'profit',
+  seriesField: 'type',
+  bar: {
+    style: {
+      stroke: 'white',
+      lineWidth: 1
+    }
+  },
+  title: {
+    text: 'Profit',
+    textStyle: {
+      align: 'center',
+      height: 50,
+      lineWidth: 3,
+      fill: '#333',
+      fontSize: 25,
+      fontFamily: 'Times New Roman'
+    }
+  },
+  tooltip: {
+    visible: true,
+    mark: {
+      title: {
+        key: 'title',
+        value: 'profit'
+      },
+      content: [
+        {
+          key: (datum?: Record<string, any>) => `${datum?.from}～${datum?.to}`,
+          value: (datum?: Record<string, any>) => datum?.profit
+        }
+      ]
+    }
+  },
+  axes: [
+    {
+      orient: 'bottom',
+      nice: false
+    }
+  ],
+  data: [
+    {
+      name: 'data1',
+      values: [
+        {
+          from: 0,
+          to: 10,
+          profit: 2,
+          type: 'A'
+        },
+        {
+          from: 10,
+          to: 16,
+          profit: 3,
+          type: 'B'
+        },
+        {
+          from: 16,
+          to: 18,
+          profit: 15,
+          type: 'C'
+        },
+        {
+          from: 18,
+          to: 26,
+          profit: 12,
+          type: 'D'
+        },
+        {
+          from: 26,
+          to: 32,
+          profit: 22,
+          type: 'E'
+        },
+        {
+          from: 32,
+          to: 56,
+          profit: 7,
+          type: 'F'
+        },
+        {
+          from: 56,
+          to: 62,
+          profit: 17,
+          type: 'G'
+        }
+      ]
+    }
+  ]
+};
diff --git a/src/views/plugin/charts/vchart/index.vue b/src/views/plugin/charts/vchart/index.vue
new file mode 100644
index 0000000..8860e26
--- /dev/null
+++ b/src/views/plugin/charts/vchart/index.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { useVChart } from '@/hooks/common/vchart';
+import {
+  barMarkPointSpec,
+  circularProgressTickSpec,
+  histogramDifferentBinSpec,
+  liquidChartSmartInvertSpec,
+  rankingBarSpec,
+  shapeWordCloudSpec,
+  stackedDashAreaSpec
+} from './data';
+
+const { domRef: stackedDashAreaRef } = useVChart(() => stackedDashAreaSpec);
+const { domRef: barMarkPointRef } = useVChart(() => barMarkPointSpec);
+const { domRef: histogramDifferentBinRef } = useVChart(() => histogramDifferentBinSpec);
+const { domRef: rankingBarRef } = useVChart(() => rankingBarSpec);
+const { domRef: shapeWordCloudRef } = useVChart(() => shapeWordCloudSpec);
+const { domRef: circularProgressTickRef } = useVChart(() => circularProgressTickSpec);
+const { domRef: liquidChartSmartInvertRef } = useVChart(() => liquidChartSmartInvertSpec);
+</script>
+
+<template>
+  <ElSpace direction="vertical" fill :size="16">
+    <ElCard header="VChart" class="h-full card-wrapper">
+      <WebSiteLink label="More Demos: " link="https://www.visactor.com/vchart/example" />
+    </ElCard>
+    <ElCard header="Stacked Dash Area Chart" class="h-full card-wrapper">
+      <div ref="stackedDashAreaRef" class="h-400px" />
+    </ElCard>
+    <ElCard header="Bar Mark Point Chart" class="h-full card-wrapper">
+      <div ref="barMarkPointRef" class="h-400px" />
+    </ElCard>
+    <ElCard header="Histogram Different Bin Chart" class="h-full card-wrapper">
+      <div ref="histogramDifferentBinRef" class="h-400px" />
+    </ElCard>
+    <ElCard header="Ranking Bar Chart" class="h-full card-wrapper">
+      <div ref="rankingBarRef" class="h-400px" />
+    </ElCard>
+    <ElCard header="Circular Progress Tick Chart" class="h-full card-wrapper">
+      <div ref="circularProgressTickRef" class="h-400px" />
+    </ElCard>
+    <ElCard header="Liquid Chart Smart Invert Chart" class="h-full card-wrapper">
+      <div ref="liquidChartSmartInvertRef" class="h-400px" />
+    </ElCard>
+    <ElCard header="Shape Word Cloud Chart" class="h-full card-wrapper">
+      <div ref="shapeWordCloudRef" class="h-400px" />
+    </ElCard>
+  </ElSpace>
+</template>
+
+<style scoped></style>
diff --git a/src/views/plugin/copy/index.vue b/src/views/plugin/copy/index.vue
index 8732b35..59d98ad 100644
--- a/src/views/plugin/copy/index.vue
+++ b/src/views/plugin/copy/index.vue
@@ -26,7 +26,7 @@ async function handleCopy() {
 
 <template>
   <div class="h-full">
-    <ElCard shadow="never" header="文本复制" class="h-full card-wrapper">
+    <ElCard header="文本复制" class="h-full card-wrapper">
       <ElInputGroup>
         <ElInput v-model="source" placeholder="请输入要复制的内容吧">
           <template #append>
diff --git a/src/views/plugin/editor/markdown/index.vue b/src/views/plugin/editor/markdown/index.vue
index e6f2f75..00870ff 100644
--- a/src/views/plugin/editor/markdown/index.vue
+++ b/src/views/plugin/editor/markdown/index.vue
@@ -40,7 +40,7 @@ onUnmounted(() => {
 
 <template>
   <div class="h-full">
-    <ElCard shadow="never" header="markdown插件" class="card-wrapper">
+    <ElCard header="markdown插件" class="card-wrapper">
       <div ref="domRef"></div>
       <template #footer>
         <GithubLink link="https://github.com/Vanessa219/vditor" />
diff --git a/src/views/plugin/editor/quill/index.vue b/src/views/plugin/editor/quill/index.vue
index 034819f..804f6cd 100644
--- a/src/views/plugin/editor/quill/index.vue
+++ b/src/views/plugin/editor/quill/index.vue
@@ -26,7 +26,7 @@ onMounted(() => {
 
 <template>
   <div class="h-full">
-    <ElCard shadow="never" header="富文本插件" class="card-wrapper">
+    <ElCard header="富文本插件" class="card-wrapper">
       <div ref="domRef" class="bg-white dark:bg-dark"></div>
       <template #footer>
         <GithubLink link="https://github.com/wangeditor-team/wangEditor" />
diff --git a/src/views/plugin/excel/index.vue b/src/views/plugin/excel/index.vue
index 99a0b49..d7968dd 100644
--- a/src/views/plugin/excel/index.vue
+++ b/src/views/plugin/excel/index.vue
@@ -137,7 +137,7 @@ function isTableColumnHasTitle<T>(column: UI.TableColumn<T>): column is UI.Table
 
 <template>
   <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
-    <ElCard shadow="never" size="small" class="sm:flex-1-hidden card-wrapper">
+    <ElCard class="sm:flex-1-hidden card-wrapper">
       <template #header>
         <div class="flex items-center justify-between">
           <p>Excel导出</p>
diff --git a/src/views/plugin/gantt/index.vue b/src/views/plugin/gantt/index.vue
index cc4e749..bc02a8b 100644
--- a/src/views/plugin/gantt/index.vue
+++ b/src/views/plugin/gantt/index.vue
@@ -153,13 +153,7 @@ onMounted(() => {
 
 <template>
   <div class="overflow-hidden lt-sm:overflow-auto">
-    <ElCard
-      shadow="never"
-      header="甘特图演示"
-      size="small"
-      content-class="overflow-y-hidden overflow-x-auto"
-      class="h-full card-wrapper"
-    >
+    <ElCard header="甘特图演示" content-class="overflow-y-hidden overflow-x-auto" class="h-full card-wrapper">
       <template #header>
         <div class="flex items-center justify-between">
           <p>甘特图演示</p>
diff --git a/src/views/plugin/icon/index.vue b/src/views/plugin/icon/index.vue
index 14b55c4..8ae39b7 100644
--- a/src/views/plugin/icon/index.vue
+++ b/src/views/plugin/icon/index.vue
@@ -11,7 +11,7 @@ const localIcons = ['custom-icon', 'activity', 'at-sign', 'cast', 'chrome', 'cop
 
 <template>
   <div class="h-full">
-    <ElCard shadow="never" header="Icon组件示例" class="card-wrapper">
+    <ElCard header="Icon组件示例" class="card-wrapper">
       <div class="grid grid-cols-10">
         <template v-for="item in icons" :key="item">
           <div class="mt-5px flex-x-center">
@@ -27,7 +27,7 @@ const localIcons = ['custom-icon', 'activity', 'at-sign', 'cast', 'chrome', 'cop
         <WebSiteLink label="iconify地址：" link="https://icones.js.org/" class="mt-10px" />
       </template>
     </ElCard>
-    <ElCard shadow="never" header="自定义图标示例" class="mt-10px card-wrapper">
+    <ElCard header="自定义图标示例" class="mt-10px card-wrapper">
       <div class="pb-12px text-16px">
         在src/assets/svg-icon文件夹下的svg文件，通过在template里面以 icon-local-{文件名} 直接渲染,
         其中icon-local为.env文件里的 VITE_ICON_LOCAL_PREFIX
diff --git a/src/views/plugin/map/index.vue b/src/views/plugin/map/index.vue
index 1281987..4c93432 100644
--- a/src/views/plugin/map/index.vue
+++ b/src/views/plugin/map/index.vue
@@ -21,7 +21,7 @@ const activeMap = ref(maps[0].id);
 
 <template>
   <div class="h-full">
-    <ElCard shadow="never" header="地图插件" class="h-full" content-style="overflow:hidden">
+    <ElCard header="地图插件" class="h-full" content-style="overflow:hidden">
       <ElTabs class="h-full">
         <ElTabPane
           v-for="item in maps"
diff --git a/src/views/plugin/pdf/index.vue b/src/views/plugin/pdf/index.vue
index 0910285..6c04eb0 100644
--- a/src/views/plugin/pdf/index.vue
+++ b/src/views/plugin/pdf/index.vue
@@ -44,7 +44,7 @@ async function handleDownload() {
 
 <template>
   <div class="overflow-hidden">
-    <ElCard shadow="never" header="PDF 预览" class="h-full card-wrapper" content-class="overflow-hidden">
+    <ElCard header="PDF 预览" class="h-full card-wrapper" content-class="overflow-hidden">
       <div class="h-[calc(100%-30px)] flex-col-stretch">
         <GithubLink link="https://github.com/hrynko/vue-pdf-embed" />
         <WebSiteLink label="文档地址：" link="https://www.npmjs.com/package/vue-pdf-embed" />
diff --git a/src/views/plugin/pinyin/index.vue b/src/views/plugin/pinyin/index.vue
index 90631ff..72c3f42 100644
--- a/src/views/plugin/pinyin/index.vue
+++ b/src/views/plugin/pinyin/index.vue
@@ -29,7 +29,7 @@ onMounted(() => {
 
 <template>
   <div>
-    <ElCard shadow="never" header="pinyin 插件" :bordered="false" class="h-full card-wrapper">
+    <ElCard header="pinyin 插件" class="h-full card-wrapper">
       <ElSpace :vertical="true">
         <GithubLink link="https://github.com/zh-lx/pinyin-pro" />
         <WebSiteLink label="文档地址：" link="https://pinyin-pro.cn/" />
diff --git a/src/views/plugin/print/index.vue b/src/views/plugin/print/index.vue
index 787bec7..bf40b06 100644
--- a/src/views/plugin/print/index.vue
+++ b/src/views/plugin/print/index.vue
@@ -28,7 +28,7 @@ function printImage() {
 
 <template>
   <div class="h-full">
-    <ElCard shadow="never" header="打印" class="card-wrapper">
+    <ElCard header="打印" class="card-wrapper">
       <ElButton type="primary" class="mr-10px" @click="printTable">打印表格</ElButton>
       <ElButton type="primary" @click="printImage">打印图片</ElButton>
       <template #footer>
diff --git a/src/views/plugin/swiper/index.vue b/src/views/plugin/swiper/index.vue
index a89a4bc..a219313 100644
--- a/src/views/plugin/swiper/index.vue
+++ b/src/views/plugin/swiper/index.vue
@@ -33,7 +33,7 @@ const swiperExample: SwiperExample[] = [
 
 <template>
   <div>
-    <ElCard shadow="never" header="Swiper插件" class="card-wrapper">
+    <ElCard header="Swiper插件" class="card-wrapper">
       <ElSpace :vertical="true">
         <GithubLink link="https://github.com/nolimits4web/swiper" />
         <WebSiteLink label="vue3版文档地址：" link="https://swiperjs.com/vue" />
diff --git a/src/views/plugin/typeit/index.vue b/src/views/plugin/typeit/index.vue
index 4db0f6a..147421c 100644
--- a/src/views/plugin/typeit/index.vue
+++ b/src/views/plugin/typeit/index.vue
@@ -30,7 +30,7 @@ onMounted(() => {
 
 <template>
   <div>
-    <ElCard shadow="never" header="打字机 插件" :bordered="false" class="h-full card-wrapper">
+    <ElCard header="打字机 插件" class="h-full card-wrapper">
       <ElSpace direction="vertical">
         <GithubLink link="https://github.com/alexmacarthur/typeit" />
         <WebSiteLink label="文档地址：" link="https://www.typeitjs.com/docs/vanilla/usage/" />
diff --git a/src/views/plugin/video/index.vue b/src/views/plugin/video/index.vue
index 525ddcd..1adf9e7 100644
--- a/src/views/plugin/video/index.vue
+++ b/src/views/plugin/video/index.vue
@@ -32,7 +32,7 @@ onUnmounted(() => {
 
 <template>
   <div>
-    <ElCard shadow="never" header="视频播放器插件" class="h-full card-wrapper">
+    <ElCard header="视频播放器插件" class="h-full card-wrapper">
       <div class="flex-center">
         <div ref="domRef" class="h-auto w-full shadow-md"></div>
       </div>