From 5885706988893365473028ffd0e346d3e488db26 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=95=9D=E8=A3=B3?= <1923740402@qq.com>
Date: Mon, 21 Mar 2022 23:15:41 +0800
Subject: [PATCH] perf: menu (#220)

perf: menu
---
 src/layout/components/navbar.vue                 | 11 ++++++-----
 src/layout/components/notice/index.vue           |  6 +++---
 .../components/search/components/SearchModal.vue |  4 ++--
 src/layout/components/sidebar/horizontal.vue     | 16 +++++++++-------
 src/layout/components/sidebar/mixNav.vue         | 16 ++++++++--------
 src/layout/components/sidebar/sidebarItem.vue    | 11 +++++++----
 src/layout/components/tag/index.vue              | 13 ++++++-------
 src/style/sidebar.scss                           |  7 ++-----
 8 files changed, 43 insertions(+), 41 deletions(-)

diff --git a/src/layout/components/navbar.vue b/src/layout/components/navbar.vue
index 720b322b9..156b9b4f9 100644
--- a/src/layout/components/navbar.vue
+++ b/src/layout/components/navbar.vue
@@ -82,10 +82,11 @@ function translationEn() {
             <el-dropdown-item
               :style="getDropdownItemStyle(locale, 'en')"
               @click="translationEn"
-              ><el-icon class="check-en" v-show="locale === 'en'"
-                ><IconifyIconOffline icon="check" /></el-icon
-              >English</el-dropdown-item
             >
+              <span class="check-en" v-show="locale === 'en'">
+                <IconifyIconOffline icon="check" /> </span
+              >English
+            </el-dropdown-item>
           </el-dropdown-menu>
         </template>
       </el-dropdown>
@@ -106,13 +107,13 @@ function translationEn() {
           </el-dropdown-menu>
         </template>
       </el-dropdown>
-      <el-icon
+      <span
         class="el-icon-setting"
         :title="t('buttons.hssystemSet')"
         @click="onPanel"
       >
         <IconifyIconOffline icon="setting" />
-      </el-icon>
+      </span>
     </div>
   </div>
 </template>
diff --git a/src/layout/components/notice/index.vue b/src/layout/components/notice/index.vue
index e864cd053..6aa78854a 100644
--- a/src/layout/components/notice/index.vue
+++ b/src/layout/components/notice/index.vue
@@ -24,9 +24,9 @@ function tabClick() {
   <el-dropdown ref="dropdownDom" trigger="click" placement="bottom-end">
     <span class="dropdown-badge">
       <el-badge :value="noticesNum" :max="99">
-        <el-icon class="header-notice-icon"
-          ><IconifyIconOffline icon="bell"
-        /></el-icon>
+        <span class="header-notice-icon">
+          <IconifyIconOffline icon="bell" />
+        </span>
       </el-badge>
     </span>
     <template #dropdown>
diff --git a/src/layout/components/search/components/SearchModal.vue b/src/layout/components/search/components/SearchModal.vue
index 4bd12190e..5587076cf 100644
--- a/src/layout/components/search/components/SearchModal.vue
+++ b/src/layout/components/search/components/SearchModal.vue
@@ -139,9 +139,9 @@ onKeyStroke("ArrowDown", handleDown);
       @input="handleSearch"
     >
       <template #prefix>
-        <el-icon class="el-input__icon">
+        <span class="el-input__icon">
           <IconifyIconOffline icon="search" />
-        </el-icon>
+        </span>
       </template>
     </el-input>
     <div class="search-result-container">
diff --git a/src/layout/components/sidebar/horizontal.vue b/src/layout/components/sidebar/horizontal.vue
index adab83598..ed6649957 100644
--- a/src/layout/components/sidebar/horizontal.vue
+++ b/src/layout/components/sidebar/horizontal.vue
@@ -102,15 +102,17 @@ function translationEn() {
             <el-dropdown-item
               :style="getDropdownItemStyle(locale, 'zh')"
               @click="translationCh"
-              ><el-icon class="check-zh" v-show="locale === 'zh'"
-                ><IconifyIconOffline icon="check" /></el-icon
-              >简体中文</el-dropdown-item
             >
+              <span class="check-zh" v-show="locale === 'zh'">
+                <IconifyIconOffline icon="check" /> </span
+              >简体中文
+            </el-dropdown-item>
             <el-dropdown-item
               :style="getDropdownItemStyle(locale, 'en')"
               @click="translationEn"
-              ><el-icon class="check-en" v-show="locale === 'en'"
-                ><IconifyIconOffline icon="check" /></el-icon
+            >
+              <span class="check-en" v-show="locale === 'en'">
+                <IconifyIconOffline icon="check" /> </span
               >English</el-dropdown-item
             >
           </el-dropdown-menu>
@@ -134,13 +136,13 @@ function translationEn() {
           </el-dropdown-menu>
         </template>
       </el-dropdown>
-      <el-icon
+      <span
         class="el-icon-setting"
         :title="t('buttons.hssystemSet')"
         @click="onPanel"
       >
         <IconifyIconOffline icon="setting" />
-      </el-icon>
+      </span>
     </div>
   </div>
 </template>
diff --git a/src/layout/components/sidebar/mixNav.vue b/src/layout/components/sidebar/mixNav.vue
index 556ab6d77..7308bbacf 100644
--- a/src/layout/components/sidebar/mixNav.vue
+++ b/src/layout/components/sidebar/mixNav.vue
@@ -119,9 +119,9 @@ function translationEn() {
         :index="resolvePath(route) || route.redirect"
       >
         <template #title>
-          <el-icon v-show="route.meta.icon" :class="route.meta.icon">
+          <div v-show="route.meta.icon" :class="['el-icon', route.meta.icon]">
             <component :is="useRenderIcon(route.meta && route.meta.icon)" />
-          </el-icon>
+          </div>
           <span>{{ transformI18n(route.meta.title, route.meta.i18n) }}</span>
           <FontIcon
             v-if="route.meta.extraIcon"
@@ -149,15 +149,15 @@ function translationEn() {
             <el-dropdown-item
               :style="getDropdownItemStyle(locale, 'zh')"
               @click="translationCh"
-              ><el-icon class="check-zh" v-show="locale === 'zh'"
-                ><IconifyIconOffline icon="check" /></el-icon
+              ><span class="check-zh" v-show="locale === 'zh'"
+                ><IconifyIconOffline icon="check" /></span
               >简体中文</el-dropdown-item
             >
             <el-dropdown-item
               :style="getDropdownItemStyle(locale, 'en')"
               @click="translationEn"
-              ><el-icon class="check-en" v-show="locale === 'en'"
-                ><IconifyIconOffline icon="check" /></el-icon
+              ><span class="check-en" v-show="locale === 'en'"
+                ><IconifyIconOffline icon="check" /></span
               >English</el-dropdown-item
             >
           </el-dropdown-menu>
@@ -181,13 +181,13 @@ function translationEn() {
           </el-dropdown-menu>
         </template>
       </el-dropdown>
-      <el-icon
+      <span
         class="el-icon-setting"
         :title="t('buttons.hssystemSet')"
         @click="onPanel"
       >
         <IconifyIconOffline icon="setting" />
-      </el-icon>
+      </span>
     </div>
   </div>
 </template>
diff --git a/src/layout/components/sidebar/sidebarItem.vue b/src/layout/components/sidebar/sidebarItem.vue
index 7bd6a4073..08cb0eea7 100644
--- a/src/layout/components/sidebar/sidebarItem.vue
+++ b/src/layout/components/sidebar/sidebarItem.vue
@@ -148,7 +148,7 @@ function resolvePath(routePath) {
       :class="{ 'submenu-title-noDropdown': !isNest }"
       :style="getNoDropdownStyle"
     >
-      <el-icon v-show="props.item.meta.icon">
+      <div class="el-icon" v-show="props.item.meta.icon">
         <component
           :is="
             useRenderIcon(
@@ -157,7 +157,7 @@ function resolvePath(routePath) {
             )
           "
         />
-      </el-icon>
+      </div>
       <div
         v-if="
           !pureApp.sidebar.opened &&
@@ -216,11 +216,14 @@ function resolvePath(routePath) {
     popper-append-to-body
   >
     <template #title>
-      <el-icon v-show="props.item.meta.icon" :class="props.item.meta.icon">
+      <div
+        v-show="props.item.meta.icon"
+        :class="['el-icon', props.item.meta.icon]"
+      >
         <component
           :is="useRenderIcon(props.item.meta && props.item.meta.icon)"
         />
-      </el-icon>
+      </div>
       <span v-if="!menuMode">{{
         transformI18n(props.item.meta.title, props.item.meta.i18n)
       }}</span>
diff --git a/src/layout/components/tag/index.vue b/src/layout/components/tag/index.vue
index 45687b3e6..fd9a2932d 100644
--- a/src/layout/components/tag/index.vue
+++ b/src/layout/components/tag/index.vue
@@ -429,6 +429,7 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) {
 }
 
 function handleCommand(command: object) {
+  // @ts-expect-error
   const { key, item } = command;
   onClickDrop(key, item);
 }
@@ -663,7 +664,7 @@ const getContextMenuStyle = computed((): CSSProperties => {
           <router-link :to="item.path"
             >{{ transformI18n(item.meta.title, item.meta.i18n) }}
           </router-link>
-          <el-icon
+          <span
             v-if="
               iconIsActive(item, index) ||
               (index === activeIndex && index !== 0)
@@ -672,7 +673,7 @@ const getContextMenuStyle = computed((): CSSProperties => {
             @click.stop="deleteMenu(item)"
           >
             <IconifyIconOffline icon="close-bold" />
-          </el-icon>
+          </span>
           <div
             :ref="'schedule' + index"
             v-if="showModel !== 'card'"
@@ -710,13 +711,13 @@ const getContextMenuStyle = computed((): CSSProperties => {
     <!-- 右侧功能按钮 -->
     <ul class="right-button">
       <li>
-        <el-icon
+        <span
           :title="t('buttons.hsrefreshRoute')"
           class="el-icon-refresh-right rotate"
           @click="onFresh"
         >
           <IconifyIconOffline icon="refresh-right" />
-        </el-icon>
+        </span>
       </li>
       <li>
         <el-dropdown
@@ -724,9 +725,7 @@ const getContextMenuStyle = computed((): CSSProperties => {
           placement="bottom-end"
           @command="handleCommand"
         >
-          <el-icon>
-            <IconifyIconOffline icon="arrow-down" />
-          </el-icon>
+          <IconifyIconOffline icon="arrow-down" />
           <template #dropdown>
             <el-dropdown-menu>
               <el-dropdown-item
diff --git a/src/style/sidebar.scss b/src/style/sidebar.scss
index 1c028bb72..98b8df039 100644
--- a/src/style/sidebar.scss
+++ b/src/style/sidebar.scss
@@ -609,15 +609,12 @@ body[layout="vertical"] {
         }
       }
 
-      /* 无子菜单 */
+      /* 有无子菜单 */
+      .el-sub-menu__title,
       .el-menu-item [class^="el-icon"] {
         right: 5px;
       }
 
-      .el-sub-menu__title [class^="el-icon"] {
-        right: 2px;
-      }
-
       .submenu-title-noDropdown {
         background: transparent !important;
       }