diff --git a/components.d.ts b/components.d.ts
new file mode 100644
index 00000000..ceafda84
--- /dev/null
+++ b/components.d.ts
@@ -0,0 +1,82 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    BaseButton: typeof import('./src/components/BaseButton.vue')['default']
+    BaseIcon: typeof import('./src/components/BaseIcon.vue')['default']
+    Close: typeof import('./src/components/icon/Close.vue')['default']
+    DeleteIcon: typeof import('./src/components/icon/DeleteIcon.vue')['default']
+    Empty: typeof import('./src/components/Empty.vue')['default']
+    IconBasilAddOutline: typeof import('~icons/basil/add-outline')['default']
+    IconBasilEditOutline: typeof import('~icons/basil/edit-outline')['default']
+    IconBiArrowLeft: typeof import('~icons/bi/arrow-left')['default']
+    IconBiArrowRight: typeof import('~icons/bi/arrow-right')['default']
+    IconBiKeyboard: typeof import('~icons/bi/keyboard')['default']
+    IconBxHeadphone: typeof import('~icons/bx/headphone')['default']
+    IconCarbonCloseOutline: typeof import('~icons/carbon/close-outline')['default']
+    IconCarbonMove: typeof import('~icons/carbon/move')['default']
+    IconEosIconsLoading: typeof import('~icons/eos-icons/loading')['default']
+    IconEpMoon: typeof import('~icons/ep/moon')['default']
+    IconFluentAdd20Filled: typeof import('~icons/fluent/add20-filled')['default']
+    IconFluentDelete24Regular: typeof import('~icons/fluent/delete24-regular')['default']
+    IconFluentReplay16Filled: typeof import('~icons/fluent/replay16-filled')['default']
+    IconFluentSearch24Regular: typeof import('~icons/fluent/search24-regular')['default']
+    IconFormkitLeft: typeof import('~icons/formkit/left')['default']
+    IconFormkitRight: typeof import('~icons/formkit/right')['default']
+    IconGgArrowsExchange: typeof import('~icons/gg/arrows-exchange')['default']
+    IconHugeiconsPlay: typeof import('~icons/hugeicons/play')['default']
+    IconIconamoonClose: typeof import('~icons/iconamoon/close')['default']
+    IconIconParkOutlineDown: typeof import('~icons/icon-park-outline/down')['default']
+    IconIconParkOutlineGoAhead: typeof import('~icons/icon-park-outline/go-ahead')['default']
+    IconIconParkOutlineSettingConfig: typeof import('~icons/icon-park-outline/setting-config')['default']
+    IconIconParkOutlineSortTwo: typeof import('~icons/icon-park-outline/sort-two')['default']
+    IconIcons8RightRound: typeof import('~icons/icons8/right-round')['default']
+    IconIcSharpMyLocation: typeof import('~icons/ic/sharp-my-location')['default']
+    IconIonCloseOutline: typeof import('~icons/ion/close-outline')['default']
+    IconMajesticonsEyeOffLine: typeof import('~icons/majesticons/eye-off-line')['default']
+    IconMaterialSymbolsCheckCircleOutlineRounded: typeof import('~icons/material-symbols/check-circle-outline-rounded')['default']
+    IconMaterialSymbolsCheckCircleRounded: typeof import('~icons/material-symbols/check-circle-rounded')['default']
+    IconMaterialSymbolsKeyboardOutline: typeof import('~icons/material-symbols/keyboard-outline')['default']
+    IconMaterialSymbolsLightDictionaryOutlineSharp: typeof import('~icons/material-symbols-light/dictionary-outline-sharp')['default']
+    IconMdiAboutCircleOutline: typeof import('~icons/mdi/about-circle-outline')['default']
+    IconMdiAlertCircle: typeof import('~icons/mdi/alert-circle')['default']
+    IconMdiCheckCircle: typeof import('~icons/mdi/check-circle')['default']
+    IconMdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
+    IconMdiClose: typeof import('~icons/mdi/close')['default']
+    IconMdiCloseCircle: typeof import('~icons/mdi/close-circle')['default']
+    IconMdiDatabaseCogOutline: typeof import('~icons/mdi/database-cog-outline')['default']
+    IconMdiEyeOutline: typeof import('~icons/mdi/eye-outline')['default']
+    IconMdiInformation: typeof import('~icons/mdi/information')['default']
+    IconMdiStar: typeof import('~icons/mdi/star')['default']
+    IconMdiStarOutline: typeof import('~icons/mdi/star-outline')['default']
+    IconMdiSuccessCircleOutline: typeof import('~icons/mdi/success-circle-outline')['default']
+    IconMdiTranslate: typeof import('~icons/mdi/translate')['default']
+    IconMdiTranslateOff: typeof import('~icons/mdi/translate-off')['default']
+    IconMingcuteLeftLine: typeof import('~icons/mingcute/left-line')['default']
+    IconMingcuteRightLine: typeof import('~icons/mingcute/right-line')['default']
+    IconMingcuteServiceFill: typeof import('~icons/mingcute/service-fill')['default']
+    IconPhArticleNyTimes: typeof import('~icons/ph/article-ny-times')['default']
+    IconPhStar: typeof import('~icons/ph/star')['default']
+    IconPhStarFill: typeof import('~icons/ph/star-fill')['default']
+    IconRiQuestionLine: typeof import('~icons/ri/question-line')['default']
+    IconSolarTrashBinMinimalisticLinear: typeof import('~icons/solar/trash-bin-minimalistic-linear')['default']
+    IconTablerCheck: typeof import('~icons/tabler/check')['default']
+    IconTablerEdit: typeof import('~icons/tabler/edit')['default']
+    IconTablerSun: typeof import('~icons/tabler/sun')['default']
+    IconTdesignMenuUnfold: typeof import('~icons/tdesign/menu-unfold')['default']
+    IconTwemojiEndArrow: typeof import('~icons/twemoji/end-arrow')['default']
+    IconTypcnWarningOutline: typeof import('~icons/typcn/warning-outline')['default']
+    IconUilSetting: typeof import('~icons/uil/setting')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    SlideHorizontal: typeof import('./src/components/slide/SlideHorizontal.vue')['default']
+    SlideItem: typeof import('./src/components/slide/SlideItem.vue')['default']
+    VolumeIcon: typeof import('./src/components/icon/VolumeIcon.vue')['default']
+  }
+}
diff --git a/package.json b/package.json
index f1a55ce8..6797d224 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "dev": "vite",
     "test": "",
     "build": "vite build",
+    "build-local": "vite build",
     "build-tsc": "vue-tsc && vite build",
     "report": "vite build",
     "preview": "vite preview",
@@ -37,7 +38,34 @@
   },
   "devDependencies": {
     "@alicloud/pop-core": "^1.8.0",
-    "@iconify/vue": "^4.3.0",
+    "@iconify-json/basil": "^1.2.4",
+    "@iconify-json/bi": "^1.2.6",
+    "@iconify-json/bx": "^1.2.2",
+    "@iconify-json/carbon": "^1.2.13",
+    "@iconify-json/eos-icons": "^1.2.4",
+    "@iconify-json/ep": "^1.2.3",
+    "@iconify-json/fluent": "^1.2.28",
+    "@iconify-json/formkit": "^1.2.2",
+    "@iconify-json/gg": "^1.2.2",
+    "@iconify-json/hugeicons": "^1.2.10",
+    "@iconify-json/ic": "^1.2.4",
+    "@iconify-json/icon-park-outline": "^1.2.4",
+    "@iconify-json/iconamoon": "^1.2.2",
+    "@iconify-json/icons8": "^1.2.1",
+    "@iconify-json/ion": "^1.2.6",
+    "@iconify-json/majesticons": "^1.2.4",
+    "@iconify-json/material-symbols": "^1.2.32",
+    "@iconify-json/material-symbols-light": "^1.2.32",
+    "@iconify-json/mdi": "^1.2.3",
+    "@iconify-json/mingcute": "^1.2.5",
+    "@iconify-json/ph": "^1.2.2",
+    "@iconify-json/ri": "^1.2.5",
+    "@iconify-json/solar": "^1.2.4",
+    "@iconify-json/tabler": "^1.2.22",
+    "@iconify-json/tdesign": "^1.2.8",
+    "@iconify-json/twemoji": "^1.2.4",
+    "@iconify-json/typcn": "^1.2.2",
+    "@iconify-json/uil": "^1.2.3",
     "@types/file-saver": "^2.0.7",
     "@types/lodash-es": "^4.17.12",
     "@unocss/postcss": "^66.4.0",
@@ -56,6 +84,8 @@
     "tslib": "^2.8.1",
     "typescript": "^5.8.3",
     "unocss": "^66.4.0",
+    "unplugin-icons": "^22.2.0",
+    "unplugin-vue-components": "^29.0.0",
     "unplugin-vue-macros": "^2.14.5",
     "vite": "^7.0.3",
     "vite-plugin-cdn-import": "^1.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 81bf594e..0bf796a7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -66,9 +66,90 @@ importers:
       '@alicloud/pop-core':
         specifier: ^1.8.0
         version: 1.8.0
-      '@iconify/vue':
-        specifier: ^4.3.0
-        version: 4.3.0(vue@3.5.18(typescript@5.9.2))
+      '@iconify-json/basil':
+        specifier: ^1.2.4
+        version: 1.2.4
+      '@iconify-json/bi':
+        specifier: ^1.2.6
+        version: 1.2.6
+      '@iconify-json/bx':
+        specifier: ^1.2.2
+        version: 1.2.2
+      '@iconify-json/carbon':
+        specifier: ^1.2.13
+        version: 1.2.13
+      '@iconify-json/eos-icons':
+        specifier: ^1.2.4
+        version: 1.2.4
+      '@iconify-json/ep':
+        specifier: ^1.2.3
+        version: 1.2.3
+      '@iconify-json/fluent':
+        specifier: ^1.2.28
+        version: 1.2.28
+      '@iconify-json/formkit':
+        specifier: ^1.2.2
+        version: 1.2.2
+      '@iconify-json/gg':
+        specifier: ^1.2.2
+        version: 1.2.2
+      '@iconify-json/hugeicons':
+        specifier: ^1.2.10
+        version: 1.2.10
+      '@iconify-json/ic':
+        specifier: ^1.2.4
+        version: 1.2.4
+      '@iconify-json/icon-park-outline':
+        specifier: ^1.2.4
+        version: 1.2.4
+      '@iconify-json/iconamoon':
+        specifier: ^1.2.2
+        version: 1.2.2
+      '@iconify-json/icons8':
+        specifier: ^1.2.1
+        version: 1.2.1
+      '@iconify-json/ion':
+        specifier: ^1.2.6
+        version: 1.2.6
+      '@iconify-json/majesticons':
+        specifier: ^1.2.4
+        version: 1.2.4
+      '@iconify-json/material-symbols':
+        specifier: ^1.2.32
+        version: 1.2.32
+      '@iconify-json/material-symbols-light':
+        specifier: ^1.2.32
+        version: 1.2.32
+      '@iconify-json/mdi':
+        specifier: ^1.2.3
+        version: 1.2.3
+      '@iconify-json/mingcute':
+        specifier: ^1.2.5
+        version: 1.2.5
+      '@iconify-json/ph':
+        specifier: ^1.2.2
+        version: 1.2.2
+      '@iconify-json/ri':
+        specifier: ^1.2.5
+        version: 1.2.5
+      '@iconify-json/solar':
+        specifier: ^1.2.4
+        version: 1.2.4
+      '@iconify-json/tabler':
+        specifier: ^1.2.22
+        version: 1.2.22
+      '@iconify-json/tdesign':
+        specifier: ^1.2.8
+        version: 1.2.8
+      '@iconify-json/twemoji':
+        specifier: ^1.2.4
+        version: 1.2.4
+      '@iconify-json/typcn':
+        specifier: ^1.2.2
+        version: 1.2.2
+      '@iconify-json/uil':
+        specifier: ^1.2.3
+        version: 1.2.3
       '@types/file-saver':
         specifier: ^2.0.7
         version: 2.0.7
@@ -123,6 +204,12 @@ importers:
       unocss:
         specifier: ^66.4.0
         version: 66.4.2(postcss@8.5.6)(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(sass@1.90.0))
+      unplugin-icons:
+        specifier: ^22.2.0
+        version: 22.2.0(@vue/compiler-sfc@3.5.18)
+      unplugin-vue-components:
+        specifier: ^29.0.0
+        version: 29.0.0(@babel/parser@7.28.3)(vue@3.5.18(typescript@5.9.2))
       unplugin-vue-macros:
         specifier: ^2.14.5
         version: 2.14.5(@vueuse/core@9.13.0(vue@3.5.18(typescript@5.9.2)))(esbuild@0.25.9)(rollup@4.46.2)(typescript@5.9.2)(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(sass@1.90.0))(vue-tsc@3.0.5(typescript@5.9.2))(vue@3.5.18(typescript@5.9.2))
@@ -152,6 +239,9 @@ packages:
   '@antfu/install-pkg@1.1.0':
     resolution: {integrity: sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==}
 
+  '@antfu/utils@8.1.1':
+    resolution: {integrity: sha512-Mex9nXf9vR6AhcXmMrlz/HVgYYZpVGJ6YlPgwl7UnaFpnshXs6EK/oa5Gpf3CzENMjkvEx2tQtntGnb7UtSTOQ==}
+
   '@antfu/utils@9.2.0':
     resolution: {integrity: sha512-Oq1d9BGZakE/FyoEtcNeSwM7MpDO2vUBi11RWBZXf75zPsbUVWmUs03EqkRFrcgbXyKTas0BdZWC1wcuSoqSAw==}
 
@@ -457,17 +547,99 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@iconify-json/basil@1.2.4':
+    resolution: {integrity: sha512-KUL5JBdFDF7APY8XiuqvfpiecIby8pIbs6rm3WLgdVDqMlKH0WcWEwd+ilANby8X3AuHQVrjNjByh9MpfAR3lQ==}
+
+  '@iconify-json/bi@1.2.6':
+    resolution: {integrity: sha512-fWfLr1/+DJDe8+rIUXxMwvmWBZFlxRtM59sYnrezJ2xX87QKyXVw3QuforJ4kF2Orrz85J+JTRG6305vaJ7flA==}
+
+  '@iconify-json/bx@1.2.2':
+    resolution: {integrity: sha512-hZVx6LMEkYckScdRdUuQWcmv8Lm2au6Cnf799TLoR6YgiAfFvaJ4M5ElwcnExvCu8ntsS7jW89r0W5LwBAfZXQ==}
+
+  '@iconify-json/carbon@1.2.13':
+    resolution: {integrity: sha512-vXrFFKkfYaZSwf4WfnRQJQMnpEzxlPlupwZZlS1WvOAuNnWahsUudHycaMpoBzDqBfniH4KQ2b5qnw0VMKoJug==}
+
+  '@iconify-json/eos-icons@1.2.4':
+    resolution: {integrity: sha512-gp2BCSF3+aRgMqE7LRAVxT5nXJLOtfcvGnOYwJz4gc4zxcEqAaOByxFVLZej15jXPRJmUv2TSzMNrQ2gDtw4VA==}
+
+  '@iconify-json/ep@1.2.3':
+    resolution: {integrity: sha512-bESiKz5aTcbT4chTVSKjR5P+Nk81ibRtWgR7Gng5JPdF1Az+91+bIOof/OCUKThFRWqWsQ9A4XmSSrakvjuJDQ==}
+
+  '@iconify-json/fluent@1.2.28':
+    resolution: {integrity: sha512-Lnaf38ruWopJv8PdEsK8vXgxKpFSsKED2kI0/575ZXg6XHUMvzSuLlldAVAOEWZmMVPJFC0MXe07Ybnh1ziLvw==}
+
+  '@iconify-json/formkit@1.2.2':
+    resolution: {integrity: sha512-vrv5X44zie1F46e1AsPjN2MEi8ui+6SA1EvWETphAbkd+MaXmxyD4vra3hdTOYYNJDn5dkC7vMGf5WieCMu9zA==}
+
+  '@iconify-json/gg@1.2.2':
+    resolution: {integrity: sha512-8iQh8+Tdb/0jakNYy0+t2GVubjhbaJbuYoPsRhFw8IAs00IQV2BjE9GoB2kGF/UObaJCqvCelB3qRaUdizkrmg==}
+
+  '@iconify-json/hugeicons@1.2.10':
+    resolution: {integrity: sha512-LfbCMlxgM4aRlLdKfsr6+Yg+fOvFx5MQd6tVgoqSPaPL0iN8bZdsDv++TpTlOy043LUVcAbRAu0ZobmWCz6cHw==}
+
+  '@iconify-json/ic@1.2.4':
+    resolution: {integrity: sha512-pzPMmrZrBQuwT7nmtrYdkttun8KalRGgZPIL1Ny9KpF2zjRGIUPN+npTfuD3lrgO/OnSwAoJWuekQwBpt/Cqrw==}
+
+  '@iconify-json/icon-park-outline@1.2.4':
+    resolution: {integrity: sha512-NyZxXe2gD2TbTOyoRRMdtEJhr6i2KQCdDlYYoOn5oZLndQjwpIhw79hzeFhXvP38/o40D3gQ+l+IaSJgbB+0TQ==}
+
+  '@iconify-json/iconamoon@1.2.2':
+    resolution: {integrity: sha512-Xn7YeSDniPgutPr0qil/iQwQelq975OYQ/i2twGjcK4DjGOXBrBC+6q45WtVuQbFfXzM7bgijv4yVnxy0OqUdQ==}
+
+  '@iconify-json/icons8@1.2.1':
+    resolution: {integrity: sha512-YHEpcPkCgyiYiGyHKk5CK4RzELEP5XDueQiguWe7lXJlG5rSkXMVOgOYfmANkwnTRF+/RZX/uQE1uf3y+haDgw==}
+
+  '@iconify-json/ion@1.2.6':
+    resolution: {integrity: sha512-JftEXKfjvJNn3SrGeSBrG/waRkjeTpLdMLNLwpAX4NgI14QgJoAeXEh2iZjNPqioAkeIgErX4Bi6mnFwpjk3BQ==}
+
+  '@iconify-json/majesticons@1.2.4':
+    resolution: {integrity: sha512-8h6zfqN/8eKLNGcHzJd8LZ+vI6aC2MIGq+QTNoYD/H98TL1N/s8ufxal54OkzIsemylXxWLj+NLd0wXDLlVIIg==}
+
+  '@iconify-json/material-symbols-light@1.2.32':
+    resolution: {integrity: sha512-QbXhpJD+PHdl/G/esFrjBWwTOWzmUTILowa8m1yAMtS645+SKcN9R7HZt8Ir6OXbLaxv+6CzLW4oaTyu5nXaTA==}
+
+  '@iconify-json/material-symbols@1.2.32':
+    resolution: {integrity: sha512-Jw3wdiNV8X1MoiS0rFzlZFYek/yYS1GTh/64L3lZkqlPo+uJAb0xdtVWZR54tzY/0G2OuWXMDqeCCQ6I2wB9/w==}
+
+  '@iconify-json/mdi@1.2.3':
+    resolution: {integrity: sha512-O3cLwbDOK7NNDf2ihaQOH5F9JglnulNDFV7WprU2dSoZu3h3cWH//h74uQAB87brHmvFVxIOkuBX2sZSzYhScg==}
+
+  '@iconify-json/mingcute@1.2.5':
+    resolution: {integrity: sha512-LKlW4wahStprbfJcpzUnuayObOVAuztgYSy3v5oTke6cBJNfqEeE/mtMhHgpoSgGJvo5hhde2Q0+DoxKEldY2A==}
+
+  '@iconify-json/ph@1.2.2':
+    resolution: {integrity: sha512-PgkEZNtqa8hBGjHXQa4pMwZa93hmfu8FUSjs/nv4oUU6yLsgv+gh9nu28Kqi8Fz9CCVu4hj1MZs9/60J57IzFw==}
+
+  '@iconify-json/ri@1.2.5':
+    resolution: {integrity: sha512-kWGimOXMZrlYusjBKKXYOWcKhbOHusFsmrmRGmjS7rH0BpML5A9/fy8KHZqFOwZfC4M6amObQYbh8BqO5cMC3w==}
+
+  '@iconify-json/solar@1.2.4':
+    resolution: {integrity: sha512-ruAh+bbYimlzqXW6MtqmvWlfatvFjE7o1fZWieps1h42Dx7AaHu4Z/dgOYSO1RR4MIhNzD+2xgEbFjASgBcEyg==}
+
+  '@iconify-json/tabler@1.2.22':
+    resolution: {integrity: sha512-KmCtTzZyz7dtszdQGJ5wbWqko6exhI38e4aCQqWZE1Z2wGUqBsMXrRWawXkAp6/XNBebt54h0lcxFCaTYBwFJg==}
+
+  '@iconify-json/tdesign@1.2.8':
+    resolution: {integrity: sha512-Q/Ty43etGvXFkEVLYOW2cRaQFbjZoXcOvmOktJRludaN9SX5NeA86VvpriHAfsnsKnRGh0udLy8UscA5JumZKg==}
+
+  '@iconify-json/twemoji@1.2.4':
+    resolution: {integrity: sha512-REYJeXhzaLktNe32DxJJf3t65sYC5KO9K0Jh+RApXRBAo1/IB+jBqd8rny2sXci+wtQLBEfD4z4AGCLBrTMGWA==}
+
+  '@iconify-json/typcn@1.2.2':
+    resolution: {integrity: sha512-I7ckhJgsuvzO1JPgEIsbcjvANVoCs3046w7IcdVpMpz7rJPp2r8+PajvpQ84vHYkCTti297NmOTuTARTiaabTw==}
+
+  '@iconify-json/uil@1.2.3':
+    resolution: {integrity: sha512-if91+UBhDQc6glPsIaXecGIcXnbQZfEO4Gdv89TV2xQ+V5e9GWbY5rNl2fsKZd8COsRQ5lRQAKimVQVL0CZZVg==}
+
   '@iconify/types@2.0.0':
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
 
+  '@iconify/utils@2.3.0':
+    resolution: {integrity: sha512-GmQ78prtwYW6EtzXRU1rY+KwOKfz32PD7iJh6Iyqw68GiKuoZ2A6pRtzWONz5VQJbp50mEjXh/7NkumtrAgRKA==}
+
   '@iconify/utils@3.0.1':
     resolution: {integrity: sha512-A78CUEnFGX8I/WlILxJCuIJXloL0j/OJ9PSchPAfCargEIKmUBWvvEMmKWB5oONwiUqlNt+5eRufdkLxeHIWYw==}
 
-  '@iconify/vue@4.3.0':
-    resolution: {integrity: sha512-Xq0h6zMrHBbrW8jXJ9fISi+x8oDQllg5hTDkDuxnWiskJ63rpJu9CvJshj8VniHVTbsxCg9fVoPAaNp3RQI5OQ==}
-    peerDependencies:
-      vue: '>=3'
-
   '@imengyu/vue-scroll-rect@0.1.7':
     resolution: {integrity: sha512-a1ysL8LV2iFcHzMJ6tlrqr8JKtYIBrb1U3XcbjNmhponENUSbRvxs4b1sJd5sXdCFIIkDydwQM/SjVhfT7uBUw==}
 
@@ -477,6 +649,9 @@ packages:
   '@jridgewell/gen-mapping@0.3.13':
     resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
 
+  '@jridgewell/remapping@2.3.5':
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
+
   '@jridgewell/resolve-uri@3.1.2':
     resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
     engines: {node: '>=6.0.0'}
@@ -3501,10 +3676,46 @@ packages:
       webpack:
         optional: true
 
+  unplugin-icons@22.2.0:
+    resolution: {integrity: sha512-OdrXCiXexC1rFd0QpliAgcd4cMEEEQtoCf2WIrRIGu4iW6auBPpQKMCBeWxoe55phYdRyZLUWNOtzyTX+HOFSA==}
+    peerDependencies:
+      '@svgr/core': '>=7.0.0'
+      '@svgx/core': ^1.0.1
+      '@vue/compiler-sfc': ^3.0.2 || ^2.7.0
+      svelte: ^3.0.0 || ^4.0.0 || ^5.0.0
+      vue-template-compiler: ^2.6.12
+      vue-template-es2015-compiler: ^1.9.0
+    peerDependenciesMeta:
+      '@svgr/core':
+        optional: true
+      '@svgx/core':
+        optional: true
+      '@vue/compiler-sfc':
+        optional: true
+      svelte:
+        optional: true
+      vue-template-compiler:
+        optional: true
+      vue-template-es2015-compiler:
+        optional: true
+
   unplugin-utils@0.2.5:
     resolution: {integrity: sha512-gwXJnPRewT4rT7sBi/IvxKTjsms7jX7QIDLOClApuZwR49SXbrB1z2NLUZ+vDHyqCj/n58OzRRqaW+B8OZi8vg==}
     engines: {node: '>=18.12.0'}
 
+  unplugin-vue-components@29.0.0:
+    resolution: {integrity: sha512-M2DX44g4/jvBkB0V6uwqTbkTd5DMRHpeGoi/cIKwGG4HPuNxLbe8zoTStB2n12hoDiWc9I1PIRQruRWExNXHlQ==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@babel/parser': ^7.15.8
+      '@nuxt/kit': ^3.2.2 || ^4.0.0
+      vue: 2 || 3
+    peerDependenciesMeta:
+      '@babel/parser':
+        optional: true
+      '@nuxt/kit':
+        optional: true
+
   unplugin-vue-define-options@1.5.5:
     resolution: {integrity: sha512-V50sWbpoADsjyVgovxewoLo2IDW0zfgHJbKiAl2EdZT8OL3g3h1Mz3QKoAAu09i8+LnkDatIEQMgBVeHHxWXNg==}
     engines: {node: '>=16.14.0'}
@@ -3519,6 +3730,10 @@ packages:
     resolution: {integrity: sha512-4/u/j4FrCKdi17jaxuJA0jClGxB1AvU2hw/IuayPc4ay1XGaJs/rbb4v5WKwAjNifjmXK9PIFyuPiaK8azyR9w==}
     engines: {node: '>=14.0.0'}
 
+  unplugin@2.3.6:
+    resolution: {integrity: sha512-+/MdXl8bLTXI2lJF22gUBeCFqZruEpL/oM9f8wxCuKh9+Mw9qeul3gTqgbKpMeOFlusCzc0s7x2Kax2xKW+FQg==}
+    engines: {node: '>=18.12.0'}
+
   unset-value@1.0.0:
     resolution: {integrity: sha512-PcA2tsuGSF9cnySLHTLSh2qrQiJ70mn+r+Glzxv2TWZblxsxCC52BDlZoPCsz7STd9pN7EZetkWZBAvk4cgZdQ==}
     engines: {node: '>=0.10.0'}
@@ -3787,6 +4002,8 @@ snapshots:
       package-manager-detector: 1.3.0
       tinyexec: 1.0.1
 
+  '@antfu/utils@8.1.1': {}
+
   '@antfu/utils@9.2.0': {}
 
   '@babel/code-frame@7.27.1':
@@ -4092,8 +4309,133 @@ snapshots:
   '@esbuild/win32-x64@0.25.9':
     optional: true
 
+  '@iconify-json/basil@1.2.4':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-json/bi@1.2.6':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-json/bx@1.2.2':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-json/carbon@1.2.13':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-json/eos-icons@1.2.4':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-json/ep@1.2.3':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-json/fluent@1.2.28':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-json/formkit@1.2.2':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-json/gg@1.2.2':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-json/hugeicons@1.2.10':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-json/ic@1.2.4':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-json/icon-park-outline@1.2.4':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-json/iconamoon@1.2.2':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-json/icons8@1.2.1':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-json/ion@1.2.6':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-json/majesticons@1.2.4':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-json/material-symbols-light@1.2.32':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-json/material-symbols@1.2.32':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-json/mdi@1.2.3':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-json/mingcute@1.2.5':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-json/ph@1.2.2':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-json/ri@1.2.5':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-json/solar@1.2.4':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-json/tabler@1.2.22':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-json/tdesign@1.2.8':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-json/twemoji@1.2.4':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-json/typcn@1.2.2':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-json/uil@1.2.3':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify/types@2.0.0': {}
 
+  '@iconify/utils@2.3.0':
+    dependencies:
+      '@antfu/install-pkg': 1.1.0
+      '@antfu/utils': 8.1.1
+      '@iconify/types': 2.0.0
+      debug: 4.4.1
+      globals: 15.15.0
+      kolorist: 1.8.0
+      local-pkg: 1.1.1
+      mlly: 1.7.4
+    transitivePeerDependencies:
+      - supports-color
+
   '@iconify/utils@3.0.1':
     dependencies:
       '@antfu/install-pkg': 1.1.0
@@ -4107,11 +4449,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@iconify/vue@4.3.0(vue@3.5.18(typescript@5.9.2))':
-    dependencies:
-      '@iconify/types': 2.0.0
-      vue: 3.5.18(typescript@5.9.2)
-
   '@imengyu/vue-scroll-rect@0.1.7': {}
 
   '@imengyu/vue3-context-menu@1.5.2':
@@ -4123,6 +4460,11 @@ snapshots:
       '@jridgewell/sourcemap-codec': 1.5.5
       '@jridgewell/trace-mapping': 0.3.30
 
+  '@jridgewell/remapping@2.3.5':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.30
+
   '@jridgewell/resolve-uri@3.1.2': {}
 
   '@jridgewell/sourcemap-codec@1.5.5': {}
@@ -7473,11 +7815,39 @@ snapshots:
       unplugin: 1.16.1
       vite: 7.1.2(@types/node@24.3.0)(jiti@2.5.1)(sass@1.90.0)
 
+  unplugin-icons@22.2.0(@vue/compiler-sfc@3.5.18):
+    dependencies:
+      '@antfu/install-pkg': 1.1.0
+      '@iconify/utils': 2.3.0
+      debug: 4.4.1
+      local-pkg: 1.1.1
+      unplugin: 2.3.6
+    optionalDependencies:
+      '@vue/compiler-sfc': 3.5.18
+    transitivePeerDependencies:
+      - supports-color
+
   unplugin-utils@0.2.5:
     dependencies:
       pathe: 2.0.3
       picomatch: 4.0.3
 
+  unplugin-vue-components@29.0.0(@babel/parser@7.28.3)(vue@3.5.18(typescript@5.9.2)):
+    dependencies:
+      chokidar: 3.6.0
+      debug: 4.4.1
+      local-pkg: 1.1.1
+      magic-string: 0.30.17
+      mlly: 1.7.4
+      tinyglobby: 0.2.14
+      unplugin: 2.3.6
+      unplugin-utils: 0.2.5
+      vue: 3.5.18(typescript@5.9.2)
+    optionalDependencies:
+      '@babel/parser': 7.28.3
+    transitivePeerDependencies:
+      - supports-color
+
   unplugin-vue-define-options@1.5.5(vue@3.5.18(typescript@5.9.2)):
     dependencies:
       '@vue-macros/common': 1.16.1(vue@3.5.18(typescript@5.9.2))
@@ -7537,6 +7907,13 @@ snapshots:
       acorn: 8.15.0
       webpack-virtual-modules: 0.6.2
 
+  unplugin@2.3.6:
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      acorn: 8.15.0
+      picomatch: 4.0.3
+      webpack-virtual-modules: 0.6.2
+
   unset-value@1.0.0:
     dependencies:
       has-value: 0.3.1
diff --git a/src/components/BaseButton.vue b/src/components/BaseButton.vue
index 39833e35..977cfa2b 100644
--- a/src/components/BaseButton.vue
+++ b/src/components/BaseButton.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import Tooltip from "@/pages/pc/components/base/Tooltip.vue";
-import {Icon} from "@iconify/vue";
 
 interface IProps {
   keyboard?: string,
@@ -32,14 +31,14 @@ defineEmits(['click'])
              (disabled||loading) && 'disabled',
          ]">
       <span :style="{opacity:loading?0:1}"><slot></slot></span>
-      <Icon v-if="loading"
-            class="loading"
-            icon="eos-icons:loading"
-            width="18"
-            :color="type === 'info'?'#000000':'#ffffff'"
+      <IconEosIconsLoading
+          v-if="loading"
+          class="loading"
+          width="18"
+          :color="type === 'info'?'#000000':'#ffffff'"
       />
       <div class="key-notice" v-if="keyboard">
-        <Icon icon="bi:keyboard" width="14" color="#ffffff"/>
+        <IconBiKeyboard width="14" color="#ffffff"/>
         <span class="key">{{ keyboard }}</span>
       </div>
     </div>
diff --git a/src/components/BaseIcon.vue b/src/components/BaseIcon.vue
index b3f9d65c..50e4d91d 100644
--- a/src/components/BaseIcon.vue
+++ b/src/components/BaseIcon.vue
@@ -1,11 +1,9 @@
 <script setup lang="ts">
 
 import Tooltip from "@/pages/pc/components/base/Tooltip.vue";
-import {Icon} from "@iconify/vue";
 
 defineProps<{
   title?: string,
-  icon: string,
   disabled?: boolean,
   noBg?: boolean,
 }>()
@@ -22,7 +20,7 @@ const emit = defineEmits(['click'])
         class="icon-wrapper"
         :class="{disabled,noBg}"
     >
-      <Icon :icon="icon"/>
+      <slot/>
     </div>
   </Tooltip>
 </template>
@@ -45,7 +43,7 @@ $w: 1.4rem;
   &:hover:not(.disabled,.noBg) {
     background: var(--color-icon-hightlight);
 
-    svg {
+    :deep(svg) {
       color: white;
     }
   }
diff --git a/src/components/icon/BackIcon.vue b/src/components/icon/BackIcon.vue
deleted file mode 100644
index 20da05fc..00000000
--- a/src/components/icon/BackIcon.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import {Icon} from "@iconify/vue";
-
-</script>
-
-<template>
-  <Icon
-      class="back-icon"
-      icon="octicon:arrow-left-24" width="22"
-  />
-</template>
-
-<style scoped lang="scss">
-
-</style>
\ No newline at end of file
diff --git a/src/components/icon/Close.vue b/src/components/icon/Close.vue
index b8144b56..560c410c 100644
--- a/src/components/icon/Close.vue
+++ b/src/components/icon/Close.vue
@@ -13,8 +13,7 @@ defineProps<{
        @click="$emit('click')"
   >
     <Tooltip :title="title">
-      <Icon icon="carbon:close-outline"
-      />
+      <IconCarbonCloseOutline/>
     </Tooltip>
   </div>
 </template>
diff --git a/src/components/icon/DeleteIcon.vue b/src/components/icon/DeleteIcon.vue
index 40e3f1b4..7124a405 100644
--- a/src/components/icon/DeleteIcon.vue
+++ b/src/components/icon/DeleteIcon.vue
@@ -1,12 +1,5 @@
-<script setup lang="ts">
-import {Icon} from "@iconify/vue";
-
-</script>
+<script setup lang="ts"></script>
 
 <template>
-  <Icon icon="solar:trash-bin-minimalistic-linear" width="20"/>
+  <IconSolarTrashBinMinimalisticLinear/>
 </template>
-
-<style scoped lang="scss">
-
-</style>
\ No newline at end of file
diff --git a/src/pages/pc/Setting.vue b/src/pages/pc/Setting.vue
index e23a4675..6f8eaa15 100644
--- a/src/pages/pc/Setting.vue
+++ b/src/pages/pc/Setting.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import {Icon} from '@iconify/vue';
 import {ref, watch} from "vue";
 import {useSettingStore} from "@/stores/setting.ts";
 import {getAudioFileUrl, useChangeAllSound, usePlayAudio, useWatchAllSound} from "@/hooks/sound.ts";
@@ -136,27 +135,27 @@ function importData(e) {
       <div class="left mt-10">
         <div class="tabs">
           <div class="tab" :class="tabIndex === 0 && 'active'" @click="tabIndex = 0">
-            <Icon icon="bx:headphone" width="20"/>
+            <IconBxHeadphone width="20"/>
             <span>音效设置</span>
           </div>
           <div class="tab" :class="tabIndex === 1 && 'active'" @click="tabIndex = 1">
-            <Icon icon="icon-park-outline:setting-config" width="20"/>
+            <IconIconParkOutlineSettingConfig width="20"/>
             <span>练习设置</span>
           </div>
           <div class="tab" :class="tabIndex === 2 && 'active'" @click="tabIndex = 2">
-            <Icon icon="material-symbols:keyboard-outline" width="20"/>
+            <IconMaterialSymbolsKeyboardOutline width="20"/>
             <span>快捷键设置</span>
           </div>
           <div class="tab" :class="tabIndex === 3 && 'active'" @click="tabIndex = 3">
-            <Icon icon="mdi:database-cog-outline" width="20"/>
+            <IconMdiDatabaseCogOutline width="20"/>
             <span>数据管理</span>
           </div>
           <div class="tab" :class="tabIndex === 4 && 'active'" @click="tabIndex = 4">
-            <Icon icon="mingcute:service-fill" width="20"/>
+            <IconMingcuteServiceFill width="20"/>
             <span>反馈</span>
           </div>
           <div class="tab" :class="tabIndex === 5 && 'active'" @click="tabIndex = 5">
-            <Icon icon="mdi:about-circle-outline" width="20"/>
+            <IconMdiAboutCircleOutline width="20"/>
             <span>关于</span>
           </div>
         </div>
diff --git a/src/pages/pc/article/ArticleHomePage.vue b/src/pages/pc/article/ArticleHomePage.vue
index fa61f216..a3f37c60 100644
--- a/src/pages/pc/article/ArticleHomePage.vue
+++ b/src/pages/pc/article/ArticleHomePage.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import {useBaseStore} from "@/stores/base.ts";
-import {Icon} from '@iconify/vue'
 import {useRouter} from "vue-router";
 import BasePage from "@/pages/pc/components/BasePage.vue";
 import {_getDictDataByUrl, useNav} from "@/utils";
@@ -14,6 +13,7 @@ import BaseButton from "@/components/BaseButton.vue";
 import PopConfirm from "@/pages/pc/components/PopConfirm.vue";
 import {onMounted, watch} from "vue";
 import {getDefaultDict} from "@/types/func.ts";
+import DeleteIcon from "@/components/icon/DeleteIcon.vue";
 
 const {nav} = useNav()
 const base = useBaseStore()
@@ -95,8 +95,10 @@ async function goBookDetail(val: DictResource) {
                 @click="goBookDetail(base.currentBook)">{{
               base.currentBook.name || '请选择书籍开始学习'
             }}</span>
-          <BaseIcon @click="router.push('/book-list')"
-                    :icon="base.currentBook.name ? 'gg:arrows-exchange':'fluent:add-20-filled'"/>
+          <BaseIcon @click="router.push('/book-list')">
+            <IconGgArrowsExchange v-if="base.currentBook.name"/>
+            <IconFluentAdd20Filled v-else/>
+          </BaseIcon>
         </div>
         <BaseButton
             size="large"
@@ -105,7 +107,7 @@ async function goBookDetail(val: DictResource) {
         >
           <div class="flex items-center gap-2">
             <span>开始学习</span>
-            <Icon icon="icons8:right-round" class="text-2xl"/>
+            <IconIcons8RightRound class="text-2xl"/>
           </div>
         </BaseButton>
       </div>
@@ -118,7 +120,9 @@ async function goBookDetail(val: DictResource) {
         <div class="title">我的书籍</div>
         <div class="flex gap-4 items-center">
           <PopConfirm title="确认删除所有选中书籍？" @confirm="handleBatchDel" v-if="selectIds.length">
-            <BaseIcon class="del" title="删除" icon="solar:trash-bin-minimalistic-linear"/>
+            <BaseIcon class="del" title="删除" >
+              <DeleteIcon/>
+            </BaseIcon>
           </PopConfirm>
 
           <div class="color-blue cursor-pointer" v-if="base.article.bookList.length > 1"
diff --git a/src/pages/pc/article/BatchEditArticlePage.vue b/src/pages/pc/article/BatchEditArticlePage.vue
index d31dbe01..89807357 100644
--- a/src/pages/pc/article/BatchEditArticlePage.vue
+++ b/src/pages/pc/article/BatchEditArticlePage.vue
@@ -12,9 +12,9 @@ import {MessageBox} from "@/utils/MessageBox.tsx";
 import {useRuntimeStore} from "@/stores/runtime.ts";
 import {nanoid} from "nanoid";
 import EditArticle from "@/pages/pc/article/components/EditArticle.vue";
-import BaseIcon from "@/components/BaseIcon.vue";
 import Toast from '@/pages/pc/components/base/toast/Toast.ts'
 import {getDefaultArticle} from "@/types/func.ts";
+import BackIcon from "@/pages/pc/components/BackIcon.vue";
 
 const emit = defineEmits<{
   importData: [val: Event]
@@ -161,10 +161,7 @@ useWindowClick(() => showExport = false)
   <div class="add-article">
     <div class="aslide">
       <header class="flex justify-between items-center">
-        <BaseIcon
-            title="返回"
-            @click="$router.back"
-            icon="formkit:left"/>
+        <BackIcon/>
         <div class="text-xl">{{ runtimeStore.editDict.name }}</div>
       </header>
       <List
diff --git a/src/pages/pc/article/BookDetail.vue b/src/pages/pc/article/BookDetail.vue
index fe8fff63..07876965 100644
--- a/src/pages/pc/article/BookDetail.vue
+++ b/src/pages/pc/article/BookDetail.vue
@@ -93,7 +93,7 @@ const {
         <div class="absolute text-2xl text-align-center w-full">{{ runtimeStore.editDict.name }}</div>
         <div class="flex">
           <BaseButton :loading="studyLoading||loading" type="info" @click="isEdit = true">编辑</BaseButton>
-                    <BaseButton type="info" @click="router.push('batch-edit-article')">文章管理</BaseButton>
+          <BaseButton type="info" @click="router.push('batch-edit-article')">文章管理</BaseButton>
           <BaseButton :loading="studyLoading||loading" @click="addMyStudyList">学习</BaseButton>
         </div>
       </div>
@@ -110,15 +110,12 @@ const {
               :active-id="selectArticle.id">
             <template v-slot:suffix="{item,index}">
               <BaseIcon
-                  v-if="!isArticleCollect(item)"
-                  class="collect"
-                  @click="toggleArticleCollect(item)"
-                  title="收藏" icon="ph:star"/>
-              <BaseIcon
-                  v-else
-                  class="fill"
-                  @click="toggleArticleCollect(item)"
-                  title="取消收藏" icon="ph:star-fill"/>
+                  :class="!isArticleCollect(item)?'collect':'fill'"
+                  @click.stop="toggleArticleCollect(item)"
+                  :title="!isArticleCollect(item) ? '收藏' : '取消收藏'">
+                <IconPhStar v-if="!isArticleCollect(item)"/>
+                <IconPhStarFill v-else/>
+              </BaseIcon>
             </template>
           </ArticleList>
           <Empty v-else/>
diff --git a/src/pages/pc/article/BookList.vue b/src/pages/pc/article/BookList.vue
index 87834b58..c8551a67 100644
--- a/src/pages/pc/article/BookList.vue
+++ b/src/pages/pc/article/BookList.vue
@@ -59,8 +59,9 @@ const searchList = computed<any[]>(() => {
         <div class="py-1 flex flex-1 justify-end" v-else>
           <span class="page-title absolute w-full center">书籍列表</span>
           <BaseIcon @click="showSearchInput = true"
-                    class="z-1"
-                    icon="fluent:search-24-regular"/>
+                     class="z-1">
+            <IconFluentSearch24Regular/>
+          </BaseIcon>
         </div>
       </div>
       <div class="mt-4" v-if="searchKey">
diff --git a/src/pages/pc/article/EditArticlePage.vue b/src/pages/pc/article/EditArticlePage.vue
index 8e83f063..2302dcb3 100644
--- a/src/pages/pc/article/EditArticlePage.vue
+++ b/src/pages/pc/article/EditArticlePage.vue
@@ -1,15 +1,12 @@
 <script setup lang="ts">
 
 import EditArticle from "@/pages/pc/article/components/EditArticle.vue";
-import BaseIcon from "@/components/BaseIcon.vue";
+import BackIcon from "@/pages/pc/components/BackIcon.vue";
 </script>
 
 <template>
   <div class="h-screen">
-    <BaseIcon
-        title="返回"
-        @click="$router.back"
-        icon="formkit:left"/>
+    <BackIcon/>
     <EditArticle class="vue"></EditArticle>
   </div>
 
diff --git a/src/pages/pc/article/StudyArticle.vue b/src/pages/pc/article/StudyArticle.vue
index 2a5f8659..06eda6dd 100644
--- a/src/pages/pc/article/StudyArticle.vue
+++ b/src/pages/pc/article/StudyArticle.vue
@@ -20,7 +20,6 @@ import Panel from "@/pages/pc/components/Panel.vue";
 import ArticleList from "@/pages/pc/components/list/ArticleList.vue";
 import EditSingleArticleModal from "@/pages/pc/article/components/EditSingleArticleModal.vue";
 import Tooltip from "@/pages/pc/components/base/Tooltip.vue";
-import {Icon} from "@iconify/vue";
 import ConflictNotice from "@/pages/pc/components/ConflictNotice.vue";
 
 const store = useBaseStore()
@@ -270,15 +269,12 @@ const {playSentenceAudio} = usePlaySentenceAudio()
                 :list="articleData.list ">
               <template v-slot:suffix="{item,index}">
                 <BaseIcon
-                    v-if="!isArticleCollect(item)"
-                    class="collect"
-                    @click="toggleArticleCollect(item)"
-                    title="收藏" icon="ph:star"/>
-                <BaseIcon
-                    v-else
-                    class="fill"
-                    @click="toggleArticleCollect(item)"
-                    title="取消收藏" icon="ph:star-fill"/>
+                    :class="!isArticleCollect(item) ? 'collect' : 'fill'"
+                    @click.stop="toggleArticleCollect(item)"
+                    :title="!isArticleCollect(item) ? '收藏' : '取消收藏'">
+                  <IconPhStar v-if="!isArticleCollect(item)"/>
+                  <IconPhStarFill v-else/>
+                </BaseIcon>
               </template>
             </ArticleList>
           </div>
@@ -293,7 +289,7 @@ const {playSentenceAudio} = usePlaySentenceAudio()
     </div>
     <div class="footer" :class="!settingStore.showToolbar && 'hide'">
       <Tooltip :title="settingStore.showToolbar?'收起':'展开'">
-        <Icon icon="icon-park-outline:down"
+        <IconIconParkOutlineDown
               @click="settingStore.showToolbar = !settingStore.showToolbar"
               class="arrow"
               :class="!settingStore.showToolbar && 'down'"
@@ -321,21 +317,29 @@ const {playSentenceAudio} = usePlaySentenceAudio()
             <div class="flex gap-2 center">
               <BaseIcon
                   :title="`下一句(${settingStore.shortcutKeyMap[ShortcutKey.Next]})`"
-                  icon="icon-park-outline:go-ahead"
-                  @click="skip"/>
+                  @click="skip">
+                <IconIconParkOutlineGoAhead/>
+              </BaseIcon>
               <BaseIcon
                   :title="`重听(${settingStore.shortcutKeyMap[ShortcutKey.PlayWordPronunciation]})`"
-                  icon="fluent:replay-16-filled"
-                  @click="play"/>
+                  @click="play">
+                <IconFluentReplay16Filled/>
+              </BaseIcon>
 
               <BaseIcon
                   @click="settingStore.dictation = !settingStore.dictation"
                   :title="`开关默写模式(${settingStore.shortcutKeyMap[ShortcutKey.ToggleDictation]})`"
-                  :icon="['majesticons:eye-off-line','mdi:eye-outline'][settingStore.dictation?0:1]"/>
+              >
+                <IconMajesticonsEyeOffLine v-if="settingStore.dictation"/>
+                <IconMdiEyeOutline v-else/>
+              </BaseIcon>
 
-              <BaseIcon :icon="['mdi:translate','mdi:translate-off'][settingStore.translate?0:1]"
-                        :title="`开关释义显示(${settingStore.shortcutKeyMap[ShortcutKey.ToggleShowTranslate]})`"
-                        @click="settingStore.translate = !settingStore.translate"/>
+              <BaseIcon
+                  :title="`开关释义显示(${settingStore.shortcutKeyMap[ShortcutKey.ToggleShowTranslate]})`"
+                  @click="settingStore.translate = !settingStore.translate">
+                <IconMdiTranslate v-if="settingStore.translate"/>
+                <IconMdiTranslateOff v-else/>
+              </BaseIcon>
 
               <!--              <BaseIcon-->
               <!--                  :title="`编辑(${settingStore.shortcutKeyMap[ShortcutKey.EditArticle]})`"-->
@@ -344,8 +348,9 @@ const {playSentenceAudio} = usePlaySentenceAudio()
               <!--              />-->
               <BaseIcon
                   @click="settingStore.showPanel = !settingStore.showPanel"
-                  :title="`面板(${settingStore.shortcutKeyMap[ShortcutKey.TogglePanel]})`"
-                  icon="tdesign:menu-unfold"/>
+                  :title="`面板(${settingStore.shortcutKeyMap[ShortcutKey.TogglePanel]})`">
+                <IconTdesignMenuUnfold/>
+              </BaseIcon>
             </div>
           </div>
         </div>
diff --git a/src/pages/pc/article/components/EditArticle.vue b/src/pages/pc/article/components/EditArticle.vue
index aa4faa65..c99f3989 100644
--- a/src/pages/pc/article/components/EditArticle.vue
+++ b/src/pages/pc/article/components/EditArticle.vue
@@ -3,7 +3,6 @@
 import {Article, Sentence, TranslateEngine} from "@/types/types.ts";
 import BaseButton from "@/components/BaseButton.vue";
 import EditAbleText from "@/pages/pc/components/EditAbleText.vue";
-import {Icon} from "@iconify/vue";
 import {getNetworkTranslate, getSentenceAllText, getSentenceAllTranslateText} from "@/hooks/translate.ts";
 import {genArticleSectionData, splitCNArticle2, splitEnArticle2, usePlaySentenceAudio} from "@/hooks/article.ts";
 import {_nextTick, _parseLRC, cloneDeep, last} from "@/utils";
@@ -295,7 +294,7 @@ function setStartTime(val: Sentence, i: number, j: number) {
             </textarea>
       <div class="justify-end items-center flex">
         <Tooltip>
-          <Icon icon="ri:question-line" class="mr-3" width="20"/>
+          <IconRiQuestionLine class="mr-3" width="20"/>
           <template #reference>
             <div>
               <div class="mb-2">使用方法</div>
@@ -357,7 +356,7 @@ function setStartTime(val: Sentence, i: number, j: number) {
         </div>
         <div class="flex items-center">
           <Tooltip>
-            <Icon icon="ri:question-line" class="mr-3" width="20"/>
+            <IconRiQuestionLine class="mr-3" width="20"/>
             <template #reference>
               <div>
                 <div class="mb-2">使用方法</div>
@@ -421,9 +420,11 @@ function setStartTime(val: Sentence, i: number, j: number) {
                       <div>{{ sentence.audioPosition?.[0] ?? 0 }}s</div>
                       <BaseIcon
                           @click="setStartTime(sentence,indexI,indexJ)"
-                          :icon="indexI === 0 && indexJ === 0 ?'ic:sharp-my-location':'twemoji:end-arrow'"
                           :title="indexI === 0 && indexJ === 0 ?'设置开始时间':'使用前一句的结束时间'"
-                      />
+                      >
+                        <IconIcSharpMyLocation v-if="indexI === 0 && indexJ === 0"/>
+                        <IconTwemojiEndArrow v-else/>
+                      </BaseIcon>
                     </div>
                     <div>-</div>
                     <div class="flex flex-col items-center justify-center">
@@ -432,15 +433,21 @@ function setStartTime(val: Sentence, i: number, j: number) {
                       <BaseIcon
                           @click="sentence.audioPosition[1] = Number(Number(audioRef.currentTime).toFixed(2))"
                           title="设置结束时间"
-                          icon="ic:sharp-my-location"
-                      />
+                      >
+                        <IconIcSharpMyLocation/>
+                      </BaseIcon>
                     </div>
                   </div>
                   <div class="flex flex-col">
                     <BaseIcon :icon="sentence.audioPosition?.length ? 'basil:edit-outline' : 'basil:add-outline'"
-                              @click="handleShowEditAudioDialog(sentence,indexI,indexJ)"/>
-                    <BaseIcon v-if="sentence.audioPosition?.length" icon="hugeicons:play"
-                              @click="playSentenceAudio(sentence,audioRef,editArticle)"/>
+                               @click="handleShowEditAudioDialog(sentence,indexI,indexJ)">
+                      <IconBasilEditOutline v-if="sentence.audioPosition?.length"/>
+                      <IconBasilAddOutline v-else/>
+                    </BaseIcon>
+                    <BaseIcon v-if="sentence.audioPosition?.length"
+                              @click="playSentenceAudio(sentence,audioRef,editArticle)">
+                      <IconHugeiconsPlay/>
+                    </BaseIcon>
                   </div>
                 </div>
               </div>
@@ -451,11 +458,11 @@ function setStartTime(val: Sentence, i: number, j: number) {
           <div class="status">
             <span>状态：</span>
             <div class="warning" v-if="failCount">
-              <Icon icon="typcn:warning-outline"/>
+              <IconTypcnWarningOutline/>
               共有{{ failCount }}句没有翻译！
             </div>
             <div class="success" v-else>
-              <Icon icon="mdi:success-circle-outline"/>
+              <IconMdiSuccessCircleOutline/>
               翻译完成！
             </div>
           </div>
@@ -487,9 +494,11 @@ function setStartTime(val: Sentence, i: number, j: number) {
               <span v-if="editSentence.audioPosition?.[1] !== -1"> - {{ editSentence.audioPosition?.[1] }}s</span>
               <span v-else> - 结束</span>
             </div>
-            <BaseIcon icon="hugeicons:play"
+            <BaseIcon2
                       title="试听"
-                      @click="playSentenceAudio(editSentence,sentenceAudioRef,editArticle)"/>
+                      @click="playSentenceAudio(editSentence,sentenceAudioRef,editArticle)">
+              <IconHugeiconsPlay/>
+            </BaseIcon2>
           </div>
         </div>
         <div class="flex flex-col gap-2">
@@ -498,16 +507,18 @@ function setStartTime(val: Sentence, i: number, j: number) {
             <div class="flex justify-between flex-1">
               <div class="flex items-center gap-2">
                 <InputNumber v-model="editSentence.audioPosition[0]" :precision="2" :step="0.1"/>
-                <BaseIcon
+                <BaseIcon2
                     @click="jumpAudio(editSentence.audioPosition[0])"
                     title="跳转"
-                    icon="ic:sharp-my-location"
-                />
-                <BaseIcon
+                >
+                  <IconIcSharpMyLocation/>
+                </BaseIcon2>
+                <BaseIcon2
                     @click="setPreEndTimeToCurrentStartTime"
                     title="使用前一句的结束时间"
-                    icon="twemoji:end-arrow"
-                />
+                >
+                  <IconTwemojiEndArrow/>
+                </BaseIcon2>
               </div>
               <BaseButton @click="recordStart">记录</BaseButton>
             </div>
diff --git a/src/pages/pc/components/BackIcon.vue b/src/pages/pc/components/BackIcon.vue
index 2cc18c9c..43b35c2f 100644
--- a/src/pages/pc/components/BackIcon.vue
+++ b/src/pages/pc/components/BackIcon.vue
@@ -6,7 +6,9 @@ import BaseIcon from "@/components/BaseIcon.vue";
 <template>
   <BaseIcon
       title="返回"
-      icon="formkit:left"/>
+      @click="$router.back">
+    <IconFormkitLeft/>
+  </BaseIcon>
 </template>
 
 <style scoped lang="scss">
diff --git a/src/pages/pc/components/BaseTable.vue b/src/pages/pc/components/BaseTable.vue
index 69f95831..8dc565bc 100644
--- a/src/pages/pc/components/BaseTable.vue
+++ b/src/pages/pc/components/BaseTable.vue
@@ -9,10 +9,10 @@ import {cloneDeep, debounce, reverse, shuffle} from "@/utils";
 import Input from "@/pages/pc/components/Input.vue";
 import PopConfirm from "@/pages/pc/components/PopConfirm.vue";
 import Empty from "@/components/Empty.vue";
-import {Icon} from "@iconify/vue";
 import Pagination from '@/pages/pc/components/base/Pagination.vue'
 import Toast from '@/pages/pc/components/base/toast/Toast.ts'
 import Checkbox from "@/pages/pc/components/base/checkbox/Checkbox.vue";
+import DeleteIcon from "@/components/icon/DeleteIcon.vue";
 
 let list = defineModel('list')
 
@@ -161,26 +161,32 @@ defineRender(
                               >
                                 <BaseIcon
                                     class="del"
-                                    title="删除"
-                                    icon="solar:trash-bin-minimalistic-linear"/>
+                                    title="删除">
+                                  <DeleteIcon/>
+                                </BaseIcon>
                               </PopConfirm>
                               : null
                         }
                         <BaseIcon
                             onClick={props.add}
                             icon="fluent:add-20-filled"
-                            title="添加单词"/>
+                            title="添加单词">
+                          <IconFluentAdd20Filled/>
+                        </BaseIcon>
                         <BaseIcon
                             disabled={!currentList.length}
                             title="改变顺序"
                             icon="icon-park-outline:sort-two"
                             onClick={() => showSortDialog = !showSortDialog}
-                        />
+                        >
+                         <IconIconParkOutlineSortTwo/>
+                        </BaseIcon>
                         <BaseIcon
                             disabled={!currentList.length}
                             onClick={() => showSearchInput = !showSearchInput}
-                            title="搜索"
-                            icon="fluent:search-24-regular"/>
+                            title="搜索">
+                            <IconFluentSearch24Regular/>
+                        </BaseIcon>
                         <MiniDialog
                             modelValue={showSortDialog}
                             onUpdate:modelValue={e => showSortDialog = e}
@@ -203,8 +209,7 @@ defineRender(
             {
               props.loading ?
                   <div class="h-full w-full center text-4xl">
-                    <Icon
-                        icon="eos-icons:loading"
+                    <IconEosIconsLoading
                         color="gray"
                     />
                   </div>
diff --git a/src/pages/pc/components/Book.vue b/src/pages/pc/components/Book.vue
index a13056a1..baae3ffe 100644
--- a/src/pages/pc/components/Book.vue
+++ b/src/pages/pc/components/Book.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import {Dict} from "@/types/types.ts";
-import {Icon} from "@iconify/vue";
 import Progress from '@/pages/pc/components/base/Progress.vue'
 import Checkbox from "@/pages/pc/components/base/checkbox/Checkbox.vue";
 
@@ -49,9 +48,9 @@ const studyProgress = $computed(() => {
       <div class="custom" v-if="item.custom">自定义</div>
     </template>
     <div v-else class="center h-full">
-      <Icon
+      <IconFluentAdd20Filled
           width="40px"
-          icon="fluent:add-20-filled"/>
+        />
     </div>
 
   </div>
diff --git a/src/pages/pc/components/CollectNotice.vue b/src/pages/pc/components/CollectNotice.vue
index 62578e59..250d5354 100644
--- a/src/pages/pc/components/CollectNotice.vue
+++ b/src/pages/pc/components/CollectNotice.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
 
-import {Icon} from "@iconify/vue";
 import Close from "@/components/icon/Close.vue";
 import BaseButton from "@/components/BaseButton.vue";
-import {onMounted, watch} from "vue";
+import {watch} from "vue";
 import {useSettingStore} from "@/stores/setting.ts";
 
 import {isMobile} from "@/utils";
@@ -54,16 +53,11 @@ watch(() => settingStore.load, (n) => {
             <div class="href-wrapper">
               <div class="round">
                 <div class="href">2study.top</div>
-                <Icon
-                    width="22"
-                    icon="mdi:star-outline"/>
+                <IconMdiStarOutline width="22"/>
               </div>
               <div class="right">
                 👈
-                <Icon
-                    class="star"
-                    width="22"
-                    icon="mdi:star"/>
+                <IconMdiStar class="star" width="22"/>
                 点亮它!
               </div>
             </div>
diff --git a/src/pages/pc/components/EditAbleText.vue b/src/pages/pc/components/EditAbleText.vue
index e28d50e1..7c1b4d4d 100644
--- a/src/pages/pc/components/EditAbleText.vue
+++ b/src/pages/pc/components/EditAbleText.vue
@@ -3,7 +3,6 @@
 import BaseButton from "@/components/BaseButton.vue";
 
 import {watchEffect} from "vue";
-import BaseInput from "@/pages/pc/components/base/BaseInput.vue";
 import Textarea from "@/pages/pc/components/base/Textarea.vue";
 
 interface IProps {
diff --git a/src/pages/pc/components/Input.vue b/src/pages/pc/components/Input.vue
index 7ad2e9f6..c4da257f 100644
--- a/src/pages/pc/components/Input.vue
+++ b/src/pages/pc/components/Input.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 
-import {Icon} from "@iconify/vue";
 import Close from "@/components/icon/Close.vue";
 import {useDisableEventListener, useWindowClick} from "@/hooks/event.ts";
 
@@ -37,7 +36,7 @@ const vFocus = {
        :class="{focus}"
        ref="inputEl"
   >
-    <Icon icon="fluent:search-24-regular"
+    <IconFluentSearch24Regular
           v-if="prefixIcon"
           width="20"/>
     <input type="text"
diff --git a/src/pages/pc/components/base/Pagination.vue b/src/pages/pc/components/base/Pagination.vue
index a1060eaf..e794ac7e 100644
--- a/src/pages/pc/components/base/Pagination.vue
+++ b/src/pages/pc/components/base/Pagination.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import {computed, ref, onMounted, onUnmounted} from 'vue';
-import {Icon} from "@iconify/vue";
+import {computed, onMounted, onUnmounted, ref} from 'vue';
 
 interface IProps {
   currentPage?: number;
@@ -190,7 +189,7 @@ function quickNextPage() {
           :disabled="internalCurrentPage <= 1"
           @click="prev"
       >
-        <Icon icon="mingcute:left-line"/>
+        <IconMingcuteLeftLine/>
       </button>
 
       <!-- 页码 -->
@@ -251,7 +250,7 @@ function quickNextPage() {
           :disabled="internalCurrentPage >= pageCount"
           @click="next"
       >
-        <Icon icon="mingcute:right-line"/>
+        <IconMingcuteRightLine/>
       </button>
 
       <!-- 每页条数选择器 -->
diff --git a/src/pages/pc/components/base/select/Select.vue b/src/pages/pc/components/base/select/Select.vue
index 620c7da5..49a7f7a4 100644
--- a/src/pages/pc/components/base/select/Select.vue
+++ b/src/pages/pc/components/base/select/Select.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import {computed, nextTick, onBeforeUnmount, onMounted, provide, ref, useAttrs, useSlots, VNode, watch} from 'vue';
-import {Icon} from "@iconify/vue";
 import {useWindowClick} from "@/hooks/event.ts";
 
 interface Option {
@@ -161,8 +160,7 @@ onBeforeUnmount(() => {
         {{ displayValue }}
       </div>
       <div class="custom-select__suffix">
-        <Icon
-            icon="mdi:chevron-down"
+        <IconMdiChevronDown
             :class="{ 'is-reverse': isOpen }"
             width="16"
         />
diff --git a/src/pages/pc/components/base/toast/Toast.vue b/src/pages/pc/components/base/toast/Toast.vue
index a82a3be9..8a55ee61 100644
--- a/src/pages/pc/components/base/toast/Toast.vue
+++ b/src/pages/pc/components/base/toast/Toast.vue
@@ -3,17 +3,19 @@
     <div v-if="visible" class="message" :class="type" :style="style" @mouseenter="handleMouseEnter"
          @mouseleave="handleMouseLeave">
       <div class="message-content">
-        <Icon v-if="icon" :icon="icon" class="message-icon"/>
+        <IconMdiCheckCircle v-if="props.type === 'success'" class="message-icon"/>
+        <IconMdiAlertCircle v-if="props.type === 'warning'" class="message-icon"/>
+        <IconMdiInformation v-if="props.type === 'info'" class="message-icon"/>
+        <IconMdiCloseCircle v-if="props.type === 'error'" class="message-icon"/>
         <span class="message-text">{{ message }}</span>
-        <Icon v-if="showClose" icon="mdi:close" class="message-close" @click="close"/>
+        <IconMdiClose v-if="showClose" class="message-close" @click="close"/>
       </div>
     </div>
   </Transition>
 </template>
 
 <script setup lang="ts">
-import {ref, computed, onMounted, onBeforeUnmount} from 'vue'
-import {Icon} from '@iconify/vue'
+import {computed, onBeforeUnmount, onMounted, ref} from 'vue'
 
 interface Props {
   message: string
@@ -32,16 +34,6 @@ const emit = defineEmits(['close'])
 const visible = ref(false)
 let timer = null
 
-const icon = computed(() => {
-  const icons = {
-    success: 'mdi:check-circle',
-    warning: 'mdi:alert-circle',
-    info: 'mdi:information',
-    error: 'mdi:close-circle'
-  }
-  return icons[props.type]
-})
-
 const style = computed(() => ({
   // 移除offset，现在由容器管理位置
 }))
diff --git a/src/pages/pc/components/dialog/Dialog.vue b/src/pages/pc/components/dialog/Dialog.vue
index 1121d85d..8b46e77f 100644
--- a/src/pages/pc/components/dialog/Dialog.vue
+++ b/src/pages/pc/components/dialog/Dialog.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import {onMounted, onUnmounted, watch} from "vue";
 import Tooltip from "@/pages/pc/components/base/Tooltip.vue";
-import {Icon} from '@iconify/vue';
 import {useEventListener} from "@/hooks/event.ts";
 
 import BaseButton from "@/components/BaseButton.vue";
@@ -158,11 +157,10 @@ async function cancel() {
             ]"
       >
         <Tooltip title="关闭">
-          <Icon @click="close"
+          <IconIonCloseOutline @click="close"
                 v-if="showClose"
                 class="close hvr-grow cursor-pointer"
-                width="24" color="#929596"
-                icon="ion:close-outline"/>
+                width="24" color="#929596"/>
         </Tooltip>
         <div class="modal-header" v-if="header">
           <div class="title">{{ props.title }}</div>
diff --git a/src/pages/pc/components/list/List.vue b/src/pages/pc/components/list/List.vue
index 339afe79..844aef6b 100644
--- a/src/pages/pc/components/list/List.vue
+++ b/src/pages/pc/components/list/List.vue
@@ -124,13 +124,16 @@ defineExpose({scrollBottom})
         <div class="right">
           <BaseIcon
               @click="delItem(item)"
-              title="删除" icon="fluent:delete-24-regular"/>
+              title="删除">
+            <IconFluentDelete24Regular/>
+          </BaseIcon>
           <div
               @mousedown="draggable = true"
               @mouseup="draggable = false"
           >
-            <BaseIcon
-                icon="carbon:move"/>
+            <BaseIcon>
+              <IconCarbonMove/>
+            </BaseIcon>
           </div>
         </div>
       </div>
diff --git a/src/pages/pc/index.vue b/src/pages/pc/index.vue
index aaca153e..bcf0970d 100644
--- a/src/pages/pc/index.vue
+++ b/src/pages/pc/index.vue
@@ -2,7 +2,6 @@
 
 import {ShortcutKey} from "@/types/types.ts";
 import Logo from "@/pages/pc/components/Logo.vue";
-import {Icon} from "@iconify/vue";
 import {useSettingStore} from "@/stores/setting.ts";
 import {useRouter} from "vue-router";
 import useTheme from "@/hooks/theme.ts";
@@ -23,41 +22,33 @@ const {toggleTheme} = useTheme()
     <div class="aside anim fixed" :class="{'expand':settingStore.sideExpand}">
       <div class="top">
         <Logo v-if="settingStore.sideExpand"/>
-<!--        <div class="row" @click="router.push('/home')">-->
-<!--          <Icon icon="iconoir:home"/>-->
-<!--          <span v-if="settingStore.sideExpand">主页</span>-->
-<!--        </div>-->
         <div class="row" @click="router.push('/word')">
-          <Icon icon="material-symbols-light:dictionary-outline-sharp"/>
-          <!--          <Icon icon="streamline:dictionary-language-book"/>-->
+          <IconMaterialSymbolsLightDictionaryOutlineSharp/>
           <span v-if="settingStore.sideExpand">单词</span>
         </div>
         <div class="row" @click="router.push('/article')">
-          <Icon icon="ph:article-ny-times"/>
+          <IconPhArticleNyTimes/>
           <span v-if="settingStore.sideExpand">文章</span>
         </div>
         <div class="row" @click="router.push('/setting')">
-          <Icon icon="uil:setting"/>
+          <IconUilSetting/>
           <span v-if="settingStore.sideExpand">设置</span>
         </div>
-        <!--        <div class="row" @click="router.push('/article2')">-->
-        <!--          <Icon icon="healthicons:i-exam-multiple-choice-outline"/>-->
-        <!--          <span v-if="settingStore.sideExpand">试卷</span>-->
-        <!--        </div>-->
-        <!--        <div class="row">-->
-        <!--          <Icon icon="mdi-light:forum"/>-->
-        <!--          <span v-if="settingStore.sideExpand">社区</span>-->
-        <!--        </div>-->
       </div>
       <div class="bottom flex justify-evenly ">
         <BaseIcon
-            @click="settingStore.sideExpand = !settingStore.sideExpand"
-            :icon="settingStore.sideExpand?'formkit:left':'formkit:right'"/>
+            @click="settingStore.sideExpand = !settingStore.sideExpand">
+          <IconFormkitLeft v-if="settingStore.sideExpand"/>
+          <IconFormkitRight v-else/>
+        </BaseIcon>
         <BaseIcon
             v-if="settingStore.sideExpand"
             :title="`切换主题(${settingStore.shortcutKeyMap[ShortcutKey.ToggleTheme]})`"
             @click="toggleTheme"
-            :icon="settingStore.theme === 'light' ? 'ep:moon' : 'tabler:sun'"/>
+        >
+          <IconEpMoon v-if="settingStore.theme === 'light'"/>
+          <IconTablerSun v-else/>
+        </BaseIcon>
       </div>
     </div>
     <div class="flex-1 z-1 relative">
diff --git a/src/pages/pc/word/DictDetail.vue b/src/pages/pc/word/DictDetail.vue
index b0ed3a25..37479f4b 100644
--- a/src/pages/pc/word/DictDetail.vue
+++ b/src/pages/pc/word/DictDetail.vue
@@ -21,6 +21,7 @@ import BaseInput from "@/pages/pc/components/base/BaseInput.vue";
 import Textarea from "@/pages/pc/components/base/Textarea.vue";
 import FormItem from "@/pages/pc/components/base/form/FormItem.vue";
 import Form from "@/pages/pc/components/base/form/Form.vue";
+import DeleteIcon from "@/components/icon/DeleteIcon.vue";
 
 const runtimeStore = useRuntimeStore()
 const base = useBaseStore()
@@ -241,15 +242,17 @@ defineRender(() => {
                                       <BaseIcon
                                           class="option-icon"
                                           onClick={() => editWord(val.item)}
-                                          title="编辑"
-                                          icon="tabler:edit"/>
+                                          title="编辑">
+                                        <IconTablerEdit/>
+                                      </BaseIcon>
                                       <PopConfirm title="确认删除？"
                                                   onConfirm={() => delWord(val.item.id)}
                                       >
                                         <BaseIcon
                                             class="option-icon"
-                                            title="删除"
-                                            icon="solar:trash-bin-minimalistic-linear"/>
+                                            title="删除">
+                                          <DeleteIcon/>
+                                        </BaseIcon>
                                       </PopConfirm>
 
                                     </div>
diff --git a/src/pages/pc/word/DictList.vue b/src/pages/pc/word/DictList.vue
index 9d6a9e54..f62c9e53 100644
--- a/src/pages/pc/word/DictList.vue
+++ b/src/pages/pc/word/DictList.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {useNav} from "@/utils";
+import {groupBy, useNav} from "@/utils";
 import BasePage from "@/pages/pc/components/BasePage.vue";
 import {DictResource} from "@/types/types.ts";
 import {useRuntimeStore} from "@/stores/runtime.ts";
@@ -12,7 +12,6 @@ import BackIcon from "@/pages/pc/components/BackIcon.vue";
 import DictGroup from "@/pages/pc/components/list/DictGroup.vue";
 import {useBaseStore} from "@/stores/base.ts";
 import {useRouter} from "vue-router";
-import {groupBy} from "@/utils";
 import {dictionaryResources} from "@/assets/dictionary.ts";
 import {computed} from "vue";
 import {getDefaultDict} from "@/types/func.ts";
@@ -87,7 +86,9 @@ const searchList = computed<any[]>(() => {
           <span class="page-title absolute w-full center">词典列表</span>
           <BaseIcon @click="showSearchInput = true"
                     class="z-1"
-                    icon="fluent:search-24-regular"/>
+                    icon="fluent:search-24-regular">
+            <IconFluentSearch24Regular/>
+          </BaseIcon>
         </div>
       </div>
       <div class="mt-4" v-if="searchKey">
diff --git a/src/pages/pc/word/Statistics.vue b/src/pages/pc/word/Statistics.vue
index 59e0569c..f598c678 100644
--- a/src/pages/pc/word/Statistics.vue
+++ b/src/pages/pc/word/Statistics.vue
@@ -4,7 +4,6 @@ import {useBaseStore} from "@/stores/base.ts";
 import BaseButton from "@/components/BaseButton.vue";
 import {ShortcutKey, Statistics} from "@/types/types.ts";
 import {emitter, EventKey, useEvents} from "@/utils/eventBus.ts";
-import {Icon} from '@iconify/vue';
 import {useSettingStore} from "@/stores/setting.ts";
 import {usePracticeStore} from "@/stores/practice.ts";
 import dayjs from "dayjs";
@@ -131,7 +130,7 @@ function options(emitType: string) {
              style="background: rgb(254,236,236)">
           <div class="text-3xl">{{ statStore.wrong }}</div>
           <div class="center gap-2">
-            <Icon icon="iconamoon:close" class="text-2xl"/>
+            <IconIconamoonClose class="text-2xl"/>
             错词
           </div>
         </div>
@@ -139,7 +138,7 @@ function options(emitType: string) {
              style="background: rgb(231,248,241)">
           <div class="text-3xl">{{ statStore.total - statStore.wrong }}</div>
           <div class="center gap-2">
-            <Icon icon="tabler:check" class="text-2xl"/>
+            <IconTablerCheck class="text-2xl"/>
             正确
           </div>
         </div>
diff --git a/src/pages/pc/word/StudyWord.vue b/src/pages/pc/word/StudyWord.vue
index d1f34b38..19cfa2e9 100644
--- a/src/pages/pc/word/StudyWord.vue
+++ b/src/pages/pc/word/StudyWord.vue
@@ -12,7 +12,6 @@ import useTheme from "@/hooks/theme.ts";
 import {getCurrentStudyWord, useWordOptions} from "@/hooks/dict.ts";
 import {_getDictDataByUrl, cloneDeep, shuffle} from "@/utils";
 import {useRoute, useRouter} from "vue-router";
-import {Icon} from "@iconify/vue";
 import Footer from "@/pages/pc/word/components/Footer.vue";
 import Panel from "@/pages/pc/components/Panel.vue";
 import BaseIcon from "@/components/BaseIcon.vue";
@@ -361,7 +360,7 @@ useEvents([
         <div class="center gap-2 cursor-pointer float-left"
              @click="prev"
              v-if="prevWord">
-          <Icon class="arrow" icon="bi:arrow-left" width="22"/>
+          <IconBiArrowLeft class="arrow" width="22"/>
           <Tooltip
               :title="`上一个(${settingStore.shortcutKeyMap[ShortcutKey.Previous]})`"
           >
@@ -376,7 +375,7 @@ useEvents([
           >
             <div class="word" :class="settingStore.dictation && 'word-shadow'">{{ nextWord.word }}</div>
           </Tooltip>
-          <Icon class="arrow" icon="bi:arrow-right" width="22"/>
+          <IconBiArrowRight class="arrow"  width="22"/>
         </div>
       </div>
       <TypeWord
@@ -411,27 +410,20 @@ useEvents([
           >
             <template v-slot:suffix="{item,index}">
               <BaseIcon
-                  v-if="!isWordCollect(item)"
-                  class="collect"
+                  :class="!isWordCollect(item)?'collect':'fill'"
                   @click.stop="toggleWordCollect(item)"
-                  title="收藏" icon="ph:star"/>
+                  :title="!isWordCollect(item) ? '收藏' : '取消收藏'">
+                <IconPhStar v-if="!isWordCollect(item)"/>
+                <IconPhStarFill v-else/>
+              </BaseIcon>
+
               <BaseIcon
-                  v-else
-                  class="fill"
-                  @click.stop="toggleWordCollect(item)"
-                  title="取消收藏" icon="ph:star-fill"/>
-              <BaseIcon
-                  v-if="!isWordSimple(item)"
-                  class="easy"
+                  :class="!isWordSimple(item)?'collect':'fill'"
                   @click.stop="toggleWordSimple(item)"
-                  title="标记为已掌握"
-                  icon="material-symbols:check-circle-outline-rounded"/>
-              <BaseIcon
-                  v-else
-                  class="fill"
-                  @click.stop="toggleWordSimple(item)"
-                  title="取消标记已掌握"
-                  icon="material-symbols:check-circle-rounded"/>
+                  :title="!isWordSimple(item) ? '标记为已掌握' : '取消标记已掌握'">
+                <IconMaterialSymbolsCheckCircleOutlineRounded v-if="!isWordSimple(item)"/>
+                <IconMaterialSymbolsCheckCircleRounded v-else/>
+              </BaseIcon>
             </template>
           </WordList>
           <Empty v-else/>
diff --git a/src/pages/pc/word/WordHomePage.vue b/src/pages/pc/word/WordHomePage.vue
index e7bc65c9..d23dc55e 100644
--- a/src/pages/pc/word/WordHomePage.vue
+++ b/src/pages/pc/word/WordHomePage.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import {useBaseStore} from "@/stores/base.ts";
-import {Icon} from '@iconify/vue'
 import {useRouter} from "vue-router";
 import BaseIcon from "@/components/BaseIcon.vue";
 import Dialog from "@/pages/pc/components/dialog/Dialog.vue";
@@ -17,6 +16,7 @@ import Toast from '@/pages/pc/components/base/toast/Toast.ts';
 import BaseButton from "@/components/BaseButton.vue";
 import {getDefaultDict} from "@/types/func.ts";
 import Slider from "@/pages/pc/components/base/Slider.vue";
+import DeleteIcon from "@/components/icon/DeleteIcon.vue";
 
 const store = useBaseStore()
 const router = useRouter()
@@ -134,12 +134,15 @@ const progressTextRight = $computed(() => {
         <div class="flex">
           <div class="bg-third px-3 h-14 rounded-md flex items-center ">
             <span @click="goDictDetail(store.sdict)"
-                  class="text-xl font-bold cursor-pointer">{{ store.sdict.name || '请选择词典开始学习' }}</span>
+                  class="text-lg font-bold cursor-pointer">{{ store.sdict.name || '请选择词典开始学习' }}</span>
             <BaseIcon title="切换词典"
-                      :icon="store.sdict.name ? 'gg:arrows-exchange' : 'fluent:add-20-filled'"
-                      class="ml-4"
-                      @click="router.push('/dict-list')"
-            />
+                       class="ml-4"
+                       @click="router.push('/dict-list')"
+
+            >
+              <IconGgArrowsExchange v-if="store.sdict.name"/>
+              <IconFluentAdd20Filled v-else/>
+            </BaseIcon>
           </div>
         </div>
         <div class="">
@@ -152,6 +155,7 @@ const progressTextRight = $computed(() => {
         <div class="text-sm text-align-end">
           预计完成日期：{{ _getAccomplishDate(store.sdict.words.length, store.sdict.perDayStudyNumber) }}
         </div>
+
       </div>
 
       <div class="w-3/10 flex flex-col justify-evenly">
@@ -186,7 +190,7 @@ const progressTextRight = $computed(() => {
           <!--        <BaseButton size="large" @click="startStudy">-->
           <div class="flex items-center gap-2">
             <span>开始学习</span>
-            <Icon icon="icons8:right-round" class="text-2xl"/>
+            <IconIcons8RightRound class="text-2xl"/>
           </div>
         </BaseButton>
       </div>
@@ -197,7 +201,9 @@ const progressTextRight = $computed(() => {
         <div class="title">我的词典</div>
         <div class="flex gap-4 items-center">
           <PopConfirm title="确认删除所有选中词典？" @confirm="handleBatchDel" v-if="selectIds.length">
-            <BaseIcon class="del" title="删除" icon="solar:trash-bin-minimalistic-linear"/>
+            <BaseIcon class="del" title="删除">
+              <DeleteIcon/>
+            </BaseIcon>
           </PopConfirm>
 
           <div class="color-blue cursor-pointer" v-if="store.word.bookList.length > 3"
diff --git a/src/pages/pc/word/components/Footer.vue b/src/pages/pc/word/components/Footer.vue
index 309a8dad..99697498 100644
--- a/src/pages/pc/word/components/Footer.vue
+++ b/src/pages/pc/word/components/Footer.vue
@@ -5,7 +5,6 @@ import {usePracticeStore} from "@/stores/practice.ts";
 import {useSettingStore} from "@/stores/setting.ts";
 import {ShortcutKey, StudyData} from "@/types/types.ts";
 import BaseIcon from "@/components/BaseIcon.vue";
-import {Icon} from "@iconify/vue";
 import Tooltip from "@/pages/pc/components/base/Tooltip.vue";
 import Progress from '@/pages/pc/components/base/Progress.vue'
 
@@ -63,7 +62,7 @@ const progress = $computed(() => {
 <template>
   <div class="footer" :class="!settingStore.showToolbar && 'hide'">
     <Tooltip :title="settingStore.showToolbar?'收起':'展开'">
-      <Icon icon="icon-park-outline:down"
+      <IconIconParkOutlineDown
             @click="settingStore.showToolbar = !settingStore.showToolbar"
             class="arrow"
             :class="!settingStore.showToolbar && 'down'"
@@ -101,48 +100,46 @@ const progress = $computed(() => {
         </div>
         <div class="flex  gap-2  justify-center items-center">
           <BaseIcon
-              v-if="!isSimple"
-              class="collect"
+              :class="!isSimple?'collect':'fill'"
               @click="$emit('toggleSimple')"
-              :title="`标记为已掌握(${settingStore.shortcutKeyMap[ShortcutKey.ToggleSimple]})`"
-              icon="material-symbols:check-circle-outline-rounded"/>
-          <BaseIcon
-              v-else
-              class="fill"
-              @click="$emit('toggleSimple')"
-              :title="`取消标记已掌握(${settingStore.shortcutKeyMap[ShortcutKey.ToggleSimple]})`"
-              icon="material-symbols:check-circle-rounded"/>
+              :title="(!isSimple ? '标记为已掌握' : '取消标记已掌握')+`(${settingStore.shortcutKeyMap[ShortcutKey.ToggleSimple]})`">
+            <IconMaterialSymbolsCheckCircleOutlineRounded v-if="!isSimple"/>
+            <IconMaterialSymbolsCheckCircleRounded v-else/>
+          </BaseIcon>
 
           <BaseIcon
-              v-if="!isCollect"
-              class="collect"
-              @click="$emit('toggleCollect')"
-              :title="`收藏(${settingStore.shortcutKeyMap[ShortcutKey.ToggleCollect]})`"
-              icon="ph:star"/>
-          <BaseIcon
-              v-else
-              @click="$emit('toggleCollect')"
-              :title="`取消收藏(${settingStore.shortcutKeyMap[ShortcutKey.ToggleCollect]})`"
-              icon="ph:star-fill"/>
-
+              :class="!isCollect?'collect':'fill'"
+              @click.stop="$emit('toggleCollect')"
+              :title="(!isCollect ? '收藏' : '取消收藏')+`(${settingStore.shortcutKeyMap[ShortcutKey.ToggleCollect]})`">
+            <IconPhStar v-if="!isCollect"/>
+            <IconPhStarFill v-else/>
+          </BaseIcon>
           <BaseIcon
               @click="emit('skip')"
-              :title="`跳过(${settingStore.shortcutKeyMap[ShortcutKey.Next]})`"
-              icon="icon-park-outline:go-ahead"/>
+              :title="`跳过(${settingStore.shortcutKeyMap[ShortcutKey.Next]})`">
+            <IconIconParkOutlineGoAhead/>
+          </BaseIcon>
 
           <BaseIcon
               @click="settingStore.dictation = !settingStore.dictation"
               :title="`开关默写模式(${settingStore.shortcutKeyMap[ShortcutKey.ToggleDictation]})`"
-              :icon="['majesticons:eye-off-line','mdi:eye-outline'][settingStore.dictation?0:1]"/>
+          >
+            <IconMajesticonsEyeOffLine v-if="settingStore.dictation"/>
+            <IconMdiEyeOutline v-else/>
+          </BaseIcon>
 
-          <BaseIcon :icon="['mdi:translate','mdi:translate-off'][settingStore.translate?0:1]"
-                    :title="`开关释义显示(${settingStore.shortcutKeyMap[ShortcutKey.ToggleShowTranslate]})`"
-                    @click="settingStore.translate = !settingStore.translate"/>
+          <BaseIcon
+              :title="`开关释义显示(${settingStore.shortcutKeyMap[ShortcutKey.ToggleShowTranslate]})`"
+              @click="settingStore.translate = !settingStore.translate">
+            <IconMdiTranslate v-if="settingStore.translate"/>
+            <IconMdiTranslateOff v-else/>
+          </BaseIcon>
 
           <BaseIcon
               @click="settingStore.showPanel = !settingStore.showPanel"
-              :title="`单词本(${settingStore.shortcutKeyMap[ShortcutKey.TogglePanel]})`"
-              icon="tdesign:menu-unfold"/>
+              :title="`单词本(${settingStore.shortcutKeyMap[ShortcutKey.TogglePanel]})`">
+            <IconTdesignMenuUnfold/>
+          </BaseIcon>
         </div>
       </div>
     </div>
diff --git a/tsconfig.json b/tsconfig.json
index 2b824183..ff33889a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -29,6 +29,7 @@
     "types": [
       "vite/client",
       "unplugin-vue-macros/macros-global",
+      "unplugin-vue-components/types"  // 让 TS 识别自动导入组件
     ],
     "baseUrl": "src",
     //This is because TypeScript does not resolve webpack aliases automatically.
diff --git a/vite.config.ts b/vite.config.ts
index 3bbfebc8..4722cd3a 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,4 +1,4 @@
-import {defineConfig, UserConfig} from 'vite'
+import {defineConfig} from 'vite'
 import Vue from '@vitejs/plugin-vue'
 import VueJsx from "@vitejs/plugin-vue-jsx";
 import {resolve} from 'path'
@@ -8,6 +8,9 @@ import {getLastCommit} from "git-last-commit";
 import UnoCSS from 'unocss/vite'
 import VueMacros from 'unplugin-vue-macros/vite'
 import {Plugin as importToCDN} from 'vite-plugin-cdn-import'
+import Icons from 'unplugin-icons/vite'
+import Components from 'unplugin-vue-components/vite'
+import IconsResolver from 'unplugin-icons/resolver'
 
 function pathResolve(dir: string) {
   return resolve(__dirname, ".", dir)
@@ -29,6 +32,18 @@ export default defineConfig(() => {
               vueJsx: VueJsx(), // 如果需要
             },
           }),
+          Components({
+            resolvers: [
+              // 自动解析 <IconMdiHome /> 这种组件名
+              IconsResolver({
+                prefix: 'Icon', // 默认前缀
+              }),
+            ],
+          }),
+          Icons({
+            autoInstall: true,
+            compiler: 'vue3',
+          }),
           UnoCSS(),
           lifecycle === 'report' ?
             visualizer({
@@ -39,24 +54,7 @@ export default defineConfig(() => {
               open: true //如果存在本地服务端口，将在打包后自动展示
             }) : null,
           SlidePlugin(),
-          importToCDN({
-            // modules: [
-            //   {
-            //     name: 'vue',
-            //     var: 'Vue',
-            //     path: `https://type-words.oss-cn-shenzhen.aliyuncs.com/vue.global.prod.min.js`
-            //   },
-            //   {
-            //     name: 'vue-router',
-            //     var: 'VueRouter',
-            //     path: `https://type-words.oss-cn-shenzhen.aliyuncs.com/vue-router.global.prod.min.js`
-            //   },
-            //   {
-            //     name: 'axios',
-            //     var: 'axios',
-            //     path: 'https://type-words.oss-cn-shenzhen.aliyuncs.com/axios.min.js'
-            //   },
-            // ]
+          lifecycle === 'build' ? importToCDN({
             modules: [
               {
                 name: 'vue',
@@ -74,11 +72,11 @@ export default defineConfig(() => {
                 path: 'https://2study.top/axios.min.js'
               },
             ]
-          })
+          }) : null
         ],
         build: {
           rollupOptions: {
-            external: ['axios'],// 使用全局的 axios。因为百度翻译库内部用了0.19版本的axios，会被打包到代码里面
+            external: lifecycle === 'build' ? ['axios'] : [],// 使用全局的 axios。因为百度翻译库内部用了0.19版本的axios，会被打包到代码里面
           }
         },
         define: {