fix setting scroll

This commit is contained in:
Timi
2026-08-23 21:51:07 +08:00
parent 198d1a950c
commit 2efce6de11
+30
View File
@@ -60,7 +60,12 @@
</div> </div>
</template> </template>
<script lang="ts">
let settingTabScrollTop: number | undefined;
</script>
<script setup lang="ts"> <script setup lang="ts">
import { onBeforeRouteLeave } from "vue-router";
import { type Role as UserRole, RoleAPI, UserAPI, useUserStore } from "timi-web"; import { type Role as UserRole, RoleAPI, UserAPI, useUserStore } from "timi-web";
import { buildFallbackAvatar } from "@/utils/avatar"; import { buildFallbackAvatar } from "@/utils/avatar";
import { moduleCode } from "@/store/permissionSettingsStore"; import { moduleCode } from "@/store/permissionSettingsStore";
@@ -84,8 +89,14 @@ defineOptions({
}); });
const router = useRouter(); const router = useRouter();
const route = useRoute();
const userStore = useUserStore(); const userStore = useUserStore();
function getSettingTabPage(): HTMLElement | undefined {
return Array.from(document.querySelectorAll<HTMLElement>(".page-transition .pages"))
.find(element => !!element.querySelector(".management-tab"));
}
const currentUser = computed(() => userStore.loginUser.user); const currentUser = computed(() => userStore.loginUser.user);
const currentUserAvatar = computed(() => buildUserAvatar(currentUser.value)); const currentUserAvatar = computed(() => buildUserAvatar(currentUser.value));
@@ -250,9 +261,28 @@ async function go(item: MenuItem | string): Promise<void> {
await router.push(item.path); await router.push(item.path);
} }
function restoreScrollPosition(): void {
if (settingTabScrollTop === undefined || route.path !== "/management") {
return;
}
const scrollTop = settingTabScrollTop;
const settingTabPage = getSettingTabPage();
if (!settingTabPage) {
return;
}
settingTabPage.scrollTop = scrollTop;
settingTabScrollTop = undefined;
}
onMounted(async () => { onMounted(async () => {
restoreScrollPosition();
await loadCurrentRoleList(); await loadCurrentRoleList();
}); });
onBeforeRouteLeave(() => {
const settingTabPage = getSettingTabPage();
const scrollElement = document.scrollingElement;
settingTabScrollTop = settingTabPage?.scrollTop ?? scrollElement?.scrollTop ?? window.scrollY;
});
</script> </script>
<style scoped lang="less"> <style scoped lang="less">