perf: add supports for storing navbar position (#865)

#### 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 端侧边栏滚动条支持缓存位置,防止切换路由时重置滚动条位置。
```
pull/873/head^2
Ryan Wang 2 years ago committed by GitHub
parent cf34b86540
commit d396337d55
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -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"

Loading…
Cancel
Save