From 10115a5331f4550fc381fedf84a93d18b895a363 Mon Sep 17 00:00:00 2001
From: xiangshu233 <xiangshu233@outlook.com>
Date: Sat, 2 Mar 2024 17:54:00 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20:recycle:=20=E7=A7=BB=E9=99=A4=20vi?=
 =?UTF-8?q?cons=20=E4=BD=BF=E7=94=A8=20unocss=20=E7=9A=84=20icons=20preset?=
 =?UTF-8?q?=20=E4=BB=A5=E8=8E=B7=E5=BE=97=E7=BA=AF=20css=20icon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                           |  4 +--
 pnpm-lock.yaml                         | 10 ++++++
 src/layout/index.vue                   |  5 +--
 src/router/modules.ts                  |  8 ++---
 src/views/dashboard/index.vue          |  1 -
 src/views/login/ForgetPasswordForm.vue | 14 ++------
 src/views/login/LoginForm.vue          | 18 +++-------
 src/views/login/LoginTitle.vue         |  4 +--
 src/views/login/RegisterForm.vue       | 46 ++++++--------------------
 src/views/my/index.vue                 | 29 ++++------------
 uno.config.ts                          | 13 +++++++-
 11 files changed, 55 insertions(+), 97 deletions(-)

diff --git a/package.json b/package.json
index 7f554da..d665b84 100644
--- a/package.json
+++ b/package.json
@@ -41,9 +41,6 @@
   "dependencies": {
     "@types/lodash-es": "^4.17.12",
     "@unocss/reset": "^0.58.5",
-    "@vicons/antd": "^0.12.0",
-    "@vicons/ionicons5": "^0.12.0",
-    "@vicons/utils": "^0.1.4",
     "@vueuse/core": "^10.7.0",
     "axios": "^1.4.0",
     "date-fns": "^3.0.6",
@@ -61,6 +58,7 @@
     "@antfu/eslint-config": "^2.6.3",
     "@commitlint/cli": "^18.4.3",
     "@commitlint/config-conventional": "^18.4.3",
+    "@iconify/json": "^2.2.188",
     "@types/fs-extra": "^11.0.4",
     "@types/mockjs": "^1.0.10",
     "@types/node": "^20.10.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e5be951..4c7a776 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -67,6 +67,9 @@ devDependencies:
   '@commitlint/config-conventional':
     specifier: ^18.4.3
     version: 18.4.3
+  '@iconify/json':
+    specifier: ^2.2.188
+    version: 2.2.188
   '@types/fs-extra':
     specifier: ^11.0.4
     version: 11.0.4
@@ -1292,6 +1295,13 @@ packages:
     resolution: {integrity: sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==}
     dev: true
 
+  /@iconify/json@2.2.188:
+    resolution: {integrity: sha512-gsJwZ60Vb5IrtjYu+Al4qMaML9ZKUnop6Gi0537ZcA6nEhe3Nb58WH4c6b1+mXOHwOkFlLA8AFBXJUHY5nKMdA==}
+    dependencies:
+      '@iconify/types': 2.0.0
+      pathe: 1.1.2
+    dev: true
+
   /@iconify/types@2.0.0:
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
     dev: true
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 63bbd3e..2bf2f53 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -23,9 +23,10 @@
         :key="menu.name"
         replace
         :to="menu.path"
-        :icon="(menu.meta?.icon as string)"
       >
-        {{ menu.meta?.title }}
+        <template #icon>
+          <i :class="menu.meta?.icon" />
+        </template>
       </van-tabbar-item>
     </van-tabbar>
   </div>
diff --git a/src/router/modules.ts b/src/router/modules.ts
index e5ec1b7..6f149f3 100644
--- a/src/router/modules.ts
+++ b/src/router/modules.ts
@@ -10,7 +10,7 @@ const routeModuleList: Array<RouteRecordRaw> = [
     component: Layout,
     meta: {
       title: '主控台',
-      icon: 'wap-home',
+      icon: 'i-simple-icons:atlassian',
     },
     children: [
       {
@@ -29,8 +29,8 @@ const routeModuleList: Array<RouteRecordRaw> = [
     redirect: '/message/index',
     component: Layout,
     meta: {
-      title: '消息',
-      icon: 'chat',
+      title: '图表',
+      icon: 'i-simple-icons:soundcharts',
     },
     children: [
       {
@@ -50,7 +50,7 @@ const routeModuleList: Array<RouteRecordRaw> = [
     component: Layout,
     meta: {
       title: '我的',
-      icon: 'manager',
+      icon: 'i-simple-icons:docsify',
     },
     children: [
       {
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index f09181e..aa228e5 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -5,7 +5,6 @@
       <div class="text-darkBlue dark:text-garyWhite mb-4 mt-12 text-center text-2xl font-black">
         {{ title }}
       </div>
-
       <div class="mb-6 mt-4 w-full">
         <van-swipe class="h-30" :autoplay="3000" :indicator-color="designStore.appTheme">
           <van-swipe-item
diff --git a/src/views/login/ForgetPasswordForm.vue b/src/views/login/ForgetPasswordForm.vue
index 635fc42..19d8ec1 100644
--- a/src/views/login/ForgetPasswordForm.vue
+++ b/src/views/login/ForgetPasswordForm.vue
@@ -8,9 +8,7 @@
       :rules="getFormRules.username"
     >
       <template #left-icon>
-        <Icon>
-          <UserOutlined />
-        </Icon>
+        <i class="i-ph:user-bold mr-2 text-lg" />
       </template>
     </van-field>
 
@@ -22,9 +20,7 @@
       :rules="getFormRules.mobile"
     >
       <template #left-icon>
-        <Icon>
-          <MobileOutlined />
-        </Icon>
+        <i class="i-ic:twotone-smartphone mr-2 text-lg" />
       </template>
     </van-field>
 
@@ -37,9 +33,7 @@
       :rules="getFormRules.sms"
     >
       <template #left-icon>
-        <Icon>
-          <EditOutlined />
-        </Icon>
+        <i class="i-material-symbols:edit-square-outline-rounded mr-2 text-lg" />
       </template>
       <template #button>
         <van-button size="small" type="primary">
@@ -72,8 +66,6 @@
 <script setup lang="ts">
 import { computed, reactive, ref, unref } from 'vue'
 import type { FormInstance } from 'vant'
-import { Icon } from '@vicons/utils'
-import { EditOutlined, MobileOutlined, UserOutlined } from '@vicons/antd'
 import { LoginStateEnum, useFormRules, useLoginState } from './useLogin'
 
 const { handleBackLogin, getLoginState } = useLoginState()
diff --git a/src/views/login/LoginForm.vue b/src/views/login/LoginForm.vue
index bdc786e..197d6a8 100644
--- a/src/views/login/LoginForm.vue
+++ b/src/views/login/LoginForm.vue
@@ -8,9 +8,7 @@
       :rules="getFormRules.username"
     >
       <template #left-icon>
-        <Icon>
-          <UserOutlined />
-        </Icon>
+        <i class="i-ph:user-bold mr-2 text-lg" />
       </template>
     </van-field>
     <van-field
@@ -23,17 +21,11 @@
       @click-right-icon="switchPassType = !switchPassType"
     >
       <template #left-icon>
-        <Icon>
-          <LockOutlined />
-        </Icon>
+        <i class="i-iconamoon:lock-bold mr-2 text-lg" />
       </template>
       <template #right-icon>
-        <Icon v-if="switchPassType">
-          <EyeInvisibleOutlined />
-        </Icon>
-        <Icon v-else>
-          <EyeOutlined />
-        </Icon>
+        <i v-if="switchPassType" class="i-mdi:eye-outline mr-2 text-lg" />
+        <i v-else class="i-mdi:eye-off mr-2 text-lg" />
       </template>
     </van-field>
 
@@ -71,8 +63,6 @@ import { computed, onMounted, reactive, ref, unref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { showFailToast, showLoadingToast, showSuccessToast } from 'vant'
 import type { FormInstance } from 'vant'
-import { Icon } from '@vicons/utils'
-import { EyeInvisibleOutlined, EyeOutlined, LockOutlined, UserOutlined } from '@vicons/antd'
 import { LoginStateEnum, useFormRules, useLoginState } from './useLogin'
 import { useUserStore } from '@/store/modules/user'
 import { ResultEnum } from '@/enums/httpEnum'
diff --git a/src/views/login/LoginTitle.vue b/src/views/login/LoginTitle.vue
index cca283f..f57e5f9 100644
--- a/src/views/login/LoginTitle.vue
+++ b/src/views/login/LoginTitle.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="flex flex-col items-center justify-center">
-    <div class="logo enter-y mb-2 mt-8">
+    <div class="logo enter-y mb-8 mt-8">
       <SvgIcon class="!h-30 !w-30" name="logo" />
     </div>
-    <div class="text-darkBlue dark:text-garyWhite enter-y mb-8 text-2xl font-black">
+    <div class="text-darkBlue dark:text-garyWhite enter-y mb-12 text-2xl font-black">
       {{ title }}
     </div>
   </div>
diff --git a/src/views/login/RegisterForm.vue b/src/views/login/RegisterForm.vue
index 2ceae1f..f0aa18c 100644
--- a/src/views/login/RegisterForm.vue
+++ b/src/views/login/RegisterForm.vue
@@ -9,9 +9,7 @@
         :rules="getFormRules.username"
       >
         <template #left-icon>
-          <Icon>
-            <UserOutlined />
-          </Icon>
+          <i class="i-ph:user-bold mr-2 text-lg" />
         </template>
       </van-field>
 
@@ -23,9 +21,7 @@
         :rules="getFormRules.mobile"
       >
         <template #left-icon>
-          <Icon>
-            <MobileOutlined />
-          </Icon>
+          <i class="i-ic:twotone-smartphone mr-2 text-lg" />
         </template>
       </van-field>
 
@@ -38,9 +34,7 @@
         :rules="getFormRules.sms"
       >
         <template #left-icon>
-          <Icon>
-            <EditOutlined />
-          </Icon>
+          <i class="i-material-symbols:edit-square-outline-rounded mr-2 text-lg" />
         </template>
         <template #button>
           <van-button size="small" type="primary">
@@ -59,17 +53,11 @@
         @click-right-icon="switchPassType = !switchPassType"
       >
         <template #left-icon>
-          <Icon>
-            <LockOutlined />
-          </Icon>
+          <i class="i-iconamoon:lock-bold mr-2 text-lg" />
         </template>
         <template #right-icon>
-          <Icon v-if="switchPassType">
-            <EyeInvisibleOutlined />
-          </Icon>
-          <Icon v-else>
-            <EyeOutlined />
-          </Icon>
+          <i v-if="switchPassType" class="i-mdi:eye-outline mr-2 text-lg" />
+          <i v-else class="i-mdi:eye-off mr-2 text-lg" />
         </template>
       </van-field>
 
@@ -83,17 +71,11 @@
         @click-right-icon="switchConfirmPassType = !switchConfirmPassType"
       >
         <template #left-icon>
-          <Icon>
-            <LockOutlined />
-          </Icon>
+          <i class="i-iconamoon:lock-bold mr-2 text-lg" />
         </template>
         <template #right-icon>
-          <Icon v-if="switchConfirmPassType">
-            <EyeInvisibleOutlined />
-          </Icon>
-          <Icon v-else>
-            <EyeOutlined />
-          </Icon>
+          <i v-if="switchConfirmPassType" class="i-mdi:eye-outline mr-2 text-lg" />
+          <i v-else class="i-mdi:eye-off mr-2 text-lg" />
         </template>
       </van-field>
 
@@ -135,15 +117,7 @@
 <script setup lang="ts">
 import { computed, reactive, ref, unref } from 'vue'
 import type { FormInstance } from 'vant'
-import { Icon } from '@vicons/utils'
-import {
-  EditOutlined,
-  EyeInvisibleOutlined,
-  EyeOutlined,
-  LockOutlined,
-  MobileOutlined,
-  UserOutlined,
-} from '@vicons/antd'
+
 import { LoginStateEnum, useFormRules, useLoginState } from './useLogin'
 
 const { handleBackLogin, getLoginState } = useLoginState()
diff --git a/src/views/my/index.vue b/src/views/my/index.vue
index b01b702..e457690 100644
--- a/src/views/my/index.vue
+++ b/src/views/my/index.vue
@@ -22,41 +22,31 @@
 
       <van-cell :border="false" title="个人信息" is-link to="/editUserInfo">
         <template #icon>
-          <Icon>
-            <IdcardFilled />
-          </Icon>
+          <i class="i-mingcute:idcard-fill mr-2 text-xl" />
         </template>
       </van-cell>
 
       <van-cell :border="false" title="账号与安全" is-link to="/accountSetting">
         <template #icon>
-          <Icon>
-            <Person />
-          </Icon>
+          <i class="i-material-symbols:account-box mr-2 text-xl" />
         </template>
       </van-cell>
 
       <van-cell :border="false" title="主题设置" is-link to="/themeSetting">
         <template #icon>
-          <Icon>
-            <ColorPalette />
-          </Icon>
+          <i class="i-material-symbols:palette mr-2 text-xl" />
         </template>
       </van-cell>
 
       <van-cell :border="false" title="隐私政策" is-link>
         <template #icon>
-          <Icon>
-            <DocumentText />
-          </Icon>
+          <i class="i-material-symbols:list-alt-rounded mr-2 text-xl" />
         </template>
       </van-cell>
 
       <van-cell :border="false" title="退出登录" is-link @click="showLogoutAction = true">
         <template #icon>
-          <Icon>
-            <LogOut />
-          </Icon>
+          <i class="i-solar:logout-3-bold mr-2 text-xl" />
         </template>
       </van-cell>
 
@@ -74,9 +64,6 @@
 
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
-import { Icon } from '@vicons/utils'
-import { IdcardFilled } from '@vicons/antd'
-import { ColorPalette, DocumentText, LogOut, Person } from '@vicons/ionicons5'
 import { showToast } from 'vant'
 import { useUserStore } from '@/store/modules/user'
 
@@ -102,7 +89,7 @@ const getUserCoverBg = computed(() => {
 </script>
 
 <style lang="less" scoped>
-  .my-bg {
+.my-bg {
   clip-path: inset(0 -55% 0 -55% round 0 0 100% 100%);
   background-size: cover;
 
@@ -125,9 +112,5 @@ const getUserCoverBg = computed(() => {
   &:active {
     background-color: var(--van-cell-active-color);
   }
-
-  .xicon {
-    margin-right: 10px;
-  }
 }
 </style>
diff --git a/uno.config.ts b/uno.config.ts
index d172f42..bfc365a 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -26,7 +26,7 @@ export default defineConfig({
 
     // 图标预设: https://unocss.dev/presets/icons
     presetIcons({
-      cdn: 'https://esm.sh/',
+      // cdn: 'https://esm.sh/',
       extraProperties: {
         'display': 'inline-block',
         'vertical-align': 'middle',
@@ -68,4 +68,15 @@ export default defineConfig({
     'text-overflow': 'overflow-hidden whitespace-nowrap text-ellipsis', // 文本溢出显示省略号
     'text-break': 'whitespace-normal break-all break-words', // 文本溢出换行
   },
+
+  // 由于 UnoCSS 在构建时工作，这意味着只会生成静态呈现的 icon 并将其发送到你的组件中
+  // 通过模板字符串 :class="menu.meta?.icon" 来动态生成 CSS 类名。
+  // 这个类名是在运行时计算的，UnoCSS 在构建时无法知道 menu.meta?.icon 的具体值，
+  // 因此无法生成对应的 CSS。为了解决这个问题，你可以使用 UnoCSS 的 safelist 选项来指定一些始终需要生成的 CSS 类。
+  // https://unocss.dev/guide/advanced#safelist
+  safelist: [
+    'i-simple-icons:atlassian',
+    'i-simple-icons:soundcharts',
+    'i-simple-icons:docsify',
+  ],
 })