refactor(components): blankLayout引入GlobalContent

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

@@ -0,0 +1,140 @@
+<template>
+  <n-dropdown
+    :show="dropdownVisible"
+    :options="options"
+    placement="bottom-start"
+    :x="x"
+    :y="y"
+    @clickoutside="hide"
+    @select="handleDropdown"
+  />
+</template>
+
+<script lang="ts" setup>
+import { computed, watch } from 'vue';
+import { NDropdown } from 'naive-ui';
+import type { DropdownOption } from 'naive-ui';
+import { useAppStore } from '@/store';
+import { useBoolean } from '@/hooks';
+import { ROUTE_HOME } from '@/router';
+import { iconifyRender } from '@/utils';
+
+interface Props {
+  /** 右键菜单可见性 */
+  visible?: boolean;
+  /** 当前是否是路由首页 */
+  isRouteHome?: boolean;
+  /** 当前路由路径 */
+  currentPath?: string;
+  /** 鼠标x坐标 */
+  x: number;
+  /** 鼠标y坐标 */
+  y: number;
+}
+
+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,
+  isRouteHome: false,
+  currentPath: ''
+});
+
+const emit = defineEmits<{
+  (e: 'update:visible', visible: boolean): void;
+}>();
+
+const app = useAppStore();
+const { handleReload, removeMultiTab, clearMultiTab, clearLeftMultiTab, clearRightMultiTab } = useAppStore();
+const { bool: dropdownVisible, setTrue: show, setFalse: hide } = useBoolean(props.visible);
+
+const options = computed<Option[]>(() => [
+  {
+    label: '重新加载',
+    key: 'reload-current',
+    disabled: props.currentPath !== app.multiTab.activeRoute,
+    icon: iconifyRender('ant-design:reload-outlined')
+  },
+  {
+    label: '关闭',
+    key: 'close-current',
+    disabled: props.currentPath === ROUTE_HOME.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',
+    () => {
+      handleReload();
+    }
+  ],
+  [
+    'close-current',
+    () => {
+      removeMultiTab(props.currentPath);
+    }
+  ],
+  [
+    'close-other',
+    () => {
+      clearMultiTab([props.currentPath]);
+    }
+  ],
+  [
+    'close-left',
+    () => {
+      clearLeftMultiTab(props.currentPath);
+    }
+  ],
+  [
+    'close-right',
+    () => {
+      clearRightMultiTab(props.currentPath);
+    }
+  ]
+]);
+
+function handleDropdown(optionKey: string) {
+  const key = optionKey as DropdownKey;
+  const actionFunc = actionMap.get(key);
+  if (actionFunc) {
+    actionFunc();
+  }
+  hide();
+}
+
+watch(
+  () => props.visible,
+  newValue => {
+    if (newValue) {
+      show();
+    } else {
+      hide();
+    }
+  }
+);
+watch(dropdownVisible, newValue => {
+  emit('update:visible', newValue);
+});
+</script>
+<style scoped></style>

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

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

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

@@ -0,0 +1,80 @@
+<template>
+  <div v-if="theme.multiTabStyle.mode === 'chrome'" class="flex items-end h-full">
+    <chrome-tab
+      v-for="item in app.multiTab.routes"
+      :key="item.path"
+      :is-active="app.multiTab.activeRoute === item.fullPath"
+      :primary-color="theme.themeColor"
+      :closable="item.name !== ROUTE_HOME.name"
+      :dark-mode="theme.darkMode"
+      @click="handleClickTab(item.fullPath)"
+      @close="removeMultiTab(item.fullPath)"
+      @contextmenu="handleContextMenu($event, item.fullPath)"
+    >
+      {{ item.meta?.title }}
+    </chrome-tab>
+  </div>
+  <div v-if="theme.multiTabStyle.mode === 'button'" class="flex-y-center h-full">
+    <button-tab
+      v-for="item in app.multiTab.routes"
+      :key="item.path"
+      class="mr-10px"
+      :is-active="app.multiTab.activeRoute === item.fullPath"
+      :primary-color="theme.themeColor"
+      :closable="item.name !== ROUTE_HOME.name"
+      :dark-mode="theme.darkMode"
+      @click="handleClickTab(item.fullPath)"
+      @close="removeMultiTab(item.fullPath)"
+      @contextmenu="handleContextMenu($event, item.fullPath)"
+    >
+      {{ item.meta?.title }}
+    </button-tab>
+  </div>
+  <context-menu
+    :visible="dropdownVisible"
+    :current-path="dropdownConfig.currentPath"
+    :x="dropdownConfig.x"
+    :y="dropdownConfig.y"
+  />
+</template>
+
+<script setup lang="ts">
+import { reactive, nextTick } from 'vue';
+import { useEventListener } from '@vueuse/core';
+import { useThemeStore, useAppStore } from '@/store';
+import { ROUTE_HOME } from '@/router';
+import { ChromeTab, ButtonTab } from '@/components';
+import { useBoolean } from '@/hooks';
+import { setTabRouteStorage } from '@/utils';
+import { ContextMenu } from './components';
+
+const theme = useThemeStore();
+const app = useAppStore();
+const { removeMultiTab, handleClickTab } = useAppStore();
+const { bool: dropdownVisible, setTrue: showDropdown, setFalse: hideDropdown } = useBoolean();
+
+const dropdownConfig = reactive({
+  x: 0,
+  y: 0,
+  currentPath: ''
+});
+function setDropdownConfig(x: number, y: number, currentPath: string) {
+  Object.assign(dropdownConfig, { x, y, currentPath });
+}
+
+function handleContextMenu(e: MouseEvent, fullPath: string) {
+  e.preventDefault();
+  const { clientX, clientY } = e;
+  hideDropdown();
+  setDropdownConfig(clientX, clientY, fullPath);
+  nextTick(() => {
+    showDropdown();
+  });
+}
+
+/** 页面离开时缓存多页签数据 */
+useEventListener(window, 'beforeunload', () => {
+  setTabRouteStorage(app.multiTab.routes);
+});
+</script>
+<style scoped></style>

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

@@ -0,0 +1,35 @@
+<template>
+  <hover-container class="w-64px h-full" tooltip-content="重新加载" placement="bottom-end" @click="handleRefresh">
+    <icon-mdi-refresh class="text-16px" :class="{ 'reload-animation': loading }" />
+  </hover-container>
+</template>
+
+<script lang="ts" setup>
+import { HoverContainer } from '@/components';
+import { useAppStore } from '@/store';
+import { useLoading } from '@/hooks';
+
+const { handleReload } = useAppStore();
+const { loading, startLoading, endLoading } = useLoading();
+
+function handleRefresh() {
+  startLoading();
+  handleReload();
+  setTimeout(() => {
+    endLoading();
+  }, 1000);
+}
+</script>
+<style scoped>
+.reload-animation {
+  animation: rotate 1s;
+}
+@keyframes rotate {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

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

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

src/layouts/common/GlobalTab/index.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="multi-tab flex-center w-full pl-16px" :style="{ height: multiTabHeight }">
+    <div class="flex-1-hidden h-full">
+      <better-scroll :options="{ scrollX: true, scrollY: false, click: isMobile }">
+        <multi-tab />
+      </better-scroll>
+    </div>
+    <reload-button />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useRoute } from 'vue-router';
+import { useAppStore } from '@/store';
+import { useLayoutConfig, routeFullPathWatcher, useIsMobile } from '@/composables';
+import { BetterScroll } from '@/components';
+import { MultiTab, ReloadButton } from './components';
+
+const route = useRoute();
+const { initMultiTab, addMultiTab, setActiveMultiTab } = useAppStore();
+const { multiTabHeight } = useLayoutConfig();
+const isMobile = useIsMobile();
+
+function init() {
+  initMultiTab();
+}
+
+routeFullPathWatcher(fullPath => {
+  addMultiTab(route);
+  setActiveMultiTab(fullPath);
+});
+
+// 初始化
+init();
+</script>
+<style scoped>
+.multi-tab {
+  box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
+}
+</style>