@@@@@@

library/components/VabTabs/components/VabTabsSetting.vue

@@ -0,0 +1,59 @@
+<template>
+  <vab-dialog v-model="drawerVisible" append-to-body :title="translate('标签设置')" width="400px">
+    <el-form ref="form" label-position="top" :model="theme">
+      <el-form-item v-if="theme.showTabs" :label="translate('标签风格')">
+        <el-radio-group v-model="theme.tabsBarStyle">
+          <el-radio-button v-for="item in tabsBarStyleList" :key="item.value" :label="translate(item.label)" :value="item.value" />
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item :label="translate('标签图标')">
+        <el-switch v-model="theme.showTabsIcon" />
+      </el-form-item>
+      <el-form-item :label="translate('持久化标签')">
+        <el-switch v-model="persistenceTab" @change="handlePersistenceTab" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button type="primary" @click="handleSaveTheme">
+        {{ translate('保存') }}
+      </el-button>
+    </template>
+  </vab-dialog>
+</template>
+
+<script lang="ts" setup>
+import { translate } from '/@/i18n'
+import { useSettingsStore } from '/@/store/modules/settings'
+
+defineOptions({
+  name: 'VabTabsSetting',
+})
+
+const settingsStore = useSettingsStore()
+const { theme, persistenceTab } = storeToRefs(settingsStore)
+const { saveTheme, updateCaughtTabs } = settingsStore
+const drawerVisible = ref<boolean>(false)
+const tabsBarStyleList = ref<any>([
+  { label: '卡片', value: 'card' },
+  { label: '灵动', value: 'smart' },
+  { label: '圆滑', value: 'smooth' },
+  { label: '矩形', value: 'rect' },
+])
+
+const handleOpenSetting = () => {
+  drawerVisible.value = true
+}
+
+defineExpose({
+  handleOpenSetting,
+})
+
+const handlePersistenceTab = (value: any) => {
+  updateCaughtTabs(value)
+}
+
+const handleSaveTheme = () => {
+  saveTheme()
+  drawerVisible.value = false
+}
+</script>

library/components/VabTabs/index.vue

@@ -0,0 +1,695 @@
+<template>
+  <div class="vab-tabs">
+    <div class="vab-tabs-draggable">
+      <el-tabs
+        v-model="tabActive"
+        class="vab-tabs-content"
+        :class="{ ['vab-tabs-content-' + theme.tabsBarStyle]: true }"
+        @tab-click="handleTabClick"
+        @tab-remove="handleTabRemove"
+      >
+        <el-tab-pane v-for="item in visitedRoutes" :key="item" :closable="!isNoClosable(item)" :name="item.path">
+          <template #label>
+            <span class="vab-tabs-title" @contextmenu.prevent="openMenu(item)">
+              <template v-if="theme.showTabsIcon">
+                <vab-icon v-if="item.meta && item.meta.icon" :icon="item.meta.icon" :is-custom-svg="item.meta.isCustomSvg" />
+                <vab-icon v-else :icon="item.parentIcon" />
+              </template>
+              <span v-if="!isNoClosable(item)" @dblclick="handleTabRemove(item.path)">
+                {{ translate(item.meta.title) }}
+              </span>
+              <span v-else>
+                {{ translate(item.meta.title) }}
+              </span>
+            </span>
+          </template>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+
+    <el-dropdown
+      placement="bottom-end"
+      popper-class="vab-tabs-more-dropdown"
+      @command="handleCommand"
+      @visible-change="handleVisibleChange"
+    >
+      <span class="vab-tabs-more" :class="{ 'vab-tabs-more-active': active }">
+        <span class="vab-tabs-more-icon">
+          <i class="box box-t"></i>
+          <i class="box box-b"></i>
+        </span>
+      </span>
+      <template #dropdown>
+        <el-dropdown-menu class="tabs-more">
+          <el-dropdown-item command="refresh">
+            <vab-icon icon="refresh-line" />
+            <span>
+              {{ translate('刷新') }}
+            </span>
+          </el-dropdown-item>
+          <el-dropdown-item command="closeOthersTabs">
+            <vab-icon icon="close-line" />
+            <span>
+              {{ translate('关闭其他') }}
+            </span>
+          </el-dropdown-item>
+          <el-dropdown-item command="closeLeftTabs">
+            <vab-icon icon="arrow-left-line" />
+            <span>
+              {{ translate('关闭左侧') }}
+            </span>
+          </el-dropdown-item>
+          <el-dropdown-item command="closeRightTabs">
+            <vab-icon icon="arrow-right-line" />
+            <span>
+              {{ translate('关闭右侧') }}
+            </span>
+          </el-dropdown-item>
+          <el-dropdown-item command="closeAllTabs">
+            <vab-icon icon="close-line" />
+            <span>
+              {{ translate('关闭全部') }}
+            </span>
+          </el-dropdown-item>
+          <el-dropdown-item command="setting">
+            <vab-icon icon="settings-5-line" />
+            <span>
+              {{ translate('标签设置') }}
+            </span>
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+    <ul v-if="visible" class="contextmenu el-dropdown-menu" :style="{ left: left + 'px', top: top + 'px' }">
+      <li class="el-dropdown-menu__item" @click="refresh">
+        <vab-icon icon="refresh-line" />
+        <span>{{ translate('刷新') }}</span>
+      </li>
+      <li class="el-dropdown-menu__item" :class="{ 'is-disabled': visitedRoutes.length === 1 }" @click="closeOthersTabs">
+        <vab-icon icon="close-line" />
+        <span>{{ translate('关闭其他') }}</span>
+      </li>
+      <li class="el-dropdown-menu__item" :class="{ 'is-disabled': !visitedRoutes.indexOf(hoverRoute) }" @click="closeLeftTabs">
+        <vab-icon icon="arrow-left-line" />
+        <span>{{ translate('关闭左侧') }}</span>
+      </li>
+      <li
+        class="el-dropdown-menu__item"
+        :class="{
+          'is-disabled': visitedRoutes.indexOf(hoverRoute) === visitedRoutes.length - 1,
+        }"
+        @click="closeRightTabs"
+      >
+        <vab-icon icon="arrow-right-line" />
+        <span>{{ translate('关闭右侧') }}</span>
+      </li>
+      <li class="el-dropdown-menu__item" @click="closeAllTabs">
+        <vab-icon icon="close-line" />
+        <span>{{ translate('关闭全部') }}</span>
+      </li>
+    </ul>
+
+    <vab-tabs-setting ref="tabsSettingRef" />
+  </div>
+</template>
+
+<script setup>
+import Sortable from 'sortablejs'
+import { translate } from '/@/i18n'
+import { useRoutesStore } from '/@/store/modules/routes'
+import { useSettingsStore } from '/@/store/modules/settings'
+import { useTabsStore } from '/@/store/modules/tabs'
+import { moveElement } from '/@/utils/index'
+import { handleActivePath, handleTabs } from '/@/utils/routes'
+
+defineOptions({
+  name: 'VabTabs',
+})
+
+defineProps({
+  layout: {
+    type: String,
+    default: '',
+  },
+})
+
+const route = useRoute()
+const router = useRouter()
+const settingsStore = useSettingsStore()
+const { theme, device } = storeToRefs(settingsStore)
+const routesStore = useRoutesStore()
+const { getRoutes: routes } = storeToRefs(routesStore)
+const tabsStore = useTabsStore()
+const { getVisitedRoutes: visitedRoutes } = storeToRefs(tabsStore)
+const _visitedRoutes = ref([...visitedRoutes.value])
+const {
+  addVisitedRoute,
+  delVisitedRoute,
+  delOthersVisitedRoutes,
+  delLeftVisitedRoutes,
+  delRightVisitedRoutes,
+  delAllVisitedRoutes,
+  handleCaughtRoutes,
+  updateVisitedRoutes,
+} = tabsStore
+const tabActive = ref('')
+const active = ref(false)
+const hoverRoute = ref()
+const visible = ref(false)
+const top = ref(0)
+const left = ref(0)
+const tabsSettingRef = ref(null)
+
+const isActive = (path) => path === handleActivePath(route, true)
+const isNoClosable = (tag) => tag.meta && tag.meta.noClosable
+
+const handleTabClick = (tab) => {
+  if (!isActive(tab.name)) router.push(visitedRoutes.value[tab.index])
+}
+const handleVisibleChange = (value) => {
+  active.value = value
+}
+
+const initNoCLosableTabs = (routes) => {
+  routes.forEach((_route) => {
+    if (_route.meta && _route.meta.noClosable) addTabs(_route)
+    if (_route.children) initNoCLosableTabs(_route.children)
+  })
+}
+
+const handleCommand = (command) => {
+  switch (command) {
+    case 'refresh': {
+      refresh()
+      break
+    }
+    case 'closeOthersTabs': {
+      closeOthersTabs()
+      break
+    }
+    case 'closeLeftTabs': {
+      closeLeftTabs()
+      break
+    }
+    case 'closeRightTabs': {
+      closeRightTabs()
+      break
+    }
+    case 'closeAllTabs': {
+      closeAllTabs()
+      break
+    }
+    case 'setting': {
+      tabsSettingRef.value.handleOpenSetting()
+    }
+  }
+}
+
+/**
+ * 刷新当前标签页
+ */
+const refresh = async () => {
+  if (hoverRoute.value) {
+    await router.push(hoverRoute.value)
+    await $pub('reload-router-view', hoverRoute.value.name)
+  } else await $pub('reload-router-view')
+  await $pub('refresh-rotate')
+  await closeMenu()
+}
+
+/**
+ * 添加标签页
+ * @param tag route
+ * @returns {Promise<void>}
+ */
+const addTabs = async (tag) => {
+  const tab = handleTabs(tag)
+  if (tab) {
+    await addVisitedRoute(tab)
+    tabActive.value = tab.path
+  }
+}
+
+/**
+ * 根据原生路径删除标签中的标签
+ * @param rawPath 原生路径
+ * @returns {Promise<void>}
+ */
+const handleTabRemove = async (rawPath) => {
+  if (isActive(rawPath)) await toLastTab()
+  await delVisitedRoute(rawPath)
+}
+
+/**
+ * 删除其他标签页
+ * @returns {Promise<void>}
+ */
+const closeOthersTabs = async () => {
+  if (hoverRoute.value) {
+    await router.push(hoverRoute.value)
+    await delOthersVisitedRoutes(hoverRoute.value.path)
+  } else await delOthersVisitedRoutes(handleActivePath(route, true))
+  await closeMenu()
+}
+/**
+ * 删除左侧标签页
+ * @returns {Promise<void>}
+ */
+const closeLeftTabs = async () => {
+  if (hoverRoute.value) {
+    await router.push(hoverRoute.value)
+    await delLeftVisitedRoutes(hoverRoute.value.path)
+  } else await delLeftVisitedRoutes(handleActivePath(route, true))
+  await closeMenu()
+}
+
+/**
+ * 删除右侧标签页
+ * @returns {Promise<void>}
+ */
+const closeRightTabs = async () => {
+  if (hoverRoute.value) {
+    await router.push(hoverRoute.value)
+    await delRightVisitedRoutes(hoverRoute.value.path)
+  } else await delRightVisitedRoutes(handleActivePath(route, true))
+  await closeMenu()
+}
+
+/**
+ * 删除所有标签页
+ * @returns {Promise<void>}
+ */
+const closeAllTabs = async () => {
+  await delAllVisitedRoutes()
+  await toLastTab()
+  await closeMenu()
+}
+
+/**
+ * 跳转最后一个标签页
+ */
+const toLastTab = async () => {
+  const latestView = visitedRoutes.value.findLast((item) => item.path !== handleActivePath(route, true))
+  if (latestView) await router.push(latestView)
+  else await router.push('/')
+}
+
+const { x, y } = useMouse()
+
+const openMenu = (item) => {
+  left.value = x.value
+  top.value = y.value
+  hoverRoute.value = item
+  hoverRoute.value.path = item.path
+  visible.value = true
+}
+
+const closeMenu = () => {
+  visible.value = false
+  hoverRoute.value = null
+}
+
+let sortable
+const handleTabDrag = () => {
+  if (theme.value.tabDrag && device.value != 'mobile') {
+    const navElement = document.querySelector('.el-tabs__nav.is-top')
+    if (navElement)
+      sortable = new Sortable(navElement, {
+        animation: 150,
+        easing: 'cubic-bezier(1, 0, 0, 1)',
+        draggable: '.el-tabs__item.is-top.is-closable',
+        filter: '.el-tabs__active-bar.is-top',
+        onEnd(e) {
+          const routes = moveElement([...visitedRoutes.value], parseInt(e.oldIndex) - 1, parseInt(e.newIndex) - 1)
+          updateVisitedRoutes(routes)
+          _visitedRoutes.value = routes
+        },
+      })
+  }
+}
+
+watchEffect(() => {
+  if (visible.value) document.body.addEventListener('click', closeMenu)
+  else document.body.removeEventListener('click', closeMenu)
+})
+
+watch(
+  () => route.fullPath,
+  () => {
+    initNoCLosableTabs(routes.value)
+    addTabs(route)
+  },
+  {
+    immediate: true,
+  }
+)
+
+watch(
+  theme.value,
+  () => {
+    if (theme.value.tabDrag) handleTabDrag()
+    else sortable && sortable.destroy()
+  },
+  {
+    immediate: true,
+  }
+)
+
+onBeforeMount(() => {
+  window.addEventListener('beforeunload', handleCaughtRoutes)
+})
+
+onMounted(() => {
+  nextTick(() => {
+    handleTabDrag()
+  })
+})
+</script>
+
+<style lang="scss">
+.vab-tabs-more-dropdown {
+  width: 135px;
+  padding: calc(var(--el-padding) / 2) !important;
+
+  .el-dropdown-menu {
+    padding: 0;
+
+    &__item {
+      border-radius: var(--el-border-radius-base);
+    }
+  }
+
+  &[data-popper-placement='bottom-end'] {
+    .el-popper__arrow {
+      left: 120px !important;
+    }
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+.vab-tabs {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: var(--el-tabs-height);
+  padding-right: var(--el-padding);
+  padding-left: var(--el-padding);
+  user-select: none;
+  background: var(--el-color-white);
+
+  .vab-tabs-draggable {
+    width: calc(100% - var(--el-margin));
+  }
+
+  :deep() {
+    .fold-unfold {
+      margin-right: var(--el-margin);
+    }
+
+    .el-tabs {
+      &__nav-wrap::after {
+        background: none;
+      }
+
+      &__item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding-right: var(--el-padding) !important;
+        padding-left: var(--el-padding) !important;
+
+        .is-icon-close {
+          width: 14px !important;
+          margin-top: 1px;
+          margin-right: 0 !important;
+
+          svg {
+            margin-right: 0 !important;
+          }
+        }
+      }
+
+      &__active-bar {
+        display: none;
+      }
+
+      &__nav-next,
+      &__nav-prev {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: var(--el-tab-item-height);
+      }
+
+      &__content {
+        display: none;
+        height: 0;
+        opacity: 0;
+      }
+    }
+  }
+
+  &-content {
+    width: 100%;
+
+    &-card {
+      height: var(--el-tab-item-height);
+
+      :deep() {
+        .el-tabs__header {
+          margin: 0 0 1px 0;
+
+          .el-tabs__item {
+            height: var(--el-tab-item-height);
+            margin-right: 5px;
+            border: 1px solid var(--el-border-color) !important;
+            border-radius: var(--el-border-radius-base) !important;
+
+            &.is-active {
+              color: var(--el-color-primary);
+              background: var(--el-color-primary-light-9);
+            }
+          }
+        }
+      }
+    }
+
+    &-smart {
+      height: var(--el-tab-item-height);
+
+      :deep() {
+        .el-tabs__header {
+          margin: 0 0 1px 0;
+
+          .el-tabs__item {
+            height: var(--el-tab-item-height);
+            margin-right: 5px;
+            border: 0;
+            border-top-left-radius: var(--el-border-radius-base);
+            border-top-right-radius: var(--el-border-radius-base);
+
+            &.is-active {
+              background: var(--el-color-primary-light-9);
+              outline: none;
+
+              &:after {
+                width: 100%;
+                transition: var(--el-transition);
+              }
+            }
+
+            &:after {
+              position: absolute;
+              bottom: 0;
+              left: 0;
+              width: 0;
+              height: 2px;
+              content: '';
+              background-color: var(--el-color-primary);
+              transition: var(--el-transition);
+            }
+
+            &:hover {
+              background: var(--el-color-primary-light-9);
+
+              &:after {
+                width: 100%;
+                transition: var(--el-transition);
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &-smooth {
+      height: var(--el-tab-item-height);
+
+      :deep() {
+        .el-tabs__nav {
+          margin-top: 3.5px;
+        }
+
+        .el-tabs__header {
+          margin: 0 0 -7px 0;
+
+          .el-tabs__item {
+            //  min-width: 120px;
+            height: calc(var(--el-tab-item-height) + 4px);
+            margin-right: -18px;
+
+            &:hover {
+              z-index: 999;
+              color: var(--el-color-grey);
+              background: var(--el-border-color);
+              mask: url('/@/assets/tabs_images/vab-tab.png');
+              mask-layer: url('/@/assets/tabs_images/vab-tab.png');
+              mask-size: 100% 100%;
+            }
+
+            .vab-tabs-title {
+              flex: 1;
+              margin: 0 calc(var(--el-margin) / 2) 0 calc(var(--el-margin) / 2);
+            }
+
+            &.is-active {
+              color: var(--el-color-primary);
+              background: var(--el-color-primary-light-9);
+              mask: url('/@/assets/tabs_images/vab-tab.png');
+              mask-layer: url('/@/assets/tabs_images/vab-tab.png');
+              mask-size: 100% 100%;
+
+              &:hover {
+                color: var(--el-color-primary);
+                background: var(--el-color-primary-light-9);
+                mask: url('/@/assets/tabs_images/vab-tab.png');
+                mask-size: 100% 100%;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &-rect {
+      height: var(--el-tags-height);
+
+      :deep() {
+        .el-tabs__header {
+          margin: -1px 0 0 0;
+
+          .el-tabs__item {
+            height: var(--el-tabs-height);
+
+            &.is-active {
+              background: var(--el-color-primary-light-9);
+            }
+          }
+
+          .el-tabs__nav-prev,
+          .el-tabs__nav-next {
+            height: var(--el-tabs-height);
+            line-height: var(--el-tabs-height);
+          }
+        }
+      }
+    }
+  }
+
+  .contextmenu {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 10;
+    padding: calc(var(--el-padding) / 2);
+
+    box-shadow: var(--el-box-shadow);
+
+    i {
+      margin-right: 3px;
+    }
+
+    .el-dropdown-menu__item:hover {
+      color: var(--el-color-primary);
+      background-color: var(--el-color-primary-light-9);
+      border-radius: var(--el-border-radius-base);
+    }
+  }
+
+  &-more {
+    position: relative;
+    box-sizing: border-box;
+    display: block;
+    text-align: left;
+
+    &-active,
+    &:hover {
+      &:after {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        height: 0;
+        content: '';
+      }
+
+      .vab-tabs-more-icon {
+        transform: rotate(90deg);
+
+        .box-t {
+          &:before {
+            transform: rotate(45deg);
+          }
+        }
+
+        .box:before,
+        .box:after {
+          background: var(--el-color-primary);
+        }
+      }
+    }
+
+    &-icon {
+      display: inline-block;
+      color: var(--el-color-grey);
+      cursor: pointer;
+      transition: transform 0.3s ease-out;
+
+      .box {
+        position: relative;
+        display: block;
+        width: 14px;
+        height: 8px;
+
+        &:before {
+          position: absolute;
+          top: 2px;
+          left: 0;
+          width: 6px;
+          height: 6px;
+          content: '';
+          background: var(--el-color-grey);
+        }
+
+        &:after {
+          position: absolute;
+          top: 2px;
+          left: 8px;
+          width: 6px;
+          height: 6px;
+          content: '';
+          background: var(--el-color-grey);
+        }
+      }
+
+      .box-t {
+        &:before {
+          transition: transform 0.3s ease-out 0.3s;
+        }
+      }
+    }
+  }
+}
+</style>