From 0b3343f21995fa262fc02f24b8003d6e3546e6d4 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Thu, 30 Mar 2023 11:02:14 +0800
Subject: [PATCH] fix: menu scrollbar position cannot be restored after
 switching routes (#3634)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind bug
/area console
/milestone 2.4.0

#### What this PR does / why we need it:

修复跳转页面之后无法固定菜单滚动位置的问题。

#### Which issue(s) this PR fixes:

Fixes https://github.com/halo-dev/halo/issues/3633

#### Does this PR introduce a user-facing change?

```release-note
None
```
---
 console/src/layouts/BasicLayout.vue | 32 ++++++++++++-----------------
 1 file changed, 13 insertions(+), 19 deletions(-)

diff --git a/console/src/layouts/BasicLayout.vue b/console/src/layouts/BasicLayout.vue
index 87d9c97c8..5d143490c 100644
--- a/console/src/layouts/BasicLayout.vue
+++ b/console/src/layouts/BasicLayout.vue
@@ -18,7 +18,7 @@ import {
   useRouter,
   type RouteRecordRaw,
 } from "vue-router";
-import { nextTick, onMounted, onUnmounted, reactive, ref, watch } from "vue";
+import { onMounted, onUnmounted, reactive, ref } from "vue";
 import axios from "axios";
 import GlobalSearchModal from "@/components/global-search/GlobalSearchModal.vue";
 import LoginModal from "@/components/login/LoginModal.vue";
@@ -28,7 +28,6 @@ import { useRoleStore } from "@/stores/role";
 import { hasPermission } from "@/utils/permission";
 import { useUserStore } from "@/stores/user";
 import { rbacAnnotations } from "@/constants/annotations";
-import { useScroll } from "@vueuse/core";
 import { defineStore, storeToRefs } from "pinia";
 import { useI18n } from "vue-i18n";
 import {
@@ -189,9 +188,8 @@ const generateMenus = () => {
 
 onMounted(generateMenus);
 
-// store scroll position
+// aside scroll
 const navbarScroller = ref();
-const { y } = useScroll(navbarScroller);
 
 const useNavbarScrollStore = defineStore("navbar", {
   state: () => ({
@@ -201,20 +199,6 @@ const useNavbarScrollStore = defineStore("navbar", {
 
 const navbarScrollStore = useNavbarScrollStore();
 
-watch(
-  () => y.value,
-  () => {
-    navbarScrollStore.y = y.value;
-  }
-);
-
-onMounted(() => {
-  nextTick(() => {
-    y.value = navbarScrollStore.y;
-  });
-});
-
-// aside scroll
 const reactiveParams = reactive<UseOverlayScrollbarsParams>({
   options: {
     scrollbars: {
@@ -222,7 +206,17 @@ const reactiveParams = reactive<UseOverlayScrollbarsParams>({
       autoHideDelay: 600,
     },
   },
-  defer: true,
+  events: {
+    scroll: (_, onScrollArgs) => {
+      const target = onScrollArgs.target as HTMLElement;
+      navbarScrollStore.y = target.scrollTop;
+    },
+    updated: (instance) => {
+      const { viewport } = instance.elements();
+      if (!viewport) return;
+      viewport.scrollTo({ top: navbarScrollStore.y });
+    },
+  },
 });
 const [initialize] = useOverlayScrollbars(reactiveParams);
 onMounted(() => {