diff --git a/build/webpack.config.js b/build/webpack.config.js
index e8f00681..40771f22 100644
--- a/build/webpack.config.js
+++ b/build/webpack.config.js
@@ -1,25 +1,29 @@
 const webpack = require('webpack');
-const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const { VueLoaderPlugin } = require('vue-loader');
 const path = require('path');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const fs = require('fs');
+const SvgSpritePlugin = require('../tool/plugin-svg-sprite');
 
 const distPath = path.resolve(__dirname, '../public');
-
+const svgPath = path.resolve(__dirname, '../src/asset/icon');
 
 module.exports = (env, argv) => {
-
   const isDev = argv.mode === 'development';
 
   let configLocal = {};
   if (isDev) {
-    const configLocalPath = path.resolve(__dirname, '../config/config.local.js');
+    const configLocalPath = path.resolve(
+      __dirname,
+      '../config/config.local.js'
+    );
     if (fs.existsSync(configLocalPath)) {
       configLocal = require(configLocalPath);
     }
   }
 
-  return [{
+  return [
+    {
       entry: path.resolve(__dirname, '../src/main.js'),
       output: {
         publicPath: './',
@@ -77,7 +81,11 @@ module.exports = (env, argv) => {
             ]
           },
           {
-            test: /\.(svg|html)$/,
+            test: /\.svg$/,
+            type: 'asset/source'
+          },
+          {
+            test: /\.html$/,
             use: [
               {
                 loader: 'html-loader',
@@ -114,9 +122,16 @@ module.exports = (env, argv) => {
         vue: 'Vue'
       },
       plugins: [
+        new SvgSpritePlugin({
+          spriteFilename: '../asset/sprite.svg',
+          svgPath: svgPath
+        }),
         new webpack.DefinePlugin({
           // It can be used in the code directly.
-          CONFIG_LOCAL: JSON.stringify(configLocal),
+          CONFIG_LOCAL: JSON.stringify(configLocal)
+        }),
+        new webpack.DefinePlugin({
+          __VUE_PROD_DEVTOOLS__: JSON.stringify(!isDev)
         }),
         new webpack.IgnorePlugin({
           resourceRegExp: /^fs$/
diff --git a/package-lock.json b/package-lock.json
index 635fc1ea..0346a50c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,8 +21,7 @@
         "semver": "^7.6.2",
         "sucrase": "^3.35.0",
         "vanilla-lazyload": "^17.8.3",
-        "vue-i18n": "^8.18.2",
-        "vue-scrollactive": "^0.9.3"
+        "vue-i18n": "^11.1.12"
       },
       "devDependencies": {
         "@babel/core": "^7.10.2",
@@ -41,6 +40,7 @@
         "download-git-repo": "^3.0.2",
         "echarts": "^6.0.0",
         "echarts-stat": "^1.2.0",
+        "element-plus": "^2.11.4",
         "esbuild": "^0.8.34",
         "file-loader": "^6.2.0",
         "fs-extra": "^8.1.0",
@@ -62,9 +62,8 @@
         "style-loader": "^2.0.0",
         "typescript": "^4.1.3",
         "url-loader": "^4.1.1",
-        "vue": "2.6.14",
-        "vue-loader": "^15.9.8",
-        "vue-template-compiler": "2.6.14",
+        "vue": "^3.5.22",
+        "vue-loader": "^17.4.2",
         "webpack": "^5.94.0",
         "webpack-bundle-analyzer": "^4.3.0",
         "webpack-cli": "^4.3.1",
@@ -101,6 +100,7 @@
       "version": "7.11.1",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
         "@babel/generator": "^7.11.0",
@@ -393,10 +393,23 @@
         "@babel/types": "^7.11.0"
       }
     },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.10.4",
-      "dev": true,
-      "license": "MIT"
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
+      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
     },
     "node_modules/@babel/helper-wrap-function": {
       "version": "7.10.4",
@@ -443,9 +456,13 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.11.3",
-      "dev": true,
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.5.tgz",
+      "integrity": "sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==",
       "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.5"
+      },
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -1270,13 +1287,26 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.11.0",
-      "dev": true,
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.5.tgz",
+      "integrity": "sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==",
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.10.4",
-        "lodash": "^4.17.19",
-        "to-fast-properties": "^2.0.0"
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.28.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@ctrl/tinycolor": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
+      "integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
       }
     },
     "node_modules/@discoveryjs/json-ext": {
@@ -1287,6 +1317,16 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/@element-plus/icons-vue": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.3.2.tgz",
+      "integrity": "sha512-OzIuTaIfC8QXEPmJvB4Y4kw34rSXdCJzxcD1kFStBvr8bK6X1zQAYDo0CNMjojnfTqRQCJ0I7prlErcoRiET2A==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/@ffmpeg/core": {
       "version": "0.10.0",
       "dev": true,
@@ -1306,6 +1346,78 @@
         "node": ">=12.16.1"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz",
+      "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.4.tgz",
+      "integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.3",
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.10",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
+      "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@intlify/core-base": {
+      "version": "11.1.12",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-11.1.12.tgz",
+      "integrity": "sha512-whh0trqRsSqVLNEUCwU59pyJZYpU8AmSWl8M3Jz2Mv5ESPP6kFh4juas2NpZ1iCvy7GlNRffUD1xr84gceimjg==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/message-compiler": "11.1.12",
+        "@intlify/shared": "11.1.12"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "11.1.12",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-11.1.12.tgz",
+      "integrity": "sha512-Fv9iQSJoJaXl4ZGkOCN1LDM3trzze0AS2zRz2EHLiwenwL6t0Ki9KySYlyr27yVOj5aVz0e55JePO+kELIvfdQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/shared": "11.1.12",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "11.1.12",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-11.1.12.tgz",
+      "integrity": "sha512-Om86EjuQtA69hdNj3GQec9ZC0L0vPSAnXzB3gP/gyJ7+mA7t06d9aOAiqMZ+xEOsumGP4eEBlfl8zF2LOTzf2A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
     "node_modules/@isaacs/balanced-match": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/@isaacs/balanced-match/-/balanced-match-4.0.1.tgz",
@@ -1453,7 +1565,9 @@
       }
     },
     "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.4.14",
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
@@ -1521,6 +1635,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@popperjs/core": {
+      "name": "@sxzz/popperjs-es",
+      "version": "2.11.7",
+      "resolved": "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
+      "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@puppeteer/browsers": {
       "version": "2.10.5",
       "resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-2.10.5.tgz",
@@ -1781,6 +1907,24 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/lodash": {
+      "version": "4.17.20",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.20.tgz",
+      "integrity": "sha512-H3MHACvFUEiujabxhaI/ImO6gUrd8oOurg7LQtS7mbwIXA/cUqWrvBsaeJ23aZEPk1TAYkurjfMbSELfoCXlGA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/lodash-es": {
+      "version": "4.17.12",
+      "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.12.tgz",
+      "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
     "node_modules/@types/minimatch": {
       "version": "3.0.3",
       "dev": true,
@@ -1796,6 +1940,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.16",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
+      "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/yauzl": {
       "version": "2.10.3",
       "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
@@ -1902,34 +2053,267 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
-    "node_modules/@vue/component-compiler-utils": {
-      "version": "3.2.0",
+    "node_modules/@vue/compiler-core": {
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.22.tgz",
+      "integrity": "sha512-jQ0pFPmZwTEiRNSb+i9Ow/I/cHv2tXYqsnHKKyCQ08irI2kdF5qmYedmF8si8mA7zepUFmJ2hqzS8CQmNOWOkQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.4",
+        "@vue/shared": "3.5.22",
+        "entities": "^4.5.0",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/@vue/compiler-core/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/@vue/compiler-dom": {
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.22.tgz",
+      "integrity": "sha512-W8RknzUM1BLkypvdz10OVsGxnMAuSIZs9Wdx1vzA3mL5fNMN15rhrSCLiTm6blWeACwUwizzPVqGJgOGBEN/hA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-core": "3.5.22",
+        "@vue/shared": "3.5.22"
+      }
+    },
+    "node_modules/@vue/compiler-sfc": {
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.22.tgz",
+      "integrity": "sha512-tbTR1zKGce4Lj+JLzFXDq36K4vcSZbJ1RBu8FxcDv1IGRz//Dh2EBqksyGVypz3kXpshIfWKGOCcqpSbyGWRJQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.4",
+        "@vue/compiler-core": "3.5.22",
+        "@vue/compiler-dom": "3.5.22",
+        "@vue/compiler-ssr": "3.5.22",
+        "@vue/shared": "3.5.22",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.19",
+        "postcss": "^8.5.6",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/@vue/compiler-sfc/node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/@vue/compiler-sfc/node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/@vue/compiler-sfc/node_modules/postcss": {
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/@vue/compiler-ssr": {
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.22.tgz",
+      "integrity": "sha512-GdgyLvg4R+7T8Nk2Mlighx7XGxq/fJf9jaVofc3IL0EPesTE86cP/8DD1lT3h1JeZr2ySBvyqKQJgbS54IX1Ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.22",
+        "@vue/shared": "3.5.22"
+      }
+    },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+      "license": "MIT"
+    },
+    "node_modules/@vue/reactivity": {
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.22.tgz",
+      "integrity": "sha512-f2Wux4v/Z2pqc9+4SmgZC1p73Z53fyD90NFWXiX9AKVnVBEvLFOWCEgJD3GdGnlxPZt01PSlfmLqbLYzY/Fw4A==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/shared": "3.5.22"
+      }
+    },
+    "node_modules/@vue/runtime-core": {
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.22.tgz",
+      "integrity": "sha512-EHo4W/eiYeAzRTN5PCextDUZ0dMs9I8mQ2Fy+OkzvRPUYQEyK9yAjbasrMCXbLNhF7P0OUyivLjIy0yc6VrLJQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "3.5.22",
+        "@vue/shared": "3.5.22"
+      }
+    },
+    "node_modules/@vue/runtime-dom": {
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.22.tgz",
+      "integrity": "sha512-Av60jsryAkI023PlN7LsqrfPvwfxOd2yAwtReCjeuugTJTkgrksYJJstg1e12qle0NarkfhfFu1ox2D+cQotww==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "3.5.22",
+        "@vue/runtime-core": "3.5.22",
+        "@vue/shared": "3.5.22",
+        "csstype": "^3.1.3"
+      }
+    },
+    "node_modules/@vue/server-renderer": {
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.22.tgz",
+      "integrity": "sha512-gXjo+ao0oHYTSswF+a3KRHZ1WszxIqO7u6XwNHqcqb9JfyIL/pbWrrh/xLv7jeDqla9u+LK7yfZKHih1e1RKAQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-ssr": "3.5.22",
+        "@vue/shared": "3.5.22"
+      },
+      "peerDependencies": {
+        "vue": "3.5.22"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.22.tgz",
+      "integrity": "sha512-F4yc6palwq3TT0u+FYf0Ns4Tfl9GRFURDN2gWG7L1ecIaS/4fCIuFOjMTnCyjsu/OK6vaDKLCrGAa+KvvH+h4w==",
+      "license": "MIT"
+    },
+    "node_modules/@vueuse/core": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.13.0.tgz",
+      "integrity": "sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "consolidate": "^0.15.1",
-        "hash-sum": "^1.0.2",
-        "lru-cache": "^4.1.2",
-        "merge-source-map": "^1.1.0",
-        "postcss": "^7.0.14",
-        "postcss-selector-parser": "^6.0.2",
-        "source-map": "~0.6.1",
-        "vue-template-es2015-compiler": "^1.9.0"
+        "@types/web-bluetooth": "^0.0.16",
+        "@vueuse/metadata": "9.13.0",
+        "@vueuse/shared": "9.13.0",
+        "vue-demi": "*"
       },
-      "optionalDependencies": {
-        "prettier": "^1.18.2"
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
       }
     },
-    "node_modules/@vue/component-compiler-utils/node_modules/prettier": {
-      "version": "1.19.1",
+    "node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
       "dev": true,
+      "hasInstallScript": true,
       "license": "MIT",
-      "optional": true,
       "bin": {
-        "prettier": "bin-prettier.js"
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.13.0.tgz",
+      "integrity": "sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.13.0.tgz",
+      "integrity": "sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
       }
     },
     "node_modules/@webassemblyjs/ast": {
@@ -2119,6 +2503,7 @@
       "resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.12.0.tgz",
       "integrity": "sha512-RTvkC4w+KNXrM39/lWCUaG0IbRkWdCv7W/IOW9oU6SawyxulvkQy5HQPVTKxEjczcUvapcrw3cFx/60VN/NRNw==",
       "dev": true,
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2167,6 +2552,7 @@
       "version": "6.12.6",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -2343,6 +2729,13 @@
       "dev": true,
       "license": "0BSD"
     },
+    "node_modules/async-validator": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
+      "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/axios": {
       "version": "0.18.1",
       "license": "MIT",
@@ -2488,10 +2881,6 @@
         "node": ">=10.0.0"
       }
     },
-    "node_modules/bezier-easing": {
-      "version": "2.1.0",
-      "license": "MIT"
-    },
     "node_modules/big.js": {
       "version": "5.2.2",
       "dev": true,
@@ -2909,6 +3298,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001629",
         "electron-to-chromium": "^1.4.796",
@@ -3725,17 +4115,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/consolidate": {
-      "version": "0.15.1",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "bluebird": "^3.1.1"
-      },
-      "engines": {
-        "node": ">= 0.10.0"
-      }
-    },
     "node_modules/content-disposition": {
       "version": "0.5.3",
       "dev": true,
@@ -4015,6 +4394,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "license": "MIT"
+    },
     "node_modules/cwd": {
       "version": "0.9.1",
       "license": "MIT",
@@ -4081,8 +4466,10 @@
         "url": "https://opencollective.com/date-fns"
       }
     },
-    "node_modules/de-indent": {
-      "version": "1.0.2",
+    "node_modules/dayjs": {
+      "version": "1.11.19",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.19.tgz",
+      "integrity": "sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==",
       "dev": true,
       "license": "MIT"
     },
@@ -4295,7 +4682,8 @@
       "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1464554.tgz",
       "integrity": "sha512-CAoP3lYfwAGQTaAXYvA6JZR0fjGUb7qec1qf4mToyoH2TZgUFeIqYcjh6f9jNuhHfuZiEdH+PONHYrLhRQX6aw==",
       "dev": true,
-      "license": "BSD-3-Clause"
+      "license": "BSD-3-Clause",
+      "peer": true
     },
     "node_modules/dir-glob": {
       "version": "3.0.1",
@@ -4698,6 +5086,32 @@
       "integrity": "sha512-CDyzcJ5XW78SHzsIOdn27z8J4ist8eaFLhdto2hSMSJQgsiwvbv2fbizcKUICryw1Wii1TI/FEkvzvJsR3awrA==",
       "dev": true
     },
+    "node_modules/element-plus": {
+      "version": "2.11.7",
+      "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.11.7.tgz",
+      "integrity": "sha512-Bh47wuzsqaNBNDkbtlOlZER1cGcOB8GsXp/+C9b95MOrk0wvoHUV4NKKK7xMkfYNFYdYysQ752oMhnExgAL6+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@ctrl/tinycolor": "^3.4.1",
+        "@element-plus/icons-vue": "^2.3.2",
+        "@floating-ui/dom": "^1.0.1",
+        "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
+        "@types/lodash": "^4.17.20",
+        "@types/lodash-es": "^4.17.12",
+        "@vueuse/core": "^9.1.0",
+        "async-validator": "^4.2.5",
+        "dayjs": "^1.11.18",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "lodash-unified": "^1.0.3",
+        "memoize-one": "^6.0.0",
+        "normalize-wheel-es": "^1.2.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -4943,6 +5357,12 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "license": "MIT"
+    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "dev": true,
@@ -5792,7 +6212,9 @@
       }
     },
     "node_modules/hash-sum": {
-      "version": "1.0.2",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-2.0.0.tgz",
+      "integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==",
       "dev": true,
       "license": "MIT"
     },
@@ -6781,7 +7203,28 @@
     },
     "node_modules/lodash": {
       "version": "4.17.21",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/lodash-unified": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/lodash-unified/-/lodash-unified-1.0.3.tgz",
+      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/lodash-es": "*",
+        "lodash": "*",
+        "lodash-es": "*"
+      }
     },
     "node_modules/log-symbols": {
       "version": "2.2.0",
@@ -6852,6 +7295,15 @@
         "lz-string": "bin/bin.js"
       }
     },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
     "node_modules/make-dir": {
       "version": "2.1.0",
       "dev": true,
@@ -6964,13 +7416,12 @@
       "version": "4.0.3",
       "license": "ISC"
     },
-    "node_modules/merge-source-map": {
-      "version": "1.1.0",
+    "node_modules/memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==",
       "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "source-map": "^0.6.1"
-      }
+      "license": "MIT"
     },
     "node_modules/merge-stream": {
       "version": "2.0.0",
@@ -7422,6 +7873,13 @@
         "node": ">=4"
       }
     },
+    "node_modules/normalize-wheel-es": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
+      "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==",
+      "dev": true,
+      "license": "BSD-3-Clause"
+    },
     "node_modules/npm-conf": {
       "version": "1.1.3",
       "dev": true,
@@ -9653,6 +10111,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-support": {
       "version": "0.5.21",
       "dev": true,
@@ -10252,14 +10719,6 @@
       "version": "1.1.1",
       "license": "MIT"
     },
-    "node_modules/to-fast-properties": {
-      "version": "2.0.0",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -10350,8 +10809,9 @@
     },
     "node_modules/typescript": {
       "version": "4.1.3",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -10656,76 +11116,146 @@
       }
     },
     "node_modules/vue": {
-      "version": "2.6.14",
-      "license": "MIT"
-    },
-    "node_modules/vue-hot-reload-api": {
-      "version": "2.3.4",
-      "dev": true,
-      "license": "MIT"
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.22.tgz",
+      "integrity": "sha512-toaZjQ3a/G/mYaLSbV+QsQhIdMo9x5rrqIpYRObsJ6T/J+RyCSFwN2LHNVH9v8uIcljDNa3QzPVdv3Y6b9hAJQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.22",
+        "@vue/compiler-sfc": "3.5.22",
+        "@vue/runtime-dom": "3.5.22",
+        "@vue/server-renderer": "3.5.22",
+        "@vue/shared": "3.5.22"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
     },
     "node_modules/vue-i18n": {
-      "version": "8.20.0",
-      "license": "MIT"
+      "version": "11.1.12",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-11.1.12.tgz",
+      "integrity": "sha512-BnstPj3KLHLrsqbVU2UOrPmr0+Mv11bsUZG0PyCOzsawCivk8W00GMXHeVUWIDOgNaScCuZah47CZFE+Wnl8mw==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/core-base": "11.1.12",
+        "@intlify/shared": "11.1.12",
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
     },
     "node_modules/vue-loader": {
-      "version": "15.11.1",
-      "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-15.11.1.tgz",
-      "integrity": "sha512-0iw4VchYLePqJfJu9s62ACWUXeSqM30SQqlIftbYWM3C+jpPcEHKSPUZBLjSF9au4HTHQ/naF6OGnO3Q/qGR3Q==",
+      "version": "17.4.2",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-17.4.2.tgz",
+      "integrity": "sha512-yTKOA4R/VN4jqjw4y5HrynFL8AK0Z3/Jt7eOJXEitsm0GMRHDBjCfCiuTiLP7OESvsZYo2pATCWhDqxC5ZrM6w==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@vue/component-compiler-utils": "^3.1.0",
-        "hash-sum": "^1.0.2",
-        "loader-utils": "^1.1.0",
-        "vue-hot-reload-api": "^2.3.0",
-        "vue-style-loader": "^4.1.0"
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "watchpack": "^2.4.0"
       },
       "peerDependencies": {
-        "css-loader": "*",
-        "webpack": "^3.0.0 || ^4.1.0 || ^5.0.0-0"
+        "webpack": "^4.1.0 || ^5.0.0-0"
       },
       "peerDependenciesMeta": {
-        "cache-loader": {
+        "@vue/compiler-sfc": {
           "optional": true
         },
-        "prettier": {
-          "optional": true
-        },
-        "vue-template-compiler": {
+        "vue": {
           "optional": true
         }
       }
     },
-    "node_modules/vue-scrollactive": {
-      "version": "0.9.3",
+    "node_modules/vue-loader/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "bezier-easing": "^2.0.3"
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/vue-style-loader": {
+    "node_modules/vue-loader/node_modules/chalk": {
       "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "hash-sum": "^1.0.2",
-        "loader-utils": "^1.0.2"
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-    "node_modules/vue-template-compiler": {
-      "version": "2.6.14",
+    "node_modules/vue-loader/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "de-indent": "^1.0.2",
-        "he": "^1.1.0"
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
       }
     },
-    "node_modules/vue-template-es2015-compiler": {
-      "version": "1.9.1",
+    "node_modules/vue-loader/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/vue-loader/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/vue-loader/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.1",
       "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.1.tgz",
@@ -10749,6 +11279,7 @@
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.94.0.tgz",
       "integrity": "sha512-KcsGn50VT+06JH/iunZJedYGUJS5FGjow8wb9c0v5n1Om8O1g4L6LjtfxwlXIATopoQu+vOXXa7gYisWxCoPyg==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@types/estree": "^1.0.5",
         "@webassemblyjs/ast": "^1.12.1",
@@ -10888,6 +11419,7 @@
       "version": "4.3.1",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@discoveryjs/json-ext": "^0.5.0",
         "@webpack-cli/info": "^1.2.1",
diff --git a/package.json b/package.json
index 45e96242..e04b110c 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "download-git-repo": "^3.0.2",
     "echarts": "^6.0.0",
     "echarts-stat": "^1.2.0",
+    "element-plus": "^2.11.4",
     "esbuild": "^0.8.34",
     "file-loader": "^6.2.0",
     "fs-extra": "^8.1.0",
@@ -57,9 +58,8 @@
     "style-loader": "^2.0.0",
     "typescript": "^4.1.3",
     "url-loader": "^4.1.1",
-    "vue": "2.6.14",
-    "vue-loader": "^15.9.8",
-    "vue-template-compiler": "2.6.14",
+    "vue": "^3.5.22",
+    "vue-loader": "^17.4.2",
     "webpack": "^5.94.0",
     "webpack-bundle-analyzer": "^4.3.0",
     "webpack-cli": "^4.3.1",
@@ -78,7 +78,6 @@
     "semver": "^7.6.2",
     "sucrase": "^3.35.0",
     "vanilla-lazyload": "^17.8.3",
-    "vue-i18n": "^8.18.2",
-    "vue-scrollactive": "^0.9.3"
+    "vue-i18n": "^11.1.12"
   }
 }
diff --git a/public/en/editor.html b/public/en/editor.html
index 2f685dce..1baebbad 100644
--- a/public/en/editor.html
+++ b/public/en/editor.html
@@ -24,12 +24,12 @@
     />
     <link
       rel="stylesheet"
-      href="https://fastly.jsdelivr.net/npm/element-ui@2.15.14/lib/theme-chalk/index.css"
+      href="https://fastly.jsdelivr.net/npm/element-plus@2.11.4/dist/index.css"
     />
-    <script src="https://fastly.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
+    <script src="https://fastly.jsdelivr.net/npm/vue@3.5.22/dist/vue.global.min.js"></script>
     <script src="https://fastly.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
     <script src="https://fastly.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
-    <script src="https://fastly.jsdelivr.net/npm/element-ui@2.15.14/lib/index.js"></script>
+    <script src="https://fastly.jsdelivr.net/npm/element-plus@2.11.4/dist/index.full.min.js"></script>
   </head>
   <body>
     <div id="main"></div>
diff --git a/public/en/index.html b/public/en/index.html
index 626de2ae..2e090885 100644
--- a/public/en/index.html
+++ b/public/en/index.html
@@ -24,12 +24,12 @@
     />
     <link
       rel="stylesheet"
-      href="https://fastly.jsdelivr.net/npm/element-ui@2.15.14/lib/theme-chalk/index.css"
+      href="https://fastly.jsdelivr.net/npm/element-plus@2.11.4/dist/index.css"
     />
-    <script src="https://fastly.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
+    <script src="https://fastly.jsdelivr.net/npm/vue@3.5.22/dist/vue.global.min.js"></script>
     <script src="https://fastly.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
     <script src="https://fastly.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
-    <script src="https://fastly.jsdelivr.net/npm/element-ui@2.15.14/lib/index.js"></script>
+    <script src="https://fastly.jsdelivr.net/npm/element-plus@2.11.4/dist/index.full.min.js"></script>
   </head>
   <body>
     <div id="main"></div>
diff --git a/public/en/view.html b/public/en/view.html
index 6db8604a..facd4c2e 100644
--- a/public/en/view.html
+++ b/public/en/view.html
@@ -24,12 +24,12 @@
     />
     <link
       rel="stylesheet"
-      href="https://fastly.jsdelivr.net/npm/element-ui@2.15.14/lib/theme-chalk/index.css"
+      href="https://fastly.jsdelivr.net/npm/element-plus@2.11.4/dist/index.css"
     />
-    <script src="https://fastly.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
+    <script src="https://fastly.jsdelivr.net/npm/vue@3.5.22/dist/vue.global.min.js"></script>
     <script src="https://fastly.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
     <script src="https://fastly.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
-    <script src="https://fastly.jsdelivr.net/npm/element-ui@2.15.14/lib/index.js"></script>
+    <script src="https://fastly.jsdelivr.net/npm/element-plus@2.11.4/dist/index.full.min.js"></script>
   </head>
   <body>
     <div id="main"></div>
diff --git a/public/zh/editor.html b/public/zh/editor.html
index e083b636..d0533201 100644
--- a/public/zh/editor.html
+++ b/public/zh/editor.html
@@ -24,12 +24,12 @@
     />
     <link
       rel="stylesheet"
-      href="https://lib.baomitu.com/element-ui/2.15.14/theme-chalk/index.min.css"
+      href="https://lib.baomitu.com/element-plus/2.11.4/index.css"
     />
-    <script src="https://lib.baomitu.com/vue/2.6.14/vue.min.js"></script>
+    <script src="https://lib.baomitu.com/vue/3.5.22/vue.global.min.js"></script>
     <script src="https://registry.npmmirror.com/jquery/3.7.1/files/dist/jquery.min.js"></script>
     <script src="https://lib.baomitu.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
-    <script src="https://lib.baomitu.com/element-ui/2.15.14/index.min.js"></script>
+    <script src="https://lib.baomitu.com/element-plus/2.11.4/index.full.min.js"></script>
   </head>
   <body>
     <div id="main"></div>
diff --git a/public/zh/index.html b/public/zh/index.html
index 8d6aef82..e18dae19 100644
--- a/public/zh/index.html
+++ b/public/zh/index.html
@@ -24,12 +24,12 @@
     />
     <link
       rel="stylesheet"
-      href="https://lib.baomitu.com/element-ui/2.15.14/theme-chalk/index.min.css"
+      href="https://lib.baomitu.com/element-plus/2.11.4/index.css"
     />
-    <script src="https://lib.baomitu.com/vue/2.6.14/vue.min.js"></script>
+    <script src="https://lib.baomitu.com/vue/3.5.22/vue.global.min.js"></script>
     <script src="https://registry.npmmirror.com/jquery/3.7.1/files/dist/jquery.min.js"></script>
     <script src="https://lib.baomitu.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
-    <script src="https://lib.baomitu.com/element-ui/2.15.14/index.min.js"></script>
+    <script src="https://lib.baomitu.com/element-plus/2.11.4/index.full.min.js"></script>
   </head>
   <body>
     <div id="main"></div>
diff --git a/public/zh/view.html b/public/zh/view.html
index 7fbe3357..58c616a0 100644
--- a/public/zh/view.html
+++ b/public/zh/view.html
@@ -24,12 +24,12 @@
     />
     <link
       rel="stylesheet"
-      href="https://lib.baomitu.com/element-ui/2.15.14/theme-chalk/index.min.css"
+      href="https://lib.baomitu.com/element-plus/2.11.4/index.css"
     />
-    <script src="https://lib.baomitu.com/vue/2.6.14/vue.min.js"></script>
+    <script src="https://lib.baomitu.com/vue/3.5.22/vue.global.min.js"></script>
     <script src="https://registry.npmmirror.com/jquery/3.7.1/files/dist/jquery.min.js"></script>
     <script src="https://lib.baomitu.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
-    <script src="https://lib.baomitu.com/element-ui/2.15.14/index.min.js"></script>
+    <script src="https://lib.baomitu.com/element-plus/2.11.4/index.full.min.js"></script>
   </head>
   <body>
     <div id="main"></div>
diff --git a/src/asset/icon/ui/camera.svg b/src/asset/icon/ui/camera.svg
new file mode 100644
index 00000000..d1277869
--- /dev/null
+++ b/src/asset/icon/ui/camera.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+  <path fill="currentColor" d="M160 224a64 64 0 0 0-64 64v512a64 64 0 0 0 64 64h704a64 64 0 0 0 64-64V288a64 64 0 0 0-64-64H748.416l-46.464-92.672A64 64 0 0 0 644.736 96H379.328a64 64 0 0 0-57.216 35.392L275.776 224zm352 435.2a115.2 115.2 0 1 0 0-230.4 115.2 115.2 0 0 0 0 230.4m0 140.8a256 256 0 1 1 0-512 256 256 0 0 1 0 512"></path>
+</svg>
diff --git a/src/asset/icon/ui/codepen.svg b/src/asset/icon/ui/codepen.svg
new file mode 100644
index 00000000..6adef6b3
--- /dev/null
+++ b/src/asset/icon/ui/codepen.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="none">
+  <path fill="currentColor" d="M21.838 8.445c0-.001-.001-.001 0 0l-.003-.004l-.001-.001v-.001a.809.809 0 0 0-.235-.228l-9.164-6.08a.834.834 0 0 0-.898 0L2.371 8.214A.786.786 0 0 0 2 8.897v6.16a.789.789 0 0 0 .131.448v.001l.002.002l.01.015v.002h.001l.001.001l.001.001c.063.088.14.16.226.215l9.165 6.082a.787.787 0 0 0 .448.139a.784.784 0 0 0 .45-.139l9.165-6.082a.794.794 0 0 0 .371-.685v-6.16a.793.793 0 0 0-.133-.452zm-9.057-4.172l6.953 4.613l-3.183 2.112l-3.771-2.536V4.273zm-1.592 0v4.189l-3.771 2.536l-3.181-2.111l6.952-4.614zm-7.595 6.098l2.395 1.59l-2.395 1.611v-3.201zm7.595 9.311l-6.96-4.617l3.195-2.15l3.765 2.498v4.269zm.795-5.653l-3.128-2.078l3.128-2.105l3.131 2.105l-3.131 2.078zm.797 5.653v-4.27l3.766-2.498l3.193 2.15l-6.959 4.618zm7.597-6.11l-2.396-1.611l2.396-1.59v3.201z" 
+  ></path>
+</svg>
diff --git a/src/asset/icon/ui/codesandbox.svg b/src/asset/icon/ui/codesandbox.svg
new file mode 100644
index 00000000..bb95916d
--- /dev/null
+++ b/src/asset/icon/ui/codesandbox.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 512 512" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path stroke="currentColor" stroke-width="38" stroke-linecap="round" stroke-linejoin="round" d="M69 153.99L256 263.99M256 263.99L443 153.99M256 263.99V463.99M448 341.37V170.61C447.993 165.021 446.523 159.531 443.735 154.687C440.947 149.843 436.939 145.814 432.11 143L280.11 54.54C272.787 50.2765 264.464 48.0303 255.99 48.0303C247.516 48.0303 239.193 50.2765 231.87 54.54L79.89 143C75.0609 145.814 71.053 149.843 68.2652 154.687C65.4773 159.531 64.0068 165.021 64 170.61V341.37C64.0033 346.962 65.4722 352.456 68.2602 357.304C71.0482 362.152 75.058 366.185 79.89 369L231.89 457.46C239.215 461.718 247.537 463.96 256.01 463.96C264.483 463.96 272.805 461.718 280.13 457.46L432.13 369C436.958 366.182 440.964 362.148 443.748 357.301C446.533 352.453 447.999 346.96 448 341.37Z"
+  ></path>
+</svg>
diff --git a/src/asset/icon/ui/document.svg b/src/asset/icon/ui/document.svg
new file mode 100644
index 00000000..b77c278d
--- /dev/null
+++ b/src/asset/icon/ui/document.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+  <path fill="currentColor" d="M832 384H576V128H192v768h640zm-26.496-64L640 154.496V320zM160 64h480l256 256v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32m160 448h384v64H320zm0-192h160v64H320zm0 384h384v64H320z"></path>
+</svg>
diff --git a/src/asset/icon/ui/download.svg b/src/asset/icon/ui/download.svg
new file mode 100644
index 00000000..c97acbae
--- /dev/null
+++ b/src/asset/icon/ui/download.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+  <path fill="currentColor" d="M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64m384-253.696 236.288-236.352 45.248 45.248L508.8 704 192 387.2l45.248-45.248L480 584.704V128h64z"></path>
+</svg>
diff --git a/src/asset/icon/ui/format.svg b/src/asset/icon/ui/format.svg
new file mode 100644
index 00000000..e85741c2
--- /dev/null
+++ b/src/asset/icon/ui/format.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"  stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
+</svg>
diff --git a/src/asset/icon/ui/github.svg b/src/asset/icon/ui/github.svg
new file mode 100644
index 00000000..53ef6d79
--- /dev/null
+++ b/src/asset/icon/ui/github.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+  <path d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33c.85 0 1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2Z"/>
+</svg>
diff --git a/src/asset/icon/ui/loading.svg b/src/asset/icon/ui/loading.svg
new file mode 100644
index 00000000..0b581190
--- /dev/null
+++ b/src/asset/icon/ui/loading.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+  <path fill="currentColor" d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32m0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32m448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32m-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32M195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248m452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248M828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0m-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0"></path>
+</svg>
diff --git a/src/asset/icon/ui/play.svg b/src/asset/icon/ui/play.svg
new file mode 100644
index 00000000..a4e10c39
--- /dev/null
+++ b/src/asset/icon/ui/play.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+</svg>
diff --git a/src/asset/icon/ui/setting.svg b/src/asset/icon/ui/setting.svg
new file mode 100644
index 00000000..d5cfe426
--- /dev/null
+++ b/src/asset/icon/ui/setting.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+  <path fill="currentColor" d="M600.704 64a32 32 0 0 1 30.464 22.208l35.2 109.376c14.784 7.232 28.928 15.36 42.432 24.512l112.384-24.192a32 32 0 0 1 34.432 15.36L944.32 364.8a32 32 0 0 1-4.032 37.504l-77.12 85.12a357 357 0 0 1 0 49.024l77.12 85.248a32 32 0 0 1 4.032 37.504l-88.704 153.6a32 32 0 0 1-34.432 15.296L708.8 803.904c-13.44 9.088-27.648 17.28-42.368 24.512l-35.264 109.376A32 32 0 0 1 600.704 960H423.296a32 32 0 0 1-30.464-22.208L357.696 828.48a352 352 0 0 1-42.56-24.64l-112.32 24.256a32 32 0 0 1-34.432-15.36L79.68 659.2a32 32 0 0 1 4.032-37.504l77.12-85.248a357 357 0 0 1 0-48.896l-77.12-85.248A32 32 0 0 1 79.68 364.8l88.704-153.6a32 32 0 0 1 34.432-15.296l112.32 24.256c13.568-9.152 27.776-17.408 42.56-24.64l35.2-109.312A32 32 0 0 1 423.232 64H600.64zm-23.424 64H446.72l-36.352 113.088-24.512 11.968a294 294 0 0 0-34.816 20.096l-22.656 15.36-116.224-25.088-65.28 113.152 79.68 88.192-1.92 27.136a293 293 0 0 0 0 40.192l1.92 27.136-79.808 88.192 65.344 113.152 116.224-25.024 22.656 15.296a294 294 0 0 0 34.816 20.096l24.512 11.968L446.72 896h130.688l36.48-113.152 24.448-11.904a288 288 0 0 0 34.752-20.096l22.592-15.296 116.288 25.024 65.28-113.152-79.744-88.192 1.92-27.136a293 293 0 0 0 0-40.256l-1.92-27.136 79.808-88.128-65.344-113.152-116.288 24.96-22.592-15.232a288 288 0 0 0-34.752-20.096l-24.448-11.904L577.344 128zM512 320a192 192 0 1 1 0 384 192 192 0 0 1 0-384m0 64a128 128 0 1 0 0 256 128 128 0 0 0 0-256"></path>
+</svg>
diff --git a/src/asset/icon/ui/share.svg b/src/asset/icon/ui/share.svg
new file mode 100644
index 00000000..77fdb94f
--- /dev/null
+++ b/src/asset/icon/ui/share.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+  <path fill="currentColor" d="m679.872 348.8-301.76 188.608a127.8 127.8 0 0 1 5.12 52.16l279.936 104.96a128 128 0 1 1-22.464 59.904l-279.872-104.96a128 128 0 1 1-16.64-166.272l301.696-188.608a128 128 0 1 1 33.92 54.272z"></path>
+</svg>
diff --git a/src/common/store.js b/src/common/store.js
index c9088265..ea710deb 100644
--- a/src/common/store.js
+++ b/src/common/store.js
@@ -164,7 +164,7 @@ export function loadExampleCode() {
           resolve(data);
         },
         error() {
-          reject('failed to load example', c);
+          reject(`failed to load example: ${c}`);
         }
       }
     );
diff --git a/src/editor/CodeAce.vue b/src/editor/CodeAce.vue
index 3f4f630f..b12b4780 100644
--- a/src/editor/CodeAce.vue
+++ b/src/editor/CodeAce.vue
@@ -1,16 +1,26 @@
 <template>
-  <div class="ace-editor-main" v-loading="loading"></div>
+  <div ref="ace-editor" class="ace-editor-main" v-loading="loading"></div>
 </template>
 
-<script>
-import { keywords } from '../data/option-keywords';
+<script setup>
+import { onMounted, reactive, ref, useTemplateRef, watch } from 'vue';
+import { getScriptURLs } from '../common/config';
 import { loadScriptsAsync } from '../common/helper';
 import { store } from '../common/store';
-import { getScriptURLs } from '../common/config';
+import { keywords } from '../data/option-keywords';
+
+const { initialCode } = defineProps({
+  initialCode: String
+});
+
+const shared = reactive(store);
+const aceEditorRef = useTemplateRef('ace-editor');
+const loading = ref(false);
+const editor = ref(null);
 
 function ensureACE() {
   if (typeof ace === 'undefined') {
-    const SCRIPT_URLS = getScriptURLs(store.locale);
+    const SCRIPT_URLS = getScriptURLs(shared.locale);
 
     return loadScriptsAsync([
       SCRIPT_URLS.aceDir + '/ace.js',
@@ -38,66 +48,54 @@ function ensureACE() {
   return Promise.resolve();
 }
 
-export default {
-  props: ['initialCode'],
-
-  data() {
-    return {
-      shared: store,
-      loading: false
-    };
-  },
-
-  mounted() {
-    this.loading = true;
-    ensureACE().then(() => {
-      const editor = ace.edit(this.$el);
-      editor.getSession().setMode('ace/mode/javascript');
-      editor.setOptions({
-        enableBasicAutocompletion: true,
-        enableSnippets: true,
-        tabSize: 2,
-        enableLiveAutocompletion: true
-      });
-
-      this._editor = editor;
-
-      editor.on('change', () => {
-        store.sourceCode = store.runCode = editor.getValue();
-      });
+onMounted(() => {
+  loading.value = true;
+  ensureACE().then(() => {
+    const aceEditor = ace.edit(aceEditorRef.value);
+    aceEditor.getSession().setMode('ace/mode/javascript');
+    aceEditor.setOptions({
+      enableBasicAutocompletion: true,
+      enableSnippets: true,
+      tabSize: 2,
+      enableLiveAutocompletion: true
+    });
 
-      if (this.initialCode) {
-        this.setInitialCode(this.initialCode);
-      }
+    editor.value = aceEditor;
 
-      this.loading = false;
+    aceEditor.on('change', () => {
+      shared.sourceCode = shared.runCode = aceEditor.getValue();
     });
-  },
-
-  methods: {
-    setInitialCode(code) {
-      if (this._editor && code) {
-        this._editor.setValue(code || '');
-        this._editor.selection.setSelectionRange({
-          start: {
-            row: 1,
-            column: 4
-          },
-          end: {
-            row: 1,
-            column: 4
-          }
-        });
-      }
-    }
-  },
 
-  watch: {
-    initialCode(newVal) {
-      this.setInitialCode(newVal);
+    if (initialCode) setInitialCode(initialCode);
+
+    loading.value = false;
+  });
+});
+
+function setInitialCode(code) {
+  if (editor.value && code) {
+    editor.value.setValue(code || '');
+    if (editor.value.selection && editor.value.selection.setSelectionRange) {
+      editor.value.selection.setSelectionRange({
+        start: {
+          row: 1,
+          column: 4
+        },
+        end: {
+          row: 1,
+          column: 4
+        }
+      });
     }
   }
-};
+}
+
+watch(
+  () => initialCode,
+  (newVal) => {
+    setInitialCode(newVal);
+  }
+);
 </script>
 
 <style lang="scss">
diff --git a/src/editor/CodeMonaco.vue b/src/editor/CodeMonaco.vue
index 0b5fc4c1..86f93377 100644
--- a/src/editor/CodeMonaco.vue
+++ b/src/editor/CodeMonaco.vue
@@ -1,14 +1,35 @@
 <template>
-  <div class="monaco-editor-main" v-loading="loading"></div>
+  <div ref="monaco-editor" class="monaco-editor-main" v-loading="loading"></div>
 </template>
 
-<script>
+<script setup>
+import {
+  onBeforeUnmount,
+  onMounted,
+  reactive,
+  ref,
+  useTemplateRef,
+  watch
+} from 'vue';
+import { URL_PARAMS, getScriptURLs } from '../common/config';
 import { loadScriptsAsync } from '../common/helper';
 import { store } from '../common/store';
-import { URL_PARAMS, getScriptURLs } from '../common/config';
+
+const { initialCode } = defineProps({
+  initialCode: String
+});
+
+const shared = reactive(store);
+
+const monacoEditorRef = useTemplateRef('monaco-editor');
+
+const loading = ref(false);
+const editor = ref(null);
+
+const emit = defineEmits(['ready']);
 
 function loadTypes() {
-  const SCRIPT_URLS = getScriptURLs(store.locale);
+  const SCRIPT_URLS = getScriptURLs(shared.locale);
   const isLocal = 'local' in URL_PARAMS;
 
   return fetch(
@@ -99,12 +120,12 @@ declare global {
 
 function ensureMonacoAndTsTransformer() {
   if (typeof monaco === 'undefined') {
-    const SCRIPT_URLS = getScriptURLs(store.locale);
+    const SCRIPT_URLS = getScriptURLs(shared.locale);
 
     return loadScriptsAsync([
       SCRIPT_URLS.monacoDir + '/loader.js',
       // Prebuilt TS transformer with sucrase
-      store.cdnRoot + '/js/example-transform-ts-bundle.js'
+      shared.cdnRoot + '/js/example-transform-ts-bundle.js'
     ]).then(function () {
       window.require.config({
         paths: {
@@ -112,7 +133,7 @@ function ensureMonacoAndTsTransformer() {
         },
         'vs/nls': {
           availableLanguages: {
-            '*': store.locale === 'zh' ? 'zh-cn' : undefined
+            '*': shared.locale === 'zh' ? 'zh-cn' : undefined
           }
         }
       });
@@ -131,93 +152,81 @@ function ensureMonacoAndTsTransformer() {
   return Promise.resolve();
 }
 
-export default {
-  props: ['initialCode'],
-
-  data() {
-    return {
-      shared: store,
-      loading: false
-    };
-  },
-
-  mounted() {
-    this.loading = true;
-    ensureMonacoAndTsTransformer().then(() => {
-      const model = monaco.editor.createModel(
-        this.initialCode || '',
-        'typescript',
-        // Should also be a file path so it can resolve the lib.
-        monaco.Uri.parse('file:///main.ts')
-      );
-      const editor = monaco.editor.create(this.$el, {
-        model,
-        fontFamily: `'Source Code Pro', 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace`,
-        minimap: {
-          enabled: false
-        },
-        wordWrap: 'off',
-        automaticLayout: true,
-        fixedOverflowWidgets: true
-      });
-
-      this._editor = editor;
+onMounted(() => {
+  loading.value = true;
+  ensureMonacoAndTsTransformer().then(() => {
+    const model = monaco.editor.createModel(
+      initialCode || '',
+      'typescript',
+      // Should also be a file path so it can resolve the lib.
+      monaco.Uri.parse('file:///main.ts')
+    );
+    const monacoEditor = monaco.editor.create(monacoEditorRef.value, {
+      model,
+      fontFamily: `'Source Code Pro', 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace`,
+      minimap: {
+        enabled: false
+      },
+      wordWrap: 'off',
+      automaticLayout: true,
+      fixedOverflowWidgets: true
+    });
 
-      if (this.initialCode) {
-        store.sourceCode = this.initialCode;
-        store.runCode = echartsExampleTransformTs(store.sourceCode);
-      }
-      editor.onDidChangeModelContent(() => {
-        store.sourceCode = editor.getValue();
-        store.runCode = echartsExampleTransformTs(store.sourceCode);
-      });
+    editor.value = monacoEditor;
 
-      this.loading = false;
-      this.$emit('ready');
+    if (initialCode) {
+      shared.sourceCode = initialCode;
+      shared.runCode = echartsExampleTransformTs(shared.sourceCode);
+    }
+    monacoEditor.onDidChangeModelContent(() => {
+      shared.sourceCode = monacoEditor.getValue();
+      shared.runCode = echartsExampleTransformTs(shared.sourceCode);
     });
-  },
 
-  destroyed() {
-    if (this._editor) {
-      this._editor.getModel().dispose();
-      this._editor.dispose();
-    }
-  },
-
-  methods: {
-    setInitialCode(code) {
-      if (this._editor && code) {
-        // this._editor.setValue(code || '');
-
-        // https://github.com/microsoft/monaco-editor/issues/299#issuecomment-268423927
-        this._editor.executeEdits('replace', [
-          {
-            identifier: 'delete',
-            range: new monaco.Range(1, 1, 10000, 1),
-            text: '',
-            forceMoveMarkers: true
-          }
-        ]);
-        this._editor.executeEdits('replace', [
-          {
-            identifier: 'insert',
-            range: new monaco.Range(1, 1, 1, 1),
-            text: code,
-            forceMoveMarkers: true
-          }
-        ]);
-        this._editor.setSelection(new monaco.Range(0, 0, 0, 0));
-        // this._editor.setPosition(currentPosition);
-      }
-    }
-  },
+    loading.value = false;
+    emit('ready');
+  });
+});
 
-  watch: {
-    initialCode(newVal) {
-      this.setInitialCode(newVal);
-    }
+onBeforeUnmount(() => {
+  if (editor.value) {
+    editor.value.getModel().dispose();
+    editor.value.dispose();
+  }
+});
+
+const setInitialCode = (code) => {
+  if (editor.value && code) {
+    // this._editor.setValue(code || '');
+
+    // https://github.com/microsoft/monaco-editor/issues/299#issuecomment-268423927
+    editor.value.executeEdits('replace', [
+      {
+        identifier: 'delete',
+        range: new monaco.Range(1, 1, 10000, 1),
+        text: '',
+        forceMoveMarkers: true
+      }
+    ]);
+    editor.value.executeEdits('replace', [
+      {
+        identifier: 'insert',
+        range: new monaco.Range(1, 1, 1, 1),
+        text: code,
+        forceMoveMarkers: true
+      }
+    ]);
+    editor.value.setSelection(new monaco.Range(0, 0, 0, 0));
+    // this._editor.setPosition(currentPosition);
   }
 };
+
+watch(
+  () => initialCode,
+  (newVal) => {
+    setInitialCode(newVal);
+  }
+);
 </script>
 
 <style lang="scss">
diff --git a/src/editor/Editor.vue b/src/editor/Editor.vue
index cc627b9d..4d32ae9a 100644
--- a/src/editor/Editor.vue
+++ b/src/editor/Editor.vue
@@ -7,13 +7,15 @@
     >
       <el-tabs v-model="currentTab" type="border-card">
         <el-tab-pane name="code-editor">
-          <span slot="label">{{ $t('editor.tabEditor') }}</span>
+          <template #label>
+            <span>{{ t('editor.tabEditor') }}</span>
+          </template>
           <el-container>
             <el-header id="editor-control-panel">
               <div>
                 <div class="languages">
                   <el-tooltip
-                    :content="$t('editor.tooltip.jsMode')"
+                    :content="t('editor.tooltip.jsMode')"
                     placement="bottom"
                   >
                     <a
@@ -23,7 +25,7 @@
                     >
                   </el-tooltip>
                   <el-tooltip
-                    :content="$t(`editor.tooltip.${hasTs ? 'tsMode' : 'noTs'}`)"
+                    :content="t(`editor.tooltip.${hasTs ? 'tsMode' : 'noTs'}`)"
                     placement="bottom"
                   >
                     <a
@@ -47,97 +49,49 @@
                   class="btn btn-default btn-sm pull-request"
                   target="_blank"
                   :href="`https://github.com/apache/echarts/pull/${shared.prNumber}`"
-                  :title="`${pr && pr.title ? pr.title + '\n' : ''}${$t(
+                  :title="`${pr && pr.title ? pr.title + '\n' : ''}${t(
                     'editor.pr.tooltip'
                   )}`"
                 >
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                    <path
-                      fill="currentColor"
-                      d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33c.85 0 1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2Z"
-                    />
+                  <svg role="img">
+                    <use href="/asset/sprite.svg#github"></use>
                   </svg>
                   <span>#{{ shared.prNumber }}</span>
                 </a>
                 <a
                   class="btn btn-sm codepen"
                   @click="toExternalEditor('CodePen')"
-                  :title="$t('editor.openWithCodePen')"
+                  :title="t('editor.openWithCodePen')"
                 >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="none"
-                  >
-                    <path
-                      d="M21.838 8.445c0-.001-.001-.001 0 0l-.003-.004l-.001-.001v-.001a.809.809 0 0 0-.235-.228l-9.164-6.08a.834.834 0 0 0-.898 0L2.371 8.214A.786.786 0 0 0 2 8.897v6.16a.789.789 0 0 0 .131.448v.001l.002.002l.01.015v.002h.001l.001.001l.001.001c.063.088.14.16.226.215l9.165 6.082a.787.787 0 0 0 .448.139a.784.784 0 0 0 .45-.139l9.165-6.082a.794.794 0 0 0 .371-.685v-6.16a.793.793 0 0 0-.133-.452zm-9.057-4.172l6.953 4.613l-3.183 2.112l-3.771-2.536V4.273zm-1.592 0v4.189l-3.771 2.536l-3.181-2.111l6.952-4.614zm-7.595 6.098l2.395 1.59l-2.395 1.611v-3.201zm7.595 9.311l-6.96-4.617l3.195-2.15l3.765 2.498v4.269zm.795-5.653l-3.128-2.078l3.128-2.105l3.131 2.105l-3.131 2.078zm.797 5.653v-4.27l3.766-2.498l3.193 2.15l-6.959 4.618zm7.597-6.11l-2.396-1.611l2.396-1.59v3.201z"
-                      fill="currentColor"
-                    ></path>
+                  <svg role="img">
+                    <use href="/asset/sprite.svg#codepen"></use>
                   </svg>
                 </a>
                 <a
                   class="btn btn-sm codesandbox"
                   @click="toExternalEditor('CodeSandbox')"
-                  :title="$t('editor.openWithCodeSandbox')"
+                  :title="t('editor.openWithCodeSandbox')"
                 >
-                  <svg
-                    viewBox="0 0 512 512"
-                    fill="none"
-                    stroke="currentColor"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M69 153.99L256 263.99M256 263.99L443 153.99M256 263.99V463.99M448 341.37V170.61C447.993 165.021 446.523 159.531 443.735 154.687C440.947 149.843 436.939 145.814 432.11 143L280.11 54.54C272.787 50.2765 264.464 48.0303 255.99 48.0303C247.516 48.0303 239.193 50.2765 231.87 54.54L79.89 143C75.0609 145.814 71.053 149.843 68.2652 154.687C65.4773 159.531 64.0068 165.021 64 170.61V341.37C64.0033 346.962 65.4722 352.456 68.2602 357.304C71.0482 362.152 75.058 366.185 79.89 369L231.89 457.46C239.215 461.718 247.537 463.96 256.01 463.96C264.483 463.96 272.805 461.718 280.13 457.46L432.13 369C436.958 366.182 440.964 362.148 443.748 357.301C446.533 352.453 447.999 346.96 448 341.37Z"
-                      stroke="currentColor"
-                      stroke-width="38"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                    ></path>
+                  <svg role="img" class="fill-none">
+                    <use href="/asset/sprite.svg#codesandbox"></use>
                   </svg>
                 </a>
-                <a
+                <button
                   class="btn btn-sm format"
-                  :title="$t('editor.format')"
+                  :title="t('editor.format')"
                   :disabled="!formatterReady"
                   :style="{ cursor: formatterReady ? '' : 'progress' }"
                   @click="format"
                 >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
-                    />
+                  <svg role="img" class="stroke-current fill-none">
+                    <use href="/asset/sprite.svg#format"></use>
                   </svg>
-                </a>
+                </button>
                 <a class="btn btn-default btn-sm run" @click="disposeAndRun">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
-                    />
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                    />
+                  <svg role="img" class="stroke-current fill-none mr-4">
+                    <use href="/asset/sprite.svg#play"></use>
                   </svg>
-                  <span>{{ $t('editor.run') }}</span>
+                  <span>{{ t('editor.run') }}</span>
                 </a>
               </div>
             </el-header>
@@ -154,7 +108,7 @@
         </el-tab-pane>
 
         <el-tab-pane
-          :label="$t('editor.tabFullCodePreview')"
+          :label="t('editor.tabFullCodePreview')"
           name="full-code"
           :lazy="true"
         >
@@ -165,7 +119,7 @@
               </span>
               <el-switch
                 v-model="fullCodeConfig.minimal"
-                :active-text="$t('editor.minimalBundle')"
+                :active-text="t('editor.minimalBundle')"
                 :inactive-text="''"
               >
               </el-switch>
@@ -183,14 +137,14 @@
           </el-container>
         </el-tab-pane>
 
-        <el-tab-pane :label="$t('editor.tabOptionPreview')" name="full-option">
+        <el-tab-pane :label="t('editor.tabOptionPreview')" name="full-option">
           <div id="option-outline" ref="optionOutline"></div>
         </el-tab-pane>
 
         <el-tab-pane
           v-if="shared.isPR"
           v-loading="isPRLoading"
-          :label="$t('editor.prPreview.title')"
+          :label="t('editor.prPreview.title')"
           name="pr-preview"
         >
           <div v-if="pr" id="pr-preview" ref="prPreview">
@@ -201,15 +155,17 @@
               :column="4"
               border
             >
-              <a
-                slot="title"
-                class="pr-title"
-                ref="prTitle"
-                target="_blank"
-                :href="pr.html_url"
-                >(#{{ pr.number }}) {{ pr.title }}</a
-              >
-              <el-descriptions-item :label="$t('editor.prPreview.author')">
+              <template #title>
+                <a
+                  class="pr-title"
+                  ref="prTitle"
+                  target="_blank"
+                  :href="pr.html_url"
+                >
+                  (#{{ pr.number }}) {{ pr.title }}
+                </a>
+              </template>
+              <el-descriptions-item :label="t('editor.prPreview.author')">
                 <a
                   target="_blank"
                   :href="pr.user.html_url"
@@ -219,7 +175,7 @@
                   <span>{{ pr.user.login }}</span>
                 </a>
               </el-descriptions-item>
-              <el-descriptions-item :label="$t('editor.prPreview.fromBranch')">
+              <el-descriptions-item :label="t('editor.prPreview.fromBranch')">
                 <a
                   target="_blank"
                   :href="pr.head.repo.html_url + '/tree/' + pr.head.ref"
@@ -228,7 +184,7 @@
                   {{ pr.head.ref }}
                 </a>
               </el-descriptions-item>
-              <el-descriptions-item :label="$t('editor.prPreview.toBranch')">
+              <el-descriptions-item :label="t('editor.prPreview.toBranch')">
                 <a
                   target="_blank"
                   :href="pr.base.repo.html_url + '/tree/' + pr.base.ref"
@@ -237,7 +193,7 @@
                   {{ pr.base.ref }}
                 </a>
               </el-descriptions-item>
-              <el-descriptions-item :label="$t('editor.prPreview.milestone')">
+              <el-descriptions-item :label="t('editor.prPreview.milestone')">
                 <a
                   v-if="pr.milestone"
                   target="_blank"
@@ -248,7 +204,7 @@
                 <template v-else>-</template>
               </el-descriptions-item>
               <el-descriptions-item
-                :label="$t('editor.prPreview.labels')"
+                :label="t('editor.prPreview.labels')"
                 :span="4"
               >
                 <el-tag
@@ -262,7 +218,7 @@
                 >
               </el-descriptions-item>
               <el-descriptions-item
-                :label="$t('editor.prPreview.changes')"
+                :label="t('editor.prPreview.changes')"
                 :span="4"
               >
                 <el-descriptions
@@ -272,33 +228,33 @@
                   :colon="false"
                 >
                   <el-descriptions-item
-                    :label="$t('editor.prPreview.addedLines')"
+                    :label="t('editor.prPreview.addedLines')"
                   >
                     <span>
                       {{ pr.additions }}
                     </span>
                   </el-descriptions-item>
                   <el-descriptions-item
-                    :label="$t('editor.prPreview.removedLines')"
+                    :label="t('editor.prPreview.removedLines')"
                   >
                     <span>
                       {{ pr.deletions }}
                     </span>
                   </el-descriptions-item>
                   <el-descriptions-item
-                    :label="$t('editor.prPreview.changedFiles')"
+                    :label="t('editor.prPreview.changedFiles')"
                   >
                     <a :href="pr.html_url + '/files'" target="_blank">
                       {{ pr.changed_files }}
                     </a>
                   </el-descriptions-item>
-                  <el-descriptions-item :label="$t('editor.prPreview.commits')">
+                  <el-descriptions-item :label="t('editor.prPreview.commits')">
                     <a :href="pr.html_url + '/commits'" target="_blank">
                       {{ pr.commits }}
                     </a>
                   </el-descriptions-item>
                   <el-descriptions-item
-                    :label="$t('editor.prPreview.latestCommit')"
+                    :label="t('editor.prPreview.latestCommit')"
                   >
                     <a
                       :href="pr.html_url + '/commits/' + pr.head.sha"
@@ -310,22 +266,27 @@
                 </el-descriptions>
               </el-descriptions-item>
               <el-descriptions-item :span="4">
-                <span slot="label">
-                  {{ $t('editor.prPreview.review') }}
-                  <i
-                    v-if="isPRReviewLoading"
-                    class="el-icon-loading"
-                    style="margin-left: 5px"
-                  ></i>
-                </span>
+                <template #label>
+                  <span>
+                    {{ t('editor.prPreview.review') }}
+                    <svg
+                      role="img"
+                      v-if="isPRReviewLoading"
+                      class="icon"
+                      style="margin-left: 5px"
+                    >
+                      <use href="/asset/sprite.svg#loading"></use>
+                    </svg>
+                  </span>
+                </template>
                 <span v-if="isPRReviewLoading">{{
-                  $t('editor.prPreview.loadingReview')
+                  t('editor.prPreview.loadingReview')
                 }}</span>
                 <span v-else-if="isPRReviewLoading === false">{{
-                  $t('editor.prPreview.reviewLoadFailed')
+                  t('editor.prPreview.reviewLoadFailed')
                 }}</span>
                 <span v-else-if="!prLatestReview">{{
-                  $t('editor.prPreview.noReview')
+                  t('editor.prPreview.noReview')
                 }}</span>
                 <el-descriptions
                   v-else
@@ -335,7 +296,7 @@
                   :colon="false"
                 >
                   <el-descriptions-item
-                    :label="$t('editor.prPreview.reviewedBy')"
+                    :label="t('editor.prPreview.reviewedBy')"
                   >
                     <a
                       target="_blank"
@@ -350,43 +311,46 @@
                     </a>
                   </el-descriptions-item>
                   <el-descriptions-item
-                    :label="$t('editor.prPreview.reviewedAt')"
+                    :label="t('editor.prPreview.reviewedAt')"
                   >
                     {{ new Date(prLatestReview.submitted_at).toLocaleString() }}
                   </el-descriptions-item>
                   <el-descriptions-item
-                    :label="$t('editor.prPreview.reviewState')"
+                    :label="t('editor.prPreview.reviewState')"
                   >
                     {{ prLatestReview.state }}
                   </el-descriptions-item>
                   <el-descriptions-item
-                    :label="$t('editor.prPreview.reviewComment')"
+                    :label="t('editor.prPreview.reviewComment')"
                     :span="3"
                   >
                     <a :href="prLatestReview.html_url" target="_blank">
                       {{
-                        prLatestReview.body || $t('editor.prPreview.noComment')
+                        prLatestReview.body || t('editor.prPreview.noComment')
                       }}
                     </a>
                   </el-descriptions-item>
                 </el-descriptions>
               </el-descriptions-item>
               <el-descriptions-item
-                :label="$t('editor.prPreview.diff')"
+                :label="t('editor.prPreview.diff')"
                 :span="4"
               >
                 <details @toggle="$event.target.open && loadPRDiff()">
                   <summary style="display: revert; cursor: pointer">
-                    {{ $t('editor.prPreview.viewDiff') }}
-                    <i
+                    {{ t('editor.prPreview.viewDiff') }}
+                    <svg
+                      role="img"
                       v-if="isPRDiffLoading"
-                      class="el-icon-loading"
+                      class="icon"
                       style="margin-left: 5px"
-                    ></i>
+                    >
+                      <use href="/asset/sprite.svg#loading"></use>
+                    </svg>
                   </summary>
                   <pre
                     class="pr-diff"
-                  ><span v-if="isPRDiffLoading">{{ $t('editor.prPreview.loadingDiff') }}</span><span v-if="isPRDiffLoading === false">{{ $t('editor.prPreview.diffLoadFailed') }}</span><div ref="prDiff"></div></pre>
+                  ><span v-if="isPRDiffLoading">{{ t('editor.prPreview.loadingDiff') }}</span><span v-if="isPRDiffLoading === false">{{ t('editor.prPreview.diffLoadFailed') }}</span><div ref="prDiff"></div></pre>
                 </details>
               </el-descriptions-item>
             </el-descriptions>
@@ -414,423 +378,429 @@
   </div>
 </template>
 
-<script>
-import CodeAce from './CodeAce.vue';
-import CodeMonaco from './CodeMonaco.vue';
-import FullCodePreview from './FullCodePreview.vue';
-import Preview from './Preview.vue';
+<script setup>
+import { mount } from '@lang/object-visualizer';
+import { compareVersions } from 'compare-versions';
+import {
+  computed,
+  nextTick,
+  onMounted,
+  reactive,
+  ref,
+  useTemplateRef,
+  watch
+} from 'vue';
+import { buildExampleCode, collectDeps } from '../../common/buildCode';
+import { gotoURL } from '../common/route';
 import {
-  store,
+  CODE_CHANGED_FLAG,
+  getExampleConfig,
   loadExampleCode,
   parseSourceCode,
-  getExampleConfig,
-  CODE_CHANGED_FLAG
+  store
 } from '../common/store';
-import { collectDeps, buildExampleCode } from '../../common/buildCode';
-import { gotoURL } from '../common/route';
-import { mount } from '@lang/object-visualizer';
-import { compareVersions } from 'compare-versions';
+import CodeAce from './CodeAce.vue';
+import CodeMonaco from './CodeMonaco.vue';
+import FullCodePreview from './FullCodePreview.vue';
+import Preview from './Preview.vue';
 
-import './object-visualizer.css';
+import { ElMessageBox } from 'element-plus';
+import { useI18n } from 'vue-i18n';
 import { getScriptURLs, URL_PARAMS } from '../common/config';
 import { formatCode, loadScriptsAsync } from '../common/helper';
+import './object-visualizer.css';
 import openWithCodePen from './sandbox/openwith/codepen';
 import openWithCodeSandbox from './sandbox/openwith/codesandbox';
 
-export default {
-  components: {
-    CodeAce,
-    CodeMonaco,
-    FullCodePreview,
-    Preview
-  },
-
-  data() {
-    return {
-      leftContainerSize: 40,
-      shared: store,
-      initialCode: '',
-
-      currentTab: 'code-editor',
-
-      fullCode: '',
-
-      exampleConfig: getExampleConfig(),
+const { t } = useI18n();
+
+const shared = reactive(store);
+
+const optionOutline = useTemplateRef('optionOutline');
+const prPreview = useTemplateRef('prPreview');
+const prTitle = useTemplateRef('prTitle');
+const prDiff = useTemplateRef('prDiff');
+const preview = useTemplateRef('preview');
+
+const leftContainerSize = ref(40);
+const initialCode = ref('');
+const currentTab = ref('code-editor');
+const fullCode = ref('');
+const exampleConfig = ref(getExampleConfig());
+const fullCodeConfig = ref({
+  minimal: false,
+  esm: true,
+  node: false // If is in node
+});
+const formatterReady = ref(false);
+const pr = ref(null);
+const isPRLoading = ref(false);
+const prLatestReview = ref(null);
+const isPRReviewLoading = ref(false);
+const isPRDiffLoading = ref(false);
+const draggingMouseDown = ref(false);
+
+const hasTs = computed(() => {
+  return exampleConfig.value && exampleConfig.value.ts;
+});
+
+const hasVersionSince = computed(() => {
+  return (
+    exampleConfig.value &&
+    exampleConfig.value.since &&
+    compareVersions(shared.echartsFullVersion, exampleConfig.value.since) >= 0
+  );
+});
+
+const versionSinceBanner = computed(() => {
+  return (
+    t('editor.bannerVersionRequire') + ' v' + exampleConfig.value.since + '+'
+  );
+});
+
+onMounted(() => {
+  if (shared.isMobile) {
+    leftContainerSize.value = 0;
+    loadExampleCode().then((code) => {
+      // No editor available. Set to runCode directly.
+      shared.runCode = parseSourceCode(code);
+    });
+  } else {
+    loadExampleCode().then((code) => {
+      // Only set the code in editor. editor will sync to the store.
+      initialCode.value = parseSourceCode(code);
+      if (shared.initialCode !== CODE_CHANGED_FLAG) {
+        shared.initialCode = initialCode.value;
+      }
+    });
 
-      fullCodeConfig: {
-        minimal: false,
-        esm: true,
-        node: false // If is in node
-      },
+    window.addEventListener('mousemove', (e) => {
+      if (draggingMouseDown.value) {
+        let percentage = e.clientX / window.innerWidth;
+        percentage = Math.min(0.9, Math.max(0.1, percentage));
+        leftContainerSize.value = percentage * 100;
+      }
+    });
 
-      formatterReady: false,
+    window.addEventListener('mouseup', () => {
+      draggingMouseDown.value = false;
+    });
 
-      pr: null,
-      isPRLoading: false,
-      prLatestReview: null,
-      isPRReviewLoading: false,
-      isPRDiffLoading: false,
+    // Save code as a sharable link when ctrl/cmd + s is pressed.
+    window.addEventListener('keydown', (e) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+        const previewRef = preview.value;
+        previewRef && previewRef.share();
+        e.preventDefault();
+      }
+    });
+
+    window.addEventListener('beforeunload', (e) => {
+      // no repeated prompt if already confirmed or the code is not changed
+      if (
+        window.__EDITOR_NO_LEAVE_CONFIRMATION__ ||
+        shared.sourceCode === initialCode.value
+      ) {
+        return;
+      }
+      // prevent the code from being lost accidentally due to refreshing or closing the page
+      e.preventDefault();
+      e.returnValue = '';
+    });
 
-      draggingMouseDown: false
-    };
-  },
+    // ensure prettier
+    shared.typeCheck || prepareFormatter();
+  }
+});
 
-  computed: {
-    hasTs() {
-      return this.exampleConfig && this.exampleConfig.ts;
-    },
+function toExternalEditor(vendor) {
+  const previewRef = preview.value;
+  if (!previewRef) {
+    return;
+  }
+  const assets = previewRef.getAssets();
+  const vendors = {
+    CodePen: openWithCodePen,
+    CodeSandbox: openWithCodeSandbox
+  };
+  vendors[vendor](
+    exampleConfig.value && exampleConfig.value.title,
+    assets.scripts,
+    assets.css
+  );
+}
 
-    hasVersionSince() {
-      return this.exampleConfig && this.exampleConfig.since
-        && compareVersions(this.shared.echartsFullVersion, this.exampleConfig.since) >= 0;
-    },
+function disposeAndRun() {
+  preview.value.refreshAll();
+}
 
-    versionSinceBanner() {
-      return this.$t('editor.bannerVersionRequire') + ' v' + this.exampleConfig.since + '+';
-    },
-  },
+function updateFullCode() {
+  const option = preview.value.getOption();
+  if (!option) {
+    return;
+  }
+  const deps = collectDeps(option);
+  deps.push(shared.renderer === 'svg' ? 'SVGRenderer' : 'CanvasRenderer');
+  fullCode.value = buildExampleCode(shared.sourceCode, deps, {
+    minimal: fullCodeConfig.value.minimal,
+    ts: shared.typeCheck,
+    esm: fullCodeConfig.value.esm,
+    theme: shared.darkMode ? 'dark' : shared.theme,
+    renderer: shared.renderer,
+    useDirtyRect: shared.useDirtyRect,
+    ROOT_PATH: shared.cdnRoot,
+    CDN_PATH: shared.cdnPath,
+    isZHLang: shared.locale === 'zh'
+  });
+  formatCode(fullCode.value).then((code) => {
+    fullCode.value = code;
+  });
+}
 
-  mounted() {
-    if (store.isMobile) {
-      this.leftContainerSize = 0;
-      loadExampleCode().then((code) => {
-        // No editor available. Set to runCode directly.
-        store.runCode = parseSourceCode(code);
-      });
-    } else {
-      loadExampleCode().then((code) => {
-        // Only set the code in editor. editor will sync to the store.
-        this.initialCode = parseSourceCode(code);
-        if (store.initialCode !== CODE_CHANGED_FLAG) {
-          store.initialCode = this.initialCode;
+function updateOptionOutline() {
+  const option = Object.freeze(preview.value.getOption());
+  if (!option) {
+    return;
+  }
+  const tipTitle = t('editor.tooltip.gotoDoc');
+  const lang = shared.locale;
+  mount(option, optionOutline.value, {
+    getKeys(object) {
+      return Object.keys(object).filter((key) => {
+        if (Array.isArray(object[key]) && !object[key].length) {
+          return false;
         }
+        return true;
       });
+    },
+    renderName(name, path) {
+      let obj = option;
+      let hash = [];
+      let isTopLevel = true;
+      for (let i = 0; i < path.length; i++) {
+        let key = path[i];
+        obj = obj[key];
+
+        if (obj == null) {
+          hash.push(key);
+          break;
+        }
 
-      window.addEventListener('mousemove', (e) => {
-        if (this.draggingMouseDown) {
-          let percentage = e.clientX / window.innerWidth;
-          percentage = Math.min(0.9, Math.max(0.1, percentage));
-          this.leftContainerSize = percentage * 100;
+        if (Array.isArray(obj) && isTopLevel) {
+          // Get type of component / series.
+          const item = obj[path[i + 1]];
+          const type = item && item.type;
+          if (type) {
+            key += '-' + type;
+            i++;
+            obj = item;
+          }
+        } else if (!isNaN(key)) {
+          // Ignore data[0]
+          continue;
         }
-      });
+        hash.push(key);
+      }
 
-      window.addEventListener('mouseup', () => {
-        this.draggingMouseDown = false;
-      });
+      const isObjOrArray = typeof obj === 'object' && obj != null;
+      const link = hash.includes('bmap')
+        ? 'https://github.com/apache/echarts/blob/release/extension-src/bmap/README.md'
+        : `https://echarts.apache.org/${lang}/option.html#${hash.join('.')}`;
+      return !isObjOrArray
+        ? `<a href="${link}" target="_blank" title="${tipTitle}">${name}</a>`
+        : `${name}<a href="${link}" target="_blank" title="${tipTitle}"><i><svg role="img" class="icon icon-document"><use href="/asset/sprite.svg#document"></use></svg></i></a>`;
+    },
+    expandOnCreatedAndUpdated(path) {
+      return path.length === 0 || (path[0] === 'series' && path.length <= 1);
+    }
+  });
+}
 
-      // Save code as a sharable link when ctrl/cmd + s is pressed.
-      window.addEventListener('keydown', (e) => {
-        if ((e.ctrlKey || e.metaKey) && e.key === 's') {
-          const previewRef = this.$refs.preview;
-          previewRef && previewRef.share();
-          e.preventDefault();
-        }
-      });
+function updateTabContent(tab) {
+  if (tab === 'full-code') {
+    updateFullCode();
+  } else if (tab === 'full-option') {
+    updateOptionOutline();
+  } else if (tab === 'pr-preview') {
+    preparePRPreview();
+  }
+}
 
-      window.addEventListener('beforeunload', (e) => {
-        // no repeated prompt if already confirmed or the code is not changed
-        if (
-          window.__EDITOR_NO_LEAVE_CONFIRMATION__ ||
-          store.sourceCode === this.initialCode
-        ) {
-          return;
-        }
-        // prevent the code from being lost accidentally due to refreshing or closing the page
-        e.preventDefault();
-        e.returnValue = '';
-      });
+function changeLang(lang) {
+  if ((URL_PARAMS.lang || 'js').toLowerCase() !== lang) {
+    if (!initialCode.value || shared.sourceCode === initialCode.value) {
+      gotoURL({ lang });
+    } else {
+      ElMessageBox.confirm(t('editor.codeChangedConfirm'), '', {
+        confirmButtonText: t('editor.confirmButtonText'),
+        cancelButtonText: t('editor.cancelButtonText'),
+        type: 'warning'
+      })
+        .then(() => {
+          // already confirmed
+          window.__EDITOR_NO_LEAVE_CONFIRMATION__ = true;
+          gotoURL({ lang });
+        })
+        .catch(() => {});
+    }
+  }
+}
 
-      // ensure prettier
-      store.typeCheck || this.prepareFormatter();
+function format() {
+  if (!formatterReady.value) {
+    console.warn('formatter is not ready yet!');
+    return;
+  }
+  formatCode(shared.sourceCode).then((code) => {
+    if (code === initialCode.value && shared.sourceCode !== initialCode.value) {
+      // If formatted code is the same as initial code but source code is changed,
+      // should also trigger update
+      initialCode.value = shared.sourceCode;
     }
-  },
+    nextTick(() => {
+      initialCode.value = code;
+    });
+  });
+}
 
-  methods: {
-    toExternalEditor(vendor) {
-      const previewRef = this.$refs.preview;
-      if (!previewRef) {
-        return;
-      }
-      const assets = previewRef.getAssets();
-      const vendors = {
-        CodePen: openWithCodePen,
-        CodeSandbox: openWithCodeSandbox
-      };
-      vendors[vendor](
-        this.exampleConfig && this.exampleConfig.title,
-        assets.scripts,
-        assets.css
-      );
-    },
-    disposeAndRun() {
-      this.$refs.preview.refreshAll();
-    },
-    updateFullCode() {
-      const option = this.$refs.preview.getOption();
-      if (!option) {
-        return;
-      }
-      const deps = collectDeps(option);
-      deps.push(store.renderer === 'svg' ? 'SVGRenderer' : 'CanvasRenderer');
-      this.fullCode = buildExampleCode(store.sourceCode, deps, {
-        minimal: this.fullCodeConfig.minimal,
-        ts: store.typeCheck,
-        esm: this.fullCodeConfig.esm,
-        // legacy: true,
-        theme: store.darkMode ? 'dark' : store.theme,
-        renderer: store.renderer,
-        useDirtyRect: store.useDirtyRect,
-        ROOT_PATH: store.cdnRoot,
-        CDN_PATH: store.cdnPath,
-        isZHLang: this.$i18n.locale === 'zh'
-      });
-      // Format
-      formatCode(this.fullCode).then((code) => {
-        this.fullCode = code;
-      });
-    },
-    updateOptionOutline() {
-      const option = Object.freeze(this.$refs.preview.getOption());
-      if (!option) {
-        return;
-      }
-      const tipTitle = this.$t('editor.tooltip.gotoDoc');
-      const lang = this.$i18n.locale;
-      mount(option, this.$refs.optionOutline, {
-        getKeys(object) {
-          return Object.keys(object).filter((key) => {
-            if (Array.isArray(object[key]) && !object[key].length) {
-              return false;
-            }
-            return true;
-          });
-        },
-        renderName(name, path) {
-          let obj = option;
-          let hash = [];
-          let isTopLevel = true;
-          for (let i = 0; i < path.length; i++) {
-            let key = path[i];
-            obj = obj[key];
-
-            if (obj == null) {
-              hash.push(key);
-              break;
-            }
-
-            if (Array.isArray(obj) && isTopLevel) {
-              // Get type of component / series.
-              const item = obj[path[i + 1]];
-              const type = item && item.type;
-              if (type) {
-                key += '-' + type;
-                i++;
-                obj = item;
-              }
-            } else if (!isNaN(key)) {
-              // Ignore data[0]
-              continue;
-            }
-            hash.push(key);
-          }
+function prepareFormatter() {
+  return formatCode(' ').then(() => {
+    formatterReady.value = true;
+  });
+}
 
-          const isObjOrArray = typeof obj === 'object' && obj != null;
-          const link = hash.includes('bmap')
-            ? 'https://github.com/apache/echarts/blob/release/extension-src/bmap/README.md'
-            : `https://echarts.apache.org/${lang}/option.html#${hash.join(
-                '.'
-              )}`;
-          return !isObjOrArray
-            ? `<a href="${link}" target="_blank" title="${tipTitle}">${name}</a>`
-            : `${name}<a href="${link}" target="_blank" title="${tipTitle}"><i class="el-icon-document"></i></a>`;
-        },
-        expandOnCreatedAndUpdated(path) {
-          return (
-            path.length === 0 || (path[0] === 'series' && path.length <= 1)
-          );
-        }
-      });
-    },
-    updateTabContent(tab) {
-      if (tab === 'full-code') {
-        this.updateFullCode();
-      } else if (tab === 'full-option') {
-        this.updateOptionOutline();
-      } else if (tab === 'pr-preview') {
-        this.preparePRPreview();
-      }
-    },
-    changeLang(lang) {
-      if ((URL_PARAMS.lang || 'js').toLowerCase() !== lang) {
-        if (!this.initialCode || store.sourceCode === this.initialCode) {
-          gotoURL({ lang });
-        } else {
-          this.$confirm(this.$t('editor.codeChangedConfirm'), '', {
-            confirmButtonText: this.$t('editor.confirmButtonText'),
-            cancelButtonText: this.$t('editor.cancelButtonText'),
-            type: 'warning'
-          })
-            .then(() => {
-              // already confirmed
-              window.__EDITOR_NO_LEAVE_CONFIRMATION__ = true;
-              gotoURL({ lang });
-            })
-            .catch(() => {});
-        }
-      }
-    },
-    format() {
-      if (!this.formatterReady) {
-        console.warn('formatter is not ready yet!');
-        return;
-      }
-      formatCode(store.sourceCode).then((code) => {
-        if (
-          code === this.initialCode &&
-          store.sourceCode !== this.initialCode
-        ) {
-          // If formatted code is the same as initial code but source code is changed,
-          // should also trigger update
-          this.initialCode = store.sourceCode;
-        }
-        this.$nextTick(() => {
-          this.initialCode = code;
-        });
-      });
-    },
-    prepareFormatter() {
-      return formatCode(' ').then(() => {
-        this.formatterReady = true;
-      });
-    },
-    onPreviewReady() {
-      this.updateTabContent(this.currentTab);
+function onPreviewReady() {
+  updateTabContent(currentTab.value);
+}
+
+function preparePRPreview() {
+  if (!shared.isPR || isPRLoading.value || pr.value) {
+    return;
+  }
+  isPRLoading.value = true;
+  const prURL = `https://api.github.com/repos/apache/echarts/pulls/${shared.prNumber}`;
+  $.ajax({
+    url: prURL,
+    headers: {
+      Accept: 'application/json'
     },
-    preparePRPreview() {
-      if (!store.isPR || this.isPRLoading || this.pr) {
-        return;
-      }
-      this.isPRLoading = true;
-      const prURL = `https://api.github.com/repos/apache/echarts/pulls/${store.prNumber}`;
+    dataType: 'json',
+    success: (prContent) => {
+      pr.value = prContent;
+      isPRReviewLoading.value = true;
       $.ajax({
-        url: prURL,
+        url: prURL + '/reviews?per_page=100',
         headers: {
           Accept: 'application/json'
         },
         dataType: 'json',
-        success: (pr) => {
-          this.pr = pr;
-          this.isPRReviewLoading = true;
-          $.ajax({
-            url: prURL + '/reviews?per_page=100',
-            headers: {
-              Accept: 'application/json'
-            },
-            dataType: 'json',
-            success: (reviews) => {
-              const prLatestReview = (this.prLatestReview =
-                reviews[reviews.length - 1]);
-              if (
-                prLatestReview &&
-                prLatestReview.state === 'COMMENTED' &&
-                !prLatestReview.body
-              ) {
-                $.ajax({
-                  url:
-                    prURL +
-                    '/reviews/' +
-                    prLatestReview.id +
-                    '/comments?direction=desc&sort=created&per_page=100',
-                  headers: {
-                    Accept: 'application/json'
-                  },
-                  dataType: 'json',
-                  success: (comments) => {
-                    const comment = comments[0];
-                    prLatestReview.body = comment.body;
-                    prLatestReview.submitted_at = comment.created_at;
-                    prLatestReview.html_url = comment.html_url;
-                  },
-                  error: (xhr, status, err) => {
-                    console.error('failed to fetch PR review comment', err);
-                  },
-                  complete: () => {
-                    this.isPRReviewLoading = 0;
-                  }
-                });
-              } else {
-                this.isPRReviewLoading = 0;
+        success: (reviews) => {
+          const prLatestReviewContent = (prLatestReview.value =
+            reviews[reviews.length - 1]);
+          if (
+            prLatestReviewContent &&
+            prLatestReviewContent.state === 'COMMENTED' &&
+            !prLatestReviewContent.body
+          ) {
+            $.ajax({
+              url:
+                prURL +
+                '/reviews/' +
+                prLatestReviewContent.id +
+                '/comments?direction=desc&sort=created&per_page=100',
+              headers: {
+                Accept: 'application/json'
+              },
+              dataType: 'json',
+              success: (comments) => {
+                const comment = comments[0];
+                prLatestReviewContent.body = comment.body;
+                prLatestReviewContent.submitted_at = comment.created_at;
+                prLatestReviewContent.html_url = comment.html_url;
+              },
+              error: (xhr, status, err) => {
+                console.error('failed to fetch PR review comment', err);
+              },
+              complete: () => {
+                isPRReviewLoading.value = 0;
               }
-            },
-            error: (xhr, status, err) => {
-              this.isPRReviewLoading = false;
-              console.error('failed to fetch PR reviews', err);
-            }
-          });
-        },
-        error(xhr, status, err) {
-          console.error('failed to fetch PR info', err);
-        },
-        complete: () => {
-          this.isPRLoading = false;
-        }
-      });
-    },
-    loadPRDiff() {
-      if (this.isPRDiffLoading || this.isPRDiffLoading === 0) {
-        return;
-      }
-      this.isPRDiffLoading = true;
-      $.ajax({
-        url: `https://api.github.com/repos/apache/echarts/pulls/${store.prNumber}`,
-        headers: {
-          Accept: 'application/vnd.github.v3.diff'
-        },
-        dataType: 'text',
-        success: (diff) => {
-          const SCRIPT_URLS = getScriptURLs(store.locale);
-          const highlightjsDir = SCRIPT_URLS.highlightjsDir;
-          loadScriptsAsync([
-            highlightjsDir + '/styles/github.min.css',
-            highlightjsDir + '/highlight.min.js',
-            highlightjsDir + '/languages/diff.min.js'
-          ])
-            .then(() => {
-              return hljs.highlight(diff, {
-                language: 'diff'
-              }).value;
-            })
-            .catch((err) => {
-              console.error('failed to load PR diff', err);
-            })
-            .then((diff) => {
-              this.isPRDiffLoading = diff ? 0 : false;
-              diff && (this.$refs.prDiff.innerHTML = diff);
             });
+          } else {
+            isPRReviewLoading.value = 0;
+          }
         },
         error: (xhr, status, err) => {
-          this.isPRDiffLoading = false;
-          console.error('failed to fetch PR diff', err);
+          isPRReviewLoading.value = false;
+          console.error('failed to fetch PR reviews', err);
         }
       });
+    },
+    error(xhr, status, err) {
+      console.error('failed to fetch PR info', err);
+    },
+    complete: () => {
+      isPRLoading.value = false;
     }
-  },
+  });
+}
 
-  watch: {
-    currentTab(tab) {
-      this.updateTabContent(tab);
+function loadPRDiff() {
+  if (isPRDiffLoading.value || isPRDiffLoading.value === 0) {
+    return;
+  }
+  isPRDiffLoading.value = true;
+  $.ajax({
+    url: `https://api.github.com/repos/apache/echarts/pulls/${shared.prNumber}`,
+    headers: {
+      Accept: 'application/vnd.github.v3.diff'
     },
-    'shared.runHash'() {
-      this.updateTabContent(this.currentTab);
+    dataType: 'text',
+    success: (diff) => {
+      const SCRIPT_URLS = getScriptURLs(shared.locale);
+      const highlightjsDir = SCRIPT_URLS.highlightjsDir;
+      loadScriptsAsync([
+        highlightjsDir + '/styles/github.min.css',
+        highlightjsDir + '/highlight.min.js',
+        highlightjsDir + '/languages/diff.min.js'
+      ])
+        .then(() => {
+          return hljs.highlight(diff, {
+            language: 'diff'
+          }).value;
+        })
+        .catch((err) => {
+          console.error('failed to load PR diff', err);
+        })
+        .then((diff) => {
+          isPRDiffLoading.value = diff ? 0 : false;
+          diff && (prDiff.value.innerHTML = diff);
+        });
     },
-    fullCodeConfig: {
-      deep: true,
-      handler() {
-        this.updateFullCode();
-      }
+    error: (xhr, status, err) => {
+      isPRDiffLoading.value = false;
+      console.error('failed to fetch PR diff', err);
     }
+  });
+}
+
+watch(currentTab, (tab) => {
+  updateTabContent(tab);
+});
+
+watch(
+  () => shared.runHash,
+  () => {
+    updateTabContent(currentTab.value);
   }
-};
+);
+
+watch(
+  fullCodeConfig,
+  () => {
+    updateFullCode();
+  },
+  { deep: true }
+);
 </script>
 
 <style lang="scss">
@@ -968,7 +938,7 @@ $handler-width: 15px;
   font-family: 'Source Code Pro', 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas',
     monospace;
 
-  .el-icon-document {
+  .icon-document {
     margin-left: 5px;
     font-size: 1rem;
 
@@ -1173,4 +1143,11 @@ $handler-width: 15px;
 
   background: $clr-bg;
 }
+.fill-none {
+  fill: none;
+}
+
+.stroke-current {
+  stroke: currentColor;
+}
 </style>
diff --git a/src/editor/FullCodePreview.vue b/src/editor/FullCodePreview.vue
index 44d268d4..3e1b4a66 100644
--- a/src/editor/FullCodePreview.vue
+++ b/src/editor/FullCodePreview.vue
@@ -1,82 +1,89 @@
 <template>
-  <div class="full-code-preview" v-loading="loading"></div>
+  <div ref="full-code" class="full-code-preview" v-loading="loading"></div>
 </template>
 
-<script>
+<script setup>
+import {
+  ref,
+  onMounted,
+  onBeforeUnmount,
+  watch,
+  useTemplateRef,
+  reactive
+} from 'vue';
 import { loadScriptsAsync } from '../common/helper';
 import { store } from '../common/store';
 import { getScriptURLs } from '../common/config';
 
+const { code } = defineProps({
+  code: String
+});
+
+const shared = reactive(store);
+
+const fullCodeElement = useTemplateRef('full-code');
+
+const loading = ref(false);
+const editor = ref(null);
+
 function ensureACE() {
   if (typeof ace === 'undefined') {
-    const SCRIPT_URLS = getScriptURLs(store.locale);
+    const SCRIPT_URLS = getScriptURLs(shared.locale);
 
     return loadScriptsAsync([SCRIPT_URLS.aceDir + '/ace.js']);
   }
   return Promise.resolve();
 }
 
-export default {
-  props: ['code'],
-
-  data() {
-    return {
-      shared: store,
-      loading: false
-    };
-  },
-
-  mounted() {
-    this.loading = true;
-    ensureACE().then(() => {
-      this.loading = false;
-      const editor = ace.edit(this.$el);
-      editor
-        .getSession()
-        .setMode(
-          store.typeCheck ? 'ace/mode/typescript' : 'ace/mode/javascript'
-        );
-      // https://stackoverflow.com/questions/32806060/is-there-a-programmatic-way-to-hide-the-cursor-in-ace-editor
-      editor.setOptions({
-        readOnly: true,
-        showLineNumbers: false,
-        showFoldWidgets: false,
-        highlightActiveLine: false,
-        highlightGutterLine: false
-      });
-      // editor.renderer.setShowGutter(false);
-      editor.renderer.$cursorLayer.element.style.display = 'none';
+onMounted(() => {
+  loading.value = true;
+  ensureACE().then(() => {
+    loading.value = false;
+    const aceEditor = ace.edit(fullCodeElement.value);
+    aceEditor
+      .getSession()
+      .setMode(
+        shared.typeCheck ? 'ace/mode/typescript' : 'ace/mode/javascript'
+      );
+    // https://stackoverflow.com/questions/32806060/is-there-a-programmatic-way-to-hide-the-cursor-in-ace-editor
+    aceEditor.setOptions({
+      readOnly: true,
+      showLineNumbers: false,
+      showFoldWidgets: false,
+      highlightActiveLine: false,
+      highlightGutterLine: false
+    });
+    // editor.renderer.setShowGutter(false);
+    aceEditor.renderer.$cursorLayer.element.style.display = 'none';
 
-      this._editor = editor;
+    editor.value = aceEditor;
 
-      this.setCode(this.code);
-    });
-  },
+    setCode(code);
+  });
+});
 
-  methods: {
-    setCode(code) {
-      if (this._editor) {
-        this._editor.setValue(code);
-        this._editor.selection.setSelectionRange({
-          start: {
-            row: 1,
-            column: 4
-          },
-          end: {
-            row: 1,
-            column: 4
-          }
-        });
+function setCode(code) {
+  if (editor.value) {
+    editor.value.setValue(code);
+    editor.value.selection.setSelectionRange({
+      start: {
+        row: 1,
+        column: 4
+      },
+      end: {
+        row: 1,
+        column: 4
       }
-    }
-  },
+    });
+  }
+}
 
-  watch: {
-    code(newVal) {
-      this.setCode(newVal);
-    }
+watch(
+  () => code,
+  (newVal) => {
+    setCode(newVal);
   }
-};
+);
 </script>
 
 <style lang="scss">
diff --git a/src/editor/Preview.vue b/src/editor/Preview.vue
index 6fd8175b..18f06f11 100644
--- a/src/editor/Preview.vue
+++ b/src/editor/Preview.vue
@@ -6,7 +6,7 @@
           class="dark-mode"
           v-model="shared.darkMode"
           active-color="#181432"
-          :active-text="$t('editor.darkMode')"
+          :active-text="t('editor.darkMode')"
           :inactive-text="''"
         >
         </el-switch>
@@ -14,7 +14,7 @@
           v-if="!isGL"
           class="enable-decal"
           v-model="shared.enableDecal"
-          :active-text="$t('editor.enableDecal')"
+          :active-text="t('editor.enableDecal')"
           :inactive-text="''"
         >
         </el-switch>
@@ -26,10 +26,10 @@
         >
           <div class="render-config-container">
             <div class="cfg-renderer">
-              <label class="tool-label">{{ $t('editor.renderer') }}</label>
+              <label class="tool-label">{{ t('editor.renderer') }}</label>
               <el-radio-group
                 v-model="shared.renderer"
-                size="mini"
+                size="small"
                 style="text-transform: uppercase"
               >
                 <el-radio-button label="svg" />
@@ -39,23 +39,27 @@
             <el-switch
               v-if="shared.renderer === 'canvas'"
               v-model="shared.useDirtyRect"
-              :active-text="$t('editor.useDirtyRect')"
+              :active-text="t('editor.useDirtyRect')"
               :inactive-text="''"
             />
           </div>
-          <span class="render-config-trigger" slot="reference">
-            <el-button size="mini">
-              {{ $t('editor.renderCfgTitle')
-              }}<i class="el-icon-setting el-icon--right"></i>
-            </el-button>
-          </span>
+          <template #reference>
+            <span class="render-config-trigger">
+              <el-button size="small">
+                {{ t('editor.renderCfgTitle') }}
+                <svg role="img" class="icon ml-4">
+                  <use href="/asset/sprite.svg#setting"></use>
+                </svg>
+              </el-button>
+            </span>
+          </template>
         </el-popover>
         <el-button
           class="random"
           v-if="hasRandomData"
-          size="mini"
+          size="small"
           @click="changeRandomSeed"
-          >{{ $t('editor.randomData') }}</el-button
+          >{{ t('editor.randomData') }}</el-button
         >
         <!-- TODO CSP 问题 -->
         <!-- <el-select
@@ -65,7 +69,7 @@
             'is-nightly': nightly,
             'is-pr': shared.isPR || hasPRVersion
           }"
-          size="mini"
+          size="small"
           id="choose-echarts-version"
           v-model="shared.echartsVersion"
           @change="changeVersion"
@@ -92,7 +96,7 @@
         target="_blank"
         v-if="!inEditor"
         class="edit btn btn-sm"
-        >{{ $t('editor.edit') }}</a
+        >{{ t('editor.edit') }}</a
       >
     </div>
     <div
@@ -106,27 +110,30 @@
       <div class="left-buttons">
         <template v-if="inEditor && !shared.isMobile">
           <el-button
-            icon="el-icon-download"
-            size="mini"
-            @click="download"
-            :title="$t('editor.download') + ' (HTML)'"
+            size="small"
+            @click="downloadExample"
+            :title="t('editor.download') + ' (HTML)'"
           >
-            {{ $t('editor.download') }}
+            <svg role="img" class="icon mr-4">
+              <use href="/asset/sprite.svg#download"></use>
+            </svg>
+            <span>{{ t('editor.download') }}</span>
           </el-button>
-          <el-button
-            @click="screenshot"
-            icon="el-icon-camera-solid"
-            size="mini"
-          >
-            {{ $t('editor.screenshot') }}
+          <el-button @click="screenshot" size="small">
+            <svg role="img" class="icon mr-4">
+              <use href="/asset/sprite.svg#camera"></use>
+            </svg>
+            <span>{{ t('editor.screenshot') }}</span>
           </el-button>
           <el-button
             @click="share"
-            icon="el-icon-share"
-            size="mini"
-            :title="$t('editor.share.tooltip')"
+            size="small"
+            :title="t('editor.share.tooltip')"
           >
-            {{ $t('editor.share.title') }}
+            <svg role="img" class="icon mr-4">
+              <use href="/asset/sprite.svg#share"></use>
+            </svg>
+            <span>{{ t('editor.share.title') }}</span>
           </el-button>
         </template>
       </div>
@@ -144,44 +151,84 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ElMessage } from 'element-plus';
+import debounce from 'lodash/debounce';
+import { gt, rcompare } from 'semver';
+import {
+  computed,
+  onMounted,
+  reactive,
+  ref,
+  toRaw,
+  useTemplateRef,
+  watch
+} from 'vue';
+import { useI18n } from 'vue-i18n';
+import { getScriptURLs, URL_PARAMS } from '../common/config';
+import { compressStr } from '../common/helper';
+import { getURL, gotoURL } from '../common/route';
 import {
   getExampleConfig,
   isGLExample,
+  isValidPRVersion,
   saveExampleCodeToLocal,
   store,
   updateRandomSeed,
-  updateRunHash,
-  isValidPRVersion
+  updateRunHash
 } from '../common/store';
-import { getScriptURLs, URL_PARAMS } from '../common/config';
-import { compressStr } from '../common/helper';
-import { createSandbox } from './sandbox';
-import debounce from 'lodash/debounce';
 import { download } from './downloadExample';
-import { gotoURL, getURL } from '../common/route';
-import { gt, rcompare } from 'semver';
+import { createSandbox } from './sandbox';
+
+const { t } = useI18n();
+
+const { inEditor } = defineProps({
+  inEditor: {
+    type: Boolean
+  }
+});
+
+const emit = defineEmits(['ready']);
 
 const example = getExampleConfig();
-const isGL = 'gl' in URL_PARAMS || isGLExample();
+const isGL = ref('gl' in URL_PARAMS || isGLExample());
 const isLocal = 'local' in URL_PARAMS;
 const isDebug = 'debug' in URL_PARAMS;
 const hasBMap = example && example.tags.indexOf('bmap') >= 0;
 
+const shared = reactive(store);
+
+const chartPanelRef = useTemplateRef('chartPanel');
+
+const debouncedTime = ref(undefined);
+const backgroundColor = ref('');
+const autoRun = ref(true);
+const loading = ref(false);
+const allEChartsVersions = ref([]);
+const nightlyVersions = ref([]);
+const nightly = ref(false);
+const hasPRVersion = ref(false);
+const scripts = ref(null);
+const sandbox = ref(null);
+const debouncedRun = ref(null);
+const css = ref('');
+const prHintTimer = ref(null);
+const isShareBusy = ref(false);
+
 function getScriptURL(link) {
   return isDebug || isLocal ? link.replace('.min.', '.') : link;
 }
 
-function getScripts(nightly) {
-  const SCRIPT_URLS = getScriptURLs(store.locale);
+function getScripts(isNightly) {
+  const SCRIPT_URLS = getScriptURLs(shared.locale);
 
   const echartsDirTpl =
     SCRIPT_URLS[
       isLocal
         ? 'localEChartsDir'
-        : store.isPR
+        : shared.isPR
         ? 'prPreviewEChartsDir'
-        : nightly
+        : isNightly
         ? 'echartsNightlyDir'
         : 'echartsDir'
     ];
@@ -194,13 +241,13 @@ function getScripts(nightly) {
     ? SCRIPT_URLS.localEChartsDir
     : SCRIPT_URLS.latestEChartsDir;
 
-  const code = store.runCode;
+  const code = shared.runCode;
 
   return [
     // echarts
     echartsDir +
       getScriptURL(SCRIPT_URLS.echartsJS) +
-      (store.isPR ? '?_=' + (store.prLatestCommit || Date.now()) : ''),
+      (shared.isPR ? '?_=' + (shared.prLatestCommit || Date.now()) : ''),
     // echarts-gl
     ...(isGL
       ? [
@@ -210,8 +257,8 @@ function getScripts(nightly) {
         ]
       : []),
     // echarts theme
-    ...(!store.darkMode && store.theme
-      ? [echartsDir + `/theme/${store.theme}.js`]
+    ...(!shared.darkMode && shared.theme
+      ? [echartsDir + `/theme/${shared.theme}.js`]
       : []),
     // echarts bmap extension
     ...(hasBMap || /coordinateSystem.*:.*['"]bmap['"]/g.test(code)
@@ -242,52 +289,55 @@ function log(text, type) {
     type = 'info';
   }
   const now = new Date();
-  store.editorStatus.time = [now.getHours(), now.getMinutes(), now.getSeconds()]
+  shared.editorStatus.time = [
+    now.getHours(),
+    now.getMinutes(),
+    now.getSeconds()
+  ]
     .map((t) => (t + '').padStart(2, '0'))
     .join(':');
-  store.editorStatus.message = text;
-  store.editorStatus.type = type;
+  shared.editorStatus.message = text;
+  shared.editorStatus.type = type;
 }
 
 function run(recreateInstance) {
-  if (!store.runCode) {
+  if (!shared.runCode) {
     return;
   }
 
   const runCode = () => {
-    this.sandbox.run(store, recreateInstance);
-
+    sandbox.value.run(toRaw(shared), recreateInstance);
     // Update run hash to let others known chart has been changed.
     updateRunHash();
   };
 
-  const scripts = getScripts(this.nightly);
+  const scriptsVal = getScripts(nightly.value);
   const ECScriptReg = /\/echarts(?:\.min)?\.js/;
   const scriptsChanged =
-    !this.scripts ||
-    scripts.some(
+    !scripts.value ||
+    scriptsVal.some(
       (s) =>
         !ECScriptReg.test(s.src) &&
-        this.scripts.findIndex((s1) => s1.src === s.src) === -1
+        scripts.value.findIndex((s1) => s1.src === s.src) === -1
     );
 
-  if (!this.sandbox || scriptsChanged) {
-    this.loading = true;
+  if (!sandbox.value || scriptsChanged) {
+    loading.value = true;
     let isFirstRun = true;
-    this.dispose();
-    this.sandbox = createSandbox(
-      this.$refs.chartPanel,
-      (this.scripts = scripts),
-      store.isSharedCode,
+    dispose();
+    sandbox.value = createSandbox(
+      chartPanelRef.value,
+      (scripts.value = scriptsVal),
+      shared.isSharedCode,
       () => {
         runCode();
-        this.loading = false;
+        loading.value = false;
       },
       () => {
         // TODO show error hints
         console.error('failed to run sandbox');
-        this.loading = false;
-        this.dispose();
+        loading.value = false;
+        dispose();
       },
       (errMsg) => {
         const infiniteLoopInEditor =
@@ -295,7 +345,7 @@ function run(recreateInstance) {
         const potentialRedirection =
           errMsg && errMsg.indexOf('potential redirection') > -1;
         log(
-          this.$t(
+          t(
             `editor.${
               infiniteLoopInEditor
                 ? 'infiniteLoopInEditor'
@@ -308,19 +358,18 @@ function run(recreateInstance) {
         );
       },
       (updateTime) => {
-        const option = this.getOption();
+        const option = getOption();
         if (
           typeof option.backgroundColor === 'string' &&
           option.backgroundColor !== 'transparent'
         ) {
-          this.backgroundColor = option.backgroundColor;
+          backgroundColor.value = option.backgroundColor;
         } else {
-          this.backgroundColor = '#fff';
+          backgroundColor.value = '#fff';
         }
 
-        log(this.$t('editor.chartOK') + updateTime.toFixed(2) + 'ms');
+        log(t('editor.chartOK') + updateTime.toFixed(2) + 'ms');
 
-        // Find the appropriate throttle time
         const debounceTimeQuantities = [0, 500, 2000, 5000, 10000];
         for (let i = debounceTimeQuantities.length - 1; i >= 0; i--) {
           const quantity = debounceTimeQuantities[i];
@@ -328,23 +377,23 @@ function run(recreateInstance) {
             debounceTimeQuantities[i + 1] || 1000000;
           if (
             updateTime >= quantity &&
-            this.debouncedTime !== preferredDebounceTime
+            debouncedTime.value !== preferredDebounceTime
           ) {
-            this.debouncedRun = debounce(run, preferredDebounceTime, {
+            debouncedRun.value = debounce(run, preferredDebounceTime, {
               trailing: true
             });
-            this.debouncedTime = preferredDebounceTime;
+            debouncedTime.value = preferredDebounceTime;
             break;
           }
         }
 
         if (isFirstRun) {
-          this.$emit('ready');
+          emit('ready');
           isFirstRun = false;
         }
       },
-      (css) => {
-        this.css = css;
+      (cssVal) => {
+        css.value = cssVal;
       }
     );
   } else {
@@ -352,331 +401,324 @@ function run(recreateInstance) {
   }
 }
 
-export default {
-  props: {
-    inEditor: {
-      type: Boolean
+onMounted(() => {
+  // debouncedRun will be created at first run
+  run();
+  // TODO CSP 问题
+  // fetchVersionList();
+});
+
+const hasRandomData = computed(() => {
+  return shared.runCode && shared.runCode.indexOf('Math.random()') >= 0;
+});
+
+const editLink = computed(() => {
+  const url = getSharableURL(true);
+  return './editor.html' + url.search;
+});
+
+const versionList = computed(() => {
+  return nightly.value ? nightlyVersions.value : allEChartsVersions.value;
+});
+
+const isNightlyVersion = computed(() => {
+  return shared.echartsVersion && shared.echartsVersion.indexOf('dev') > -1;
+});
+
+const toolOptions = computed(() => {
+  const isCanvas = shared.renderer === 'canvas';
+  return {
+    renderer: isCanvas ? null : shared.renderer,
+    useDirtyRect: shared.useDirtyRect && isCanvas ? 1 : null,
+    decal: shared.enableDecal ? 1 : null,
+    theme: shared.darkMode ? 'dark' : shared.theme || null
+  };
+});
+
+watch(
+  () => shared.runCode,
+  () => {
+    if (autoRun.value || !sandbox.value) {
+      if (!debouncedRun.value) {
+        // First run
+        run();
+        // show share hint on first run if code is user-shared
+        shared.isSharedCode && showShareHint();
+        // show PR hint on first run if it's based on PR
+        shared.isPR &&
+          !prHintTimer.value &&
+          (prHintTimer.value = setTimeout(
+            showPRHint,
+            shared.isSharedCode ? 1e3 : 0
+          ));
+      } else {
+        debouncedRun.value();
+      }
     }
+  }
+);
+
+watch(
+  toolOptions,
+  () => {
+    refresh();
   },
+  { deep: true }
+);
 
-  data() {
-    return {
-      shared: store,
-      debouncedTime: undefined,
-      backgroundColor: '',
-      autoRun: true,
-      loading: false,
+watch(
+  isNightlyVersion,
+  (val) => {
+    nightly.value = val;
+  },
+  { immediate: true }
+);
 
-      isGL,
+function refresh() {
+  run(true);
+}
 
-      allEChartsVersions: [],
-      nightlyVersions: [],
-      nightly: false,
+function refreshAll() {
+  // trigger reload
+  scripts.value = null;
+  run(true);
+}
 
-      hasPRVersion: false
-    };
-  },
+function dispose() {
+  if (sandbox.value) {
+    sandbox.value.dispose();
+    sandbox.value = null;
+  }
+}
 
-  mounted() {
-    this.run();
-    // TODO CSP 问题
-    // this.fetchVersionList();
-  },
+function downloadExample() {
+  const url = getSharableURL(true);
+  const isShared = shared.isSharedCode || url.searchParams.has('code');
+  const headers = [`\t${t('editor.downloadSourceTip')} ${url.toString()}`];
+  isShared && headers.push('\t⚠ ' + t('editor.share.hint'));
+  download(headers.join('\n'));
+}
 
-  computed: {
-    hasRandomData() {
-      return (
-        this.shared.runCode && this.shared.runCode.indexOf('Math.random()') >= 0
-      );
-    },
-    editLink() {
-      const url = this.getSharableURL(true);
-      return './editor.html' + url.search;
-    },
-    versionList() {
-      return this.nightly ? this.nightlyVersions : this.allEChartsVersions;
-    },
-    isNightlyVersion() {
-      return store.echartsVersion && store.echartsVersion.indexOf('dev') > -1;
-    },
-    toolOptions() {
-      const isCanvas = store.renderer === 'canvas';
-      return {
-        renderer: isCanvas ? null : store.renderer,
-        useDirtyRect: store.useDirtyRect && isCanvas ? 1 : null,
-        decal: store.enableDecal ? 1 : null,
-        theme: store.darkMode ? 'dark' : store.theme || null
-      };
-    }
-  },
+function screenshot() {
+  sandbox.value &&
+    sandbox.value.screenshot(
+      (URL_PARAMS.c || Date.now()) +
+        '.' +
+        (shared.renderer === 'svg' ? 'svg' : 'png')
+    );
+}
 
-  watch: {
-    'shared.runCode'() {
-      if (this.autoRun || !this.sandbox) {
-        if (!this.debouncedRun) {
-          // First run
-          this.run();
-          // show share hint on first run if code is user-shared
-          store.isSharedCode && this.showShareHint();
-          // show PR hint on first run if it's based on PR
-          store.isPR &&
-            !this.prHintTimer &&
-            (this.prHintTimer = setTimeout(
-              this.showPRHint,
-              store.isSharedCode ? 1e3 : 0
-            ));
-        } else {
-          this.debouncedRun();
-        }
-      }
-    },
-    toolOptions: {
-      handler: 'refresh',
-      deep: true
-    },
-    isNightlyVersion: {
-      handler(val) {
-        this.nightly = val;
-      },
-      immediate: true
-    }
-  },
+function showPRHint() {
+  ElMessage({
+    type: 'warning',
+    message: t('editor.pr.hint').replace('{{PR}}', shared.prNumber),
+    customClass: 'toast-declaration',
+    duration: 8000,
+    showClose: true
+  });
+}
 
-  methods: {
-    run,
-    // debouncedRun will be created at first run
-    // debouncedRun: null,
-    refresh() {
-      this.run(true);
-    },
-    refreshAll() {
-      // trigger reload
-      this.scripts = null;
-      this.run(true);
-    },
-    dispose() {
-      if (this.sandbox) {
-        this.sandbox.dispose();
-        this.sandbox = null;
-      }
-    },
-    download() {
-      const url = this.getSharableURL(true);
-      const isShared = store.isSharedCode || url.searchParams.has('code');
-      const headers = [
-        `\t${this.$t('editor.downloadSourceTip')} ${url.toString()}`
-      ];
-      isShared && headers.push('\t⚠ ' + this.$t('editor.share.hint'));
-      download(headers.join('\n'));
-    },
-    screenshot() {
-      this.sandbox &&
-        this.sandbox.screenshot(
-          (URL_PARAMS.c || Date.now()) +
-            '.' +
-            (store.renderer === 'svg' ? 'svg' : 'png')
-        );
-    },
-    showPRHint() {
-      this.$message({
-        type: 'warning',
-        message: this.$t('editor.pr.hint').replace('{{PR}}', store.prNumber),
-        customClass: 'toast-declaration',
-        duration: 8000,
-        showClose: true
-      });
-    },
-    showShareHint() {
-      this.$message.closeAll();
-      this.$message({
-        type: 'warning',
-        message: this.$t('editor.share.hint'),
-        customClass: 'toast-declaration',
-        duration: 8000,
-        showClose: true
-      });
-    },
-    getSharableURL(raw) {
-      const params = {};
-      if (store.initialCode !== store.sourceCode) {
-        params.code = compressStr(store.sourceCode);
-        params.enc = null;
-      }
-      return getURL(
-        {
-          ...this.toolOptions,
-          ...params
-        },
-        raw
-      );
+function showShareHint() {
+  ElMessage.closeAll();
+  ElMessage({
+    type: 'warning',
+    message: t('editor.share.hint'),
+    customClass: 'toast-declaration',
+    duration: 8000,
+    showClose: true
+  });
+}
+
+function getSharableURL(raw) {
+  const params = {};
+  if (shared.initialCode !== shared.sourceCode) {
+    params.code = compressStr(shared.sourceCode);
+    params.enc = null;
+  }
+  return getURL(
+    {
+      ...toolOptions.value,
+      ...params
     },
-    share() {
-      const ctx = this;
-      if (ctx.isShareBusy) {
-        return;
-      }
-      ctx.isShareBusy = true;
-      const sharableURL = ctx.getSharableURL();
-      if (sharableURL.length < 1e4) {
-        return copyToClipboard(sharableURL);
-      }
-      // test whether the sharable URL is valid
-      $.ajax({
-        url: sharableURL,
-        method: 'HEAD',
-        complete(jqXHR) {
-          const statusCode = jqXHR.status;
-          if (statusCode === 413 || statusCode === 414 || statusCode === 431) {
-            ctx.isShareBusy = false;
-            ctx.$message.closeAll();
-            ctx.$message({
-              type: 'error',
-              message: ctx.$t('editor.share.urlTooLong'),
-              customClass: 'toast-declaration'
-            });
-          } else {
-            copyToClipboard(sharableURL);
-          }
-        }
-      });
+    raw
+  );
+}
 
-      function copyToClipboard(url) {
-        navigator.clipboard
-          .writeText(url)
-          .then(() => {
-            ctx.$message.closeAll();
-            ctx.$message({
-              type: 'success',
-              message: ctx.$t('editor.share.success'),
-              customClass: 'toast-declaration'
-            });
-          })
-          // PENDING
-          .catch((e) => {
-            console.error('failed to write share url to the clipboard', e);
-            window.open(url, '_blank');
-          })
-          .finally(() => {
-            ctx.isShareBusy = false;
-          });
+function share() {
+  if (isShareBusy.value) {
+    return;
+  }
+  isShareBusy.value = true;
+  const sharableURL = getSharableURL();
+  if (sharableURL.length < 1e4) {
+    return copyToClipboard(sharableURL);
+  }
+  // test whether the sharable URL is valid
+  $.ajax({
+    url: sharableURL,
+    method: 'HEAD',
+    complete(jqXHR) {
+      const statusCode = jqXHR.status;
+      if (statusCode === 413 || statusCode === 414 || statusCode === 431) {
+        isShareBusy.value = false;
+        ElMessage.closeAll();
+        ElMessage({
+          type: 'error',
+          message: t('editor.share.urlTooLong'),
+          customClass: 'toast-declaration'
+        });
+      } else {
+        copyToClipboard(sharableURL);
       }
-    },
-    getOption() {
-      return this.sandbox && this.sandbox.getOption();
-    },
-    changeVersion() {
-      saveExampleCodeToLocal();
-      setTimeout(() => {
-        // no confirmation as we have saved the code to local storage
-        window.__EDITOR_NO_LEAVE_CONFIRMATION__ = true;
-        gotoURL({
-          version: store.echartsVersion,
-          pv: store.isPR ? URL_PARAMS.version : void 0,
-          ...this.toolOptions
+    }
+  });
+
+  function copyToClipboard(url) {
+    navigator.clipboard
+      .writeText(url)
+      .then(() => {
+        ElMessage.closeAll();
+        ElMessage({
+          type: 'success',
+          message: t('editor.share.success'),
+          customClass: 'toast-declaration'
         });
+      })
+      // PENDING
+      .catch((e) => {
+        console.error('failed to write share url to the clipboard', e);
+        window.open(url, '_blank');
+      })
+      .finally(() => {
+        isShareBusy.value = false;
       });
-    },
-    changeRandomSeed() {
-      updateRandomSeed();
-      gotoURL({ random: store.randomSeed }, true);
-      this.run();
-    },
-    fetchVersionList() {
-      const isZH = store.locale === 'zh';
-      const getVersionListAPI = (pkgName) =>
-        isZH
-          ? // speed up for China mainland. `data.jsdelivr.com` is very slow or unaccessible for some ISPs.
-            // Another API is `https://registry.npmmirror.com/${pkgName}` with a request header `Accept: application/vnd.npm.install-v1+json`.
-            `https://registry.npmmirror.com/-/v1/search?text=${pkgName}&size=1`
-          : `https://data.jsdelivr.com/v1/package/npm/${pkgName}`;
-
-      const handleData =
-        isZH &&
-        ((rawData) => {
-          rawData = rawData.objects[0].package;
-          const versions = rawData.versions.sort(rcompare);
-          const tags = rawData['dist-tags'];
-          return {
-            versions,
-            tags
-          };
-        });
+  }
+}
 
-      const prVersion = URL_PARAMS.pv;
-      const hasPRVersion = (this.hasPRVersion = isValidPRVersion(prVersion));
+function getOption() {
+  return sandbox.value && sandbox.value.getOption();
+}
 
-      $.getJSON(getVersionListAPI('echarts')).done((data) => {
-        isZH && (data = handleData(data));
+function changeVersion() {
+  saveExampleCodeToLocal();
+  setTimeout(() => {
+    // no confirmation as we have saved the code to local storage
+    window.__EDITOR_NO_LEAVE_CONFIRMATION__ = true;
+    gotoURL({
+      version: shared.echartsVersion,
+      pv: shared.isPR ? URL_PARAMS.version : void 0,
+      ...toolOptions.value
+    });
+  });
+}
 
-        if (isDebug) {
-          console.log('echarts version data', data);
-        }
+function changeRandomSeed() {
+  updateRandomSeed();
+  gotoURL({ random: shared.randomSeed }, true);
+  run();
+}
 
-        const versions = data.versions.filter(
-          (version) =>
-            version.indexOf('beta') < 0 &&
-            version.indexOf('rc') < 0 &&
-            version.indexOf('alpha') < 0 &&
-            version.startsWith('5') // Only version 5.
-        );
-        this.allEChartsVersions = versions;
+function fetchVersionList() {
+  const isZH = shared.locale === 'zh';
+  const getVersionListAPI = (pkgName) =>
+    isZH
+      ? // speed up for China mainland. `data.jsdelivr.com` is very slow or unaccessible for some ISPs.
+        // Another API is `https://registry.npmmirror.com/${pkgName}` with a request header `Accept: application/vnd.npm.install-v1+json`.
+        `https://registry.npmmirror.com/-/v1/search?text=${pkgName}&size=1`
+      : `https://data.jsdelivr.com/v1/package/npm/${pkgName}`;
+
+  const handleData =
+    isZH &&
+    ((rawData) => {
+      rawData = rawData.objects[0].package;
+      const versions = rawData.versions.sort(rcompare);
+      const tags = rawData['dist-tags'];
+      return {
+        versions,
+        tags
+      };
+    });
 
-        // Use latest version
-        if (
-          !store.echartsVersion ||
-          store.echartsVersion === '5' ||
-          store.echartsVersion === 'latest'
-        ) {
-          store.echartsVersion = versions[0];
-        }
+  const prVersion = URL_PARAMS.pv;
+  hasPRVersion.value = isValidPRVersion(prVersion);
 
-        // put latest rc version for preview
-        if (gt(data.tags.rc.split('-')[0], data.tags.latest)) {
-          versions.unshift(data.tags.rc);
-          store.echartsVersion === 'rc' && (store.echartsVersion = versions[0]);
-        }
+  $.getJSON(getVersionListAPI('echarts')).done((data) => {
+    isZH && (data = handleData(data));
 
-        hasPRVersion && versions.unshift(prVersion);
-      });
+    if (isDebug) {
+      console.log('echarts version data', data);
+    }
 
-      // TODO lazy load when needed
-      $.getJSON(getVersionListAPI('echarts-nightly')).done((data) => {
-        isZH && (data = handleData(data));
+    const versions = data.versions.filter(
+      (version) =>
+        version.indexOf('beta') < 0 &&
+        version.indexOf('rc') < 0 &&
+        version.indexOf('alpha') < 0 &&
+        version.startsWith('5') // Only version 5.
+    );
+    allEChartsVersions.value = versions;
+
+    // Use latest version
+    if (
+      !shared.echartsVersion ||
+      shared.echartsVersion === '5' ||
+      shared.echartsVersion === 'latest'
+    ) {
+      shared.echartsVersion = versions[0];
+    }
 
-        if (isDebug) {
-          console.log('echarts-nightly version data', data);
-        }
+    // put latest rc version for preview
+    if (gt(data.tags.rc.split('-')[0], data.tags.latest)) {
+      versions.unshift(data.tags.rc);
+      shared.echartsVersion === 'rc' && (shared.echartsVersion = versions[0]);
+    }
 
-        const {
-          tags: { latest, next },
-          versions
-        } = data;
-        const nextIdx = versions.indexOf(next);
-        const latestIdx = versions.indexOf(latest);
-        this.nightlyVersions = versions
-          .slice(nextIdx, Math.min(nextIdx + 10, latestIdx))
-          .concat(versions.slice(latestIdx, latestIdx + 10));
-
-        hasPRVersion && this.nightlyVersions.unshift(prVersion);
-      });
+    hasPRVersion.value && versions.unshift(prVersion);
+  });
 
-      if (isDebug) {
-        console.log(
-          'echarts versions',
-          this.allEChartsVersions,
-          'nightly versions',
-          this.nightlyVersions
-        );
-      }
-    },
-    getAssets() {
-      return {
-        scripts: this.scripts,
-        css: this.css
-      };
+  // TODO lazy load when needed
+  $.getJSON(getVersionListAPI('echarts-nightly')).done((data) => {
+    isZH && (data = handleData(data));
+
+    if (isDebug) {
+      console.log('echarts-nightly version data', data);
     }
+
+    const {
+      tags: { latest, next },
+      versions
+    } = data;
+    const nextIdx = versions.indexOf(next);
+    const latestIdx = versions.indexOf(latest);
+    nightlyVersions.value = versions
+      .slice(nextIdx, Math.min(nextIdx + 10, latestIdx))
+      .concat(versions.slice(latestIdx, latestIdx + 10));
+
+    hasPRVersion.value && nightlyVersions.value.unshift(prVersion);
+  });
+
+  if (isDebug) {
+    console.log(
+      'echarts versions',
+      allEChartsVersions.value,
+      'nightly versions',
+      nightlyVersions.value
+    );
   }
-};
+}
+
+function getAssets() {
+  return {
+    scripts: scripts.value,
+    css: css.value
+  };
+}
+
+defineExpose({
+  getAssets,
+  getOption,
+  refreshAll
+});
 </script>
 
 <style lang="scss">
@@ -827,6 +869,14 @@ export default {
   }
 }
 
+.el-switch {
+  height: 20px;
+}
+
+.el-popover {
+  width: auto !important;
+}
+
 .el-message {
   &.toast-declaration {
     min-width: auto;
@@ -842,4 +892,17 @@ export default {
     }
   }
 }
+
+.icon {
+  width: 12px;
+  height: 12px;
+}
+
+.ml-4 {
+  margin-left: 4px;
+}
+
+.mr-4 {
+  margin-right: 4px;
+}
 </style>
diff --git a/src/editor/View.vue b/src/editor/View.vue
index c0d98f8e..af7240e6 100644
--- a/src/editor/View.vue
+++ b/src/editor/View.vue
@@ -2,23 +2,20 @@
   <preview></preview>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive } from 'vue';
+import { loadExampleCode, parseSourceCode, store } from '../common/store';
 import Preview from './Preview.vue';
-import { store, loadExampleCode, parseSourceCode } from '../common/store';
 
-export default {
-  components: {
-    Preview
-  },
+const shared = reactive(store);
 
-  mounted() {
-    loadExampleCode().then((code) => {
-      // set sourceCode here as there is no editor in view mode
-      store.sourceCode =
-        store.initialCode =
-        store.runCode =
-          parseSourceCode(code);
-    });
-  }
-};
+onMounted(() => {
+  loadExampleCode().then((code) => {
+    // set sourceCode here as there is no editor in view mode
+    shared.sourceCode =
+      shared.initialCode =
+      shared.runCode =
+        parseSourceCode(code);
+  });
+});
 </script>
diff --git a/src/explore/ExampleCard.vue b/src/explore/ExampleCard.vue
index 4f129f36..d1811e9d 100644
--- a/src/explore/ExampleCard.vue
+++ b/src/explore/ExampleCard.vue
@@ -19,74 +19,77 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { compareVersions } from 'compare-versions';
-import { store } from '../common/store';
+import { computed, reactive } from 'vue';
 import { URL_PARAMS } from '../common/config';
+import { store } from '../common/store';
 
-export default {
-  props: ['example'],
-
-  computed: {
-    title() {
-      return (
-        (store.locale === 'zh' ? this.example.titleCN : this.example.title) ||
-        this.example.title ||
-        ''
-      );
-    },
-
-    showSubtitle() {
-      return store.locale === 'zh';
-    },
-
-    subtitle() {
-      return this.example.title || '';
-    },
-
-    hasVersionSince() {
-      return this.example.since
-        && compareVersions(store.echartsFullVersion, this.example.since) >= 0;
-    },
-
-    versionSinceBanner() {
-      return 'v' + this.example.since + '+';
-    },
-
-    exampleTheme() {
-      const example = this.example;
-      return example.theme || (store.darkMode ? 'dark' : '');
-    },
-
-    exampleLink() {
-      const example = this.example;
-      const hash = ['c=' + example.id];
-      const exampleTheme = this.exampleTheme;
-      example.isGL && hash.push('gl=1');
-      exampleTheme && hash.push('theme=' + exampleTheme);
-      'local' in URL_PARAMS && hash.push('local=1');
-      'debug' in URL_PARAMS && hash.push('debug=1');
-      'useDirtyRect' in URL_PARAMS && hash.push('useDirtyRect=1');
-      URL_PARAMS.renderer && hash.push('renderer=' + URL_PARAMS.renderer);
-      return './editor.html?' + hash.join('&');
-    },
-
-    exampleThumbFilePath() {
-      const example = this.example;
-      const themePostfix = this.exampleTheme ? '-' + this.exampleTheme : '';
-      const folder = example.isGL ? 'data-gl' : 'data';
-      return `${folder}/thumb${themePostfix}/${example.id}`;
-    },
-
-    screenshotURLWebP() {
-      return `${store.cdnRoot}/${this.exampleThumbFilePath}.webp?_v_=${store.version}`;
-    },
-
-    screenshotURLPNG() {
-      return `${store.cdnRoot}/${this.exampleThumbFilePath}.png?_v_=${store.version}`;
-    }
+const shared = reactive(store);
+
+const { example } = defineProps({
+  example: {
+    type: Object,
+    required: true
   }
-};
+});
+
+const title = computed(() => {
+  return (
+    (shared.locale === 'zh' ? example.titleCN : example.title) ||
+    example.title ||
+    ''
+  );
+});
+
+const showSubtitle = computed(() => {
+  return shared.locale === 'zh';
+});
+
+const subtitle = computed(() => {
+  return example.title || '';
+});
+
+const hasVersionSince = computed(() => {
+  return (
+    example.since &&
+    compareVersions(shared.echartsFullVersion, example.since) >= 0
+  );
+});
+
+const versionSinceBanner = computed(() => {
+  return 'v' + example.since + '+';
+});
+
+const exampleTheme = computed(() => {
+  return example.theme || (shared.darkMode ? 'dark' : '');
+});
+
+const exampleLink = computed(() => {
+  const hash = ['c=' + example.id];
+  const theme = exampleTheme.value;
+  example.isGL && hash.push('gl=1');
+  theme && hash.push('theme=' + theme);
+  'local' in URL_PARAMS && hash.push('local=1');
+  'debug' in URL_PARAMS && hash.push('debug=1');
+  'useDirtyRect' in URL_PARAMS && hash.push('useDirtyRect=1');
+  URL_PARAMS.renderer && hash.push('renderer=' + URL_PARAMS.renderer);
+  return './editor.html?' + hash.join('&');
+});
+
+const exampleThumbFilePath = computed(() => {
+  const themePostfix = exampleTheme.value ? '-' + exampleTheme.value : '';
+  const folder = example.isGL ? 'data-gl' : 'data';
+  return `${folder}/thumb${themePostfix}/${example.id}`;
+});
+
+const screenshotURLWebP = computed(() => {
+  return `${shared.cdnRoot}/${exampleThumbFilePath.value}.webp?_v_=${shared.version}`;
+});
+
+const screenshotURLPNG = computed(() => {
+  return `${shared.cdnRoot}/${exampleThumbFilePath.value}.png?_v_=${shared.version}`;
+});
 </script>
 
 <style lang="scss">
diff --git a/src/explore/Explore.vue b/src/explore/Explore.vue
index cb3c36e4..ea5758e3 100644
--- a/src/explore/Explore.vue
+++ b/src/explore/Explore.vue
@@ -1,34 +1,33 @@
 <template>
   <div id="example-explore">
     <div id="left-container" ref="leftContainer">
-      <div id="left-chart-nav">
-        <scrollactive
-          ref="scrollactive"
+      <nav id="left-chart-nav">
+        <ScrollSpy
+          ref="scrollspy"
           active-class="active"
-          :offset="80"
-          :duration="500"
           :scroll-container-selector="'#example-explore'"
-          :scroll-on-start="false"
-          :modify-url="false"
-          bezier-easing-value=".5,0,.35,1"
           @itemchanged="onActiveNavChanged"
         >
           <ul>
             <li v-for="category in EXAMPLE_CATEGORIES" :key="category">
               <a
-                class="left-chart-nav-link scrollactive-item"
+                class="left-chart-nav-link scrollspy-item"
                 :id="'left-chart-nav-' + category"
                 :href="'#chart-type-' + category"
               >
-                <span class="chart-icon" v-html="icons[category]"></span>
+                <span class="chart-icon">
+                  <svg role="img">
+                    <use :href="'/asset/sprite.svg#' + icons[category]"></use>
+                  </svg>
+                </span>
                 <span class="chart-name">{{
-                  $t('chartTypes.' + category)
+                  t('chartTypes.' + category)
                 }}</span>
               </a>
             </li>
           </ul>
-        </scrollactive>
-      </div>
+        </ScrollSpy>
+      </nav>
     </div>
     <div id="explore-container">
       <div class="example-list-panel">
@@ -37,7 +36,7 @@
             class="chart-type-head"
             :id="'chart-type-' + categoryObj.category"
           >
-            {{ $t('chartTypes.' + categoryObj.category) }}
+            {{ t('chartTypes.' + categoryObj.category) }}
             <span>{{ categoryObj.category }}</span>
           </h3>
 
@@ -57,7 +56,7 @@
       <el-switch
         v-model="shared.darkMode"
         active-color="#181432"
-        :active-text="$t('editor.darkMode')"
+        :active-text="t('editor.darkMode')"
         :inactive-text="''"
       >
       </el-switch>
@@ -65,15 +64,20 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import LazyLoad from 'vanilla-lazyload/dist/lazyload.esm';
+import { computed, onMounted, reactive, ref, useTemplateRef, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { BLACK_MAP, EXAMPLE_CATEGORIES } from '../common/config';
+import { store } from '../common/store';
 import CHART_LIST from '../data/chart-list-data';
 import CHART_LIST_GL from '../data/chart-list-data-gl';
-import { EXAMPLE_CATEGORIES, BLACK_MAP } from '../common/config';
-import { store } from '../common/store';
 import ExampleCard from './ExampleCard.vue';
-import LazyLoad from 'vanilla-lazyload/dist/lazyload.esm';
+import ScrollSpy from './ScrollSpy.vue';
 
-const icons = {};
+const { t } = useI18n();
+
+const icons = ref({});
 
 [
   'line',
@@ -105,10 +109,9 @@ const icons = {};
   'rich',
   'graphic'
 ].forEach(function (category) {
-  icons[category] = require('../asset/icon/' + category + '.svg');
+  icons.value[category] = category;
 });
 
-const glIcon = require('../asset/icon/gl.svg');
 [
   'globe',
   'bar3D',
@@ -123,179 +126,136 @@ const glIcon = require('../asset/icon/gl.svg');
   'graphGL',
   'geo3D'
 ].forEach(function (category) {
-  icons[category] = glIcon;
+  icons.value[category] = 'gl';
 });
 
 const LAZY_LOADED_CLASS = 'ec-shot-loaded';
 
-export default {
-  components: {
-    ExampleCard
-  },
-
-  data() {
-    const exampleListByCategory = {};
-
-    function addExamples(list, isGL) {
-      let categoryOrder = 0;
-      // Add by category order in each example.
-      do {
-        let added = false;
-        for (let i = 0; i < list.length; i++) {
-          const example = list[i];
-          if (BLACK_MAP.hasOwnProperty(example.id)) {
-            continue;
-          }
-          if (example.noExplore) {
-            continue;
-          }
-          if (typeof example.category === 'string') {
-            example.category = [example.category];
-          }
-
-          const categoryStr = (example.category || [])[categoryOrder];
-          if (categoryStr) {
-            added = true;
-            let categoryObj = exampleListByCategory[categoryStr];
-            if (!categoryObj) {
-              categoryObj = {
-                category: categoryStr,
-                examples: []
-              };
-              exampleListByCategory[categoryStr] = categoryObj;
-            }
-            example.isGL = isGL;
-
-            categoryObj.examples.push(example);
-          }
-        }
-
-        if (!added) {
-          break;
+// Reactive data
+const shared = reactive(store);
+// Refs
+const leftContainer = useTemplateRef('leftContainer');
+const exampleListByCategory = ref({});
+const _lazyload = ref(
+  new LazyLoad({
+    // Container should be the scroll viewport.
+    // container: this.$el.querySelector('#explore-container .example-list-panel'),
+    elements_selector: '.chart-area',
+    load_delay: 400,
+    class_loaded: LAZY_LOADED_CLASS,
+    callback_error(img) {
+      const fallbackSrc = img.src;
+      const children = img.parentElement.children;
+      for (let i = 0, len = children.length; i < len; i++) {
+        const el = children[i];
+        if (el !== img) {
+          el.srcset = fallbackSrc;
         }
-      } while (++categoryOrder && categoryOrder < 4); // At most 4 category
+      }
     }
+  })
+);
+
+function addExamples(list, isGL) {
+  let categoryOrder = 0;
+  // Add by category order in each example.
+  do {
+    let added = false;
+    for (let i = 0; i < list.length; i++) {
+      const example = list[i];
+      if (BLACK_MAP.hasOwnProperty(example.id)) {
+        continue;
+      }
+      if (example.noExplore) {
+        continue;
+      }
+      if (typeof example.category === 'string') {
+        example.category = [example.category];
+      }
 
-    addExamples(CHART_LIST, false);
-    addExamples(CHART_LIST_GL, true);
+      const categoryStr = (example.category || [])[categoryOrder];
+      if (categoryStr) {
+        added = true;
+        let categoryObj = exampleListByCategory.value[categoryStr];
+        if (!categoryObj) {
+          categoryObj = {
+            category: categoryStr,
+            examples: []
+          };
+          exampleListByCategory.value[categoryStr] = categoryObj;
+        }
+        example.isGL = isGL;
 
-    return {
-      shared: store,
+        categoryObj.examples.push(example);
+      }
+    }
 
-      icons,
+    if (!added) {
+      break;
+    }
+  } while (++categoryOrder && categoryOrder < 4); // At most 4 category
+}
 
-      EXAMPLE_CATEGORIES,
-      // [{
-      //  category: '',
-      //  isGL: false
-      //  examples: []
-      // }]
-      exampleListByCategory
-    };
-  },
+addExamples(CHART_LIST, false);
+addExamples(CHART_LIST_GL, true);
 
-  watch: {
-    'shared.darkMode'() {
-      const imgs = this.$el.querySelectorAll('img.chart-area');
+// Watch for dark mode changes
+watch(
+  () => shared.darkMode,
+  () => {
+    const el = document.getElementById('explore-container');
+    if (el) {
+      const imgs = el.querySelectorAll('img.chart-area');
       for (let i = 0; i < imgs.length; i++) {
         // Force lazyload to update
         LazyLoad.resetStatus(imgs[i]);
       }
-      this._lazyload.update();
+      _lazyload.value.update();
     }
-  },
-
-  computed: {
-    exampleList() {
-      const list = [];
-      for (let i = 0, len = EXAMPLE_CATEGORIES.length; i < len; i++) {
-        const category = EXAMPLE_CATEGORIES[i];
-        const categoryObj = this.exampleListByCategory[category];
-        if (categoryObj && categoryObj.examples.length > 0) {
-          list.push({
-            category,
-            examples: categoryObj.examples
-          });
-        }
-      }
-      return list;
+  }
+);
+
+const exampleList = computed(() => {
+  const list = [];
+  for (let i = 0, len = EXAMPLE_CATEGORIES.length; i < len; i++) {
+    const category = EXAMPLE_CATEGORIES[i];
+    const categoryObj = exampleListByCategory.value[category];
+    if (categoryObj && categoryObj.examples.length > 0) {
+      list.push({
+        category,
+        examples: categoryObj.examples
+      });
     }
-  },
-
-  mounted() {
-    this._lazyload = new LazyLoad({
-      // Container should be the scroll viewport.
-      // container: this.$el.querySelector('#explore-container .example-list-panel'),
-      elements_selector: '.chart-area',
-      load_delay: 400,
-      class_loaded: LAZY_LOADED_CLASS,
-      callback_error(img) {
-        const fallbackSrc = img.src;
-        const children = img.parentElement.children;
-        for (let i = 0, len = children.length; i < len; i++) {
-          const el = children[i];
-          if (el !== img) {
-            el.srcset = fallbackSrc;
-          }
-        }
-      }
-    });
-
-    setTimeout(() => {
-      location.hash && this.onHashChange();
-      window.addEventListener('hashchange', this.onHashChange);
-    }, 0);
-  },
-
-  methods: {
-    onHashChange(e) {
-      console.log('onHashChange');
-      e && e.preventDefault();
-
-      const hash = location.hash;
-      const items = this.$refs.scrollactive.items;
-      let activeItem;
-      for (let i = 0, len = items.length, item; i < len; i++) {
-        item = items[i];
-        if (item.hash === hash) {
-          activeItem = item;
-          break;
-        }
-      }
-      if (!activeItem) {
-        return;
-      }
-      activeItem.click();
-      this.scrollNav(activeItem);
-    },
-    onActiveNavChanged(event, currentItem) {
-      if (!currentItem) {
-        return;
-      }
+  }
+  return list;
+});
 
-      const isByScroll = event && event.type === 'scroll';
-      isByScroll && this.scrollNav(currentItem);
+onMounted(() => {
+  _lazyload.value.update();
+});
 
-      // change url
-      if (location.href !== currentItem.href) {
-        history.pushState(null, null, currentItem.href);
-      }
-    },
-    scrollNav(currentItem) {
-      // scroll nav
-      const leftContainer = this.$refs.leftContainer;
-      const containerOffsetHeight = leftContainer.offsetHeight;
-      const rect = currentItem.parentElement.getBoundingClientRect();
-      if (rect.top < 0 || rect.bottom > containerOffsetHeight) {
-        const scrollTop =
-          currentItem.offsetTop -
-          containerOffsetHeight +
-          currentItem.offsetHeight;
-        leftContainer.scrollTo
-          ? leftContainer.scrollTo(0, scrollTop)
-          : (leftContainer.scrollTop = scrollTop);
-      }
-    }
+// Methods
+const onActiveNavChanged = (data) => {
+  const { type, currentItem } = data;
+  if (!currentItem) {
+    return;
+  }
+
+  const isByScroll = type === 'scroll';
+  isByScroll && scrollNav(currentItem);
+};
+
+const scrollNav = (currentItem) => {
+  // scroll nav
+  if (!leftContainer.value) return;
+  const containerOffsetHeight = leftContainer.value.offsetHeight;
+  const rect = currentItem.parentElement.getBoundingClientRect();
+  if (rect.top < 0 || rect.bottom > containerOffsetHeight) {
+    const scrollTop =
+      currentItem.offsetTop - containerOffsetHeight + currentItem.offsetHeight;
+    leftContainer.value.scrollTo
+      ? leftContainer.value.scrollTo(0, scrollTop)
+      : (leftContainer.value.scrollTop = scrollTop);
   }
 };
 </script>
@@ -305,7 +265,7 @@ export default {
 @import '../style/config.xl.scss';
 
 $chart-nav-width: 200px;
-$chart-icon-width: 25px;
+$chart-icon-size: 20px;
 $chart-icon-border: 1px;
 
 $toolbar-height: 30px;
@@ -451,15 +411,15 @@ $pd-lg: 20px;
       }
 
       .chart-icon {
-        content: '';
-        width: 20px;
+        width: $chart-icon-size;
+        height: $chart-icon-size;
         display: inline-block;
         border-radius: 50%;
         vertical-align: middle;
 
         svg {
-          width: 100% !important;
-          height: auto !important;
+          width: 100%;
+          height: 100%;
         }
       }
 
diff --git a/src/explore/ScrollSpy.vue b/src/explore/ScrollSpy.vue
new file mode 100644
index 00000000..8a9fb8c5
--- /dev/null
+++ b/src/explore/ScrollSpy.vue
@@ -0,0 +1,301 @@
+<template>
+  <div class="scrollspy" ref="scrollSpyContainer">
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick, computed } from 'vue';
+
+// Props
+const props = defineProps({
+  activeClass: {
+    type: String,
+    default: 'active'
+  },
+  offset: {
+    type: Number,
+    default: 80
+  },
+  duration: {
+    type: Number,
+    default: 600
+  },
+  scrollContainerSelector: {
+    type: String,
+    required: true
+  },
+  threshold: {
+    type: Array,
+    default: () => [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]
+  },
+  rootMargin: {
+    type: String,
+    default: '-80px 0px -50% 0px'
+  }
+});
+
+// Emits
+const emit = defineEmits(['itemchanged']);
+
+// State
+const scrollSpyContainer = ref(null);
+const activeItem = ref(null);
+const items = ref(new Map());
+const observer = ref(null);
+const isTrackingScroll = ref(false);
+
+// Computed
+const scrollElement = computed(() => {
+  const element = document.querySelector(props.scrollContainerSelector);
+  if (!element) {
+    console.warn(
+      `ScrollSpy: Container "${props.scrollContainerSelector}" not found`
+    );
+  }
+  return element;
+});
+
+// Scroll Element Registration
+const registerItem = (menuElement, sectionElement) => {
+  if (!menuElement || !sectionElement) {
+    console.warn('ScrollSpy: Invalid menu or section element');
+    return;
+  }
+
+  items.value.set(menuElement, sectionElement);
+  menuElement.addEventListener('click', handleItemClick);
+
+  // Add accessibility attributes
+  menuElement.setAttribute('aria-current', 'false');
+  menuElement.setAttribute('role', 'button');
+
+  if (observer.value) {
+    observer.value.observe(sectionElement);
+  }
+};
+
+const autoRegisterItems = () => {
+  if (!scrollSpyContainer.value) {
+    console.warn('ScrollSpy: Container not found');
+    return;
+  }
+
+  const menuItems =
+    scrollSpyContainer.value.querySelectorAll('.scrollspy-item');
+
+  if (menuItems.length === 0) {
+    console.warn('ScrollSpy: No .scrollspy-item elements found');
+    return;
+  }
+
+  menuItems.forEach((item) => {
+    const target =
+      item.getAttribute('href') || item.getAttribute('data-target');
+    if (target) {
+      let section;
+      if (target.startsWith('#')) {
+        section = document.getElementById(target.slice(1));
+      } else {
+        section = document.querySelector(target);
+      }
+
+      if (section) {
+        registerItem(item, section);
+      } else {
+        console.warn(`ScrollSpy: Target element not found for "${target}"`);
+      }
+    } else {
+      console.warn(
+        'ScrollSpy: Menu item missing href or data-target attribute',
+        item
+      );
+    }
+  });
+};
+
+// Initialise scroll spy
+const initScrollSpy = () => {
+  if (!scrollElement.value) {
+    console.warn('ScrollSpy: Scroll element not available');
+    return;
+  }
+
+  if (observer.value) {
+    observer.value.disconnect();
+  }
+
+  // Use custom rootMargin from props or generate from offset
+  const rootMargin = props.rootMargin || `-${props.offset}px 0px -50% 0px`;
+
+  observer.value = new IntersectionObserver(
+    (entries) => {
+      if (isTrackingScroll.value) return;
+
+      let mostVisibleItem = null;
+      let highestRatio = 0;
+
+      entries.forEach((entry) => {
+        if (entry.isIntersecting && entry.intersectionRatio > highestRatio) {
+          highestRatio = entry.intersectionRatio;
+
+          for (const [menuElement, section] of items.value.entries()) {
+            if (section === entry.target) {
+              mostVisibleItem = menuElement;
+              break;
+            }
+          }
+        }
+      });
+
+      if (mostVisibleItem && mostVisibleItem !== activeItem.value) {
+        updateActiveItem(mostVisibleItem, 'scroll');
+      }
+    },
+    {
+      root: scrollElement.value,
+      rootMargin: rootMargin,
+      threshold: props.threshold
+    }
+  );
+
+  // Observe all sections
+  items.value.forEach((section) => {
+    observer.value.observe(section);
+  });
+};
+
+const updateActiveItem = (newItem, type = 'unknown') => {
+  // Remove active class and aria from previous
+  if (activeItem.value) {
+    activeItem.value.classList.remove(props.activeClass);
+    activeItem.value.setAttribute('aria-current', 'false');
+  }
+
+  // Add to new item
+  newItem.classList.add(props.activeClass);
+  newItem.setAttribute('aria-current', 'true');
+  activeItem.value = newItem;
+
+  emit('itemchanged', { type, currentItem: newItem });
+};
+
+// Add smooth scrolling
+const smoothScrollTo = (element) => {
+  return new Promise((resolve) => {
+    if (!scrollElement.value || !element) {
+      resolve();
+      return;
+    }
+
+    let targetOffset;
+    if (scrollElement.value === window) {
+      const rect = element.getBoundingClientRect();
+      targetOffset = rect.top + window.pageYOffset - props.offset;
+    } else {
+      targetOffset = element.offsetTop - props.offset;
+    }
+
+    const startPosition =
+      scrollElement.value === window
+        ? window.pageYOffset
+        : scrollElement.value.scrollTop;
+    const distance = targetOffset - startPosition;
+
+    let startTime = null;
+    isTrackingScroll.value = true;
+
+    const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
+
+    const animate = (currentTime) => {
+      if (!startTime) startTime = currentTime;
+
+      const timeElapsed = currentTime - startTime;
+      const progress = Math.min(timeElapsed / props.duration, 1);
+      const easeProgress = easeOutCubic(progress);
+
+      const currentPosition = startPosition + distance * easeProgress;
+
+      if (scrollElement.value === window) {
+        window.scrollTo(0, currentPosition);
+      } else {
+        scrollElement.value.scrollTop = currentPosition;
+      }
+
+      if (progress < 1) {
+        requestAnimationFrame(animate);
+      } else {
+        isTrackingScroll.value = false;
+        resolve();
+      }
+    };
+
+    requestAnimationFrame(animate);
+  });
+};
+
+// Scroll to section on load if hash present
+const scrollOnLoad = () => {
+  const hash = window.location.hash.slice(1);
+  if (!hash) return;
+
+  const section = document.getElementById(hash);
+  if (!section) return;
+  // Wait a bit longer to ensure everything is rendered and registered
+  setTimeout(() => {
+    smoothScrollTo(section);
+  }, 150);
+};
+
+// Click handler
+const handleItemClick = (event) => {
+  event.preventDefault();
+
+  const menuElement = event.currentTarget;
+  const sectionElement = items.value.get(menuElement);
+
+  if (!sectionElement) {
+    console.warn('ScrollSpy: No section element found for menu item');
+    return;
+  }
+
+  // Temporarily disable scroll spy during scroll
+  if (observer.value) {
+    observer.value.disconnect();
+  }
+
+  // Immediately activate clicked item
+  updateActiveItem(menuElement, 'click');
+
+  // Smooth scroll to section
+  smoothScrollTo(sectionElement).then(() => {
+    // Re-enable scroll spy
+    initScrollSpy();
+
+    // Update URL hash
+    if (sectionElement.id) {
+      window.history.pushState(null, '', `#${sectionElement.id}`);
+    }
+  });
+};
+
+// Vue lifecycle hooks
+onMounted(() => {
+  nextTick(() => {
+    autoRegisterItems();
+    initScrollSpy();
+    scrollOnLoad();
+  });
+});
+
+onUnmounted(() => {
+  if (observer.value) {
+    observer.value.disconnect();
+  }
+
+  // Clean up event listeners
+  items.value.forEach((section, menuElement) => {
+    menuElement.removeEventListener('click', handleItemClick);
+  });
+});
+</script>
diff --git a/src/main.js b/src/main.js
index 24ba141f..c4ac3fab 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,13 +1,11 @@
-import Vue from 'vue';
-import VueI18n from 'vue-i18n';
+import ElementPlus from 'element-plus';
+import { createApp } from 'vue';
+import { createI18n } from 'vue-i18n';
 import messages from './common/i18n';
+import { store } from './common/store';
 import EditorPage from './editor/Editor.vue';
-import ExplorePage from './explore/Explore.vue';
 import ViewPage from './editor/View.vue';
-import { store } from './common/store';
-import VueScrollactive from 'vue-scrollactive';
-
-Vue.use(VueScrollactive);
+import ExplorePage from './explore/Explore.vue';
 
 /**
  *
@@ -19,7 +17,8 @@ Vue.use(VueScrollactive);
  * @param {string} [option.version]
  */
 export function init(el, option) {
-  const i18n = new VueI18n({
+  const i18n = createI18n({
+    legacy: false,
     locale: option.locale,
     fallbackLocale: 'en',
     messages
@@ -44,17 +43,15 @@ export function init(el, option) {
     v4Link && v4Link.remove();
   }
 
-  new Vue({
-    i18n,
-    el: container,
-    render: (h) => {
-      return h(
-        {
-          editor: EditorPage,
-          explore: ExplorePage,
-          view: ViewPage
-        }[page] || ExplorePage
-      );
-    }
-  });
+  const RootComponent =
+    {
+      editor: EditorPage,
+      explore: ExplorePage,
+      view: ViewPage
+    }[page] || ExplorePage;
+
+  const app = createApp(RootComponent);
+  app.use(i18n);
+  app.use(ElementPlus);
+  app.mount(container);
 }
diff --git a/tool/plugin-svg-sprite.js b/tool/plugin-svg-sprite.js
new file mode 100644
index 00000000..52762c15
--- /dev/null
+++ b/tool/plugin-svg-sprite.js
@@ -0,0 +1,97 @@
+const { RawSource } = require('webpack-sources');
+const path = require('path');
+const fs = require('fs');
+
+class SvgSpritePlugin {
+  constructor(options = {}) {
+    this.spriteFilename = options.spriteFilename || 'sprite.svg';
+    this.svgPath = options.svgPath;
+  }
+
+  // Helper to process raw SVG string into a <symbol>
+  processSvg(filePath, rawSvg) {
+    const id = path
+      .basename(filePath, '.svg')
+      .toLowerCase()
+      .replace(/[^a-z0-9_-]/g, '-');
+
+    // Remove XML declaration and comments
+    let svg = rawSvg.replace(/<\?xml.*?\?>/g, '').replace(/<!--.*?-->/gs, '');
+
+    // Extract viewBox (crucial for icon scaling)
+    const viewBoxMatch = svg.match(/viewBox="([^"]*)"/);
+    if (!viewBoxMatch) {
+      console.warn(
+        `Warning: SVG file '${filePath}' is missing a viewBox attribute. Skipping.`
+      );
+      return null;
+    }
+    const viewBox = viewBoxMatch[1];
+
+    // WARNING: Simple regex is used here. For production, a reliable XML parser is safer.
+    const symbolContent = svg
+      .replace(/<\/?svg[^>]*>/g, '') // Remove opening/closing <svg> tags
+      .replace(/xlink:href/g, 'href') // xlink:href causes parse error and icons do not load
+      .replace(/\s+/g, ' ') // Minify: collapse whitespace
+      .replace(/>\s+</g, '><') // Minify: remove spaces between tags
+      .trim();
+
+    return `<symbol id="${id}" viewBox="${viewBox}">${symbolContent}</symbol>`;
+  }
+
+  // Recursively get all .svg files
+  getSvgFiles(dir) {
+    let files = [];
+    const items = fs.readdirSync(dir);
+    for (const item of items) {
+      const fullPath = path.join(dir, item);
+      const stat = fs.statSync(fullPath);
+      if (stat.isDirectory()) {
+        files = files.concat(this.getSvgFiles(fullPath));
+      } else if (item.endsWith('.svg')) {
+        files.push(fullPath);
+      }
+    }
+    return files;
+  }
+
+  apply(compiler) {
+    compiler.hooks.compilation.tap('SvgSpritePlugin', (compilation) => {
+      compilation.hooks.processAssets.tap(
+        {
+          name: 'SvgSpritePlugin',
+          stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONS
+        },
+        (assets) => {
+          if (!this.svgPath || !fs.existsSync(this.svgPath)) {
+            return;
+          }
+
+          const svgFiles = this.getSvgFiles(this.svgPath);
+          let symbols = [];
+
+          for (const filePath of svgFiles) {
+            const rawSvg = fs.readFileSync(filePath, 'utf-8');
+            const symbol = this.processSvg(filePath, rawSvg);
+            if (symbol) {
+              symbols.push(symbol);
+            }
+          }
+
+          // 4. Assemble the final sprite content
+          const spriteContent = `<svg xmlns="http://www.w3.org/2000/svg" style="display:none">${symbols.join(
+            '\n'
+          )}</svg>`;
+
+          // 5. Emit the single sprite file to the build directory
+          compilation.emitAsset(
+            this.spriteFilename,
+            new RawSource(spriteContent)
+          );
+        }
+      );
+    });
+  }
+}
+
+module.exports = SvgSpritePlugin;