fix Bug or esLink formatting

src/layout/components/Header/index.vue

@@ -1,26 +1,31 @@
 <template>
-  <div class="layout-header" :class="{'layout-header-light':!(navTheme == 'header-dark')}">
+  <div class="layout-header" :class="{ 'layout-header-light': !(navTheme == 'header-dark') }">
     <!--顶部菜单-->
-    <div class="layout-header-left" v-if="navMode==='horizontal'">
-      <AsideMenu v-model:collapsed="collapsed" mode="horizontal" class="n-menu-horizontal-light"/>
+    <div class="layout-header-left" v-if="navMode === 'horizontal'">
+      <AsideMenu v-model:collapsed="collapsed" mode="horizontal" class="n-menu-horizontal-light" />
     </div>
     <!--左侧菜单-->
     <div class="layout-header-left" v-else>
       <!-- 菜单收起 -->
-      <div class="ml-1 layout-header-trigger layout-header-trigger-min"
-           @click="() => $emit('update:collapsed', !collapsed)">
+      <div
+        class="ml-1 layout-header-trigger layout-header-trigger-min"
+        @click="() => $emit('update:collapsed', !collapsed)"
+      >
         <n-icon size="18" v-if="collapsed">
-          <MenuUnfoldOutlined/>
+          <MenuUnfoldOutlined />
         </n-icon>
         <n-icon size="18" v-else>
-          <MenuFoldOutlined/>
+          <MenuFoldOutlined />
         </n-icon>
       </div>
       <!-- 刷新 -->
-      <div class="mr-1 layout-header-trigger layout-header-trigger-min" v-if="headerSetting.isReload"
-           @click="reloadPage">
+      <div
+        class="mr-1 layout-header-trigger layout-header-trigger-min"
+        v-if="headerSetting.isReload"
+        @click="reloadPage"
+      >
         <n-icon size="18">
-          <ReloadOutlined/>
+          <ReloadOutlined />
         </n-icon>
       </div>
       <!-- 面包屑 -->
@@ -28,29 +33,39 @@
         <template v-for="routeItem in breadcrumbList" :key="routeItem.name">
           <n-breadcrumb-item>
             <n-dropdown
-                v-if="routeItem.children.length"
-                :options="routeItem.children"
-                @select="dropdownSelect"
+              v-if="routeItem.children.length"
+              :options="routeItem.children"
+              @select="dropdownSelect"
             >
-                <span class="link-text">
-                  <component v-if="crumbsSetting.showIcon && routeItem.meta.icon" :is="routeItem.meta.icon"></component>
-                  {{ routeItem.meta.title }}
-                </span>
-            </n-dropdown>
-            <span class="link-text" v-else>
-                <component v-if="crumbsSetting.showIcon && routeItem.meta.icon" :is="routeItem.meta.icon"></component>
+              <span class="link-text">
+                <component
+                  v-if="crumbsSetting.showIcon && routeItem.meta.icon"
+                  :is="routeItem.meta.icon"
+                />
                 {{ routeItem.meta.title }}
               </span>
+            </n-dropdown>
+            <span class="link-text" v-else>
+              <component
+                v-if="crumbsSetting.showIcon && routeItem.meta.icon"
+                :is="routeItem.meta.icon"
+              />
+              {{ routeItem.meta.title }}
+            </span>
           </n-breadcrumb-item>
         </template>
       </n-breadcrumb>
     </div>
     <div class="layout-header-right">
-      <div class="layout-header-trigger layout-header-trigger-min" v-for="item in iconList" :key="item.icon.name">
+      <div
+        class="layout-header-trigger layout-header-trigger-min"
+        v-for="item in iconList"
+        :key="item.icon.name"
+      >
         <n-tooltip placement="bottom">
           <template #trigger>
             <n-icon size="18">
-              <component :is="item.icon" v-on="item.eventObject || {}"/>
+              <component :is="item.icon" v-on="item.eventObject || {}" />
             </n-icon>
           </template>
           <span>{{ item.tips }}</span>
@@ -61,7 +76,7 @@
         <n-tooltip placement="bottom">
           <template #trigger>
             <n-icon size="18">
-              <component :is="fullscreenIcon" @click="toggleFullScreen"/>
+              <component :is="fullscreenIcon" @click="toggleFullScreen" />
             </n-icon>
           </template>
           <span>全屏</span>
@@ -74,7 +89,7 @@
             <n-avatar>
               {{ username }}
               <template #icon>
-                <UserOutlined/>
+                <UserOutlined />
               </template>
             </n-avatar>
           </div>
@@ -85,7 +100,7 @@
         <n-tooltip placement="bottom-end">
           <template #trigger>
             <n-icon size="18" style="font-weight: bold">
-              <SettingOutlined/>
+              <SettingOutlined />
             </n-icon>
           </template>
           <span>项目配置</span>
@@ -94,330 +109,322 @@
     </div>
   </div>
   <!--项目配置-->
-  <ProjectSetting ref="drawerSetting"/>
+  <ProjectSetting ref="drawerSetting" />
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, toRefs, ref, computed, unref } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
-import components from './components'
-import { NDialogProvider, useDialog, useMessage, useNotification } from 'naive-ui'
-import { TABS_ROUTES } from '@/store/mutation-types'
-import { useUserStore } from '@/store/modules/user'
-import { useLockscreenStore } from '@/store/modules/lockscreen'
-import ProjectSetting from './ProjectSetting.vue'
-import { AsideMenu } from '@/layout/components/Menu'
-import { useProjectSetting } from "@/hooks/setting/useProjectSetting";
+  import { defineComponent, reactive, toRefs, ref, computed, unref } from 'vue';
+  import { useRouter, useRoute } from 'vue-router';
+  import components from './components';
+  import { NDialogProvider, useDialog, useMessage } from 'naive-ui';
+  import { TABS_ROUTES } from '@/store/mutation-types';
+  import { useUserStore } from '@/store/modules/user';
+  import { useLockscreenStore } from '@/store/modules/lockscreen';
+  import ProjectSetting from './ProjectSetting.vue';
+  import { AsideMenu } from '@/layout/components/Menu';
+  import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
 
-export default defineComponent({
-  name: 'PageHeader',
-  components: { ...components, NDialogProvider, ProjectSetting, AsideMenu },
-  props: {
-    collapsed: {
-      type: Boolean
-    }
-  },
-  setup(props) {
-    const userStore = useUserStore()
-    const useLockscreen = useLockscreenStore()
-    const message = useMessage()
-    const notification = useNotification()
-    const dialog = useDialog()
-    const {
-      getNavMode,
-      getNavTheme,
-      getHeaderSetting,
-      getMenuSetting,
-      getCrumbsSetting
-    } = useProjectSetting()
+  export default defineComponent({
+    name: 'PageHeader',
+    components: { ...components, NDialogProvider, ProjectSetting, AsideMenu },
+    props: {
+      collapsed: {
+        type: Boolean,
+      },
+    },
+    setup(props) {
+      const userStore = useUserStore();
+      const useLockscreen = useLockscreenStore();
+      const message = useMessage();
+      const dialog = useDialog();
+      const { getNavMode, getNavTheme, getHeaderSetting, getMenuSetting, getCrumbsSetting } =
+        useProjectSetting();
 
-    const { username } = userStore?.info || {}
+      const { username } = userStore?.info || {};
 
-    const drawerSetting = ref()
+      const drawerSetting = ref();
 
-    const state = reactive({
-      username: username || '',
-      fullscreenIcon: 'FullscreenOutlined',
-      navMode: getNavMode,
-      navTheme: getNavTheme,
-      headerSetting: getHeaderSetting,
-      crumbsSetting: getCrumbsSetting,
-    })
+      const state = reactive({
+        username: username || '',
+        fullscreenIcon: 'FullscreenOutlined',
+        navMode: getNavMode,
+        navTheme: getNavTheme,
+        headerSetting: getHeaderSetting,
+        crumbsSetting: getCrumbsSetting,
+      });
 
-    const getChangeStyle = computed(() => {
-      const { collapsed } = props
-      const { minMenuWidth, menuWidth }: any = unref(getMenuSetting)
-      return {
-        'left': collapsed ? `${ minMenuWidth }px` : `${ menuWidth }px`,
-        'width': `calc(100% - ${ collapsed ? `${ minMenuWidth }px` : `${ menuWidth }px` })`
-      }
-    })
+      const getChangeStyle = computed(() => {
+        const { collapsed } = props;
+        const { minMenuWidth, menuWidth }: any = unref(getMenuSetting);
+        return {
+          left: collapsed ? `${minMenuWidth}px` : `${menuWidth}px`,
+          width: `calc(100% - ${collapsed ? `${minMenuWidth}px` : `${menuWidth}px`})`,
+        };
+      });
 
-    const router = useRouter()
-    const route = useRoute()
+      const router = useRouter();
+      const route = useRoute();
 
-    const generator: any = (routerMap, parent) => {
-      return routerMap.map((item, key) => {
-        const currentMenu = {
-          ...item,
-          label: item.meta.title,
-          key: item.name,
-          disabled: item.path === '/',
-        }
-        // 是否有子菜单，并递归处理
-        if (item.children && item.children.length > 0) {
-          // Recursion
-          currentMenu.children = generator(item.children, currentMenu)
-        }
-        return currentMenu
-      })
-    }
+      const generator: any = (routerMap) => {
+        return routerMap.map((item) => {
+          const currentMenu = {
+            ...item,
+            label: item.meta.title,
+            key: item.name,
+            disabled: item.path === '/',
+          };
+          // 是否有子菜单，并递归处理
+          if (item.children && item.children.length > 0) {
+            // Recursion
+            currentMenu.children = generator(item.children, currentMenu);
+          }
+          return currentMenu;
+        });
+      };
 
-    const breadcrumbList = computed(() => {
-      return generator(route.matched)
-    })
+      const breadcrumbList = computed(() => {
+        return generator(route.matched);
+      });
 
-    const dropdownSelect = (key) => {
-      router.push({ name: key })
-    }
+      const dropdownSelect = (key) => {
+        router.push({ name: key });
+      };
 
-    // 刷新页面
-    const reloadPage = () => {
-      router.push({
-        path: '/redirect' + unref(route).fullPath
-      })
-    }
+      // 刷新页面
+      const reloadPage = () => {
+        router.push({
+          path: '/redirect' + unref(route).fullPath,
+        });
+      };
 
-    // 退出登录
-    const doLogout = () => {
-      dialog.info({
-        title: '提示',
-        content: '您确定要退出登录吗',
-        positiveText: '确定',
-        negativeText: '取消',
-        onPositiveClick: () => {
-          userStore.logout().then((res) => {
-            message.success('成功退出登录')
-            // 移除标签页
-            localStorage.removeItem(TABS_ROUTES)
-            router
+      // 退出登录
+      const doLogout = () => {
+        dialog.info({
+          title: '提示',
+          content: '您确定要退出登录吗',
+          positiveText: '确定',
+          negativeText: '取消',
+          onPositiveClick: () => {
+            userStore.logout().then(() => {
+              message.success('成功退出登录');
+              // 移除标签页
+              localStorage.removeItem(TABS_ROUTES);
+              router
                 .replace({
                   name: 'Login',
                   query: {
-                    redirect: route.fullPath
-                  }
+                    redirect: route.fullPath,
+                  },
                 })
-                .finally(() => location.reload())
-          })
-        },
-        onNegativeClick: () => {
+                .finally(() => location.reload());
+            });
+          },
+          onNegativeClick: () => {},
+        });
+      };
 
-        }
-      })
-    }
-
-    // 切换全屏图标
-    const toggleFullscreenIcon = () =>
+      // 切换全屏图标
+      const toggleFullscreenIcon = () =>
         (state.fullscreenIcon =
-            document.fullscreenElement !== null ? 'FullscreenExitOutlined' : 'FullscreenOutlined')
+          document.fullscreenElement !== null ? 'FullscreenExitOutlined' : 'FullscreenOutlined');
 
-    // 监听全屏切换事件
-    document.addEventListener('fullscreenchange', toggleFullscreenIcon)
+      // 监听全屏切换事件
+      document.addEventListener('fullscreenchange', toggleFullscreenIcon);
 
-    // 全屏切换
-    const toggleFullScreen = () => {
-      if (!document.fullscreenElement) {
-        document.documentElement.requestFullscreen()
-      } else {
-        if (document.exitFullscreen) {
-          document.exitFullscreen()
+      // 全屏切换
+      const toggleFullScreen = () => {
+        if (!document.fullscreenElement) {
+          document.documentElement.requestFullscreen();
+        } else {
+          if (document.exitFullscreen) {
+            document.exitFullscreen();
+          }
         }
-      }
-    }
+      };
 
-    // 图标列表
-    const iconList = [
-      {
-        icon: 'SearchOutlined',
-        tips: '搜索'
-      },
-      {
-        icon: 'GithubOutlined',
-        tips: 'github',
-        eventObject: {
-          click: () => window.open('https://github.com/jekip/naive-ui-admin')
-        }
-      },
-      {
-        icon: 'LockOutlined',
-        tips: '锁屏',
-        eventObject: {
-          click: () => useLockscreen.setLock(true)
+      // 图标列表
+      const iconList = [
+        {
+          icon: 'SearchOutlined',
+          tips: '搜索',
+        },
+        {
+          icon: 'GithubOutlined',
+          tips: 'github',
+          eventObject: {
+            click: () => window.open('https://github.com/jekip/naive-ui-admin'),
+          },
+        },
+        {
+          icon: 'LockOutlined',
+          tips: '锁屏',
+          eventObject: {
+            click: () => useLockscreen.setLock(true),
+          },
+        },
+      ];
+      const avatarOptions = [
+        {
+          label: '个人设置',
+          key: 1,
+        },
+        {
+          label: '退出登录',
+          key: 2,
+        },
+      ];
+
+      //头像下拉菜单
+      const avatarSelect = (key) => {
+        switch (key) {
+          case 1:
+            router.push({ name: 'Setting' });
+            break;
+          case 2:
+            doLogout();
+            break;
         }
+      };
+
+      function openSetting() {
+        const { openDrawer } = drawerSetting.value;
+        openDrawer();
       }
-    ]
-    const avatarOptions = [
-      {
-        label: '个人设置',
-        key: 1
-      },
-      {
-        label: '退出登录',
-        key: 2
-      },
-    ]
 
-    //头像下拉菜单
-    const avatarSelect = (key) => {
-      switch (key) {
-        case 1:
-          router.push({ name: 'Setting' })
-          break;
-        case 2:
-          doLogout()
-          break;
-      }
-    }
-
-    function openSetting() {
-      const { openDrawer } = drawerSetting.value
-      openDrawer()
-    }
-
-    return {
-      ...toRefs(state),
-      iconList,
-      toggleFullScreen,
-      doLogout,
-      route,
-      dropdownSelect,
-      avatarOptions,
-      getChangeStyle,
-      avatarSelect,
-      breadcrumbList,
-      reloadPage,
-      drawerSetting,
-      openSetting,
-    }
-  }
-})
+      return {
+        ...toRefs(state),
+        iconList,
+        toggleFullScreen,
+        doLogout,
+        route,
+        dropdownSelect,
+        avatarOptions,
+        getChangeStyle,
+        avatarSelect,
+        breadcrumbList,
+        reloadPage,
+        drawerSetting,
+        openSetting,
+      };
+    },
+  });
 </script>
 
 <style lang="less" scoped>
-.layout-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0;
-  height: @header-height;
-  box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
-  transition: all .2s ease-in-out;
-  width: 100%;
-  z-index: 11;
-  //color: #fff;
-
-  //.n-icon {
-  //  color: #fff
-  //}
-
-  &-left {
+  .layout-header {
     display: flex;
+    justify-content: space-between;
     align-items: center;
+    padding: 0;
+    height: @header-height;
+    box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
+    transition: all 0.2s ease-in-out;
+    width: 100%;
+    z-index: 11;
+    //color: #fff;
 
-    ::v-deep(.ant-breadcrumb span:last-child .link-text) {
-      color: #515a6e;
-    }
+    //.n-icon {
+    //  color: #fff
+    //}
 
-    ::v-deep(.n-breadcrumb .n-breadcrumb-item:last-child .n-breadcrumb-item__link) {
-      color: #fff;
-    }
-
-    .n-breadcrumb {
-      display: inline-block;
-    }
-  }
-
-  &-right {
-    display: flex;
-    align-items: center;
-    margin-right: 20px;
-
-    .avatar {
+    &-left {
       display: flex;
       align-items: center;
-      height: 64px;
+
+      ::v-deep(.ant-breadcrumb span:last-child .link-text) {
+        color: #515a6e;
+      }
+
+      ::v-deep(.n-breadcrumb .n-breadcrumb-item:last-child .n-breadcrumb-item__link) {
+        color: #fff;
+      }
+
+      .n-breadcrumb {
+        display: inline-block;
+      }
     }
 
-    > * {
+    &-right {
+      display: flex;
+      align-items: center;
+      margin-right: 20px;
+
+      .avatar {
+        display: flex;
+        align-items: center;
+        height: 64px;
+      }
+
+      > * {
+        cursor: pointer;
+      }
+    }
+
+    &-trigger {
+      display: inline-block;
+      width: 64px;
+      height: 64px;
+      text-align: center;
       cursor: pointer;
+      transition: all 0.2s ease-in-out;
+
+      .n-icon {
+        display: flex;
+        align-items: center;
+        height: 64px;
+        line-height: 64px;
+      }
+
+      &:hover {
+        background: hsla(0, 0%, 100%, 0.08);
+      }
+
+      .anticon {
+        font-size: 16px;
+        color: #515a6e;
+      }
+    }
+
+    &-trigger-min {
+      width: auto;
+      padding: 0 12px;
     }
   }
 
-  &-trigger {
-    display: inline-block;
-    width: 64px;
-    height: 64px;
-    text-align: center;
-    cursor: pointer;
-    transition: all 0.2s ease-in-out;
+  .layout-header-light {
+    background: #fff;
+    color: #515a6e;
 
     .n-icon {
-      display: flex;
-      align-items: center;
-      height: 64px;
-      line-height: 64px;
-    }
-
-    &:hover {
-      background: hsla(0, 0%, 100%, .08);
-    }
-
-    .anticon {
-      font-size: 16px;
       color: #515a6e;
     }
-  }
 
-  &-trigger-min {
-    width: auto;
-    padding: 0 12px;
-  }
-}
+    .layout-header-left {
+      ::v-deep(.n-breadcrumb .n-breadcrumb-item:last-child .n-breadcrumb-item__link) {
+        color: #515a6e;
+      }
+    }
 
-.layout-header-light {
-  background: #fff;
-  color: #515a6e;
-
-  .n-icon {
-    color: #515a6e
-  }
-
-  .layout-header-left {
-    ::v-deep(.n-breadcrumb .n-breadcrumb-item:last-child .n-breadcrumb-item__link) {
-      color: #515a6e;
+    .layout-header-trigger {
+      &:hover {
+        background: #f8f8f9;
+      }
     }
   }
 
-  .layout-header-trigger {
-    &:hover {
-      background: #f8f8f9;
-    }
+  .layout-header-fix {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 200px;
+    z-index: 11;
   }
-}
 
-.layout-header-fix {
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 200px;
-  z-index: 11;
-}
-
-//::v-deep(.menu-router-link) {
-//  color: #515a6e;
-//
-//  &:hover {
-//    color: #1890ff;
-//  }
-//}
+  //::v-deep(.menu-router-link) {
+  //  color: #515a6e;
+  //
+  //  &:hover {
+  //    color: #1890ff;
+  //  }
+  //}
 </style>