fix(projects): 修复页面滚动行为

src/hooks/common/index.ts

@@ -2,5 +2,6 @@ import useAppTitle from './useAppTitle';
 import useCreateContext from './useCreateContext';
 import useRouterChange from './useRouterChange';
 import useRouteParam from './useRouteParam';
+import useScrollBehavior from './useScrollBehavior';
 
-export { useAppTitle, useCreateContext, useRouterChange, useRouteParam };
+export { useAppTitle, useCreateContext, useRouterChange, useRouteParam, useScrollBehavior };

src/hooks/common/useScrollBehavior.ts

@@ -0,0 +1,25 @@
+import { ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+
+export default function useScrollBehavior() {
+  const scrollbar = ref<HTMLElement | null>(null);
+  const route = useRoute();
+
+  function resetScrollBehavior() {
+    scrollbar.value?.scrollTo({ left: 0, top: 0 });
+  }
+
+  function resetScrollWatcher() {
+    watch(
+      () => route.name,
+      () => {
+        resetScrollBehavior();
+      }
+    );
+  }
+
+  return {
+    scrollbar,
+    resetScrollWatcher
+  };
+}

src/hooks/index.ts

@@ -1,2 +1,2 @@
-export { useAppTitle, useCreateContext, useRouterChange, useRouteParam } from './common';
+export { useAppTitle, useCreateContext, useRouterChange, useRouteParam, useScrollBehavior } from './common';
 export { useCountDown, useSmsCode } from './business';

src/interface/common.ts

@@ -1,3 +1,4 @@
+import type { RouteRecordRaw } from 'vue-router';
 import { EnumRoutePath, EnumLoginModule } from '@/enum';
 
 /** 路由描述 */
@@ -12,5 +13,8 @@ export interface RouteMeta {
   icon?: string;
 }
 
+export type CustomRoute = RouteRecordRaw & { meta: RouteMeta };
+
 export type RoutePathKey = keyof typeof EnumRoutePath;
+
 export type LoginModuleType = keyof typeof EnumLoginModule;

src/interface/index.ts

@@ -1,3 +1,3 @@
 export { UserInfo } from './business';
 export { ThemeSettings, NavMode, AnimateType } from './theme';
-export { RouteMeta, RoutePathKey, LoginModuleType } from './common';
+export { CustomRoute, RoutePathKey, LoginModuleType } from './common';

src/layouts/BasicLayout/index.vue

@@ -4,7 +4,7 @@
     <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" />
-      <n-scrollbar class="h-full" :x-scrollable="true" :content-class="fullPage ? 'h-full' : ''">
+      <n-scrollbar ref="scrollbar" class="h-full" :x-scrollable="true" :content-class="fullPage ? 'h-full' : ''">
         <div
           class="inline-flex-col-stretch w-full"
           :class="[{ 'content-padding': isHorizontalMix }, fullPage ? 'h-full' : 'min-h-100vh']"
@@ -26,10 +26,12 @@ import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { NLayout, NScrollbar, NLayoutContent } from 'naive-ui';
 import { useThemeStore } from '@/store';
+import { useScrollBehavior } from '@/hooks';
 import { GlobalSider, GlobalHeader, GlobalFooter, SettingDrawer } from './components';
 
 const route = useRoute();
 const theme = useThemeStore();
+const { scrollbar, resetScrollWatcher } = useScrollBehavior();
 
 const isHorizontalMix = computed(() => theme.navStyle.mode === 'horizontal-mix');
 const headerHeight = computed(() => {
@@ -38,6 +40,9 @@ const headerHeight = computed(() => {
 });
 /** 100%视高 */
 const fullPage = computed(() => Boolean(route.meta?.fullPage));
+
+// 路由切换，重置滚动行为
+resetScrollWatcher();
 </script>
 <style scoped>
 :deep(.n-scrollbar-rail) {

src/layouts/BlankLayout/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-scrollbar class="h-full" :x-scrollable="true" :content-class="fullPage ? 'h-full' : ''">
+  <n-scrollbar ref="scrollbar" class="h-full" :x-scrollable="true" :content-class="fullPage ? 'h-full' : ''">
     <div class="inline-block w-full" :class="[fullPage ? 'h-full' : 'min-h-100vh']">
       <router-view />
     </div>
@@ -10,9 +10,14 @@
 import { useRoute } from 'vue-router';
 import { NScrollbar } from 'naive-ui';
 import { computed } from 'vue';
+import { useScrollBehavior } from '@/hooks';
 
 const route = useRoute();
+const { scrollbar, resetScrollWatcher } = useScrollBehavior();
+
 /** 100%视高 */
 const fullPage = computed(() => Boolean(route.meta?.fullPage));
+
+resetScrollWatcher();
 </script>
 <style scoped></style>

src/router/index.ts

@@ -11,8 +11,7 @@ const isVercel = import.meta.env.VITE_HTTP_ENV === 'VERCEL';
 
 const router = createRouter({
   history: isVercel ? createWebHashHistory() : createWebHistory(),
-  routes,
-  scrollBehavior: () => ({ left: 0, top: 0 })
+  routes
 });
 
 export async function setupRouter(app: App) {

src/router/menus.ts

@@ -0,0 +1,5 @@
+import { CustomRoute } from '@/interface';
+
+export function transformRouteToMenu(routes: CustomRoute[]) {
+  return routes;
+}

src/router/routes.ts

@@ -1,7 +1,7 @@
 import type { RouteRecordRaw } from 'vue-router';
 import { BasicLayout, BlankLayout } from '@/layouts';
 import { EnumRoutePath, EnumRouteTitle } from '@/enum';
-import type { RoutePathKey, LoginModuleType } from '@/interface';
+import type { CustomRoute, RoutePathKey, LoginModuleType } from '@/interface';
 import { getLoginModuleRegExp } from '@/utils';
 
 /** 路由名称 */
@@ -83,7 +83,7 @@ export const constantRoutes: RouteRecordRaw[] = [
 /**
  * 自定义路由
  */
-export const customRoutes: Array<RouteRecordRaw> = [
+export const customRoutes: CustomRoute[] = [
   {
     name: RouteNameMap.get('root'),
     path: EnumRoutePath.root,