wip: vite版重构中

src/layout/components/AppMain/index.vue

@@ -0,0 +1,22 @@
+<template>
+  <section class="app-main">
+    <router-view v-slot="{ Component, route }">
+      <transition name="fade" mode="out-in" appear>
+        <keep-alive :include="getCaches">
+          <component :is="Component" :key="route.fullPath" />
+        </keep-alive>
+      </transition>
+    </router-view>
+  </section>
+</template>
+
+<script setup lang="ts" name="AppMain">
+import { useCache } from '_c/ParentView/useCache'
+const { getCaches } = useCache(true)
+</script>
+
+<style lang="less" scoped>
+.app-main {
+  padding: 20px;
+}
+</style>

src/layout/components/Backtop/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <el-backtop target=".main__wrap--content .el-scrollbar__wrap" :bottom="100" />
+</template>
+
+<script setup lang="ts" name="Backtop"></script>
+
+<style></style>

src/layout/components/Breadcrumb/Breadcrumb.vue

@@ -0,0 +1,87 @@
+<template>
+  <div ref="breadcrumbRef" class="breadcrumb"> <slot></slot> </div>
+</template>
+
+<script setup lang="ts" name="Breadcrumb">
+import type { PropType } from 'vue'
+import { provide, ref } from 'vue'
+
+const props = defineProps({
+  separator: {
+    type: String as PropType<string>,
+    default: '/'
+  },
+  separatorClass: {
+    type: String as PropType<string>,
+    default: ''
+  }
+})
+
+const breadcrumbRef = ref<HTMLElement | null>(null)
+
+provide('breadcrumb', props)
+</script>
+
+<style lang="less">
+.breadcrumb {
+  padding-right: 20px;
+  font-size: 12px;
+
+  &::after,
+  &::before {
+    display: table;
+    content: '';
+  }
+
+  &::after {
+    clear: both;
+  }
+
+  &__separator {
+    margin: 0 9px;
+    font-weight: 700;
+    color: #6e90a7;
+
+    &[class*='icon'] {
+      margin: 0 6px;
+      font-weight: 400;
+    }
+  }
+
+  &__item {
+    float: left;
+    // display: inline-block;
+  }
+
+  &__inner {
+    display: inline-block;
+    color: #6e90a7;
+
+    a {
+      font-weight: 700;
+      color: #2c3a61;
+      text-decoration: none;
+      transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+    }
+
+    a:hover,
+    &.is-link:hover {
+      color: #1890ff;
+      cursor: pointer;
+    }
+  }
+
+  &__item:last-child .breadcrumb__inner,
+  &__item:last-child &__inner a,
+  &__item:last-child &__inner a:hover,
+  &__item:last-child &__inner:hover {
+    font-weight: 400;
+    color: #6e90a7;
+    cursor: text;
+  }
+
+  &__item:last-child &__separator {
+    display: none;
+  }
+}
+</style>

src/layout/components/Breadcrumb/BreadcrumbItem.vue

@@ -0,0 +1,42 @@
+<template>
+  <span class="breadcrumb__item">
+    <span ref="linkRef" :class="['breadcrumb__inner']">
+      <slot></slot>
+    </span>
+    <i v-if="separatorClass" class="breadcrumb__separator" :class="separatorClass"></i>
+    <span v-else class="breadcrumb__separator">{{ separator }}</span>
+  </span>
+</template>
+
+<script setup lang="ts" name="BreadcrumbItem">
+import { inject, ref, onMounted, unref, PropType } from 'vue'
+import { useRouter } from 'vue-router'
+
+const props = defineProps({
+  to: {
+    type: [String, Object] as PropType<string | IObj>,
+    default: ''
+  },
+  replace: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  }
+})
+
+const linkRef = ref<HTMLElement | null>(null)
+const parent = inject('breadcrumb') as {
+  separator: string
+  separatorClass: string
+}
+const separator = parent.separator && parent.separator
+const separatorClass = parent.separatorClass && parent.separatorClass
+const { push, replace } = useRouter()
+
+onMounted(() => {
+  const link = unref(linkRef)
+  if (!link) return
+  const { to } = props
+  if (!props.to) return
+  props.replace ? replace(to) : push(to)
+})
+</script>

src/layout/components/Breadcrumb/index.vue

@@ -0,0 +1,108 @@
+<template>
+  <Breadcrumb class="app-breadcrumb">
+    <transition-group name="breadcrumb">
+      <BreadcrumbItem v-for="(item, index) in levelList" :key="item.path">
+        <svg-icon
+          v-if="item.meta && item.meta.icon"
+          :icon-class="item?.meta?.icon as string"
+          class="icon-breadcrumb"
+        />
+        <span
+          v-if="item.redirect === 'noredirect' || index == levelList.length - 1"
+          class="no-redirect"
+        >
+          {{ item?.meta?.title }}
+        </span>
+        <a v-else @click.prevent="handleLink(item)">
+          {{ item?.meta?.title }}
+        </a>
+      </BreadcrumbItem>
+    </transition-group>
+  </Breadcrumb>
+</template>
+
+<script setup lang="ts" name="BreadcrumbWrap">
+import { ref, watch } from 'vue'
+import type {
+  RouteRecordRaw,
+  RouteLocationMatched,
+  RouteLocationNormalizedLoaded
+} from 'vue-router'
+import { useRouter } from 'vue-router'
+import { compile } from 'path-to-regexp'
+import Breadcrumb from './Breadcrumb.vue'
+import BreadcrumbItem from './BreadcrumbItem.vue'
+
+const { currentRoute, push } = useRouter()
+
+const levelList = ref<RouteRecordRaw[]>([])
+
+function getBreadcrumb() {
+  const matched = currentRoute.value.matched.filter(
+    (item: RouteLocationMatched) => item.meta && item.meta.title
+  )
+  // const first = matched[0]
+
+  // if (!isDashboard(first)) {
+  //   matched = [{ path: '/dashboard', meta: { title: '首页', icon: 'dashboard' }}].concat(matched)
+  // }
+
+  levelList.value = matched.filter(
+    (item: RouteLocationMatched) => item.meta && item.meta.title && item.meta.breadcrumb !== false
+  )
+}
+
+// function isDashboard(route: RouteLocationMatched) {
+//   const name = route && route.name
+//   if (!name) {
+//     return false
+//   }
+//   return (name as any).trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
+// }
+
+function pathCompile(path: string): string {
+  const { params } = currentRoute.value
+  const toPath = compile(path)
+  return toPath(params)
+}
+
+function handleLink(item: RouteRecordRaw): void {
+  const { redirect, path } = item
+  if (redirect) {
+    push(redirect as string)
+    return
+  }
+  push(pathCompile(path))
+}
+
+watch(
+  () => currentRoute.value,
+  (route: RouteLocationNormalizedLoaded) => {
+    if (route.path.startsWith('/redirect/')) {
+      return
+    }
+    getBreadcrumb()
+  },
+  {
+    immediate: true
+  }
+)
+</script>
+
+<style lang="less" scoped>
+.app-breadcrumb {
+  display: inline-block;
+  margin-left: 10px;
+  font-size: 14px;
+
+  .no-redirect {
+    color: #97a8be;
+    cursor: text;
+  }
+
+  .icon-breadcrumb {
+    margin-right: 8px;
+    color: #97a8be;
+  }
+}
+</style>

src/layout/components/Hamburger/index.vue

@@ -0,0 +1,46 @@
+<template>
+  <div @click="toggleCollapsed(!collapsed)">
+    <svg
+      :class="{ 'is-active': !collapsed }"
+      class="hamburger"
+      viewBox="0 0 1024 1024"
+      xmlns="http://www.w3.org/2000/svg"
+      width="64"
+      height="64"
+    >
+      <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>
+  </div>
+</template>
+
+<script setup lang="ts" name="Hamburger">
+import { PropType } from 'vue'
+
+defineProps({
+  collapsed: {
+    type: Boolean as PropType<boolean>,
+    default: true
+  }
+})
+
+const emit = defineEmits(['toggleClick'])
+
+function toggleCollapsed(collapsed: boolean) {
+  emit('toggleClick', collapsed)
+}
+</script>
+
+<style lang="less" scoped>
+.hamburger {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+}
+
+.hamburger.is-active {
+  transform: rotate(180deg);
+}
+</style>

src/layout/components/Logo/index.vue

@@ -0,0 +1,85 @@
+<template>
+  <router-link class="app-logo" to="/" :class="{ 'app-logo--Top': layout !== 'Classic' }">
+    <img :src="logoImg" />
+    <div v-if="show" class="sidebar-title">{{ title }}</div>
+  </router-link>
+</template>
+
+<script setup lang="ts" name="Logo">
+import { ref, watch, PropType, computed } from 'vue'
+import { useAppStore } from '@/store/modules/app'
+const appStore = useAppStore()
+// @ts-ignore
+import logoImg from '@/assets/img/logo.png'
+
+const props = defineProps({
+  collapsed: {
+    type: Boolean as PropType<boolean>,
+    required: true
+  }
+})
+
+const show = ref<boolean>(true)
+const title = computed(() => appStore.getLogoTitle)
+const layout = computed(() => appStore.getLayout)
+watch(
+  () => props.collapsed,
+  (collapsed: boolean) => {
+    if (layout.value !== 'Classic') {
+      show.value = true
+    } else {
+      if (!collapsed) {
+        setTimeout(() => {
+          show.value = !collapsed
+        }, 400)
+      } else {
+        show.value = !collapsed
+      }
+    }
+  }
+)
+</script>
+
+<style lang="less" scoped>
+.app-logo {
+  display: flex;
+  width: 100%;
+  height: var(--top-sider-height);
+  cursor: pointer;
+  background-color: var(--menu-background-color);
+  align-items: center;
+
+  img {
+    width: 37px;
+    height: 37px;
+    margin-left: 14px;
+  }
+
+  .sidebar-title {
+    margin-left: 12px;
+    font-size: 14px;
+    font-weight: 700;
+    color: var(--menu-active-text-color);
+    transition: 0.5s;
+  }
+}
+
+.app-logo--Top {
+  width: auto;
+  padding: 0 5px;
+  background-color: var(--top-menu-background-color);
+  transition: background 0.2s;
+
+  &:hover {
+    background: #f6f6f6;
+  }
+
+  img {
+    margin-left: 0;
+  }
+
+  .sidebar-title {
+    color: var(--top-menu-text-color);
+  }
+}
+</style>

src/layout/components/MenuTab/index.vue

@@ -0,0 +1,113 @@
+<template>
+  <el-tabs v-model="activeName" :tab-position="tabPosition" @tab-click="changeTab">
+    <el-tab-pane
+      v-for="(item, $index) in tabRouters"
+      :key="$index"
+      :name="item.path === '/' ? '/dashboard' : item.path"
+    >
+      <template #label>
+        <div class="label-item">
+          <svg-icon :icon-class="filterTab(item, 'icon')" />
+          <div class="title-item">{{ filterTab(item, 'title') }}</div>
+        </div>
+      </template>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script setup lang="ts" name="MenuTab">
+import { ref, watch, onMounted, computed } from 'vue'
+import { useAppStore } from '@/store/modules/app'
+const appStore = useAppStore()
+import { usePermissionStore } from '@/store/modules/permission'
+const permissionStore = usePermissionStore()
+import type { RouteRecordRaw } from 'vue-router'
+import { useRouter } from 'vue-router'
+import { findIndex } from '@/utils'
+import { isExternal } from '@/utils/validate'
+
+const { currentRoute, push } = useRouter()
+
+const activeName = ref<string>('')
+
+const routers = computed(() => permissionStore.getRouters)
+const tabRouters = computed(() => routers.value.filter((v) => !v.meta?.hidden))
+
+const layout = computed(() => appStore.layout)
+const tabPosition = computed(() => (layout.value === 'Classic' ? 'left' : 'top'))
+
+function init() {
+  const currentPath = currentRoute.value.fullPath.split('/')
+  const index = findIndex(tabRouters.value, (v: RouteRecordRaw) => {
+    if (v.path === '/') {
+      return `/${currentPath[1]}` === '/dashboard'
+    } else {
+      return v.path === `/${currentPath[1]}`
+    }
+  })
+  if (index > -1) {
+    activeName.value = `/${currentPath[1]}`
+    setActive(index)
+    permissionStore.setAcitveTab(activeName.value)
+  }
+}
+
+function filterTab(item: RouteRecordRaw | any, key: string): any {
+  return item.meta && item.meta[key] ? item.meta[key] : item.children[0].meta[key]
+}
+
+function setActive(index: number): void {
+  const currRoute: any = tabRouters.value[index]
+  permissionStore.setMenuTabRouters(currRoute.children)
+}
+
+function changeTab(item: any) {
+  const currRoute: any = tabRouters.value[item.index]
+  permissionStore.setMenuTabRouters(currRoute.children)
+  if (isExternal(currRoute.children[0].path)) {
+    window.open(currRoute.children[0].path)
+  } else {
+    push(
+      `${activeName.value === '/dashboard' ? '' : activeName.value}/${currRoute.children[0].path}`
+    )
+    permissionStore.setAcitveTab(activeName.value)
+  }
+}
+
+onMounted(() => {
+  init()
+})
+
+watch(
+  () => currentRoute.value,
+  () => {
+    init()
+  }
+)
+
+watch(
+  () => activeName.value,
+  (val) => {
+    permissionStore.setAcitveTab(val)
+  }
+)
+</script>
+
+<style lang="less" scoped>
+.label-item {
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  flex-wrap: wrap;
+  align-items: center;
+
+  & > div {
+    width: 100%;
+  }
+
+  .title-item {
+    position: relative;
+    top: -5px;
+  }
+}
+</style>

src/layout/components/Screenfull/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <el-tooltip
+    :effect="'dark' as any"
+    :content="isFullscreen ? '退出全屏' : '全屏'"
+    placement="bottom"
+  >
+    <div id="screenfull-container">
+      <svg-icon
+        :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
+        class="screenfull-svg"
+        @click="click"
+      />
+    </div>
+  </el-tooltip>
+</template>
+
+<script setup lang="ts" name="Screenfull">
+import { ref, onMounted } from 'vue'
+import { Message } from '_c/Message'
+import { useFullscreen } from '@/hooks/web/useFullscreen'
+const { sf } = useFullscreen()
+
+const isFullscreen = ref<boolean>(false)
+
+function click() {
+  if (!sf.isEnabled) {
+    Message({
+      message: 'you browser can not work',
+      type: 'warning'
+    })
+    return false
+  }
+  sf.toggle()
+}
+
+function init() {
+  if (sf.isEnabled) {
+    sf.on('change', () => {
+      isFullscreen.value = sf.isFullscreen
+    })
+  }
+}
+
+onMounted(() => {
+  init()
+})
+</script>
+
+<style scoped>
+.screenfull-svg {
+  cursor: pointer;
+}
+</style>

src/layout/components/Setting/index.vue

@@ -0,0 +1,262 @@
+<template>
+  <div>
+    <div class="setting__wrap" @click="toggleClick">
+      <i class="el-icon-setting"></i>
+    </div>
+    <el-drawer v-model="drawer" direction="rtl" size="20%">
+      <template #title>
+        <div class="setting__title">项目配置</div>
+      </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 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 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 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__title">界面显示</div>
+        <div v-if="layout !== 'Top'" class="setting__item">
+          <span>固定一级菜单</span>
+          <el-switch :value="showMenuTab" @change="setShowMenuTab" />
+        </div>
+
+        <div class="setting__item">
+          <span>固定Header</span>
+          <el-switch :value="fixedHeader" @change="setFixedHeader" />
+        </div>
+
+        <div v-if="layout !== 'Top'" class="setting__item">
+          <span>顶部操作栏</span>
+          <el-switch :value="showNavbar" @change="setShowNavbar" />
+        </div>
+
+        <div v-if="layout !== 'Top'" class="setting__item">
+          <span>侧边栏缩收</span>
+          <el-switch :value="showHamburger" @change="setHamburger" />
+        </div>
+
+        <div v-if="layout !== 'Top'" class="setting__item">
+          <span>面包屑</span>
+          <el-switch :value="showBreadcrumb" @change="setBreadcrumb" />
+        </div>
+
+        <div class="setting__item">
+          <span>全屏按钮</span>
+          <el-switch :value="showScreenfull" @change="setScreenfull" />
+        </div>
+
+        <div class="setting__item">
+          <span>用户头像</span>
+          <el-switch :value="showUserInfo" @change="setUserInfo" />
+        </div>
+
+        <div class="setting__item">
+          <span>标签页</span>
+          <el-switch :value="showTags" @change="setShowTags" />
+        </div>
+
+        <div class="setting__item">
+          <span>LOGO</span>
+          <el-switch :value="showLogo" @change="setShowLogo" />
+        </div>
+
+        <div class="setting__item">
+          <span>灰色模式</span>
+          <el-switch :value="greyMode" @change="setGreyMode" />
+        </div>
+
+        <div class="setting__item">
+          <span>回到顶部</span>
+          <el-switch :value="showBackTop" @change="setShowBackTop" />
+        </div>
+
+        <div class="setting__item">
+          <span>页面标题</span>
+          <el-input v-model="title" size="mini" @change="setTitle" />
+        </div>
+
+        <div class="setting__item">
+          <span>LOGO标题</span>
+          <el-input v-model="logoTitle" size="mini" @change="setLogoTitle" />
+        </div>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script setup lang="ts" name="Setting">
+import { computed, ref } from 'vue'
+import { useAppStore, LayoutType } from '@/store/modules/app'
+const appStore = useAppStore()
+
+const drawer = ref<boolean>(false)
+const logoTitle = ref<string>(appStore.getLogoTitle)
+const title = ref<string>(appStore.getTitle)
+const layout = computed(() => appStore.getLayout)
+const fixedHeader = computed(() => appStore.getFixedHeader)
+const showNavbar = computed(() => appStore.getShowNavbar)
+const showHamburger = computed(() => appStore.getShowHamburger)
+const showBreadcrumb = computed(() => appStore.getShowBreadcrumb)
+const showScreenfull = computed(() => appStore.getShowScreenfull)
+const showUserInfo = computed(() => appStore.getShowUserInfo)
+const showTags = computed(() => appStore.getShowTags)
+const showLogo = computed(() => appStore.getShowLogo)
+const greyMode = computed(() => appStore.getGreyMode)
+const showBackTop = computed(() => appStore.getShowBackTop)
+const showMenuTab = computed(() => appStore.getShowMenuTab)
+
+function toggleClick() {
+  drawer.value = true
+}
+
+function setLayout(mode: LayoutType) {
+  if (mode === layout.value) return
+  appStore.setLayout(mode)
+  setCollapsed(false)
+  ;(mode as string) === 'Top' && setShowMenuTab(false)
+}
+
+function setCollapsed(val: boolean) {
+  appStore.setCollapsed(val)
+}
+
+function setFixedHeader(val: boolean) {
+  appStore.setFixedHeader(val)
+}
+
+function setShowNavbar(val: boolean) {
+  appStore.setShowNavbar(val)
+}
+
+function setHamburger(val: boolean) {
+  appStore.setHamburger(val)
+}
+
+function setBreadcrumb(val: boolean) {
+  appStore.setBreadcrumb(val)
+}
+
+function setScreenfull(val: boolean) {
+  appStore.setScreenfull(val)
+}
+
+function setUserInfo(val: boolean) {
+  appStore.setUserInfo(val)
+}
+
+function setShowTags(val: boolean) {
+  appStore.setShowTags(val)
+}
+
+function setShowLogo(val: boolean) {
+  appStore.setShowLogo(val)
+}
+
+function setTitle(val: string) {
+  appStore.setTitle(val)
+}
+
+function setLogoTitle(val: string) {
+  appStore.setLogoTitle(val)
+}
+
+function setGreyMode(val: boolean) {
+  appStore.setGreyMode(val)
+}
+
+function setShowBackTop(val: boolean) {
+  appStore.setShowBackTop(val)
+}
+
+function setShowMenuTab(val: boolean) {
+  appStore.setShowMenuTab(val)
+}
+</script>
+
+<style lang="less" scoped>
+// 项目配置
+.setting__wrap {
+  position: fixed;
+  top: 45%;
+  right: 0;
+  z-index: 10;
+  display: flex;
+  padding: 10px;
+  color: #fff;
+  cursor: pointer;
+  background: #018ffb;
+  border-radius: 6px 0 0 6px;
+  justify-content: center;
+  align-items: center;
+}
+
+.setting__title {
+  font-weight: bold;
+  color: black;
+}
+// 项目配置
+.setting__content {
+  padding: 0 20px 20px 20px;
+  background: var(--app-background-color);
+
+  .setting__title {
+    padding-top: 20px;
+    text-align: center;
+  }
+
+  .icon__wrap {
+    margin-top: 15px;
+    text-align: center;
+
+    & > span {
+      display: inline-block;
+      padding: 5px 10px;
+      border: 2px solid var(--app-background-color);
+
+      .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;
+    margin: 16px 0;
+    justify-content: space-between;
+    align-items: center;
+
+    & > span {
+      min-width: 100px;
+    }
+  }
+}
+</style>

src/layout/components/Sider/Item.vue

@@ -0,0 +1,29 @@
+<template>
+  <i v-if="icon && icon.includes('el-icon')" :class="[icon, 'sub-el-icon', 'anticon']"></i>
+  <svg-icon v-else-if="icon" :icon-class="icon" class="anticon" />
+  <slot name="title">
+    <span class="anticon-item">{{ title }}</span>
+  </slot>
+</template>
+
+<script setup lang="ts" name="Item">
+import { PropType } from 'vue'
+defineProps({
+  icon: {
+    type: String as PropType<string>,
+    default: ''
+  },
+  title: {
+    type: String as PropType<string>,
+    default: ''
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.anticon-item {
+  opacity: 1;
+  transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
+    width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+</style>

src/layout/components/Sider/SiderItem.vue

@@ -0,0 +1,121 @@
+<template>
+  <template v-if="!siderItem.meta?.hidden">
+    <template
+      v-if="
+        hasOneShowingChild(siderItem.children, siderItem) &&
+        (!onlyOneChild.children || onlyOneChild.noShowingChildren) &&
+        !siderItem.meta?.alwaysShow
+      "
+    >
+      <el-menu-item
+        :index="
+          resolvePath(
+            onlyOneChild.path,
+            showMenuTab ? `${activeTab === '/dashboard' ? '' : activeTab}/${basePath}` : ''
+          )
+        "
+        :class="{ 'submenu-title-noDropdown': !isNest }"
+      >
+        <item v-if="onlyOneChild.meta" :icon="onlyOneChild?.meta?.icon || siderItem?.meta?.icon" />
+        <template #title>
+          <span class="anticon-item">{{ onlyOneChild.meta.title }}</span>
+        </template>
+      </el-menu-item>
+    </template>
+
+    <el-sub-menu
+      v-else
+      :popper-class="layout !== 'Top' ? 'nest-popper-menu' : 'top-popper-menu'"
+      :index="
+        resolvePath(
+          siderItem.path,
+          showMenuTab ? `${activeTab === '/dashboard' ? '' : activeTab}/${basePath}` : ''
+        )
+      "
+    >
+      <template #title>
+        <item v-if="siderItem.meta" :icon="siderItem?.meta?.icon" :title="siderItem.meta.title" />
+      </template>
+      <sider-item
+        v-for="child in siderItem.children"
+        :key="child.path"
+        :is-nest="true"
+        :item="child"
+        :layout="layout"
+        :base-path="resolvePath(child.path)"
+      />
+    </el-sub-menu>
+  </template>
+</template>
+
+<script setup lang="ts" name="SiderItemCom">
+import { PropType, ref, computed } from 'vue'
+import type { RouteRecordRaw } from 'vue-router'
+import path from 'path-browserify'
+import { isExternal } from '@/utils/validate'
+import Item from './Item.vue'
+import { usePermissionStore } from '@/store/modules/permission'
+const permissionStore = usePermissionStore()
+import { useAppStore } from '@/store/modules/app'
+const appStore = useAppStore()
+
+const props = defineProps({
+  // route object
+  item: {
+    type: Object as PropType<any>,
+    required: true
+  },
+  isNest: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  },
+  basePath: {
+    type: String as PropType<string>,
+    default: ''
+  },
+  layout: {
+    type: String as PropType<string>,
+    default: 'Classic'
+  }
+})
+
+const onlyOneChild = ref<any>(null)
+
+const activeTab = computed(() => permissionStore.getActiveTab)
+const showMenuTab = computed(() => appStore.getShowMenuTab)
+const siderItem: any = computed(() => props.item)
+
+function hasOneShowingChild(children: RouteRecordRaw[] = [], parent: RouteRecordRaw): boolean {
+  const showingChildren: RouteRecordRaw[] = children.filter((item: RouteRecordRaw) => {
+    if (item.meta && item.meta.hidden) {
+      return false
+    } else {
+      // Temp set(will be used if only has one showing child)
+      onlyOneChild.value = item
+      return true
+    }
+  })
+
+  // When there is only one child router, the child router is displayed by default
+  if (showingChildren.length === 1) {
+    return true
+  }
+
+  // Show parent if there are no child router to display
+  if (showingChildren.length === 0) {
+    onlyOneChild.value = { ...parent, path: '', noShowingChildren: true }
+    return true
+  }
+
+  return false
+}
+
+function resolvePath(routePath: string, otherPath?: string): string {
+  if (isExternal(routePath)) {
+    return routePath
+  }
+  return path.resolve(otherPath || props.basePath, routePath)
+}
+</script>
+
+<style></style>

src/layout/components/Sider/index.vue

@@ -0,0 +1,127 @@
+<template>
+  <div
+    :class="{
+      'has-logo': showLogo && layout === 'Classic',
+      'sidebar-container--Top': layout === 'Top'
+    }"
+    class="sidebar-container"
+  >
+    <el-scrollbar>
+      <el-menu
+        :default-active="activeMenu"
+        :collapse="collapsed"
+        :unique-opened="false"
+        :mode="mode"
+        @select="selectMenu"
+      >
+        <sider-item
+          v-for="route in showMenuTab ? menuTabRouters : routers"
+          :key="route.path"
+          :item="route"
+          :layout="layout"
+          :base-path="route.path"
+        />
+      </el-menu>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script setup lang="ts" name="Sider">
+import { computed, PropType } from 'vue'
+import { useRouter } from 'vue-router'
+import { usePermissionStore } from '@/store/modules/permission'
+const permissionStore = usePermissionStore()
+import { useAppStore } from '@/store/modules/app'
+const appStore = useAppStore()
+import SiderItem from './SiderItem.vue'
+import { isExternal } from '@/utils/validate'
+
+defineProps({
+  layout: {
+    type: String as PropType<string>,
+    default: 'Classic'
+  },
+  mode: {
+    type: String as PropType<'horizontal' | 'vertical'>,
+    default: 'vertical'
+  }
+})
+
+const { currentRoute, push } = useRouter()
+const routers = computed(() => {
+  return permissionStore.getRouters
+})
+const activeMenu = computed(() => {
+  const { meta, path } = currentRoute.value
+  // if set path, the sidebar will highlight the path you set
+  if (meta.activeMenu) {
+    return meta.activeMenu as string
+  }
+  return path
+})
+const collapsed = computed(() => appStore.getCollapsed)
+const showLogo = computed(() => appStore.getShowLogo)
+
+const showMenuTab = computed(() => appStore.getShowMenuTab)
+const menuTabRouters = computed(() => permissionStore.getMenuTabRouters)
+
+function selectMenu(path: string) {
+  if (currentRoute.value.fullPath === path) return
+  if (isExternal(path)) {
+    window.open(path)
+  } else {
+    push(path)
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.sidebar-container {
+  height: 100%;
+
+  :deep(.svg-icon) {
+    margin-right: 16px;
+  }
+
+  :deep(.el-scrollbar) {
+    width: 100%;
+    height: 100%;
+
+    .el-scrollbar__wrap {
+      overflow: scroll;
+      overflow-x: hidden;
+
+      .el-menu {
+        width: 100%;
+        border: none;
+      }
+    }
+  }
+}
+
+.has-logo {
+  height: calc(~'100% - var(--top-sider-height)');
+}
+
+.sidebar-container--Top {
+  :deep(.el-scrollbar) {
+    width: 100%;
+    height: 100%;
+
+    .el-scrollbar__wrap {
+      overflow: scroll;
+      overflow-x: hidden;
+
+      .el-scrollbar__view {
+        height: var(--top-sider-height);
+      }
+
+      .el-menu {
+        width: auto;
+        height: 100%;
+        border: none;
+      }
+    }
+  }
+}
+</style>

src/layout/components/TagsView/ScrollPane.vue

@@ -0,0 +1,115 @@
+<template>
+  <el-scrollbar
+    ref="scrollContainer"
+    :vertical="false"
+    class="scroll-container"
+    @wheel.prevent="handleScroll"
+  >
+    <slot></slot>
+  </el-scrollbar>
+</template>
+
+<script setup lang="ts" name="ScrollPane">
+import { ref, unref, nextTick } from 'vue'
+import { useScrollTo } from '@/hooks/event/useScrollTo'
+
+const tagAndTagSpacing = 4 // tagAndTagSpacing
+
+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()
+  })
+}
+
+defineExpose({
+  moveToTarget,
+  moveTo
+})
+</script>
+
+<style lang="less" scoped>
+.scroll-container {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+
+  .el-scrollbar__bar {
+    bottom: 0;
+  }
+
+  .el-scrollbar__wrap {
+    height: 49px;
+  }
+}
+</style>

src/layout/components/TagsView/index.vue

@@ -0,0 +1,392 @@
+<template>
+  <div ref="wrapper" class="tags-view-container">
+    <div class="container-left hover-container" @click="move(-200)">
+      <i class="el-icon-d-arrow-left"></i>
+    </div>
+    <scroll-pane ref="scrollPaneRef" class="tags-view-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 as any).title }}
+        <span
+          v-if="!tag.meta.affix"
+          class="el-icon-close"
+          @click.prevent.stop="closeSelectedTag(tag)"
+        ></span>
+      </router-link>
+    </scroll-pane>
+    <div class="container-right">
+      <div class="hover-container">
+        <i class="el-icon-d-arrow-right" @click="move(200)"></i>
+      </div>
+      <div class="hover-container" @click="refreshSelectedTag(selectedTag)">
+        <el-tooltip content="刷新" placement="bottom">
+          <div>
+            <svg-icon icon-class="refresh" />
+          </div>
+        </el-tooltip>
+      </div>
+      <div class="hover-container" @click="closeSelectedTag(selectedTag)">
+        <el-tooltip content="关闭" placement="bottom">
+          <div>
+            <svg-icon icon-class="close" />
+          </div>
+        </el-tooltip>
+      </div>
+      <div class="hover-container">
+        <screenfull />
+      </div>
+      <!-- <div class="hover-container" @click="toHome">
+        <el-tooltip content="首页" placement="bottom">
+          <svg-icon icon-class="home" />
+        </el-tooltip>
+      </div> -->
+    </div>
+
+    <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">关闭全部</li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts" name="TagsViews">
+import { ref, unref, computed, watch, onMounted, nextTick } from 'vue'
+import { useTagsViewStore } from '@/store/modules/tags-view'
+const tagsViewStore = useTagsViewStore()
+import { usePermissionStore } from '@/store/modules/permission'
+const permissionStore = usePermissionStore()
+import path from 'path-browserify'
+import type { RouteLocationNormalizedLoaded, RouteRecordRaw } from 'vue-router'
+import { useRouter } from 'vue-router'
+import ScrollPane from './ScrollPane.vue'
+import Screenfull from '../Screenfull/index.vue'
+
+const { currentRoute, push, replace } = useRouter()
+const wrapper = ref<HTMLElement | null>(null)
+const scrollPaneRef = 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 as RouteRecordRaw[])
+  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) {
+    selectedTag.value = currentRoute.value
+    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(scrollPaneRef) 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) {
+  if (view.meta && view.meta.affix) return
+  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() {
+  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 {
+    if (
+      currentRoute.value.path === permissionStore.getAddRouters[0].path ||
+      currentRoute.value.path === permissionStore.getAddRouters[0].redirect
+    ) {
+      addTags()
+      return
+    }
+    // You can set another route
+    push(permissionStore.getAddRouters[0].path)
+  }
+}
+
+function openMenu(tag: RouteLocationNormalizedLoaded, e: any) {
+  const menuMinWidth = 105
+  const offsetWidth: number = (unref(wrapper) as any).offsetWidth // container width
+  const maxLeft: number = offsetWidth - menuMinWidth // left boundary
+  const itemLeft: number = e.clientX + 4
+
+  if (itemLeft > maxLeft) {
+    left.value = maxLeft
+  } else {
+    left.value = itemLeft
+  }
+  top.value = e.clientY
+
+  visible.value = true
+  selectedTag.value = tag
+}
+
+function closeMenu() {
+  visible.value = false
+}
+
+function move(to: number) {
+  ;(unref(scrollPaneRef) 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)
+    }
+  }
+)
+</script>
+
+<style lang="less" scoped>
+.tags-view-container {
+  z-index: 1;
+  display: flex;
+  width: 100%;
+  height: var(--tags-view-height);
+  background-color: var(--tag-background-color);
+  box-shadow: 0 2px 8px 0 rgba(135, 118, 114, 0.15);
+
+  .container-left {
+    width: 45px;
+    line-height: var(--tags-view-height);
+    text-align: center;
+    cursor: pointer;
+    border-right: 1px solid #e7edf1;
+  }
+
+  .container-right {
+    display: flex;
+    width: 220px;
+    line-height: var(--tags-view-height);
+    border-left: 1px solid #e7edf1;
+
+    & > div {
+      text-align: center;
+      cursor: pointer;
+      flex: 1;
+    }
+  }
+
+  .tags-view-wrapper {
+    height: var(--tags-view-height);
+
+    .tags-view-item {
+      position: relative;
+      top: -1px;
+      display: inline-block;
+      height: var(--tags-view-height);
+      padding: 0 40px 0 20px;
+      font-size: 14px;
+      line-height: var(--tags-view-height);
+      color: #495060;
+      color: #333;
+      cursor: pointer;
+      background: #fff;
+      background-color: #f7f5f2;
+      border: 1px solid #e7edf1;
+
+      &.active {
+        position: relative;
+        background-color: var(--tag-active-background-color);
+
+        &::before {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 100%;
+          height: 3px;
+          background: var(--main-color);
+          content: '';
+        }
+      }
+    }
+  }
+
+  .contextmenu {
+    position: fixed;
+    z-index: 100;
+    padding: 5px 0;
+    margin: 0;
+    font-size: 12px;
+    font-weight: 400;
+    color: #333;
+    list-style-type: none;
+    background: #fff;
+    border-radius: 4px;
+    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
+
+    li {
+      padding: 7px 16px;
+      margin: 0;
+      cursor: pointer;
+
+      &:hover {
+        background: #eee;
+      }
+    }
+  }
+}
+//reset element css of el-icon-close
+.tags-view-wrapper {
+  .tags-view-item {
+    .el-icon-close {
+      position: absolute;
+      top: 50%;
+      right: 0;
+      width: 18px;
+      height: 18px;
+      color: #bfc7cd;
+      text-align: center;
+      vertical-align: 2px;
+      border-radius: 50%;
+      transform: translate(-50%, -50%);
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+      transform-origin: 100% 50%;
+
+      &::before {
+        display: inline-block;
+        vertical-align: -2px;
+      }
+
+      &:hover {
+        color: #fff;
+        background-color: #b4bccc;
+      }
+    }
+  }
+}
+
+.hover-container {
+  color: #818a91;
+  cursor: pointer;
+  transition: background 0.2s;
+
+  &:hover {
+    background: #f6f6f6;
+  }
+}
+</style>

src/layout/components/UserInfo/index.vue

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