diff --git a/package-lock.json b/package-lock.json
index 46b3a92..d9430a9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,6 @@
       "version": "1.6.0",
       "hasInstallScript": true,
       "dependencies": {
-        "@element-plus/icons-vue": "^2.3.1",
         "@vueuse/core": "^12.0.0",
         "axios": "^1.7.8",
         "buffer-from": "^1.1.2",
@@ -20,7 +19,6 @@
         "cos-js-sdk-v5": "^1.8.6",
         "crypto-js": "^4.2.0",
         "csstype": "^3.1.3",
-        "element-plus": "^2.8.8",
         "es-toolkit": "^1.27.0",
         "form-data": "4.0.1",
         "highlight.js": "^11.10.0",
@@ -37,7 +35,9 @@
         "tailwindcss-animate": "^1.0.7",
         "tiny-oss": "^0.5.1",
         "uuid": "^11.0.3",
-        "vue": "^3.5.13"
+        "vue": "^3.5.13",
+        "vue-pick-colors": "^1.7.8",
+        "vue-sonner": "^1.3.0"
       },
       "devDependencies": {
         "@antfu/eslint-config": "3.11.0",
@@ -820,14 +820,6 @@
         "sisteransi": "^1.0.5"
       }
     },
-    "node_modules/@ctrl/tinycolor": {
-      "version": "3.6.1",
-      "resolved": "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
-      "integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==",
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/@devicefarmer/adbkit": {
       "version": "3.2.6",
       "resolved": "https://registry.npmmirror.com/@devicefarmer/adbkit/-/adbkit-3.2.6.tgz",
@@ -898,14 +890,6 @@
       "integrity": "sha512-zQ42I53sb4WVHA+5yoY1t59Zk++Ot02AvUgtNKLzTT8mPyVqVChFcePa3on/xIoKEgH+RoepgPHzqfk9837YFw==",
       "dev": true
     },
-    "node_modules/@element-plus/icons-vue": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz",
-      "integrity": "sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==",
-      "peerDependencies": {
-        "vue": "^3.2.0"
-      }
-    },
     "node_modules/@es-joy/jsdoccomment": {
       "version": "0.48.0",
       "resolved": "https://registry.npmmirror.com/@es-joy/jsdoccomment/-/jsdoccomment-0.48.0.tgz",
@@ -2614,19 +2598,6 @@
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
       "dev": true
     },
-    "node_modules/@types/lodash": {
-      "version": "4.17.13",
-      "resolved": "https://registry.npmmirror.com/@types/lodash/-/lodash-4.17.13.tgz",
-      "integrity": "sha512-lfx+dftrEZcdBPczf9d0Qv0x+j/rfNCMuC6OcfXmO8gkfeNAY88PgKUbvG56whcN23gc27yenwF6oJZXGFpYxg=="
-    },
-    "node_modules/@types/lodash-es": {
-      "version": "4.17.12",
-      "resolved": "https://registry.npmmirror.com/@types/lodash-es/-/lodash-es-4.17.12.tgz",
-      "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
-      "dependencies": {
-        "@types/lodash": "*"
-      }
-    },
     "node_modules/@types/mdast": {
       "version": "4.0.4",
       "resolved": "https://registry.npmmirror.com/@types/mdast/-/mdast-4.0.4.tgz",
@@ -3880,11 +3851,6 @@
         "tslib": "^2.4.0"
       }
     },
-    "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/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
@@ -6561,119 +6527,6 @@
       "integrity": "sha512-pI2QF6+i+zjPbqRzJwkMvtvkdI7MjVbSh2g8dlMguDJIXEPw+kwasS1Jl+YGPEBfGVxsVgGUratAKymPdPo2vQ==",
       "dev": true
     },
-    "node_modules/element-plus": {
-      "version": "2.8.8",
-      "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.8.8.tgz",
-      "integrity": "sha512-MLAH1x2PGTnOT7Iwqh9ASgfZhvgqQqrdbxuJH0w2fGjzE4ZjryyLQj24HXoQO7Zon66U3lrYxbdLI57M6OX0qw==",
-      "dependencies": {
-        "@ctrl/tinycolor": "^3.4.1",
-        "@element-plus/icons-vue": "^2.3.1",
-        "@floating-ui/dom": "^1.0.1",
-        "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
-        "@types/lodash": "^4.14.182",
-        "@types/lodash-es": "^4.17.6",
-        "@vueuse/core": "^9.1.0",
-        "async-validator": "^4.2.5",
-        "dayjs": "^1.11.13",
-        "escape-html": "^1.0.3",
-        "lodash": "^4.17.21",
-        "lodash-es": "^4.17.21",
-        "lodash-unified": "^1.0.2",
-        "memoize-one": "^6.0.0",
-        "normalize-wheel-es": "^1.2.0"
-      },
-      "peerDependencies": {
-        "vue": "^3.2.0"
-      }
-    },
-    "node_modules/element-plus/node_modules/@types/web-bluetooth": {
-      "version": "0.0.16",
-      "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
-      "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
-    },
-    "node_modules/element-plus/node_modules/@vueuse/core": {
-      "version": "9.13.0",
-      "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-9.13.0.tgz",
-      "integrity": "sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==",
-      "dependencies": {
-        "@types/web-bluetooth": "^0.0.16",
-        "@vueuse/metadata": "9.13.0",
-        "@vueuse/shared": "9.13.0",
-        "vue-demi": "*"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/element-plus/node_modules/@vueuse/core/node_modules/vue-demi": {
-      "version": "0.14.10",
-      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.10.tgz",
-      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
-      "hasInstallScript": true,
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/element-plus/node_modules/@vueuse/metadata": {
-      "version": "9.13.0",
-      "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-9.13.0.tgz",
-      "integrity": "sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==",
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/element-plus/node_modules/@vueuse/shared": {
-      "version": "9.13.0",
-      "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-9.13.0.tgz",
-      "integrity": "sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==",
-      "dependencies": {
-        "vue-demi": "*"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/element-plus/node_modules/@vueuse/shared/node_modules/vue-demi": {
-      "version": "0.14.10",
-      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.10.tgz",
-      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
-      "hasInstallScript": true,
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/elliptic": {
       "version": "6.6.1",
       "resolved": "https://registry.npmmirror.com/elliptic/-/elliptic-6.6.1.tgz",
@@ -6993,11 +6846,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/escape-html": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmmirror.com/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
-    },
     "node_modules/escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -10420,16 +10268,6 @@
       "resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz",
       "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
     },
-    "node_modules/lodash-unified": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmmirror.com/lodash-unified/-/lodash-unified-1.0.3.tgz",
-      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==",
-      "peerDependencies": {
-        "@types/lodash-es": "*",
-        "lodash": "*",
-        "lodash-es": "*"
-      }
-    },
     "node_modules/lodash.camelcase": {
       "version": "4.3.0",
       "resolved": "https://registry.npmmirror.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
@@ -10985,11 +10823,6 @@
       "integrity": "sha512-rsfnCbOHjqrhWxwt5/wtSLzpoKTzW7OXdT5lLOIH1OTYhWu9rRJveGq0sKvDZODABH7RX+uoR+DYcpFnq4Tf6Q==",
       "dev": true
     },
-    "node_modules/memoize-one": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmmirror.com/memoize-one/-/memoize-one-6.0.0.tgz",
-      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
-    },
     "node_modules/memorystream": {
       "version": "0.3.1",
       "resolved": "https://registry.npmmirror.com/memorystream/-/memorystream-0.3.1.tgz",
@@ -12261,11 +12094,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/normalize-wheel-es": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmmirror.com/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
-      "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw=="
-    },
     "node_modules/npm-run-all": {
       "version": "4.1.5",
       "resolved": "https://registry.npmmirror.com/npm-run-all/-/npm-run-all-4.1.5.tgz",
@@ -17460,6 +17288,23 @@
         "vue": "^3.4.37"
       }
     },
+    "node_modules/vue-pick-colors": {
+      "version": "1.7.8",
+      "resolved": "https://registry.npmmirror.com/vue-pick-colors/-/vue-pick-colors-1.7.8.tgz",
+      "integrity": "sha512-6AIMrjh+q+CYmhgyDUh062qLR9ua0pWFGlBnPD7egT+CEJslThQFNsc1NQ0+KUmgxtGukSGTuI7CkC/eHxbB5w==",
+      "dependencies": {
+        "@popperjs/core": "^2.11.2"
+      },
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.2",
+        "vue": "^3.2.26"
+      }
+    },
+    "node_modules/vue-sonner": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/vue-sonner/-/vue-sonner-1.3.0.tgz",
+      "integrity": "sha512-jAodBy4Mri8rQjVZGQAPs4ZYymc1ywPiwfa81qU0fFl+Suk7U8NaOxIDdI1oBGLeQJqRZi/oxNIuhCLqsBmOwg=="
+    },
     "node_modules/vue-tsc": {
       "version": "2.1.10",
       "resolved": "https://registry.npmmirror.com/vue-tsc/-/vue-tsc-2.1.10.tgz",
diff --git a/package.json b/package.json
index 7e56435..8235dd7 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,6 @@
     "postinstall": "simple-git-hooks && wxt prepare"
   },
   "dependencies": {
-    "@element-plus/icons-vue": "^2.3.1",
     "@vueuse/core": "^12.0.0",
     "axios": "^1.7.8",
     "buffer-from": "^1.1.2",
@@ -32,7 +31,6 @@
     "cos-js-sdk-v5": "^1.8.6",
     "crypto-js": "^4.2.0",
     "csstype": "^3.1.3",
-    "element-plus": "^2.8.8",
     "es-toolkit": "^1.27.0",
     "form-data": "4.0.1",
     "highlight.js": "^11.10.0",
@@ -49,7 +47,9 @@
     "tailwindcss-animate": "^1.0.7",
     "tiny-oss": "^0.5.1",
     "uuid": "^11.0.3",
-    "vue": "^3.5.13"
+    "vue": "^3.5.13",
+    "vue-pick-colors": "^1.7.8",
+    "vue-sonner": "^1.3.0"
   },
   "devDependencies": {
     "@antfu/eslint-config": "3.11.0",
diff --git a/src/App.vue b/src/App.vue
index c33bad3..ad3b939 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -72,14 +72,4 @@ body {
     background: #f0f0f0;
   }
 }
-
-// 修复分栏线负数 margin 导致的轴向滚动条
-.el-dropdown-menu__item--divided:before {
-  margin: 0;
-}
-
-// 修复颜色选择器下拉箭头位置
-.el-icon.el-color-picker__icon.is-icon-arrow-down {
-  position: absolute;
-}
 </style>
diff --git a/src/assets/less/app.less b/src/assets/less/app.less
index d269259..8866cc8 100644
--- a/src/assets/less/app.less
+++ b/src/assets/less/app.less
@@ -34,11 +34,6 @@ section {
   height: 100%;
 }
 
-
-.el-message__icon {
-  display: none;
-}
-
 .web-title {
   margin: 0 15px 0 5px;
 }
diff --git a/src/components/CodemirrorEditor/CssEditor.vue b/src/components/CodemirrorEditor/CssEditor.vue
index 09a6a77..cb0838f 100644
--- a/src/components/CodemirrorEditor/CssEditor.vue
+++ b/src/components/CodemirrorEditor/CssEditor.vue
@@ -1,105 +1,223 @@
 <script setup lang="ts">
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog'
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { useDisplayStore, useStore } from '@/stores'
-
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { Edit3, Plus, X } from 'lucide-vue-next'
+import { ref } from 'vue'
+import { toast } from 'vue-sonner'
 
 const store = useStore()
 const displayStore = useDisplayStore()
 
-function editTabName() {
-  ElMessageBox.prompt(`请输入新的方案名称`, `编辑方案名称`, {
-    confirmButtonText: `确认`,
-    cancelButtonText: `取消`,
-    inputValue: store.cssContentConfig.active,
-    inputErrorMessage: `不能与现有方案重名`,
-    inputValidator: store.validatorTabName,
-  })
-    .then(({ value }) => {
-      if (!(`${value}`).trim()) {
-        ElMessage.error(`修改失败，方案名不可为空`)
-        return
-      }
-      store.renameTab(value)
-      ElMessage.success(`修改成功~`)
-    })
+const isOpenEditDialog = ref(false)
+const editInputVal = ref(``)
+const tabHistory = ref([``, store.cssContentConfig.active])
+
+function rename(name: string) {
+  editInputVal.value = name
+  isOpenEditDialog.value = true
 }
 
-function handleTabsEdit(targetName: string, action: string) {
-  if (action === `add`) {
-    ElMessageBox.prompt(`请输入方案名称`, `新建自定义 CSS`, {
-      confirmButtonText: `确认`,
-      cancelButtonText: `取消`,
-      inputValue: `方案${store.cssContentConfig.tabs.length + 1}`,
-      inputErrorMessage: `不能与现有方案重名`,
-      inputValidator: store.validatorTabName,
-    })
-      .then(({ value }) => {
-        if (!(`${value}`).trim()) {
-          ElMessage.error(`新建失败，方案名不可为空`)
-          return
-        }
-        store.addCssContentTab(value)
-        ElMessage.success(`新建成功~`)
-      })
+function editTabName() {
+  if (!(editInputVal.value).trim()) {
+    toast.error(`新建失败，方案名不可为空`)
+    return
   }
-  else if (action === `remove`) {
-    const tabs = store.cssContentConfig.tabs
-    if (tabs.length === 1) {
-      ElMessage.warning(`至少保留一个方案`)
-      return
-    }
-    let activeName = store.cssContentConfig.active
-    if (activeName === targetName) {
-      tabs.forEach((tab, index) => {
-        if (tab.name === targetName) {
-          const nextTab = tabs[index + 1] || tabs[index - 1]
-          if (nextTab) {
-            activeName = nextTab.name
-          }
-        }
-      })
-    }
 
-    store.tabChanged(activeName)
-    store.cssContentConfig.tabs = tabs.filter(tab => tab.name !== targetName)
+  if (!store.validatorTabName(editInputVal.value)) {
+    toast.error(`不能与现有方案重名`)
+    return
   }
+  store.renameTab(editInputVal.value)
+  isOpenEditDialog.value = false
+  toast.success(`修改成功~`)
+}
+
+const isOpenAddDialog = ref(false)
+
+const addInputVal = ref(``)
+
+function addTab() {
+  if (!(addInputVal.value).trim()) {
+    toast.error(`新建失败，方案名不可为空`)
+    return
+  }
+
+  if (!store.validatorTabName(addInputVal.value)) {
+    toast.error(`不能与现有方案重名`)
+    return
+  }
+
+  store.addCssContentTab(addInputVal.value)
+  isOpenAddDialog.value = false
+
+  store.cssContentConfig.active = addInputVal.value
+  tabHistory.value = [tabHistory.value[1], addInputVal.value]
+  toast.success(`新建成功~`)
+}
+
+const isOpenDelTabConfirmDialog = ref(false)
+const delTargetName = ref(``)
+
+function removeHandler(targetName: string) {
+  delTargetName.value = targetName
+  isOpenDelTabConfirmDialog.value = true
+}
+
+function delTab() {
+  const tabs = store.cssContentConfig.tabs
+  if (tabs.length === 1) {
+    toast.warning(`至少保留一个方案`)
+    return
+  }
+
+  let activeName = store.cssContentConfig.active
+  if (activeName === delTargetName.value) {
+    tabs.forEach((tab, index) => {
+      if (tab.name === delTargetName.value) {
+        const nextTab = tabs[index + 1] || tabs[index - 1]
+        if (nextTab) {
+          activeName = nextTab.name
+        }
+      }
+    })
+  }
+
+  store.tabChanged(activeName)
+  store.cssContentConfig.tabs = tabs.filter(tab => tab.name !== delTargetName.value)
+
+  toast.success(`删除成功~`)
+}
+
+function addHandler() {
+  addInputVal.value = `方案${store.cssContentConfig.tabs.length + 1}`
+  isOpenAddDialog.value = true
+}
+
+function tabChanged(tabName: string | number) {
+  if (tabName === `add`) {
+    store.cssContentConfig.active = tabHistory.value[1]
+    addHandler()
+    return
+  }
+
+  tabHistory.value = [tabHistory.value[1], tabName as string]
 }
 </script>
 
 <template>
   <transition enter-active-class="bounceInRight">
-    <el-col v-show="displayStore.isShowCssEditor" :span="8" class="cssEditor-wrapper order-1 h-full flex flex-col border-l-1">
-      <el-tabs
+    <div v-show="displayStore.isShowCssEditor" class="cssEditor-wrapper order-1 h-full flex flex-col border-l-1">
+      <Tabs
         v-model="store.cssContentConfig.active"
-        type="border-card"
-        stretch
-        editable
-        @edit="handleTabsEdit"
-        @tab-change="store.tabChanged"
+        @update:model-value="tabChanged"
       >
-        <el-tab-pane
-          v-for="item in store.cssContentConfig.tabs"
-          :key="item.name"
-          :name="item.name"
-        >
-          <template #label>
+        <TabsList class="w-full overflow-x-auto">
+          <TabsTrigger
+            v-for="item in store.cssContentConfig.tabs"
+            :key="item.name"
+            :value="item.name"
+            class="flex-1"
+          >
             {{ item.title }}
-            <el-icon
-              v-if="store.cssContentConfig.active === item.name"
-              class="ml-1"
-              @click="editTabName()"
-            >
-              <ElIconEditPen />
-            </el-icon>
-          </template>
-        </el-tab-pane>
-      </el-tabs>
+            <Edit3
+              v-show="store.cssContentConfig.active === item.name" class="inline size-4 rounded-full p-0.5 transition-color hover:bg-gray-200 dark:hover:bg-gray-600"
+              @click="rename(item.name)"
+            />
+            <X
+              v-show="store.cssContentConfig.active === item.name" class="inline size-4 rounded-full p-0.5 transition-color hover:bg-gray-200 dark:hover:bg-gray-600"
+              @click.self="removeHandler(item.name)"
+            />
+          </TabsTrigger>
+          <TabsTrigger value="add">
+            <Plus class="h-5 w-5" />
+          </TabsTrigger>
+        </TabsList>
+      </Tabs>
       <textarea
         id="cssEditor"
         type="textarea"
         placeholder="Your custom css here."
       />
-    </el-col>
+
+      <!-- 新增弹窗 -->
+      <Dialog v-model:open="isOpenAddDialog">
+        <DialogContent class="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>新建自定义 CSS</DialogTitle>
+            <DialogDescription>
+              请输入方案名称
+            </DialogDescription>
+          </DialogHeader>
+          <Input v-model="addInputVal" />
+          <DialogFooter>
+            <Button variant="outline" @click="isOpenAddDialog = false">
+              取消
+            </Button>
+            <Button @click="addTab()">
+              保存
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <!-- 重命名弹窗 -->
+      <Dialog v-model:open="isOpenEditDialog">
+        <DialogContent class="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>编辑方案名称</DialogTitle>
+            <DialogDescription>
+              请输入新的方案名称
+            </DialogDescription>
+          </DialogHeader>
+          <Input v-model="editInputVal" />
+          <DialogFooter>
+            <Button variant="outline" @click="isOpenEditDialog = false">
+              取消
+            </Button>
+            <Button @click="editTabName">
+              保存
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <AlertDialog v-model:open="isOpenDelTabConfirmDialog">
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>提示</AlertDialogTitle>
+            <AlertDialogDescription>
+              此操作将删除该自定义方案，是否继续？
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>取消</AlertDialogCancel>
+            <AlertDialogAction @click="delTab">
+              确认
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
   </transition>
 </template>
 
@@ -141,19 +259,4 @@ function handleTabsEdit(targetName: string, action: string) {
     transform: none;
   }
 }
-
-:deep(.el-tabs__content) {
-  padding: 0 !important;
-}
-
-// 当 tab 为激活状态时，隐藏关闭按钮
-:deep(.el-tabs__item.is-active) {
-  .is-icon-close {
-    display: none;
-  }
-}
-
-:deep(.el-tabs__new-tab) {
-  margin-right: 1em;
-}
 </style>
diff --git a/src/components/CodemirrorEditor/EditorHeader/FileDropdown.vue b/src/components/CodemirrorEditor/EditorHeader/FileDropdown.vue
index 334ba6f..def8219 100644
--- a/src/components/CodemirrorEditor/EditorHeader/FileDropdown.vue
+++ b/src/components/CodemirrorEditor/EditorHeader/FileDropdown.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useStore } from '@/stores'
-
+import { Download, FileCode, Upload } from 'lucide-vue-next'
 import { storeToRefs } from 'pinia'
 
 const store = useStore()
@@ -11,8 +11,6 @@ const {
 } = storeToRefs(store)
 
 const {
-  toggleDark,
-  toggleEditOnLeft,
   exportEditorContent2HTML,
   exportEditorContent2MD,
   importMarkdownContent,
@@ -26,37 +24,25 @@ const {
     </MenubarTrigger>
     <MenubarContent align="start">
       <MenubarItem @click="importMarkdownContent()">
-        <el-icon class="mr-2 h-4 w-4">
-          <ElIconUpload />
-        </el-icon>
+        <Upload class="mr-2 size-4" />
         导入 .md
       </MenubarItem>
       <MenubarItem @click="exportEditorContent2MD()">
-        <el-icon class="mr-2 h-4 w-4">
-          <ElIconDownload />
-        </el-icon>
+        <Download class="mr-2 size-4" />
         导出 .md
       </MenubarItem>
       <MenubarItem @click="exportEditorContent2HTML()">
-        <el-icon class="mr-2 h-4 w-4">
-          <ElIconDocument />
-        </el-icon>
+        <FileCode class="mr-2 size-4" />
         导出 .html
       </MenubarItem>
       <MenubarSeparator />
-      <MenubarItem @click="toggleDark()">
-        <el-icon class="mr-2 h-4 w-4" :class="{ 'opacity-0': !isDark }">
-          <ElIconCheck />
-        </el-icon>
+      <MenubarCheckboxItem v-model:checked="isDark">
         深色模式
-      </MenubarItem>
+      </MenubarCheckboxItem>
       <MenubarSeparator />
-      <MenubarItem @click="toggleEditOnLeft()">
-        <el-icon class="mr-2 h-4 w-4" :class="{ 'opacity-0': !isEditOnLeft }">
-          <ElIconCheck />
-        </el-icon>
+      <MenubarCheckboxItem v-model:checked="isEditOnLeft">
         左侧编辑
-      </MenubarItem>
+      </MenubarCheckboxItem>
     </MenubarContent>
   </MenubarMenu>
 </template>
diff --git a/src/components/CodemirrorEditor/EditorHeader/HelpDropdown.vue b/src/components/CodemirrorEditor/EditorHeader/HelpDropdown.vue
index f61d121..e705dd9 100644
--- a/src/components/CodemirrorEditor/EditorHeader/HelpDropdown.vue
+++ b/src/components/CodemirrorEditor/EditorHeader/HelpDropdown.vue
@@ -12,10 +12,9 @@ const aboutDialogVisible = ref(false)
       帮助
     </MenubarTrigger>
     <MenubarContent align="start">
-      <MenubarItem @click="aboutDialogVisible = true">
-        <el-icon class="mr-2 h-4 w-4" />
+      <MenubarCheckboxItem @click="aboutDialogVisible = true">
         <span>关于</span>
-      </MenubarItem>
+      </MenubarCheckboxItem>
     </MenubarContent>
   </MenubarMenu>
 
diff --git a/src/components/CodemirrorEditor/EditorHeader/PostInfo.vue b/src/components/CodemirrorEditor/EditorHeader/PostInfo.vue
index e61fdfd..c5c3412 100644
--- a/src/components/CodemirrorEditor/EditorHeader/PostInfo.vue
+++ b/src/components/CodemirrorEditor/EditorHeader/PostInfo.vue
@@ -1,12 +1,18 @@
 <script setup lang="ts">
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
 import {
   Dialog,
   DialogContent,
   DialogFooter,
   DialogHeader,
   DialogTitle,
+  DialogTrigger,
 } from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Textarea } from '@/components/ui/textarea'
 import { useStore } from '@/stores'
+import { Info } from 'lucide-vue-next'
 import { storeToRefs } from 'pinia'
 
 import { ref } from 'vue'
@@ -44,7 +50,6 @@ function prePost() {
     ...auto,
     auto,
   }
-  dialogVisible.value = true
 }
 
 declare global {
@@ -72,38 +77,42 @@ function onUpdate(val: boolean) {
 </script>
 
 <template>
-  <Button variant="outline" @click="prePost">
-    发布
-  </Button>
-
-  <Dialog :open="dialogVisible" @update:open="onUpdate">
+  <Dialog v-model:open="dialogVisible" @update:open="onUpdate">
+    <DialogTrigger>
+      <Button variant="outline" @click="prePost">
+        发布
+      </Button>
+    </DialogTrigger>
     <DialogContent>
       <DialogHeader>
         <DialogTitle>发布</DialogTitle>
       </DialogHeader>
+      <Alert>
+        <Info class="h-4 w-4" />
+        <AlertTitle>提示</AlertTitle>
+        <AlertDescription>
+          此功能由第三方浏览器插件支持，本平台不保证安全性。
+        </AlertDescription>
+      </Alert>
 
-      <el-alert
-        class="mb-4"
-        title="注：此功能由第三方浏览器插件支持，本平台不保证安全性。"
-        type="info"
-        show-icon
-      />
-      <el-form class="postInfo" label-width="50" :model="form">
-        <el-form-item label="封面">
-          <el-input v-model="form.thumb" placeholder="自动提取第一张图" />
-        </el-form-item>
-        <el-form-item label="标题">
-          <el-input v-model="form.title" placeholder="自动提取第一个标题" />
-        </el-form-item>
-        <el-form-item label="描述">
-          <el-input
-            v-model="form.desc"
-            type="textarea"
-            :rows="4"
-            placeholder="自动提取第一个段落"
-          />
-        </el-form-item>
-      </el-form>
+      <div class="w-full flex items-center gap-4">
+        <Label for="thumb" class="w-10 text-end">
+          封面
+        </Label>
+        <Input id="thumb" v-model="form.thumb" placeholder="自动提取第一张图" />
+      </div>
+      <div class="w-full flex items-center gap-4">
+        <Label for="title" class="w-10 text-end">
+          标题
+        </Label>
+        <Input id="title" v-model="form.title" placeholder="自动提取第一个标题" />
+      </div>
+      <div class="w-full flex items-start gap-4">
+        <Label for="desc" class="w-10 text-end">
+          描述
+        </Label>
+        <Textarea id="desc" v-model="form.desc" placeholder="自动提取第一个段落" />
+      </div>
 
       <DialogFooter>
         <Button variant="outline" @click="dialogVisible = false">
diff --git a/src/components/CodemirrorEditor/EditorHeader/StyleDropdown.vue b/src/components/CodemirrorEditor/EditorHeader/StyleDropdown.vue
index b004a5e..acb31d4 100644
--- a/src/components/CodemirrorEditor/EditorHeader/StyleDropdown.vue
+++ b/src/components/CodemirrorEditor/EditorHeader/StyleDropdown.vue
@@ -4,6 +4,7 @@ import {
   HoverCardContent,
   HoverCardTrigger,
 } from '@/components/ui/hover-card'
+import { MenubarCheckboxItem } from '@/components/ui/menubar'
 import {
   codeBlockThemeOptions,
   colorOptions,
@@ -12,10 +13,10 @@ import {
   legendOptions,
   themeOptions,
 } from '@/config'
-
 import { useDisplayStore, useStore } from '@/stores'
 import { storeToRefs } from 'pinia'
-import { ref } from 'vue'
+import { ref, useTemplateRef } from 'vue'
+import PickColors, { type Format } from 'vue-pick-colors'
 import StyleOptionMenu from './StyleOptionMenu.vue'
 
 const store = useStore()
@@ -56,6 +57,10 @@ function customStyle() {
     cssEditor.value!.refresh()
   }, 50)
 }
+
+const pickColorsContainer = useTemplateRef(`pickColorsContainer`)
+const format = ref<Format>(`rgb`)
+const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
 </script>
 
 <template>
@@ -100,54 +105,36 @@ function customStyle() {
         :change="legendChanged"
       />
       <MenubarSeparator />
-      <MenubarItem @click.self.prevent="showPicker">
+      <MenubarCheckboxItem @click.self.prevent="showPicker">
         <HoverCard :open-delay="100">
           <HoverCardTrigger class="w-full flex">
-            <el-icon class="mr-2 h-4 w-4" />
             自定义主题色
           </HoverCardTrigger>
           <HoverCardContent side="right" class="w-min">
-            <ElColorPicker
-              ref="colorPicker"
-              v-model="primaryColor"
-              :teleported="false"
-              show-alpha
-              class="ml-auto"
-              style="height: 2em"
-              @change="colorChanged"
-              @click="showPicker"
-            />
+            <div ref="pickColorsContainer">
+              <PickColors
+                v-model:value="primaryColor"
+                show-alpha
+                :format="format" :format-options="formatOptions"
+                :theme="store.isDark ? 'dark' : 'light'"
+                :popup-container="pickColorsContainer!"
+                @change="store.colorChanged"
+              />
+            </div>
           </HoverCardContent>
         </HoverCard>
-        <!-- <el-icon class="mr-2 h-4 w-4" />
-        自定义主题色
-        <el-color-picker
-          ref="colorPicker"
-          v-model="primaryColor"
-          :teleported="false"
-          show-alpha
-          class="ml-auto"
-          style="height: 2em"
-          @change="colorChanged"
-          @click="showPicker"
-        /> -->
-      </MenubarItem>
-      <MenubarItem @click="customStyle">
-        <el-icon class="mr-2 h-4 w-4" />
+      </MenubarCheckboxItem>
+      <MenubarCheckboxItem @click="customStyle">
         自定义 CSS
-      </MenubarItem>
+      </MenubarCheckboxItem>
       <MenubarSeparator />
-      <MenubarItem @click="macCodeBlockChanged">
-        <el-icon class="mr-2 h-4 w-4" :class="{ 'opacity-0': !isMacCodeBlock }">
-          <ElIconCheck />
-        </el-icon>
+      <MenubarCheckboxItem :checked="isMacCodeBlock" @click="macCodeBlockChanged">
         Mac 代码块
-      </MenubarItem>
+      </MenubarCheckboxItem>
       <MenubarSeparator />
-      <MenubarItem divided @click="resetStyleConfirm">
-        <el-icon class="mr-2 h-4 w-4" />
+      <MenubarCheckboxItem divided @click="resetStyleConfirm">
         重置
-      </MenubarItem>
+      </MenubarCheckboxItem>
     </MenubarContent>
   </MenubarMenu>
 </template>
diff --git a/src/components/CodemirrorEditor/EditorHeader/StyleOptionMenu.vue b/src/components/CodemirrorEditor/EditorHeader/StyleOptionMenu.vue
index bc6cd9f..3344095 100644
--- a/src/components/CodemirrorEditor/EditorHeader/StyleOptionMenu.vue
+++ b/src/components/CodemirrorEditor/EditorHeader/StyleOptionMenu.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { IConfigOption } from '@/types'
 import {
-  MenubarItem,
+  MenubarCheckboxItem,
   MenubarSub,
   MenubarSubContent,
   MenubarSubTrigger,
@@ -31,26 +31,24 @@ function setStyle(title: string, value: string) {
 <template>
   <MenubarSub>
     <MenubarSubTrigger>
-      <el-icon class="mr-2 h-4 w-4" />
+      <span class="mr-2 h-4 w-4" />
       <span>{{ props.title }}</span>
     </MenubarSubTrigger>
     <MenubarSubContent class="max-h-56 overflow-auto">
-      <MenubarItem
+      <MenubarCheckboxItem
         v-for="{ label, value, desc } in options"
         :key="value"
         :label="label"
         :model-value="value"
         class="w-50"
+        :checked="current === value"
         @click="change(value)"
       >
-        <el-icon class="mr-2 h-4 w-4" :style="{ opacity: +(current === value) }">
-          <ElIconCheck />
-        </el-icon>
         {{ label }}
         <DropdownMenuShortcut :style="setStyle(title, value)">
           {{ desc }}
         </DropdownMenuShortcut>
-      </MenubarItem>
+      </MenubarCheckboxItem>
     </MenubarSubContent>
   </MenubarSub>
 </template>
diff --git a/src/components/CodemirrorEditor/EditorHeader/index.vue b/src/components/CodemirrorEditor/EditorHeader/index.vue
index cc0d363..2da55a0 100644
--- a/src/components/CodemirrorEditor/EditorHeader/index.vue
+++ b/src/components/CodemirrorEditor/EditorHeader/index.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
+import type { Format } from 'vue-pick-colors'
 import { Button } from '@/components/ui/button'
 import {
   Menubar,
+  MenubarCheckboxItem,
   MenubarContent,
-  MenubarItem,
   MenubarMenu,
   MenubarSeparator,
   MenubarShortcut,
@@ -17,7 +18,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
-
+import { Toaster } from '@/components/ui/sonner'
 import {
   altSign,
   codeBlockThemeOptions,
@@ -32,16 +33,15 @@ import {
 } from '@/config'
 import { useDisplayStore, useStore } from '@/stores'
 import { mergeCss, solveWeChatImage } from '@/utils'
-import { ElNotification } from 'element-plus'
 import { Moon, Paintbrush, Sun } from 'lucide-vue-next'
 import { storeToRefs } from 'pinia'
+import { nextTick, ref, useTemplateRef } from 'vue'
+import PickColors from 'vue-pick-colors'
+import { toast } from 'vue-sonner'
 
-import { nextTick } from 'vue'
 import EditDropdown from './EditDropdown.vue'
-
 import FileDropdown from './FileDropdown.vue'
 import HelpDropdown from './HelpDropdown.vue'
-
 import PostInfo from './PostInfo.vue'
 import StyleDropdown from './StyleDropdown.vue'
 
@@ -122,7 +122,7 @@ function copy() {
         // 公众号不支持 position， 转换为等价的 translateY
         .replace(/top:(.*?)em/g, `transform: translateY($1em)`)
         // 适配主题中的颜色变量
-        .replaceAll(`var(--el-text-color-regular)`, `#3f3f3f`)
+        .replaceAll(`hsl(var(--foreground))`, `#3f3f3f`)
         .replaceAll(`var(--blockquote-background)`, `#f7f7f7`)
         .replaceAll(`var(--md-primary-color)`, primaryColor.value)
         .replaceAll(/--md-primary-color:.+?;/g, ``)
@@ -169,13 +169,7 @@ function copy() {
       }
 
       // 输出提示
-      ElNotification({
-        showClose: true,
-        message: `已复制渲染后的文章到剪贴板，可直接到公众号后台粘贴`,
-        offset: 80,
-        duration: 1600,
-        type: `success`,
-      })
+      toast.success(`已复制渲染后的文章到剪贴板，可直接到公众号后台粘贴`)
 
       editorRefresh()
       emit(`endCopy`)
@@ -189,6 +183,10 @@ function customStyle() {
     store.cssEditor!.refresh()
   }, 50)
 }
+
+const pickColorsContainer = useTemplateRef(`pickColorsContainer`)
+const format = ref<Format>(`rgb`)
+const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
 </script>
 
 <template>
@@ -199,25 +197,21 @@ function customStyle() {
       <MenubarMenu>
         <MenubarTrigger> 格式 </MenubarTrigger>
         <MenubarContent class="w-60" align="start">
-          <MenubarItem
+          <MenubarCheckboxItem
             v-for="{ label, kbd, emitArgs } in formatItems" :key="label"
             @click="emitArgs[0] === 'addFormat' ? $emit(emitArgs[0], emitArgs[1]) : $emit(emitArgs[0])"
           >
-            <el-icon class="mr-2 h-4 w-4" />
             {{ label }}
             <MenubarShortcut>
               <kbd v-for="item in kbd" :key="item" class="mx-1 bg-gray-2 dark:bg-stone-9">
                 {{ item }}
               </kbd>
             </MenubarShortcut>
-          </MenubarItem>
+          </MenubarCheckboxItem>
           <MenubarSeparator />
-          <MenubarItem @click="citeStatusChanged()">
-            <el-icon class="mr-2 h-4 w-4" :class="{ 'opacity-0': !isCiteStatus }">
-              <ElIconCheck />
-            </el-icon>
+          <MenubarCheckboxItem :checked="isCiteStatus" @click="citeStatusChanged()">
             微信外链转底部引用
-          </MenubarItem>
+          </MenubarCheckboxItem>
         </MenubarContent>
       </MenubarMenu>
       <EditDropdown />
@@ -288,8 +282,15 @@ function customStyle() {
           </div>
           <div class="space-y-2">
             <h2>自定义主题色</h2>
-            <div>
-              <el-color-picker v-model="primaryColor" :teleported="false" show-alpha @change="store.colorChanged" />
+            <div ref="pickColorsContainer">
+              <PickColors
+                v-model:value="primaryColor"
+                show-alpha
+                :format="format" :format-options="formatOptions"
+                :theme="store.isDark ? 'dark' : 'light'"
+                :popup-container="pickColorsContainer!"
+                @change="store.colorChanged"
+              />
             </div>
           </div>
           <div class="space-y-2">
@@ -436,11 +437,9 @@ function customStyle() {
           </div>
           <div class="space-y-2">
             <h2>样式配置</h2>
-            <div>
-              <Button class="w-full" @click="store.resetStyleConfirm()">
-                重置
-              </Button>
-            </div>
+            <Button @click="store.resetStyleConfirm">
+              重置
+            </Button>
           </div>
         </div>
       </PopoverContent>
@@ -450,6 +449,8 @@ function customStyle() {
     </Button>
 
     <PostInfo />
+
+    <Toaster rich-colors position="top-center" />
   </header>
 </template>
 
diff --git a/src/components/CodemirrorEditor/InsertFormDialog.vue b/src/components/CodemirrorEditor/InsertFormDialog.vue
index 4bd086f..66c90ed 100644
--- a/src/components/CodemirrorEditor/InsertFormDialog.vue
+++ b/src/components/CodemirrorEditor/InsertFormDialog.vue
@@ -6,6 +6,14 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog'
+import { Label } from '@/components/ui/label'
+import {
+  NumberField,
+  NumberFieldContent,
+  NumberFieldDecrement,
+  NumberFieldIncrement,
+  NumberFieldInput,
+} from '@/components/ui/number-field'
 import { useDisplayStore, useStore } from '@/stores'
 
 import { createTable } from '@/utils'
@@ -51,40 +59,36 @@ function onUpdate(val: boolean) {
       <DialogHeader>
         <DialogTitle>插入表格</DialogTitle>
       </DialogHeader>
-      <el-row class="tb-options" type="flex" align="middle" :gutter="10">
-        <el-col :span="12">
-          行数：
-          <el-input-number
-            v-model="rowNum"
-            controls-position="right"
-            :min="1"
-            :max="100"
-            size="small"
+      <div class="space-x-2 flex justify-between">
+        <NumberField v-model="rowNum" :min="1" :max="100">
+          <Label>行数</Label>
+          <NumberFieldContent>
+            <NumberFieldDecrement />
+            <NumberFieldInput />
+            <NumberFieldIncrement />
+          </NumberFieldContent>
+        </NumberField>
+        <NumberField v-model="colNum" :min="1" :max="100">
+          <Label>列数</Label>
+          <NumberFieldContent>
+            <NumberFieldDecrement />
+            <NumberFieldInput />
+            <NumberFieldIncrement />
+          </NumberFieldContent>
+        </NumberField>
+      </div>
+      <div class="space-y-2 border-1 rounded p-2">
+        <div v-for="row in rowNum + 1" :key="row" :class="{ 'head-style': row === 1 }" class="space-x-2 flex">
+          <Input
+            v-for="col in colNum" :key="col"
+            v-model="tableData[`k_${row - 1}_${col - 1}`]"
+            :class="{
+              'bg-gray-100 dark:bg-gray-900': row === 1,
+            }"
+            :placeholder="row === 1 ? '表头' : ''"
           />
-        </el-col>
-        <el-col :span="12">
-          列数：
-          <el-input-number
-            v-model="colNum"
-            controls-position="right"
-            :min="1"
-            :max="100"
-            size="small"
-          />
-        </el-col>
-      </el-row>
-      <table style="border-collapse: collapse" class="input-table">
-        <tr v-for="row in rowNum + 1" :key="row" :class="{ 'head-style': row === 1 }">
-          <td v-for="col in colNum" :key="col">
-            <el-input
-              v-model="tableData[`k_${row - 1}_${col - 1}`]"
-              align="center"
-              :placeholder="row === 1 ? '表头' : ''"
-            />
-          </td>
-        </tr>
-      </table>
-
+        </div>
+      </div>
       <DialogFooter>
         <Button variant="outline" @click="toggleShowInsertFormDialog(false)">
           取 消
@@ -98,11 +102,4 @@ function onUpdate(val: boolean) {
 </template>
 
 <style lang="less" scoped>
-.tb-options {
-  margin-bottom: 20px;
-}
-
-.input-table :deep(.el-input__inner) {
-  border-radius: 0;
-}
 </style>
diff --git a/src/components/CodemirrorEditor/UploadImgDialog.vue b/src/components/CodemirrorEditor/UploadImgDialog.vue
index 1a588bb..a9de6de 100644
--- a/src/components/CodemirrorEditor/UploadImgDialog.vue
+++ b/src/components/CodemirrorEditor/UploadImgDialog.vue
@@ -1,13 +1,24 @@
 <script setup lang="ts">
+import CustomUploadForm from '@/components/CustomUploadForm.vue'
+import FormItem from '@/components/FormItem.vue'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { Switch } from '@/components/ui/switch'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { useDisplayStore } from '@/stores'
-import { checkImage, removeLeft } from '@/utils'
-
-import { UploadFilled } from '@element-plus/icons-vue'
-import CodeMirror from 'codemirror'
-
-import { ElMessage } from 'element-plus'
-import { nextTick, onBeforeMount, ref, watch } from 'vue'
+import { checkImage } from '@/utils'
+import { useFileDialog } from '@vueuse/core'
+import { UploadCloud } from 'lucide-vue-next'
+import { onBeforeMount, ref } from 'vue'
+import { toast } from 'vue-sonner'
 
 const emit = defineEmits([`uploadImage`])
 
@@ -68,23 +79,6 @@ const formMp = ref({
   appsecret: ``,
 })
 const isWebsite = ref(window.location.href.startsWith(`http`))
-const formCustom = ref<{ code: string, editor: CodeMirror.EditorFromTextArea | null }>({
-  code:
-    localStorage.getItem(`formCustomConfig`)
-    || removeLeft(`
-  const {file, util, okCb, errCb} = CUSTOM_ARG
-  const param = new FormData()
-  param.append('file', file)
-  util.axios.post('${window.location.origin}/upload', param, {
-    headers: { 'Content-Type': 'multipart/form-data' }
-  }).then(res => {
-    okCb(res.url)
-  }).catch(err => {
-    errCb(err)
-  })
-`).trim(),
-  editor: null,
-})
 
 const options = [
   {
@@ -127,27 +121,8 @@ const options = [
 
 const imgHost = ref(`default`)
 
-const formCustomElInput = ref<(HTMLInputElement & { $el: HTMLElement }) | null>(null)
 const activeName = ref(`upload`)
 
-watch(
-  activeName,
-  async (val) => {
-    if (val === `formCustom`) {
-      nextTick(() => {
-        const textarea = formCustomElInput.value!.$el.querySelector(`textarea`)!
-        formCustom.value.editor ||= CodeMirror.fromTextArea(textarea, {
-          mode: `javascript`,
-        })
-        // formCustom.value.editor.setValue(formCustom.value.code)
-      })
-    }
-  },
-  {
-    immediate: true,
-  },
-)
-
 onBeforeMount(() => {
   if (localStorage.getItem(`githubConfig`)) {
     formGitHub.value = JSON.parse(localStorage.getItem(`githubConfig`)!)
@@ -177,28 +152,28 @@ onBeforeMount(() => {
 
 function changeImgHost() {
   localStorage.setItem(`imgHost`, imgHost.value)
-  ElMessage.success(`已成功切换图床`)
+  toast.success(`已成功切换图床`)
 }
 
 function saveGitHubConfiguration() {
   if (!(formGitHub.value.repo && formGitHub.value.accessToken)) {
     const blankElement = formGitHub.value.repo ? `token` : `GitHub 仓库`
-    ElMessage.error(`参数「${blankElement}」不能为空`)
+    toast.error(`参数「${blankElement}」不能为空`)
     return
   }
 
   localStorage.setItem(`githubConfig`, JSON.stringify(formGitHub.value))
-  ElMessage.success(`保存成功`)
+  toast.success(`保存成功`)
 }
 
 // const saveGiteeConfiguration = () => {
 //   if (!(formGitee.value.repo && formGitee.value.accessToken)) {
 //     const blankElement = formGitee.value.repo ? `私人令牌` : `Gitee 仓库`
-//     ElMessage.error(`参数「${blankElement}」不能为空`)
+//     toast.error(`参数「${blankElement}」不能为空`)
 //     return
 //   }
 //   localStorage.setItem(`giteeConfig`, JSON.stringify(formGitee.value))
-//   ElMessage.success(`保存成功`)
+//   toast.success(`保存成功`)
 // }
 
 function saveAliOSSConfiguration() {
@@ -210,11 +185,11 @@ function saveAliOSSConfiguration() {
       && formAliOSS.value.region
     )
   ) {
-    ElMessage.error(`阿里云 OSS 参数配置不全`)
+    toast.error(`阿里云 OSS 参数配置不全`)
     return
   }
   localStorage.setItem(`aliOSSConfig`, JSON.stringify(formAliOSS.value))
-  ElMessage.success(`保存成功`)
+  toast.success(`保存成功`)
 }
 function saveMinioOSSConfiguration() {
   if (
@@ -225,11 +200,11 @@ function saveMinioOSSConfiguration() {
       && minioOSS.value.secretKey
     )
   ) {
-    ElMessage.error(`MinIO 参数配置不全`)
+    toast.error(`MinIO 参数配置不全`)
     return
   }
   localStorage.setItem(`minioConfig`, JSON.stringify(minioOSS.value))
-  ElMessage.success(`保存成功`)
+  toast.success(`保存成功`)
 }
 function saveTxCOSConfiguration() {
   if (
@@ -240,11 +215,11 @@ function saveTxCOSConfiguration() {
       && formTxCOS.value.region
     )
   ) {
-    ElMessage.error(`腾讯云 COS 参数配置不全`)
+    toast.error(`腾讯云 COS 参数配置不全`)
     return
   }
   localStorage.setItem(`txCOSConfig`, JSON.stringify(formTxCOS.value))
-  ElMessage.success(`保存成功`)
+  toast.success(`保存成功`)
 }
 function saveQiniuConfiguration() {
   if (
@@ -255,11 +230,11 @@ function saveQiniuConfiguration() {
       && formQiniu.value.domain
     )
   ) {
-    ElMessage.error(`七牛云 Kodo 参数配置不全`)
+    toast.error(`七牛云 Kodo 参数配置不全`)
     return
   }
   localStorage.setItem(`qiniuConfig`, JSON.stringify(formQiniu.value))
-  ElMessage.success(`保存成功`)
+  toast.success(`保存成功`)
 }
 
 function saveMpConfiguration() {
@@ -269,28 +244,22 @@ function saveMpConfiguration() {
       && formMp.value.appsecret
     )
   ) {
-    ElMessage.error(`公众号图床 参数配置不全`)
+    toast.error(`公众号图床 参数配置不全`)
     return
   }
   if (isWebsite.value && !formMp.value.proxyOrigin) {
-    ElMessage.error(`代理域名必须配置`)
+    toast.error(`代理域名必须配置`)
     return
   }
   localStorage.setItem(`mpConfig`, JSON.stringify(formMp.value))
-  ElMessage.success(`保存成功`)
-}
-
-function formCustomSave() {
-  const str = formCustom.value.editor!.getValue()
-  localStorage.setItem(`formCustomConfig`, str)
-  ElMessage.success(`保存成功`)
+  toast.success(`保存成功`)
 }
 
 function beforeImageUpload(file: File) {
   // check image
   const checkResult = checkImage(file)
   if (!checkResult.ok) {
-    ElMessage.error(checkResult.msg)
+    toast.error(checkResult.msg || ``)
     return false
   }
   // check image host
@@ -301,14 +270,33 @@ function beforeImageUpload(file: File) {
   const config = localStorage.getItem(`${imgHost}Config`)
   const isValidHost = imgHost === `default` || config
   if (!isValidHost) {
-    ElMessage.error(`请先配置 ${imgHost} 图床参数`)
+    toast.error(`请先配置 ${imgHost} 图床参数`)
     return false
   }
   return true
 }
 
-function uploadImage(params: { file: any }) {
-  emit(`uploadImage`, params.file)
+const dragover = ref(false)
+
+const { open, onChange } = useFileDialog({
+  accept: `image/*`,
+})
+
+onChange((files) => {
+  if (files == null) {
+    return
+  }
+
+  const file = files[0]
+
+  beforeImageUpload(file) && emit(`uploadImage`, file)
+})
+
+function onDrop(e: DragEvent) {
+  dragover.value = false
+  e.stopPropagation()
+  const file = Array.from(e.dataTransfer!.files)[0]
+  beforeImageUpload(file) && emit(`uploadImage`, file)
 }
 </script>
 
@@ -318,484 +306,409 @@ function uploadImage(params: { file: any }) {
       <DialogHeader>
         <DialogTitle>本地上传</DialogTitle>
       </DialogHeader>
+      <Tabs v-model="activeName" class="w-max">
+        <TabsList>
+          <TabsTrigger value="upload">
+            选择上传
+          </TabsTrigger>
+          <!-- <TabsTrigger value="gitee">
+            Gitee 图床
+          </TabsTrigger> -->
+          <TabsTrigger value="github">
+            GitHub 图床
+          </TabsTrigger>
+          <TabsTrigger value="aliOSS">
+            阿里云 OSS
+          </TabsTrigger>
+          <TabsTrigger value="txCOS">
+            腾讯云 COS
+          </TabsTrigger>
+          <TabsTrigger value="qiniu">
+            七牛云 Kodo
+          </TabsTrigger>
+          <TabsTrigger value="minio">
+            MinIO
+          </TabsTrigger>
+          <TabsTrigger value="mp">
+            公众号图床
+          </TabsTrigger>
+          <TabsTrigger value="formCustom">
+            自定义代码
+          </TabsTrigger>
+        </TabsList>
 
-      <el-tabs v-model="activeName">
-        <el-tab-pane class="upload-panel" label="选择上传" name="upload">
-          <el-select
-            v-model="imgHost"
-            placeholder="请选择"
-            size="small"
-            @change="changeImgHost"
+        <TabsContent value="upload">
+          <Label>
+            <span class="my-4 block">
+              图床
+            </span>
+            <Select v-model="imgHost" @update:model-value="changeImgHost">
+              <SelectTrigger>
+                <SelectValue placeholder="请选择" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                  {{ item.label }}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </Label>
+          <div
+            class="bg-clip-padding mt-4 h-50 flex flex-col cursor-pointer items-center justify-evenly border-2 rounded border-dashed transition-colors hover:border-gray-700 hover:bg-gray-400/50 dark:hover:border-gray-200 dark:hover:bg-gray-500/50"
+            :class="{
+              'border-gray-700 bg-gray-400/50 dark:border-gray-200 dark:bg-gray-500/50': dragover,
+            }"
+            @click="open()"
+            @drop.prevent="onDrop"
+            @dragover.prevent="dragover = true"
+            @dragleave.prevent="dragover = false"
           >
-            <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-          </el-select>
-          <el-upload
-            drag
-            multiple
-            action=""
-            :headers="{ 'Content-Type': 'multipart/form-data' }"
-            :show-file-list="false"
-            accept=".jpg, .jpeg, .png, .gif"
-            name="file"
-            :before-upload="beforeImageUpload"
-            :http-request="uploadImage"
-          >
-            <el-icon class="el-icon--upload">
-              <UploadFilled />
-            </el-icon>
-            <div class="el-upload__text">
+            <UploadCloud class="size-20" />
+            <p>
               将图片拖到此处，或
-              <em>点击上传</em>
-            </div>
-          </el-upload>
-        </el-tab-pane>
-        <!-- <el-tab-pane class="github-panel" label="Gitee 图床" name="gitee">
-          <el-form
-            class="setting-form"
-            :model="formGitee"
-            label-position="right"
-            label-width="150px"
-          >
-            <el-form-item label="Gitee 仓库" :required="true">
-              <el-input
+              <strong>点击上传</strong>
+            </p>
+          </div>
+        </TabsContent>
+        <!--        <TabsContent value="gitee">
+          <div class="space-y-4">
+            <FormItem label="Gitee 仓库" required>
+              <Input
                 v-model.trim="formGitee.repo"
                 placeholder="如：gitee.com/yanglbme/resource"
-              ></el-input>
-            </el-form-item>
-            <el-form-item label="分支">
-              <el-input
+              />
+            </FormItem>
+            <FormItem label="分支">
+              <Input
                 v-model.trim="formGitee.branch"
                 placeholder="如：release，可不填，默认 master"
-              ></el-input>
-            </el-form-item>
-            <el-form-item label="私人令牌" :required="true">
-              <el-input
+              />
+            </FormItem>
+            <FormItem label="私人令牌" required>
+              <Input
                 v-model.trim="formGitee.accessToken"
-                show-password
+                type="password"
                 placeholder="如：cc1d0c1426d0fd0902bd2d7184b14da61b8abc46"
-              ></el-input>
-              <el-link
-                type="primary"
+              />
+            </FormItem>
+            <FormItem>
+              <Button
+                variant="link"
+                class="p-0"
+                as="a"
                 href="https://gitee.com/profile/personal_access_tokens"
                 target="_blank"
-                >请在 Gitee「设置->安全设置->私人令牌」中生成</el-link
               >
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" @click="saveGiteeConfiguration"
-                >保存配置</el-button
-              >
-            </el-form-item>
-          </el-form>
-        </el-tab-pane> -->
-        <el-tab-pane class="github-panel" label="GitHub 图床" name="github">
-          <el-form
-            class="setting-form"
-            :model="formGitHub"
-            label-position="right"
-            label-width="150px"
-          >
-            <el-form-item label="GitHub 仓库" :required="true">
-              <el-input
+                请在 Gitee「设置->安全设置->私人令牌」中生成
+              </Button>
+            </FormItem>
+            <FormItem>
+              <Button @click="saveGiteeConfiguration">
+                保存配置
+              </Button>
+            </FormItem>
+          </div>
+        </TabsContent> -->
+        <TabsContent value="github">
+          <div class="space-y-4">
+            <FormItem label="GitHub 仓库" required>
+              <Input
                 v-model.trim="formGitHub.repo"
                 placeholder="如：github.com/yanglbme/resource"
               />
-            </el-form-item>
-            <el-form-item label="分支">
-              <el-input
+            </FormItem>
+            <FormItem label="分支">
+              <Input
                 v-model.trim="formGitHub.branch"
                 placeholder="如：release，可不填，默认 master"
               />
-            </el-form-item>
-            <el-form-item label="Token" :required="true">
-              <el-input
+            </FormItem>
+            <FormItem label="Token" required>
+              <Input
                 v-model.trim="formGitHub.accessToken"
-                show-password
+                type="password"
                 placeholder="如：cc1d0c1426d0fd0902bd2d7184b14da61b8abc46"
               />
-              <el-link
-                type="primary"
+            </FormItem>
+            <FormItem>
+              <Button
+                variant="link"
+                class="p-0"
+                as="a"
                 href="https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token"
                 target="_blank"
               >
                 如何获取 GitHub Token？
-              </el-link>
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" @click="saveGitHubConfiguration">
+              </Button>
+            </FormItem>
+            <FormItem>
+              <Button @click="saveGitHubConfiguration">
                 保存配置
-              </el-button>
-            </el-form-item>
-          </el-form>
-        </el-tab-pane>
-        <el-tab-pane class="github-panel" label="阿里云 OSS" name="aliOSS">
-          <el-form
-            class="setting-form"
-            :model="formAliOSS"
-            label-position="right"
-            label-width="150px"
-          >
-            <el-form-item label="AccessKey ID" :required="true">
-              <el-input
+              </Button>
+            </FormItem>
+          </div>
+        </TabsContent>
+        <TabsContent value="aliOSS">
+          <div class="space-y-4">
+            <FormItem label="AccessKey ID" required>
+              <Input
                 v-model.trim="formAliOSS.accessKeyId"
                 placeholder="如：LTAI4GdoocsmdoxUf13ylbaNHk"
               />
-            </el-form-item>
-            <el-form-item label="AccessKey Secret" :required="true">
-              <el-input
+            </FormItem>
+            <FormItem label="AccessKey Secret" required>
+              <Input
                 v-model.trim="formAliOSS.accessKeySecret"
-                show-password
+                type="password"
                 placeholder="如：cc1d0c142doocs0902bd2d7md4b14da6ylbabc46"
               />
-            </el-form-item>
-            <el-form-item label="Bucket" :required="true">
-              <el-input v-model.trim="formAliOSS.bucket" placeholder="如：doocs" />
-            </el-form-item>
-            <el-form-item label="Bucket 所在区域" :required="true">
-              <el-input
+            </FormItem>
+            <FormItem label="Bucket" required>
+              <Input v-model.trim="formAliOSS.bucket" placeholder="如：doocs" />
+            </FormItem>
+            <FormItem label="Bucket 所在区域" required>
+              <Input
                 v-model.trim="formAliOSS.region"
                 placeholder="如：oss-cn-shenzhen"
               />
-            </el-form-item>
-            <el-form-item label="UseSSL" :required="true">
-              <el-switch
-                v-model="formAliOSS.useSSL"
-                active-text="是"
-                inactive-text="否"
-              />
-            </el-form-item>
-            <el-form-item label="自定义 CDN 域名" :required="false">
-              <el-input
+            </FormItem>
+            <FormItem label="UseSSL" required>
+              <Switch v-model:checked="formAliOSS.useSSL" />
+            </FormItem>
+            <FormItem label="自定义 CDN 域名">
+              <Input
                 v-model.trim="formAliOSS.cdnHost"
                 placeholder="如：https://imagecdn.alidaodao.com，可不填"
               />
-            </el-form-item>
-            <el-form-item label="存储路径">
-              <el-input
+            </FormItem>
+            <FormItem label="存储路径">
+              <Input
                 v-model.trim="formAliOSS.path"
                 placeholder="如：img，可不填，默认为根目录"
               />
-              <el-link
-                type="primary"
+            </FormItem>
+            <FormItem>
+              <Button
+                variant="link"
+                class="p-0"
+                as="a"
                 href="https://help.aliyun.com/document_detail/31883.html"
                 target="_blank"
               >
                 如何使用阿里云 OSS？
-              </el-link>
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" @click="saveAliOSSConfiguration">
+              </Button>
+            </FormItem>
+            <FormItem>
+              <Button @click="saveAliOSSConfiguration">
                 保存配置
-              </el-button>
-            </el-form-item>
-          </el-form>
-        </el-tab-pane>
-        <el-tab-pane class="github-panel" label="腾讯云 COS" name="txCOS">
-          <el-form
-            class="setting-form"
-            :model="formTxCOS"
-            label-position="right"
-            label-width="150px"
-          >
-            <el-form-item label="SecretId" :required="true">
-              <el-input
+              </Button>
+            </FormItem>
+          </div>
+        </TabsContent>
+        <TabsContent value="txCOS">
+          <div class="space-y-4">
+            <FormItem label="SecretId" required>
+              <Input
                 v-model.trim="formTxCOS.secretId"
                 placeholder="如：AKIDnQp1w3DOOCSs8F5MDp9tdoocsmdUPonW3"
               />
-            </el-form-item>
-            <el-form-item label="SecretKey" :required="true">
-              <el-input
+            </FormItem>
+            <FormItem label="SecretKey" required>
+              <Input
                 v-model.trim="formTxCOS.secretKey"
-                show-password
+                type="password"
                 placeholder="如：ukLmdtEJ9271f3DOocsMDsCXdS3YlbW0"
               />
-            </el-form-item>
-            <el-form-item label="Bucket" :required="true">
-              <el-input
+            </FormItem>
+            <FormItem label="Bucket" required>
+              <Input
                 v-model.trim="formTxCOS.bucket"
                 placeholder="如：doocs-3212520134"
               />
-            </el-form-item>
-            <el-form-item label="Bucket 所在区域" :required="true">
-              <el-input v-model.trim="formTxCOS.region" placeholder="如：ap-guangzhou" />
-            </el-form-item>
-            <el-form-item label="自定义 CDN 域名" :required="false">
-              <el-input
+            </FormItem>
+            <FormItem label="Bucket 所在区域" required>
+              <Input v-model.trim="formTxCOS.region" placeholder="如：ap-guangzhou" />
+            </FormItem>
+            <FormItem label="自定义 CDN 域名">
+              <Input
                 v-model.trim="formTxCOS.cdnHost"
                 placeholder="如：https://imagecdn.alidaodao.com，可不填"
               />
-            </el-form-item>
-            <el-form-item label="存储路径">
-              <el-input
+            </FormItem>
+            <FormItem label="存储路径">
+              <Input
                 v-model.trim="formTxCOS.path"
                 placeholder="如：img，可不填，默认根目录"
               />
-              <el-link
-                type="primary"
+            </FormItem>
+            <FormItem>
+              <Button
+                variant="link"
+                class="p-0"
+                as="a"
                 href="https://cloud.tencent.com/document/product/436/38484"
                 target="_blank"
               >
                 如何使用腾讯云 COS？
-              </el-link>
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" @click="saveTxCOSConfiguration">
+              </Button>
+            </FormItem>
+            <FormItem>
+              <Button @click="saveTxCOSConfiguration">
                 保存配置
-              </el-button>
-            </el-form-item>
-          </el-form>
-        </el-tab-pane>
-        <el-tab-pane class="github-panel" label="七牛云 Kodo" name="qiniu">
-          <el-form
-            class="setting-form"
-            :model="formQiniu"
-            label-position="right"
-            label-width="150px"
-          >
-            <el-form-item label="AccessKey" :required="true">
-              <el-input
+              </Button>
+            </FormItem>
+          </div>
+        </TabsContent>
+        <TabsContent value="qiniu">
+          <div class="space-y-4">
+            <FormItem label="AccessKey" required>
+              <Input
                 v-model.trim="formQiniu.accessKey"
                 placeholder="如：6DD3VaLJ_SQgOdoocsyTV_YWaDmdnL2n8EGx7kG"
               />
-            </el-form-item>
-            <el-form-item label="SecretKey" :required="true">
-              <el-input
+            </FormItem>
+            <FormItem label="SecretKey" required>
+              <Input
                 v-model.trim="formQiniu.secretKey"
-                show-password
+                type="password"
                 placeholder="如：qgZa5qrvDOOcsmdKStD1oCjZ9nB7MDvJUs_34SIm"
               />
-            </el-form-item>
-            <el-form-item label="Bucket" :required="true">
-              <el-input v-model.trim="formQiniu.bucket" placeholder="如：md" />
-            </el-form-item>
-            <el-form-item label="Bucket 对应域名" :required="true">
-              <el-input
+            </FormItem>
+            <FormItem label="Bucket" required>
+              <Input v-model.trim="formQiniu.bucket" placeholder="如：md" />
+            </FormItem>
+            <FormItem label="Bucket 对应域名" required>
+              <Input
                 v-model.trim="formQiniu.domain"
                 placeholder="如：https://images.123ylb.cn"
               />
-            </el-form-item>
-            <el-form-item label="存储区域" :required="false">
-              <el-input v-model.trim="formQiniu.region" placeholder="如：z2，可不填" />
-            </el-form-item>
-            <el-form-item label="存储路径" :required="false">
-              <el-input
+            </FormItem>
+            <FormItem label="存储区域">
+              <Input v-model.trim="formQiniu.region" placeholder="如：z2，可不填" />
+            </FormItem>
+            <FormItem label="存储路径">
+              <Input
                 v-model.trim="formQiniu.path"
                 placeholder="如：img，可不填，默认为根目录"
               />
-              <el-link
-                type="primary"
+            </FormItem>
+            <FormItem>
+              <Button
+                variant="link"
+                class="p-0"
                 href="https://developer.qiniu.com/kodo"
                 target="_blank"
               >
                 如何使用七牛云 Kodo？
-              </el-link>
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" @click="saveQiniuConfiguration">
+              </Button>
+            </FormItem>
+            <FormItem>
+              <Button @click="saveQiniuConfiguration">
                 保存配置
-              </el-button>
-            </el-form-item>
-          </el-form>
-        </el-tab-pane>
-        <el-tab-pane class="github-panel" label="MinIO" name="minio">
-          <el-form
-            class="setting-form"
-            :model="minioOSS"
-            label-position="right"
-            label-width="150px"
-          >
-            <el-form-item label="Endpoint" :required="true">
-              <el-input v-model.trim="minioOSS.endpoint" placeholder="如：play.min.io" />
-            </el-form-item>
-            <el-form-item label="Port" :required="false">
-              <el-input
+              </Button>
+            </FormItem>
+          </div>
+        </TabsContent>
+        <TabsContent value="minio">
+          <div class="space-y-4">
+            <FormItem label="Endpoint" required>
+              <Input v-model.trim="minioOSS.endpoint" placeholder="如：play.min.io" />
+            </FormItem>
+            <FormItem label="Port">
+              <Input
                 v-model.trim="minioOSS.port"
                 type="number"
                 placeholder="如：9000，可不填，http 默认为 80，https 默认为 443"
               />
-            </el-form-item>
-            <el-form-item label="UseSSL" :required="true">
-              <el-switch v-model="minioOSS.useSSL" active-text="是" inactive-text="否" />
-            </el-form-item>
-            <el-form-item label="Bucket" :required="true">
-              <el-input v-model.trim="minioOSS.bucket" placeholder="如：doocs" />
-            </el-form-item>
-            <el-form-item label="AccessKey" :required="true">
-              <el-input v-model.trim="minioOSS.accessKey" placeholder="如：zhangsan" />
-            </el-form-item>
-            <el-form-item label="SecretKey" :required="true">
-              <el-input v-model.trim="minioOSS.secretKey" placeholder="如：asdasdasd" />
-              <el-link
-                type="primary"
+            </FormItem>
+            <FormItem label="UseSSL" required>
+              <Switch v-model:checked="minioOSS.useSSL" />
+            </FormItem>
+            <FormItem label="Bucket" required>
+              <Input v-model.trim="minioOSS.bucket" placeholder="如：doocs" />
+            </FormItem>
+            <FormItem label="AccessKey" required>
+              <Input v-model.trim="minioOSS.accessKey" placeholder="如：zhangsan" />
+            </FormItem>
+            <FormItem label="SecretKey" required>
+              <Input v-model.trim="minioOSS.secretKey" placeholder="如：asdasdasd" />
+            </FormItem>
+            <FormItem>
+              <Button
+                variant="link"
+                class="p-0"
                 href="http://docs.minio.org.cn/docs/master/minio-client-complete-guide"
                 target="_blank"
               >
                 如何使用 MinIO？
-              </el-link>
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" @click="saveMinioOSSConfiguration">
+              </Button>
+            </FormItem>
+            <FormItem>
+              <Button @click="saveMinioOSSConfiguration">
                 保存配置
-              </el-button>
-            </el-form-item>
-          </el-form>
-        </el-tab-pane>
-        <el-tab-pane class="github-panel" label="公众号 图床" name="mp">
-          <template #label>
-            <el-tooltip placement="top">
-              <template #content>
-                由于接口请求跨域问题建议在浏览器插件形式中使用
-              </template>
-              <div>公众号 图床</div>
-            </el-tooltip>
-          </template>
-          <el-form
-            class="setting-form"
-            :model="formMp"
-            label-position="right"
-            label-width="150px"
-          >
-            <el-form-item label="代理域名" :required="false">
-              <el-input
+              </Button>
+            </FormItem>
+          </div>
+        </TabsContent>
+        <TabsContent value="mp">
+          <div class="space-y-4">
+            <FormItem label="代理域名">
+              <Input
                 v-model.trim="formMp.proxyOrigin"
                 placeholder=""
               />
-            </el-form-item>
-            <el-form-item label="appID" :required="true">
-              <el-input
+            </FormItem>
+            <FormItem label="appID" required>
+              <Input
                 v-model.trim="formMp.appID"
                 placeholder="如：wx6e1234567890efa3"
               />
-            </el-form-item>
-            <el-form-item label="appsecret">
-              <el-input
+            </FormItem>
+            <FormItem label="appsecret">
+              <Input
                 v-model.trim="formMp.appsecret"
                 placeholder="如：d9f1abcdef01234567890abcdef82397"
               />
-              <el-link
-                type="primary"
-                href="https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Getting_Started_Guide.html"
-                target="_blank"
-              >
-                如何开启公众号开发者模式并获取应用账号密钥？
-              </el-link>
-            </el-form-item>
-            <el-form-item style="margin-top: -22px;">
-              <el-link
-                type="primary"
-                href="https://mpmd.pages.dev/tutorial/"
-                target="_blank"
-              >
-                如何在浏览器插件中使用公众号图床？
-              </el-link>
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" @click="saveMpConfiguration">
+            </FormItem>
+            <FormItem>
+              <div class="flex flex-col items-start">
+                <Button
+                  variant="link"
+                  class="p-0"
+                  href="https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Getting_Started_Guide.html"
+                  target="_blank"
+                >
+                  如何开启公众号开发者模式并获取应用账号密钥？
+                </Button>
+                <Button
+                  variant="link"
+                  class="p-0"
+                  href="https://mpmd.pages.dev/tutorial/"
+                  target="_blank"
+                >
+                  如何在浏览器插件中使用公众号图床？
+                </Button>
+              </div>
+            </FormItem>
+            <FormItem>
+              <Button @click="saveMpConfiguration">
                 保存配置
-              </el-button>
-            </el-form-item>
-          </el-form>
-        </el-tab-pane>
-        <el-tab-pane class="github-panel formCustom" label="自定义代码" name="formCustom">
-          <el-form class="setting-form" :model="formCustom" label-position="right">
-            <el-form-item label="" :required="true">
-              <el-input
-                ref="formCustomElInput"
-                v-model="formCustom.code"
-                class="formCustomElInput"
-                type="textarea"
-                resize="none"
-                placeholder="Your custom code here."
-              />
-              <el-link
-                type="primary"
-                href="https://github.com/doocs/md#自定义上传逻辑"
-                target="_blank"
-              >
-                参数详情？
-              </el-link>
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" @click="formCustomSave">
-                保存配置
-              </el-button>
-            </el-form-item>
-          </el-form>
-        </el-tab-pane>
-      </el-tabs>
+              </Button>
+            </FormItem>
+          </div>
+        </TabsContent>
+        <TabsContent value="formCustom">
+          <CustomUploadForm />
+        </TabsContent>
+      </Tabs>
     </DialogContent>
   </Dialog>
 </template>
 
 <style lang="less" scoped>
-:deep(.el-upload-dragger) {
-  display: flex;
-  flex-flow: column;
-  justify-content: center;
-  align-items: center;
-  width: 500px;
-  height: 360px;
-
-  .el-icon-upload {
-    margin-top: 0;
-  }
-}
-
-:deep(.el-dialog__body) {
-  padding-bottom: 50px;
-}
-
-.upload-panel {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-
-  .el-select {
-    align-self: flex-end;
-    margin: 0 67.75px 20px;
-    width: 100px;
-  }
-}
-
-.github-panel {
-  display: flex;
-  justify-content: center;
-
-  &.formCustom {
-    width: 100%;
-  }
-
-  .formCustomElInput {
-    :deep(.CodeMirror) {
-      border: 1px solid #eee;
-      height: 300px !important;
-      font-family: 'Fira Mono', 'DejaVu Sans Mono', Menlo, Consolas, 'Liberation Mono', Monaco, 'Lucida Console',
-        monospace !important;
-      line-height: 20px;
-
-      .CodeMirror-scroll {
-        padding: 10px;
-      }
-    }
-  }
-}
-
-.setting-form {
-  width: 100%;
-
-  .el-form-item {
-    margin: 15px;
-  }
-
-  .el-form-item:last-child {
-    text-align: right;
-  }
-}
 </style>
diff --git a/src/components/CustomUploadForm.vue b/src/components/CustomUploadForm.vue
new file mode 100644
index 0000000..ccb8852
--- /dev/null
+++ b/src/components/CustomUploadForm.vue
@@ -0,0 +1,70 @@
+<script setup lang='ts'>
+import { useStore } from '@/stores'
+import { removeLeft } from '@/utils'
+import { useLocalStorage } from '@vueuse/core'
+import CodeMirror from 'codemirror'
+import { markRaw, nextTick, onMounted, ref, useTemplateRef } from 'vue'
+import { toast } from 'vue-sonner'
+
+const store = useStore()
+
+const code = useLocalStorage(`formCustomConfig`, removeLeft(`
+  const {file, util, okCb, errCb} = CUSTOM_ARG
+  const param = new FormData()
+  param.append('file', file)
+  util.axios.post('${window.location.origin}/upload', param, {
+    headers: { 'Content-Type': 'multipart/form-data' }
+  }).then(res => {
+    okCb(res.url)
+  }).catch(err => {
+    errCb(err)
+  })
+`).trim())
+
+const formCustomTextarea = useTemplateRef<HTMLTextAreaElement>(`formCustomTextarea`)
+
+const editor = ref< CodeMirror.EditorFromTextArea | null>(null)
+
+onMounted(() => {
+  editor.value = markRaw(CodeMirror.fromTextArea(formCustomTextarea.value!, {
+    mode: `javascript`,
+    theme: store.isDark ? `darcula` : `xq-light`,
+    lineNumbers: true,
+  }))
+
+  // 嵌套使用 nextTick 才能确保生效，具体原因未知
+  nextTick(() => {
+    nextTick(() => {
+      editor.value?.setValue(code.value)
+    })
+  })
+})
+
+function formCustomSave() {
+  const str = editor.value!.getValue()
+  localStorage.setItem(`formCustomConfig`, str)
+  toast.success(`保存成功`)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div class="h-60 border">
+      <textarea
+        ref="formCustomTextarea"
+        placeholder="Your custom code here."
+      />
+    </div>
+    <Button
+      variant="link"
+      class="p-0"
+      href="https://github.com/doocs/md#自定义上传逻辑"
+      target="_blank"
+    >
+      参数详情
+    </Button>
+    <Button class="block" @click="formCustomSave">
+      保存配置
+    </Button>
+  </div>
+</template>
diff --git a/src/components/FormItem.vue b/src/components/FormItem.vue
new file mode 100644
index 0000000..1c5a66d
--- /dev/null
+++ b/src/components/FormItem.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { Label } from '@/components/ui/label'
+
+const props = defineProps<{
+  label?: string
+  required?: boolean
+}>()
+</script>
+
+<template>
+  <div>
+    <Label class="flex items-center">
+      <span class="mr-4 w-[150px] text-right font-bold min-h-4 flex-shrink-0" :class="{ required: props.required }">
+        {{ props.label }}
+      </span>
+      <slot />
+    </Label>
+  </div>
+</template>
+
+<style scoped lang='less'>
+.required::before {
+  content: '*';
+  color: #f00;
+  margin-right: 0.25em;
+}
+</style>
diff --git a/src/components/RunLoading.vue b/src/components/RunLoading.vue
index 1a11d27..1ad7e3d 100644
--- a/src/components/RunLoading.vue
+++ b/src/components/RunLoading.vue
@@ -34,7 +34,7 @@ onMounted(() => {
   width: 100vw;
   height: 100vh;
   font-size: 18px;
-  background-color: var(--el-bg-color-page);
+  background-color: hsl(var(--background));
 
   &::before {
     content: url('../assets/images/favicon.png');
diff --git a/src/components/ui/alert-dialog/AlertDialog.vue b/src/components/ui/alert-dialog/AlertDialog.vue
new file mode 100644
index 0000000..8fb30de
--- /dev/null
+++ b/src/components/ui/alert-dialog/AlertDialog.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<AlertDialogProps>()
+const emits = defineEmits<AlertDialogEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <AlertDialogRoot v-bind="forwarded">
+    <slot />
+  </AlertDialogRoot>
+</template>
diff --git a/src/components/ui/alert-dialog/AlertDialogAction.vue b/src/components/ui/alert-dialog/AlertDialogAction.vue
new file mode 100644
index 0000000..b417759
--- /dev/null
+++ b/src/components/ui/alert-dialog/AlertDialogAction.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { buttonVariants } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes[`class`] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
+    <slot />
+  </AlertDialogAction>
+</template>
diff --git a/src/components/ui/alert-dialog/AlertDialogCancel.vue b/src/components/ui/alert-dialog/AlertDialogCancel.vue
new file mode 100644
index 0000000..75caad9
--- /dev/null
+++ b/src/components/ui/alert-dialog/AlertDialogCancel.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { buttonVariants } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes[`class`] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AlertDialogCancel
+    v-bind="delegatedProps"
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'mt-2 sm:mt-0',
+      props.class,
+    )"
+  >
+    <slot />
+  </AlertDialogCancel>
+</template>
diff --git a/src/components/ui/alert-dialog/AlertDialogContent.vue b/src/components/ui/alert-dialog/AlertDialogContent.vue
new file mode 100644
index 0000000..872f5e2
--- /dev/null
+++ b/src/components/ui/alert-dialog/AlertDialogContent.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import {
+  AlertDialogContent,
+  type AlertDialogContentEmits,
+  type AlertDialogContentProps,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes[`class`] }>()
+const emits = defineEmits<AlertDialogContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <AlertDialogPortal>
+    <AlertDialogOverlay
+      class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80"
+    />
+    <AlertDialogContent
+      v-bind="forwarded"
+      :class="
+        cn(
+          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </AlertDialogContent>
+  </AlertDialogPortal>
+</template>
diff --git a/src/components/ui/alert-dialog/AlertDialogDescription.vue b/src/components/ui/alert-dialog/AlertDialogDescription.vue
new file mode 100644
index 0000000..11d0d51
--- /dev/null
+++ b/src/components/ui/alert-dialog/AlertDialogDescription.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import {
+  AlertDialogDescription,
+  type AlertDialogDescriptionProps,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes[`class`] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AlertDialogDescription
+    v-bind="delegatedProps"
+    :class="cn('text-sm text-muted-foreground', props.class)"
+  >
+    <slot />
+  </AlertDialogDescription>
+</template>
diff --git a/src/components/ui/alert-dialog/AlertDialogFooter.vue b/src/components/ui/alert-dialog/AlertDialogFooter.vue
new file mode 100644
index 0000000..a522faf
--- /dev/null
+++ b/src/components/ui/alert-dialog/AlertDialogFooter.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes[`class`]
+}>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/src/components/ui/alert-dialog/AlertDialogHeader.vue b/src/components/ui/alert-dialog/AlertDialogHeader.vue
new file mode 100644
index 0000000..8816652
--- /dev/null
+++ b/src/components/ui/alert-dialog/AlertDialogHeader.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes[`class`]
+}>()
+</script>
+
+<template>
+  <div
+    :class="cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/src/components/ui/alert-dialog/AlertDialogTitle.vue b/src/components/ui/alert-dialog/AlertDialogTitle.vue
new file mode 100644
index 0000000..1a98462
--- /dev/null
+++ b/src/components/ui/alert-dialog/AlertDialogTitle.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { AlertDialogTitle, type AlertDialogTitleProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes[`class`] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AlertDialogTitle
+    v-bind="delegatedProps"
+    :class="cn('text-lg font-semibold', props.class)"
+  >
+    <slot />
+  </AlertDialogTitle>
+</template>
diff --git a/src/components/ui/alert-dialog/AlertDialogTrigger.vue b/src/components/ui/alert-dialog/AlertDialogTrigger.vue
new file mode 100644
index 0000000..4f5e2fd
--- /dev/null
+++ b/src/components/ui/alert-dialog/AlertDialogTrigger.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { AlertDialogTrigger, type AlertDialogTriggerProps } from 'radix-vue'
+
+const props = defineProps<AlertDialogTriggerProps>()
+</script>
+
+<template>
+  <AlertDialogTrigger v-bind="props">
+    <slot />
+  </AlertDialogTrigger>
+</template>
diff --git a/src/components/ui/alert-dialog/index.ts b/src/components/ui/alert-dialog/index.ts
new file mode 100644
index 0000000..448d519
--- /dev/null
+++ b/src/components/ui/alert-dialog/index.ts
@@ -0,0 +1,9 @@
+export { default as AlertDialog } from './AlertDialog.vue'
+export { default as AlertDialogAction } from './AlertDialogAction.vue'
+export { default as AlertDialogCancel } from './AlertDialogCancel.vue'
+export { default as AlertDialogContent } from './AlertDialogContent.vue'
+export { default as AlertDialogDescription } from './AlertDialogDescription.vue'
+export { default as AlertDialogFooter } from './AlertDialogFooter.vue'
+export { default as AlertDialogHeader } from './AlertDialogHeader.vue'
+export { default as AlertDialogTitle } from './AlertDialogTitle.vue'
+export { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'
diff --git a/src/components/ui/alert/Alert.vue b/src/components/ui/alert/Alert.vue
new file mode 100644
index 0000000..964d61d
--- /dev/null
+++ b/src/components/ui/alert/Alert.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { type AlertVariants, alertVariants } from '.'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+  variant?: AlertVariants['variant']
+}>()
+</script>
+
+<template>
+  <div :class="cn(alertVariants({ variant }), props.class)" role="alert">
+    <slot />
+  </div>
+</template>
diff --git a/src/components/ui/alert/AlertDescription.vue b/src/components/ui/alert/AlertDescription.vue
new file mode 100644
index 0000000..2971a87
--- /dev/null
+++ b/src/components/ui/alert/AlertDescription.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('text-sm [&_p]:leading-relaxed', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/src/components/ui/alert/AlertTitle.vue b/src/components/ui/alert/AlertTitle.vue
new file mode 100644
index 0000000..e28dd37
--- /dev/null
+++ b/src/components/ui/alert/AlertTitle.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <h5 :class="cn('mb-1 font-medium leading-none tracking-tight', props.class)">
+    <slot />
+  </h5>
+</template>
diff --git a/src/components/ui/alert/index.ts b/src/components/ui/alert/index.ts
new file mode 100644
index 0000000..d608673
--- /dev/null
+++ b/src/components/ui/alert/index.ts
@@ -0,0 +1,23 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+export { default as Alert } from './Alert.vue'
+export { default as AlertDescription } from './AlertDescription.vue'
+export { default as AlertTitle } from './AlertTitle.vue'
+
+export const alertVariants = cva(
+  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background text-foreground',
+        destructive:
+          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+export type AlertVariants = VariantProps<typeof alertVariants>
diff --git a/src/components/ui/input/Input.vue b/src/components/ui/input/Input.vue
new file mode 100644
index 0000000..329a5d9
--- /dev/null
+++ b/src/components/ui/input/Input.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { useVModel } from '@vueuse/core'
+
+const props = defineProps<{
+  defaultValue?: string | number
+  modelValue?: string | number
+  class?: HTMLAttributes[`class`]
+}>()
+
+const emits = defineEmits<{
+  (e: `update:modelValue`, payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, `modelValue`, emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+</script>
+
+<template>
+  <input v-model="modelValue" :class="cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)">
+</template>
diff --git a/src/components/ui/input/index.ts b/src/components/ui/input/index.ts
new file mode 100644
index 0000000..a691dd6
--- /dev/null
+++ b/src/components/ui/input/index.ts
@@ -0,0 +1 @@
+export { default as Input } from './Input.vue'
diff --git a/src/components/ui/label/Label.vue b/src/components/ui/label/Label.vue
new file mode 100644
index 0000000..5ad1568
--- /dev/null
+++ b/src/components/ui/label/Label.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { Label, type LabelProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <Label
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </Label>
+</template>
diff --git a/src/components/ui/label/index.ts b/src/components/ui/label/index.ts
new file mode 100644
index 0000000..572c2f0
--- /dev/null
+++ b/src/components/ui/label/index.ts
@@ -0,0 +1 @@
+export { default as Label } from './Label.vue'
diff --git a/src/components/ui/number-field/NumberField.vue b/src/components/ui/number-field/NumberField.vue
new file mode 100644
index 0000000..3c7db46
--- /dev/null
+++ b/src/components/ui/number-field/NumberField.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { NumberFieldRootEmits, NumberFieldRootProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+import { NumberFieldRoot, useForwardPropsEmits } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<NumberFieldRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <NumberFieldRoot v-bind="forwarded" :class="cn('grid gap-1.5', props.class)">
+    <slot />
+  </NumberFieldRoot>
+</template>
diff --git a/src/components/ui/number-field/NumberFieldContent.vue b/src/components/ui/number-field/NumberFieldContent.vue
new file mode 100644
index 0000000..2cde64c
--- /dev/null
+++ b/src/components/ui/number-field/NumberFieldContent.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('relative [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5 [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/src/components/ui/number-field/NumberFieldDecrement.vue b/src/components/ui/number-field/NumberFieldDecrement.vue
new file mode 100644
index 0000000..bbfc5bd
--- /dev/null
+++ b/src/components/ui/number-field/NumberFieldDecrement.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { NumberFieldDecrementProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+import { Minus } from 'lucide-vue-next'
+import { NumberFieldDecrement, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <NumberFieldDecrement data-slot="decrement" v-bind="forwarded" :class="cn('absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)">
+    <slot>
+      <Minus class="h-4 w-4" />
+    </slot>
+  </NumberFieldDecrement>
+</template>
diff --git a/src/components/ui/number-field/NumberFieldIncrement.vue b/src/components/ui/number-field/NumberFieldIncrement.vue
new file mode 100644
index 0000000..be1417e
--- /dev/null
+++ b/src/components/ui/number-field/NumberFieldIncrement.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { NumberFieldIncrementProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+import { Plus } from 'lucide-vue-next'
+import { NumberFieldIncrement, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <NumberFieldIncrement data-slot="increment" v-bind="forwarded" :class="cn('absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3', props.class)">
+    <slot>
+      <Plus class="h-4 w-4" />
+    </slot>
+  </NumberFieldIncrement>
+</template>
diff --git a/src/components/ui/number-field/NumberFieldInput.vue b/src/components/ui/number-field/NumberFieldInput.vue
new file mode 100644
index 0000000..f1c1f03
--- /dev/null
+++ b/src/components/ui/number-field/NumberFieldInput.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { NumberFieldInput } from 'radix-vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <NumberFieldInput
+    data-slot="input"
+    :class="cn('flex h-10 w-full rounded-md border border-input bg-background py-2 text-sm text-center ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+  />
+</template>
diff --git a/src/components/ui/number-field/index.ts b/src/components/ui/number-field/index.ts
new file mode 100644
index 0000000..5489697
--- /dev/null
+++ b/src/components/ui/number-field/index.ts
@@ -0,0 +1,5 @@
+export { default as NumberField } from './NumberField.vue'
+export { default as NumberFieldContent } from './NumberFieldContent.vue'
+export { default as NumberFieldDecrement } from './NumberFieldDecrement.vue'
+export { default as NumberFieldIncrement } from './NumberFieldIncrement.vue'
+export { default as NumberFieldInput } from './NumberFieldInput.vue'
diff --git a/src/components/ui/sonner/Sonner.vue b/src/components/ui/sonner/Sonner.vue
new file mode 100644
index 0000000..b82b29e
--- /dev/null
+++ b/src/components/ui/sonner/Sonner.vue
@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import { Toaster as Sonner, type ToasterProps } from 'vue-sonner'
+
+const props = defineProps<ToasterProps>()
+</script>
+
+<template>
+  <Sonner
+    class="toaster group"
+    v-bind="props"
+    :toast-options="{
+      classes: {
+        toast: 'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+        description: 'group-[.toast]:text-muted-foreground',
+        actionButton:
+          'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+        cancelButton:
+          'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
+      },
+    }"
+  />
+</template>
diff --git a/src/components/ui/sonner/index.ts b/src/components/ui/sonner/index.ts
new file mode 100644
index 0000000..0d4a642
--- /dev/null
+++ b/src/components/ui/sonner/index.ts
@@ -0,0 +1 @@
+export { default as Toaster } from './Sonner.vue'
diff --git a/src/components/ui/switch/Switch.vue b/src/components/ui/switch/Switch.vue
new file mode 100644
index 0000000..728963c
--- /dev/null
+++ b/src/components/ui/switch/Switch.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import {
+  SwitchRoot,
+  type SwitchRootEmits,
+  type SwitchRootProps,
+  SwitchThumb,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()
+
+const emits = defineEmits<SwitchRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SwitchRoot
+    v-bind="forwarded"
+    :class="cn(
+      'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+      props.class,
+    )"
+  >
+    <SwitchThumb
+      :class="cn('pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5')"
+    >
+      <slot name="thumb" />
+    </SwitchThumb>
+  </SwitchRoot>
+</template>
diff --git a/src/components/ui/switch/index.ts b/src/components/ui/switch/index.ts
new file mode 100644
index 0000000..87b4b17
--- /dev/null
+++ b/src/components/ui/switch/index.ts
@@ -0,0 +1 @@
+export { default as Switch } from './Switch.vue'
diff --git a/src/components/ui/tabs/Tabs.vue b/src/components/ui/tabs/Tabs.vue
new file mode 100644
index 0000000..8feda3f
--- /dev/null
+++ b/src/components/ui/tabs/Tabs.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { TabsRootEmits, TabsRootProps } from 'radix-vue'
+import { TabsRoot, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<TabsRootProps>()
+const emits = defineEmits<TabsRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <TabsRoot v-bind="forwarded">
+    <slot />
+  </TabsRoot>
+</template>
diff --git a/src/components/ui/tabs/TabsContent.vue b/src/components/ui/tabs/TabsContent.vue
new file mode 100644
index 0000000..fb59dc9
--- /dev/null
+++ b/src/components/ui/tabs/TabsContent.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { TabsContent, type TabsContentProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <TabsContent
+    :class="cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </TabsContent>
+</template>
diff --git a/src/components/ui/tabs/TabsList.vue b/src/components/ui/tabs/TabsList.vue
new file mode 100644
index 0000000..9d828af
--- /dev/null
+++ b/src/components/ui/tabs/TabsList.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { TabsList, type TabsListProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <TabsList
+    v-bind="delegatedProps"
+    :class="cn(
+      'inline-flex items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
+      props.class,
+    )"
+  >
+    <slot />
+  </TabsList>
+</template>
diff --git a/src/components/ui/tabs/TabsTrigger.vue b/src/components/ui/tabs/TabsTrigger.vue
new file mode 100644
index 0000000..f4e7f67
--- /dev/null
+++ b/src/components/ui/tabs/TabsTrigger.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TabsTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+      props.class,
+    )"
+  >
+    <span class="truncate">
+      <slot />
+    </span>
+  </TabsTrigger>
+</template>
diff --git a/src/components/ui/tabs/index.ts b/src/components/ui/tabs/index.ts
new file mode 100644
index 0000000..a5e58dc
--- /dev/null
+++ b/src/components/ui/tabs/index.ts
@@ -0,0 +1,4 @@
+export { default as Tabs } from './Tabs.vue'
+export { default as TabsContent } from './TabsContent.vue'
+export { default as TabsList } from './TabsList.vue'
+export { default as TabsTrigger } from './TabsTrigger.vue'
diff --git a/src/components/ui/textarea/Textarea.vue b/src/components/ui/textarea/Textarea.vue
new file mode 100644
index 0000000..1dee55d
--- /dev/null
+++ b/src/components/ui/textarea/Textarea.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { useVModel } from '@vueuse/core'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+  defaultValue?: string | number
+  modelValue?: string | number
+}>()
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+</script>
+
+<template>
+  <textarea v-model="modelValue" :class="cn('flex min-h-20 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)" />
+</template>
diff --git a/src/components/ui/textarea/index.ts b/src/components/ui/textarea/index.ts
new file mode 100644
index 0000000..6a7ab2a
--- /dev/null
+++ b/src/components/ui/textarea/index.ts
@@ -0,0 +1 @@
+export { default as Textarea } from './Textarea.vue'
diff --git a/src/config/theme.ts b/src/config/theme.ts
index d4934ca..0bd1e71 100644
--- a/src/config/theme.ts
+++ b/src/config/theme.ts
@@ -15,7 +15,7 @@ const defaultTheme: Theme = {
       'padding': `0 1em`,
       'border-bottom': `2px solid var(--md-primary-color)`,
       'margin': `2em auto 1em`,
-      'color': `var(--el-text-color-regular)`,
+      'color': `hsl(var(--foreground))`,
       'font-size': `1.2em`,
       'font-weight': `bold`,
       'text-align': `center`,
@@ -38,7 +38,7 @@ const defaultTheme: Theme = {
       'padding-left': `8px`,
       'border-left': `3px solid var(--md-primary-color)`,
       'margin': `2em 8px 0.75em 0`,
-      'color': `var(--el-text-color-regular)`,
+      'color': `hsl(var(--foreground))`,
       'font-size': `1.1em`,
       'font-weight': `bold`,
       'line-height': `1.2`,
@@ -71,7 +71,7 @@ const defaultTheme: Theme = {
     p: {
       'margin': `1.5em 8px`,
       'letter-spacing': `0.1em`,
-      'color': `var(--el-text-color-regular)`,
+      'color': `hsl(var(--foreground))`,
       'text-align': `justify`,
     },
 
@@ -91,7 +91,7 @@ const defaultTheme: Theme = {
       'display': `block`,
       'font-size': `1em`,
       'letter-spacing': `0.1em`,
-      'color': `var(--el-text-color-regular)`,
+      'color': `hsl(var(--foreground))`,
     },
 
     blockquote_note: {
@@ -181,7 +181,7 @@ const defaultTheme: Theme = {
     ol: {
       'padding-left': `1em`,
       'margin-left': `0`,
-      'color': `var(--el-text-color-regular)`,
+      'color': `hsl(var(--foreground))`,
     },
 
     // 无序列表
@@ -189,18 +189,18 @@ const defaultTheme: Theme = {
       'list-style': `circle`,
       'padding-left': `1em`,
       'margin-left': `0`,
-      'color': `var(--el-text-color-regular)`,
+      'color': `hsl(var(--foreground))`,
     },
 
     footnotes: {
       'margin': `0.5em 8px`,
       'font-size': `80%`,
-      'color': `var(--el-text-color-regular)`,
+      'color': `hsl(var(--foreground))`,
     },
 
     figure: {
       margin: `1.5em 8px`,
-      color: `var(--el-text-color-regular)`,
+      color: `hsl(var(--foreground))`,
     },
 
     hr: {
@@ -218,7 +218,7 @@ const defaultTheme: Theme = {
       'text-indent': `-1em`,
       'display': `block`,
       'margin': `0.2em 8px`,
-      'color': `var(--el-text-color-regular)`,
+      'color': `hsl(var(--foreground))`,
     },
 
     codespan: {
@@ -255,13 +255,13 @@ const defaultTheme: Theme = {
       'border-collapse': `collapse`,
       'text-align': `center`,
       'margin': `1em 8px`,
-      'color': `var(--el-text-color-regular)`,
+      'color': `hsl(var(--foreground))`,
     },
 
     thead: {
       'background': `rgba(0, 0, 0, 0.05)`,
       'font-weight': `bold`,
-      'color': `var(--el-text-color-regular)`,
+      'color': `hsl(var(--foreground))`,
     },
 
     td: {
@@ -273,7 +273,7 @@ const defaultTheme: Theme = {
 
     footnote: {
       'font-size': `12px`,
-      'color': `var(--el-text-color-regular)`,
+      'color': `hsl(var(--foreground))`,
     },
 
     figcaption: {
@@ -403,7 +403,7 @@ const graceTheme = toMerged(defaultTheme, {
       'border-spacing': `0`,
       'border-radius': `8px`,
       'margin': `1em 8px`,
-      'color': `var(--el-text-color-regular)`,
+      'color': `hsl(var(--foreground))`,
       'box-shadow': `0 4px 6px rgba(0,0,0,0.1)`,
       'overflow': `hidden`,
     },
diff --git a/src/element/index.ts b/src/element/index.ts
deleted file mode 100644
index f0c8e2a..0000000
--- a/src/element/index.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { App } from 'vue'
-import * as ElementPlusIconsVue from '@element-plus/icons-vue'
-import { ElLoading, ElMessage } from 'element-plus'
-import 'element-plus/dist/index.css'
-import 'element-plus/theme-chalk/dark/css-vars.css'
-
-export default {
-  install(app: App<Element>) {
-    // app.use(ElementPlus, { size: `default` })
-
-    app.config.globalProperties.$loading = ElLoading.service
-    app.config.globalProperties.$message = ElMessage
-
-    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-      app.component(`ElIcon${key}`, component)
-    }
-  },
-}
diff --git a/src/main.ts b/src/main.ts
index e62e3df..ad34529 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,7 +1,6 @@
 import { createPinia } from 'pinia'
 import { createApp } from 'vue'
 import App from './App.vue'
-import ElementPlus from './element'
 
 import 'virtual:uno.css'
 import 'codemirror/lib/codemirror.css'
@@ -13,6 +12,7 @@ import '@/assets/index.css'
 import '@/assets/less/theme.less'
 
 import 'codemirror/mode/css/css'
+import 'codemirror/mode/javascript/javascript'
 import 'codemirror/mode/markdown/markdown'
 import 'codemirror/addon/edit/closebrackets'
 import 'codemirror/addon/edit/matchbrackets'
@@ -23,6 +23,5 @@ import 'codemirror/addon/hint/css-hint'
 const app = createApp(App)
 
 app.use(createPinia())
-app.use(ElementPlus)
 
 app.mount(`#app`)
diff --git a/src/stores/index.ts b/src/stores/index.ts
index 8ee3793..d7e9876 100644
--- a/src/stores/index.ts
+++ b/src/stores/index.ts
@@ -6,10 +6,10 @@ import { initRenderer } from '@/utils/renderer'
 import { useDark, useStorage, useToggle } from '@vueuse/core'
 
 import CodeMirror from 'codemirror'
-import { ElMessage, ElMessageBox } from 'element-plus'
 import { marked } from 'marked'
 import { defineStore } from 'pinia'
 import { computed, markRaw, onMounted, ref, toRaw, watch } from 'vue'
+import { toast } from 'vue-sonner'
 
 export const useStore = defineStore(`store`, () => {
   // 是否开启深色模式
@@ -265,6 +265,8 @@ export const useStore = defineStore(`store`, () => {
 
     updateCss()
     editorRefresh()
+
+    toast.success(`样式重置成功~`)
   }
 
   // 为函数添加刷新编辑器的功能
@@ -361,7 +363,7 @@ export const useStore = defineStore(`store`, () => {
       reader.readAsText(file)
       reader.onload = (event) => {
         (editor.value!).setValue((event.target!).result as string)
-        ElMessage.success(`文档导入成功`)
+        toast.success(`文档导入成功`)
       }
     }
 
@@ -370,28 +372,11 @@ export const useStore = defineStore(`store`, () => {
     body.removeChild(input)
   }
 
+  const isOpenConfirmDialog = ref(false)
+
   // 重置样式
   const resetStyleConfirm = () => {
-    ElMessageBox.confirm(
-      `此操作将丢失本地自定义样式，是否继续？`,
-      `提示`,
-      {
-        confirmButtonText: `确定`,
-        cancelButtonText: `取消`,
-        type: `warning`,
-        center: true,
-      },
-    )
-      .then(() => {
-        resetStyle()
-        ElMessage({
-          type: `success`,
-          message: `样式重置成功~`,
-        })
-      })
-      .catch(() => {
-        (editor.value!).focus()
-      })
+    isOpenConfirmDialog.value = true
   }
 
   return {
@@ -433,7 +418,9 @@ export const useStore = defineStore(`store`, () => {
 
     importMarkdownContent,
 
+    isOpenConfirmDialog,
     resetStyleConfirm,
+    resetStyle,
     editorContent,
 
     cssContentConfig,
diff --git a/src/utils/index.ts b/src/utils/index.ts
index d07bb68..7f328bb 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -186,8 +186,6 @@ export function exportHTML(primaryColor: string) {
   setStyles(element)
 
   const htmlStr = element.innerHTML
-    .replaceAll(`var(--el-text-color-regular)`, `#3f3f3f`)
-    .replaceAll(`var(--blockquote-background)`, `#f7f7f7`)
     .replaceAll(`var(--md-primary-color)`, primaryColor)
     .replaceAll(/--md-primary-color:.+?;/g, ``)
 
diff --git a/src/views/CodemirrorEditor.vue b/src/views/CodemirrorEditor.vue
index d1c1b64..e5dcace 100644
--- a/src/views/CodemirrorEditor.vue
+++ b/src/views/CodemirrorEditor.vue
@@ -4,8 +4,17 @@ import CssEditor from '@/components/CodemirrorEditor/CssEditor.vue'
 import EditorHeader from '@/components/CodemirrorEditor/EditorHeader/index.vue'
 import InsertFormDialog from '@/components/CodemirrorEditor/InsertFormDialog.vue'
 import UploadImgDialog from '@/components/CodemirrorEditor/UploadImgDialog.vue'
-
 import RunLoading from '@/components/RunLoading.vue'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog'
 import {
   ContextMenu,
   ContextMenuContent,
@@ -14,7 +23,6 @@ import {
   ContextMenuShortcut,
   ContextMenuTrigger,
 } from '@/components/ui/context-menu'
-
 import { altKey, altSign, ctrlKey, shiftKey, shiftSign } from '@/config'
 import { useDisplayStore, useStore } from '@/stores'
 import {
@@ -24,12 +32,9 @@ import {
 } from '@/utils'
 import fileApi from '@/utils/file'
 import CodeMirror from 'codemirror'
-
-import { ElCol, ElMessage } from 'element-plus'
-
 import { storeToRefs } from 'pinia'
-
 import { onMounted, ref, toRaw, watch } from 'vue'
+import { toast } from 'vue-sonner'
 
 const store = useStore()
 const displayStore = useDisplayStore()
@@ -53,7 +58,7 @@ const {
 const isImgLoading = ref(false)
 const timeout = ref<NodeJS.Timeout>()
 
-const preview = ref<typeof ElCol | null>(null)
+const preview = ref<HTMLDivElement | null>(null)
 
 // 使浏览区与编辑区滚动条建立同步联系
 function leftAndRightScroll() {
@@ -63,7 +68,7 @@ function leftAndRightScroll() {
 
     clearTimeout(timeout.value)
     if (text === `preview`) {
-      source = preview.value!.$el
+      source = preview.value!
       target = document.querySelector<HTMLElement>(`.CodeMirror-scroll`)!
 
       editor.value!.off(`scroll`, editorScrollCB)
@@ -73,7 +78,7 @@ function leftAndRightScroll() {
     }
     else {
       source = document.querySelector<HTMLElement>(`.CodeMirror-scroll`)!
-      target = preview.value!.$el
+      target = preview.value!
 
       target.removeEventListener(`scroll`, previewScrollCB, false)
       timeout.value = setTimeout(() => {
@@ -96,7 +101,7 @@ function leftAndRightScroll() {
     scrollCB(`preview`)
   }
 
-  (preview.value!.$el).addEventListener(`scroll`, previewScrollCB, false)
+  (preview.value!).addEventListener(`scroll`, previewScrollCB, false)
   editor.value!.on(`scroll`, editorScrollCB)
 }
 
@@ -131,7 +136,7 @@ function beforeUpload(file: File) {
   // validate image
   const checkResult = checkImage(file)
   if (!checkResult.ok) {
-    ElMessage.error(checkResult.msg)
+    toast.error(checkResult.msg!)
     return false
   }
 
@@ -142,7 +147,7 @@ function beforeUpload(file: File) {
   const config = localStorage.getItem(`${imgHost}Config`)
   const isValidHost = imgHost === `default` || config
   if (!isValidHost) {
-    ElMessage.error(`请先配置 ${imgHost} 图床参数`)
+    toast.error(`请先配置 ${imgHost} 图床参数`)
     return false
   }
   return true
@@ -151,7 +156,7 @@ function beforeUpload(file: File) {
 // 图片上传结束
 function uploaded(imageUrl: string) {
   if (!imageUrl) {
-    ElMessage.error(`上传图片未知异常`)
+    toast.error(`上传图片未知异常`)
     return
   }
   toggleShowUploadImgDialog(false)
@@ -160,7 +165,7 @@ function uploaded(imageUrl: string) {
   const markdownImage = `![](${imageUrl})`
   // 将 Markdown 形式的 URL 插入编辑框光标所在位置
   toRaw(store.editor!).replaceSelection(`\n${markdownImage}\n`, cursor as any)
-  ElMessage.success(`图片上传成功`)
+  toast.success(`图片上传成功`)
 }
 function uploadImage(file: File, cb?: { (url: any): void, (arg0: unknown): void } | undefined) {
   isImgLoading.value = true
@@ -176,7 +181,7 @@ function uploadImage(file: File, cb?: { (url: any): void, (arg0: unknown): void
       }
     })
     .catch((err) => {
-      ElMessage.error(err.message)
+      toast.error(err.message)
     })
     .finally(() => {
       isImgLoading.value = false
@@ -274,12 +279,12 @@ function addFormat(cmd: string | number) {
   (editor.value as any).options.extraKeys[cmd](editor.value)
 }
 
-const codeMirrorWrapper = ref<ComponentPublicInstance<typeof ElCol> | null>(null)
+const codeMirrorWrapper = ref<ComponentPublicInstance<HTMLDivElement> | null>(null)
 
 // 转换 markdown 中的本地图片为线上图片
 // todo 处理事件覆盖
 function mdLocalToRemote() {
-  const dom = codeMirrorWrapper.value!.$el as HTMLElement
+  const dom = codeMirrorWrapper.value!
 
   // 上传 md 中的图片
   const uploadMdImg = async ({ md, list }: { md: { str: string, path: string, file: File }, list: { path: string, file: File }[] }) => {
@@ -391,10 +396,9 @@ onMounted(() => {
       @end-copy="endCopy"
     />
     <main class="container-main flex-1">
-      <el-row class="container-main-section h-full border-1">
-        <ElCol
+      <div class="container-main-section grid h-full border-1" :class="isShowCssEditor ? 'grid-cols-3' : 'grid-cols-2'">
+        <div
           ref="codeMirrorWrapper"
-          :span="isShowCssEditor ? 8 : 12"
           class="codeMirror-wrapper border-r-1"
           :class="{
             'order-1': !store.isEditOnLeft,
@@ -434,8 +438,8 @@ onMounted(() => {
               </ContextMenuItem>
             </ContextMenuContent>
           </ContextMenu>
-        </ElCol>
-        <ElCol
+        </div>
+        <div
           id="preview"
           ref="preview"
           :span="isShowCssEditor ? 8 : 12"
@@ -452,9 +456,9 @@ onMounted(() => {
               </div>
             </div>
           </div>
-        </ElCol>
+        </div>
         <CssEditor />
-      </el-row>
+      </div>
     </main>
 
     <UploadImgDialog
@@ -464,6 +468,23 @@ onMounted(() => {
     <InsertFormDialog />
 
     <RunLoading />
+
+    <AlertDialog v-model:open="store.isOpenConfirmDialog">
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>提示</AlertDialogTitle>
+          <AlertDialogDescription>
+            此操作将丢失本地自定义样式，是否继续？
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>取消</AlertDialogCancel>
+          <AlertDialogAction @click="store.resetStyle()">
+            确认
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
   </div>
 </template>
 
@@ -497,8 +518,8 @@ onMounted(() => {
   width: 100%;
   height: 100%;
   text-align: center;
-  color: var(--el-text-color-regular);
-  background-color: var(--el-bg-color);
+  color: hsl(var(--foreground));
+  background-color: hsl(var(--background));
 
   .loading-mask-box {
     position: sticky;
diff --git a/vite.config.ts b/vite.config.ts
index d4d8b56..7c36247 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -5,7 +5,6 @@ import vue from '@vitejs/plugin-vue'
 import { visualizer } from 'rollup-plugin-visualizer'
 import UnoCSS from 'unocss/vite'
 import AutoImport from 'unplugin-auto-import/vite'
-import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 import Components from 'unplugin-vue-components/vite'
 import { defineConfig } from 'vite'
 import { nodePolyfills } from 'vite-plugin-node-polyfills'
@@ -33,10 +32,10 @@ export default defineConfig({
       filename: `stats.html`,
     }),
     AutoImport({
-      resolvers: [ElementPlusResolver()],
+      resolvers: [],
     }),
     Components({
-      resolvers: [ElementPlusResolver()],
+      resolvers: [],
     }),
   ],
   resolve: {