chore(projects): merge main to example

src/layouts/modules/global-content/index.vue

@@ -3,6 +3,7 @@ import { computed } from 'vue';
 import { useAppStore } from '@/store/modules/app';
 import { useThemeStore } from '@/store/modules/theme';
 import { useRouteStore } from '@/store/modules/route';
+import { useTabStore } from '@/store/modules/tab';
 
 defineOptions({
   name: 'GlobalContent'
@@ -20,6 +21,7 @@ withDefaults(defineProps<Props>(), {
 const appStore = useAppStore();
 const themeStore = useThemeStore();
 const routeStore = useRouteStore();
+const tabStore = useTabStore();
 
 const transitionName = computed(() => (themeStore.page.animate ? themeStore.page.animateMode : ''));
 </script>
@@ -36,7 +38,7 @@ const transitionName = computed(() => (themeStore.page.animate ? themeStore.page
         <component
           :is="Component"
           v-if="appStore.reloadFlag"
-          :key="route.path"
+          :key="tabStore.getTabIdByRoute(route)"
           :class="{ 'p-16px': showPadding }"
           class="flex-grow bg-layout transition-300"
         />

src/layouts/modules/global-header/index.vue

@@ -47,7 +47,7 @@ const headerMenus = computed(() => {
 </script>
 
 <template>
-  <DarkModeContainer class="h-full flex-y-center shadow-header">
+  <DarkModeContainer class="h-full flex-y-center px-12px shadow-header">
     <GlobalLogo v-if="showLogo" class="h-full" :style="{ width: themeStore.sider.width + 'px' }" />
     <HorizontalMenu v-if="showMenu" mode="horizontal" :menus="headerMenus" class="px-12px" />
     <div v-else class="h-full flex-y-center flex-1-hidden">

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

@@ -141,6 +141,10 @@ function init() {
   tabStore.initTabStore(route);
 }
 
+function removeFocus() {
+  (document.activeElement as HTMLElement)?.blur();
+}
+
 // watch
 watch(
   () => route.fullPath,
@@ -162,7 +166,11 @@ init();
 <template>
   <DarkModeContainer class="size-full flex-y-center px-16px shadow-tab">
     <div ref="bsWrapper" class="h-full flex-1-hidden">
-      <BetterScroll ref="bsScroll" :options="{ scrollX: true, scrollY: false, click: appStore.isMobile }">
+      <BetterScroll
+        ref="bsScroll"
+        :options="{ scrollX: true, scrollY: false, click: appStore.isMobile }"
+        @click="removeFocus"
+      >
         <div
           ref="tabRef"
           class="h-full flex pr-18px"

src/store/modules/tab/index.ts

@@ -17,6 +17,7 @@ import {
   getDefaultHomeTab,
   getFixedTabIds,
   getTabByRoute,
+  getTabIdByRoute,
   isTabInTabs,
   updateTabByI18nKey,
   updateTabsByI18nKey
@@ -288,6 +289,7 @@ export const useTabStore = defineStore(SetupStoreId.Tab, () => {
     setTabLabel,
     resetTabLabel,
     isTabRetain,
-    updateTabsByLocale
+    updateTabsByLocale,
+    getTabIdByRoute
   };
 });

src/views/manage/menu/modules/menu-operate-modal.vue

@@ -374,7 +374,6 @@ watch(
           </NFormItemGi>
           <NFormItemGi span="24 m:12" :label="$t('page.manage.menu.hideInMenu')" path="hideInMenu">
             <NRadioGroup v-model:value="model.hideInMenu">
-              <!-- eslint-disable-next-line vue/prefer-true-attribute-shorthand -->
               <NRadio :value="true" :label="$t('common.yesOrNo.yes')" />
               <NRadio :value="false" :label="$t('common.yesOrNo.no')" />
             </NRadioGroup>