rebuild: reply

src/store/modules/topic.ts

@@ -80,8 +80,7 @@ export const useKUNGalgameTopicStore = defineStore({
       isShowHotKeywords: true,
 
       tid: 0,
-      r_uid: 0,
-      replyUserName: '',
+      toUserName: '',
       to_uid: 0,
       content: '',
       tags: [],
@@ -280,8 +279,7 @@ export const useKUNGalgameTopicStore = defineStore({
     resetReplyDraft() {
       this.replyDraft.textCount = 0
       this.replyDraft.tid = 0
-      this.replyDraft.r_uid = 0
-      this.replyDraft.replyUserName = ''
+      this.replyDraft.toUserName = ''
       this.replyDraft.to_uid = 0
       this.replyDraft.content = ''
       this.replyDraft.tags = []

src/store/types/topic.d.ts

@@ -16,9 +16,8 @@ interface ReplyDraft {
 
   // 当前话题的 id
   tid: number
-  r_uid: number
   // 回复给谁，用于回复面板展示
-  replyUserName: string
+  toUserName: string
   to_uid: number
   content: string
   tags: string[]

src/views/topic/components/Master.vue

@@ -102,7 +102,7 @@ const loliStatus = computed(() => {
             <Rewrite v-if="edited" :time="edited" />
           </div>
         </div>
-        <!-- 话题的点赞数等信息，被作用人就是该话题的发布人 -->
+        <!-- 话题的点赞数等信息，被作用人就是该话题的发布人，楼主 floor 为 0 -->
         <Footer
           :info="{
             tid,
@@ -118,7 +118,11 @@ const loliStatus = computed(() => {
             tags,
             category,
           }"
-          :to-uid="user.uid"
+          :to-user="{
+            uid: user.uid,
+            name: user.name,
+          }"
+          :to-floor="0"
         />
       </div>
     </div>

src/views/topic/components/footer/Footer.vue

@@ -1,5 +1,6 @@
 <!-- 话题的底部区域，推话题，回复，点赞等 -->
 <script setup lang="ts">
+import { computed } from 'vue'
 import { Icon } from '@iconify/vue'
 // 推组件
 import Upvote from './Upvote.vue'
@@ -7,18 +8,13 @@ import Upvote from './Upvote.vue'
 import Like from './Like.vue'
 // 踩组件
 import Dislike from './Dislike.vue'
+// 回复组件
+import Reply from './Reply.vue'
 // 重新编辑组件
 import Rewrite from './Rewrite.vue'
 
-// 导入话题页面 store
-import { useKUNGalgameTopicStore } from '@/store/modules/topic'
 // 导入用户的 store
 import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer'
-import { storeToRefs } from 'pinia'
-import { computed } from 'vue'
-
-// 使用话题页面的 store
-const { isEdit, replyDraft } = storeToRefs(useKUNGalgameTopicStore())
 
 // 接受父组件的传值
 const props = defineProps<{
@@ -36,12 +32,16 @@ const props = defineProps<{
     tags: string[]
     category: string[]
   }
-  toUid: number
+  toUser: {
+    uid: number
+    name: string
+  }
+  toFloor: number
 }>()
 
 const info = computed(() => props.info)
 const content = computed(() => props.content)
-const toUid = computed(() => props.toUid)
+const toUser = computed(() => props.toUser)
 
 /**
  * 这里只是简单起见，不显示重新编辑
@@ -50,18 +50,6 @@ const toUid = computed(() => props.toUid)
  */
 // 当前登录用户的 uid
 const currUserUid = useKUNGalgameUserStore().uid
-
-// 点击回复打开回复面板
-const handleClickReply = () => {
-  // 保存必要信息，以便发表回复
-  replyDraft.value.tid = info.value.tid
-  // 被回复人就是发表人的 uid
-  replyDraft.value.to_uid = toUid.value
-  // 楼主的 floor 就是 0
-  replyDraft.value.to_floor = 0
-  // 打开回复面板
-  isEdit.value = true
-}
 </script>
 
 <template>
@@ -76,7 +64,7 @@ const handleClickReply = () => {
           :tid="info.tid"
           :rid="info.rid"
           :upvotes="info.upvotes"
-          :to-uid="toUid"
+          :to-uid="toUser.uid"
         />
 
         <!-- 浏览数，楼主才会显示 -->
@@ -91,7 +79,7 @@ const handleClickReply = () => {
           :tid="info.tid"
           :rid="info.rid"
           :likes="info.likes"
-          :to-uid="toUid"
+          :to-uid="toUser.uid"
         />
 
         <!-- 踩 -->
@@ -100,22 +88,25 @@ const handleClickReply = () => {
           :tid="info.tid"
           :rid="info.rid"
           :dislikes="info.dislikes"
-          :to-uid="toUid"
+          :to-uid="toUser.uid"
         />
       </ul>
     </div>
 
     <!-- 底部右侧部分（回复、评论、只看、编辑） -->
     <div class="right">
-      <div @click="handleClickReply" class="reply">
-        {{ $tm('topic.content.reply') }}
-      </div>
+      <Reply
+        :tid="info.tid"
+        :to-user-name="toUser.name"
+        :to_uid="toUser.uid"
+        :to_floor="toFloor"
+      />
 
       <!-- 分享 -->
       <span class="icon"><Icon icon="majesticons:share-line" /></span>
 
       <!-- 只看 -->
-      <span class="icon"><Icon icon="ph:user-focus-duotone" /></span>
+      <!-- <span class="icon"><Icon icon="ph:user-focus-duotone" /></span> -->
 
       <!-- 编辑 -->
       <Rewrite
@@ -126,7 +117,7 @@ const handleClickReply = () => {
         :content="content.content"
         :tags="content.tags"
         :category="content.category"
-        :to-uid="toUid"
+        :to-uid="toUser.uid"
       />
 
       <!-- 回复的插槽 -->

src/views/topic/components/footer/Reply.vue

@@ -0,0 +1,88 @@
+<!-- 话题的底部区域，推话题，回复，点赞等 -->
+<script setup lang="ts">
+// 导入话题页面 store
+import { useKUNGalgameTopicStore } from '@/store/modules/topic'
+import { storeToRefs } from 'pinia'
+
+// 使用话题页面的 store
+const { isEdit, replyDraft } = storeToRefs(useKUNGalgameTopicStore())
+
+// 接受父组件的传值
+const props = defineProps<{
+  tid: number
+  toUserName: string
+  to_uid: number
+  to_floor: number
+}>()
+
+// 点击回复打开回复面板
+const handleClickReply = () => {
+  // 保存必要信息，以便发表回复
+  replyDraft.value.tid = props.tid
+  replyDraft.value.toUserName = props.toUserName
+  replyDraft.value.to_uid = props.to_uid
+  replyDraft.value.to_floor = props.to_floor
+  // 打开回复面板
+  isEdit.value = true
+}
+</script>
+
+<template>
+  <div @click="handleClickReply" class="reply">
+    {{ $tm('topic.content.reply') }}
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.reply {
+  position: relative;
+  width: 70px;
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  color: var(--kungalgame-blue-4);
+  cursor: pointer;
+  transition: all 0.2s;
+  margin-right: 10px;
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    top: 0;
+    left: 0;
+    box-sizing: border-box;
+    border: 2px solid transparent;
+  }
+  &:hover {
+    color: var(--kungalgame-pink-4);
+
+    &::before {
+      transition: width 0.2s, height 0.2s, border-bottom-color 0s;
+      transition-delay: 0.2s, 0s, 0.2s;
+      width: 70px;
+      height: 30px;
+      border-left: 2px solid var(--kungalgame-pink-4);
+      border-bottom: 2px solid var(--kungalgame-pink-4);
+    }
+
+    &::after {
+      transition: width 0.2s, height 0.2s, border-right-color 0.2s;
+      transition-delay: 0s, 0.2s, 0.2s;
+      width: 70px;
+      height: 30px;
+      border-top: 2px solid var(--kungalgame-pink-4);
+      border-right: 2px solid var(--kungalgame-pink-4);
+    }
+  }
+}
+
+@media (max-width: 700px) {
+  .reply {
+    margin-right: 0;
+  }
+}
+</style>

src/views/topic/components/reply/Reply.vue

@@ -125,7 +125,11 @@ const handleClickComment = (rid: number) => {
               tags: reply.tags,
               category: [],
             }"
-            :to-uid="reply.r_user.uid"
+            :to-user="{
+              uid: reply.r_user.uid,
+              name: reply.r_user.name,
+            }"
+            :to-floor="reply.floor"
           >
             <template #comment>
               <span @click="handleClickComment(reply.rid)" class="icon">

src/views/topic/components/reply/ReplyPanel.vue

@@ -66,7 +66,7 @@ const handelClosePanel = async () => {
           <div class="title">
             <h3>
               <span>{{ $tm('topic.panel.to') + ' @' }}</span>
-              <span>{{ replyDraft.replyUserName }}</span>
+              <span>{{ replyDraft.toUserName }}</span>
               <span>
                 <span class="emoji">(⋈◍＞◡＜◍)。✧♡ </span>
                 {{ `${$tm(`topic.panel.${position}`)} ${replyDraft.to_floor}` }}