refactor(projects): 精简版+动态路由权限初步

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

@@ -1,140 +0,0 @@
-<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

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

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

@@ -1,113 +0,0 @@
-<template>
-  <div v-if="theme.multiTabStyle.mode === 'chrome'" ref="tabRef" class="flex items-end h-full">
-    <chrome-tab
-      v-for="(item, index) 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"
-      :is-last="index === app.multiTab.routes.length - 1"
-      @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'" ref="tabRef" 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 { ref, reactive, nextTick, watch } 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';
-
-interface Emits {
-  (e: 'scroll', clientX: number): void;
-}
-
-const emit = defineEmits<Emits>();
-
-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 });
-}
-
-// 获取当前激活的tab的clientX
-const tabRef = ref<HTMLElement | null>(null);
-async function getActiveTabClientX() {
-  await nextTick();
-  const index = app.activeMultiTabIndex;
-  if (tabRef.value) {
-    const activeTabElement = tabRef.value.children[index];
-    const { x, width } = activeTabElement.getBoundingClientRect();
-    const clientX = x + width / 2;
-    setTimeout(() => {
-      emit('scroll', clientX);
-    }, 50);
-  }
-}
-
-// 右键菜单
-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);
-});
-
-watch(
-  () => app.activeMultiTabIndex,
-  () => {
-    getActiveTabClientX();
-  },
-  {
-    immediate: true
-  }
-);
-</script>
-<style scoped></style>

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

@@ -1,35 +0,0 @@
-<template>
-  <hover-container class="w-64px h-full" tooltip-content="重新加载" placement="bottom-end" @click="handleRefresh">
-    <icon-mdi-refresh class="text-18px" :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

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

src/layouts/common/GlobalTab/index.vue

@@ -1,59 +0,0 @@
-<template>
-  <div class="multi-tab flex-center w-full pl-16px" :style="{ height: multiTabHeight }">
-    <div ref="bsWrapperRef" class="flex-1-hidden h-full">
-      <better-scroll ref="bsScroll" :options="{ scrollX: true, scrollY: false, click: isMobile }">
-        <multi-tab @scroll="handleScroll" />
-      </better-scroll>
-    </div>
-    <reload-button />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-import { useRoute } from 'vue-router';
-import { useElementBounding } from '@vueuse/core';
-import { useAppStore } from '@/store';
-import { useLayoutConfig, routeFullPathWatcher, useIsMobile } from '@/composables';
-import { BetterScroll } from '@/components';
-import type { ExposeBetterScroll } from '@/interface';
-import { MultiTab, ReloadButton } from './components';
-
-const route = useRoute();
-const { initMultiTab, addMultiTab, setActiveMultiTab } = useAppStore();
-const { multiTabHeight } = useLayoutConfig();
-const isMobile = useIsMobile();
-
-const bsWrapperRef = ref<HTMLElement | null>(null);
-const { width: bsWrapperWidth, left: bsWrapperLeft } = useElementBounding(bsWrapperRef);
-
-const bsScroll = ref<ExposeBetterScroll | null>(null);
-
-function handleScroll(clientX: number) {
-  const currentX = clientX - bsWrapperLeft.value;
-  const deltaX = currentX - bsWrapperWidth.value / 2;
-  if (bsScroll.value) {
-    const { maxScrollX, x: leftX } = bsScroll.value.bsInstance;
-    const rightX = maxScrollX - leftX;
-    const update = deltaX > 0 ? Math.max(-deltaX, rightX) : Math.min(-deltaX, -leftX);
-    bsScroll.value?.bsInstance.scrollBy(update, 0, 300);
-  }
-}
-
-function init() {
-  initMultiTab();
-}
-
-routeFullPathWatcher(fullPath => {
-  addMultiTab(route);
-  setActiveMultiTab(fullPath);
-});
-
-// 初始化
-init();
-</script>
-<style scoped>
-.multi-tab {
-  box-shadow: 0 1px 2px rgb(0 21 41 / 8%);
-}
-</style>