feat: reply panel hint

.vscode/settings.json

@@ -28,6 +28,7 @@
     "mockjs",
     "moemoe",
     "moemoepoint",
+    "nawa",
     "non-moe",
     "okaidia",
     "persistedstate",
@@ -54,7 +55,8 @@
     "ymgal",
     "Yuki",
     "Yuuki",
-    "yuyu"
+    "yuyu",
+    "zako"
   ],
   "i18n-ally.localesPaths": ["src/language"],
   "vue.codeActions.enabled": false

src/components/alert/KUNGalgameMessage.vue

@@ -48,7 +48,7 @@ const messageClass = (type: string): string => {
       <span class="icon" v-else-if="type === 'info'"
         ><Icon icon="line-md:alert-circle"
       /></span>
-      <span>{{ message }}</span>
+      <span v-html="message"></span>
     </div>
   </div>
 </template>

src/language/en.ts

@@ -97,6 +97,8 @@ export default {
     },
     panel: {
       to: 'Reply To',
+      master: 'ご主人',
+      reply: 'zako♡',
     },
   },
   update: {

src/language/zh.ts

@@ -95,6 +95,11 @@ export default {
       tags: '相同标签下的其它话题',
       master: '楼主的其它话题',
     },
+    panel: {
+      to: '回复给',
+      master: '狗修金',
+      reply: '杂鱼~♡',
+    },
   },
   update: {
     next: '下个版本',

src/views/topic/KUNGalgameTopicPage.vue

@@ -10,9 +10,9 @@ import {
   computed,
   watch,
   onBeforeUnmount,
-  watchEffect,
 } from 'vue'
 import { onBeforeRouteLeave, useRoute } from 'vue-router'
+import message from '@/components/alert/Message'
 
 import { TopicDetail, TopicReply } from '@/api'
 
@@ -68,7 +68,7 @@ const getReplies = async (): Promise<TopicReply[]> => {
   return (await useKUNGalgameTopicStore().getReplies(tid.value)).data
 }
 
-// 调用 getReplies 获取回复数据（watch 大法好！）
+// 调用 getReplies 获取回复数据（watch 大法好！），点击排序时获取回复
 watch(
   () => [
     replyRequest.value.sortOrder,
@@ -94,26 +94,39 @@ watch(isScrollToTop, () => {
 })
 
 // 监视用户想要跳转到哪个回复
-watchEffect(async () => {
+watch(
-  if (content.value) {
+  () => scrollToReplyId.value,
-    // 获取父元素下指定的子元素 id
+  async () => {
-    const childElement = content.value.querySelector(
+    // 这段语句会被执行两次（想想为什么）
-      `#kungalgame-reply-${scrollToReplyId.value}`
+    if (content.value && scrollToReplyId.value !== -1) {
-    ) as HTMLElement
+      // 获取父元素下指定的子元素 id
+      const childElement = content.value.querySelector(
+        `#kungalgame-reply-${scrollToReplyId.value}`
+      ) as HTMLElement
 
-    // 滚动到指定位置并标识 style
+      // 滚动到指定位置并标识 style
-    if (childElement) {
+      if (childElement) {
-      childElement.scrollIntoView({ behavior: 'smooth', block: 'center' })
+        childElement.scrollIntoView({ behavior: 'smooth', block: 'center' })
-      childElement.classList.add('active')
+        childElement.classList.add('active')
-      // 等待一段时间
+
-      await new Promise((resolve) => {
+        // 等待一段时间
-        setTimeout(resolve, 3000)
+        await new Promise((resolve) => {
-      })
+          setTimeout(resolve, 3000)
-      childElement.classList.remove('active')
+        })
+
+        childElement.classList.remove('active')
+        // 找不到指定话题，因为这个话题还没有被加载至 DOM
+      } else {
+        message(
+          'Unable to find the specified reply for now. Please scroll down.',
+          '暂时找不到指定回复，请下滑',
+          'info'
+        )
+      }
+      scrollToReplyId.value = -1
     }
-    scrollToReplyId.value = -1
   }
-})
+)
 
 // 滚动事件处理函数
 const scrollHandler = async () => {

src/views/topic/components/ReplyPanel.vue

@@ -30,7 +30,9 @@ const { isShowAdvance, isEdit, replyDraft } = storeToRefs(
   useKUNGalgameTopicStore()
 )
 
-const position = computed(() => {})
+const position = computed(() => {
+  return replyDraft.value.to_floor === 0 ? 'master' : 'reply'
+})
 
 const handelClosePanel = () => {
   isShowAdvance.value = false
@@ -49,9 +51,15 @@ const handelClosePanel = () => {
           <!-- 回复面板回复给谁 -->
           <div class="title">
             <h3>
-              {{ $tm('topic.panel.to') + ' @' }}
+              <span>{{ $tm('topic.panel.to') + ' @' }}</span>
               <span>{{ replyDraft.replyUserName }}</span>
-              <span>{{ replyDraft.to_floor }}</span>
+              <span>
+                {{
+                  `(⋈◍＞◡＜◍)。✧♡ ${$tm(`topic.panel.${position}`)} ${
+                    replyDraft.to_floor
+                  }`
+                }}
+              </span>
             </h3>
             <Icon
               @click="handelClosePanel"
@@ -112,17 +120,23 @@ const handelClosePanel = () => {
 }
 
 .title {
-  margin-bottom: 10px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 10px;
+  padding-left: 20px;
   span {
-    cursor: pointer;
+    &:nth-child(2) {
-    color: var(--kungalgame-blue-5);
+      margin: 0 5px;
-    border-bottom: 2px solid var(--kungalgame-white-9);
+      cursor: pointer;
-    &:hover {
+      color: var(--kungalgame-pink-3);
-      border-bottom: 2px solid var(--kungalgame-blue-5);
+      border-bottom: 2px solid var(--kungalgame-white-9);
+      &:hover {
+        border-bottom: 2px solid var(--kungalgame-pink-3);
+      }
+    }
+    &:nth-child(3) {
+      margin-left: 40px;
     }
   }
 }