feat(stage-tamagotchi): memorize scroll position (#752)

2025-11-20 18:37:59 +08:00
parent 075a733909
commit 5eb6b826c3
3 changed files with 42 additions and 2 deletions
@@ -0,0 +1,36 @@
+import { nextTick, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+
+const scrollPositions = new Map<string, number>()
+
+export function useRestoreScroll() {
+  const route = useRoute()
+
+  const scrollContainer = ref<HTMLElement | null>(null)
+
+  watch(
+    () => route.fullPath,
+    async (newPath, oldPath) => {
+      if (!scrollContainer.value) {
+        return
+      }
+
+      if (oldPath) {
+        scrollPositions.set(oldPath, scrollContainer.value.scrollTop)
+      }
+
+      await nextTick()
+
+      if (!scrollContainer.value) {
+        return
+      }
+
+      const savedPosition = scrollPositions.get(newPath) || 0
+      scrollContainer.value.scrollTop = savedPosition
+    },
+  )
+
+  return {
+    scrollContainer,
+  }
+}
@@ -3,7 +3,7 @@
  <head>
    <meta charset="UTF-8" />
    <title>AIRI</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, viewport-fit=cover" />
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <!-- <meta
      http-equiv="Content-Security-Policy"
@@ -8,6 +8,8 @@ import { RouterView, useRoute } from 'vue-router'

 import WindowTitleBar from '../components/Window/TitleBar.vue'

+import { useRestoreScroll } from '../composables/use-restore-scroll'
+
 const route = useRoute()
 const { t } = useI18n()
 const providersStore = useProvidersStore()
@@ -124,10 +126,12 @@ const routeHeaderMetadataMap = computed(() => {
 const routeHeaderMetadata = computed(() => {
  return routeHeaderMetadataMap.value[route.path] || routeHeaderMetadataMap.value[`${route.path}/`]
 })
+
+const { scrollContainer } = useRestoreScroll()
 </script>

 <template>
-  <div h-full w-full overflow-y-scroll scrollbar-none bg="$bg-color">
+  <div ref="scrollContainer" h-full w-full overflow-y-scroll scrollbar-none bg="$bg-color">
    <WindowTitleBar
      :title="routeHeaderMetadata?.title"
      icon="i-solar:settings-bold"