feat(projects): 添加多页签右键菜单

src/layouts/BasicLayout/components/GlobalHeader/components/FullScreen.vue

@@ -1,13 +1,13 @@
 <template>
-  <header-item class="w-40px h-full" @click="toggle">
+  <hover-container class="w-40px h-full" content="全屏" @click="toggle">
     <icon-gridicons-fullscreen-exit v-if="isFullscreen" class="text-16px" />
     <icon-gridicons-fullscreen v-else class="text-16px" />
-  </header-item>
+  </hover-container>
 </template>
 
 <script lang="ts" setup>
 import { useFullscreen } from '@vueuse/core';
-import HeaderItem from './HeaderItem.vue';
+import { HoverContainer } from '@/components';
 
 const { isFullscreen, toggle } = useFullscreen();
 </script>

src/layouts/BasicLayout/components/GlobalHeader/components/GihubSite.vue

@@ -1,12 +1,12 @@
 <template>
-  <header-item class="w-40px h-full">
+  <hover-container content="github" class="w-40px h-full">
     <a href="https://github.com/honghuangdc/soybean-admin" target="_blank" class="flex-center">
       <icon-mdi-github class="text-20px text-[#666]" />
     </a>
-  </header-item>
+  </hover-container>
 </template>
 
 <script lang="ts" setup>
-import HeaderItem from './HeaderItem.vue';
+import { HoverContainer } from '@/components';
 </script>
 <style scoped></style>

src/layouts/BasicLayout/components/GlobalHeader/components/HeaderItem.vue

@@ -1,8 +0,0 @@
-<template>
-  <div class="flex-center cursor-pointer hover:bg-[#f6f6f6] dark:hover:bg-[#333]">
-    <slot></slot>
-  </div>
-</template>
-
-<script lang="ts" setup></script>
-<style scoped></style>

src/layouts/BasicLayout/components/GlobalHeader/components/MenuCollapse.vue

@@ -1,13 +1,13 @@
 <template>
-  <header-item class="w-40px h-full" @click="toggleMenu">
+  <hover-container class="w-40px h-full" :show-tooltip="false" @click="toggleMenu">
     <icon-line-md-menu-unfold-left v-if="app.menu.collapsed" class="text-16px" />
     <icon-line-md-menu-fold-left v-else class="text-16px" />
-  </header-item>
+  </hover-container>
 </template>
 
 <script lang="ts" setup>
 import { useAppStore } from '@/store';
-import HeaderItem from './HeaderItem.vue';
+import { HoverContainer } from '@/components';
 
 const app = useAppStore();
 const { toggleMenu } = useAppStore();

src/layouts/BasicLayout/components/GlobalHeader/components/SettingDrawerButton.vue

@@ -1,12 +1,12 @@
 <template>
-  <header-item class="w-40px h-full" @click="openSettingDrawer">
+  <hover-container class="w-40px h-full" placement="bottom-end" content="项目配置" @click="openSettingDrawer">
     <icon-mdi-light-cog class="text-16px" />
-  </header-item>
+  </hover-container>
 </template>
 
 <script lang="ts" setup>
 import { useAppStore } from '@/store';
-import HeaderItem from './HeaderItem.vue';
+import { HoverContainer } from '@/components';
 
 const { openSettingDrawer } = useAppStore();
 </script>

src/layouts/BasicLayout/components/GlobalHeader/components/UserAvatar.vue

@@ -1,9 +1,9 @@
 <template>
   <n-dropdown :options="options" @select="handleDropdown">
-    <header-item class="px-12px">
+    <hover-container class="px-12px" :show-tooltip="false">
       <n-avatar :src="avatar" size="small" :round="true" />
       <span class="pl-8px text-16px font-medium">Soybean</span>
-    </header-item>
+    </hover-container>
   </n-dropdown>
 </template>
 
@@ -11,7 +11,7 @@
 import { NDropdown, NAvatar } from 'naive-ui';
 import { UserAvatar, Logout } from '@vicons/carbon';
 import { dynamicIconRender, resetAuthStorage } from '@/utils';
-import HeaderItem from './HeaderItem.vue';
+import { HoverContainer } from '@/components';
 import avatar from '@/assets/img/common/logo-fill.png';
 
 type DropdownKey = 'user-center' | 'logout';

src/layouts/BasicLayout/components/GlobalHeader/components/index.ts

@@ -4,6 +4,5 @@ import MenuCollapse from './MenuCollapse.vue';
 import FullScreen from './FullScreen.vue';
 import SettingDrawerButton from './SettingDrawerButton.vue';
 import GihubSite from './GihubSite.vue';
-import HeaderItem from './HeaderItem.vue';
 
-export { GlobalBreadcrumb, UserAvatar, MenuCollapse, FullScreen, SettingDrawerButton, GihubSite, HeaderItem };
+export { GlobalBreadcrumb, UserAvatar, MenuCollapse, FullScreen, SettingDrawerButton, GihubSite };

src/layouts/BasicLayout/components/GlobalTab/components/ButtonTab/index.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     class="
-      button-tab
       inline-flex-center
       h-34px
       px-14px
@@ -9,20 +8,29 @@
       border-1px border-[#e5e7eb]
       rounded-2px
       cursor-pointer
-      hover:text-primary hover:border-primary
+      transition
+      duration-400
+      ease-in-out
     "
-    :class="{ 'text-primary bg-primary bg-opacity-10 !border-primary': active }"
+    :class="{ 'text-primary bg-primary bg-opacity-10 !border-primary': active, 'text-primary border-primary': isHover }"
+    @mouseenter="setTrue"
+    @mouseleave="setFalse"
   >
     <span>
       <slot></slot>
     </span>
-    <div v-if="closable" class="icon-close-container w-0 overflow-hidden">
+    <div
+      v-if="closable"
+      class="overflow-hidden transition-width duration-400 ease-in-out"
+      :class="[isHover ? 'w-18px' : 'w-0']"
+    >
       <icon-close :is-primary="true" @click="handleClose" />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { useBoolean } from '@/hooks';
 import { IconClose } from '../common';
 
 defineProps({
@@ -37,21 +45,11 @@ defineProps({
 });
 const emit = defineEmits(['close']);
 
+const { bool: isHover, setTrue, setFalse } = useBoolean();
+
 function handleClose(e: MouseEvent) {
   e.stopPropagation();
   emit('close');
 }
 </script>
-<style scoped lang="scss">
-.button-tab {
-  transition: all 0.4s ease-out;
-  &:hover {
-    .icon-close-container {
-      width: 18px !important;
-    }
-  }
-  .icon-close-container {
-    transition: width 0.4s ease-out;
-  }
-}
-</style>
+<style scoped></style>

src/layouts/BasicLayout/components/GlobalTab/components/ContextMenu/index.vue

@@ -0,0 +1,116 @@
+<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 { CloseOutlined, ColumnWidthOutlined, MinusOutlined } from '@vicons/antd';
+import { useAppStore } from '@/store';
+import { useBoolean } from '@/hooks';
+import { ROUTE_HOME } from '@/router';
+import { dynamicIconRender } from '@/utils';
+
+type DropdownKey = 'close-current' | 'close-other' | 'close-all';
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  isRouteHome: {
+    type: Boolean,
+    default: false
+  },
+  currentPath: {
+    type: String,
+    default: ''
+  },
+  x: {
+    type: Number,
+    required: true
+  },
+  y: {
+    type: Number,
+    required: true
+  }
+});
+
+const emit = defineEmits(['update:visible']);
+
+const app = useAppStore();
+const { removeMultiTab, clearMultiTab } = useAppStore();
+const { bool: dropdownVisible, setTrue: show, setFalse: hide } = useBoolean(props.visible);
+
+const options = computed(() => [
+  {
+    label: '关闭当前',
+    key: 'close-current',
+    disabled: props.currentPath === ROUTE_HOME.path,
+    icon: dynamicIconRender(CloseOutlined)
+  },
+  {
+    label: '关闭其他',
+    key: 'close-other',
+    icon: dynamicIconRender(ColumnWidthOutlined)
+  },
+  {
+    label: '关闭全部',
+    key: 'close-all',
+    icon: dynamicIconRender(MinusOutlined)
+  }
+]);
+
+const actionMap = new Map<DropdownKey, () => void>([
+  [
+    'close-current',
+    () => {
+      removeMultiTab(app.multiTab.activeRoute);
+    }
+  ],
+  [
+    'close-other',
+    () => {
+      clearMultiTab([props.currentPath]);
+    }
+  ],
+  [
+    'close-all',
+    () => {
+      clearMultiTab();
+    }
+  ]
+]);
+
+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/BasicLayout/components/GlobalTab/components/ReloadButton/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <hover-container class="w-40px h-full" placement="bottom-end" content="刷新当页" @click="handleRefresh">
+    <icon-mdi-refresh class="text-16px" :class="{ 'reload-animation': loading }" />
+  </hover-container>
+</template>
+
+<script lang="ts" setup>
+import { HoverContainer } from '@/components';
+import { useReloadInject } from '@/context';
+import { useLoading } from '@/hooks';
+
+const { handleReload } = useReloadInject();
+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/BasicLayout/components/GlobalTab/components/index.ts

@@ -1,4 +1,6 @@
 import ButtonTab from './ButtonTab/index.vue';
 import BrowserTab from './BrowserTab/index.vue';
+import ReloadButton from './ReloadButton/index.vue';
+import ContextMenu from './ContextMenu/index.vue';
 
-export { ButtonTab, BrowserTab };
+export { ButtonTab, BrowserTab, ReloadButton, ContextMenu };

src/layouts/BasicLayout/components/GlobalTab/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div v-if="fixedHeaderAndTab && theme.navStyle.mode !== 'horizontal-mix'" class="multi-tab-height w-full"></div>
   <div
-    class="multi-tab-height flex-center justify-between w-full px-10px"
-    :class="{ 'multi-tab-top absolute': fixedHeaderAndTab, 'bg-[#18181c]': theme.darkMode }"
+    class="multi-tab flex-center justify-between w-full pl-10px"
+    :class="[theme.darkMode ? 'bg-[#18181c]' : 'bg-white', { 'multi-tab-top absolute': fixedHeaderAndTab }]"
     :style="{ zIndex }"
     :align="'center'"
     justify="space-between"
@@ -16,6 +16,7 @@
         :closable="item.name !== ROUTE_HOME.name"
         @click="handleClickTab(item.fullPath)"
         @close="removeMultiTab(item.fullPath)"
+        @contextmenu="handleContextMenu($event, item.fullPath)"
       >
         {{ item.meta?.title }}
       </button-tab>
@@ -34,20 +35,24 @@
         {{ item.meta?.title }}
       </browser-tab>
     </n-space>
-    <div class="flex-center w-32px h-32px bg-white cursor-pointer" @click="handleReload">
-      <icon-mdi-refresh class="text-16px" />
-    </div>
+    <reload-button />
+    <context-menu
+      :visible="dropdownVisible"
+      :current-path="dropdownConfig.currentPath"
+      :x="dropdownConfig.x"
+      :y="dropdownConfig.y"
+    />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from 'vue';
+import { computed, ref, reactive, watch, nextTick } from 'vue';
 import { useRoute } from 'vue-router';
 import { NSpace } from 'naive-ui';
 import { useThemeStore, useAppStore } from '@/store';
-import { useReloadInject } from '@/context';
 import { ROUTE_HOME } from '@/router';
-import { ButtonTab, BrowserTab } from './components';
+import { ButtonTab, BrowserTab, ReloadButton, ContextMenu } from './components';
+import { useBoolean } from '@/hooks';
 
 defineProps({
   zIndex: {
@@ -60,7 +65,7 @@ const route = useRoute();
 const theme = useThemeStore();
 const app = useAppStore();
 const { initMultiTab, addMultiTab, removeMultiTab, setActiveMultiTab, handleClickTab } = useAppStore();
-const { handleReload } = useReloadInject();
+const { bool: dropdownVisible, setTrue: showDropdown, setFalse: hideDropdown } = useBoolean();
 
 const hoverIndex = ref(NaN);
 
@@ -74,6 +79,25 @@ const headerHeight = computed(() => {
   return `${height}px`;
 });
 
+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();
+  hideDropdown();
+  setDropdownConfig(e.clientX, e.clientY, fullPath);
+  nextTick(() => {
+    showDropdown();
+  });
+}
+
 function init() {
   initMultiTab();
 }
@@ -90,6 +114,10 @@ watch(
 init();
 </script>
 <style scoped>
+.multi-tab {
+  height: v-bind(multiTabHeight);
+  box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
+}
 .multi-tab-height {
   height: v-bind(multiTabHeight);
 }

src/layouts/BasicLayout/components/SettingDrawer/components/NavMode/components/NavType.vue

@@ -17,8 +17,9 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import { NTooltip } from 'naive-ui';
 import type { PropType } from 'vue';
+import { NTooltip } from 'naive-ui';
+import type { FollowerPlacement } from 'vueuc';
 import { EnumNavMode } from '@/enum';
 import type { NavMode } from '@/interface';
 
@@ -33,7 +34,7 @@ const props = defineProps({
   }
 });
 
-const config = new Map<NavMode, { placement: any; menuClass: string; mainClass: string }>([
+const config = new Map<NavMode, { placement: FollowerPlacement; menuClass: string; mainClass: string }>([
   ['vertical', { placement: 'bottom-start', menuClass: 'w-1/3 h-full', mainClass: 'w-2/3 h-3/4' }],
   ['vertical-mix', { placement: 'bottom', menuClass: 'w-1/4 h-full', mainClass: 'w-2/3 h-3/4' }],
   ['horizontal', { placement: 'bottom', menuClass: 'w-full h-1/4', mainClass: 'w-full h-3/4' }],

src/layouts/BasicLayout/index.vue

@@ -1,9 +1,9 @@
 <template>
   <n-layout class="h-full" has-sider>
-    <global-sider v-if="theme.isVerticalNav" :z-index="2" />
+    <global-sider v-if="theme.isVerticalNav" :z-index="3" />
     <global-header v-if="isHorizontalMix" :z-index="2" />
     <div class="flex-1-hidden flex h-full">
-      <global-sider v-if="isHorizontalMix" class="sider-margin" :z-index="1" />
+      <global-sider v-if="isHorizontalMix" class="sider-margin" :z-index="3" />
       <n-scrollbar
         ref="scrollbar"
         class="h-full"
@@ -14,7 +14,7 @@
           class="inline-flex-col-stretch w-full"
           :class="[{ 'content-padding': isHorizontalMix }, routeProps.fullPage ? 'h-full' : 'min-h-100vh']"
         >
-          <global-header v-if="!isHorizontalMix" :z-index="1" />
+          <global-header v-if="!isHorizontalMix" :z-index="2" />
           <global-tab v-if="theme.multiTabStyle.visible" :z-index="1" />
           <n-layout-content class="flex-auto p-10px" :class="{ 'bg-[#f5f7f9]': !theme.darkMode }">
             <router-view v-slot="{ Component }">

src/layouts/composables/index.ts

@@ -3,7 +3,6 @@ import { useRoute } from 'vue-router';
 
 export function useRouteProps() {
   const route = useRoute();
-
   const props = computed(() => {
     /** 路由名称 */
     const name = route.name as string;