From 08af916b810694918a3e6d50c8e09c6bca2cd98a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=9B=AE=E6=A3=83?= <BT-Muli@outlook.com>
Date: Mon, 9 Sep 2024 18:02:22 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20=E5=B9=B3=E6=BB=91=E9=94=81?=
 =?UTF-8?q?=E5=AE=9A=E5=BD=93=E5=89=8D=E5=B8=96=E5=AD=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/post/tpo-collection.vue | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/post/tpo-collection.vue b/src/components/post/tpo-collection.vue
index 2d03e637..81013f19 100644
--- a/src/components/post/tpo-collection.vue
+++ b/src/components/post/tpo-collection.vue
@@ -5,7 +5,7 @@
         <span>{{ props.collection.collection_title }}</span>
         <span>合集ID：{{ props.collection.collection_id }}</span>
       </div>
-      <div class="tpoc-list">
+      <div class="tpoc-list" :id="`post-collect-overlay-${props.collection.collection_id}`">
         <div
           class="tpoc-item"
           v-for="(item, index) in posts"
@@ -47,7 +47,7 @@
   </TOverlay>
 </template>
 <script lang="ts" setup>
-import { ref, computed, onMounted } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 import { useRouter } from "vue-router";
 
 import Mys from "../../plugins/Mys/index.js";
@@ -83,6 +83,25 @@ const posts = ref<TpoCollectionItem[]>([]);
 
 const router = useRouter();
 
+watch(
+  () => visible.value,
+  async (value) => {
+    if (value) {
+      await new Promise((resolve) => setTimeout(resolve, 500));
+      const postList = document.getElementById(
+        `post-collect-overlay-${props.collection.collection_id}`,
+      );
+      if (postList === null) return;
+      if (props.collection.cur < 6) return;
+      const lastItem = <HTMLDivElement>postList.children[postList.children.length - 1];
+      postList.scrollTo({
+        top: lastItem.offsetTop - postList.clientHeight / 2 + lastItem.clientHeight / 2,
+        behavior: "smooth",
+      });
+    }
+  },
+);
+
 onMounted(async () => {
   const collectionPosts = await Mys.PostCollect(props.collection.collection_id);
   const tempArr: TpoCollectionItem[] = [];