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

src/components/common/HoverContainer/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <div v-if="showTooltip">
+    <n-tooltip :placement="placement" trigger="hover">
+      <template #trigger>
+        <div class="flex-center h-full cursor-pointer hover:bg-[#f6f6f6] dark:hover:bg-[#333]">
+          <slot></slot>
+        </div>
+      </template>
+      {{ content }}
+    </n-tooltip>
+  </div>
+  <div v-else class="flex-center cursor-pointer hover:bg-[#f6f6f6] dark:hover:bg-[#333]">
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { PropType } from 'vue';
+import { NTooltip } from 'naive-ui';
+import type { FollowerPlacement } from 'vueuc';
+
+defineProps({
+  showTooltip: {
+    type: Boolean,
+    default: true
+  },
+  placement: {
+    type: String as PropType<FollowerPlacement>,
+    default: 'bottom'
+  },
+  content: {
+    type: String,
+    default: ''
+  }
+});
+</script>
+<style scoped></style>

src/components/common/index.ts

@@ -3,5 +3,6 @@ import SystemLogo from './SystemLogo/index.vue';
 import ExceptionSvg from './ExceptionSvg/index.vue';
 import LoginBg from './LoginBg/index.vue';
 import BannerSvg from './BannerSvg/index.vue';
+import HoverContainer from './HoverContainer/index.vue';
 
-export { AppProviderContent, SystemLogo, ExceptionSvg, LoginBg, BannerSvg };
+export { AppProviderContent, SystemLogo, ExceptionSvg, LoginBg, BannerSvg, HoverContainer };

src/components/index.ts

@@ -1,2 +1,2 @@
-export { AppProviderContent, SystemLogo, ExceptionSvg, LoginBg, BannerSvg } from './common';
+export { AppProviderContent, SystemLogo, ExceptionSvg, LoginBg, BannerSvg, HoverContainer } from './common';
 export { CountTo } from './custom';

src/context/app/useReloadContext.ts

@@ -14,16 +14,14 @@ export default function useReloadContext() {
   function handleReload() {
     reload.value = false;
     nextTick(() => {
-      nextTick(() => {
-        reload.value = true;
-      });
+      reload.value = true;
     });
   }
+
   const context: ReloadContext = {
     reload,
     handleReload
   };
-
   function useReloadProvide() {
     useProvide(context);
   }

src/context/index.ts

@@ -1,3 +1 @@
 export { setupAppContext, useReloadInject } from './app';
-
-export { useHoverIndexProvide, useHoverIndexInject } from './part';

src/context/part/index.ts

@@ -1,5 +0,0 @@
-import useHoverIndexContext from './useHoverIndexContext';
-
-const { useHoverIndexProvide, useHoverIndexInject } = useHoverIndexContext();
-
-export { useHoverIndexProvide, useHoverIndexInject };

src/context/part/useHoverIndexContext.ts

@@ -1,39 +0,0 @@
-import { ref } from 'vue';
-import type { Ref } from 'vue';
-import { useContext } from '@/hooks';
-
-interface HoverIndexContext {
-  /** 被悬浮元素索引 */
-  index: Ref<number>;
-  /** 设置索引 */
-  setHoverIndex(index: number): void;
-  /** 重置索引 */
-  resetHoverIndex(): void;
-}
-const { useProvide, useInject: useHoverIndexInject } = useContext<HoverIndexContext>();
-
-/** 获取被悬浮元素的索引上下文 */
-export default function useHoverIndexContext() {
-  const index = ref(-1);
-  function setHoverIndex(hIndex: number) {
-    index.value = hIndex;
-  }
-  function resetHoverIndex() {
-    index.value = -1;
-  }
-
-  const context: HoverIndexContext = {
-    index,
-    setHoverIndex,
-    resetHoverIndex
-  };
-  function useHoverIndexProvide() {
-    useProvide(context);
-  }
-
-  return {
-    context,
-    useHoverIndexProvide,
-    useHoverIndexInject
-  };
-}

src/hooks/common/index.ts

@@ -4,5 +4,6 @@ import useRouterChange from './useRouterChange';
 import useRouteParam from './useRouteParam';
 import useRouteQuery from './useRouteQuery';
 import useBoolean from './useBoolean';
+import useLoading from './useLoading';
 
-export { useAppTitle, useContext, useRouterChange, useRouteParam, useRouteQuery, useBoolean };
+export { useAppTitle, useContext, useRouterChange, useRouteParam, useRouteQuery, useBoolean, useLoading };

src/hooks/common/useLoading.ts

@@ -0,0 +1,11 @@
+import useBoolean from './useBoolean';
+
+export default function useLoading(initValue: boolean = false) {
+  const { bool: loading, setTrue: startLoading, setFalse: endLoading } = useBoolean(initValue);
+
+  return {
+    loading,
+    startLoading,
+    endLoading
+  };
+}

src/hooks/index.ts

@@ -1,2 +1,10 @@
-export { useAppTitle, useContext, useRouterChange, useRouteParam, useRouteQuery, useBoolean } from './common';
+export {
+  useAppTitle,
+  useContext,
+  useRouterChange,
+  useRouteParam,
+  useRouteQuery,
+  useBoolean,
+  useLoading
+} from './common';
 export { useCountDown, useSmsCode } from './business';

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;

src/router/routes.ts

@@ -88,6 +88,7 @@ export const ROUTE_HOME: CustomRoute = {
   path: EnumRoutePath['dashboard-analysis'],
   component: () => import('@/views/dashboard/analysis/index.vue'),
   meta: {
+    keepAlive: true,
     requiresAuth: true,
     title: EnumRouteTitle['dashboard-analysis']
   }
@@ -126,7 +127,6 @@ export const customRoutes: CustomRoute[] = [
     redirect: { name: RouteNameMap.get('dashboard-analysis') },
     meta: {
       title: EnumRouteTitle.dashboard,
-      keepAlive: true,
       icon: Dashboard
     },
     children: [

src/settings/theme.ts

@@ -51,7 +51,7 @@ const themeSettings: ThemeSettings = {
     height: 48,
     visible: true,
     bgColor: '#fff',
-    mode: 'browser',
+    mode: 'button',
     modeList: [
       { value: 'button', label: EnumMultiTabMode.button },
       { value: 'browser', label: EnumMultiTabMode.browser }

src/store/modules/app/index.ts

@@ -90,6 +90,19 @@ const appStore = defineStore({
         this.setActiveMultiTab(activePath);
       }
     },
+    /**
+     * 删除所有多页签只保留路由首页
+     * @param exclude - 保留的多页签
+     */
+    clearMultiTab(exclude: string[] = []) {
+      const remain = [ROUTE_HOME.path, ...exclude];
+      const { routes } = this.multiTab;
+      const updateRoutes = routes.filter(v => remain.includes(v.fullPath));
+      this.multiTab.routes = updateRoutes;
+      const activePath = updateRoutes[updateRoutes.length - 1].fullPath;
+      router.push(activePath);
+      this.setActiveMultiTab(activePath);
+    },
     /** 点击单个页签tab */
     handleClickTab(fullPath: string) {
       if (this.multiTab.activeRoute !== fullPath) {
@@ -102,8 +115,9 @@ const appStore = defineStore({
       this.multiTab.activeRoute = fullPath;
     },
     /** 获取路由首页信息 */
-    getHomeTabRoute(route: RouteLocationNormalizedLoaded, isHome: boolean) {
+    getHomeTabRoute(route: RouteLocationNormalizedLoaded) {
       const { name, path, meta } = ROUTE_HOME;
+      const isHome = route.name === ROUTE_HOME.name;
       const home: MultiTabRoute = {
         name,
         path,
@@ -119,7 +133,7 @@ const appStore = defineStore({
     initMultiTab() {
       const { currentRoute } = router;
       const isHome = currentRoute.value.name === ROUTE_HOME.name;
-      const home = this.getHomeTabRoute(currentRoute.value, isHome);
+      const home = this.getHomeTabRoute(currentRoute.value);
       const routes = [home];
       if (!isHome) {
         routes.push(currentRoute.value);

src/views/dashboard/analysis/index.vue

@@ -6,13 +6,20 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { onActivated } from 'vue';
+import { useLoading } from '@/hooks';
 import { DataCard, NavCard } from './components';
 
-const loading = ref(true);
+const { loading, startLoading, endLoading } = useLoading(true);
 
-setTimeout(() => {
-  loading.value = false;
-}, 1500);
+function handleEndLoading() {
+  startLoading();
+  setTimeout(() => {
+    endLoading();
+  }, 1000);
+}
+onActivated(() => {
+  handleEndLoading();
+});
 </script>
 <style scoped></style>

src/views/dashboard/workbench/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="flex-y-center flex-col h-500px bg-white">
+    <n-spin class="flex-y-center flex-col h-500px bg-white" :show="loading">
       <n-gradient-text type="primary" size="32">工作台</n-gradient-text>
       <n-space>
         <n-button>Default</n-button>
@@ -10,8 +10,7 @@
         <n-button type="warning">Warning</n-button>
         <n-button type="error">Error</n-button>
       </n-space>
-      <n-spin v-show="loading" />
-    </div>
+    </n-spin>
   </div>
 </template>