Skip to content
This repository has been archived by the owner on Jan 21, 2024. It is now read-only.

Commit

Permalink
perf: add supports for storing navbar position (#865)
Browse files Browse the repository at this point in the history
#### What type of PR is this?

/kind improvement

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

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

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

Fixes halo-dev/halo#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 端侧边栏滚动条支持缓存位置,防止切换路由时重置滚动条位置。
```
  • Loading branch information
ruibaby authored Feb 21, 2023
1 parent cf34b86 commit d396337
Showing 1 changed file with 29 additions and 2 deletions.
31 changes: 29 additions & 2 deletions src/layouts/BasicLayout.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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();
Expand Down Expand Up @@ -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>
Expand All @@ -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"
Expand Down

1 comment on commit d396337

@vercel
Copy link

@vercel vercel bot commented on d396337 Feb 21, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

ui – ./

ui-git-main-halo-dev.vercel.app
halo-admin-ui.vercel.app
ui-halo-dev.vercel.app

Please sign in to comment.