feat: 🎸 重构layout

src/components/Echart/index.vue

@@ -55,9 +55,7 @@ export default defineComponent({
 
     onMounted(() => {
       // 设置异步，不然图例一开始的宽度不正确。
-      setTimeout(() => {
-        initChart()
-      }, 10)
+      initChart()
       __resizeHandler = debounce(() => {
         if (chart) {
           chart.resize()

src/components/Hamburger/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div @click="toggleCollapsed(!collapsed)">
     <svg
       :class="{'is-active': !collapsed}"
       class="hamburger"
@@ -7,7 +7,6 @@
       xmlns="http://www.w3.org/2000/svg"
       width="64"
       height="64"
-      @click="toggleCollapsed(!collapsed)"
     >
       <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
     </svg>

src/components/Logo/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <router-link :class="['app-logo', 'app-logo-' + theme]" to="/">
+  <router-link class="app-logo" to="/">
     <img :src="require('@/assets/img/logo.png')">
     <div v-if="show" class="sidebar-title">{{ title }}</div>
   </router-link>
@@ -15,10 +15,6 @@ export default defineComponent({
     collapsed: {
       type: Boolean as PropType<boolean>,
       required: true
-    },
-    theme: {
-      type: String as PropType<'light' | 'dark'>,
-      default: 'dark'
     }
   },
   setup(props) {
@@ -47,13 +43,14 @@ export default defineComponent({
 .app-logo {
   display: flex;
   align-items: center;
-  padding-left: 18px;
   cursor: pointer;
   height: @topSilderHeight;
   width: 100%;
+  background-color: @menuBg;
   img {
     width: 37px;
     height: 37px;
+    margin-left: 14px;
   }
   .sidebar-title {
     font-size: 14px;
@@ -61,17 +58,8 @@ export default defineComponent({
     transition: .5s;
     margin-left: 12px;
   }
-}
-.app-logo-dark {
-  background-color: @menuBg;
   .sidebar-title {
     color: #fff;
   }
 }
-.app-logo-light {
-  background-color: #fff;
-  .sidebar-title {
-    color: #000;
-  }
-}
 </style>

src/components/Screenfull/index.vue

@@ -1,12 +1,9 @@
 <template>
-  <a-tooltip placement="bottom">
-    <template #title>
-      <span>{{ isFullscreen ? '退出全屏' : '全屏' }}</span>
-    </template>
-    <div style="height: 100%;">
-      <svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="click" />
+  <el-tooltip placement="bottom" :content="isFullscreen ? '退出全屏' : '全屏'">
+    <div style="height: 100%;" class="screenfull-svg" @click="click">
+      <svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" />
     </div>
-  </a-tooltip>
+  </el-tooltip>
 </template>
 
 <script lang="ts">

src/components/ScrollPane/index.vue

@@ -1,25 +1,20 @@
 <template>
-  <scrollbar
+  <el-scrollbar
     ref="scrollContainer"
-    :show-x="false"
     class="scroll-container"
     @wheel="handleScroll"
   >
     <slot />
-  </scrollbar>
+  </el-scrollbar>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref, unref, nextTick } from 'vue'
-import Scrollbar from '_c/Scrollbar/index.vue'
 import { useScrollTo } from '@/hooks/useScrollTo'
 const tagAndTagSpacing = 4 // tagAndTagSpacing
 
 export default defineComponent({
   name: 'ScrollPane',
-  components: {
-    Scrollbar
-  },
   setup() {
     const scrollContainer = ref<HTMLElement | null>(null)
 
@@ -112,11 +107,5 @@ export default defineComponent({
   position: relative;
   overflow: hidden;
   width: 100%;
-    .el-scrollbar__bar {
-      bottom: 0px;
-    }
-    // .el-scrollbar__wrap {
-    //   height: 49px;
-    // }
 }
 </style>

src/components/Setting/index.vue

@@ -0,0 +1,165 @@
+<template>
+  <div class="setting__content">
+    <div class="setting__title">导航栏布局</div>
+    <div class="icon__wrap">
+      <span :class="{'icon--active': layout==='Classic'}" @click="setLayout('Classic')">
+        <el-tooltip effect="dark" content="经典布局" placement="bottom">
+          <svg-icon icon-class="layout-classic" class="setting-svg-icon" />
+        </el-tooltip>
+      </span>
+      <span :class="{'icon--active': layout==='LeftTop'}" @click="setLayout('LeftTop')">
+        <el-tooltip effect="dark" content="左侧顶部布局" placement="bottom">
+          <svg-icon icon-class="layout-topLeft" class="setting-svg-icon" />
+        </el-tooltip>
+      </span>
+      <span :class="{'icon--active': layout==='Top'}" @click="setLayout('Top')">
+        <el-tooltip effect="dark" content="顶部布局" placement="bottom">
+          <svg-icon icon-class="layout-top" class="setting-svg-icon" />
+        </el-tooltip>
+      </span>
+    </div>
+
+    <div class="setting__title">侧边菜单主题</div>
+
+    <div class="setting__title">顶部菜单主题</div>
+
+    <div class="setting__title">界面功能</div>
+    <div class="setting__item">
+      <span>固定顶部操作栏</span>
+      <el-switch v-model="fixedNavbar" @change="setFixedNavbar" />
+    </div>
+
+    <div class="setting__title">界面显示</div>
+    <div class="setting__item">
+      <span>顶部操作栏</span>
+      <el-switch v-model="navbar" @change="setNavbar" />
+    </div>
+    <div class="setting__item">
+      <span>侧边栏缩收</span>
+      <el-switch v-model="hamburger" @change="setHamburger" />
+    </div>
+    <div class="setting__item">
+      <span>面包屑</span>
+      <el-switch v-model="breadcrumb" @change="setBreadcrumb" />
+    </div>
+    <div class="setting__item">
+      <span>全屏按钮</span>
+      <el-switch v-model="screenfull" @change="setScreenfull" />
+    </div>
+    <div class="setting__item">
+      <span>用户头像</span>
+      <el-switch v-model="userInfo" @change="setUserInfo" />
+    </div>
+    <div class="setting__item">
+      <span>标签页</span>
+      <el-switch v-model="tagsView" @change="setTagsView" />
+    </div>
+    <div class="setting__item">
+      <span>LOGO</span>
+      <el-switch v-model="logo" @change="setLogo" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, ref } from 'vue'
+import { appStore } from '_p/index/store/modules/app'
+export default defineComponent({
+  name: 'Setting',
+  setup() {
+    const layout = computed(() => appStore.layout)
+    function setLayout(mode: 'Classic' | 'LeftTop' | 'Top' | 'Test') {
+      if (mode === layout.value) return
+      appStore.SetLayout(mode)
+    }
+
+    const fixedNavbar = ref<boolean>(appStore.fixedNavbar)
+    function setFixedNavbar(fixedNavbar: boolean) {
+      appStore.SetFixedNavbar(fixedNavbar)
+    }
+
+    const navbar = ref<boolean>(appStore.showNavbar)
+    function setNavbar(navbar: boolean) {
+      appStore.SetShowNavbar(navbar)
+    }
+
+    const hamburger = ref<boolean>(appStore.showHamburger)
+    function setHamburger(hamburger: boolean) {
+      appStore.SetHamburger(hamburger)
+    }
+
+    const breadcrumb = ref<boolean>(appStore.showBreadcrumb)
+    function setBreadcrumb(breadcrumb: boolean) {
+      appStore.SetBreadcrumb(breadcrumb)
+    }
+
+    const screenfull = ref<boolean>(appStore.showScreenfull)
+    function setScreenfull(screenfull: boolean) {
+      appStore.SetScreenfull(screenfull)
+    }
+
+    const userInfo = ref<boolean>(appStore.showUserInfo)
+    function setUserInfo(userInfo: boolean) {
+      appStore.SetUserInfo(userInfo)
+    }
+
+    const tagsView = ref<boolean>(appStore.showTags)
+    function setTagsView(tagsView: boolean) {
+      appStore.SetShowTags(tagsView)
+    }
+
+    const logo = ref<boolean>(appStore.showLogo)
+    function setLogo(logo: boolean) {
+      appStore.SetShowLogo(logo)
+    }
+
+    return {
+      layout, setLayout,
+      fixedNavbar, setFixedNavbar,
+      navbar, setNavbar,
+      hamburger, setHamburger,
+      breadcrumb, setBreadcrumb,
+      screenfull, setScreenfull,
+      userInfo, setUserInfo,
+      tagsView, setTagsView,
+      logo, setLogo
+    }
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.setting__content {
+  background: @appBg;
+  padding: 0 20px;
+  .setting__title {
+    text-align: center;
+    padding-top: 20px;
+  }
+  .icon__wrap {
+    text-align: center;
+    margin-top: 15px;
+    &>span {
+      display: inline-block;
+      padding: 5px 10px;
+      border: 2px solid @appBg;
+      .setting-svg-icon {
+        font-size: 60px;
+        cursor: pointer;
+      }
+      .setting-svg-icon:nth-of-type(2) {
+        margin: 0 10px;
+      }
+    }
+    .icon--active {
+      border: 2px solid #018ffb;
+      border-radius: 4px;
+    }
+  }
+  .setting__item {
+    display: flex;
+    justify-content: space-between;
+    margin: 16px 0;
+  }
+}
+</style>

src/components/Sider/Item.vue

@@ -1,11 +1,9 @@
 <template>
-  <div>
-    <i v-if="icon.includes('el-icon')" :class="[icon, 'sub-el-icon', 'anticon']" />
-    <svg-icon v-else :icon-class="icon" class="anticon" />
-    <slot name="title">
-      <span class="anticon-item">{{ title }}</span>
-    </slot>
-  </div>
+  <i v-if="icon.includes('el-icon')" :class="[icon, 'sub-el-icon', 'anticon']" />
+  <svg-icon v-else :icon-class="icon" class="anticon" />
+  <slot name="title">
+    <span class="anticon-item">{{ title }}</span>
+  </slot>
 </template>
 
 <script lang="ts">

src/components/Sider/Link.vue

@@ -1,27 +0,0 @@
-<template>
-  <a v-if="isExternal(to)" :href="to" target="_blank" rel="noopener">
-    <slot />
-  </a>
-  <router-link v-else :to="to">
-    <slot />
-  </router-link>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from 'vue'
-import { isExternal } from '@/utils/validate'
-
-export default defineComponent({
-  props: {
-    to: {
-      type: String as PropType<string>,
-      required: true
-    }
-  },
-  setup() {
-    return {
-      isExternal
-    }
-  }
-})
-</script>

src/components/Sider/SiderItem.vue

@@ -2,9 +2,9 @@
   <template v-if="!item.meta?.hidden">
     <template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.meta?.alwaysShow">
       <el-menu-item :index="resolvePath(onlyOneChild.path)">
-        <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" :title="onlyOneChild.meta.title" />
+        <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" />
         <template #title>
-          {{ onlyOneChild.meta.title }}
+          <span class="anticon-item">{{ onlyOneChild.meta.title }}</span>
         </template>
       </el-menu-item>
     </template>
@@ -30,10 +30,9 @@ import type { RouteRecordRaw } from 'vue-router'
 import path from 'path'
 import { isExternal } from '@/utils/validate'
 import Item from './Item.vue'
-import AppLink from './Link.vue'
 export default defineComponent({
   name: 'SiderItem',
-  components: { Item, AppLink },
+  components: { Item },
   props: {
     // route object
     item: {

src/components/Sider/index.vue

@@ -1,27 +1,25 @@
 <template>
-  <!-- <div :class="{'has-logo': showLogo}" class="sidebar-container"> -->
-  <!-- <el-scrollbar class="menu-wrap"> -->
-  <el-menu
-    :default-active="activeMenu"
-    :collapse="collapsed"
-    :unique-opened="false"
-    :background-color="variables.menuBg"
-    :text-color="variables.menuText"
-    :active-text-color="variables.menuActiveText"
-    mode="vertical"
-    class="sidebar-container"
-    :class="{'sidebar__wrap--collapsed': collapsed}"
-    @select="selectMenu"
-  >
-    <sider-item
-      v-for="route in routers"
-      :key="route.path"
-      :item="route"
-      :base-path="route.path"
-    />
-  </el-menu>
-  <!-- </el-scrollbar> -->
-  <!-- </div> -->
+  <div :class="{'has-logo': showLogo}" class="sidebar-container">
+    <el-scrollbar>
+      <el-menu
+        :default-active="activeMenu"
+        :collapse="collapsed"
+        :unique-opened="false"
+        :background-color="variables.menuBg"
+        :text-color="variables.menuText"
+        :active-text-color="variables.menuActiveText"
+        mode="vertical"
+        @select="selectMenu"
+      >
+        <sider-item
+          v-for="route in routers"
+          :key="route.path"
+          :item="route"
+          :base-path="route.path"
+        />
+      </el-menu>
+    </el-scrollbar>
+  </div>
 </template>
 
 <script lang="ts">
@@ -83,16 +81,16 @@ export default defineComponent({
 .has-logo {
   height: calc(~"100% - @{topSilderHeight}");
 }
-// .menu-wrap {
-//   height: 100%;
-//   overflow: hidden;
-//   @{deep}(.el-scrollbar__wrap) {
-//     overflow-x: hidden;
-//     overflow-y: auto;
-//   }
-//   @{deep}(.el-menu) {
-//     border-right: none;
-//     width: 100%;
-//   }
-// }
+@{deep}(.el-scrollbar) {
+  width: 100%;
+  height: 100%;
+  .el-scrollbar__wrap {
+    overflow: scroll;
+    overflow-x: hidden;
+    .el-menu {
+      width: 100% !important;
+      border: none;
+    }
+  }
+}
 </style>

src/components/TagsView/ScrollPane.vue

@@ -0,0 +1,113 @@
+<template>
+  <el-scrollbar
+    ref="scrollContainer"
+    class="scroll-container"
+    @wheel="handleScroll"
+  >
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, unref, nextTick } from 'vue'
+import { useScrollTo } from '@/hooks/useScrollTo'
+const tagAndTagSpacing = 4 // tagAndTagSpacing
+
+export default defineComponent({
+  name: 'ScrollPane',
+  setup() {
+    const scrollContainer = ref<HTMLElement | null>(null)
+
+    function handleScroll(e: any): void {
+      const eventDelta: number = e.wheelDelta || -e.deltaY * 40
+      const $scrollWrapper: any = (unref(scrollContainer) as any).wrap
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+    }
+
+    function moveToTarget(currentTag: any) {
+      const $container: any = (unref(scrollContainer) as any).$el
+      const $containerWidth: number = $container.offsetWidth
+      const $scrollWrapper: any = (unref(scrollContainer) as any).wrap
+      const tagList = (unref(scrollContainer) as any).$parent.$parent.tagRefs
+
+      let firstTag: any = null
+      let lastTag: any = null
+
+      // find first tag and last tag
+      if (tagList.length > 0) {
+        firstTag = tagList[0]
+        lastTag = tagList[tagList.length - 1]
+      }
+
+      if (firstTag === currentTag) {
+        $scrollWrapper.scrollLeft = 0
+      } else if (lastTag === currentTag) {
+        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+      } else {
+        // find preTag and nextTag
+        const currentIndex: number = tagList.findIndex((item: any) => item === currentTag)
+        const prevTag = tagList[currentIndex - 1]
+        const nextTag = tagList[currentIndex + 1]
+        // the tag's offsetLeft after of nextTag
+        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+        // the tag's offsetLeft before of prevTag
+        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+          nextTick(() => {
+            const { start } = useScrollTo({
+              el: $scrollWrapper,
+              position: 'scrollLeft',
+              to: afterNextTagOffsetLeft - $containerWidth,
+              duration: 500
+            })
+            start()
+          })
+        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+          nextTick(() => {
+            const { start } = useScrollTo({
+              el: $scrollWrapper,
+              position: 'scrollLeft',
+              to: beforePrevTagOffsetLeft,
+              duration: 500
+            })
+            start()
+          })
+        }
+      }
+    }
+
+    function moveTo(to: number) {
+      const $scrollWrapper: any = (unref(scrollContainer) as any).wrap
+      nextTick(() => {
+        const { start } = useScrollTo({
+          el: $scrollWrapper,
+          position: 'scrollLeft',
+          to: $scrollWrapper.scrollLeft + to,
+          duration: 500
+        })
+        start()
+      })
+    }
+
+    return {
+      handleScroll,
+      scrollContainer,
+      moveToTarget,
+      moveTo
+    }
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  width: 100%;
+  @{deep}(.el-scrollbar__wrap) {
+    overflow: hidden;
+  }
+}
+</style>

src/components/TagsView/index.vue

@@ -0,0 +1,363 @@
+<template>
+  <div ref="wrapper" class="tags-view-container">
+    <el-button class="move-btn prev-btn" icon="el-icon-arrow-left" @click="move(-200)" />
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+      <div class="link-wrapper">
+        <router-link
+          v-for="tag in visitedViews"
+          :ref="setTagRef"
+          :key="tag.path"
+          :class="isActive(tag) ? 'active' : ''"
+          :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+          tag="span"
+          class="tags-view-item"
+          @click.middle="closeSelectedTag(tag)"
+          @contextmenu.prevent="openMenu(tag, $event)"
+        >
+          {{ tag.title }}
+          <i v-if="!tag.meta.affix" class="el-icon-close icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+        </router-link>
+      </div>
+    </scroll-pane>
+    <el-button class="move-btn next-btn" icon="el-icon-arrow-right" @click="move(200)" />
+    <ul v-show="visible" :style="{left: left + 'px', top: top + 'px'}" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)">
+        刷新
+      </li>
+      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">
+        关闭
+      </li>
+      <li @click="closeOthersTags">
+        关闭其他
+      </li>
+      <li @click="closeAllTags(selectedTag)">
+        关闭全部
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+import ScrollPane from './ScrollPane.vue'
+import path from 'path'
+import { defineComponent, ref, unref, computed, watch, onMounted, nextTick } from 'vue'
+import { tagsViewStore } from '_p/index/store/modules/tagsView'
+import { permissionStore } from '_p/index/store/modules/permission'
+import { useRouter } from 'vue-router'
+import type { RouteLocationNormalizedLoaded, RouteRecordRaw } from 'vue-router'
+
+export default defineComponent({
+  name: 'TagsView',
+  components: {
+    ScrollPane
+  },
+  setup() {
+    const { currentRoute, push, replace } = useRouter()
+    const wrapper = ref<HTMLElement | null>(null)
+    const scrollPane = ref<HTMLElement | null>(null)
+    const visible = ref<boolean>(false)
+    const top = ref<number>(0)
+    const left = ref<number>(0)
+    const selectedTag = ref<any>({})
+    const affixTags = ref<any[]>([])
+    const visitedViews = computed(() => tagsViewStore.visitedViews)
+    const routers = computed(() => permissionStore.routers)
+
+    const tagRefs = ref<any[]>([])
+
+    function setTagRef(el: any): void {
+      tagRefs.value.push(el)
+    }
+
+    function isActive(route: RouteLocationNormalizedLoaded): boolean {
+      return route.path === currentRoute.value.path
+    }
+
+    function filterAffixTags(routes: RouteRecordRaw[], basePath = '/'): any[] {
+      let tags: any[] = []
+      routes.forEach((route: RouteRecordRaw) => {
+        if (route.meta && route.meta.affix) {
+          const tagPath = path.resolve(basePath, route.path)
+          tags.push({
+            fullPath: tagPath,
+            path: tagPath,
+            name: route.name,
+            meta: { ...route.meta }
+          })
+        }
+        if (route.children) {
+          const tempTags: any[] = filterAffixTags(route.children, route.path)
+          if (tempTags.length >= 1) {
+            tags = [...tags, ...tempTags]
+          }
+        }
+      })
+
+      return tags
+    }
+
+    function initTags(): void {
+      affixTags.value = filterAffixTags(routers.value)
+      const affixTagArr: any[] = affixTags.value
+      for (const tag of affixTagArr) {
+        // Must have tag name
+        if (tag.name) {
+          tagsViewStore.addVisitedView(tag)
+        }
+      }
+    }
+
+    function addTags(): void | boolean {
+      const { name } = currentRoute.value
+      if (name) {
+        tagsViewStore.addView(currentRoute.value)
+      }
+      return false
+    }
+
+    function moveToCurrentTag() {
+      // TODO 要手动清除tagRefs，不然会一直重复，后续看看有没有什么解决办法
+      tagRefs.value = []
+      const tags = unref(tagRefs)
+      nextTick(() => {
+        for (const tag of tags) {
+          if (tag && tag.to.path === currentRoute.value.path) {
+            (unref(scrollPane) as any).moveToTarget(tag)
+            // when query is different then update
+            if (tag.to.fullPath !== currentRoute.value.fullPath) {
+              tagsViewStore.updateVisitedView(currentRoute.value)
+            }
+
+            break
+          }
+        }
+      })
+    }
+
+    async function refreshSelectedTag(view: RouteLocationNormalizedLoaded) {
+      await tagsViewStore.delCachedView()
+      const { fullPath } = view
+      nextTick(() => {
+        replace({
+          path: '/redirect' + fullPath
+        })
+      })
+    }
+
+    async function closeSelectedTag(view: RouteLocationNormalizedLoaded) {
+      const views: any = await tagsViewStore.delView(view)
+      if (isActive(view)) {
+        toLastView(views.visitedViews)
+      }
+    }
+
+    function closeOthersTags() {
+      push(selectedTag.value)
+      tagsViewStore.delOthersViews(selectedTag.value).then(() => {
+        moveToCurrentTag()
+      })
+    }
+
+    async function closeAllTags(view: RouteLocationNormalizedLoaded) {
+      const views: any = await tagsViewStore.delAllViews()
+      // console.log(affixTags.value.some(tag => tag.path === view.path))
+      // if (affixTags.value.some(tag => tag.path === view.path)) {
+      //   return
+      // }
+      toLastView(views.visitedViews)
+    }
+
+    function toLastView(visitedViews: RouteLocationNormalizedLoaded[]) {
+      const latestView = visitedViews.slice(-1)[0]
+      if (latestView) {
+        push(latestView)
+      } else {
+        // You can set another route
+        push('/')
+      }
+    }
+
+    function openMenu(tag: RouteLocationNormalizedLoaded, e: any) {
+      const menuMinWidth = 105
+      const offsetLeft: number = (unref(wrapper) as any).getBoundingClientRect().left // container margin left
+      const offsetWidth: number = (unref(wrapper) as any).offsetWidth // container width
+      const maxLeft: number = offsetWidth - menuMinWidth// left boundary
+      const itemLeft: number = e.clientX - offsetLeft + 4
+
+      if (itemLeft > maxLeft) {
+        left.value = maxLeft
+      } else {
+        left.value = itemLeft
+      }
+      top.value = e.offsetY
+
+      visible.value = true
+      selectedTag.value = tag
+    }
+
+    function closeMenu() {
+      visible.value = false
+    }
+
+    function move(to: number) {
+      (unref(scrollPane) as any).moveTo(to)
+    }
+
+    onMounted(() => {
+      initTags()
+      addTags()
+    })
+
+    watch(
+      () => currentRoute.value,
+      () => {
+        addTags()
+        moveToCurrentTag()
+      }
+    )
+
+    watch(
+      () => visible.value,
+      (visible: boolean) => {
+        if (visible) {
+          document.body.addEventListener('click', closeMenu)
+        } else {
+          document.body.removeEventListener('click', closeMenu)
+        }
+      }
+    )
+
+    return {
+      wrapper, scrollPane,
+      visible, top, left,
+      selectedTag, affixTags,
+      visitedViews, routers,
+      tagRefs, setTagRef,
+      isActive,
+      filterAffixTags,
+      initTags,
+      addTags,
+      moveToCurrentTag,
+      refreshSelectedTag,
+      closeSelectedTag,
+      closeOthersTags,
+      closeAllTags,
+      toLastView,
+      openMenu,
+      closeMenu,
+      move
+    }
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.tags-view-container {
+  height: @tagsViewHeight;
+  width: 100%;
+  background: #fff;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
+  position: relative;
+  display: flex;
+  z-index: 1;
+  &::after {
+    content: "";
+    width: 100%;
+    height: 1px;
+    border-top: #d8dce5;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+  }
+  .move-btn {
+    display: inline-block;
+    width: @tagsViewHeight;
+    height: @tagsViewHeight;
+    line-height: @tagsViewHeight;
+    text-align: center;
+    padding: 0;
+    border-radius: 0;
+  }
+  .tags-view-wrapper {
+    width: calc(~"100% - 78px");
+    .link-wrapper {
+      height: @tagsViewHeight;
+      line-height: @tagsViewHeight;
+    }
+    .tags-view-item {
+      display: inline-block;
+      position: relative;
+      cursor: pointer;
+      height: 30px;
+      line-height: 30px;
+      border: 1px solid #d8dce5;
+      color: #495060;
+      background: #fff;
+      padding: 0 8px;
+      font-size: 12px;
+      margin-left: 5px;
+      &:last-of-type {
+        margin-right: 23px;
+      }
+      &.active {
+        background-color: #304156;
+        color: #fff;
+        border-color: #304156;
+        &::before {
+          content: '';
+          background: #fff;
+          display: inline-block;
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          position: relative;
+          margin-right: 5px;
+        }
+      }
+      .icon-close {
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        text-align: center;
+        line-height: 16px;
+        transition: all .3s cubic-bezier(.645, .045, .355, 1);
+        transform-origin: 100% 50%;
+        margin-left: 5px;
+        &:before {
+          transform: scale(.6);
+          display: inline-block;
+        }
+        &:hover {
+          background-color: #b4bccc;
+          color: #fff;
+        }
+      }
+    }
+  }
+  .contextmenu {
+    margin: 0;
+    background: #fff;
+    z-index: 200;
+    position: absolute;
+    list-style-type: none;
+    padding: 5px 0;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 400;
+    color: #333;
+    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+    li {
+      margin: 0;
+      padding: 7px 16px;
+      cursor: pointer;
+      &:hover {
+        background: #eee;
+      }
+    }
+  }
+}
+@{deep}(.scrollbar__view) {
+  height: @tagsViewHeight;
+  line-height: @tagsViewHeight;
+}
+</style>

src/components/UserInfo/index.vue

@@ -0,0 +1,71 @@
+<template>
+  <el-dropdown class="avatar-container" trigger="hover">
+    <div>
+      <div class="avatar-wrapper">
+        <img :src="require('@/assets/img/avatar.gif')" class="user-avatar">
+        <span class="name-item">管理员</span>
+      </div>
+    </div>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item key="1">
+          <span style="display: block;" @click="toHome">首页</span>
+        </el-dropdown-item>
+        <el-dropdown-item key="2">
+          <span style="display: block;" @click="loginOut">退出登录</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { resetRouter } from '_p/index/router'
+import wsCache from '@/cache'
+import { useRouter } from 'vue-router'
+import { tagsViewStore } from '_p/index/store/modules/tagsView'
+export default defineComponent({
+  name: 'UserInfo',
+  setup() {
+    const { replace, push } = useRouter()
+    async function loginOut(): Promise<void> {
+      wsCache.clear()
+      await resetRouter() // 重置静态路由表
+      await tagsViewStore.delAllViews() // 删除所有的tags标签页
+      replace('/login')
+    }
+    function toHome() {
+      push('/')
+    }
+    return {
+      loginOut,
+      toHome
+    }
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.avatar-container {
+  margin-right: 30px;
+  padding: 0 10px;
+  .avatar-wrapper {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    cursor: pointer;
+    .user-avatar {
+      width: 30px;
+      height: 30px;
+      border-radius: 10px;
+    }
+    .name-item {
+      font-size: 14px;
+      font-weight: 600;
+      display: inline-block;
+      margin-left: 5px;
+    }
+  }
+}
+</style>