refactor(projects): all file and folder use kebab-case

src/layouts/common/global-tab/components/index.ts

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

src/layouts/common/global-tab/components/reload-button/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <hover-container class="w-64px h-full" tooltip-content="重新加载" placement="bottom-end" @click="handleRefresh">
+    <icon-mdi-refresh class="text-22px" :class="{ 'animate-spin': loading }" />
+  </hover-container>
+</template>
+
+<script setup lang="ts">
+import { useRoute } from 'vue-router';
+import { useAppStore, useRouteStore } from '@/store';
+import { useLoading } from '@/hooks';
+defineOptions({ name: 'ReloadButton' });
+
+const app = useAppStore();
+const routeStore = useRouteStore();
+const route = useRoute();
+const { loading, startLoading, endLoading } = useLoading();
+
+function handleRefresh() {
+  const isCached = routeStore.cacheRoutes.includes(String(route.name));
+  if (isCached) {
+    routeStore.removeCacheRoute(route.name as AuthRoute.AllRouteKey);
+  }
+  startLoading();
+  app.reloadPage();
+  setTimeout(() => {
+    if (isCached) {
+      routeStore.addCacheRoute(route.name as AuthRoute.AllRouteKey);
+    }
+    endLoading();
+  }, 1000);
+}
+</script>
+
+<style scoped></style>

src/layouts/common/global-tab/components/tab-detail/components/context-menu.vue

@@ -0,0 +1,151 @@
+<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 type { DropdownOption } from 'naive-ui';
+import { useAppStore, useTabStore } from '@/store';
+import { useIconRender } from '@/composables';
+
+defineOptions({ name: 'ContextMenu' });
+
+interface Props {
+  /** 右键菜单可见性 */
+  visible?: boolean;
+  /** 当前路由路径 */
+  currentPath?: string;
+  /** 是否固定在tab卡不可关闭  */
+  affix?: boolean;
+  /** 鼠标x坐标 */
+  x: number;
+  /** 鼠标y坐标 */
+  y: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  visible: false,
+  currentPath: ''
+});
+
+interface Emits {
+  (e: 'update:visible', visible: boolean): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const app = useAppStore();
+const tab = useTabStore();
+const { iconRender } = useIconRender();
+
+const dropdownVisible = computed({
+  get() {
+    return props.visible;
+  },
+  set(visible: boolean) {
+    emit('update:visible', visible);
+  }
+});
+
+function hide() {
+  dropdownVisible.value = false;
+}
+
+type DropdownKey = 'reload-current' | 'close-current' | 'close-other' | 'close-left' | 'close-right' | 'close-all';
+type Option = DropdownOption & {
+  key: DropdownKey;
+};
+
+const options = computed<Option[]>(() => [
+  {
+    label: '重新加载',
+    key: 'reload-current',
+    disabled: props.currentPath !== tab.activeTab,
+    icon: iconRender({ icon: 'ant-design:reload-outlined' })
+  },
+  {
+    label: '关闭',
+    key: 'close-current',
+    disabled: props.currentPath === tab.homeTab.fullPath || Boolean(props.affix),
+    icon: iconRender({ icon: 'ant-design:close-outlined' })
+  },
+  {
+    label: '关闭其他',
+    key: 'close-other',
+    icon: iconRender({ icon: 'ant-design:column-width-outlined' })
+  },
+  {
+    label: '关闭左侧',
+    key: 'close-left',
+    icon: iconRender({ icon: 'mdi:format-horizontal-align-left' })
+  },
+  {
+    label: '关闭右侧',
+    key: 'close-right',
+    icon: iconRender({ icon: 'mdi:format-horizontal-align-right' })
+  },
+  {
+    label: '关闭所有',
+    key: 'close-all',
+    icon: iconRender({ icon: 'ant-design:line-outlined' })
+  }
+]);
+
+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);
+    }
+  ],
+  [
+    'close-all',
+    () => {
+      tab.clearAllTab();
+    }
+  ]
+]);
+
+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/global-tab/components/tab-detail/components/index.ts

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

src/layouts/common/global-tab/components/tab-detail/index.vue

@@ -0,0 +1,131 @@
+<template>
+  <div ref="tabRef" class="h-full" :class="[isChromeMode ? 'flex items-end' : 'flex-y-center']">
+    <component
+      :is="activeComponent"
+      v-for="(item, index) in tab.tabs"
+      :key="item.fullPath"
+      :is-active="tab.activeTab === item.fullPath"
+      :primary-color="theme.themeColor"
+      :closable="!(item.name === tab.homeTab.name || item.meta.affix)"
+      :dark-mode="theme.darkMode"
+      :class="{ '!mr-0': isChromeMode && index === tab.tabs.length - 1, 'mr-10px': !isChromeMode }"
+      @click="tab.handleClickTab(item.fullPath)"
+      @close="tab.removeTab(item.fullPath)"
+      @contextmenu="handleContextMenu($event, item.fullPath, item.meta.affix)"
+    >
+      <svg-icon
+        :icon="item.meta.icon"
+        :local-icon="item.meta.localIcon"
+        class="inline-block align-text-bottom mr-4px text-16px"
+      />
+      {{ item.meta.title }}
+    </component>
+  </div>
+  <context-menu
+    :visible="dropdown.visible"
+    :current-path="dropdown.currentPath"
+    :affix="dropdown.affix"
+    :x="dropdown.x"
+    :y="dropdown.y"
+    @update:visible="handleDropdownVisible"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, reactive, ref, watch } from 'vue';
+import { ButtonTab, ChromeTab } from '@soybeanjs/vue-admin-tab';
+import { useTabStore, useThemeStore } from '@/store';
+import { ContextMenu } from './components';
+
+defineOptions({ name: 'TabDetail' });
+
+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 && tabRef.value.children.length && tabRef.value.children[tab.activeTabIndex]) {
+    const activeTabElement = tabRef.value.children[tab.activeTabIndex];
+    const { x, width } = activeTabElement.getBoundingClientRect();
+    const clientX = x + width / 2;
+    setTimeout(() => {
+      emit('scroll', clientX);
+    }, 50);
+  }
+}
+
+interface DropdownConfig {
+  visible: boolean;
+  affix: boolean;
+  x: number;
+  y: number;
+  currentPath: string;
+}
+
+const dropdown: DropdownConfig = reactive({
+  visible: false,
+  affix: false,
+  x: 0,
+  y: 0,
+  currentPath: ''
+});
+
+function setDropdown(config: Partial<DropdownConfig>) {
+  Object.assign(dropdown, config);
+}
+
+let isClickContextMenu = false;
+
+function handleDropdownVisible(visible: boolean) {
+  if (!isClickContextMenu) {
+    setDropdown({ visible });
+  }
+}
+
+/** 点击右键菜单 */
+async function handleContextMenu(e: MouseEvent, currentPath: string, affix?: boolean) {
+  e.preventDefault();
+
+  const { clientX, clientY } = e;
+
+  isClickContextMenu = true;
+
+  const DURATION = dropdown.visible ? 150 : 0;
+
+  setDropdown({ visible: false });
+
+  setTimeout(() => {
+    setDropdown({
+      visible: true,
+      x: clientX,
+      y: clientY,
+      currentPath,
+      affix
+    });
+    isClickContextMenu = false;
+  }, DURATION);
+}
+
+watch(
+  () => tab.activeTabIndex,
+  () => {
+    getActiveTabClientX();
+  },
+  {
+    immediate: true
+  }
+);
+</script>
+
+<style scoped></style>

src/layouts/common/global-tab/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <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: canClick }">
+        <tab-detail @scroll="handleScroll" />
+      </better-scroll>
+    </div>
+    <reload-button />
+  </dark-mode-container>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { useElementBounding } from '@vueuse/core';
+import { useTabStore, useThemeStore } from '@/store';
+import { useDeviceInfo } from '@/composables';
+import { ReloadButton, TabDetail } from './components';
+
+defineOptions({ name: 'GlobalTab' });
+
+const route = useRoute();
+const theme = useThemeStore();
+const tab = useTabStore();
+const deviceInfo = useDeviceInfo();
+
+const bsWrapper = ref<HTMLElement>();
+const { width: bsWrapperWidth, left: bsWrapperLeft } = useElementBounding(bsWrapper);
+
+const bsScroll = ref<Expose.BetterScroll>();
+
+const canClick = Boolean(deviceInfo.device.type);
+
+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.fullPath,
+  () => {
+    tab.addTab(route);
+    tab.setActiveTab(route.fullPath);
+  }
+);
+
+// 初始化
+init();
+</script>
+
+<style scoped>
+.global-tab {
+  box-shadow: 0 1px 2px rgb(0 21 41 / 8%);
+}
+</style>