From d396337d5537bbe939aa0444c0ca0781fffbb14d Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Tue, 21 Feb 2023 11:56:10 +0800
Subject: [PATCH] perf: add supports for storing navbar position (#865)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind improvement

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

支持保存侧板滚动条位置，防止切换路由时侧边栏的抖动。

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

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

#### Screenshots:

before:

![2023-02-20 12 12 05](https://user-images.githubusercontent.com/21301288/220007834-12658cf2-e8a8-42ea-93b1-2c58419edbac.gif)


after:

![2023-02-20 12 11 19](https://user-images.githubusercontent.com/21301288/220007742-58471b69-cfd1-4576-babd-5516d2c0de1d.gif)


#### Special notes for your reviewer:

测试方式：

1. 调整浏览器高度，让侧边栏菜单区域出现滚动条。
2. 测试点击底部的任意菜单项，跳转页面之后，观察滚动条是否与之前的位置保持一致。

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


```release-note
Console 端侧边栏滚动条支持缓存位置，防止切换路由时重置滚动条位置。
```
---
 src/layouts/BasicLayout.vue | 31 +++++++++++++++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/layouts/BasicLayout.vue b/src/layouts/BasicLayout.vue
index cc2629e7..ff0f4031 100644
--- a/src/layouts/BasicLayout.vue
+++ b/src/layouts/BasicLayout.vue
@@ -18,7 +18,7 @@ import {
   useRouter,
   type RouteRecordRaw,
 } from "vue-router";
-import { computed, onMounted, onUnmounted, ref } from "vue";
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
 import axios from "axios";
 import GlobalSearchModal from "@/components/global-search/GlobalSearchModal.vue";
 import LoginModal from "@/components/login/LoginModal.vue";
@@ -28,6 +28,8 @@ 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 } from "pinia";
 
 const route = useRoute();
 const router = useRouter();
@@ -189,6 +191,31 @@ const generateMenus = () => {
 };
 
 onMounted(generateMenus);
+
+// store scroll position
+const navbarScroller = ref();
+const { y } = useScroll(navbarScroller);
+
+const useNavbarScrollStore = defineStore("navbar", {
+  state: () => ({
+    y: 0,
+  }),
+});
+
+const navbarScrollStore = useNavbarScrollStore();
+
+watch(
+  () => y.value,
+  () => {
+    navbarScrollStore.y = y.value;
+  }
+);
+
+onMounted(() => {
+  nextTick(() => {
+    y.value = navbarScrollStore.y;
+  });
+});
 </script>
 
 <template>
@@ -203,7 +230,7 @@ onMounted(generateMenus);
           />
         </a>
       </div>
-      <div class="flex-1 overflow-y-auto">
+      <div ref="navbarScroller" class="flex-1 overflow-y-auto">
         <div class="px-3">
           <div
             class="flex cursor-pointer items-center rounded bg-gray-100 p-2 text-gray-400 transition-all hover:text-gray-900"