From 1725a98b260f9cbe427151687358ed76085e8982 Mon Sep 17 00:00:00 2001 From: KUN1007 Date: Sat, 16 Sep 2023 23:03:18 +0800 Subject: [PATCH] feat: to_floor --- src/api/kungalgamer/types/kungalgamer.ts | 2 ++ src/api/topic/types/topic.ts | 16 +++++++---- src/language/en.ts | 3 ++ src/store/modules/topic.ts | 7 +++++ src/views/topic/KUNGalgameTopicPage.vue | 11 +++++++- src/views/topic/components/Master.vue | 3 +- src/views/topic/components/Reply.vue | 23 ++++++++++------ src/views/topic/components/ReplyPanel.vue | 14 ++++++++-- src/views/topic/components/ReplyPanelBtn.vue | 16 ++++++++--- src/views/topic/components/TopicFooter.vue | 29 ++++++++++---------- 10 files changed, 86 insertions(+), 38 deletions(-) diff --git a/src/api/kungalgamer/types/kungalgamer.ts b/src/api/kungalgamer/types/kungalgamer.ts index 1867c5e3..751ff3bb 100644 --- a/src/api/kungalgamer/types/kungalgamer.ts +++ b/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[] } diff --git a/src/api/topic/types/topic.ts b/src/api/topic/types/topic.ts index 3a8063a2..b3c83759 100644 --- a/src/api/topic/types/topic.ts +++ b/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 } diff --git a/src/language/en.ts b/src/language/en.ts index 78acbba6..b1832e90 100644 --- a/src/language/en.ts +++ b/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', diff --git a/src/store/modules/topic.ts b/src/store/modules/topic.ts index 06e7ab96..15532301 100644 --- a/src/store/modules/topic.ts +++ b/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, } diff --git a/src/views/topic/KUNGalgameTopicPage.vue b/src/views/topic/KUNGalgameTopicPage.vue index cc04d76e..da0dac9d 100644 --- a/src/views/topic/KUNGalgameTopicPage.vue +++ b/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 => { 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() }) diff --git a/src/views/topic/components/Master.vue b/src/views/topic/components/Master.vue index 06a5071c..d48d07b7 100644 --- a/src/views/topic/components/Master.vue +++ b/src/views/topic/components/Master.vue @@ -27,7 +27,6 @@ const { views, likes, dislikes, - replies, time, content, upvotes, @@ -78,7 +77,7 @@ const { diff --git a/src/views/topic/components/Reply.vue b/src/views/topic/components/Reply.vue index 222f978e..93a260bf 100644 --- a/src/views/topic/components/Reply.vue +++ b/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}`" >
- F{{ reply.floor }} + K{{ reply.floor }}
@@ -57,12 +64,12 @@ defineProps<{
- 回复给 @ - {{ - reply.to_user.name - }} + + 回复给 @ + + {{ reply.to_user.name }} + +
@@ -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" /> diff --git a/src/views/topic/components/ReplyPanel.vue b/src/views/topic/components/ReplyPanel.vue index 2f5a6ae8..c44628f8 100644 --- a/src/views/topic/components/ReplyPanel.vue +++ b/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 = () => {
-

回复给 @ 啊这可海星（楼主）

+

+ {{ $tm('topic.panel.to') + ' @' }} + {{ replyDraft.replyUserName }} + {{ replyDraft.to_floor }} +

+// 全局消息组件（底部） 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' + ) } // 显示高级编辑模式 diff --git a/src/views/topic/components/TopicFooter.vue b/src/views/topic/components/TopicFooter.vue index 4d44caf0..45190a40 100644 --- a/src/views/topic/components/TopicFooter.vue +++ b/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 () => {
    - -
  • - - {{ info?.views }} -
  • - {{ info?.upvotes }} + {{ info?.upvotes?.length }} +
    • + +
  • + + {{ info.views }}
  • - {{ info?.likes }} + {{ info?.likes?.length }}
  • - {{ info?.dislikes }} + {{ info?.dislikes?.length }}
@@ -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); } }