From 1fba1b1debba85ff37bfb89f8c5353a0aad2d3d4 Mon Sep 17 00:00:00 2001
From: Rogee <rogeecn@qq.com>
Date: Fri, 13 Dec 2024 17:05:51 +0800
Subject: [PATCH] fix: set position

---
 frontend/src/App.vue                   |  6 +--
 frontend/src/components/List.vue       |  6 +--
 frontend/src/router/index.js           | 65 +++++---------------------
 frontend/src/router/routes.js          | 57 ++++++++++++++++++++++
 frontend/src/stores/scroll-position.js | 17 +++++++
 frontend/src/views/PlayView.vue        | 14 +++++-
 frontend/src/views/TabView.vue         | 11 +++--
 frontend/src/views/tabs/HomeView.vue   | 19 ++++++++
 8 files changed, 125 insertions(+), 70 deletions(-)
 create mode 100644 frontend/src/router/routes.js
 create mode 100644 frontend/src/stores/scroll-position.js

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index d55e6c6..98240ae 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,7 +1,3 @@
 <template>
-  <router-view v-slot="{ Component }">
-    <keep-alive>
-      <component :is="Component" />
-    </keep-alive>
-  </router-view>
+  <router-view />
 </template>
diff --git a/frontend/src/components/List.vue b/frontend/src/components/List.vue
index 2cd75b6..fd2717e 100644
--- a/frontend/src/components/List.vue
+++ b/frontend/src/components/List.vue
@@ -26,6 +26,7 @@ export default defineComponent({
     const pageLimit = ref(10);
     const offset = ref("");
 
+
     const loadData = () => {
       // request /v1/medias
       const data = {
@@ -34,12 +35,10 @@ export default defineComponent({
         limit: pageLimit.value,
         bought: props.bought,
       };
-      console.log("loadData, data: ", data);
 
       request
         .post("/medias", data)
         .then((res) => {
-          console.log("response: ", res);
           if (res === undefined) {
             console.error("response error with undefined");
             return;
@@ -51,10 +50,8 @@ export default defineComponent({
             items.value = items.value.concat(res.data);
           }
           offset.value = res.data[res.data.length - 1].hash;
-          console.log("offset: ", offset.value);
 
           if (res.data.length < pageLimit.value) {
-            console.log("finished");
             finished.value = true;
           }
         })
@@ -63,7 +60,6 @@ export default defineComponent({
         })
         .finally(() => {
           loading.value = false;
-          console.log("finally: ", loading.value, finished.value);
         });
     };
 
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 241b114..ed294d8 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -1,55 +1,12 @@
-import NotFound from '@/views/NotFound.vue'
+import { useScrollPosition } from '@/stores/scroll-position'
 import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/tabs/HomeView.vue'
-import TabView from '../views/TabView.vue'
+import routes from './routes'
+
+
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  routes: [
-    { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
-    {
-      path: '/t/:tenant',
-      name: 'tab',
-      component: TabView,
-      children: [
-        {
-          path: '',
-          name: 'tab.home',
-          component: HomeView,
-          meta: {
-            title: '首页',
-          }
-        },
-        {
-          path: 'bought',
-          name: 'tab.bought',
-          component: () => import('../views/tabs/BoughtView.vue'),
-          meta: {
-            title: '已购买',
-          }
-        },
-        {
-          path: 'user',
-          name: 'tab.user',
-          // route level code-splitting
-          // this generates a separate chunk (About.[hash].js) for this route
-          // which is lazy-loaded when the route is visited.
-          component: () => import('../views/tabs/UserView.vue'),
-          meta: {
-            title: '个人中心',
-          }
-        },
-      ]
-    },
-    {
-      path: '/t/:tenant/play/:hash',
-      name: 'play',
-      component: () => import('../views/PlayView.vue'),
-      meta: {
-        title: '播放',
-      }
-    },
-  ],
+  routes: routes,
 })
 
 router.beforeEach((to, from, next) => {
@@ -57,14 +14,14 @@ router.beforeEach((to, from, next) => {
     name: from.name,
     params: from.params,
   }
-  console.log("from", from, "goto: ", to)
+
+  if (from.meta.keepAlive) {
+    const { setPosition } = useScrollPosition()
+    const scrollTop = document.documentElement.scrollTop;
+    setPosition(from.fullPath, scrollTop);
+  }
 
   next()
-  // if (from.matched.length === 0) {
-  //   next({ name: 'tab.home', params: to.params })
-  // } else {
-  //   next()
-  // }
 })
 
 router.afterEach((to, from) => {
diff --git a/frontend/src/router/routes.js b/frontend/src/router/routes.js
new file mode 100644
index 0000000..030cc05
--- /dev/null
+++ b/frontend/src/router/routes.js
@@ -0,0 +1,57 @@
+import NotFound from '@/views/NotFound.vue';
+import HomeView from '@/views/tabs/HomeView.vue';
+import TabView from '@/views/TabView.vue';
+
+const routes = [
+  { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
+  {
+    path: '/t/:tenant',
+    name: 'tab',
+    component: TabView,
+    children: [
+      {
+        path: '',
+        name: 'tab.home',
+        component: HomeView,
+        meta: {
+          title: '首页',
+          keepAlive: true,
+          scrollTop: 0,
+        }
+      },
+      {
+        path: 'bought',
+        name: 'tab.bought',
+        component: () => import('@/views/tabs/BoughtView.vue'),
+        meta: {
+          title: '已购买',
+          keepAlive: true,
+          scrollTop: 0,
+        }
+      },
+      {
+        path: 'user',
+        name: 'tab.user',
+        // route level code-splitting
+        // this generates a separate chunk (About.[hash].js) for this route
+        // which is lazy-loaded when the route is visited.
+        component: () => import('@/views/tabs/UserView.vue'),
+        meta: {
+          title: '个人中心',
+          keepAlive: false,
+        }
+      },
+    ]
+  },
+  {
+    path: '/t/:tenant/play/:hash',
+    name: 'play',
+    component: () => import('@/views/PlayView.vue'),
+    meta: {
+      title: '播放',
+      keepAlive: false,
+    }
+  },
+]
+
+export default routes;
\ No newline at end of file
diff --git a/frontend/src/stores/scroll-position.js b/frontend/src/stores/scroll-position.js
new file mode 100644
index 0000000..b8ecfce
--- /dev/null
+++ b/frontend/src/stores/scroll-position.js
@@ -0,0 +1,17 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useScrollPosition = defineStore('scroll-position', () => {
+  const pagePosition = ref({})
+
+  function getPosition(path) {
+    return pagePosition.value[path] || 0
+  }
+
+
+  function setPosition(path, position) {
+    pagePosition.value[path] = position
+  }
+
+  return { getPosition, setPosition }
+})
diff --git a/frontend/src/views/PlayView.vue b/frontend/src/views/PlayView.vue
index 77684bb..87a0433 100644
--- a/frontend/src/views/PlayView.vue
+++ b/frontend/src/views/PlayView.vue
@@ -42,6 +42,7 @@
 <script setup>
 import request from "@/utils/request";
 import Hls from "hls.js";
+import { onBeforeUnmount, onMounted } from "vue";
 
 const router = useRouter();
 const route = useRoute();
@@ -57,7 +58,15 @@ const currentTime = ref(0);
 const duration = ref(0);
 const playing = ref(false);
 
+onBeforeUnmount(() => {
+  const player = document.getElementById('video');
+  if (player && playing.value) {
+    stop();
+  }
+})
+
 onMounted(() => {
+  console.log(123123)
   loadMedia(route.params.hash);
   const player = document.getElementById('video');
   player.addEventListener('timeupdate', updateTime);
@@ -131,11 +140,14 @@ const play = (hash, type) => {
 
 const updateTime = () => {
   const player = document.getElementById('video');
-  currentTime.value = player.currentTime;
+  currentTime.value = player?.currentTime;
 };
 
 const stop = () => {
   const player = document.getElementById('video');
+  if (!player) {
+    return;
+  }
   player.pause();
   player.currentTime = 0;
   currentTime.value = 0;
diff --git a/frontend/src/views/TabView.vue b/frontend/src/views/TabView.vue
index 1fa9b8a..89b8eec 100644
--- a/frontend/src/views/TabView.vue
+++ b/frontend/src/views/TabView.vue
@@ -1,5 +1,9 @@
 <template>
-  <RouterView />
+  <router-view v-slot="{ Component }">
+    <keep-alive>
+      <component :is="Component" />
+    </keep-alive>
+  </router-view>
 
   <van-tabbar route v-model="active">
     <van-tabbar-item replace name="home" icon="home-o"
@@ -13,12 +17,9 @@
 </template>
 
 <script setup>
-import { RouterView } from "vue-router";
-import { useRoute, useRouter } from "vue-router";
+import { RouterView, useRoute, useRouter } from "vue-router";
 const active = ref("home");
 
 const router = useRouter();
 const route = useRoute();
-console.log("router: ", router.params);
-console.log("route: ", route.params);
 </script>
diff --git a/frontend/src/views/tabs/HomeView.vue b/frontend/src/views/tabs/HomeView.vue
index 82cad7a..5b4037d 100644
--- a/frontend/src/views/tabs/HomeView.vue
+++ b/frontend/src/views/tabs/HomeView.vue
@@ -4,4 +4,23 @@
 
 <script setup>
 import List from "@/components/List.vue";
+import { useScrollPosition } from "@/stores/scroll-position";
+import { onActivated } from "vue";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+
+const { getPosition } = useScrollPosition();
+
+onActivated(() => {
+  setTimeout(() => {
+    const position = getPosition(route.fullPath);
+    if (position) {
+      console.log("scroll to", position);
+      document.documentElement.scrollTo({
+        top: position,
+      });
+    }
+  }, 100)
+});
 </script>