diff --git a/package-lock.json b/package-lock.json
index 9d26699c..35e87a00 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,6 @@
       "dependencies": {
         "@icon-park/vue-next": "^1.4.2",
         "animate.css": "^4.1.1",
-        "ant-design-vue": "^4.0.0",
         "chartist": "^1.3.0",
         "clipboard": "^2.0.11",
         "core-js": "^3.8.3",
@@ -114,31 +113,6 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/@ant-design/colors": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmmirror.com/@ant-design/colors/-/colors-6.0.0.tgz",
-      "integrity": "sha512-qAZRvPzfdWHtfameEGP2Qvuf838NhergR35o+EuVyB5XvSA98xod5r4utvi4TJ3ywmevm290g9nsCG5MryrdWQ==",
-      "dependencies": {
-        "@ctrl/tinycolor": "^3.4.0"
-      }
-    },
-    "node_modules/@ant-design/icons-svg": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmmirror.com/@ant-design/icons-svg/-/icons-svg-4.2.1.tgz",
-      "integrity": "sha512-EB0iwlKDGpG93hW8f85CTJTs4SvMX7tt5ceupvhALp1IF44SeUFOMhKUOYqpsoYWQKAOuTRDMqn75rEaKDp0Xw=="
-    },
-    "node_modules/@ant-design/icons-vue": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmmirror.com/@ant-design/icons-vue/-/icons-vue-6.1.0.tgz",
-      "integrity": "sha512-EX6bYm56V+ZrKN7+3MT/ubDkvJ5rK/O2t380WFRflDcVFgsvl3NLH7Wxeau6R8DbrO5jWR6DSTC3B6gYFp77AA==",
-      "dependencies": {
-        "@ant-design/colors": "^6.0.0",
-        "@ant-design/icons-svg": "^4.2.1"
-      },
-      "peerDependencies": {
-        "vue": ">=3.0.3"
-      }
-    },
     "node_modules/@apideck/better-ajv-errors": {
       "version": "0.3.6",
       "resolved": "https://registry.npmmirror.com/@apideck/better-ajv-errors/-/better-ajv-errors-0.3.6.tgz",
@@ -1962,6 +1936,7 @@
       "version": "7.22.6",
       "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.22.6.tgz",
       "integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==",
+      "dev": true,
       "dependencies": {
         "regenerator-runtime": "^0.13.11"
       },
@@ -2332,14 +2307,6 @@
         "postcss-selector-parser": "^6.0.13"
       }
     },
-    "node_modules/@ctrl/tinycolor": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.6.0.tgz",
-      "integrity": "sha512-/Z3l6pXthq0JvMYdUFyX9j0MaCltlIn6mfh9jLyQwg5aPKxkyNa0PTHtU1AlFXLNk55ZuAeJRcpvq+tmLfKmaQ==",
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/@discoveryjs/json-ext": {
       "version": "0.5.7",
       "resolved": "https://registry.npmmirror.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
@@ -2349,16 +2316,6 @@
         "node": ">=10.0.0"
       }
     },
-    "node_modules/@emotion/hash": {
-      "version": "0.9.1",
-      "resolved": "https://registry.npmmirror.com/@emotion/hash/-/hash-0.9.1.tgz",
-      "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
-    },
-    "node_modules/@emotion/unitless": {
-      "version": "0.8.1",
-      "resolved": "https://registry.npmmirror.com/@emotion/unitless/-/unitless-0.8.1.tgz",
-      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
-    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmmirror.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -2787,15 +2744,6 @@
       "integrity": "sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==",
       "dev": true
     },
-    "node_modules/@simonwep/pickr": {
-      "version": "1.8.2",
-      "resolved": "https://registry.npmmirror.com/@simonwep/pickr/-/pickr-1.8.2.tgz",
-      "integrity": "sha512-/l5w8BIkrpP6n1xsetx9MWPWlU6OblN5YgZZphxan0Tq4BByTCETL6lyIeY8lagalS2Nbt4F2W034KHLIiunKA==",
-      "dependencies": {
-        "core-js": "^3.15.1",
-        "nanopop": "^2.1.0"
-      }
-    },
     "node_modules/@sinclair/typebox": {
       "version": "0.27.8",
       "resolved": "https://registry.npmmirror.com/@sinclair/typebox/-/typebox-0.27.8.tgz",
@@ -4502,41 +4450,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/ant-design-vue": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmmirror.com/ant-design-vue/-/ant-design-vue-4.0.0.tgz",
-      "integrity": "sha512-6V8DxHPv3HJYDdv48W/KFOUjeZDsYJhFlk13HFSKCJSR2MQs4YnPIAC+rWie9vYcVEKbO+cQDqiOM3cBoHMNUQ==",
-      "dependencies": {
-        "@ant-design/colors": "^6.0.0",
-        "@ant-design/icons-vue": "^6.1.0",
-        "@babel/runtime": "^7.10.5",
-        "@ctrl/tinycolor": "^3.5.0",
-        "@emotion/hash": "^0.9.0",
-        "@emotion/unitless": "^0.8.0",
-        "@simonwep/pickr": "~1.8.0",
-        "array-tree-filter": "^2.1.0",
-        "async-validator": "^4.0.0",
-        "csstype": "^3.1.1",
-        "dayjs": "^1.10.5",
-        "dom-align": "^1.12.1",
-        "dom-scroll-into-view": "^2.0.0",
-        "lodash": "^4.17.21",
-        "lodash-es": "^4.17.15",
-        "resize-observer-polyfill": "^1.5.1",
-        "scroll-into-view-if-needed": "^2.2.25",
-        "shallow-equal": "^1.0.0",
-        "stylis": "^4.1.3",
-        "throttle-debounce": "^5.0.0",
-        "vue-types": "^3.0.0",
-        "warning": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=12.22.0"
-      },
-      "peerDependencies": {
-        "vue": ">=3.2.0"
-      }
-    },
     "node_modules/any-promise": {
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/any-promise/-/any-promise-1.3.0.tgz",
@@ -4596,11 +4509,6 @@
       "integrity": "sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng==",
       "dev": true
     },
-    "node_modules/array-tree-filter": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmmirror.com/array-tree-filter/-/array-tree-filter-2.1.0.tgz",
-      "integrity": "sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw=="
-    },
     "node_modules/array-union": {
       "version": "2.1.0",
       "resolved": "https://registry.npmmirror.com/array-union/-/array-union-2.1.0.tgz",
@@ -4637,11 +4545,6 @@
         "lodash": "^4.17.14"
       }
     },
-    "node_modules/async-validator": {
-      "version": "4.2.5",
-      "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz",
-      "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
-    },
     "node_modules/at-least-node": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz",
@@ -5486,11 +5389,6 @@
       "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
       "dev": true
     },
-    "node_modules/compute-scroll-into-view": {
-      "version": "1.0.20",
-      "resolved": "https://registry.npmmirror.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.20.tgz",
-      "integrity": "sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg=="
-    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz",
@@ -5991,11 +5889,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/dayjs": {
-      "version": "1.11.9",
-      "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.9.tgz",
-      "integrity": "sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA=="
-    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmmirror.com/debug/-/debug-4.3.4.tgz",
@@ -6191,11 +6084,6 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/dom-align": {
-      "version": "1.12.4",
-      "resolved": "https://registry.npmmirror.com/dom-align/-/dom-align-1.12.4.tgz",
-      "integrity": "sha512-R8LUSEay/68zE5c8/3BDxiTEvgb4xZTF0RKmAHfiEVN3klfIpXfi2/QCoiWPccVQ0J/ZGdz9OjzL4uJEP/MRAw=="
-    },
     "node_modules/dom-converter": {
       "version": "0.2.0",
       "resolved": "https://registry.npmmirror.com/dom-converter/-/dom-converter-0.2.0.tgz",
@@ -6205,11 +6093,6 @@
         "utila": "~0.4"
       }
     },
-    "node_modules/dom-scroll-into-view": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmmirror.com/dom-scroll-into-view/-/dom-scroll-into-view-2.0.1.tgz",
-      "integrity": "sha512-bvVTQe1lfaUr1oFzZX80ce9KLDlZ3iU+XGNE/bz9HnGdklTieqsbmsLHe+rT2XWqopvL0PckkYqN7ksmm5pe3w=="
-    },
     "node_modules/dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmmirror.com/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -8628,7 +8511,8 @@
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true
     },
     "node_modules/js-yaml": {
       "version": "4.1.0",
@@ -8920,11 +8804,6 @@
       "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
-    "node_modules/lodash-es": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz",
-      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
-    },
     "node_modules/lodash.camelcase": {
       "version": "4.3.0",
       "resolved": "https://registry.npmmirror.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
@@ -9150,17 +9029,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/loose-envify": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmmirror.com/loose-envify/-/loose-envify-1.4.0.tgz",
-      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "dependencies": {
-        "js-tokens": "^3.0.0 || ^4.0.0"
-      },
-      "bin": {
-        "loose-envify": "cli.js"
-      }
-    },
     "node_modules/lower-case": {
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/lower-case/-/lower-case-2.0.2.tgz",
@@ -9543,11 +9411,6 @@
         "node": "^14 || ^16 || >=18"
       }
     },
-    "node_modules/nanopop": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmmirror.com/nanopop/-/nanopop-2.3.0.tgz",
-      "integrity": "sha512-fzN+T2K7/Ah25XU02MJkPZ5q4Tj5FpjmIYq4rvoHX4yb16HzFdCO6JxFFn5Y/oBhQ8no8fUZavnyIv9/+xkBBw=="
-    },
     "node_modules/natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmmirror.com/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -11410,7 +11273,8 @@
     "node_modules/regenerator-runtime": {
       "version": "0.13.11",
       "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+      "dev": true
     },
     "node_modules/regenerator-transform": {
       "version": "0.15.1",
@@ -11524,11 +11388,6 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "dev": true
     },
-    "node_modules/resize-observer-polyfill": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
-      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
-    },
     "node_modules/resolve": {
       "version": "1.22.2",
       "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.2.tgz",
@@ -11798,14 +11657,6 @@
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
       "dev": true
     },
-    "node_modules/scroll-into-view-if-needed": {
-      "version": "2.2.31",
-      "resolved": "https://registry.npmmirror.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.31.tgz",
-      "integrity": "sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==",
-      "dependencies": {
-        "compute-scroll-into-view": "^1.0.20"
-      }
-    },
     "node_modules/select": {
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/select/-/select-1.1.2.tgz",
@@ -12032,11 +11883,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/shallow-equal": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmmirror.com/shallow-equal/-/shallow-equal-1.2.1.tgz",
-      "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
-    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -12794,11 +12640,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/stylis": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmmirror.com/stylis/-/stylis-4.3.0.tgz",
-      "integrity": "sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ=="
-    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
@@ -13145,14 +12986,6 @@
         "node": ">= 10.13.0"
       }
     },
-    "node_modules/throttle-debounce": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-5.0.0.tgz",
-      "integrity": "sha512-2iQTSgkkc1Zyk0MeVrt/3BvuOXYPl/R8Z0U2xxo9rjwNciaHDG3R+Lm6dh4EeUci49DanvBnuqI6jshoQQRGEg==",
-      "engines": {
-        "node": ">=12.22"
-      }
-    },
     "node_modules/through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmmirror.com/through/-/through-2.3.8.tgz",
@@ -13702,28 +13535,6 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
-    "node_modules/vue-types": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmmirror.com/vue-types/-/vue-types-3.0.2.tgz",
-      "integrity": "sha512-IwUC0Aq2zwaXqy74h4WCvFCUtoV0iSWr0snWnE9TnU18S66GAQyqQbRf2qfJtUuiFsBf6qp0MEwdonlwznlcrw==",
-      "dependencies": {
-        "is-plain-object": "3.0.1"
-      },
-      "engines": {
-        "node": ">=10.15.0"
-      },
-      "peerDependencies": {
-        "vue": "^3.0.0"
-      }
-    },
-    "node_modules/vue-types/node_modules/is-plain-object": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmmirror.com/is-plain-object/-/is-plain-object-3.0.1.tgz",
-      "integrity": "sha512-Xnpx182SBMrr/aBik8y+GuR4U1L9FqMSojwDQwPMmxyC6bvEqly9UBCxhauBF5vNh2gwWJNX6oDV7O+OM4z34g==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/vuedraggable": {
       "version": "4.1.0",
       "resolved": "https://registry.npmmirror.com/vuedraggable/-/vuedraggable-4.1.0.tgz",
@@ -13740,14 +13551,6 @@
       "resolved": "https://registry.npmmirror.com/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
       "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ=="
     },
-    "node_modules/warning": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmmirror.com/warning/-/warning-4.0.3.tgz",
-      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
-      "dependencies": {
-        "loose-envify": "^1.0.0"
-      }
-    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.0.tgz",
@@ -14794,28 +14597,6 @@
         "@jridgewell/trace-mapping": "^0.3.9"
       }
     },
-    "@ant-design/colors": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmmirror.com/@ant-design/colors/-/colors-6.0.0.tgz",
-      "integrity": "sha512-qAZRvPzfdWHtfameEGP2Qvuf838NhergR35o+EuVyB5XvSA98xod5r4utvi4TJ3ywmevm290g9nsCG5MryrdWQ==",
-      "requires": {
-        "@ctrl/tinycolor": "^3.4.0"
-      }
-    },
-    "@ant-design/icons-svg": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmmirror.com/@ant-design/icons-svg/-/icons-svg-4.2.1.tgz",
-      "integrity": "sha512-EB0iwlKDGpG93hW8f85CTJTs4SvMX7tt5ceupvhALp1IF44SeUFOMhKUOYqpsoYWQKAOuTRDMqn75rEaKDp0Xw=="
-    },
-    "@ant-design/icons-vue": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmmirror.com/@ant-design/icons-vue/-/icons-vue-6.1.0.tgz",
-      "integrity": "sha512-EX6bYm56V+ZrKN7+3MT/ubDkvJ5rK/O2t380WFRflDcVFgsvl3NLH7Wxeau6R8DbrO5jWR6DSTC3B6gYFp77AA==",
-      "requires": {
-        "@ant-design/colors": "^6.0.0",
-        "@ant-design/icons-svg": "^4.2.1"
-      }
-    },
     "@apideck/better-ajv-errors": {
       "version": "0.3.6",
       "resolved": "https://registry.npmmirror.com/@apideck/better-ajv-errors/-/better-ajv-errors-0.3.6.tgz",
@@ -16081,6 +15862,7 @@
       "version": "7.22.6",
       "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.22.6.tgz",
       "integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==",
+      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.11"
       }
@@ -16365,27 +16147,12 @@
       "dev": true,
       "requires": {}
     },
-    "@ctrl/tinycolor": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.6.0.tgz",
-      "integrity": "sha512-/Z3l6pXthq0JvMYdUFyX9j0MaCltlIn6mfh9jLyQwg5aPKxkyNa0PTHtU1AlFXLNk55ZuAeJRcpvq+tmLfKmaQ=="
-    },
     "@discoveryjs/json-ext": {
       "version": "0.5.7",
       "resolved": "https://registry.npmmirror.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
       "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
       "dev": true
     },
-    "@emotion/hash": {
-      "version": "0.9.1",
-      "resolved": "https://registry.npmmirror.com/@emotion/hash/-/hash-0.9.1.tgz",
-      "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
-    },
-    "@emotion/unitless": {
-      "version": "0.8.1",
-      "resolved": "https://registry.npmmirror.com/@emotion/unitless/-/unitless-0.8.1.tgz",
-      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
-    },
     "@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmmirror.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -16731,15 +16498,6 @@
       "integrity": "sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==",
       "dev": true
     },
-    "@simonwep/pickr": {
-      "version": "1.8.2",
-      "resolved": "https://registry.npmmirror.com/@simonwep/pickr/-/pickr-1.8.2.tgz",
-      "integrity": "sha512-/l5w8BIkrpP6n1xsetx9MWPWlU6OblN5YgZZphxan0Tq4BByTCETL6lyIeY8lagalS2Nbt4F2W034KHLIiunKA==",
-      "requires": {
-        "core-js": "^3.15.1",
-        "nanopop": "^2.1.0"
-      }
-    },
     "@sinclair/typebox": {
       "version": "0.27.8",
       "resolved": "https://registry.npmmirror.com/@sinclair/typebox/-/typebox-0.27.8.tgz",
@@ -18158,35 +17916,6 @@
         "color-convert": "^2.0.1"
       }
     },
-    "ant-design-vue": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmmirror.com/ant-design-vue/-/ant-design-vue-4.0.0.tgz",
-      "integrity": "sha512-6V8DxHPv3HJYDdv48W/KFOUjeZDsYJhFlk13HFSKCJSR2MQs4YnPIAC+rWie9vYcVEKbO+cQDqiOM3cBoHMNUQ==",
-      "requires": {
-        "@ant-design/colors": "^6.0.0",
-        "@ant-design/icons-vue": "^6.1.0",
-        "@babel/runtime": "^7.10.5",
-        "@ctrl/tinycolor": "^3.5.0",
-        "@emotion/hash": "^0.9.0",
-        "@emotion/unitless": "^0.8.0",
-        "@simonwep/pickr": "~1.8.0",
-        "array-tree-filter": "^2.1.0",
-        "async-validator": "^4.0.0",
-        "csstype": "^3.1.1",
-        "dayjs": "^1.10.5",
-        "dom-align": "^1.12.1",
-        "dom-scroll-into-view": "^2.0.0",
-        "lodash": "^4.17.21",
-        "lodash-es": "^4.17.15",
-        "resize-observer-polyfill": "^1.5.1",
-        "scroll-into-view-if-needed": "^2.2.25",
-        "shallow-equal": "^1.0.0",
-        "stylis": "^4.1.3",
-        "throttle-debounce": "^5.0.0",
-        "vue-types": "^3.0.0",
-        "warning": "^4.0.0"
-      }
-    },
     "any-promise": {
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/any-promise/-/any-promise-1.3.0.tgz",
@@ -18243,11 +17972,6 @@
       "integrity": "sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng==",
       "dev": true
     },
-    "array-tree-filter": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmmirror.com/array-tree-filter/-/array-tree-filter-2.1.0.tgz",
-      "integrity": "sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw=="
-    },
     "array-union": {
       "version": "2.1.0",
       "resolved": "https://registry.npmmirror.com/array-union/-/array-union-2.1.0.tgz",
@@ -18275,11 +17999,6 @@
         "lodash": "^4.17.14"
       }
     },
-    "async-validator": {
-      "version": "4.2.5",
-      "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz",
-      "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
-    },
     "at-least-node": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz",
@@ -18971,11 +18690,6 @@
         }
       }
     },
-    "compute-scroll-into-view": {
-      "version": "1.0.20",
-      "resolved": "https://registry.npmmirror.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.20.tgz",
-      "integrity": "sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg=="
-    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz",
@@ -19350,11 +19064,6 @@
       "integrity": "sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg==",
       "dev": true
     },
-    "dayjs": {
-      "version": "1.11.9",
-      "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.9.tgz",
-      "integrity": "sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA=="
-    },
     "debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmmirror.com/debug/-/debug-4.3.4.tgz",
@@ -19501,11 +19210,6 @@
         "esutils": "^2.0.2"
       }
     },
-    "dom-align": {
-      "version": "1.12.4",
-      "resolved": "https://registry.npmmirror.com/dom-align/-/dom-align-1.12.4.tgz",
-      "integrity": "sha512-R8LUSEay/68zE5c8/3BDxiTEvgb4xZTF0RKmAHfiEVN3klfIpXfi2/QCoiWPccVQ0J/ZGdz9OjzL4uJEP/MRAw=="
-    },
     "dom-converter": {
       "version": "0.2.0",
       "resolved": "https://registry.npmmirror.com/dom-converter/-/dom-converter-0.2.0.tgz",
@@ -19515,11 +19219,6 @@
         "utila": "~0.4"
       }
     },
-    "dom-scroll-into-view": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmmirror.com/dom-scroll-into-view/-/dom-scroll-into-view-2.0.1.tgz",
-      "integrity": "sha512-bvVTQe1lfaUr1oFzZX80ce9KLDlZ3iU+XGNE/bz9HnGdklTieqsbmsLHe+rT2XWqopvL0PckkYqN7ksmm5pe3w=="
-    },
     "dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmmirror.com/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -21488,7 +21187,8 @@
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true
     },
     "js-yaml": {
       "version": "4.1.0",
@@ -21728,11 +21428,6 @@
       "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
-    "lodash-es": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz",
-      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
-    },
     "lodash.camelcase": {
       "version": "4.3.0",
       "resolved": "https://registry.npmmirror.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
@@ -21927,14 +21622,6 @@
         }
       }
     },
-    "loose-envify": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmmirror.com/loose-envify/-/loose-envify-1.4.0.tgz",
-      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "requires": {
-        "js-tokens": "^3.0.0 || ^4.0.0"
-      }
-    },
     "lower-case": {
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/lower-case/-/lower-case-2.0.2.tgz",
@@ -22242,11 +21929,6 @@
       "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-4.0.2.tgz",
       "integrity": "sha512-7ZtY5KTCNheRGfEFxnedV5zFiORN1+Y1N6zvPTnHQd8ENUvfaDBeuJDZb2bN/oXwXxu3qkTXDzy57W5vAmDTBw=="
     },
-    "nanopop": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmmirror.com/nanopop/-/nanopop-2.3.0.tgz",
-      "integrity": "sha512-fzN+T2K7/Ah25XU02MJkPZ5q4Tj5FpjmIYq4rvoHX4yb16HzFdCO6JxFFn5Y/oBhQ8no8fUZavnyIv9/+xkBBw=="
-    },
     "natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmmirror.com/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -23669,7 +23351,8 @@
     "regenerator-runtime": {
       "version": "0.13.11",
       "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+      "dev": true
     },
     "regenerator-transform": {
       "version": "0.15.1",
@@ -23764,11 +23447,6 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "dev": true
     },
-    "resize-observer-polyfill": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
-      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
-    },
     "resolve": {
       "version": "1.22.2",
       "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.2.tgz",
@@ -23975,14 +23653,6 @@
         }
       }
     },
-    "scroll-into-view-if-needed": {
-      "version": "2.2.31",
-      "resolved": "https://registry.npmmirror.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.31.tgz",
-      "integrity": "sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==",
-      "requires": {
-        "compute-scroll-into-view": "^1.0.20"
-      }
-    },
     "select": {
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/select/-/select-1.1.2.tgz",
@@ -24184,11 +23854,6 @@
         "kind-of": "^6.0.2"
       }
     },
-    "shallow-equal": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmmirror.com/shallow-equal/-/shallow-equal-1.2.1.tgz",
-      "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
-    },
     "shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -24803,11 +24468,6 @@
         }
       }
     },
-    "stylis": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmmirror.com/stylis/-/stylis-4.3.0.tgz",
-      "integrity": "sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ=="
-    },
     "supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
@@ -25080,11 +24740,6 @@
         }
       }
     },
-    "throttle-debounce": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-5.0.0.tgz",
-      "integrity": "sha512-2iQTSgkkc1Zyk0MeVrt/3BvuOXYPl/R8Z0U2xxo9rjwNciaHDG3R+Lm6dh4EeUci49DanvBnuqI6jshoQQRGEg=="
-    },
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmmirror.com/through/-/through-2.3.8.tgz",
@@ -25510,21 +25165,6 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
-    "vue-types": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmmirror.com/vue-types/-/vue-types-3.0.2.tgz",
-      "integrity": "sha512-IwUC0Aq2zwaXqy74h4WCvFCUtoV0iSWr0snWnE9TnU18S66GAQyqQbRf2qfJtUuiFsBf6qp0MEwdonlwznlcrw==",
-      "requires": {
-        "is-plain-object": "3.0.1"
-      },
-      "dependencies": {
-        "is-plain-object": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmmirror.com/is-plain-object/-/is-plain-object-3.0.1.tgz",
-          "integrity": "sha512-Xnpx182SBMrr/aBik8y+GuR4U1L9FqMSojwDQwPMmxyC6bvEqly9UBCxhauBF5vNh2gwWJNX6oDV7O+OM4z34g=="
-        }
-      }
-    },
     "vuedraggable": {
       "version": "4.1.0",
       "resolved": "https://registry.npmmirror.com/vuedraggable/-/vuedraggable-4.1.0.tgz",
@@ -25538,14 +25178,6 @@
       "resolved": "https://registry.npmmirror.com/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
       "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ=="
     },
-    "warning": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmmirror.com/warning/-/warning-4.0.3.tgz",
-      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
-      "requires": {
-        "loose-envify": "^1.0.0"
-      }
-    },
     "watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.0.tgz",
diff --git a/package.json b/package.json
index 5c9adb3f..c40dee36 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,6 @@
   "dependencies": {
     "@icon-park/vue-next": "^1.4.2",
     "animate.css": "^4.1.1",
-    "ant-design-vue": "^4.0.0",
     "chartist": "^1.3.0",
     "clipboard": "^2.0.11",
     "core-js": "^3.8.3",
diff --git a/src/App.vue b/src/App.vue
index 0181a17d..f6f121cd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,18 +1,7 @@
 <template>
-  <ConfigProvider
-    :theme="{
-      token: {
-        colorPrimary: '#d14424',
-        colorText: '#41464b',
-        borderRadius: 2,
-        fontSize: 13,
-      },
-    }"
-  >
-    <Screen v-if="screening" />
-    <Editor v-else-if="_isPC" />
-    <Mobile v-else />
-  </ConfigProvider>
+  <Screen v-if="screening" />
+  <Editor v-else-if="_isPC" />
+  <Mobile v-else />
 </template>
 
 <script lang="ts" setup>
@@ -27,8 +16,6 @@ import Editor from './views/Editor/index.vue'
 import Screen from './views/Screen/index.vue'
 import Mobile from './views/Mobile/index.vue'
 
-import { ConfigProvider } from 'ant-design-vue'
-
 const _isPC = isPC()
 
 const mainStore = useMainStore()
diff --git a/src/assets/styles/global.scss b/src/assets/styles/global.scss
index 6c1ba010..20541c98 100644
--- a/src/assets/styles/global.scss
+++ b/src/assets/styles/global.scss
@@ -130,7 +130,7 @@ textarea {
 ::-webkit-scrollbar {
   width: 5px;
   height: 5px;
-  background-color: #fff;
+  background-color: transparent;
 }
 ::-webkit-scrollbar-thumb {
   background-color: #c1c1c1;
diff --git a/src/components/ButtonGroup.vue b/src/components/ButtonGroup.vue
index 3bfd491d..7da25077 100644
--- a/src/components/ButtonGroup.vue
+++ b/src/components/ButtonGroup.vue
@@ -12,33 +12,25 @@
 .button-group {
   display: flex;
   align-items: center;
+  border: 1px solid #d9d9d9;
+  border-right: 0;
+  border-radius: $borderRadius;
+  overflow: hidden;
 
   ::v-deep(.button) {
     border-radius: 0;
-    border-left-width: 0;
-    border-right-width: 0;
+    border: 0;
     display: inline-block;
+    position: relative;
 
-    & + .button {
-      border-left-width: 1px;
-    }
-
-    &:hover {
-      &.default + .button {
-        border-left-color: $themeColor;
-      }
-    }
-
-    &:first-child {
-      border-top-left-radius: $borderRadius;
-      border-bottom-left-radius: $borderRadius;
-      border-left-width: 1px;
-    }
-
-    &:last-child {
-      border-top-right-radius: $borderRadius;
-      border-bottom-right-radius: $borderRadius;
-      border-right-width: 1px;
+    &::after {
+      content: '';
+      width: 1px;
+      height: 100%;
+      background-color: #d9d9d9;
+      position: absolute;
+      top: 0;
+      right: 0;
     }
   }
 }
diff --git a/src/components/Popover.vue b/src/components/Popover.vue
index 855e3fce..b8043ec6 100644
--- a/src/components/Popover.vue
+++ b/src/components/Popover.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="popover" ref="triggerRef">
+  <div class="popover" :class="{ 'center': center }" ref="triggerRef">
     <div class="popover-content" :style="contentStyle" ref="contentRef">
       <slot name="content" v-if="contentVisible"></slot>
     </div>
@@ -14,14 +14,17 @@ import tippy, { type Instance, type Placement } from 'tippy.js'
 import 'tippy.js/animations/scale.css'
 
 const props = withDefaults(defineProps<{
-  value: boolean
+  value?: boolean
   trigger?: 'click' | 'mouseenter'
   placement?: Placement
   appendTo?: HTMLElement | 'parent'
   contentStyle?: CSSProperties
+  center?: boolean
 }>(), {
+  value: false,
   trigger: 'click',
-  placement: 'auto',
+  placement: 'bottom',
+  center: false,
 })
 
 const emit = defineEmits<{
@@ -70,6 +73,11 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
+.popover.center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 .popover-content {
   background-color: #fff;
   padding: 10px;
diff --git a/src/components/PopoverMenuItem.vue b/src/components/PopoverMenuItem.vue
new file mode 100644
index 00000000..4102a377
--- /dev/null
+++ b/src/components/PopoverMenuItem.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="popover-menu-item" :class="{ 'center': center }" @click="emit('click')">
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+withDefaults(defineProps<{
+  center?: boolean
+}>(), {
+  center: false,
+})
+
+const emit = defineEmits<{
+  (event: 'click'): void
+}>()
+</script>
+
+<style lang="scss" scoped>
+.popover-menu-item {
+  min-width: 80px;
+  padding: 6px 10px;
+  border-radius: 2px;
+  font-size: 13px;
+  cursor: pointer;
+
+  &.center {
+    text-align: center;
+  }
+
+  &:hover {
+    background-color: #f1f1f1;
+  }
+  & + .popover-menu-item {
+    margin-top: 2px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Select.vue b/src/components/Select.vue
index e5b7bc1f..d656448b 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -23,15 +23,18 @@
     <template #content>
       <div class="options" :style="{ width: width + 2 + 'px' }">
         <div class="option" 
-          :class="{ 'disabled': option.disabled }"
+          :class="{
+            'disabled': option.disabled,
+            'selected': option.value === value,
+          }"
           v-for="option in options" 
-          :key="option.key"
+          :key="option.value"
           @click="handleSelect(option)"
-        >{{ option.value }}</div>
+        >{{ option.label }}</div>
       </div>
     </template>
     <div class="select" ref="selectRef">
-      <div class="selector">{{ value }}</div>
+      <div class="selector">{{ showLabel }}</div>
       <div class="icon">
         <slot name="icon">
           <IconDown :size="14" />
@@ -42,16 +45,16 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 import Popover from './Popover.vue'
 
 interface SelectOption {
-  key: string
+  label: string
   value: string | number
   disabled?: boolean
 }
 
-withDefaults(defineProps<{
+const props = withDefaults(defineProps<{
   value: string | number
   options: SelectOption[]
   disabled?: boolean
@@ -59,6 +62,10 @@ withDefaults(defineProps<{
   disabled: false,
 })
 
+const showLabel = computed(() => {
+  return props.options.find(item => item.value === props.value)?.label || props.value
+})
+
 const emit = defineEmits<{
   (event: 'update:value', payload: string | number): void
 }>()
@@ -138,11 +145,14 @@ const handleSelect = (option: SelectOption) => {
   @include ellipsis-oneline();
 
   &.disabled {
-    background-color: #f5f5f5;
     color: #b7b7b7;
     cursor: default;
   }
-  &:not(.disabled):hover {
+  &:not(.disabled, .selected):hover {
+    background-color: rgba($color: #666, $alpha: .05);
+  }
+
+  &.selected {
     background-color: rgba($color: $themeColor, $alpha: .05);
   }
 }
diff --git a/src/views/Editor/Canvas/LinkDialog.vue b/src/views/Editor/Canvas/LinkDialog.vue
index 0934185b..26c3aac0 100644
--- a/src/views/Editor/Canvas/LinkDialog.vue
+++ b/src/views/Editor/Canvas/LinkDialog.vue
@@ -17,14 +17,8 @@
       class="input"
       v-if="type === 'slide'"
       v-model:value="slideId"
-    >
-      <SelectOption 
-        v-for="(slide, index) in slides" 
-        :key="slide.id" 
-        :value="slide.id" 
-        :disabled="currentSlide.id === slide.id"
-      >幻灯片 {{index + 1}}</SelectOption>
-    </Select>
+      :options="slideOptions"
+    />
 
     <div class="preview" v-if="type === 'slide' && selectedSlide">
       <div>预览：</div>
@@ -49,8 +43,7 @@ import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
 import Tabs from '@/components/Tabs.vue'
 import Input from '@/components/Input.vue'
 import Button from '@/components/Button.vue'
-import { Select } from 'ant-design-vue'
-const SelectOption = Select.Option
+import Select from '@/components/Select.vue'
 
 type TypeKey = 'web' | 'slide'
 interface TabItem {
@@ -69,6 +62,14 @@ const type = ref<TypeKey>('web')
 const address = ref('')
 const slideId = ref('')
 
+const slideOptions = computed(() => {
+  return slides.value.map((item, index) => ({
+    label: `幻灯片 ${index + 1}`,
+    value: item.id,
+    disabled: currentSlide.value.id === item.id,
+  }))
+})
+
 slideId.value = slides.value.find(item => item.id !== currentSlide.value.id)?.id || ''
 
 const selectedSlide = computed(() => {
diff --git a/src/views/Editor/CanvasTool/index.vue b/src/views/Editor/CanvasTool/index.vue
index 141c660c..574c3fa7 100644
--- a/src/views/Editor/CanvasTool/index.vue
+++ b/src/views/Editor/CanvasTool/index.vue
@@ -12,10 +12,10 @@
       <div class="handler-item group-btn" v-tooltip="'插入文字'">
         <IconFontSize class="icon" :class="{ 'active': creatingElement?.type === 'text' }" @click="drawText()" />
         
-        <Popover trigger="click" v-model:open="textTypeSelectVisible">
+        <Popover trigger="click" v-model:value="textTypeSelectVisible" style="height: 100%;">
           <template #content>
-            <div class="text-type-item" @click="() => { drawText(); textTypeSelectVisible = false }"><IconTextRotationNone /> 横向文本框</div>
-            <div class="text-type-item" @click="() => { drawText(true); textTypeSelectVisible = false }"><IconTextRotationDown /> 竖向文本框</div>
+            <PopoverMenuItem center @click="() => { drawText(); textTypeSelectVisible = false }"><IconTextRotationNone /> 横向文本框</PopoverMenuItem>
+            <PopoverMenuItem center @click="() => { drawText(true); textTypeSelectVisible = false }"><IconTextRotationDown /> 竖向文本框</PopoverMenuItem>
           </template>
           <IconDown class="arrow" />
         </Popover>
@@ -23,25 +23,25 @@
       <FileInput @change="files => insertImageElement(files)">
         <IconPicture class="handler-item" v-tooltip="'插入图片'" />
       </FileInput>
-      <Popover trigger="click" v-model:open="shapePoolVisible">
+      <Popover trigger="click" v-model:value="shapePoolVisible">
         <template #content>
           <ShapePool @select="shape => drawShape(shape)" />
         </template>
         <IconGraphicDesign class="handler-item" :class="{ 'active': creatingCustomShape || creatingElement?.type === 'shape' }" v-tooltip="'插入形状'" />
       </Popover>
-      <Popover trigger="click" v-model:open="linePoolVisible">
+      <Popover trigger="click" v-model:value="linePoolVisible">
         <template #content>
           <LinePool @select="line => drawLine(line)" />
         </template>
         <IconConnection class="handler-item" :class="{ 'active': creatingElement?.type === 'line' }" v-tooltip="'插入线条'" />
       </Popover>
-      <Popover trigger="click" v-model:open="chartPoolVisible">
+      <Popover trigger="click" v-model:value="chartPoolVisible">
         <template #content>
           <ChartPool @select="chart => { createChartElement(chart); chartPoolVisible = false }" />
         </template>
         <IconChartProportion class="handler-item" v-tooltip="'插入图表'" />
       </Popover>
-      <Popover trigger="click" v-model:open="tableGeneratorVisible">
+      <Popover trigger="click" v-model:value="tableGeneratorVisible">
         <template #content>
           <TableGenerator
             @close="tableGeneratorVisible = false"
@@ -51,7 +51,7 @@
         <IconInsertTable class="handler-item" v-tooltip="'插入表格'" />
       </Popover>
       <IconFormula class="handler-item" v-tooltip="'插入公式'" @click="latexEditorVisible = true" />
-      <Popover trigger="click" v-model:open="mediaInputVisible">
+      <Popover trigger="click" v-model:value="mediaInputVisible">
         <template #content>
           <MediaInput 
             @close="mediaInputVisible = false"
@@ -65,16 +65,14 @@
 
     <div class="right-handler">
       <IconMinus class="handler-item viewport-size" @click="scaleCanvas('-')" />
-      <Popover trigger="click" v-model:open="canvasScaleVisible">
+      <Popover trigger="click" v-model:value="canvasScaleVisible">
         <template #content>
-          <div class="viewport-size-preset">
-            <div 
-              class="preset-item" 
-              v-for="item in canvasScalePresetList" 
-              :key="item" 
-              @click="applyCanvasPresetScale(item)"
-            >{{item}}%</div>
-          </div>
+          <PopoverMenuItem
+            center
+            v-for="item in canvasScalePresetList" 
+            :key="item" 
+            @click="applyCanvasPresetScale(item)"
+          >{{item}}%</PopoverMenuItem>
         </template>
         <span class="text">{{canvasScalePercentage}}</span>
       </Popover>
@@ -114,7 +112,8 @@ import LaTeXEditor from '@/components/LaTeXEditor/index.vue'
 import FileInput from '@/components/FileInput.vue'
 import Modal from '@/components/Modal.vue'
 import Divider from '@/components/Divider.vue'
-import { Popover } from 'ant-design-vue'
+import Popover from '@/components/Popover.vue'
+import PopoverMenuItem from '@/components/PopoverMenuItem.vue'
 
 const mainStore = useMainStore()
 const { creatingElement, creatingCustomShape } = storeToRefs(mainStore)
@@ -300,6 +299,7 @@ const openSraechPanel = () => {
   align-items: center;
 
   .text {
+    display: inline-block;
     width: 40px;
     text-align: center;
     cursor: pointer;
@@ -309,27 +309,6 @@ const openSraechPanel = () => {
     font-size: 13px;
   }
 }
-.preset-item {
-  padding: 8px 20px;
-  text-align: center;
-  cursor: pointer;
-
-  &:hover {
-    color: $themeColor;
-  }
-}
-.text-type-item {
-  padding: 5px 10px;
-  cursor: pointer;
-
-  &:hover {
-    background-color: #f1f1f1;
-  }
-
-  & + .text-type-item {
-    margin-top: 3px;
-  }
-}
 
 @media screen and (width <= 1024px) {
   .text {
diff --git a/src/views/Editor/EditorHeader/index.vue b/src/views/Editor/EditorHeader/index.vue
index c2d03021..57bf12d6 100644
--- a/src/views/Editor/EditorHeader/index.vue
+++ b/src/views/Editor/EditorHeader/index.vue
@@ -1,21 +1,19 @@
 <template>
   <div class="editor-header">
     <div class="left">
-      <Popover trigger="click" placement="bottomLeft" v-model:open="mainMenuVisible">
+      <Popover trigger="click" placement="bottom-start" v-model:value="mainMenuVisible">
         <template #content>
-          <div class="popover-list">
-            <FileInput accept=".pptist"  @change="files => importSpecificFile(files)">
-              <div class="popover-item" @click="mainMenuVisible = false">导入 pptist 文件</div>
-            </FileInput>
-            <FileInput accept="application/vnd.openxmlformats-officedocument.presentationml.presentation"  @change="files => importPPTXFile(files)">
-              <div class="popover-item" @click="mainMenuVisible = false">导入 pptx 文件（测试版）</div>
-            </FileInput>
-            <div class="popover-item" @click="setDialogForExport('pptx')">导出文件</div>
-            <div class="popover-item" @click="resetSlides(); mainMenuVisible = false">重置幻灯片</div>
-            <div class="popover-item" @click="goLink('https://github.com/pipipi-pikachu/PPTist/issues')">意见反馈</div>
-            <div class="popover-item" @click="goLink('https://github.com/pipipi-pikachu/PPTist/blob/master/doc/Q&A.md')">常见问题</div>
-            <div class="popover-item" @click="mainMenuVisible = false; hotkeyDrawerVisible = true">快捷键</div>
-          </div>
+          <FileInput accept=".pptist"  @change="files => importSpecificFile(files)">
+            <PopoverMenuItem @click="mainMenuVisible = false">导入 pptist 文件</PopoverMenuItem>
+          </FileInput>
+          <FileInput accept="application/vnd.openxmlformats-officedocument.presentationml.presentation"  @change="files => importPPTXFile(files)">
+            <PopoverMenuItem @click="mainMenuVisible = false">导入 pptx 文件（测试版）</PopoverMenuItem>
+          </FileInput>
+          <PopoverMenuItem @click="setDialogForExport('pptx')">导出文件</PopoverMenuItem>
+          <PopoverMenuItem @click="resetSlides(); mainMenuVisible = false">重置幻灯片</PopoverMenuItem>
+          <PopoverMenuItem @click="goLink('https://github.com/pipipi-pikachu/PPTist/issues')">意见反馈</PopoverMenuItem>
+          <PopoverMenuItem @click="goLink('https://github.com/pipipi-pikachu/PPTist/blob/master/doc/Q&A.md')">常见问题</PopoverMenuItem>
+          <PopoverMenuItem @click="mainMenuVisible = false; hotkeyDrawerVisible = true">快捷键</PopoverMenuItem>
         </template>
         <div class="menu-item"><IconHamburgerButton class="icon" /></div>
       </Popover>
@@ -42,12 +40,10 @@
         <div class="menu-item" v-tooltip="'幻灯片放映'" @click="enterScreening()">
           <IconPpt class="icon" />
         </div>
-        <Popover trigger="click">
+        <Popover trigger="click" center>
           <template #content>
-            <div class="popover-list">
-              <div class="popover-item" @click="enterScreeningFromStart()">从头开始</div>
-              <div class="popover-item" @click="enterScreening()">从当前页开始</div>
-            </div>
+            <PopoverMenuItem @click="enterScreeningFromStart()">从头开始</PopoverMenuItem>
+            <PopoverMenuItem @click="enterScreening()">从当前页开始</PopoverMenuItem>
           </template>
           <div class="arrow-btn"><IconDown class="arrow" /></div>
         </Popover>
@@ -86,7 +82,8 @@ import FileInput from '@/components/FileInput.vue'
 import FullscreenSpin from '@/components/FullscreenSpin.vue'
 import Drawer from '@/components/Drawer.vue'
 import Input from '@/components/Input.vue'
-import { Popover } from 'ant-design-vue'
+import Popover from '@/components/Popover.vue'
+import PopoverMenuItem from '@/components/PopoverMenuItem.vue'
 
 const mainStore = useMainStore()
 const slidesStore = useSlidesStore()
@@ -207,19 +204,4 @@ const setDialogForExport = (type: DialogForExportTypes) => {
   display: inline-block;
   height: 30px;
 }
-.popover-list {
-  display: flex;
-  flex-direction: column;
-  padding: 5px;
-  margin: -12px;
-}
-.popover-item {
-  padding: 6px 10px;
-  border-radius: 2px;
-  cursor: pointer;
-
-  &:hover {
-    background-color: #f1f1f1;
-  }
-}
 </style>
\ No newline at end of file
diff --git a/src/views/Editor/ExportDialog/ExportPDF.vue b/src/views/Editor/ExportDialog/ExportPDF.vue
index 1577cc0e..57e9fa3e 100644
--- a/src/views/Editor/ExportDialog/ExportPDF.vue
+++ b/src/views/Editor/ExportDialog/ExportPDF.vue
@@ -36,11 +36,12 @@
         <Select 
           class="config-item"
           v-model:value="count"
-        >
-          <SelectOption :value="1">1</SelectOption>
-          <SelectOption :value="2">2</SelectOption>
-          <SelectOption :value="3">3</SelectOption>
-        </Select>
+          :options="[
+            { label: '1', value: 1 },
+            { label: '2', value: 2 },
+            { label: '3', value: 3 },
+          ]"
+        />
       </div>
       <div class="row">
         <div class="title">边缘留白：</div>
@@ -71,8 +72,7 @@ import Switch from '@/components/Switch.vue'
 import Button from '@/components/Button.vue'
 import RadioButton from '@/components/RadioButton.vue'
 import RadioGroup from '@/components/RadioGroup.vue'
-import { Select } from 'ant-design-vue'
-const SelectOption = Select.Option
+import Select from '@/components/Select.vue'
 
 const emit = defineEmits<{
   (event: 'close'): void
diff --git a/src/views/Editor/Thumbnails/index.vue b/src/views/Editor/Thumbnails/index.vue
index 39725444..0c1c288b 100644
--- a/src/views/Editor/Thumbnails/index.vue
+++ b/src/views/Editor/Thumbnails/index.vue
@@ -7,7 +7,7 @@
   >
     <div class="add-slide">
       <div class="btn" @click="createSlide()"><IconPlus class="icon" />添加幻灯片</div>
-      <Popover trigger="click" placement="bottomLeft" v-model:open="presetLayoutPopoverVisible">
+      <Popover trigger="click" placement="bottom-start" v-model:value="presetLayoutPopoverVisible" center>
         <template #content>
           <LayoutPool @select="slide => { createSlideByTemplate(slide); presetLayoutPopoverVisible = false }" />
         </template>
@@ -57,8 +57,8 @@ import useLoadSlides from '@/hooks/useLoadSlides'
 
 import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
 import LayoutPool from './LayoutPool.vue'
+import Popover from '@/components/Popover.vue'
 import Draggable from 'vuedraggable'
-import { Popover } from 'ant-design-vue'
 
 const mainStore = useMainStore()
 const slidesStore = useSlidesStore()
@@ -262,6 +262,7 @@ const contextmenusThumbnailItem = (): ContextmenuItem[] => {
   }
   .select-btn {
     width: 30px;
+    height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
diff --git a/src/views/Editor/Toolbar/ElementAnimationPanel.vue b/src/views/Editor/Toolbar/ElementAnimationPanel.vue
index dd84f727..44b6cc16 100644
--- a/src/views/Editor/Toolbar/ElementAnimationPanel.vue
+++ b/src/views/Editor/Toolbar/ElementAnimationPanel.vue
@@ -3,8 +3,9 @@
     <div class="element-animation" v-if="handleElement">
       <Popover 
         trigger="click" 
-        v-model:open="animationPoolVisible" 
-        @openChange="visible => handlePopoverVisibleChange(visible)"
+        v-model:value="animationPoolVisible" 
+        @update:value="visible => handlePopoverVisibleChange(visible)"
+        style="width: 100%;"
       >
         <template #content>
           <Tabs 
@@ -76,27 +77,28 @@
             <Divider style="margin: 16px 0;" />
 
             <div class="config-item">
-              <div style="flex: 3;">持续时长：</div>
+              <div style="width: 35%;">持续时长：</div>
               <NumberInput 
                 :min="500"
                 :max="3000"
                 :step="500"
                 :value="element.duration" 
                 @update:value="value => updateElementAnimationDuration(element.id, value)" 
-                style="flex: 5;" 
+                style="width: 65%;" 
               />
             </div>
             <div class="config-item">
-              <div style="flex: 3;">触发方式：</div>
+              <div style="width: 35%;">触发方式：</div>
               <Select
                 :value="element.trigger"
-                @change="value => updateElementAnimationTrigger(element.id, value as 'click' | 'meantime' | 'auto')"
-                style="flex: 5;"
-              >
-                <SelectOption value="click">主动触发</SelectOption>
-                <SelectOption value="meantime">与上一动画同时</SelectOption>
-                <SelectOption value="auto">上一动画之后</SelectOption>
-              </Select>
+                @update:value="value => updateElementAnimationTrigger(element.id, value as 'click' | 'meantime' | 'auto')"
+                style="width: 65%;"
+                :options="[
+                  { label: '主动触发', value: 'click' },
+                  { label: '与上一动画同时', value: 'meantime' },
+                  { label: '上一动画之后', value: 'auto' },
+                ]"
+              />
             </div>
             <div class="config-item">
               <Button style="flex: 1;" @click="openAnimationPool(element.id)">更换动画</Button>
@@ -130,11 +132,8 @@ import Divider from '@/components/Divider.vue'
 import Button from '@/components/Button.vue'
 import Draggable from 'vuedraggable'
 import NumberInput from '@/components/NumberInput.vue'
-import {
-  Popover,
-  Select,
-} from 'ant-design-vue'
-const SelectOption = Select.Option
+import Select from '@/components/Select.vue'
+import Popover from '@/components/Popover.vue'
 
 const animationEffects: { [key: string]: string } = {}
 for (const effect of ENTER_ANIMATIONS) {
diff --git a/src/views/Editor/Toolbar/ElementPositionPanel.vue b/src/views/Editor/Toolbar/ElementPositionPanel.vue
index 8df19903..a594a1be 100644
--- a/src/views/Editor/Toolbar/ElementPositionPanel.vue
+++ b/src/views/Editor/Toolbar/ElementPositionPanel.vue
@@ -28,26 +28,31 @@
 
     <div class="row">
       <NumberInput
-        prefix="水平："
         :step="5"
         :value="left"
         @update:value="value => updateLeft(value)"
         style="flex: 4;"
-      />
+      >
+        <template #prefix>
+          水平：
+        </template>
+      </NumberInput>
       <div style="flex: 1;"></div>
       <NumberInput
-        prefix="垂直："
         :step="5"
         :value="top"
         @update:value="value => updateTop(value)"
         style="flex: 4;"
-      />
+      >
+        <template #prefix>
+          垂直：
+        </template>
+      </NumberInput>
     </div>
 
     <template v-if="handleElement!.type !== 'line'">
       <div class="row">
         <NumberInput
-          prefix="宽度："
           :min="minSize"
           :max="1500"
           :step="5"
@@ -55,14 +60,17 @@
           :value="width"
           @update:value="value => updateWidth(value)"
           style="flex: 4;"
-        />
+        >
+          <template #prefix>
+            宽度：
+          </template>
+        </NumberInput>
         <template v-if="['image', 'shape', 'audio'].includes(handleElement!.type)">
           <IconLock style="flex: 1;" class="icon-btn" v-tooltip="'解除宽高比锁定'" @click="updateFixedRatio(false)" v-if="fixedRatio" />
           <IconUnlock style="flex: 1;" class="icon-btn" v-tooltip="'宽高比锁定'" @click="updateFixedRatio(true)" v-else />
         </template>
         <div style="flex: 1;" v-else></div>
         <NumberInput 
-          prefix="高度："
           :min="minSize"
           :max="800"
           :step="5"
@@ -70,7 +78,11 @@
           :value="height" 
           @update:value="value => updateHeight(value)"
           style="flex: 4;"
-        />
+        >
+          <template #prefix>
+            高度：
+          </template>
+        </NumberInput>
       </div>
     </template>
 
@@ -79,14 +91,17 @@
 
       <div class="row">
         <NumberInput 
-          prefix="旋转："
           :min="-180"
           :max="180"
           :step="5"
           :value="rotate" 
           @update:value="value => updateRotate(value)" 
           style="flex: 8;" 
-        />
+        >
+          <template #prefix>
+            旋转：
+          </template>
+        </NumberInput>
         <div style="flex: 1;"></div>
         <div class="text-btn" @click="updateRotate45('-')" style="flex: 5;"><IconRotate /> -45°</div>
         <div class="text-btn" @click="updateRotate45('+')"  style="flex: 5;"><IconRotate :style="{ transform: 'rotateY(180deg)' }" /> +45°</div>
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/AudioStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/AudioStylePanel.vue
index 532934f1..19dea5bd 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/AudioStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/AudioStylePanel.vue
@@ -2,14 +2,14 @@
   <div class="audio-style-panel">
     <div class="row">
       <div style="flex: 2;">图标颜色：</div>
-      <Popover trigger="click">
+      <Popover trigger="click" style="flex: 3;">
         <template #content>
           <ColorPicker
             :modelValue="handleAudioElement.color"
             @update:modelValue="value => updateAudio({ color: value })"
           />
         </template>
-        <ColorButton :color="handleAudioElement.color" style="flex: 3;" />
+        <ColorButton :color="handleAudioElement.color" style="width: 100%;" />
       </Popover>
     </div>
 
@@ -45,7 +45,7 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 import ColorButton from '../common/ColorButton.vue'
 import ColorPicker from '@/components/ColorPicker/index.vue'
 import Switch from '@/components/Switch.vue'
-import { Popover } from 'ant-design-vue'
+import Popover from '@/components/Popover.vue'
 
 const slidesStore = useSlidesStore()
 const { handleElement } = storeToRefs(useMainStore())
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue
index e590d90b..c075e161 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue
@@ -48,60 +48,65 @@
     <Divider />
 
     <div class="row">
-      <div style="flex: 2;">图例：</div>
-      <Select style="flex: 3;" :value="legend" @change="value => updateLegend(value as '' | 'top' | 'bottom')">
-        <SelectOption value="">不显示</SelectOption>
-        <SelectOption value="top">显示在上方</SelectOption>
-        <SelectOption value="bottom">显示在下方</SelectOption>
-      </Select>
+      <div style="width: 40%;">图例：</div>
+      <Select 
+        style="width: 60%;" 
+        :value="legend" 
+        @update:value="value => updateLegend(value as '' | 'top' | 'bottom')"
+        :options="[
+          { label: '不显示', value: '' },
+          { label: '显示在上方', value: 'top' },
+          { label: '显示在下方', value: 'bottom' },
+        ]"
+      />
     </div>
 
     <Divider />
 
     <div class="row">
-      <div style="flex: 2;">背景填充：</div>
-      <Popover trigger="click">
+      <div style="width: 40%;">背景填充：</div>
+      <Popover trigger="click" style="width: 60%;">
         <template #content>
           <ColorPicker
             :modelValue="fill"
             @update:modelValue="value => updateFill(value)"
           />
         </template>
-        <ColorButton :color="fill" style="flex: 3;" />
+        <ColorButton :color="fill" style="width: 100%;" />
       </Popover>
     </div>
     <div class="row">
-      <div style="flex: 2;">网格颜色：</div>
-      <Popover trigger="click">
+      <div style="width: 40%;">网格颜色：</div>
+      <Popover trigger="click" style="width: 60%;">
         <template #content>
           <ColorPicker
             :modelValue="gridColor"
             @update:modelValue="value => updateGridColor(value)"
           />
         </template>
-        <ColorButton :color="gridColor" style="flex: 3;" />
+        <ColorButton :color="gridColor" style="width: 100%;" />
       </Popover>
     </div>
 
     <Divider />
 
     <div class="row" v-for="(color, index) in themeColor" :key="index">
-      <div style="flex: 2;">{{index === 0 ? '主题配色：' : ''}}</div>
-      <Popover trigger="click">
+      <div style="width: 40%;">{{index === 0 ? '主题配色：' : ''}}</div>
+      <Popover trigger="click" style="width: 60%;">
         <template #content>
           <ColorPicker
             :modelValue="color"
             @update:modelValue="value => updateTheme(value, index)"
           />
         </template>
-        <div class="color-btn-wrap" style="flex: 3;">
+        <div class="color-btn-wrap" style="width: 100%;">
           <ColorButton :color="color" style="width: 100%;" />
           <div class="delete-color-btn" v-tooltip="'删除'" @click.stop="deleteThemeColor(index)" v-if="index !== 0"><IconCloseSmall /></div>
         </div>
       </Popover>
     </div>
     <ButtonGroup class="row">
-      <Popover trigger="click" v-model:open="presetThemesVisible">
+      <Popover trigger="click" v-model:open="presetThemesVisible" style="width: 40%;">
         <template #content>
           <div class="preset-themes">
             <div class="preset-theme" v-for="(item, index) in presetChartThemes" :key="index">
@@ -118,7 +123,7 @@
             </div>
           </div>
         </template>
-        <Button class="no-padding" style="width: 40%;">推荐主题</Button>
+        <Button class="no-padding" style="width: 100%;">推荐主题</Button>
       </Popover>
       <Button 
         class="no-padding" 
@@ -164,11 +169,8 @@ import Divider from '@/components/Divider.vue'
 import Checkbox from '@/components/Checkbox.vue'
 import Button from '@/components/Button.vue'
 import ButtonGroup from '@/components/ButtonGroup.vue'
-import {
-  Popover,
-  Select,
-} from 'ant-design-vue'
-const SelectOption = Select.Option
+import Select from '@/components/Select.vue'
+import Popover from '@/components/Popover.vue'
 
 const presetChartThemes = [
   ['#d87c7c', '#919e8b', '#d7ab82', '#6e7074', '#61a0a8', '#efa18d'],
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue
index 5f888d70..24e3ac87 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue
@@ -9,7 +9,7 @@
 
     <ButtonGroup class="row">
       <Button style="width: calc(100% / 6 * 5);" @click="clipImage()"><IconTailoring class="btn-icon" /> 裁剪图片</Button>
-      <Popover trigger="click" v-model:open="clipPanelVisible">
+      <Popover trigger="click" v-model:value="clipPanelVisible" style="width: calc(100% / 6);">
         <template #content>
           <div class="clip">
             <div class="title">按形状：</div>
@@ -37,7 +37,7 @@
             </template>
           </div>
         </template>
-        <Button class="popover-btn" style="width: calc(100% / 6);"><IconDown /></Button>
+        <Button class="popover-btn" style="width: 100%;"><IconDown /></Button>
       </Popover>
     </ButtonGroup>
 
@@ -77,7 +77,7 @@ import FileInput from '@/components/FileInput.vue'
 import Divider from '@/components/Divider.vue'
 import Button from '@/components/Button.vue'
 import ButtonGroup from '@/components/ButtonGroup.vue'
-import { Popover } from 'ant-design-vue'
+import Popover from '@/components/Popover.vue'
 
 const shapeClipPathOptions = CLIPPATHS
 const ratioClipOptions = [
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/LatexStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/LatexStylePanel.vue
index 99bd775a..bd988f7c 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/LatexStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/LatexStylePanel.vue
@@ -5,25 +5,25 @@
     <Divider />
 
     <div class="row">
-      <div style="flex: 2;">颜色：</div>
-      <Popover trigger="click">
+      <div style="width: 40%;">颜色：</div>
+      <Popover trigger="click" style="width: 60%;">
         <template #content>
           <ColorPicker
             :modelValue="handleLatexElement.color"
             @update:modelValue="value => updateLatex({ color: value })"
           />
         </template>
-        <ColorButton :color="handleLatexElement.color" style="flex: 3;" />
+        <ColorButton :color="handleLatexElement.color" style="width: 100%;" />
       </Popover>
     </div>
     <div class="row">
-      <div style="flex: 2;">粗细：</div>
+      <div style="width: 40%;">粗细：</div>
       <NumberInput 
         :min="1"
         :max="3"
         :value="handleLatexElement.strokeWidth" 
         @update:value="value => updateLatex({ strokeWidth: value })" 
-        style="flex: 3;" 
+        style="width: 60%;" 
       />
     </div>
 
@@ -55,7 +55,7 @@ import Modal from '@/components/Modal.vue'
 import Divider from '@/components/Divider.vue'
 import Button from '@/components/Button.vue'
 import NumberInput from '@/components/NumberInput.vue'
-import { Popover } from 'ant-design-vue'
+import Popover from '@/components/Popover.vue'
 
 const slidesStore = useSlidesStore()
 const { handleElement } = storeToRefs(useMainStore())
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/LineStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/LineStylePanel.vue
index 5c935eb3..9b9feef7 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/LineStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/LineStylePanel.vue
@@ -1,60 +1,63 @@
 <template>
   <div class="line-style-panel">
     <div class="row">
-      <div style="flex: 2;">线条样式：</div>
+      <div style="width: 40%;">线条样式：</div>
       <Select 
-        style="flex: 3;" 
+        style="width: 60%;" 
         :value="handleLineElement.style" 
-        @change="value => updateLine({ style: value as 'solid' | 'dashed' })"
-      >
-        <SelectOption value="solid">实线</SelectOption>
-        <SelectOption value="dashed">虚线</SelectOption>
-      </Select>
+        @update:value="value => updateLine({ style: value as 'solid' | 'dashed' })"
+        :options="[
+          { label: '实线', value: 'solid' },
+          { label: '虚线', value: 'dashed' },
+        ]"
+      />
     </div>
     <div class="row">
-      <div style="flex: 2;">线条颜色：</div>
-      <Popover trigger="click">
+      <div style="width: 40%;">线条颜色：</div>
+      <Popover trigger="click" style="width: 60%;">
         <template #content>
           <ColorPicker
             :modelValue="handleLineElement.color"
             @update:modelValue="value => updateLine({ color: value })"
           />
         </template>
-        <ColorButton :color="handleLineElement.color" style="flex: 3;" />
+        <ColorButton :color="handleLineElement.color" style="width: 100%;" />
       </Popover>
     </div>
     <div class="row">
-      <div style="flex: 2;">线条宽度：</div>
+      <div style="width: 40%;">线条宽度：</div>
       <NumberInput 
         :value="handleLineElement.width" 
         @update:value="value => updateLine({ width: value })" 
-        style="flex: 3;" 
+        style="width: 60%;" 
       />
     </div>
     
     <div class="row">
-      <div style="flex: 2;">起点样式：</div>
+      <div style="width: 40%;">起点样式：</div>
       <Select 
-        style="flex: 3;" 
+        style="width: 60%;" 
         :value="handleLineElement.points[0]" 
-        @change="value => updateLine({ points: [value as 'arrow' | 'dot', handleLineElement.points[1]] })"
-      >
-        <SelectOption value="">无</SelectOption>
-        <SelectOption value="arrow">箭头</SelectOption>
-        <SelectOption value="dot">圆点</SelectOption>
-      </Select>
+        @update:value="value => updateLine({ points: [value as 'arrow' | 'dot', handleLineElement.points[1]] })"
+        :options="[
+          { label: '无', value: '' },
+          { label: '箭头', value: 'arrow' },
+          { label: '圆点', value: 'dot' },
+        ]"
+      />
     </div>
     <div class="row">
-      <div style="flex: 2;">终点样式：</div>
+      <div style="width: 40%;">终点样式：</div>
       <Select 
-        style="flex: 3;" 
+        style="width: 60%;" 
         :value="handleLineElement.points[1]" 
-        @change="value => updateLine({ points: [handleLineElement.points[0], value as 'arrow' | 'dot'] })"
-      >
-        <SelectOption value="">无</SelectOption>
-        <SelectOption value="arrow">箭头</SelectOption>
-        <SelectOption value="dot">圆点</SelectOption>
-      </Select>
+        @update:value="value => updateLine({ points: [handleLineElement.points[0], value as 'arrow' | 'dot'] })"
+        :options="[
+          { label: '无', value: '' },
+          { label: '箭头', value: 'arrow' },
+          { label: '圆点', value: 'dot' },
+        ]"
+      />
     </div>
 
     <Divider />
@@ -74,11 +77,8 @@ import ColorButton from '../common/ColorButton.vue'
 import ColorPicker from '@/components/ColorPicker/index.vue'
 import Divider from '@/components/Divider.vue'
 import NumberInput from '@/components/NumberInput.vue'
-import {
-  Popover,
-  Select,
-} from 'ant-design-vue'
-const SelectOption = Select.Option
+import Select from '@/components/Select.vue'
+import Popover from '@/components/Popover.vue'
 
 const slidesStore = useSlidesStore()
 const { handleElement } = storeToRefs(useMainStore())
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue
index 1a655fa1..e5e119d6 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue
@@ -1,103 +1,102 @@
 <template>
   <div class="multi-style-panel">
     <div class="row">
-      <div style="flex: 2;">填充颜色：</div>
-      <Popover trigger="click">
+      <div style="width: 40%;">填充颜色：</div>
+      <Popover trigger="click" style="width: 60%;">
         <template #content>
           <ColorPicker
             :modelValue="fill"
             @update:modelValue="value => updateFill(value)"
           />
         </template>
-        <ColorButton :color="fill" style="flex: 3;" />
+        <ColorButton :color="fill" style="width: 100%;" />
       </Popover>
     </div>
 
     <Divider />
 
     <div class="row">
-      <div style="flex: 2;">边框样式：</div>
+      <div style="width: 40%;">边框样式：</div>
       <Select 
-        style="flex: 3;" 
-        :value="outline.style"
-        @change="value => updateOutline({ style: value as 'solid' | 'dashed' })"
-      >
-        <SelectOption value="solid">实线边框</SelectOption>
-        <SelectOption value="dashed">虚线边框</SelectOption>
-      </Select>
+        style="width: 60%;" 
+        :value="outline.style || ''"
+        @update:value="value => updateOutline({ style: value as 'solid' | 'dashed' })"
+        :options="[
+          { label: '实线边框', value: 'solid' },
+          { label: '虚线边框', value: 'dashed' },
+        ]"
+      />
     </div>
     <div class="row">
-      <div style="flex: 2;">边框颜色：</div>
-      <Popover trigger="click">
+      <div style="width: 40%;">边框颜色：</div>
+      <Popover trigger="click" style="width: 60%;">
         <template #content>
           <ColorPicker
             :modelValue="outline.color"
             @update:modelValue="value => updateOutline({ color: value })"
           />
         </template>
-        <ColorButton :color="outline.color || '#000'" style="flex: 3;" />
+        <ColorButton :color="outline.color || '#000'" style="width: 100%;" />
       </Popover>
     </div>
     <div class="row">
-      <div style="flex: 2;">边框粗细：</div>
+      <div style="width: 40%;">边框粗细：</div>
       <NumberInput 
         :value="outline.width || 0"
         @update:value="value => updateOutline({ width: value })" 
-        style="flex: 3;" 
+        style="width: 60%;" 
       />
     </div>
 
     <Divider />
 
-    <InputGroup compact class="row">
+    <SelectGroup class="row">
       <Select
         style="flex: 3;"
         :value="richTextAttrs.fontname"
-        @change="value => updateFontStyle('fontname', value as string)"
+        @update:value="value => updateFontStyle('fontname', value as string)"
+        :options="[
+          ...availableFonts,
+          ...WEB_FONTS
+        ]"
       >
-        <template #suffixIcon><IconFontSize /></template>
-        <SelectOptGroup label="系统字体">
-          <SelectOption v-for="font in availableFonts" :key="font.value" :value="font.value">
-            <span :style="{ fontFamily: font.value }">{{font.label}}</span>
-          </SelectOption>
-        </SelectOptGroup>
-        <SelectOptGroup label="在线字体">
-          <SelectOption v-for="font in WEB_FONTS" :key="font.value" :value="font.value">
-            <span>{{font.label}}</span>
-          </SelectOption>
-        </SelectOptGroup>
+        <template #icon>
+          <IconFontSize />
+        </template>
       </Select>
       <Select
         style="flex: 2;"
         :value="richTextAttrs.fontsize"
-        @change="value => updateFontStyle('fontsize', value as string)"
+        @update:value="value => updateFontStyle('fontsize', value as string)"
+        :options="fontSizeOptions.map(item => ({
+          label: item, value: item
+        }))"
       >
-        <template #suffixIcon><IconAddText /></template>
-        <SelectOption v-for="fontsize in fontSizeOptions" :key="fontsize" :value="fontsize">
-          {{fontsize}}
-        </SelectOption>
+        <template #icon>
+          <IconAddText />
+        </template>
       </Select>
-    </InputGroup>
+    </SelectGroup>
     <ButtonGroup class="row">
-      <Popover trigger="click">
+      <Popover trigger="click" style="flex: 3;">
         <template #content>
           <ColorPicker
             :modelValue="richTextAttrs.color"
             @update:modelValue="value => updateFontStyle('color', value)"
           />
         </template>
-        <TextColorButton :color="richTextAttrs.color" style="flex: 3;" v-tooltip="'文字颜色'">
+        <TextColorButton :color="richTextAttrs.color" style="width: 100%;" v-tooltip="'文字颜色'">
           <IconText />
         </TextColorButton>
       </Popover>
-      <Popover trigger="click">
+      <Popover trigger="click" style="flex: 3;">
         <template #content>
           <ColorPicker
             :modelValue="richTextAttrs.backcolor"
             @update:modelValue="value => updateFontStyle('backcolor', value)"
           />
         </template>
-        <TextColorButton :color="richTextAttrs.backcolor" style="flex: 3;" v-tooltip="'文字高亮'">
+        <TextColorButton :color="richTextAttrs.backcolor" style="width: 100%;" v-tooltip="'文字高亮'">
           <IconHighLight />
         </TextColorButton>
       </Popover>
@@ -145,13 +144,9 @@ import ButtonGroup from '@/components/ButtonGroup.vue'
 import RadioButton from '@/components/RadioButton.vue'
 import RadioGroup from '@/components/RadioGroup.vue'
 import NumberInput from '@/components/NumberInput.vue'
-import {
-  Popover,
-  Select,
-  Input,
-} from 'ant-design-vue'
-const { OptGroup: SelectOptGroup, Option: SelectOption } = Select
-const InputGroup = Input.Group
+import Select from '@/components/Select.vue'
+import SelectGroup from '@/components/SelectGroup.vue'
+import Popover from '@/components/Popover.vue'
 
 const slidesStore = useSlidesStore()
 const { richTextAttrs, availableFonts, activeElementList } = storeToRefs(useMainStore())
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue
index 67d1fbc6..b8c4d9fb 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue
@@ -24,55 +24,57 @@
       <Select 
         style="flex: 10;" 
         :value="fillType" 
-        @change="value => updateFillType(value as 'fill' | 'gradient')"
-      >
-        <SelectOption value="fill">纯色填充</SelectOption>
-        <SelectOption value="gradient">渐变填充</SelectOption>
-      </Select>
+        @update:value="value => updateFillType(value as 'fill' | 'gradient')"
+        :options="[
+          { label: '纯色填充', value: 'fill' },
+          { label: '渐变填充', value: 'gradient' },
+        ]"
+      />
       <div style="flex: 1;"></div>
-      <Popover trigger="click" v-if="fillType === 'fill'">
+      <Popover trigger="click" v-if="fillType === 'fill'" style="flex: 10;">
         <template #content>
           <ColorPicker
             :modelValue="fill"
             @update:modelValue="value => updateFill(value)"
           />
         </template>
-        <ColorButton :color="fill" style="flex: 10;" />
+        <ColorButton :color="fill" style="width: 100%;" />
       </Popover>
       <Select 
         style="flex: 10;" 
         :value="gradient.type" 
-        @change="value => updateGradient({ type: value as 'linear' | 'radial' })"
+        @update:value="value => updateGradient({ type: value as 'linear' | 'radial' })"
         v-else
-      >
-        <SelectOption value="linear">线性渐变</SelectOption>
-        <SelectOption value="radial">径向渐变</SelectOption>
-      </Select>
+        :options="[
+          { label: '线性渐变', value: 'linear' },
+          { label: '径向渐变', value: 'radial' },
+        ]"
+      />
     </div>
     
     <template v-if="fillType === 'gradient'">
       <div class="row">
         <div style="flex: 2;">起点颜色：</div>
-        <Popover trigger="click">
+        <Popover trigger="click" style="flex: 3;">
           <template #content>
             <ColorPicker
               :modelValue="gradient.color[0]"
               @update:modelValue="value => updateGradient({ color: [value, gradient.color[1]] })"
             />
           </template>
-          <ColorButton :color="gradient.color[0]" style="flex: 3;" />
+          <ColorButton :color="gradient.color[0]" style="width: 100%;" />
         </Popover>
       </div>
       <div class="row">
         <div style="flex: 2;">终点颜色：</div>
-        <Popover trigger="click">
+        <Popover trigger="click" style="flex: 3;">
           <template #content>
             <ColorPicker
               :modelValue="gradient.color[1]"
               @update:modelValue="value => updateGradient({ color: [gradient.color[0], value] })"
             />
           </template>
-          <ColorButton :color="gradient.color[1]" style="flex: 3;" />
+          <ColorButton :color="gradient.color[1]" style="width: 100%;" />
         </Popover>
       </div>
       <div class="row" v-if="gradient.type === 'linear'">
@@ -93,57 +95,55 @@
     <Divider />
 
     <template v-if="handleShapeElement.text?.content">
-      <InputGroup compact class="row">
+      <SelectGroup class="row">
         <Select
           class="font-select"
           style="flex: 3;"
           :value="richTextAttrs.fontname"
-          @change="value => emitRichTextCommand('fontname', value as string)"
+          @update:value="value => emitRichTextCommand('fontname', value as string)"
+          :options="[
+            ...availableFonts,
+            ...WEB_FONTS
+          ]"
         >
-          <template #suffixIcon><IconFontSize /></template>
-          <SelectOptGroup label="系统字体">
-            <SelectOption v-for="font in availableFonts" :key="font.value" :value="font.value">
-              <span :style="{ fontFamily: font.value }">{{font.label}}</span>
-            </SelectOption>
-          </SelectOptGroup>
-          <SelectOptGroup label="在线字体">
-            <SelectOption v-for="font in WEB_FONTS" :key="font.value" :value="font.value">
-              <span>{{font.label}}</span>
-            </SelectOption>
-          </SelectOptGroup>
+          <template #icon>
+            <IconFontSize />
+          </template>
         </Select>
         <Select
           style="flex: 2;"
           :value="richTextAttrs.fontsize"
-          @change="value => emitRichTextCommand('fontsize', value as string)"
+          @update:value="value => emitRichTextCommand('fontsize', value as string)"
+          :options="fontSizeOptions.map(item => ({
+            label: item, value: item
+          }))"
         >
-          <template #suffixIcon><IconAddText /></template>
-          <SelectOption v-for="fontsize in fontSizeOptions" :key="fontsize" :value="fontsize">
-            {{fontsize}}
-          </SelectOption>
+          <template #icon>
+            <IconAddText />
+          </template>
         </Select>
-      </InputGroup>
+      </SelectGroup>
 
       <ButtonGroup class="row">
-        <Popover trigger="click">
+        <Popover trigger="click" style="flex: 3;">
           <template #content>
             <ColorPicker
               :modelValue="richTextAttrs.color"
               @update:modelValue="value => emitRichTextCommand('color', value)"
             />
           </template>
-          <TextColorButton v-tooltip="'文字颜色'" :color="richTextAttrs.color" style="flex: 3;">
+          <TextColorButton v-tooltip="'文字颜色'" :color="richTextAttrs.color" style="width: 100%;">
             <IconText />
           </TextColorButton>
         </Popover>
-        <Popover trigger="click">
+        <Popover trigger="click" style="flex: 3;">
           <template #content>
             <ColorPicker
               :modelValue="richTextAttrs.backcolor"
               @update:modelValue="value => emitRichTextCommand('backcolor', value)"
             />
           </template>
-          <TextColorButton v-tooltip="'文字高亮'" :color="richTextAttrs.backcolor" style="flex: 3;">
+          <TextColorButton v-tooltip="'文字高亮'" :color="richTextAttrs.backcolor" style="width: 100%;">
             <IconHighLight />
           </TextColorButton>
         </Popover>
@@ -263,13 +263,9 @@ import Button from '@/components/Button.vue'
 import ButtonGroup from '@/components/ButtonGroup.vue'
 import RadioButton from '@/components/RadioButton.vue'
 import RadioGroup from '@/components/RadioGroup.vue'
-import {
-  Popover,
-  Select,
-  Input,
-} from 'ant-design-vue'
-const { OptGroup: SelectOptGroup, Option: SelectOption } = Select
-const InputGroup = Input.Group
+import Select from '@/components/Select.vue'
+import SelectGroup from '@/components/SelectGroup.vue'
+import Popover from '@/components/Popover.vue'
 
 const mainStore = useMainStore()
 const slidesStore = useSlidesStore()
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue
index 0d2692ae..8687a48f 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue
@@ -1,55 +1,53 @@
 <template>
   <div class="table-style-panel">
-    <InputGroup compact class="row">
+    <SelectGroup class="row">
       <Select
-        style="flex: 3;"
+        style="width: 50%;"
         :value="textAttrs.fontname"
-        @change="value => updateTextAttrs({ fontname: value as string })"
+        @update:value="value => updateTextAttrs({ fontname: value as string })"
+        :options="[
+          ...availableFonts,
+          ...WEB_FONTS
+        ]"
       >
-        <template #suffixIcon><IconFontSize /></template>
-        <SelectOptGroup label="系统字体">
-          <SelectOption v-for="font in availableFonts" :key="font.value" :value="font.value">
-            <span :style="{ fontFamily: font.value }">{{font.label}}</span>
-          </SelectOption>
-        </SelectOptGroup>
-        <SelectOptGroup label="在线字体">
-          <SelectOption v-for="font in WEB_FONTS" :key="font.value" :value="font.value">
-            <span>{{font.label}}</span>
-          </SelectOption>
-        </SelectOptGroup>
+        <template #icon>
+          <IconFontSize />
+        </template>
       </Select>
       <Select
-        style="flex: 2;"
+        style="width: 50%;"
         :value="textAttrs.fontsize"
-        @change="value => updateTextAttrs({ fontsize: value as string })"
+        @update:value="value => updateTextAttrs({ fontsize: value as string })"
+        :options="fontSizeOptions.map(item => ({
+          label: item, value: item
+        }))"
       >
-        <template #suffixIcon><IconAddText /></template>
-        <SelectOption v-for="fontsize in fontSizeOptions" :key="fontsize" :value="fontsize">
-          {{fontsize}}
-        </SelectOption>
+        <template #icon>
+          <IconAddText />
+        </template>
       </Select>
-    </InputGroup>
+    </SelectGroup>
 
     <ButtonGroup class="row">
-      <Popover trigger="click">
+      <Popover trigger="click" style="width: 50%;">
         <template #content>
           <ColorPicker
             :modelValue="textAttrs.color"
             @update:modelValue="value => updateTextAttrs({ color: value })"
           />
         </template>
-        <TextColorButton v-tooltip="'文字颜色'" :color="textAttrs.color" style="flex: 1;">
+        <TextColorButton v-tooltip="'文字颜色'" :color="textAttrs.color" style="width: 100%;">
           <IconText />
         </TextColorButton>
       </Popover>
-      <Popover trigger="click">
+      <Popover trigger="click" style="width: 50%;">
         <template #content>
           <ColorPicker
             :modelValue="textAttrs.backcolor"
             @update:modelValue="value => updateTextAttrs({ backcolor: value })"
           />
         </template>
-        <TextColorButton v-tooltip="'单元格填充'" :color="textAttrs.backcolor" style="flex: 1;">
+        <TextColorButton v-tooltip="'单元格填充'" :color="textAttrs.backcolor" style="width: 100%;">
           <IconFill />
         </TextColorButton>
       </Popover>
@@ -100,16 +98,16 @@
     <Divider />
 
     <div class="row">
-      <div style="flex: 2;">行数：</div>
-      <div class="set-count" style="flex: 3;">
+      <div style="width: 40%;">行数：</div>
+      <div class="set-count" style="width: 60%;">
         <Button class="btn" :disabled="rowCount <= 1" @click="setTableRow(rowCount - 1)"><IconMinus /></Button>
         <div class="count-text">{{rowCount}}</div>
         <Button class="btn" :disabled="rowCount >= 30" @click="setTableRow(rowCount + 1)"><IconPlus /></Button>
       </div>
     </div>
     <div class="row">
-      <div style="flex: 2;">列数：</div>
-      <div class="set-count" style="flex: 3;">
+      <div style="width: 40%;">列数：</div>
+      <div class="set-count" style="width: 60%;">
         <Button class="btn" :disabled="colCount <= 1" @click="setTableCol(colCount - 1)"><IconMinus /></Button>
         <div class="count-text">{{colCount}}</div>
         <Button class="btn" :disabled="colCount >= 30" @click="setTableCol(colCount + 1)"><IconPlus /></Button>
@@ -119,8 +117,8 @@
     <Divider />
 
     <div class="row theme-switch">
-      <div style="flex: 2;">启用主题表格：</div>
-      <div class="switch-wrapper" style="flex: 3;">
+      <div style="width: 40%;">启用主题表格：</div>
+      <div class="switch-wrapper" style="width: 60%;">
         <Switch 
           :value="hasTheme" 
           @update:value="value => toggleTheme(value)" 
@@ -154,15 +152,15 @@
         >最后一列</Checkbox>
       </div>
       <div class="row">
-        <div style="flex: 2;">主题颜色：</div>
-        <Popover trigger="click">
+        <div style="width: 40%;">主题颜色：</div>
+        <Popover trigger="click" style="width: 60%;">
           <template #content>
             <ColorPicker
               :modelValue="theme.color"
               @update:modelValue="value => updateTheme({ color: value })"
             />
           </template>
-          <ColorButton :color="theme.color" style="flex: 3;" />
+          <ColorButton :color="theme.color" style="width: 100%;" />
         </Popover>
       </div>
     </template>
@@ -190,13 +188,9 @@ import Button from '@/components/Button.vue'
 import ButtonGroup from '@/components/ButtonGroup.vue'
 import RadioButton from '@/components/RadioButton.vue'
 import RadioGroup from '@/components/RadioGroup.vue'
-import {
-  Popover,
-  Select,
-  Input,
-} from 'ant-design-vue'
-const { OptGroup: SelectOptGroup, Option: SelectOption } = Select
-const InputGroup = Input.Group
+import Select from '@/components/Select.vue'
+import SelectGroup from '@/components/SelectGroup.vue'
+import Popover from '@/components/Popover.vue'
 
 const slidesStore = useSlidesStore()
 const { handleElement, handleElementId, selectedTableCells: selectedCells, availableFonts } = storeToRefs(useMainStore())
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
index 34765c59..6aa47ee7 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
@@ -12,57 +12,55 @@
 
     <Divider />
     
-    <InputGroup compact class="row">
+    <SelectGroup class="row">
       <Select
         class="font-select"
-        style="flex: 3;"
+        style="width: 50%;"
         :value="richTextAttrs.fontname"
-        @change="value => emitRichTextCommand('fontname', value as string)"
+        @update:value="value => emitRichTextCommand('fontname', value as string)"
+        :options="[
+          ...availableFonts,
+          ...WEB_FONTS
+        ]"
       >
-        <template #suffixIcon><IconFontSize /></template>
-        <SelectOptGroup label="系统字体">
-          <SelectOption v-for="font in availableFonts" :key="font.value" :value="font.value">
-            <span :style="{ fontFamily: font.value }">{{font.label}}</span>
-          </SelectOption>
-        </SelectOptGroup>
-        <SelectOptGroup label="在线字体">
-          <SelectOption v-for="font in WEB_FONTS" :key="font.value" :value="font.value">
-            <span>{{font.label}}</span>
-          </SelectOption>
-        </SelectOptGroup>
+        <template #icon>
+          <IconFontSize />
+        </template>
       </Select>
       <Select
-        style="flex: 2;"
+        style="width: 50%;"
         :value="richTextAttrs.fontsize"
-        @change="value => emitRichTextCommand('fontsize', value as string)"
+        @update:value="value => emitRichTextCommand('fontsize', value as string)"
+        :options="fontSizeOptions.map(item => ({
+          label: item, value: item
+        }))"
       >
-        <template #suffixIcon><IconAddText /></template>
-        <SelectOption v-for="fontsize in fontSizeOptions" :key="fontsize" :value="fontsize">
-          {{fontsize}}
-        </SelectOption>
+        <template #icon>
+          <IconAddText />
+        </template>
       </Select>
-    </InputGroup>
+    </SelectGroup>
 
     <ButtonGroup class="row">
-      <Popover trigger="click">
+      <Popover trigger="click" style="flex: 3;">
         <template #content>
           <ColorPicker
             :modelValue="richTextAttrs.color"
             @update:modelValue="value => emitRichTextCommand('color', value)"
           />
         </template>
-        <TextColorButton v-tooltip="'文字颜色'" :color="richTextAttrs.color" style="flex: 3;">
+        <TextColorButton v-tooltip="'文字颜色'" :color="richTextAttrs.color" style="width: 100%;">
           <IconText />
         </TextColorButton>
       </Popover>
-      <Popover trigger="click">
+      <Popover trigger="click" style="flex: 3;">
         <template #content>
           <ColorPicker
             :modelValue="richTextAttrs.backcolor"
             @update:modelValue="value => emitRichTextCommand('backcolor', value)"
           />
         </template>
-        <TextColorButton v-tooltip="'文字高亮'" :color="richTextAttrs.backcolor" style="flex: 3;">
+        <TextColorButton v-tooltip="'文字高亮'" :color="richTextAttrs.backcolor" style="width: 100%;">
           <IconHighLight />
         </TextColorButton>
       </Popover>
@@ -146,7 +144,7 @@
         v-tooltip="'格式刷'"
         @click="toggleFormatPainter()"
       ><IconFormatBrush /></CheckboxButton>
-      <Popover placement="bottomRight" trigger="click" v-model:open="linkPopoverVisible">
+      <Popover placement="bottom-end" trigger="click" v-model:value="linkPopoverVisible" style="flex: 1;">
         <template #content>
           <div class="link-popover">
             <Input v-model:value="link" placeholder="请输入超链接" />
@@ -157,7 +155,7 @@
           </div>
         </template>
         <CheckboxButton
-          style="flex: 1;"
+          style="width: 100%;"
           :checked="!!richTextAttrs.link"
           v-tooltip="'超链接'"
           @click="openLinkPopover()"
@@ -187,7 +185,7 @@
           v-tooltip="'项目符号'"
           @click="emitRichTextCommand('bulletList')"
         ><IconList /></Button>
-        <Popover trigger="click" v-model:open="bulletListPanelVisible">
+        <Popover trigger="click" v-model:value="bulletListPanelVisible">
           <template #content>
             <div class="list-wrap">
               <ul class="list" 
@@ -211,7 +209,7 @@
           v-tooltip="'编号'"
           @click="emitRichTextCommand('orderedList')"
         ><IconOrderedList /></Button>
-        <Popover trigger="click" v-model:open="orderedListPanelVisible">
+        <Popover trigger="click" v-model:value="orderedListPanelVisible">
           <template #content>
             <div class="list-wrap">
               <ul class="list" 
@@ -232,11 +230,9 @@
     <div class="row">
       <ButtonGroup style="flex: 15;">
         <Button style="flex: 1;" v-tooltip="'减小段落缩进'" @click="emitRichTextCommand('indent', '-1')"><IconIndentLeft /></Button>
-        <Popover trigger="click" v-model:open="indentLeftPanelVisible">
+        <Popover trigger="click" v-model:value="indentLeftPanelVisible">
           <template #content>
-            <div class="popover-list">
-              <span class="popover-item" @click="emitRichTextCommand('textIndent', '-1')">减小首行缩进</span>
-            </div>
+            <PopoverMenuItem @click="emitRichTextCommand('textIndent', '-1')">减小首行缩进</PopoverMenuItem>
           </template>
           <Button class="popover-btn"><IconDown /></Button>
         </Popover>
@@ -244,11 +240,9 @@
       <div style="flex: 1;"></div>
       <ButtonGroup style="flex: 15;">
         <Button style="flex: 1;" v-tooltip="'增大段落缩进'" @click="emitRichTextCommand('indent', '+1')"><IconIndentRight /></Button>
-        <Popover trigger="click" v-model:open="indentRightPanelVisible">
+        <Popover trigger="click" v-model:value="indentRightPanelVisible">
           <template #content>
-            <div class="popover-list">
-              <span class="popover-item" @click="emitRichTextCommand('textIndent', '+1')">增大首行缩进</span>
-            </div>
+            <PopoverMenuItem @click="emitRichTextCommand('textIndent', '+1')">增大首行缩进</PopoverMenuItem>
           </template>
           <Button class="popover-btn"><IconDown /></Button>
         </Popover>
@@ -258,36 +252,57 @@
     <Divider />
 
     <div class="row">
-      <div style="flex: 2;">行间距：</div>
-      <Select style="flex: 3;" :value="lineHeight" @change="value => updateLineHeight(value as number)">
-        <template #suffixIcon><IconRowHeight /></template>
-        <SelectOption v-for="item in lineHeightOptions" :key="item" :value="item">{{item}}倍</SelectOption>
+      <div style="width: 40%;">行间距：</div>
+      <Select style="width: 60%;"
+        :value="lineHeight || 1"
+        @update:value="value => updateLineHeight(value as number)"
+        :options="lineHeightOptions.map(item => ({
+          label: item + '倍', value: item
+        }))"
+      >
+        <template #icon>
+          <IconRowHeight />
+        </template>
       </Select>
     </div>
     <div class="row">
-      <div style="flex: 2;">段间距：</div>
-      <Select style="flex: 3;" :value="paragraphSpace" @change="value => updateParagraphSpace(value as number)">
-        <template #suffixIcon><IconVerticalSpacingBetweenItems /></template>
-        <SelectOption v-for="item in paragraphSpaceOptions" :key="item" :value="item">{{item}}px</SelectOption>
+      <div style="width: 40%;">段间距：</div>
+      <Select style="width: 60%;"
+        :value="paragraphSpace || 0"
+        @update:value="value => updateParagraphSpace(value as number)"
+        :options="paragraphSpaceOptions.map(item => ({
+          label: item + 'px', value: item
+        }))"
+      >
+        <template #icon>
+          <IconVerticalSpacingBetweenItems />
+        </template>
       </Select>
     </div>
     <div class="row">
-      <div style="flex: 2;">字间距：</div>
-      <Select style="flex: 3;" :value="wordSpace" @change="value => updateWordSpace(value as number)">
-        <template #suffixIcon><IconFullwidth /></template>
-        <SelectOption v-for="item in wordSpaceOptions" :key="item" :value="item">{{item}}px</SelectOption>
+      <div style="width: 40%;">字间距：</div>
+      <Select style="width: 60%;"
+        :value="wordSpace || 0"
+        @update:value="value => updateWordSpace(value as number)"
+        :options="wordSpaceOptions.map(item => ({
+          label: item + 'px', value: item
+        }))"
+      >
+        <template #icon>
+          <IconFullwidth />
+        </template>
       </Select>
     </div>
     <div class="row">
-      <div style="flex: 2;">文本框填充：</div>
-      <Popover trigger="click">
+      <div style="width: 40%;">文本框填充：</div>
+      <Popover trigger="click" style="width: 60%;">
         <template #content>
           <ColorPicker
             :modelValue="fill"
             @update:modelValue="value => updateFill(value)"
           />
         </template>
-        <ColorButton :color="fill" style="flex: 3;" />
+        <ColorButton :color="fill" style="width: 100%;" />
       </Popover>
     </div>
 
@@ -324,13 +339,10 @@ import Button from '@/components/Button.vue'
 import ButtonGroup from '@/components/ButtonGroup.vue'
 import RadioButton from '@/components/RadioButton.vue'
 import RadioGroup from '@/components/RadioGroup.vue'
-import {
-  Popover,
-  Select,
-  Input as AntInput,
-} from 'ant-design-vue'
-const { OptGroup: SelectOptGroup, Option: SelectOption } = Select
-const InputGroup = AntInput.Group
+import Select from '@/components/Select.vue'
+import SelectGroup from '@/components/SelectGroup.vue'
+import Popover from '@/components/Popover.vue'
+import PopoverMenuItem from '@/components/PopoverMenuItem.vue'
 
 // 注意，存在一个未知原因的BUG，如果文本加粗后文本框高度增加，画布的可视区域定位会出现错误
 // 因此在执行预置样式命令时，将加粗命令放在尽可能靠前的位置，避免字号增大后再加粗
@@ -488,7 +500,6 @@ watch(richTextAttrs, () => linkPopoverVisible.value = false)
 
 const openLinkPopover = () => {
   link.value = richTextAttrs.value.link
-  linkPopoverVisible.value = true
 }
 const updateLink = (link?: string) => {
   const linkRegExp = /^(https?):\/\/[\w\-]+(\.[\w\-]+)+([\w\-.,@?^=%&:\/~+#]*[\w\-@?^=%&\/~+#])?$/
@@ -590,6 +601,7 @@ const updateLink = (link?: string) => {
   width: 24px;
   height: 12px;
   position: relative;
+  font-size: 12px;
   top: -5px;
 
   span {
diff --git a/src/views/Editor/Toolbar/SlideDesignPanel.vue b/src/views/Editor/Toolbar/SlideDesignPanel.vue
index 4946ab28..70778866 100644
--- a/src/views/Editor/Toolbar/SlideDesignPanel.vue
+++ b/src/views/Editor/Toolbar/SlideDesignPanel.vue
@@ -5,44 +5,47 @@
       <Select 
         style="flex: 10;" 
         :value="background.type" 
-        @change="value => updateBackgroundType(value as 'gradient' | 'image' | 'solid')"
-      >
-        <SelectOption value="solid">纯色填充</SelectOption>
-        <SelectOption value="image">图片填充</SelectOption>
-        <SelectOption value="gradient">渐变填充</SelectOption>
-      </Select>
+        @update:value="value => updateBackgroundType(value as 'gradient' | 'image' | 'solid')"
+        :options="[
+          { label: '纯色填充', value: 'solid' },
+          { label: '图片填充', value: 'image' },
+          { label: '渐变填充', value: 'gradient' },
+        ]"
+      />
       <div style="flex: 1;"></div>
 
-      <Popover trigger="click" v-if="background.type === 'solid'">
+      <Popover trigger="click" v-if="background.type === 'solid'" style="flex: 10;">
         <template #content>
           <ColorPicker
             :modelValue="background.color"
             @update:modelValue="color => updateBackground({ color })"
           />
         </template>
-        <ColorButton :color="background.color || '#fff'" style="flex: 10;" />
+        <ColorButton :color="background.color || '#fff'" style="width: 100%;" />
       </Popover>
 
       <Select 
         style="flex: 10;" 
         :value="background.imageSize || 'cover'" 
-        @change="value => updateBackground({ imageSize: value as 'repeat' | 'cover' | 'contain' })"
+        @update:value="value => updateBackground({ imageSize: value as 'repeat' | 'cover' | 'contain' })"
         v-else-if="background.type === 'image'"
-      >
-        <SelectOption value="contain">缩放</SelectOption>
-        <SelectOption value="repeat">拼贴</SelectOption>
-        <SelectOption value="cover">缩放铺满</SelectOption>
-      </Select>
+        :options="[
+          { label: '缩放', value: 'contain' },
+          { label: '拼贴', value: 'repeat' },
+          { label: '缩放铺满', value: 'cover' },
+        ]"
+      />
 
       <Select 
         style="flex: 10;" 
-        :value="background.gradientType" 
-        @change="value => updateBackground({ gradientType: value as 'linear' | 'radial' })"
+        :value="background.gradientType || ''" 
+        @update:value="value => updateBackground({ gradientType: value as 'linear' | 'radial' })"
         v-else
-      >
-        <SelectOption value="linear">线性渐变</SelectOption>
-        <SelectOption value="radial">径向渐变</SelectOption>
-      </Select>
+        :options="[
+          { label: '线性渐变', value: 'linear' },
+          { label: '径向渐变', value: 'radial' },
+        ]"
+      />
     </div>
 
     <div class="background-image-wrapper" v-if="background.type === 'image'">
@@ -58,26 +61,26 @@
     <div class="background-gradient-wrapper" v-if="background.type === 'gradient'">
       <div class="row">
         <div style="flex: 2;">起点颜色：</div>
-        <Popover trigger="click">
+        <Popover trigger="click" style="flex: 3;">
           <template #content>
             <ColorPicker
               :modelValue="background.gradientColor![0]"
               @update:modelValue="value => updateBackground({ gradientColor: [value, background.gradientColor![1]] })"
             />
           </template>
-          <ColorButton :color="background.gradientColor![0]" style="flex: 3;" />
+          <ColorButton :color="background.gradientColor![0]" style="width: 100%;" />
         </Popover>
       </div>
       <div class="row">
         <div style="flex: 2;">终点颜色：</div>
-        <Popover trigger="click">
+        <Popover trigger="click" style="flex: 3;">
           <template #content>
             <ColorPicker
               :modelValue="background.gradientColor![1]"
               @update:modelValue="value => updateBackground({ gradientColor: [background.gradientColor![0], value] })"
             />
           </template>
-          <ColorButton :color="background.gradientColor![1]" style="flex: 3;" />
+          <ColorButton :color="background.gradientColor![1]" style="width: 100%;" />
         </Popover>
       </div>
       <div class="row" v-if="background.gradientType === 'linear'">
@@ -99,12 +102,17 @@
 
     <div class="row">
       <div style="flex: 2;">画布尺寸：</div>
-      <Select style="flex: 3;" :value="viewportRatio" @change="value => updateViewportRatio(value as number)">
-        <SelectOption :value="0.5625">宽屏 16 : 9</SelectOption>
-        <SelectOption :value="0.625">宽屏 16 : 10</SelectOption>
-        <SelectOption :value="0.75">标准 4 : 3</SelectOption>
-        <SelectOption :value="0.70710678">纸张 A3 / A4</SelectOption>
-      </Select>
+      <Select 
+        style="flex: 3;" 
+        :value="viewportRatio" 
+        @update:value="value => updateViewportRatio(value as number)"
+        :options="[
+          { label: '宽屏 16 : 9', value: 0.5625 },
+          { label: '宽屏 16 : 10', value: 0.625 },
+          { label: '标准 4 : 3', value: 0.75 },
+          { label: '纸张 A3 / A4', value: 0.70710678 },
+        ]"
+      />
     </div>
 
     <Divider />
@@ -115,54 +123,47 @@
       <Select
         style="flex: 3;"
         :value="theme.fontName"
-        @change="value => updateTheme({ fontName: value as string })"
-      >
-        <SelectOptGroup label="系统字体">
-          <SelectOption v-for="font in availableFonts" :key="font.value" :value="font.value">
-            <span :style="{ fontFamily: font.value }">{{font.label}}</span>
-          </SelectOption>
-        </SelectOptGroup>
-        <SelectOptGroup label="在线字体">
-          <SelectOption v-for="font in WEB_FONTS" :key="font.value" :value="font.value">
-            <span>{{font.label}}</span>
-          </SelectOption>
-        </SelectOptGroup>
-      </Select>
+        @update:value="value => updateTheme({ fontName: value as string })"
+        :options="[
+          ...availableFonts,
+          ...WEB_FONTS
+        ]"
+      />
     </div>
     <div class="row">
       <div style="flex: 2;">字体颜色：</div>
-      <Popover trigger="click">
+      <Popover trigger="click" style="flex: 3;">
         <template #content>
           <ColorPicker
             :modelValue="theme.fontColor"
             @update:modelValue="value => updateTheme({ fontColor: value })"
           />
         </template>
-        <ColorButton :color="theme.fontColor" style="flex: 3;" />
+        <ColorButton :color="theme.fontColor" style="width: 100%;" />
       </Popover>
     </div>
     <div class="row">
       <div style="flex: 2;">背景颜色：</div>
-      <Popover trigger="click">
+      <Popover trigger="click" style="flex: 3;">
         <template #content>
           <ColorPicker
             :modelValue="theme.backgroundColor"
             @update:modelValue="value => updateTheme({ backgroundColor: value })"
           />
         </template>
-        <ColorButton :color="theme.backgroundColor" style="flex: 3;" />
+        <ColorButton :color="theme.backgroundColor" style="width: 100%;" />
       </Popover>
     </div>
     <div class="row">
       <div style="flex: 2;">主题色：</div>
-      <Popover trigger="click">
+      <Popover trigger="click" style="flex: 3;">
         <template #content>
           <ColorPicker
             :modelValue="theme.themeColor"
             @update:modelValue="value => updateTheme({ themeColor: value })"
           />
         </template>
-        <ColorButton :color="theme.themeColor" style="flex: 3;" />
+        <ColorButton :color="theme.themeColor" style="width: 100%;" />
       </Popover>
     </div>
 
@@ -214,11 +215,8 @@ import ColorPicker from '@/components/ColorPicker/index.vue'
 import Divider from '@/components/Divider.vue'
 import Slider from '@/components/Slider.vue'
 import Button from '@/components/Button.vue'
-import {
-  Popover,
-  Select,
-} from 'ant-design-vue'
-const { OptGroup: SelectOptGroup, Option: SelectOption } = Select
+import Select from '@/components/Select.vue'
+import Popover from '@/components/Popover.vue'
 
 const slidesStore = useSlidesStore()
 const { availableFonts } = storeToRefs(useMainStore())
diff --git a/src/views/Editor/Toolbar/common/ElementColorMask.vue b/src/views/Editor/Toolbar/common/ElementColorMask.vue
index 2b9e82cb..59a1ce1e 100644
--- a/src/views/Editor/Toolbar/common/ElementColorMask.vue
+++ b/src/views/Editor/Toolbar/common/ElementColorMask.vue
@@ -12,14 +12,14 @@
     <template v-if="hasColorMask">
       <div class="row" style="margin-top: 15px;">
         <div style="flex: 2;">蒙版颜色：</div>
-        <Popover trigger="click">
+        <Popover trigger="click" style="flex: 3;">
           <template #content>
             <ColorPicker
               :modelValue="colorMask.color"
               @update:modelValue="value => updateColorMask({ color: value })"
             />
           </template>
-          <ColorButton :color="colorMask.color" style="flex: 3;" />
+          <ColorButton :color="colorMask.color" style="width: 100%;" />
         </Popover>
       </div>
       <div class="row">
@@ -48,7 +48,7 @@ import ColorButton from './ColorButton.vue'
 import ColorPicker from '@/components/ColorPicker/index.vue'
 import Switch from '@/components/Switch.vue'
 import Slider from '@/components/Slider.vue'
-import { Popover } from 'ant-design-vue'
+import Popover from '@/components/Popover.vue'
 
 const defaultColorMask = { color: 'transparent', opacity: 0.3 }
 
diff --git a/src/views/Editor/Toolbar/common/ElementOutline.vue b/src/views/Editor/Toolbar/common/ElementOutline.vue
index 13550a03..014aa66b 100644
--- a/src/views/Editor/Toolbar/common/ElementOutline.vue
+++ b/src/views/Editor/Toolbar/common/ElementOutline.vue
@@ -14,23 +14,24 @@
         <div style="flex: 2;">边框样式：</div>
         <Select 
           style="flex: 3;" 
-          :value="outline.style" 
-          @change="value => updateOutline({ style: value as 'dashed' | 'solid' })"
-        >
-          <SelectOption value="solid">实线边框</SelectOption>
-          <SelectOption value="dashed">虚线边框</SelectOption>
-        </Select>
+          :value="outline.style || ''" 
+          @update:value="value => updateOutline({ style: value as 'dashed' | 'solid' })"
+          :options="[
+            { label: '实线边框', value: 'solid' },
+            { label: '虚线边框', value: 'dashed' },
+          ]"
+        />
       </div>
       <div class="row">
         <div style="flex: 2;">边框颜色：</div>
-        <Popover trigger="click">
+        <Popover trigger="click" style="flex: 3;">
           <template #content>
             <ColorPicker
               :modelValue="outline.color"
               @update:modelValue="value => updateOutline({ color: value })"
             />
           </template>
-          <ColorButton :color="outline.color || '#000'" style="flex: 3;" />
+          <ColorButton :color="outline.color || '#000'" style="width: 100%;" />
         </Popover>
       </div>
       <div class="row">
@@ -56,11 +57,8 @@ import ColorButton from './ColorButton.vue'
 import ColorPicker from '@/components/ColorPicker/index.vue'
 import Switch from '@/components/Switch.vue'
 import NumberInput from '@/components/NumberInput.vue'
-import {
-  Popover,
-  Select,
-} from 'ant-design-vue'
-const SelectOption = Select.Option
+import Select from '@/components/Select.vue'
+import Popover from '@/components/Popover.vue'
 
 withDefaults(defineProps<{
   fixed?: boolean
diff --git a/src/views/Editor/Toolbar/common/ElementShadow.vue b/src/views/Editor/Toolbar/common/ElementShadow.vue
index b9a40600..9c8d180f 100644
--- a/src/views/Editor/Toolbar/common/ElementShadow.vue
+++ b/src/views/Editor/Toolbar/common/ElementShadow.vue
@@ -42,14 +42,14 @@
       </div>
       <div class="row">
         <div style="flex: 2;">阴影颜色：</div>
-        <Popover trigger="click">
+        <Popover trigger="click" style="flex: 3;">
           <template #content>
             <ColorPicker
               :modelValue="shadow.color"
               @update:modelValue="value => updateShadow({ color: value })"
             />
           </template>
-          <ColorButton :color="shadow.color" style="flex: 3;" />
+          <ColorButton :color="shadow.color" style="width: 100%;" />
         </Popover>
       </div>
     </template>
@@ -67,7 +67,7 @@ import ColorButton from './ColorButton.vue'
 import ColorPicker from '@/components/ColorPicker/index.vue'
 import Switch from '@/components/Switch.vue'
 import Slider from '@/components/Slider.vue'
-import { Popover } from 'ant-design-vue'
+import Popover from '@/components/Popover.vue'
 
 const slidesStore = useSlidesStore()
 const { handleElement } = storeToRefs(useMainStore())
diff --git a/src/views/Screen/WritingBoardTool.vue b/src/views/Screen/WritingBoardTool.vue
index f795931c..e523b0d6 100644
--- a/src/views/Screen/WritingBoardTool.vue
+++ b/src/views/Screen/WritingBoardTool.vue
@@ -28,7 +28,7 @@
     >
       <div class="tools" @mousedown.stop>
         <div class="tool-content">
-          <Popover trigger="click" :open="sizePopoverType === 'pen'">
+          <Popover trigger="click" :value="sizePopoverType === 'pen'">
             <template #content>
               <div class="size">
                 <div class="label">墨迹粗细：</div>
@@ -39,7 +39,7 @@
               <IconWrite class="icon" />
             </div>
           </Popover>
-          <Popover trigger="click" :open="sizePopoverType === 'mark'">
+          <Popover trigger="click" :value="sizePopoverType === 'mark'">
             <template #content>
               <div class="size">
                 <div class="label">墨迹粗细：</div>
@@ -50,7 +50,7 @@
               <IconHighLight class="icon" />
             </div>
           </Popover>
-          <Popover trigger="click" :open="sizePopoverType === 'eraser'">
+          <Popover trigger="click" :value="sizePopoverType === 'eraser'">
             <template #content>
               <div class="size">
                 <div class="label">橡皮大小：</div>
@@ -95,7 +95,7 @@ import { db } from '@/utils/database'
 import WritingBoard from '@/components/WritingBoard.vue'
 import MoveablePanel from '@/components/MoveablePanel.vue'
 import Slider from '@/components/Slider.vue'
-import { Popover } from 'ant-design-vue'
+import Popover from '@/components/Popover.vue'
 
 const writingBoardColors = ['#000000', '#ffffff', '#1e497b', '#4e81bb', '#e2534d', '#9aba60', '#8165a0', '#47acc5', '#f9974c', '#ffff3a']
 
@@ -238,6 +238,7 @@ const hanldeWritingEnd = () => {
   display: flex;
   align-items: center;
   user-select: none;
+  font-size: 13px;
 
   .label {
     width: 70px;