From ce8c7360433dacd1ffc8ef475d5d902c4a7e4213 Mon Sep 17 00:00:00 2001
From: pany <939630029@qq.com>
Date: Sat, 8 Oct 2022 15:19:36 +0800
Subject: [PATCH] =?UTF-8?q?style:=20SidebarItem=20=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/Sidebar/SidebarItem.vue | 14 ++++++++------
 src/main.ts                                   |  8 ++++----
 src/router/index.ts                           | 16 ++++++++++++----
 src/styles/variables.css                      |  2 +-
 types/vue-router.d.ts                         |  2 +-
 5 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
index 16eb2bc..0684c8f 100644
--- a/src/layout/components/Sidebar/SidebarItem.vue
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -72,7 +72,7 @@ const resolvePath = (routePath: string) => {
       <SidebarItemLink v-if="theOnlyOneChild.meta" :to="resolvePath(theOnlyOneChild.path)">
         <el-menu-item :index="resolvePath(theOnlyOneChild.path)">
           <svg-icon v-if="theOnlyOneChild.meta.svgIcon" :name="theOnlyOneChild.meta.svgIcon" />
-          <component v-else-if="theOnlyOneChild.meta.elIcon" class="el-icon" :is="theOnlyOneChild.meta.elIcon" />
+          <component v-else-if="theOnlyOneChild.meta.elIcon" :is="theOnlyOneChild.meta.elIcon" class="el-icon" />
           <template v-if="theOnlyOneChild.meta.title" #title>
             {{ theOnlyOneChild.meta.title }}
           </template>
@@ -82,7 +82,7 @@ const resolvePath = (routePath: string) => {
     <el-sub-menu v-else :index="resolvePath(props.item.path)" popper-append-to-body>
       <template #title>
         <svg-icon v-if="props.item.meta && props.item.meta.svgIcon" :name="props.item.meta.svgIcon" />
-        <component v-else-if="props.item.meta && props.item.meta.elIcon" class="el-icon" :is="props.item.meta.elIcon" />
+        <component v-else-if="props.item.meta && props.item.meta.elIcon" :is="props.item.meta.elIcon" class="el-icon" />
         <span v-if="props.item.meta && props.item.meta.title">{{ props.item.meta.title }}</span>
       </template>
       <template v-if="props.item.children">
@@ -101,15 +101,17 @@ const resolvePath = (routePath: string) => {
 
 <style lang="scss" scoped>
 .svg-icon {
-  margin-right: 8px;
   min-width: 1em;
-  font-size: 16px;
+  margin-right: 12px;
+  font-size: 18px;
 }
+
 .el-icon {
   width: 1em;
-  height: 1em;
-  margin-right: 8px;
+  margin-right: 12px;
+  font-size: 18px;
 }
+
 .simple-mode {
   &.first-level {
     :deep(.el-sub-menu) {
diff --git a/src/main.ts b/src/main.ts
index a0f60eb..802ec9b 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -18,15 +18,15 @@ import "@/styles/index.scss"
 const app = createApp(App)
 /** Element-Plus 组件完整引入 */
 app.use(ElementPlus)
+/** 注册所有 Element-Plus Icon */
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component)
+}
 /** 加载全局 SVG */
 loadSvg(app)
 /** 自定义指令 */
 Object.keys(directives).forEach((key) => {
   app.directive(key, (directives as { [key: string]: Directive })[key])
 })
-/** Element Plus Icons */
-for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-  app.component(key, component)
-}
 
 app.use(store).use(router).mount("#app")
diff --git a/src/router/index.ts b/src/router/index.ts
index 3378d93..9b1ea67 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -127,13 +127,17 @@ export const constantRoutes: RouteRecordRaw[] = [
                 path: "menu1-2-1",
                 component: () => import("@/views/menu/menu1/menu1-2/menu1-2-1/index.vue"),
                 name: "Menu1-2-1",
-                meta: { title: "menu1-2-1" }
+                meta: {
+                  title: "menu1-2-1"
+                }
               },
               {
                 path: "menu1-2-2",
                 component: () => import("@/views/menu/menu1/menu1-2/menu1-2-2/index.vue"),
                 name: "Menu1-2-2",
-                meta: { title: "menu1-2-2" }
+                meta: {
+                  title: "menu1-2-2"
+                }
               }
             ]
           },
@@ -141,7 +145,9 @@ export const constantRoutes: RouteRecordRaw[] = [
             path: "menu1-3",
             component: () => import("@/views/menu/menu1/menu1-3/index.vue"),
             name: "Menu1-3",
-            meta: { title: "menu1-3" }
+            meta: {
+              title: "menu1-3"
+            }
           }
         ]
       },
@@ -149,7 +155,9 @@ export const constantRoutes: RouteRecordRaw[] = [
         path: "menu2",
         component: () => import("@/views/menu/menu2/index.vue"),
         name: "Menu2",
-        meta: { title: "menu2" }
+        meta: {
+          title: "menu2"
+        }
       }
     ]
   }
diff --git a/src/styles/variables.css b/src/styles/variables.css
index 864b589..2c71c15 100644
--- a/src/styles/variables.css
+++ b/src/styles/variables.css
@@ -9,7 +9,7 @@
   --v3-navigationbar-height: 50px;
   /** Sidebar 组件 */
   --v3-sidebar-width: 220px;
-  --v3-sidebar-hide-width: 54px;
+  --v3-sidebar-hide-width: 58px;
   --v3-sidebar-menu-item-height: 60px;
   --v3-sidebar-menu-tip-line-bg-color: #66b1ff;
   --v3-sidebar-menu-bg-color: #001428;
diff --git a/types/vue-router.d.ts b/types/vue-router.d.ts
index f23307f..1866fa8 100644
--- a/types/vue-router.d.ts
+++ b/types/vue-router.d.ts
@@ -11,7 +11,7 @@ declare module "vue-router" {
      */
     svgIcon?: string
     /**
-     * 设置该路由的图标，集成 Element Plus 的 icon 库
+     * 设置该路由的图标，直接使用 Element Plus 的 Icon（与 svgIcon 同时设置时，svgIcon 将优先生效）
      */
     elIcon?: string
     /**