feat(projects): 迁移多页签

src/layouts/common/GlobalTab/components/ReloadButton/index.vue

@@ -0,0 +1,23 @@
+<template>
+  <hover-container class="w-64px h-full" tooltip-content="重新加载" placement="bottom-end" @click="handleRefresh">
+    <icon-mdi-refresh class="text-18px" :class="{ 'animate-spin': loading }" />
+  </hover-container>
+</template>
+
+<script setup lang="ts">
+import { HoverContainer } from '@/components';
+import { useAppStore } from '@/store';
+import { useLoading } from '@/hooks';
+
+const app = useAppStore();
+const { loading, startLoading, endLoading } = useLoading();
+
+function handleRefresh() {
+  startLoading();
+  app.reloadPage();
+  setTimeout(() => {
+    endLoading();
+  }, 1000);
+}
+</script>
+<style scoped></style>

src/layouts/common/GlobalTab/components/TabDetail/components/ContextMenu.vue

@@ -0,0 +1,135 @@
+<template>
+  <n-dropdown
+    :show="dropdownVisible"
+    :options="options"
+    placement="bottom-start"
+    :x="x"
+    :y="y"
+    @clickoutside="hide"
+    @select="handleDropdown"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { NDropdown } from 'naive-ui';
+import type { DropdownOption } from 'naive-ui';
+import { useAppStore, useTabStore } from '@/store';
+import { iconifyRender } from '@/utils';
+
+interface Props {
+  /** 右键菜单可见性 */
+  visible?: boolean;
+  /** 当前路由路径 */
+  currentPath?: string;
+  /** 鼠标x坐标 */
+  x: number;
+  /** 鼠标y坐标 */
+  y: number;
+}
+
+interface Emits {
+  (e: 'update:visible', visible: boolean): void;
+}
+
+type DropdownKey = 'reload-current' | 'close-current' | 'close-other' | 'close-left' | 'close-right' | 'close-all';
+type Option = DropdownOption & {
+  key: DropdownKey;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  visible: false,
+  currentPath: ''
+});
+
+const emit = defineEmits<Emits>();
+
+const app = useAppStore();
+const tab = useTabStore();
+
+const dropdownVisible = computed({
+  get() {
+    return props.visible;
+  },
+  set(visible: boolean) {
+    emit('update:visible', visible);
+  }
+});
+
+function hide() {
+  dropdownVisible.value = false;
+}
+
+const options = computed<Option[]>(() => [
+  {
+    label: '重新加载',
+    key: 'reload-current',
+    disabled: props.currentPath !== tab.activeTab,
+    icon: iconifyRender('ant-design:reload-outlined')
+  },
+  {
+    label: '关闭',
+    key: 'close-current',
+    disabled: props.currentPath === tab.homeTab.path,
+    icon: iconifyRender('ant-design:close-outlined')
+  },
+  {
+    label: '关闭其他',
+    key: 'close-other',
+    icon: iconifyRender('ant-design:column-width-outlined')
+  },
+  {
+    label: '关闭左侧',
+    key: 'close-left',
+    icon: iconifyRender('mdi:format-horizontal-align-left')
+  },
+  {
+    label: '关闭右侧',
+    key: 'close-right',
+    icon: iconifyRender('mdi:format-horizontal-align-right')
+  }
+]);
+
+const actionMap = new Map<DropdownKey, () => void>([
+  [
+    'reload-current',
+    () => {
+      app.reloadPage();
+    }
+  ],
+  [
+    'close-current',
+    () => {
+      tab.removeTab(props.currentPath);
+    }
+  ],
+  [
+    'close-other',
+    () => {
+      tab.clearTab([props.currentPath]);
+    }
+  ],
+  [
+    'close-left',
+    () => {
+      tab.clearLeftTab(props.currentPath);
+    }
+  ],
+  [
+    'close-right',
+    () => {
+      tab.clearRightTab(props.currentPath);
+    }
+  ]
+]);
+
+function handleDropdown(optionKey: string) {
+  const key = optionKey as DropdownKey;
+  const actionFunc = actionMap.get(key);
+  if (actionFunc) {
+    actionFunc();
+  }
+  hide();
+}
+</script>
+<style scoped></style>

src/layouts/common/GlobalTab/components/TabDetail/components/index.ts

@@ -0,0 +1,3 @@
+import ContextMenu from './ContextMenu.vue';
+
+export { ContextMenu };

src/layouts/common/GlobalTab/components/TabDetail/index.vue

@@ -0,0 +1,102 @@
+<template>
+  <div ref="tabRef" class="flex items-end h-full" :class="[isChromeMode ? 'flex items-end' : 'flex-y-center']">
+    <component
+      :is="activeComponent"
+      v-for="(item, index) in tab.tabs"
+      :key="item.path"
+      :is-active="tab.activeTab === item.path"
+      :primary-color="theme.themeColor"
+      :closable="item.path !== tab.homeTab.path"
+      :dark-mode="theme.darkMode"
+      :class="{ '!mr-0': isChromeMode && index === tab.tabs.length - 1, 'mr-10px': !isChromeMode }"
+      @click="tab.handleClickTab(item.path)"
+      @close="tab.removeTab(item.path)"
+      @contextmenu="handleContextMenu($event, item.path)"
+    >
+      {{ item.meta.title }}
+    </component>
+  </div>
+  <context-menu
+    v-model:visible="dropdown.visible"
+    :current-path="dropdown.currentPath"
+    :x="dropdown.x"
+    :y="dropdown.y"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, nextTick, watch } from 'vue';
+import { useEventListener } from '@vueuse/core';
+import { ChromeTab, ButtonTab } from '@/components';
+import { useThemeStore, useTabStore } from '@/store';
+import { setTabRoutes } from '@/utils';
+import { ContextMenu } from './components';
+
+interface Emits {
+  (e: 'scroll', clientX: number): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const theme = useThemeStore();
+const tab = useTabStore();
+
+const isChromeMode = computed(() => theme.tab.mode === 'chrome');
+const activeComponent = computed(() => (isChromeMode.value ? ChromeTab : ButtonTab));
+
+// 获取当前激活的tab的clientX
+const tabRef = ref<HTMLElement>();
+async function getActiveTabClientX() {
+  await nextTick();
+  if (tabRef.value) {
+    const activeTabElement = tabRef.value.children[tab.activeTabIndex];
+    const { x, width } = activeTabElement.getBoundingClientRect();
+    const clientX = x + width / 2;
+    setTimeout(() => {
+      emit('scroll', clientX);
+    }, 50);
+  }
+}
+
+const dropdown = reactive({
+  visible: false,
+  x: 0,
+  y: 0,
+  currentPath: ''
+});
+function showDropdown() {
+  dropdown.visible = true;
+}
+function hideDropdown() {
+  dropdown.visible = false;
+}
+function setDropdown(x: number, y: number, currentPath: string) {
+  Object.assign(dropdown, { x, y, currentPath });
+}
+
+/** 点击右键菜单 */
+async function handleContextMenu(e: MouseEvent, path: string) {
+  e.preventDefault();
+  const { clientX, clientY } = e;
+  hideDropdown();
+  setDropdown(clientX, clientY, path);
+  await nextTick();
+  showDropdown();
+}
+
+watch(
+  () => tab.activeTabIndex,
+  () => {
+    getActiveTabClientX();
+  },
+  {
+    immediate: true
+  }
+);
+
+/** 页面离开时缓存多页签数据 */
+useEventListener(window, 'beforeunload', () => {
+  setTabRoutes(tab.tabs);
+});
+</script>
+<style scoped></style>

src/layouts/common/GlobalTab/components/index.ts

@@ -0,0 +1,4 @@
+import TabDetail from './TabDetail/index.vue';
+import ReloadButton from './ReloadButton/index.vue';
+
+export { TabDetail, ReloadButton };

src/layouts/common/GlobalTab/index.vue

@@ -1,9 +1,60 @@
 <template>
-  <dark-mode-container class="global-tab flex-y-center h-full"></dark-mode-container>
+  <dark-mode-container class="global-tab flex-y-center w-full pl-16px" :style="{ height: theme.tab.height + 'px' }">
+    <div ref="bsWrapper" class="flex-1-hidden h-full">
+      <better-scroll ref="bsScroll" :options="{ scrollX: true, scrollY: false, click: isMobile }">
+        <tab-detail @scroll="handleScroll" />
+      </better-scroll>
+    </div>
+    <reload-button />
+  </dark-mode-container>
 </template>
 
 <script setup lang="ts">
-import { DarkModeContainer } from '@/components';
+import { ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { useElementBounding } from '@vueuse/core';
+import { DarkModeContainer, BetterScroll } from '@/components';
+import { useThemeStore, useTabStore } from '@/store';
+import { useIsMobile } from '@/composables';
+import type { ExposeBetterScroll } from '@/interface';
+import { TabDetail, ReloadButton } from './components';
+
+const route = useRoute();
+const theme = useThemeStore();
+const tab = useTabStore();
+
+const bsWrapper = ref<HTMLElement>();
+const { width: bsWrapperWidth, left: bsWrapperLeft } = useElementBounding(bsWrapper);
+
+const bsScroll = ref<ExposeBetterScroll>();
+
+const isMobile = useIsMobile();
+
+function handleScroll(clientX: number) {
+  const currentX = clientX - bsWrapperLeft.value;
+  const deltaX = currentX - bsWrapperWidth.value / 2;
+  if (bsScroll.value) {
+    const { maxScrollX, x: leftX } = bsScroll.value.instance;
+    const rightX = maxScrollX - leftX;
+    const update = deltaX > 0 ? Math.max(-deltaX, rightX) : Math.min(-deltaX, -leftX);
+    bsScroll.value?.instance.scrollBy(update, 0, 300);
+  }
+}
+
+function init() {
+  tab.iniTabStore(route);
+}
+
+watch(
+  () => route.path,
+  () => {
+    tab.addTab(route);
+    tab.setActiveTab(route.path);
+  }
+);
+
+// 初始化
+init();
 </script>
 <style scoped>
 .global-tab {