feat: scroll reply highlight

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
   }

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: */
   /* 楼主话题背景图 */

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;

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>