pref: reply store

This commit is contained in:
KUN1007 2023-11-21 20:17:57 +08:00
parent e254580751
commit ab2ec87828
9 changed files with 65 additions and 87 deletions

View file

@ -9,6 +9,7 @@ import MilkdownEditor from './MilkdownEditor.vue'
// KUN Visual Novel store // KUN Visual Novel store
import { useKUNGalgameEditStore } from '@/store/modules/edit' import { useKUNGalgameEditStore } from '@/store/modules/edit'
import { useTempReplyStore } from '@/store/temp/topic/reply'
import { usePersistKUNGalgameReplyStore } from '@/store/modules/topic/reply' import { usePersistKUNGalgameReplyStore } from '@/store/modules/topic/reply'
import { storeToRefs } from 'pinia' import { storeToRefs } from 'pinia'
@ -18,12 +19,11 @@ const {
content, content,
topicRewrite, topicRewrite,
} = storeToRefs(useKUNGalgameEditStore()) } = storeToRefs(useKUNGalgameEditStore())
const { isReplyRewriting, replyRewrite } = storeToRefs(useTempReplyStore())
const { const {
editorHeight: replyEditorHeight, editorHeight: replyEditorHeight,
isSaveReply, isSaveReply,
isReplyRewriting,
replyDraft, replyDraft,
replyRewrite,
} = storeToRefs(usePersistKUNGalgameReplyStore()) } = storeToRefs(usePersistKUNGalgameReplyStore())
const props = defineProps<{ const props = defineProps<{

View file

@ -1,17 +1,14 @@
import { defineStore } from 'pinia' import { defineStore } from 'pinia'
// Replies import { postReplyByPidApi } from '@/api'
import { postReplyByPidApi, updateReplyApi } from '@/api'
import type { import type {
TopicCreateReplyRequestData, TopicCreateReplyRequestData,
TopicCreateReplyResponseData, TopicCreateReplyResponseData,
TopicUpdateReplyRequestData,
TopicUpdateReplyResponseData,
} from '@/api' } from '@/api'
import { ReplyStorePersist } from '@/store/types/topic/reply'
import { checkReplyPublish } from '@/store/utils/checkReplyPublish' import { checkReplyPublish } from '@/store/utils/checkReplyPublish'
import type { ReplyStorePersist } from '@/store/types/topic/reply'
export const usePersistKUNGalgameReplyStore = defineStore({ export const usePersistKUNGalgameReplyStore = defineStore({
id: 'KUNGalgameReply', id: 'KUNGalgameReply',
@ -23,9 +20,6 @@ export const usePersistKUNGalgameReplyStore = defineStore({
isShowHotKeywords: true, isShowHotKeywords: true,
editorHeight: 200, editorHeight: 200,
// Whether the reply is being rewritten
isReplyRewriting: false,
replyDraft: { replyDraft: {
tid: 0, tid: 0,
toUserName: '', toUserName: '',
@ -34,13 +28,6 @@ export const usePersistKUNGalgameReplyStore = defineStore({
tags: [], tags: [],
toFloor: 0, toFloor: 0,
}, },
replyRewrite: {
tid: 0,
rid: 0,
content: '',
tags: [],
edited: 0,
},
}), }),
actions: { actions: {
// Create a new reply // Create a new reply
@ -62,23 +49,6 @@ export const usePersistKUNGalgameReplyStore = defineStore({
return await postReplyByPidApi(requestData) return await postReplyByPidApi(requestData)
}, },
// Update a reply
async updateReply(): Promise<TopicUpdateReplyResponseData | undefined> {
const requestData: TopicUpdateReplyRequestData = {
tid: this.replyRewrite.tid,
rid: this.replyRewrite.rid,
content: this.replyRewrite.content,
tags: this.replyRewrite.tags,
edited: Date.now(),
}
if (!checkReplyPublish(requestData.tags, requestData.content)) {
return
}
return await updateReplyApi(requestData)
},
// Reset reply draft to its original value, used for the reply publish button // Reset reply draft to its original value, used for the reply publish button
resetReplyDraft() { resetReplyDraft() {
this.replyDraft.tid = 0 this.replyDraft.tid = 0
@ -90,15 +60,5 @@ export const usePersistKUNGalgameReplyStore = defineStore({
this.isSaveReply = false this.isSaveReply = false
}, },
// Reset data for re-editing a reply
resetRewriteReplyData() {
this.replyRewrite.tid = 0
this.replyRewrite.rid = 0
this.replyRewrite.content = ''
this.replyRewrite.tags = []
this.isReplyRewriting = false
},
}, },
}) })

View file

@ -1,10 +1,11 @@
import { defineStore } from 'pinia' import { defineStore } from 'pinia'
// Replies
import { import {
getRepliesByPidApi, getRepliesByPidApi,
updateReplyUpvoteApi, updateReplyUpvoteApi,
updateReplyLikeApi, updateReplyLikeApi,
updateReplyDislikeApi, updateReplyDislikeApi,
updateReplyApi,
} from '@/api' } from '@/api'
import type { import type {
@ -16,8 +17,11 @@ import type {
TopicLikeReplyResponseData, TopicLikeReplyResponseData,
TopicDislikeReplyRequestData, TopicDislikeReplyRequestData,
TopicDislikeReplyResponseData, TopicDislikeReplyResponseData,
TopicUpdateReplyRequestData,
TopicUpdateReplyResponseData,
} from '@/api' } from '@/api'
import { checkReplyPublish } from '@/store/utils/checkReplyPublish'
import type { ReplyStoreTemp } from '@/store/types/topic/reply' import type { ReplyStoreTemp } from '@/store/types/topic/reply'
export const useTempReplyStore = defineStore({ export const useTempReplyStore = defineStore({
@ -28,8 +32,9 @@ export const useTempReplyStore = defineStore({
isEdit: false, isEdit: false,
isScrollToTop: false, isScrollToTop: false,
isLoading: true, isLoading: true,
// Reply ID starts from 0, -1 is just for monitoring data changes
scrollToReplyId: -1, scrollToReplyId: -1,
isReplyRewriting: false,
replyRequest: { replyRequest: {
page: 1, page: 1,
@ -38,13 +43,20 @@ export const useTempReplyStore = defineStore({
sortOrder: 'asc', sortOrder: 'asc',
}, },
replyRewrite: {
tid: 0,
rid: 0,
content: '',
tags: [],
edited: 0,
},
tempReply: { tempReply: {
rid: 0, rid: 0,
tid: 0, tid: 0,
// Floor where the reply is located
floor: 0, floor: 0,
// Floor where the replied reply is located
to_floor: 0, to_floor: 0,
r_user: { r_user: {
uid: 0, uid: 0,
name: '', name: '',
@ -129,6 +141,33 @@ export const useTempReplyStore = defineStore({
return await updateReplyDislikeApi(requestData) return await updateReplyDislikeApi(requestData)
}, },
// Update a reply
async updateReply(): Promise<TopicUpdateReplyResponseData | undefined> {
const requestData: TopicUpdateReplyRequestData = {
tid: this.replyRewrite.tid,
rid: this.replyRewrite.rid,
content: this.replyRewrite.content,
tags: this.replyRewrite.tags,
edited: Date.now(),
}
if (!checkReplyPublish(requestData.tags, requestData.content)) {
return
}
return await updateReplyApi(requestData)
},
// Reset data for re-editing a reply
resetRewriteReplyData() {
this.replyRewrite.tid = 0
this.replyRewrite.rid = 0
this.replyRewrite.content = ''
this.replyRewrite.tags = []
this.isReplyRewriting = false
},
resetPageStatus() { resetPageStatus() {
this.replyRequest.page = 1 this.replyRequest.page = 1
this.isLoading = true this.isLoading = true

View file

@ -42,7 +42,10 @@ export interface ReplyStoreTemp {
// Reply ID to scroll to // Reply ID to scroll to
scrollToReplyId: number scrollToReplyId: number
isReplyRewriting: boolean
replyRequest: ReplyRequest replyRequest: ReplyRequest
replyRewrite: ReplyRewrite
tempReply: TopicReply tempReply: TopicReply
tempReplyRewrite: ReplyRewriteTemp tempReplyRewrite: ReplyRewriteTemp
} }
@ -54,8 +57,5 @@ export interface ReplyStorePersist {
isShowHotKeywords: boolean isShowHotKeywords: boolean
editorHeight: number editorHeight: number
isReplyRewriting: boolean
replyDraft: ReplyDraft replyDraft: ReplyDraft
replyRewrite: ReplyRewrite
} }

View file

@ -4,6 +4,7 @@ import { useRoute } from 'vue-router'
import Message from '@/components/alert/Message' import Message from '@/components/alert/Message'
import { useKUNGalgameEditStore } from '@/store/modules/edit' import { useKUNGalgameEditStore } from '@/store/modules/edit'
import { useTempReplyStore } from '@/store/temp/topic/reply'
import { usePersistKUNGalgameReplyStore } from '@/store/modules/topic/reply' import { usePersistKUNGalgameReplyStore } from '@/store/modules/topic/reply'
import { storeToRefs } from 'pinia' import { storeToRefs } from 'pinia'
@ -19,13 +20,11 @@ const {
isSaveTopic, isSaveTopic,
topicRewrite, topicRewrite,
} = storeToRefs(useKUNGalgameEditStore()) } = storeToRefs(useKUNGalgameEditStore())
// Store for the topic interface, used for replies const { isReplyRewriting, replyRewrite } = storeToRefs(useTempReplyStore())
const { const {
isShowHotKeywords: isShowReplyHotKeywords, isShowHotKeywords: isShowReplyHotKeywords,
isSaveReply, isSaveReply,
isReplyRewriting,
replyDraft, replyDraft,
replyRewrite,
} = storeToRefs(usePersistKUNGalgameReplyStore()) } = storeToRefs(usePersistKUNGalgameReplyStore())
// Compute whether to show hot tags based on route name // Compute whether to show hot tags based on route name

View file

@ -24,7 +24,6 @@ const ReplyPanel = defineAsyncComponent(
import { useKUNGalgameSettingsStore } from '@/store/modules/settings' import { useKUNGalgameSettingsStore } from '@/store/modules/settings'
import { usePersistKUNGalgameTopicStore } from '@/store/modules/topic/topic' import { usePersistKUNGalgameTopicStore } from '@/store/modules/topic/topic'
import { usePersistKUNGalgameReplyStore } from '@/store/modules/topic/reply'
import { useTempTopicStore } from '@/store/temp/topic/topic' import { useTempTopicStore } from '@/store/temp/topic/topic'
import { useTempReplyStore } from '@/store/temp/topic/reply' import { useTempReplyStore } from '@/store/temp/topic/reply'
@ -36,7 +35,7 @@ const route = useRoute()
const { showKUNGalgamePageWidth } = storeToRefs(useKUNGalgameSettingsStore()) const { showKUNGalgamePageWidth } = storeToRefs(useKUNGalgameSettingsStore())
const { isShowAdvance } = storeToRefs(usePersistKUNGalgameTopicStore()) const { isShowAdvance } = storeToRefs(usePersistKUNGalgameTopicStore())
const { isReplyRewriting } = storeToRefs(usePersistKUNGalgameReplyStore()) const { isReplyRewriting } = storeToRefs(useTempReplyStore())
const { const {
isEdit, isEdit,

View file

@ -5,16 +5,13 @@ import { Icon } from '@iconify/vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { useKUNGalgameEditStore } from '@/store/modules/edit' import { useKUNGalgameEditStore } from '@/store/modules/edit'
import { usePersistKUNGalgameReplyStore } from '@/store/modules/topic/reply'
import { useTempReplyStore } from '@/store/temp/topic/reply' import { useTempReplyStore } from '@/store/temp/topic/reply'
import { storeToRefs } from 'pinia' import { storeToRefs } from 'pinia'
const { topicRewrite } = storeToRefs(useKUNGalgameEditStore()) const { topicRewrite } = storeToRefs(useKUNGalgameEditStore())
const { isEdit } = storeToRefs(useTempReplyStore()) const { isEdit } = storeToRefs(useTempReplyStore())
const { isReplyRewriting, replyRewrite } = storeToRefs( const { isReplyRewriting, replyRewrite } = storeToRefs(useTempReplyStore())
usePersistKUNGalgameReplyStore()
)
const router = useRouter() const router = useRouter()

View file

@ -20,7 +20,8 @@ import { storeToRefs } from 'pinia'
const messageStore = useTempMessageStore() const messageStore = useTempMessageStore()
const { isShowAdvance } = storeToRefs(usePersistKUNGalgameTopicStore()) const { isShowAdvance } = storeToRefs(usePersistKUNGalgameTopicStore())
const { replyDraft, isReplyRewriting, replyPanelWidth } = storeToRefs( const { isReplyRewriting } = storeToRefs(useTempReplyStore())
const { replyDraft, replyPanelWidth } = storeToRefs(
usePersistKUNGalgameReplyStore() usePersistKUNGalgameReplyStore()
) )
@ -37,7 +38,7 @@ const handleClosePanel = async () => {
const res = await messageStore.alert('AlertInfo.edit.closePanel', true) const res = await messageStore.alert('AlertInfo.edit.closePanel', true)
if (res) { if (res) {
usePersistKUNGalgameReplyStore().resetRewriteReplyData() useTempReplyStore().resetRewriteReplyData()
} else { } else {
return return
} }

View file

@ -9,37 +9,30 @@ import { useTempReplyStore } from '@/store/temp/topic/reply'
import { storeToRefs } from 'pinia' import { storeToRefs } from 'pinia'
const { isShowAdvance } = storeToRefs(usePersistKUNGalgameTopicStore()) const { isShowAdvance } = storeToRefs(usePersistKUNGalgameTopicStore())
const { isSaveReply, isReplyRewriting, replyRewrite } = storeToRefs( const { isReplyRewriting, replyRewrite } = storeToRefs(useTempReplyStore())
usePersistKUNGalgameReplyStore() const { isSaveReply } = storeToRefs(usePersistKUNGalgameReplyStore())
)
const { isEdit, tempReplyRewrite } = storeToRefs(useTempReplyStore()) const { isEdit, tempReplyRewrite } = storeToRefs(useTempReplyStore())
const messageStore = useTempMessageStore() const messageStore = useTempMessageStore()
// Click to publish a reply
const handlePublish = async () => { const handlePublish = async () => {
const res = await messageStore.alert('AlertInfo.edit.publish', true) const res = await messageStore.alert('AlertInfo.edit.publish', true)
// Implement user's confirmation or cancel logic here
if (res) { if (res) {
useTempReplyStore().resetPageStatus() useTempReplyStore().resetPageStatus()
// Publish the reply
const responseData = await usePersistKUNGalgameReplyStore().postNewReply() const responseData = await usePersistKUNGalgameReplyStore().postNewReply()
if (responseData?.code === 200) { if (responseData?.code === 200) {
// Save the data of the new reply
useTempReplyStore().tempReply = responseData.data useTempReplyStore().tempReply = responseData.data
// Clear the data because the reply has been successfully posted
usePersistKUNGalgameReplyStore().resetReplyDraft() usePersistKUNGalgameReplyStore().resetReplyDraft()
// Close the panel
isEdit.value = false isEdit.value = false
// Display a success message
Message('Publish reply successfully!', '发布回复成功!', 'success') Message('Publish reply successfully!', '发布回复成功!', 'success')
} }
} }
} }
// Save the data for reply rewriting
const saveRewriteReply = () => { const saveRewriteReply = () => {
tempReplyRewrite.value.rid = replyRewrite.value.rid tempReplyRewrite.value.rid = replyRewrite.value.rid
tempReplyRewrite.value.content = replyRewrite.value.content tempReplyRewrite.value.content = replyRewrite.value.content
@ -47,35 +40,26 @@ const saveRewriteReply = () => {
tempReplyRewrite.value.edited = Date.now() tempReplyRewrite.value.edited = Date.now()
} }
// Handle reply rewriting
const handleRewrite = async () => { const handleRewrite = async () => {
const res = await messageStore.alert('AlertInfo.edit.rewrite', true) const res = await messageStore.alert('AlertInfo.edit.rewrite', true)
// Implement user's confirmation or cancel logic here
if (res) { if (res) {
// Update the reply const responseData = await useTempReplyStore().updateReply()
const responseData = await usePersistKUNGalgameReplyStore().updateReply()
if (responseData?.code === 200) { if (responseData?.code === 200) {
// Change the publish status, the front-end will add data for the new reply
Message('Reply rewrite successfully', '回复重新编辑成功', 'success') Message('Reply rewrite successfully', '回复重新编辑成功', 'success')
// Save the data for the new reply, which is essentially the draft data
saveRewriteReply() saveRewriteReply()
// Clear the data because the reply has been updated at this point useTempReplyStore().resetRewriteReplyData()
usePersistKUNGalgameReplyStore().resetRewriteReplyData()
// Close the panel
isShowAdvance.value = false isShowAdvance.value = false
isEdit.value = false isEdit.value = false
} }
} }
} }
// Handle saving a draft
const handleSave = () => { const handleSave = () => {
// Set the save flag to true
isSaveReply.value = true isSaveReply.value = true
// Implement the logic for saving the draft here
Message( Message(
'The draft has been saved successfully!', 'The draft has been saved successfully!',
'草稿已经保存成功', '草稿已经保存成功',
@ -83,7 +67,6 @@ const handleSave = () => {
) )
} }
// Show advanced editing options
const handleShowAdvance = () => { const handleShowAdvance = () => {
isShowAdvance.value = !isShowAdvance.value isShowAdvance.value = !isShowAdvance.value
} }