From 2a3fb4c64b28e0a6debcee356db8ceae4b244e8c Mon Sep 17 00:00:00 2001
From: "chen.home" <1147347984@qq.com>
Date: Sat, 27 Aug 2022 23:27:02 +0800
Subject: [PATCH] =?UTF-8?q?style(header):=20=E4=BF=AE=E6=94=B9=E5=A4=B4?=
 =?UTF-8?q?=E9=83=A8=E5=9B=BE=E6=A0=87=E9=BB=98=E8=AE=A4=E5=80=BC=E5=A4=A7?=
 =?UTF-8?q?=E5=B0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/custom/EIcon.vue               | 20 ++++++++++++-------
 src/layouts/components/header/Breadcrumb.vue  |  2 +-
 .../components/header/CollapaseButton.vue     |  4 ++--
 src/layouts/components/header/DarkMode.vue    |  4 ++--
 src/layouts/components/header/FullScreen.vue  |  4 ++--
 src/layouts/components/header/Github.vue      |  2 +-
 src/layouts/components/header/Notices.vue     |  2 +-
 src/layouts/components/header/Reload.vue      |  2 +-
 src/layouts/components/header/Search.vue      |  2 +-
 src/layouts/components/header/Setting.vue     |  2 +-
 10 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/src/components/custom/EIcon.vue b/src/components/custom/EIcon.vue
index 393412e..573b47e 100644
--- a/src/components/custom/EIcon.vue
+++ b/src/components/custom/EIcon.vue
@@ -1,17 +1,23 @@
 <template>
-  <n-icon :size="props.size || 20" :depth="props.depth" :color="props.color">
+  <n-icon :size="props.size" :depth="props.depth" :color="props.color">
     <Icon :icon="props.icon" />
   </n-icon>
 </template>
 
 <script setup lang="ts">
 import { Icon } from '@iconify/vue';
-const props = defineProps<{
-  icon: string;
-  color?: string;
-  size?: number;
-  depth?: 1 | 2 | 3 | 4 | 5;
-}>();
+const props = withDefaults(
+  defineProps<{
+    icon: string;
+    color?: string;
+    size?: number;
+    depth?: 1 | 2 | 3 | 4 | 5;
+  }>(),
+  {
+    size: 18,
+    icon: 'icon-park-outline:baby-feet',
+  },
+);
 </script>
 
 <style scoped></style>
diff --git a/src/layouts/components/header/Breadcrumb.vue b/src/layouts/components/header/Breadcrumb.vue
index edb2c58..6b43493 100644
--- a/src/layouts/components/header/Breadcrumb.vue
+++ b/src/layouts/components/header/Breadcrumb.vue
@@ -17,7 +17,7 @@ const router = useRouter();
 const routeStore = useRouteStore();
 const { routerPush } = useAppRouter();
 const routes = computed(() => {
-  return routeStore.createBreadcrumbFromRoutes(router.currentRoute.value.name as string!, routeStore.userRoutes);
+  return routeStore.createBreadcrumbFromRoutes(router.currentRoute.value.name as string, routeStore.userRoutes);
 });
 </script>
 
diff --git a/src/layouts/components/header/CollapaseButton.vue b/src/layouts/components/header/CollapaseButton.vue
index a63139d..8ee90a4 100644
--- a/src/layouts/components/header/CollapaseButton.vue
+++ b/src/layouts/components/header/CollapaseButton.vue
@@ -1,7 +1,7 @@
 <template>
   <HeaderButton @click="appStore.toggleCollapse()">
-    <i-icon-park-outline-menu-unfold v-if="appStore.collapsed" class="text-18px" />
-    <i-icon-park-outline-menu-fold v-else class="text-18px" />
+    <i-icon-park-outline-menu-unfold v-if="appStore.collapsed" />
+    <i-icon-park-outline-menu-fold v-else />
   </HeaderButton>
 </template>
 
diff --git a/src/layouts/components/header/DarkMode.vue b/src/layouts/components/header/DarkMode.vue
index 832ee0c..92bd324 100644
--- a/src/layouts/components/header/DarkMode.vue
+++ b/src/layouts/components/header/DarkMode.vue
@@ -2,8 +2,8 @@
   <n-tooltip placement="bottom" trigger="hover">
     <template #trigger>
       <HeaderButton @click="appStore.toggleDarkMode()">
-        <i-icon-park-outline-moon v-if="appStore.darkMode" class="text-18px" />
-        <i-icon-park-outline-sun v-else class="text-18px" />
+        <i-icon-park-outline-moon v-if="appStore.darkMode" />
+        <i-icon-park-outline-sun v-else />
       </HeaderButton>
     </template>
     <span>切换主题模式</span>
diff --git a/src/layouts/components/header/FullScreen.vue b/src/layouts/components/header/FullScreen.vue
index 76302ef..9871db8 100644
--- a/src/layouts/components/header/FullScreen.vue
+++ b/src/layouts/components/header/FullScreen.vue
@@ -2,8 +2,8 @@
   <n-tooltip placement="bottom" trigger="hover">
     <template #trigger>
       <HeaderButton @click="appStore.toggleFullScreen()">
-        <i-icon-park-outline-off-screen-two v-if="appStore.fullScreen" class="text-18px" />
-        <i-icon-park-outline-full-screen-two v-else class="text-18px" />
+        <i-icon-park-outline-off-screen-two v-if="appStore.fullScreen" />
+        <i-icon-park-outline-full-screen-two v-else />
       </HeaderButton>
     </template>
     <span>全屏</span>
diff --git a/src/layouts/components/header/Github.vue b/src/layouts/components/header/Github.vue
index 4bb9fb0..85f4d46 100644
--- a/src/layouts/components/header/Github.vue
+++ b/src/layouts/components/header/Github.vue
@@ -2,7 +2,7 @@
   <n-tooltip placement="bottom" trigger="hover">
     <template #trigger>
       <HeaderButton @click="toMyGithub">
-        <i-icon-park-outline-github class="text-18px" />
+        <i-icon-park-outline-github />
       </HeaderButton>
     </template>
     <span>Github</span>
diff --git a/src/layouts/components/header/Notices.vue b/src/layouts/components/header/Notices.vue
index 7371460..d5ea2a4 100644
--- a/src/layouts/components/header/Notices.vue
+++ b/src/layouts/components/header/Notices.vue
@@ -5,7 +5,7 @@
         <template #trigger>
           <HeaderButton>
             <n-badge :value="massageCount" :max="99" style="color: unset">
-              <i-icon-park-outline-remind class="text-18px" />
+              <i-icon-park-outline-remind />
             </n-badge>
           </HeaderButton>
         </template>
diff --git a/src/layouts/components/header/Reload.vue b/src/layouts/components/header/Reload.vue
index cb7db60..86996a6 100644
--- a/src/layouts/components/header/Reload.vue
+++ b/src/layouts/components/header/Reload.vue
@@ -2,7 +2,7 @@
   <n-tooltip placement="bottom" trigger="hover">
     <template #trigger>
       <HeaderButton @click="handleReload">
-        <i-icon-park-outline-refresh class="text-18px" :class="{ 'animate-spin': loading }" />
+        <i-icon-park-outline-refresh :class="{ 'animate-spin': loading }" />
       </HeaderButton>
     </template>
     <span>刷新页面</span>
diff --git a/src/layouts/components/header/Search.vue b/src/layouts/components/header/Search.vue
index 6d337ea..536659a 100644
--- a/src/layouts/components/header/Search.vue
+++ b/src/layouts/components/header/Search.vue
@@ -2,7 +2,7 @@
   <n-tooltip placement="bottom" trigger="hover">
     <template #trigger>
       <HeaderButton @click="handleSearch">
-        <i-icon-park-outline-search class="text-18px" />
+        <i-icon-park-outline-search />
       </HeaderButton>
     </template>
     <span>搜索</span>
diff --git a/src/layouts/components/header/Setting.vue b/src/layouts/components/header/Setting.vue
index e1c15d6..4dcaf69 100644
--- a/src/layouts/components/header/Setting.vue
+++ b/src/layouts/components/header/Setting.vue
@@ -3,7 +3,7 @@
     <template #trigger>
       <HeaderButton @click="openSetting">
         <div>
-          <i-icon-park-outline-setting-two class="text-18px" />
+          <i-icon-park-outline-setting-two />
           <n-drawer v-model:show="drawerActive" :width="300">
             <n-drawer-content title="系统设置">这是系统设置，但是暂时还没有内容</n-drawer-content>
           </n-drawer>