From 1a485560484d8fd4dc44bb2f345125ebca23f08e Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyu_kun@sina.com>
Date: Fri, 6 Oct 2023 19:50:09 +0800
Subject: [PATCH] pref: rebuild topic footer

---
 src/language/en.ts                            |   4 +-
 src/language/zh.ts                            |   3 +-
 src/views/topic/components/Master.vue         |  17 +-
 src/views/topic/components/MasterFooter.vue   | 431 ------------------
 src/views/topic/components/footer/Dislike.vue | 147 ++++++
 src/views/topic/components/footer/Footer.vue  | 263 +++++++++++
 src/views/topic/components/footer/Like.vue    | 143 ++++++
 src/views/topic/components/footer/Upvote.vue  | 146 ++++++
 src/views/topic/components/reply/Reply.vue    |  22 +-
 .../topic/components/reply/ReplyFooter.vue    | 417 -----------------
 10 files changed, 729 insertions(+), 864 deletions(-)
 delete mode 100644 src/views/topic/components/MasterFooter.vue
 create mode 100644 src/views/topic/components/footer/Dislike.vue
 create mode 100644 src/views/topic/components/footer/Footer.vue
 create mode 100644 src/views/topic/components/footer/Like.vue
 create mode 100644 src/views/topic/components/footer/Upvote.vue
 delete mode 100644 src/views/topic/components/reply/ReplyFooter.vue

diff --git a/src/language/en.ts b/src/language/en.ts
index 6ec14c7b..aad89a0b 100644
--- a/src/language/en.ts
+++ b/src/language/en.ts
@@ -211,8 +211,10 @@ export default {
       publish: 'Confirm to publish?',
       publishSuccess: 'Publish Successfully',
       publishCancel: 'Cancel Publish',
-      upvote:
+      upvoteTopic:
         'Are you sure you want to upvote this topic? This will cost you 17 Moe Moe Points',
+      upvoteReply:
+        'Are you sure you want to upvote this reply? This will cost you 3 Moe Moe Points',
       rewrite: 'Confirm to Rewrite?',
       rewriteSuccess: 'Rewrite Successfully',
       rewriteCancel: 'Cancel Rewrite',
diff --git a/src/language/zh.ts b/src/language/zh.ts
index 837bf385..fae1cbe5 100644
--- a/src/language/zh.ts
+++ b/src/language/zh.ts
@@ -210,7 +210,8 @@ export default {
       publish: '确认发布吗？',
       publishSuccess: '发布成功',
       publishCancel: '取消发布',
-      upvote: '您确定推这个话题吗，这将会消耗您 17 萌萌点',
+      upvoteTopic: '您确定推这个话题吗，这将会消耗您 17 萌萌点',
+      upvoteReply: '您确定推这个回复吗，这将会消耗您 3 萌萌点',
       rewrite: '确认 Rewrite 吗？',
       rewriteSuccess: 'Rewrite 成功',
       rewriteCancel: '取消 Rewrite',
diff --git a/src/views/topic/components/Master.vue b/src/views/topic/components/Master.vue
index 07351495..1b12ebc5 100644
--- a/src/views/topic/components/Master.vue
+++ b/src/views/topic/components/Master.vue
@@ -2,8 +2,8 @@
   这是 KUNGalgame 话题展示区域楼主话题的区域，楼主的话题将会被展示在这里，位于话题展示区域最上方
  -->
 <script setup lang="ts">
-// 楼主话题的 Footer
-import MasterFooter from './MasterFooter.vue'
+// Footer
+import Footer from './footer/Footer.vue'
 // 楼主话题是否重新编辑
 import Rewrite from '../components/Rewrite.vue'
 // 楼主的信息
@@ -103,17 +103,22 @@ const loliStatus = computed(() => {
           </div>
         </div>
         <!-- 话题的点赞数等信息，被作用人就是该话题的发布人 -->
-        <MasterFooter
+        <Footer
           :info="{
             tid,
+            rid: 0,
             views,
             likes,
             dislikes,
             upvotes,
-            share,
           }"
-          :topic="{ tid, title, content, tags, category }"
-          :master="user"
+          :content="{
+            title,
+            content,
+            tags,
+            category,
+          }"
+          :to-uid="user.uid"
         />
       </div>
     </div>
diff --git a/src/views/topic/components/MasterFooter.vue b/src/views/topic/components/MasterFooter.vue
deleted file mode 100644
index ca82488f..00000000
--- a/src/views/topic/components/MasterFooter.vue
+++ /dev/null
@@ -1,431 +0,0 @@
-<!-- 话题的底部区域，推话题，回复，点赞等 -->
-<script setup lang="ts">
-import { onMounted, reactive, ref } from 'vue'
-import { Icon } from '@iconify/vue'
-import { useRouter } from 'vue-router'
-// 全局消息组件（底部）
-import { useKUNGalgameMessageStore } from '@/store/modules/message'
-// 全局消息组件（顶部）
-import message from '@/components/alert/Message'
-// throttle 函数
-import { throttle } from '@/utils/throttle'
-
-import { TopicUserInfo } from '@/api'
-
-// 导入编辑界面的 store
-import { useKUNGalgameEditStore } from '@/store/modules/edit'
-// 导入话题页面 store
-import { useKUNGalgameTopicStore } from '@/store/modules/topic'
-// 导入用户的 store
-import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer'
-import { storeToRefs } from 'pinia'
-
-// 使用编辑界面的 store
-const { topicRewrite } = storeToRefs(useKUNGalgameEditStore())
-// 使用话题页面的 store
-const { isEdit, replyDraft } = storeToRefs(useKUNGalgameTopicStore())
-// 使用路由
-const router = useRouter()
-
-// 接受父组件的传值
-const props = defineProps<{
-  info: {
-    tid: number
-    views: number
-    likes: number[]
-    dislikes: number[]
-    upvotes: number[]
-    share: number[]
-  }
-  topic: {
-    tid: number
-    title: string
-    content: string
-    tags: string[]
-    category: string[]
-  }
-  master: TopicUserInfo
-}>()
-
-/**
- * 这里只是简单起见，不显示重新编辑
- * 实际上如果用户自己修改了 localStorage 中保存的信息，这个验证就失效了
- * 但是修改了也没有用，验证逻辑位于后端
- */
-// 当前登录用户的 uid
-const currUserUid = useKUNGalgameUserStore().uid
-// 话题发布者的 uid
-const masterUid = props.master.uid
-// 是否具有重新编辑的权限
-const isShowRewrite = currUserUid === masterUid
-
-// footer 左侧的动作，点赞等
-const actions = reactive({
-  upvotes: props.info.upvotes,
-  likes: props.info.likes,
-  dislikes: props.info.dislikes,
-  share: props.info.share,
-})
-
-// 是否已经点过赞，点过踩
-const isActive = reactive({
-  isUpvote: false,
-  isLiked: false,
-  isDisliked: false,
-  isShared: false,
-})
-
-// throttle 回调函数
-const throttleCallback = () => {
-  message(
-    'You can only perform one operation within 1007 milliseconds',
-    '您在 1007 毫秒内只能进行一次操作',
-    'warn'
-  )
-}
-
-// throttle 函数，1007 毫秒仅会触发一次点赞
-const handleClickLikeThrottled = throttle(
-  async () => {
-    // 当前用户不可以给自己点赞
-    if (currUserUid === masterUid) {
-      message(
-        'You cannot like your own topic',
-        '您不可以给自己的话题点赞',
-        'warn'
-      )
-      return
-    }
-
-    // 切换点赞激活状态
-    isActive.isLiked = !isActive.isLiked
-
-    const res = await useKUNGalgameTopicStore().updateTopicLike(
-      props.info.tid,
-      masterUid,
-      isActive.isLiked
-    )
-
-    if (res.code === 200) {
-      // 更新点赞数
-      actions.likes.length = isActive.isLiked
-        ? actions.likes.length + 1
-        : actions.likes.length - 1
-    } else {
-      message('Topic like failed!', '点赞话题失败', 'error')
-    }
-  },
-  1007,
-  throttleCallback
-)
-
-// throttle 函数，1007 毫秒仅会触发一次点踩
-const handleClickDislikeThrottled = throttle(
-  async () => {
-    if (currUserUid === masterUid) {
-      message(
-        'You cannot dislike your own topic',
-        '您不可以给自己的话题点踩',
-        'warn'
-      )
-      return
-    }
-
-    isActive.isDisliked = !isActive.isDisliked
-    const res = await useKUNGalgameTopicStore().updateTopicDislike(
-      props.info.tid,
-      masterUid,
-      isActive.isDisliked
-    )
-
-    if (res.code === 200) {
-      // 更新点赞数
-      actions.dislikes.length = isActive.isDisliked
-        ? actions.dislikes.length + 1
-        : actions.dislikes.length - 1
-    } else {
-      message('Topic dislike failed!', '点踩话题失败', 'error')
-    }
-  },
-  1007,
-  throttleCallback
-)
-
-// 推话题
-const handleClickUpvote = async () => {
-  // 当前用户不可以推自己的话题
-  if (currUserUid === masterUid) {
-    message('You cannot upvote your own topic', '您不可以推自己的话题', 'warn')
-    return
-  }
-
-  // TODO: 该功能必须有错误处理
-  // if (useKUNGalgameUserStore().moemoepoint < 1100) {
-  //   message(
-  //     'Your Moe Moe Points are less than 1100, and you cannot use the upvote feature',
-  //     '您的萌萌点小于 1100，无法使用推功能',
-  //     'warn'
-  //   )
-  //   return
-  // }
-
-  // 调用弹窗确认
-  const res = await useKUNGalgameMessageStore().alert(
-    'AlertInfo.edit.upvote',
-    true
-  )
-
-  // 这里实现用户的点击确认取消逻辑
-  if (res) {
-    // 请求推话题的接口
-    const res = await useKUNGalgameTopicStore().updateTopicUpvote(
-      props.info.tid,
-      masterUid
-    )
-
-    if (res.code === 200) {
-      // 更新推数
-      actions.upvotes.length++
-
-      message('Topic upvote successfully', '推话题成功', 'success')
-    } else {
-      message('Topic upvote failed!', '推话题失败', 'error')
-    }
-  }
-}
-
-// 点赞
-const handleClickLike = () => {
-  handleClickLikeThrottled()
-}
-
-// 点踩
-const handleClickDislike = () => {
-  handleClickDislikeThrottled()
-}
-
-// 点击回复打开回复面板
-const handleClickReply = async () => {
-  // 保存必要信息，以便发表回复
-  replyDraft.value.tid = props.info.tid
-  // 被回复人就是发表人的 uid
-  replyDraft.value.to_uid = masterUid
-  // 楼主的 floor 就是 0
-  replyDraft.value.to_floor = 0
-  // 打开回复面板
-  isEdit.value = true
-}
-
-// 重新编辑
-const handleClickRewrite = () => {
-  // 保存数据
-  topicRewrite.value.tid = props.topic.tid
-  topicRewrite.value.title = props.topic.title
-  topicRewrite.value.content = props.topic.content
-  topicRewrite.value.tags = props.topic.tags
-  topicRewrite.value.category = props.topic.category
-
-  // 设置正在重新编辑状态为真
-  topicRewrite.value.isTopicRewriting = true
-
-  // 跳转到编辑界面
-  router.push({ name: 'Edit' })
-}
-
-// 初始化按钮的状态，是否已点赞等
-onMounted(() => {
-  // 已经推过
-  if (props.info.upvotes.includes(currUserUid)) {
-    isActive.isUpvote = true
-  }
-
-  // 已经点赞
-  if (props.info.likes.includes(currUserUid)) {
-    isActive.isLiked = true
-  }
-
-  // 已经点踩
-  if (props.info.dislikes.includes(currUserUid)) {
-    isActive.isDisliked = true
-  }
-
-  // 已经分享
-  if (props.info.share.includes(currUserUid)) {
-    isActive.isShared = true
-  }
-})
-</script>
-
-<template>
-  <!-- 楼主话题底部 -->
-  <div class="footer">
-    <!-- 底部左侧部分（点赞、推话题、踩） -->
-    <div class="left">
-      <ul>
-        <!-- 推话题 -->
-        <li>
-          <span
-            class="icon"
-            :class="isActive.isUpvote ? 'active' : ''"
-            @click="handleClickUpvote"
-          >
-            <Icon icon="bi:rocket" />
-          </span>
-          {{ actions.upvotes.length }}
-        </li>
-        <!-- 查看数量 -->
-        <li>
-          <span class="icon"><Icon icon="ic:outline-remove-red-eye" /></span>
-          {{ info.views }}
-        </li>
-        <!-- 点赞 -->
-        <li>
-          <span
-            class="icon"
-            :class="isActive.isLiked ? 'active' : ''"
-            @click="handleClickLike"
-          >
-            <Icon icon="line-md:thumbs-up-twotone" />
-          </span>
-          {{ actions.likes.length }}
-        </li>
-        <!-- 踩 -->
-        <li>
-          <span
-            class="icon"
-            :class="isActive.isDisliked ? 'active' : ''"
-            @click="handleClickDislike"
-          >
-            <Icon icon="line-md:thumbs-down-twotone" />
-          </span>
-          {{ actions.dislikes.length }}
-        </li>
-      </ul>
-    </div>
-
-    <!-- 底部右侧部分（回复、评论、只看、编辑） -->
-    <div class="right">
-      <div @click="handleClickReply" class="reply">
-        {{ $tm('topic.content.reply') }}
-      </div>
-
-      <!-- 分享 -->
-      <span class="icon"><Icon icon="majesticons:share-line" /></span>
-
-      <!-- 只看 -->
-      <span class="icon"><Icon icon="ph:user-focus-duotone" /></span>
-
-      <!-- 编辑 -->
-      <span v-if="isShowRewrite" @click="handleClickRewrite" class="icon">
-        <Icon icon="line-md:pencil-twotone-alt" />
-      </span>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-/* 楼主话题底部 */
-.footer {
-  padding: 10px 0;
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-/* 底部左侧部分（点赞、推话题、踩） */
-.left ul {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: var(--kungalgame-font-color-3);
-  li {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 14px;
-    margin: 17px;
-    margin-right: 0;
-    span {
-      display: flex;
-      margin-right: 3px;
-    }
-    &:nth-child(1) span {
-      color: var(--kungalgame-red-4);
-    }
-  }
-}
-
-/* 图标字体的样式 */
-.icon {
-  font-size: 24px;
-  color: var(--kungalgame-font-color-2);
-  cursor: pointer;
-}
-
-/* 底部右侧部分（回复、评论、只看、编辑） */
-.right {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  span {
-    display: flex;
-    margin-right: 17px;
-  }
-}
-
-.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;
-  &::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);
-    }
-  }
-}
-
-/* 激活后的样式 */
-.active {
-  color: var(--kungalgame-blue-4);
-}
-
-@media (max-width: 700px) {
-  .footer {
-    flex-direction: column;
-  }
-}
-</style>
diff --git a/src/views/topic/components/footer/Dislike.vue b/src/views/topic/components/footer/Dislike.vue
new file mode 100644
index 00000000..36802c69
--- /dev/null
+++ b/src/views/topic/components/footer/Dislike.vue
@@ -0,0 +1,147 @@
+<!-- 话题的底部区域，推话题，回复，点赞等 -->
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { Icon } from '@iconify/vue'
+// 全局消息组件（顶部）
+import message from '@/components/alert/Message'
+// throttle 函数
+import { throttle } from '@/utils/throttle'
+
+// 导入话题页面 store
+import { useKUNGalgameTopicStore } from '@/store/modules/topic'
+
+// 接受父组件的传值
+const props = defineProps<{
+  uid: number
+  tid: number
+  rid: number
+  dislikes: number[]
+  toUid: number
+}>()
+
+const dislikesArray = ref(props.dislikes)
+const isDisliked = ref(false)
+
+// throttle 回调函数
+const throttleCallback = () => {
+  message(
+    'You can only perform one operation within 1007 milliseconds',
+    '您在 1007 毫秒内只能进行一次操作',
+    'warn'
+  )
+}
+
+// 点踩
+const dislikeOperation = async (
+  tid: number,
+  rid: number,
+  toUid: number,
+  isPush: boolean
+) => {
+  // rid 为零表示点赞的是楼主的话题
+  const isMasterTopic = rid === 0
+  if (isMasterTopic) {
+    return await useKUNGalgameTopicStore().updateTopicDislike(
+      tid,
+      toUid,
+      isPush
+    )
+  } else {
+    return await useKUNGalgameTopicStore().updateReplyDislike(
+      tid,
+      toUid,
+      rid,
+      isPush
+    )
+  }
+}
+
+// throttle 函数，1007 毫秒仅会触发一次点踩
+const handleClickDislikeThrottled = throttle(
+  async () => {
+    // 当前用户不可以给自己点赞
+    if (props.uid === props.toUid) {
+      message('You cannot dislike yourself', '您不可以给自己点踩', 'warn')
+      return
+    }
+
+    // 切换点赞激活状态
+    isDisliked.value = !isDisliked.value
+
+    const res = await dislikeOperation(
+      props.tid,
+      props.rid,
+      props.toUid,
+      isDisliked.value
+    )
+
+    if (res.code === 200) {
+      // 更新点踩数
+      dislikesArray.value.length = isDisliked.value
+        ? dislikesArray.value.length + 1
+        : dislikesArray.value.length - 1
+    } else {
+      message('Dislike failed!', '点踩失败', 'error')
+    }
+  },
+  1007,
+  throttleCallback
+)
+
+// 点踩
+const handleClickDislike = () => {
+  handleClickDislikeThrottled()
+}
+
+// 初始化按钮的状态
+onMounted(() => {
+  // 已经点踩
+  if (props.dislikes.includes(props.uid)) {
+    isDisliked.value = true
+  }
+})
+</script>
+
+<template>
+  <!-- 踩 -->
+  <li>
+    <span
+      class="icon"
+      :class="isDisliked ? 'active' : ''"
+      @click="handleClickDislike"
+    >
+      <Icon icon="line-md:thumbs-down-twotone" />
+    </span>
+    {{ dislikes.length }}
+  </li>
+</template>
+
+<style lang="scss" scoped>
+li {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  margin: 17px;
+  margin-right: 0;
+  span {
+    display: flex;
+    margin-right: 3px;
+  }
+  &:nth-child(1) span {
+    color: var(--kungalgame-red-4);
+  }
+}
+
+/* 图标字体的样式 */
+.icon {
+  font-size: 24px;
+  color: var(--kungalgame-font-color-2);
+  cursor: pointer;
+}
+
+/* 激活后的样式 */
+.active {
+  color: var(--kungalgame-blue-4);
+}
+</style>
diff --git a/src/views/topic/components/footer/Footer.vue b/src/views/topic/components/footer/Footer.vue
new file mode 100644
index 00000000..c55fcd1a
--- /dev/null
+++ b/src/views/topic/components/footer/Footer.vue
@@ -0,0 +1,263 @@
+<!-- 话题的底部区域，推话题，回复，点赞等 -->
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import { useRouter } from 'vue-router'
+// 推组件
+import Upvote from './Upvote.vue'
+// 点赞组件
+import Like from './Like.vue'
+// 踩组件
+import Dislike from './Dislike.vue'
+
+// 导入编辑界面的 store
+import { useKUNGalgameEditStore } from '@/store/modules/edit'
+// 导入话题页面 store
+import { useKUNGalgameTopicStore } from '@/store/modules/topic'
+// 导入用户的 store
+import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer'
+import { storeToRefs } from 'pinia'
+
+// 使用编辑界面的 store
+const { topicRewrite } = storeToRefs(useKUNGalgameEditStore())
+// 使用话题页面的 store
+const { isEdit, replyDraft } = storeToRefs(useKUNGalgameTopicStore())
+// 使用路由
+const router = useRouter()
+
+// 接受父组件的传值
+const props = defineProps<{
+  info: {
+    tid: number
+    rid: number
+    views: number
+    likes: number[]
+    dislikes: number[]
+    upvotes: number[]
+  }
+  content: {
+    title: string
+    content: string
+    tags: string[]
+    category: string[]
+  }
+  toUid: number
+}>()
+
+/**
+ * 这里只是简单起见，不显示重新编辑
+ * 实际上如果用户自己修改了 localStorage 中保存的信息，这个验证就失效了
+ * 但是修改了也没有用，验证逻辑位于后端
+ */
+// 当前登录用户的 uid
+const currUserUid = useKUNGalgameUserStore().uid
+// 话题 / 回复发布者的 uid
+const masterUid = props.toUid
+// 是否具有重新编辑的权限
+const isShowRewrite = currUserUid === masterUid
+
+// 点击回复打开回复面板
+const handleClickReply = async () => {
+  // 保存必要信息，以便发表回复
+  replyDraft.value.tid = props.info.tid
+  // 被回复人就是发表人的 uid
+  replyDraft.value.to_uid = masterUid
+  // 楼主的 floor 就是 0
+  replyDraft.value.to_floor = 0
+  // 打开回复面板
+  isEdit.value = true
+}
+
+// 重新编辑
+const handleClickRewrite = () => {
+  // 保存数据
+  topicRewrite.value.tid = props.info.tid
+  topicRewrite.value.title = props.content.title
+  topicRewrite.value.content = props.content.content
+  topicRewrite.value.tags = props.content.tags
+  topicRewrite.value.category = props.content.category
+
+  // 设置正在重新编辑状态为真
+  topicRewrite.value.isTopicRewriting = true
+
+  // 跳转到编辑界面
+  router.push({ name: 'Edit' })
+}
+</script>
+
+<template>
+  <!-- 楼主话题底部 -->
+  <div class="footer">
+    <!-- 底部左侧部分（点赞、推话题、踩） -->
+    <div class="left">
+      <ul>
+        <!-- 推话题 -->
+        <Upvote
+          :uid="currUserUid"
+          :tid="props.info.tid"
+          :rid="props.info.rid"
+          :upvotes="props.info.upvotes"
+          :to-uid="masterUid"
+        />
+
+        <!-- 浏览数 -->
+        <li>
+          <span class="icon"><Icon icon="ic:outline-remove-red-eye" /></span>
+          {{ info.views }}
+        </li>
+
+        <!-- 点赞 -->
+        <Like
+          :uid="currUserUid"
+          :tid="props.info.tid"
+          :rid="props.info.rid"
+          :likes="props.info.likes"
+          :to-uid="masterUid"
+        />
+
+        <!-- 踩 -->
+        <Dislike
+          :uid="currUserUid"
+          :tid="props.info.tid"
+          :rid="props.info.rid"
+          :dislikes="props.info.dislikes"
+          :to-uid="masterUid"
+        />
+      </ul>
+    </div>
+
+    <!-- 底部右侧部分（回复、评论、只看、编辑） -->
+    <div class="right">
+      <div @click="handleClickReply" class="reply">
+        {{ $tm('topic.content.reply') }}
+      </div>
+
+      <!-- 分享 -->
+      <span class="icon"><Icon icon="majesticons:share-line" /></span>
+
+      <!-- 只看 -->
+      <span class="icon"><Icon icon="ph:user-focus-duotone" /></span>
+
+      <!-- 编辑 -->
+      <span v-if="isShowRewrite" @click="handleClickRewrite" class="icon">
+        <Icon icon="line-md:pencil-twotone-alt" />
+      </span>
+
+      <!-- 回复的插槽 -->
+      <span>
+        <slot name="comment"></slot>
+      </span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+/* 楼主话题底部 */
+.footer {
+  padding: 10px 0;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+/* 底部左侧部分（点赞、推话题、踩） */
+.left ul {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--kungalgame-font-color-3);
+  li {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 14px;
+    margin: 17px;
+    margin-right: 0;
+    span {
+      display: flex;
+      margin-right: 3px;
+    }
+    &:nth-child(1) span {
+      color: var(--kungalgame-red-4);
+    }
+  }
+}
+
+/* 图标字体的样式 */
+.icon {
+  font-size: 24px;
+  color: var(--kungalgame-font-color-2);
+  cursor: pointer;
+}
+
+/* 底部右侧部分（回复、评论、只看、编辑） */
+.right {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  span {
+    display: flex;
+    margin-right: 17px;
+  }
+}
+
+.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;
+  &::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);
+    }
+  }
+}
+
+/* 激活后的样式 */
+.active {
+  color: var(--kungalgame-blue-4);
+}
+
+@media (max-width: 700px) {
+  .footer {
+    flex-direction: column;
+  }
+  .right {
+    span:last-child {
+      margin-right: 0;
+    }
+  }
+}
+</style>
diff --git a/src/views/topic/components/footer/Like.vue b/src/views/topic/components/footer/Like.vue
new file mode 100644
index 00000000..9521d4b3
--- /dev/null
+++ b/src/views/topic/components/footer/Like.vue
@@ -0,0 +1,143 @@
+<!-- 话题的底部区域，推话题，回复，点赞等 -->
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { Icon } from '@iconify/vue'
+// 全局消息组件（顶部）
+import message from '@/components/alert/Message'
+// throttle 函数
+import { throttle } from '@/utils/throttle'
+
+// 导入话题页面 store
+import { useKUNGalgameTopicStore } from '@/store/modules/topic'
+
+// 接受父组件的传值
+const props = defineProps<{
+  uid: number
+  tid: number
+  rid: number
+  likes: number[]
+  toUid: number
+}>()
+
+const likesArray = ref(props.likes)
+const isLiked = ref(false)
+
+// throttle 回调函数
+const throttleCallback = () => {
+  message(
+    'You can only perform one operation within 1007 milliseconds',
+    '您在 1007 毫秒内只能进行一次操作',
+    'warn'
+  )
+}
+
+// 点赞
+const likeOperation = async (
+  tid: number,
+  rid: number,
+  toUid: number,
+  isPush: boolean
+) => {
+  // rid 为零表示点赞的是楼主的话题
+  const isMasterTopic = rid === 0
+  if (isMasterTopic) {
+    return await useKUNGalgameTopicStore().updateTopicLike(tid, toUid, isPush)
+  } else {
+    return await useKUNGalgameTopicStore().updateReplyLike(
+      tid,
+      toUid,
+      rid,
+      isPush
+    )
+  }
+}
+
+// throttle 函数，1007 毫秒仅会触发一次点赞
+const handleClickLikeThrottled = throttle(
+  async () => {
+    // 当前用户不可以给自己点赞
+    if (props.uid === props.toUid) {
+      message('You cannot like yourself', '您不可以给自己点赞', 'warn')
+      return
+    }
+
+    // 切换点赞激活状态
+    isLiked.value = !isLiked.value
+
+    const res = await likeOperation(
+      props.tid,
+      props.rid,
+      props.toUid,
+      isLiked.value
+    )
+
+    if (res.code === 200) {
+      // 更新点赞数
+      likesArray.value.length = isLiked.value
+        ? likesArray.value.length + 1
+        : likesArray.value.length - 1
+    } else {
+      message('Like failed!', '点赞失败', 'error')
+    }
+  },
+  1007,
+  throttleCallback
+)
+
+// 点赞
+const handleClickLike = () => {
+  handleClickLikeThrottled()
+}
+
+// 初始化按钮的状态，是否已点赞等
+onMounted(() => {
+  // 已经点赞
+  if (props.likes.includes(props.uid)) {
+    isLiked.value = true
+  }
+})
+</script>
+
+<template>
+  <!-- 点赞 -->
+  <li>
+    <span
+      class="icon"
+      :class="isLiked ? 'active' : ''"
+      @click="handleClickLike"
+    >
+      <Icon icon="line-md:thumbs-up-twotone" />
+    </span>
+    {{ likesArray.length }}
+  </li>
+</template>
+
+<style lang="scss" scoped>
+li {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  margin: 17px;
+  margin-right: 0;
+  span {
+    display: flex;
+    margin-right: 3px;
+  }
+  &:nth-child(1) span {
+    color: var(--kungalgame-red-4);
+  }
+}
+
+/* 图标字体的样式 */
+.icon {
+  font-size: 24px;
+  color: var(--kungalgame-font-color-2);
+  cursor: pointer;
+}
+
+/* 激活后的样式 */
+.active {
+  color: var(--kungalgame-blue-4);
+}
+</style>
diff --git a/src/views/topic/components/footer/Upvote.vue b/src/views/topic/components/footer/Upvote.vue
new file mode 100644
index 00000000..08d6b71c
--- /dev/null
+++ b/src/views/topic/components/footer/Upvote.vue
@@ -0,0 +1,146 @@
+<!-- 话题的底部区域，推话题，回复，点赞等 -->
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { Icon } from '@iconify/vue'
+// 全局消息组件（底部）
+import { useKUNGalgameMessageStore } from '@/store/modules/message'
+// 全局消息组件（顶部）
+import message from '@/components/alert/Message'
+// 导入话题页面 store
+import { useKUNGalgameTopicStore } from '@/store/modules/topic'
+
+// 接受父组件的传值
+const props = defineProps<{
+  uid: number
+  tid: number
+  rid: number
+  upvotes: number[]
+  toUid: number
+}>()
+
+const upvotesArray = ref(props.upvotes)
+const isUpvote = ref(false)
+
+// 推话题
+const upvoteTopic = async () => {
+  // 调用弹窗确认
+  const res = await useKUNGalgameMessageStore().alert(
+    'AlertInfo.edit.upvoteTopic',
+    true
+  )
+
+  // 这里实现用户的点击确认取消逻辑
+  if (res) {
+    // 请求推话题的接口
+    const res = await useKUNGalgameTopicStore().updateTopicUpvote(
+      props.tid,
+      props.toUid
+    )
+
+    if (res.code === 200) {
+      // 更新推数
+      upvotesArray.value.length++
+
+      message('Topic upvote successfully', '推话题成功', 'success')
+    } else {
+      message('Topic upvote failed!', '推话题失败', 'error')
+    }
+  }
+}
+
+// 推回复
+const upvoteReply = async () => {
+  // 调用弹窗确认
+  const res = await useKUNGalgameMessageStore().alert(
+    'AlertInfo.edit.upvoteReply',
+    true
+  )
+
+  // 这里实现用户的点击确认取消逻辑
+  if (res) {
+    // 请求推话题的接口
+    const res = await useKUNGalgameTopicStore().updateReplyUpvote(
+      props.tid,
+      props.toUid,
+      props.rid
+    )
+
+    if (res.code === 200) {
+      // 更新推数
+      upvotesArray.value.length++
+
+      message('Reply upvote successfully', '推回复成功', 'success')
+    } else {
+      message('Reply upvote failed!', '推回复失败', 'error')
+    }
+  }
+}
+
+// 推
+const handleClickUpvote = async () => {
+  // 当前用户不可以推自己
+  if (props.uid === props.toUid) {
+    message('You cannot upvote your own topic', '您不可以推自己的话题', 'warn')
+    return
+  }
+
+  // 为零是楼主的话题
+  if (props.rid === 0) {
+    upvoteTopic()
+  } else {
+    upvoteReply()
+  }
+}
+
+// 初始化按钮的状态
+onMounted(() => {
+  // 已经推过
+  if (props.upvotes.includes(props.uid)) {
+    isUpvote.value = true
+  }
+})
+</script>
+
+<template>
+  <!-- 推话题 -->
+  <li>
+    <span
+      class="icon"
+      :class="isUpvote ? 'active' : ''"
+      @click="handleClickUpvote"
+    >
+      <Icon icon="bi:rocket" />
+    </span>
+    {{ upvotes.length }}
+  </li>
+</template>
+
+<style lang="scss" scoped>
+li {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  margin: 17px;
+  margin-right: 0;
+  span {
+    display: flex;
+    margin-right: 3px;
+  }
+  &:nth-child(1) span {
+    color: var(--kungalgame-red-4);
+  }
+}
+
+/* 图标字体的样式 */
+.icon {
+  font-size: 24px;
+  color: var(--kungalgame-font-color-2);
+  cursor: pointer;
+}
+
+/* 激活后的样式 */
+.active {
+  color: var(--kungalgame-blue-4);
+}
+</style>
diff --git a/src/views/topic/components/reply/Reply.vue b/src/views/topic/components/reply/Reply.vue
index c3049447..7739052f 100644
--- a/src/views/topic/components/reply/Reply.vue
+++ b/src/views/topic/components/reply/Reply.vue
@@ -9,7 +9,7 @@ import { Icon } from '@iconify/vue'
 // 导入评论组件
 import Comments from '../comment/Comments.vue'
 // 导入 Footer 组件
-import ReplyFooter from './ReplyFooter.vue'
+import Footer from '../footer/Footer.vue'
 // 导入发布时间组件
 import Time from '../Time.vue'
 // 导入标签组件
@@ -97,25 +97,31 @@ const handleClickComment = (rid: number) => {
             </div>
           </div>
 
-          <!-- 其它人回复的底部 -->
-          <!-- info 代表 footer 的点赞等信息，master 表示当前的回复用户信息 -->
-          <!-- 这里传入了回复的插槽，因为只有回复可以被评论 -->
-          <ReplyFooter
+          <!-- 回复没有浏览数，所以是 0，占位 -->
+          <!-- title 和 category 也没有，占位 -->
+          <Footer
             :info="{
+              tid: reply.tid,
               rid: reply.rid,
+              views: 0,
               likes: reply.likes,
               dislikes: reply.dislikes,
               upvotes: reply.upvotes,
-              to_floor: reply.floor,
             }"
-            :master="reply.r_user"
+            :content="{
+              title: '',
+              content: reply.content,
+              tags: reply.tags,
+              category: [],
+            }"
+            :to-uid="reply.r_user.uid"
           >
             <template #comment>
               <span @click="handleClickComment(reply.rid)" class="icon">
                 <Icon icon="fa-regular:comment-dots" />
               </span>
             </template>
-          </ReplyFooter>
+          </Footer>
 
           <!-- 评论区域 -->
           <Comments
diff --git a/src/views/topic/components/reply/ReplyFooter.vue b/src/views/topic/components/reply/ReplyFooter.vue
deleted file mode 100644
index 59ac3e9e..00000000
--- a/src/views/topic/components/reply/ReplyFooter.vue
+++ /dev/null
@@ -1,417 +0,0 @@
-<!-- 话题的底部区域，推话题，回复，点赞等 -->
-<script setup lang="ts">
-import { onMounted, reactive, ref } from 'vue'
-import { useRoute } from 'vue-router'
-import { Icon } from '@iconify/vue'
-
-import { useRouter } from 'vue-router'
-// 全局消息组件（底部）
-import { useKUNGalgameMessageStore } from '@/store/modules/message'
-// 全局消息组件（顶部）
-import message from '@/components/alert/Message'
-// throttle 函数
-import { throttle } from '@/utils/throttle'
-
-import { TopicUserInfo } from '@/api'
-
-// 导入编辑界面的 store
-import { useKUNGalgameEditStore } from '@/store/modules/edit'
-// 导入话题页面 store
-import { useKUNGalgameTopicStore } from '@/store/modules/topic'
-// 导入用户的 store
-import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer'
-import { storeToRefs } from 'pinia'
-
-// 当前的话题 tid
-const tid = parseInt(useRoute().params.tid as string)
-
-// 使用话题页面的 store
-const topicStore = useKUNGalgameTopicStore()
-const { isEdit, replyDraft } = storeToRefs(topicStore)
-
-// 接受父组件的传值
-const props = defineProps<{
-  info: {
-    rid: number
-    likes: number[]
-    dislikes: number[]
-    upvotes: number[]
-    // 被回复人的 floor
-    to_floor: number
-  }
-  master: TopicUserInfo
-}>()
-
-/**
- * 这里只是简单起见，不显示重新编辑
- * 实际上如果用户自己修改了 localStorage 中保存的信息，这个验证就失效了
- * 但是修改了也没有用，验证逻辑位于后端
- */
-// 当前登录用户的 uid
-const currUserUid = useKUNGalgameUserStore().uid
-// 话题发布者的 uid
-const masterUid = props.master.uid
-// 是否具有重新编辑的权限
-const isShowRewrite = currUserUid === masterUid
-
-// footer 左侧的动作，点赞等
-const actions = reactive({
-  upvotes: props.info.upvotes,
-  likes: props.info.likes,
-  dislikes: props.info.dislikes,
-})
-
-// 是否已经点过赞，点过踩
-const isActive = reactive({
-  isUpvote: false,
-  isLiked: false,
-  isDisliked: false,
-  isShared: false,
-})
-
-// throttle 回调函数
-const throttleCallback = () => {
-  message(
-    'You can only perform one operation within 1007 milliseconds',
-    '您在 1007 毫秒内只能进行一次操作',
-    'warn'
-  )
-}
-
-// throttle 函数，1007 毫秒仅会触发一次点赞
-const handleClickLikeThrottled = throttle(
-  async () => {
-    // 当前用户不可以给自己点赞
-    if (currUserUid === masterUid) {
-      message(
-        'You cannot like your own reply',
-        '您不可以给自己的回复点赞',
-        'warn'
-      )
-      return
-    }
-
-    // 切换点赞激活状态
-    isActive.isLiked = !isActive.isLiked
-
-    const res = await useKUNGalgameTopicStore().updateReplyLike(
-      tid,
-      masterUid,
-      props.info.rid,
-      isActive.isLiked
-    )
-
-    if (res.code === 200) {
-      // 更新点赞数
-      actions.likes.length = isActive.isLiked
-        ? actions.likes.length + 1
-        : actions.likes.length - 1
-    } else {
-      message('Reply like failed!', '点赞回复失败', 'error')
-    }
-  },
-  1007,
-  throttleCallback
-)
-
-// throttle 函数，1007 毫秒仅会触发一次点踩
-const handleClickDislikeThrottled = throttle(
-  async () => {
-    if (currUserUid === masterUid) {
-      message(
-        'You cannot dislike your own reply',
-        '您不可以给自己的回复点踩',
-        'warn'
-      )
-      return
-    }
-
-    isActive.isDisliked = !isActive.isDisliked
-    const res = await useKUNGalgameTopicStore().updateReplyDislike(
-      tid,
-      masterUid,
-      props.info.rid,
-      isActive.isDisliked
-    )
-
-    if (res.code === 200) {
-      // 更新点赞数
-      actions.dislikes.length = isActive.isDisliked
-        ? actions.dislikes.length + 1
-        : actions.dislikes.length - 1
-    } else {
-      message('Reply dislike failed!', '点踩回复失败', 'error')
-    }
-  },
-  1007,
-  throttleCallback
-)
-
-// 推话题
-const handleClickUpvote = async () => {
-  // 当前用户不可以推自己的话题
-  if (currUserUid === masterUid) {
-    message('You cannot upvote your own reply', '您不可以推自己的回复', 'warn')
-    return
-  }
-
-  // TODO: 该功能必须有错误处理
-  // if (useKUNGalgameUserStore().moemoepoint < 1100) {
-  //   message(
-  //     'Your Moe Moe Points are less than 1100, and you cannot use the upvote feature',
-  //     '您的萌萌点小于 1100，无法使用推功能',
-  //     'warn'
-  //   )
-  //   return
-  // }
-
-  // 调用弹窗确认
-  const res = await useKUNGalgameMessageStore().alert(
-    'AlertInfo.edit.upvote',
-    true
-  )
-
-  // 这里实现用户的点击确认取消逻辑
-  if (res) {
-    // 请求推话题的接口
-    const res = await useKUNGalgameTopicStore().updateReplyUpvote(
-      tid,
-      masterUid,
-      props.info.rid
-    )
-
-    if (res.code === 200) {
-      // 更新推数
-      actions.upvotes.length++
-
-      message('Topic upvote successfully', '推话题成功', 'success')
-    } else {
-      message('Topic upvote failed!', '推话题失败', 'error')
-    }
-  }
-}
-
-// 点赞
-const handleClickLike = () => {
-  handleClickLikeThrottled()
-}
-
-// 点踩
-const handleClickDislike = () => {
-  handleClickDislikeThrottled()
-}
-
-// 点击回复打开回复面板
-const handelReply = async () => {
-  // 保存必要信息，以便发表回复
-  replyDraft.value.tid = tid
-  replyDraft.value.replyUserName = props.master.name
-  replyDraft.value.to_uid = props.master.uid
-  replyDraft.value.to_floor = props.info.to_floor
-
-  isEdit.value = true
-}
-
-// 重新编辑
-const handleClickEdit = () => {}
-
-// 初始化按钮的状态，是否已点赞等
-onMounted(() => {
-  // 已经推过
-  if (props.info.upvotes.includes(currUserUid)) {
-    isActive.isUpvote = true
-  }
-
-  // 已经点赞
-  if (props.info.likes.includes(currUserUid)) {
-    isActive.isLiked = true
-  }
-
-  // 已经点踩
-  if (props.info.dislikes.includes(currUserUid)) {
-    isActive.isDisliked = true
-  }
-})
-</script>
-
-<template>
-  <!-- 楼主话题底部 -->
-  <div class="footer">
-    <!-- 底部左侧部分（点赞、推话题、踩） -->
-    <div class="left">
-      <ul>
-        <!-- 推话题 -->
-        <li>
-          <span
-            class="icon"
-            :class="isActive.isUpvote ? 'active' : ''"
-            @click="handleClickUpvote"
-          >
-            <Icon icon="bi:rocket" />
-          </span>
-          {{ actions.upvotes.length }}
-        </li>
-        <!-- 点赞 -->
-        <li>
-          <span
-            class="icon"
-            :class="isActive.isLiked ? 'active' : ''"
-            @click="handleClickLike"
-          >
-            <Icon icon="line-md:thumbs-up-twotone" />
-          </span>
-          {{ actions.likes.length }}
-        </li>
-        <!-- 踩 -->
-        <li>
-          <span
-            class="icon"
-            :class="isActive.isDisliked ? 'active' : ''"
-            @click="handleClickDislike"
-          >
-            <Icon icon="line-md:thumbs-down-twotone" />
-          </span>
-          {{ actions.dislikes.length }}
-        </li>
-      </ul>
-    </div>
-    <!-- 底部右侧部分（回复、评论、只看、编辑） -->
-    <div class="right">
-      <ul>
-        <li @click="handelReply">
-          <div class="reply">
-            {{ $tm('topic.content.reply') }}
-          </div>
-        </li>
-        <!-- 分享 -->
-        <li>
-          <span class="icon"><Icon icon="majesticons:share-line" /></span>
-        </li>
-        <!-- 只看 -->
-        <li>
-          <span class="icon"><Icon icon="ph:user-focus-duotone" /></span>
-        </li>
-        <!-- 编辑 -->
-        <li>
-          <span @click="handleClickEdit" class="icon">
-            <Icon icon="line-md:pencil-twotone-alt" />
-          </span>
-        </li>
-
-        <!-- 回复的插槽 -->
-        <li>
-          <slot name="comment"></slot>
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-/* 楼主话题底部 */
-.footer {
-  padding: 10px 0;
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-/* 底部左侧部分（点赞、推话题、踩） */
-.left ul {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: var(--kungalgame-font-color-3);
-  li {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 14px;
-    margin: 17px;
-    margin-right: 0;
-    span {
-      display: flex;
-      margin-right: 3px;
-    }
-    &:nth-child(1) span {
-      color: var(--kungalgame-red-4);
-    }
-  }
-}
-
-/* 图标字体的样式 */
-.icon {
-  font-size: 24px;
-  color: var(--kungalgame-font-color-2);
-  cursor: pointer;
-}
-/* 底部右侧部分（回复、评论、只看、编辑） */
-.right ul {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-left: 10px;
-  li {
-    margin-right: 17px;
-    span {
-      display: flex;
-    }
-  }
-}
-
-.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;
-  &::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);
-    }
-  }
-}
-
-/* 激活后的样式 */
-.active {
-  color: var(--kungalgame-blue-4);
-}
-
-@media (max-width: 700px) {
-  .footer {
-    flex-direction: column;
-  }
-}
-</style>