From 3c86a505a763527cf368b4fdc2eaa570b920fdea Mon Sep 17 00:00:00 2001 From: KUN1007 Date: Thu, 28 Sep 2023 21:07:12 +0800 Subject: [PATCH] rebuild: store --- src/components/quill-editor/Title.vue | 3 +- src/store/index.ts | 26 +++ src/store/modules/edit.ts | 37 ++--- src/store/modules/home.ts | 35 +--- src/store/modules/kungalgamer.ts | 83 ++++------ src/store/modules/message.ts | 24 +-- src/store/modules/settings.ts | 22 +-- src/store/modules/topic.ts | 219 ++++++-------------------- src/store/types/edit.d.ts | 2 +- src/store/types/home.d.ts | 17 ++ src/store/types/kungalgamer.d.ts | 7 + src/store/types/message.d.ts | 20 +++ src/store/types/settings.d.ts | 18 +++ src/store/types/topic.d.ts | 80 ++++++++++ src/store/utils/checkTopicPublish.ts | 15 +- src/styles/reset.css | 6 + 16 files changed, 289 insertions(+), 325 deletions(-) create mode 100644 src/store/types/home.d.ts create mode 100644 src/store/types/kungalgamer.d.ts create mode 100644 src/store/types/message.d.ts create mode 100644 src/store/types/settings.d.ts create mode 100644 src/store/types/topic.d.ts diff --git a/src/components/quill-editor/Title.vue b/src/components/quill-editor/Title.vue index ea1034ae..9e0911ab 100644 --- a/src/components/quill-editor/Title.vue +++ b/src/components/quill-editor/Title.vue @@ -42,6 +42,8 @@ const handelInput = () => { // 用户输入了纯空格 if (topicTitle.value.trim() === '') { + title.value = '' + topicRewrite.value.title = '' return } @@ -52,7 +54,6 @@ const handelInput = () => { */ // 不是重新编辑则保存在 edit 界面的 store if (!topicRewrite.value.isTopicRewriting) { - // 过滤 xss title.value = topicTitle.value } /** diff --git a/src/store/index.ts b/src/store/index.ts index 53ab63c3..7c659f7d 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -1,26 +1,52 @@ +/** + * KUNGalgame 的前端是高度依赖于 pinia 和 pinia-plugin-persistedstate 的 + * 所以二者对于网站运行必不可少，是核心库 + */ import { createPinia } from 'pinia' import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' import type { App } from 'vue' +// 导入编辑界面 store +import { useKUNGalgameEditStore } from './modules/edit' + +// 导入 home store +import { useKUNGalgameHomeStore } from './modules/home' + // 导入用户 store import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer' +// 导入 message store +import { useKUNGalgameMessageStore } from './modules/message' + // 导入网站设置面板 store import { useKUNGalgameSettingsStore } from '@/store/modules/settings' +// 导入话题详情页面的 store +import { useKUNGalgameTopicStore } from './modules/topic' + const store = createPinia() +// 设置 pinia 的函数，在 main.ts 挂载 export function setupPinia(app: App) { store.use(piniaPluginPersistedstate) app.use(store) } +// 重置所有 store，用于登出 export function storeReset() { + const editStore = useKUNGalgameEditStore() + const homeStore = useKUNGalgameHomeStore() const userStore = useKUNGalgameUserStore() + const messageStore = useKUNGalgameMessageStore() const settingsStore = useKUNGalgameSettingsStore() + const topicStore = useKUNGalgameTopicStore() + editStore.$reset() + homeStore.$reset() userStore.$reset() + messageStore.$reset() settingsStore.$reset() + topicStore.$reset() } export { store } diff --git a/src/store/modules/edit.ts b/src/store/modules/edit.ts index 37136ad8..90e17d77 100644 --- a/src/store/modules/edit.ts +++ b/src/store/modules/edit.ts @@ -16,14 +16,14 @@ import { EditGetHotTagsResponseData, } from '@/api' // store interface -import { Topic } from '../types/edit' +import { EditStore } from '../types/edit' // some utils to check topic publish data is valid import { checkTopicPublish } from '../utils/checkTopicPublish' export const useKUNGalgameEditStore = defineStore({ id: 'edit', persist: true, - state: (): Topic => ({ + state: (): EditStore => ({ editorHeight: 300, textCount: 0, mode: '', @@ -49,7 +49,7 @@ export const useKUNGalgameEditStore = defineStore({ getters: {}, actions: { // 创建话题 - createNewTopic(): Promise | undefined { + async createNewTopic(): Promise { // 当前话题的数据 const requestData: EditCreateTopicRequestData = { title: this.title, @@ -63,18 +63,10 @@ export const useKUNGalgameEditStore = defineStore({ return } // 合法则请求接口发布话题 - return new Promise((resolve, reject) => { - postEditNewTopicApi(requestData) - .then((res) => { - resolve(res) - }) - .catch((error) => { - reject(error) - }) - }) + return await postEditNewTopicApi(requestData) }, // 更新话题 - async rewriteTopic(): Promise { + async rewriteTopic(): Promise { const requestData: EditUpdateTopicRequestData = { tid: this.topicRewrite.tid, title: this.topicRewrite.title, @@ -82,20 +74,16 @@ export const useKUNGalgameEditStore = defineStore({ tags: this.topicRewrite.tags, category: this.topicRewrite.category, } + // 检查话题数据不合法直接返回 + if (!checkTopicPublish(this.textCount, requestData)) { + return + } return await updateEditNewTopicApi(requestData) }, // 获取热门 tags - getHotTags(limit: number): Promise { - return new Promise((resolve, reject) => { - const requestData: EditGetHotTagsRequestData = { limit } - getTopTagsApi(requestData) - .then((res) => { - resolve(res) - }) - .catch((error) => { - reject(error) - }) - }) + async getHotTags(limit: number): Promise { + const requestData: EditGetHotTagsRequestData = { limit } + return await getTopTagsApi(requestData) }, // 重置话题草稿数据，用于发布时 resetTopicData() { @@ -109,6 +97,7 @@ export const useKUNGalgameEditStore = defineStore({ }, // 重置重新发布话题数据，用于重新编辑 resetRewriteTopicData() { + this.textCount = 0 this.topicRewrite.title = '' this.topicRewrite.content = '' this.topicRewrite.tags = [] diff --git a/src/store/modules/home.ts b/src/store/modules/home.ts index af678657..63378c02 100644 --- a/src/store/modules/home.ts +++ b/src/store/modules/home.ts @@ -1,27 +1,12 @@ /* 主页的 store */ import { defineStore } from 'pinia' - +// api import { getHomeTopicApi } from '@/api/index' - +// 数据接口的类型 import { HomeTopicRequestData, HomeTopicResponseData } from '@/api/index' -interface HomeStore { - keywords: string - category: string - page: number - limit: number - sortField: string - sortOrder: string - // 加载完了是否还需要加载 - isLoading: boolean - - // 其它的 store - // 是否激活主页的左侧交互面板 - isActiveMainPageAside: boolean - - // 搜索历史存储 - searchHistory: string[] -} +// home store 的类型 +import { HomeStore } from '../types/home' export const useKUNGalgameHomeStore = defineStore({ id: 'home', @@ -55,7 +40,7 @@ export const useKUNGalgameHomeStore = defineStore({ getters: {}, actions: { // 获取首页话题 - getHomeTopic(): Promise { + async getHomeTopic(): Promise { // 这里的值用于初始化 const requestData: HomeTopicRequestData = { keywords: this.keywords, @@ -65,15 +50,7 @@ export const useKUNGalgameHomeStore = defineStore({ sortField: this.sortField, sortOrder: this.sortOrder, } - return new Promise((resolve, reject) => { - getHomeTopicApi(requestData) - .then((res) => { - resolve(res) - }) - .catch((error) => { - reject(error) - }) - }) + return await getHomeTopicApi(requestData) }, // 重置页数，是否加载，这样排序才能生效 resetPageStatus() { diff --git a/src/store/modules/kungalgamer.ts b/src/store/modules/kungalgamer.ts index 6d821525..74eb5f68 100644 --- a/src/store/modules/kungalgamer.ts +++ b/src/store/modules/kungalgamer.ts @@ -14,19 +14,14 @@ import { sendVerificationCodeMailApi, } from '@/api' -// 用户信息接口 -interface UserState { - uid: number - name: string - avatar: string - moemoeAccessToken: string -} +// kungalgame store 类型 +import { KUNGalgamerStore } from '../types/kungalgamer' // 这里用了 pinia-plugin-persistedstate，直接存储即可 export const useKUNGalgameUserStore = defineStore({ id: 'kungalgamer', persist: true, - state: (): UserState => ({ + state: (): KUNGalgamerStore => ({ uid: 0, name: '', avatar: '', @@ -50,56 +45,36 @@ export const useKUNGalgameUserStore = defineStore({ this.moemoeAccessToken = '' }, // 登陆 - login(request: LoginRequestData): Promise { - return new Promise((resolve, reject) => { - // 这里是向后端发请求的函数 - postLoginDataApi(request) - .then((res) => { - if (res.data) { - this.setUserInfo(res.data.uid, res.data.name, res.data.avatar) - this.setToken(res.data.token) - } else - (error: Error) => { - throw new Error('500 Server ERROR', error) - } - resolve(res) - }) - .catch((error) => { - reject(error) - }) - }) + async login(request: LoginRequestData): Promise { + const res = await postLoginDataApi(request) + if (res.code === 200) { + this.setUserInfo(res.data.uid, res.data.name, res.data.avatar) + this.setToken(res.data.token) + } else if (res.code === 500) { + console.log(res.message) + } else { + throw new Error('500 Server ERROR') + } + return res }, // 发送验证码 - sendCode(email: string): Promise { - return new Promise((resolve, reject) => { - const request: VerificationCodeMailRequestData = { email } - sendVerificationCodeMailApi(request) - .then((res) => { - resolve(res) - }) - .catch((error) => { - reject(error) - }) - }) + async sendCode(email: string): Promise { + const request: VerificationCodeMailRequestData = { email } + return await sendVerificationCodeMailApi(request) }, // 注册 - register(request: RegisterRequestData): Promise { - return new Promise((resolve, reject) => { - postRegisterDataApi(request) - .then((res) => { - if (res.data) { - this.setUserInfo(res.data.uid, res.data.name, res.data.avatar) - this.setToken(res.data.token) - } else - (error: Error) => { - throw new Error('500 Server ERROR', error) - } - resolve(res) - }) - .catch((error) => { - reject(error) - }) - }) + async register(request: RegisterRequestData): Promise { + const res = await postRegisterDataApi(request) + + if (res.code === 200) { + this.setUserInfo(res.data.uid, res.data.name, res.data.avatar) + this.setToken(res.data.token) + } else if (res.code === 500) { + console.log(res.message) + } else { + throw new Error('500 Server ERROR') + } + return res }, }, }) diff --git a/src/store/modules/message.ts b/src/store/modules/message.ts index 0784f79a..e57fc5d8 100644 --- a/src/store/modules/message.ts +++ b/src/store/modules/message.ts @@ -1,31 +1,13 @@ import { defineStore } from 'pinia' -interface Message { - // 是否展示通知消息 - showInfo: boolean - // 是否展示警告消息 - showAlert: boolean - // 通知消息的内容 - infoMsg: string - // 警告消息的内容 - alertMsg: string - // 是否展示取消按钮，Alert 组件专用 - isShowCancel: boolean - // 返回确认信息，Alert 组件专用 - confirm: boolean - - // 人机验证组件 - // 是否显示人机验证 - isShowCapture: boolean - // 是否验证通过 - isCaptureSuccessful: boolean -} +// message store 的类型 +import { MessageStore } from '../types/message' export const useKUNGalgameMessageStore = defineStore({ id: 'message', // 所有消息组件均不需要持久存储 persist: false, - state: (): Message => ({ + state: (): MessageStore => ({ showInfo: false, showAlert: false, infoMsg: '', diff --git a/src/store/modules/settings.ts b/src/store/modules/settings.ts index e7d162b5..e30c4452 100644 --- a/src/store/modules/settings.ts +++ b/src/store/modules/settings.ts @@ -4,30 +4,14 @@ import { defineStore } from 'pinia' // 网站的默认设置 import { KUNGalgameLanguage, mode } from '@/utils/getDefaultEnv' -// 设置面板配置 -interface KUNGalgameSettings { - // 白天黑夜模式切换 - showKUNGalgameMode: string - // 网站显示语言 - showKUNGalgameLanguage: string - // 主页宽度 - showKUNGalgamePageWidth: Record - // 网站字体 - showKUNGalgameFontStyle: string - // 背景图 - showKUNGalgameBackground: string - // 自定义背景图 - showKUNGalgameCustomBackground: string - - // 显示页面宽度还是显示字体设置 - isShowPageWidth: boolean -} +// settings store 的类型 +import { KUNGalgameSettingsStore } from '../types/settings' export const useKUNGalgameSettingsStore = defineStore({ id: 'KUNGalgame-settings', persist: true, // 默认值 - state: (): KUNGalgameSettings => ({ + state: (): KUNGalgameSettingsStore => ({ showKUNGalgameMode: mode, showKUNGalgameLanguage: KUNGalgameLanguage, showKUNGalgamePageWidth: { diff --git a/src/store/modules/topic.ts b/src/store/modules/topic.ts index f1c4cd03..481e34f7 100644 --- a/src/store/modules/topic.ts +++ b/src/store/modules/topic.ts @@ -28,91 +28,13 @@ import { TopicCreateCommentResponseData, } from '@/api' -// 回复的缓存 -interface ReplyDraft { - /** - * 编辑器相关 - * @param {number} editorHeight - 编辑器高度 - * @param {'' | 'essential' | 'minimal' | 'full'} mode - 编辑器 toolbar 模式 - * @param {'snow' | 'bubble'} theme - 编辑器主题 - */ - editorHeight: number - textCount: number - // 这里仅支持三种模式 - mode: '' | 'essential' | 'minimal' - theme: 'snow' | 'bubble' - // 是否显示热门关键词 - isShowHotKeywords: boolean - - // 当前话题的 id - tid: number - r_uid: number - // 回复给谁，用于回复面板展示 - replyUserName: string - to_uid: number - content: string - tags: string[] - // 被回复的人的楼层数，用于跳转 - to_floor: number - - // 是否保存回复 - isSaveReply: boolean - // 回复发布的状态，如果状态有变化则将发布好的回复数据添加在回复数组里 - // 这里与 true 和 false 无关，关心的是它的状态改变 - publishStatus: boolean -} - -// 获取回复的请求 -interface ReplyRequest { - page: number - limit: number - sortField: string - sortOrder: 'asc' | 'desc' -} - -// 评论的缓存 -interface CommentDraft { - // 评论的内容 - tid: number - rid: number - c_uid: number - to_uid: number - content: string - - // 显示哪个评论的评论面板 - isShowCommentPanelRid: number -} - -// 话题页面的 store -interface Topic { - // 是否正在被编辑 - isEdit: boolean - // 是否显示高级编辑模式 - isShowAdvance: boolean - // 是否激活左侧交互面板 - isActiveAside: boolean - // 是否滚动到顶部 - isScrollToTop: boolean - // 加载完了是否还需要加载 - isLoading: boolean - // 要滚动到的回复 id - scrollToReplyId: number - - // 回复面板的宽度 - replyPanelWidth: number - // 回复的缓存 - replyDraft: ReplyDraft - // 获取回复的请求接口格式 - replyRequest: ReplyRequest - - // 评论的缓存 - commentDraft: CommentDraft -} +// 导入 topic store 的类型 +import { TopicStore } from '../types/topic' export const useKUNGalgameTopicStore = defineStore({ id: 'topic', persist: true, - state: (): Topic => ({ + state: (): TopicStore => ({ isEdit: false, isShowAdvance: false, isActiveAside: false, @@ -158,115 +80,66 @@ export const useKUNGalgameTopicStore = defineStore({ }), actions: { // 左侧相同标签下的其它话题 - getRelatedTopicsByTags( + async getRelatedTopicsByTags( request: TopicAsideOtherTagRequestData ): Promise { - return new Promise((resolve, reject) => { - getRelatedTopicsByTagsApi(request) - .then((res) => { - resolve(res) - }) - .catch((error) => { - reject(error) - }) - }) + return await getRelatedTopicsByTagsApi(request) }, + // 楼主的其它话题 - getPopularTopicsByUserUid( + async getPopularTopicsByUserUid( request: TopicAsideMasterRequestData ): Promise { - return new Promise((resolve, reject) => { - getPopularTopicsByUserUidApi(request) - .then((res) => { - resolve(res) - }) - .catch((error) => { - reject(error) - }) - }) + return await getPopularTopicsByUserUidApi(request) }, + // 获取单个话题 - getTopicByTid(tid: number): Promise { - return new Promise((resolve, reject) => { - getTopicByTidApi(tid) - .then((res) => { - resolve(res) - }) - .catch((error) => { - reject(error) - }) - }) + async getTopicByTid(tid: number): Promise { + return await getTopicByTidApi(tid) }, + // 获取回复 - getReplies(tid: number): Promise { - return new Promise((resolve, reject) => { - // 这里的默认值用于初始化 - const requestData: TopicReplyRequestData = { - tid: tid, - page: this.replyRequest.page, - limit: this.replyRequest.limit, - sortField: this.replyRequest.sortField || 'floor', - sortOrder: this.replyRequest.sortOrder || 'desc', - } - getRepliesByPidApi(requestData) - .then((res) => { - resolve(res) - }) - .catch((error) => { - reject(error) - }) - }) + async getReplies(tid: number): Promise { + // 这里的默认值用于初始化 + const requestData: TopicReplyRequestData = { + tid: tid, + page: this.replyRequest.page, + limit: this.replyRequest.limit, + sortField: this.replyRequest.sortField || 'floor', + sortOrder: this.replyRequest.sortOrder || 'desc', + } + return await getRepliesByPidApi(requestData) }, + // 创建回复 - postNewReply(): Promise { - return new Promise((resolve, reject) => { - // 这里的值用于初始化回复 - const requestData: TopicCreateReplyRequestData = { - tid: this.replyDraft.tid, - to_uid: this.replyDraft.to_uid, - to_floor: this.replyDraft.to_floor, - tags: this.replyDraft.tags, - content: this.replyDraft.content, - } - postReplyByPidApi(requestData) - .then((res) => { - resolve(res) - }) - .catch((error) => { - reject(error) - }) - }) + async postNewReply(): Promise { + // 这里的值用于初始化回复 + const requestData: TopicCreateReplyRequestData = { + tid: this.replyDraft.tid, + to_uid: this.replyDraft.to_uid, + to_floor: this.replyDraft.to_floor, + tags: this.replyDraft.tags, + content: this.replyDraft.content, + } + return await postReplyByPidApi(requestData) }, + // 获取评论 - getComments(rid: number): Promise { - return new Promise((resolve, reject) => { - getCommentsByReplyRidApi(rid) - .then((res) => { - resolve(res) - }) - .catch((error) => { - reject(error) - }) - }) + async getComments(rid: number): Promise { + return await getCommentsByReplyRidApi(rid) }, + // 创建一个评论 - postNewComment(): Promise { - return new Promise((resolve, reject) => { - const requestData: TopicCreateCommentRequestData = { - tid: this.commentDraft.tid, - rid: this.commentDraft.rid, - to_uid: this.commentDraft.to_uid, - content: this.commentDraft.content, - } - postCommentByPidAndRidApi(requestData) - .then((res) => { - resolve(res) - }) - .catch((error) => { - reject(error) - }) - }) + async postNewComment(): Promise { + const requestData: TopicCreateCommentRequestData = { + tid: this.commentDraft.tid, + rid: this.commentDraft.rid, + to_uid: this.commentDraft.to_uid, + content: this.commentDraft.content, + } + return await postCommentByPidAndRidApi(requestData) }, + // 设置回复草稿为原始值，用于回复发布按钮 resetReplyDraft() { this.replyDraft.textCount = 0 diff --git a/src/store/types/edit.d.ts b/src/store/types/edit.d.ts index 6d3afc8d..b67a37d6 100644 --- a/src/store/types/edit.d.ts +++ b/src/store/types/edit.d.ts @@ -15,7 +15,7 @@ interface TopicRewrite { isTopicRewriting: boolean } -export interface Topic { +export interface EditStore { /** * 编辑器相关 * @param {number} editorHeight - 编辑器高度 diff --git a/src/store/types/home.d.ts b/src/store/types/home.d.ts new file mode 100644 index 00000000..5e210549 --- /dev/null +++ b/src/store/types/home.d.ts @@ -0,0 +1,17 @@ +export interface HomeStore { + keywords: string + category: string + page: number + limit: number + sortField: string + sortOrder: string + // 加载完了是否还需要加载 + isLoading: boolean + + // 其它的 store + // 是否激活主页的左侧交互面板 + isActiveMainPageAside: boolean + + // 搜索历史存储 + searchHistory: string[] +} diff --git a/src/store/types/kungalgamer.d.ts b/src/store/types/kungalgamer.d.ts new file mode 100644 index 00000000..8626a573 --- /dev/null +++ b/src/store/types/kungalgamer.d.ts @@ -0,0 +1,7 @@ +// 用户信息接口 +export interface KUNGalgamerStore { + uid: number + name: string + avatar: string + moemoeAccessToken: string +} diff --git a/src/store/types/message.d.ts b/src/store/types/message.d.ts new file mode 100644 index 00000000..4964d63e --- /dev/null +++ b/src/store/types/message.d.ts @@ -0,0 +1,20 @@ +export interface MessageStore { + // 是否展示通知消息 + showInfo: boolean + // 是否展示警告消息 + showAlert: boolean + // 通知消息的内容 + infoMsg: string + // 警告消息的内容 + alertMsg: string + // 是否展示取消按钮，Alert 组件专用 + isShowCancel: boolean + // 返回确认信息，Alert 组件专用 + confirm: boolean + + // 人机验证组件 + // 是否显示人机验证 + isShowCapture: boolean + // 是否验证通过 + isCaptureSuccessful: boolean +} diff --git a/src/store/types/settings.d.ts b/src/store/types/settings.d.ts new file mode 100644 index 00000000..bee5fe8a --- /dev/null +++ b/src/store/types/settings.d.ts @@ -0,0 +1,18 @@ +// 设置面板配置 +export interface KUNGalgameSettingsStore { + // 白天黑夜模式切换 + showKUNGalgameMode: string + // 网站显示语言 + showKUNGalgameLanguage: string + // 主页宽度 + showKUNGalgamePageWidth: Record + // 网站字体 + showKUNGalgameFontStyle: string + // 背景图 + showKUNGalgameBackground: string + // 自定义背景图 + showKUNGalgameCustomBackground: string + + // 显示页面宽度还是显示字体设置 + isShowPageWidth: boolean +} diff --git a/src/store/types/topic.d.ts b/src/store/types/topic.d.ts new file mode 100644 index 00000000..a8489e7e --- /dev/null +++ b/src/store/types/topic.d.ts @@ -0,0 +1,80 @@ +// 回复的缓存 +interface ReplyDraft { + /** + * 编辑器相关 + * @param {number} editorHeight - 编辑器高度 + * @param {'' | 'essential' | 'minimal' | 'full'} mode - 编辑器 toolbar 模式 + * @param {'snow' | 'bubble'} theme - 编辑器主题 + */ + editorHeight: number + textCount: number + // 这里仅支持三种模式 + mode: '' | 'essential' | 'minimal' + theme: 'snow' | 'bubble' + // 是否显示热门关键词 + isShowHotKeywords: boolean + + // 当前话题的 id + tid: number + r_uid: number + // 回复给谁，用于回复面板展示 + replyUserName: string + to_uid: number + content: string + tags: string[] + // 被回复的人的楼层数，用于跳转 + to_floor: number + + // 是否保存回复 + isSaveReply: boolean + // 回复发布的状态，如果状态有变化则将发布好的回复数据添加在回复数组里 + // 这里与 true 和 false 无关，关心的是它的状态改变 + publishStatus: boolean +} + +// 获取回复的请求 +interface ReplyRequest { + page: number + limit: number + sortField: string + sortOrder: 'asc' | 'desc' +} + +// 评论的缓存 +interface CommentDraft { + // 评论的内容 + tid: number + rid: number + c_uid: number + to_uid: number + content: string + + // 显示哪个评论的评论面板 + isShowCommentPanelRid: number +} + +// 话题页面的 store +export interface TopicStore { + // 是否正在被编辑 + isEdit: boolean + // 是否显示高级编辑模式 + isShowAdvance: boolean + // 是否激活左侧交互面板 + isActiveAside: boolean + // 是否滚动到顶部 + isScrollToTop: boolean + // 加载完了是否还需要加载 + isLoading: boolean + // 要滚动到的回复 id + scrollToReplyId: number + + // 回复面板的宽度 + replyPanelWidth: number + // 回复的缓存 + replyDraft: ReplyDraft + // 获取回复的请求接口格式 + replyRequest: ReplyRequest + + // 评论的缓存 + commentDraft: CommentDraft +} diff --git a/src/store/utils/checkTopicPublish.ts b/src/store/utils/checkTopicPublish.ts index 8143a3a5..f3ca6ffa 100644 --- a/src/store/utils/checkTopicPublish.ts +++ b/src/store/utils/checkTopicPublish.ts @@ -1,15 +1,24 @@ // api 请求格式 -import { EditCreateTopicRequestData } from '@/api' +import { EditCreateTopicRequestData, EditUpdateTopicRequestData } from '@/api' // 全局消息组件（顶部） import message from '@/components/alert/Message' +// 类型守卫，确定 EditUpdateTopicRequestData 含有 tid +const isEditUpdateTopicData = (data: any): data is EditUpdateTopicRequestData => + typeof data.tid !== 'undefined' + // 发布时检测用户输入是否合法 export const checkTopicPublish = ( textCount: number, - topicData: EditCreateTopicRequestData + topicData: EditCreateTopicRequestData | EditUpdateTopicRequestData ) => { - if (!topicData.title.trim()) { + if (isEditUpdateTopicData(topicData)) { + // 话题 id 为零，应该。。。。不存在吧（ + if (!topicData.tid) { + message('Failed to resolve topic', '未能解析话题 ID', 'error') + } + } else if (!topicData.title.trim()) { // 标题为空的话，警告 message('Title cannot be empty!', '标题不可为空！', 'warn') return false diff --git a/src/styles/reset.css b/src/styles/reset.css index e48b965b..da44d0c1 100644 --- a/src/styles/reset.css +++ b/src/styles/reset.css @@ -28,3 +28,9 @@ button, select { font-family: inherit; } + +/* 鼠标选中文字的颜色 */ +*::selection { + background-color: var(--kungalgame-blue-1); /* 选中文本的背景颜色 */ + color: var(--kungalgame-blue-4); /* 选中文本的文本颜色 */ +}