style: SidebarItem 组件

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: 12px;
-  margin-right: 8px;
+  font-size: 18px;
 }
+
 .simple-mode {
   &.first-level {
     :deep(.el-sub-menu) {

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")

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"
+        }
       }
     ]
   }

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;

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
     /**