From 5c5f7f20bdc9cea803777e40ecc4a2d0cac98b81 Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyu_kun@sina.com>
Date: Sun, 17 Sep 2023 15:05:04 +0800
Subject: [PATCH] feat: scroll reply highlight

---
 src/views/topic/KUNGalgameTopicPage.vue | 8 ++++++--
 src/views/topic/components/Master.vue   | 2 --
 src/views/topic/components/Reply.vue    | 8 ++++++++
 src/views/topic/components/Rewrite.vue  | 6 ++++++
 4 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/views/topic/KUNGalgameTopicPage.vue b/src/views/topic/KUNGalgameTopicPage.vue
index 15340591..0661c5d6 100644
--- a/src/views/topic/KUNGalgameTopicPage.vue
+++ b/src/views/topic/KUNGalgameTopicPage.vue
@@ -68,8 +68,6 @@ const getReplies = async (): Promise<TopicReply[]> => {
   return (await useKUNGalgameTopicStore().getReplies(tid.value)).data
 }
 
-// 滚动到某个回复的位置
-
 // 调用 getReplies 获取回复数据（watch 大法好！）
 watch(
   () => [
@@ -106,6 +104,12 @@ watchEffect(async () => {
     // 滚动到指定位置并标识 style
     if (childElement) {
       childElement.scrollIntoView({ behavior: 'smooth', block: 'center' })
+      childElement.classList.add('active')
+      // 等待一段时间
+      await new Promise((resolve) => {
+        setTimeout(resolve, 3000)
+      })
+      childElement.classList.remove('active')
     }
     scrollToReplyId.value = -1
   }
diff --git a/src/views/topic/components/Master.vue b/src/views/topic/components/Master.vue
index 6942a095..692e2870 100644
--- a/src/views/topic/components/Master.vue
+++ b/src/views/topic/components/Master.vue
@@ -94,8 +94,6 @@ const {
   display: flex;
   flex-direction: column;
   align-items: center;
-  /* 楼主话题距离其它人话题的距离 */
-  margin-bottom: 5px;
   flex-shrink: 0;
   /* TODO: */
   /* 楼主话题背景图 */
diff --git a/src/views/topic/components/Reply.vue b/src/views/topic/components/Reply.vue
index ebdca483..2aabc6cf 100644
--- a/src/views/topic/components/Reply.vue
+++ b/src/views/topic/components/Reply.vue
@@ -145,6 +145,7 @@ defineProps<{
   border-radius: 5px;
   background-color: var(--kungalgame-trans-white-5);
   box-shadow: var(--shadow);
+  transition: all 0.5s;
 }
 /* 其它人回复的内容区 */
 .content {
@@ -160,6 +161,7 @@ defineProps<{
 }
 /* 其它人回复的上部右侧区域 */
 .right {
+  width: 100%;
   display: flex;
   flex-direction: column;
 }
@@ -203,6 +205,12 @@ defineProps<{
   color: var(--kungalgame-font-color-3);
 }
 
+/* 滚动到指定话题激活后的样式 */
+.active .container {
+  border: 2px solid var(--kungalgame-red-3);
+  background-color: var(--kungalgame-trans-red-1);
+}
+
 @media (max-width: 1000px) {
   .top {
     flex-direction: column;
diff --git a/src/views/topic/components/Rewrite.vue b/src/views/topic/components/Rewrite.vue
index 0292607e..ca30fd22 100644
--- a/src/views/topic/components/Rewrite.vue
+++ b/src/views/topic/components/Rewrite.vue
@@ -23,4 +23,10 @@ span {
   align-items: center;
   color: var(--kungalgame-font-color-3);
 }
+
+@media (max-width: 1000px) {
+  span {
+    margin-right: 10px;
+  }
+}
 </style>