feat: to_floor

src/api/kungalgamer/types/kungalgamer.ts

@@ -11,10 +11,12 @@ export interface KUNGalgamer {
   bio: string
   upvotes: number
   like: number
+  dislike: number
   comment: number[]
   reply: number[]
   topic: number[]
   like_topic: number[]
+  dislike_topic: number[]
   upvotes_topic: number[]
   reply_topic: number[]
 }

src/api/topic/types/topic.ts

@@ -17,11 +17,11 @@ export interface TopicDetail {
   tid: number
   title: string
   views: number
-  likes: number
-  dislikes: number
+  likes: number[]
+  dislikes: number[]
   time: number
   content: string
-  upvotes: number
+  upvotes: number[]
   tags: string[]
   edited: number
   user: TopicUserInfo
@@ -41,14 +41,17 @@ export interface TopicReplyRequestData {
 export interface TopicReply {
   rid: number
   tid: number
+  // reply 所在的楼层
   floor: number
+  // 被回复的 reply 所在的楼层
+  to_floor: number
   r_user: TopicUserInfo
   to_user: TopicToUserInfo
   edited: number
   content: string
-  upvote: number
-  likes: number
-  dislikes: number
+  upvote: number[]
+  likes: number[]
+  dislikes: number[]
   tags: string[]
   time: number
   cid: number[]
@@ -59,6 +62,7 @@ export interface TopicCreateReplyRequestData {
   tid: number
   r_uid: number
   to_uid: number
+  to_floor: number
   tags: string[]
   content: string
 }

src/language/en.ts

@@ -95,6 +95,9 @@ export default {
       tags: 'Topics Under the Same Tags',
       master: 'Other Topics of The Master',
     },
+    panel: {
+      to: 'Reply To',
+    },
   },
   update: {
     next: 'Next Version',

src/store/modules/topic.ts

@@ -29,6 +29,8 @@ interface ReplyDraft {
   to_uid: number
   content: string
   tags: string[]
+  // 被回复的人的楼层数，用于跳转
+  to_floor: number
 
   // 是否保存回复
   isSaveReply: boolean
@@ -63,6 +65,8 @@ interface Topic {
   isScrollToTop: boolean
   // 加载完了是否还需要加载
   isLoading: boolean
+  // 要滚动到的回复 id
+  scrollToReplyId: number
 
   // 回复的缓存
   replyDraft: ReplyDraft
@@ -82,6 +86,7 @@ export const useKUNGalgameTopicStore = defineStore({
     isActiveAside: false,
     isScrollToTop: false,
     isLoading: true,
+    scrollToReplyId: 0,
 
     replyDraft: {
       tid: 0,
@@ -90,6 +95,7 @@ export const useKUNGalgameTopicStore = defineStore({
       to_uid: 0,
       content: '',
       tags: [],
+      to_floor: 0,
 
       isSaveReply: false,
       publishStatus: false,
@@ -175,6 +181,7 @@ export const useKUNGalgameTopicStore = defineStore({
           tid: this.replyDraft.tid,
           r_uid: this.replyDraft.r_uid,
           to_uid: this.replyDraft.to_uid,
+          to_floor: this.replyDraft.to_floor,
           tags: this.replyDraft.tags,
           content: this.replyDraft.content,
         }

src/views/topic/KUNGalgameTopicPage.vue

@@ -10,6 +10,7 @@ import {
   computed,
   watch,
   onBeforeUnmount,
+watchEffect,
 } from 'vue'
 import { onBeforeRouteLeave, useRoute } from 'vue-router'
 
@@ -41,6 +42,7 @@ const {
   replyRequest,
   isScrollToTop,
   isLoading,
+  scrollToReplyId,
 } = storeToRefs(useKUNGalgameTopicStore())
 
 const tid = computed(() => {
@@ -64,6 +66,8 @@ const getReplies = async (): Promise<TopicReply[]> => {
   return (await useKUNGalgameTopicStore().getReplies(tid.value)).data
 }
 
+// 滚动到某个回复的位置
+
 // 调用 getReplies 获取回复数据（watch 大法好！）
 watch(
   () => [
@@ -89,6 +93,11 @@ watch(isScrollToTop, () => {
   }
 })
 
+// 监视用户想要跳转到哪个回复
+watchEffect(() => {
+
+})
+
 // 滚动事件处理函数
 const scrollHandler = async () => {
   // 滚动到底部的处理逻辑
@@ -170,7 +179,7 @@ onBeforeRouteLeave(() => {
   resetPanelStatus()
 })
 
-// 取消挂载时关闭回复面板
+// 挂载之前关闭回复面板
 onBeforeMount(() => {
   resetPanelStatus()
 })

src/views/topic/components/Master.vue

@@ -27,7 +27,6 @@ const {
   views,
   likes,
   dislikes,
-  replies,
   time,
   content,
   upvotes,
@@ -78,7 +77,7 @@ const {
         <!-- 话题的点赞数等信息 -->
         <TopicFooter
           :isOthersTopic="false"
-          :info="{ views, likes, dislikes, replies, upvotes }"
+          :info="{ views, likes, dislikes, upvotes, to_floor: 0 }"
           :r-user="user"
         />
       </div>

src/views/topic/components/Reply.vue

@@ -19,6 +19,12 @@ import KUNGalgamerInfo from './../components/KUNGalgamerInfo.vue'
 
 import { TopicReply } from '@/api/index'
 
+// 导入话题页面 store
+import { useKUNGalgameTopicStore } from '@/store/modules/topic'
+import { storeToRefs } from 'pinia'
+
+const { scrollToReplyId } = storeToRefs(useKUNGalgameTopicStore())
+
 defineProps<{
   repliesData: TopicReply[]
 }>()
@@ -36,11 +42,12 @@ defineProps<{
         class="other-topic-container"
         v-for="(reply, index) in repliesData"
         :key="`${index}${Math.random()}`"
+        :id="`kungalgame-reply-${reply.rid}`"
       >
         <!-- 每个人的单个话题 -->
         <!-- 楼层标志 -->
         <div class="floor">
-          <span>F{{ reply.floor }}</span>
+          <span>K{{ reply.floor }}</span>
         </div>
         <!-- 其他人话题内容区的容器 -->
         <div class="container">
@@ -57,12 +64,12 @@ defineProps<{
                   <!-- 上部区域的左边 -->
                   <div class="reply">
                     <!-- TODO: 跳转到页面中话题的位置 -->
-                    <span
-                      >回复给 @
-                      <router-link to="#">{{
-                        reply.to_user.name
-                      }}</router-link></span
-                    >
+                    <span>
+                      回复给 @
+                      <span @click="scrollToReplyId = reply.rid">
+                        {{ reply.to_user.name }}
+                      </span>
+                    </span>
                   </div>
                   <!-- 上部区域的右边 -->
                   <Rewrite v-if="reply.edited" :time="reply.edited" />
@@ -84,8 +91,8 @@ defineProps<{
             :info="{
               likes: reply.likes,
               dislikes: reply.dislikes,
-              replies: reply.cid.length,
               upvotes: reply.upvote,
+              to_floor: reply.floor,
             }"
             :rUser="reply.r_user"
           />

src/views/topic/components/ReplyPanel.vue

@@ -6,7 +6,7 @@ import { Icon } from '@iconify/vue'
 import 'animate.css'
 
 // 导入 Vue 异步函数
-import { defineAsyncComponent } from 'vue'
+import { computed, defineAsyncComponent } from 'vue'
 
 // 导入编辑器
 const QuillEditor = defineAsyncComponent(
@@ -26,7 +26,11 @@ import { useKUNGalgameTopicStore } from '@/store/modules/topic'
 import { storeToRefs } from 'pinia'
 
 // 使用话题页面的 store
-const { isShowAdvance, isEdit } = storeToRefs(useKUNGalgameTopicStore())
+const { isShowAdvance, isEdit, replyDraft } = storeToRefs(
+  useKUNGalgameTopicStore()
+)
+
+const position = computed(() => {})
 
 const handelClosePanel = () => {
   isShowAdvance.value = false
@@ -44,7 +48,11 @@ const handelClosePanel = () => {
         <div class="container">
           <!-- 回复面板回复给谁 -->
           <div class="title">
-            <h3>回复给 @ <span>啊这可海星</span>（楼主）</h3>
+            <h3>
+              {{ $tm('topic.panel.to') + ' @' }}
+              <span>{{ replyDraft.replyUserName }}</span>
+              <span>{{ replyDraft.to_floor }}</span>
+            </h3>
             <Icon
               @click="handelClosePanel"
               class="close"

src/views/topic/components/ReplyPanelBtn.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
+// 全局消息组件（底部）
 import { useKUNGalgameMessageStore } from '@/store/modules/message'
-
+// 全局消息组件（顶部）
+import message from '@/components/alert/Message'
 // 导入话题页面 store
 import { useKUNGalgameTopicStore } from '@/store/modules/topic'
 import { storeToRefs } from 'pinia'
@@ -17,6 +19,8 @@ const isValidReply = () => {}
 
 // 发布回复的函数
 const publishReply = async () => {
+  // 重置页数，是否加载等页面状态
+  useKUNGalgameTopicStore().resetPageStatus()
   // 发布回复
   await useKUNGalgameTopicStore().postNewReply()
 
@@ -35,10 +39,10 @@ const handlePublish = async () => {
   if (res) {
     publishReply()
     // 发布成功提示
-    info.info('AlertInfo.edit.publishSuccess')
+    message('Publish reply successfully!', '发布回复成功！', 'success')
   } else {
     // 取消发布提示
-    info.info('AlertInfo.edit.publishCancel')
+    message('Cancel publish reply', '取消发布回复', 'info')
   }
 }
 
@@ -47,7 +51,11 @@ const handleSave = () => {
   // 设置保存为 true
   replyDraft.value.isSaveReply = true
   // 这里实现用户的保存逻辑
-  info.info('AlertInfo.edit.draft')
+  message(
+    'The draft has been saved successfully!',
+    '草稿已经保存成功',
+    'success'
+  )
 }
 
 // 显示高级编辑模式

src/views/topic/components/TopicFooter.vue

@@ -26,11 +26,11 @@ const props = defineProps<{
   isOthersTopic?: boolean
   info: {
     views?: number
-    likes: number
-    dislikes: number
-    replies: number
-    upvotes: number
-    components?: number
+    likes: number[]
+    dislikes: number[]
+    upvotes: number[]
+    // 被回复人的 floor
+    to_floor: number
   }
   rUser: TopicUserInfo
 }>()
@@ -41,6 +41,7 @@ const handelReply = async () => {
   replyDraft.value.r_uid = useKUNGalgameUserStore().uid
   replyDraft.value.replyUserName = props.rUser.name
   replyDraft.value.to_uid = props.rUser.uid
+  replyDraft.value.to_floor = props.info.to_floor
 
   // 打开回复面板
   await nextTick()
@@ -54,25 +55,25 @@ const handelReply = async () => {
     <!-- 底部左侧部分（点赞、推话题、踩） -->
     <div class="left">
       <ul>
-        <!-- 查看数量 -->
-        <li>
-          <span class="icon"><Icon icon="ic:outline-remove-red-eye" /></span>
-          {{ info?.views }}
-        </li>
         <!-- 推话题 -->
         <li>
           <span class="icon"><Icon icon="bi:rocket" /></span>
-          {{ info?.upvotes }}
+          {{ info?.upvotes?.length }}
+        </li>
+        <!-- 查看数量 -->
+        <li v-if="info.views">
+          <span class="icon"><Icon icon="ic:outline-remove-red-eye" /></span>
+          {{ info.views }}
         </li>
         <!-- 点赞 -->
         <li>
           <span class="icon"><Icon icon="line-md:thumbs-up-twotone" /></span>
-          {{ info?.likes }}
+          {{ info?.likes?.length }}
         </li>
         <!-- 踩 -->
         <li>
           <span class="icon"><Icon icon="line-md:thumbs-down-twotone" /></span>
-          {{ info?.dislikes }}
+          {{ info?.dislikes?.length }}
         </li>
       </ul>
     </div>
@@ -135,7 +136,7 @@ const handelReply = async () => {
       display: flex;
       margin-right: 3px;
     }
-    &:nth-child(2) span {
+    &:nth-child(1) span {
       color: var(--kungalgame-red-4);
     }
   }