From e5e3135aef461c04b348424c93ce371f1324b9a0 Mon Sep 17 00:00:00 2001 From: KUN1007 Date: Tue, 17 Oct 2023 19:03:59 +0800 Subject: [PATCH] feat: ranking page fetch --- src/api/home/index.ts | 47 ++----- src/api/home/types/home.ts | 7 +- src/api/index.ts | 2 + src/api/ranking/index.ts | 14 ++ src/api/ranking/types/ranking.ts | 18 +++ src/api/topic/types/topic.ts | 2 +- src/api/user/types/user.ts | 10 +- src/store/modules/ranking.ts | 43 ++++++ src/utils/validate.ts | 2 +- .../content/article/components/TopicPart.vue | 28 ++-- src/views/ranking/components/Topic.vue | 40 ++++-- src/views/ranking/components/TopicForm.vue | 127 ++++++++++-------- src/views/ranking/components/navSortItem.ts | 45 +++++++ src/views/topic/components/Master.vue | 2 +- src/views/topic/components/reply/Reply.vue | 2 +- 15 files changed, 262 insertions(+), 127 deletions(-) create mode 100644 src/api/ranking/index.ts create mode 100644 src/api/ranking/types/ranking.ts create mode 100644 src/store/modules/ranking.ts create mode 100644 src/views/ranking/components/navSortItem.ts diff --git a/src/api/home/index.ts b/src/api/home/index.ts index 4229cf30..855d6a12 100644 --- a/src/api/home/index.ts +++ b/src/api/home/index.ts @@ -14,50 +14,29 @@ const homeURLs = { export async function getHomeTopicApi( requestData: Home.HomeTopicRequestData ): Promise { - try { - const queryParams = objectToQueryParams(requestData) + const queryParams = objectToQueryParams(requestData) - // 调用 fetchPost 函数 - const response = await fetchGet( - `${homeURLs.home}?${queryParams}` - ) + const response = await fetchGet( + `${homeURLs.home}?${queryParams}` + ) - return response - } catch (error) { - // 处理错误 - console.error(error) - throw new Error('Failed to fetch home topic') - } + return response } // 首页今日热门话题 export async function getHomeNavHotTopicApi(): Promise { - try { - // 调用 fetchPost 函数 - const response = await fetchGet( - homeURLs.navHot - ) + const response = await fetchGet( + homeURLs.navHot + ) - return response - } catch (error) { - // 处理错误 - console.error(error) - throw new Error('Failed to fetch home nav hot topic') - } + return response } // 首页今日最新话题 export async function getHomeNavNewTopicApi(): Promise { - try { - // 调用 fetchPost 函数 - const response = await fetchGet( - homeURLs.navNew - ) + const response = await fetchGet( + homeURLs.navNew + ) - return response - } catch (error) { - // 处理错误 - console.error(error) - throw new Error('Failed to fetch home nav new topic') - } + return response } diff --git a/src/api/home/types/home.ts b/src/api/home/types/home.ts index cda833df..aeb4edd1 100644 --- a/src/api/home/types/home.ts +++ b/src/api/home/types/home.ts @@ -29,12 +29,13 @@ export interface HomeTopic { tid: number title: string views: number - likes: number[] - replies: number[] + upvotesCount: number + likesCount: number + repliesCount: number comments: number + time: number content: string - upvotes: number[] tags: string[] category: string[] popularity: number diff --git a/src/api/index.ts b/src/api/index.ts index a52603bb..944213c1 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -8,6 +8,7 @@ export * from './edit/types/edit' export * from './home/types/home' export * from './user/types/user' export * from './login/types/login' +export * from './ranking/types/ranking' export * from './topic/types' export * from './update-log/types/updateLog' @@ -17,5 +18,6 @@ export * from './edit' export * from './home' export * from './user' export * from './login' +export * from './ranking' export * from './topic' export * from './update-log' diff --git a/src/api/ranking/index.ts b/src/api/ranking/index.ts new file mode 100644 index 00000000..9b9cc4b3 --- /dev/null +++ b/src/api/ranking/index.ts @@ -0,0 +1,14 @@ +import { fetchGet } from '@/utils/request' +import objectToQueryParams from '@/utils/objectToQueryParams' +import * as Ranking from './types/ranking' + +// 获取 ranking 热门话题 +export async function getRankingTopicsApi( + request: Ranking.RankingGetTopicsRequestData +): Promise { + const queryParams = objectToQueryParams(request) + const url = `/ranking/topics?${queryParams}` + + const response = await fetchGet(url) + return response +} diff --git a/src/api/ranking/types/ranking.ts b/src/api/ranking/types/ranking.ts new file mode 100644 index 00000000..790cf619 --- /dev/null +++ b/src/api/ranking/types/ranking.ts @@ -0,0 +1,18 @@ +export interface RankingGetTopicsRequestData { + page: number + limit: number + sortField: string + sortOrder: string +} + +export interface RankingTopics { + tid: number + title: string + field: string +} + +export interface RankingGetUserRequestData {} + +export type RankingGetTopicsResponseData = KUNGalgameResponseData< + RankingTopics[] +> diff --git a/src/api/topic/types/topic.ts b/src/api/topic/types/topic.ts index feb2d625..e6c3976b 100644 --- a/src/api/topic/types/topic.ts +++ b/src/api/topic/types/topic.ts @@ -25,7 +25,7 @@ export interface TopicDetail { tags: string[] edited: number user: TopicUserInfo - rid: number[] + replies: number[] status: number share: number[] category: string[] diff --git a/src/api/user/types/user.ts b/src/api/user/types/user.ts index bb135ce0..2ec9e235 100644 --- a/src/api/user/types/user.ts +++ b/src/api/user/types/user.ts @@ -12,11 +12,11 @@ export interface UserInfo { dislike: number daily_topic_count: number - topic: number[] - reply: number[] - comment: number[] - like_topic: number[] - upvote_topic: number[] + topicCount: number[] + replyCount: number[] + commentCount: number[] + likeTopic: number[] + upvoteTopic: number[] } // 用户更新头像 diff --git a/src/store/modules/ranking.ts b/src/store/modules/ranking.ts new file mode 100644 index 00000000..8bd4cef1 --- /dev/null +++ b/src/store/modules/ranking.ts @@ -0,0 +1,43 @@ +// 评论的临时数据，用于组件间传输 +import { defineStore } from 'pinia' + +import type { + RankingGetTopicsRequestData, + RankingGetTopicsResponseData, + RankingGetUserRequestData, +} from '@/api' + +import { getRankingTopicsApi } from '@/api' + +interface RankingStore { + topic: RankingGetTopicsRequestData + user: RankingGetUserRequestData +} + +export const useKUNGalgameRankingStore = defineStore({ + id: 'KUNGalgameRanking', + // 不持久 + persist: false, + state: (): RankingStore => ({ + topic: { + page: 0, + limit: 0, + sortField: 'popularity', + sortOrder: 'desc', + }, + user: {}, + }), + getters: {}, + actions: { + async getTopics(): Promise { + const requestData: RankingGetTopicsRequestData = { + page: this.topic.page, + limit: this.topic.limit, + sortField: this.topic.sortField, + sortOrder: this.topic.sortOrder, + } + + return await getRankingTopicsApi(requestData) + }, + }, +}) diff --git a/src/utils/validate.ts b/src/utils/validate.ts index 4394f168..c524f1a7 100644 --- a/src/utils/validate.ts +++ b/src/utils/validate.ts @@ -7,7 +7,7 @@ export const isValidURL = (url: string) => { // 正则表达式匹配合法邮箱 export const isValidEmail = (email: string) => { - const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ + const regex = /^[^\s@]{1,64}@[^\s@]{1,255}\.[^\s@]{1,24}$/ return regex.test(email) } diff --git a/src/views/Home/content/article/components/TopicPart.vue b/src/views/Home/content/article/components/TopicPart.vue index db8f3435..5d6a05fb 100644 --- a/src/views/Home/content/article/components/TopicPart.vue +++ b/src/views/Home/content/article/components/TopicPart.vue @@ -23,12 +23,12 @@ const { tid, title, views, - likes, - replies, + likesCount, + repliesCount, comments, time, content, - upvotes, + upvotesCount, tags, category, popularity, @@ -37,7 +37,7 @@ const { const plainText = getPlainText(content) const getRepliesCount = computed(() => { - return replies.length + comments + return repliesCount + comments }) @@ -57,9 +57,9 @@ const getRepliesCount = computed(() => { {{ views }}
  • - {{ - likes.length - }} + + {{ likesCount }} +
  • {{ getRepliesCount }} @@ -68,12 +68,14 @@ const getRepliesCount = computed(() => {
    - {{ - formatTimeDifference( - time, - settingsStore.showKUNGalgameLanguage.value - ) - }} + + {{ + formatTimeDifference( + time, + settingsStore.showKUNGalgameLanguage.value + ) + }} +
    diff --git a/src/views/ranking/components/Topic.vue b/src/views/ranking/components/Topic.vue index d638ea20..5ef45bc2 100644 --- a/src/views/ranking/components/Topic.vue +++ b/src/views/ranking/components/Topic.vue @@ -1,26 +1,44 @@ diff --git a/src/views/ranking/components/TopicForm.vue b/src/views/ranking/components/TopicForm.vue index 69c9436c..83fb9bf3 100644 --- a/src/views/ranking/components/TopicForm.vue +++ b/src/views/ranking/components/TopicForm.vue @@ -1,39 +1,77 @@ diff --git a/src/views/ranking/components/navSortItem.ts b/src/views/ranking/components/navSortItem.ts new file mode 100644 index 00000000..7814ae75 --- /dev/null +++ b/src/views/ranking/components/navSortItem.ts @@ -0,0 +1,45 @@ +interface Topic { + index: number + icon: string + name: string + sortField: string +} + +export const topicNavSortItem: Topic[] = [ + { + index: 1, + icon: 'bi:fire', + name: 'popularity', + sortField: 'popularity', + }, + { + index: 2, + icon: 'bi:rocket', + name: 'upvote', + sortField: 'upvotes', + }, + { + index: 3, + icon: 'ic:outline-remove-red-eye', + name: 'views', + sortField: 'views', + }, + { + index: 4, + icon: 'line-md:thumbs-up-twotone', + name: 'likes', + sortField: 'likes', + }, + { + index: 5, + icon: 'ri:reply-line', + name: 'replies', + sortField: 'replies', + }, + { + index: 6, + icon: 'fa-regular:comment-dots', + name: 'comments', + sortField: 'comments', + }, +] diff --git a/src/views/topic/components/Master.vue b/src/views/topic/components/Master.vue index c70e630c..7ee125cf 100644 --- a/src/views/topic/components/Master.vue +++ b/src/views/topic/components/Master.vue @@ -37,7 +37,7 @@ const { tags, edited, user, - // rid, + // replies, status, share, category, diff --git a/src/views/topic/components/reply/Reply.vue b/src/views/topic/components/reply/Reply.vue index 12c052a2..6419ffe4 100644 --- a/src/views/topic/components/reply/Reply.vue +++ b/src/views/topic/components/reply/Reply.vue @@ -4,7 +4,7 @@ 这个区域包含所有人回复给楼主的话题，其中每个人的话题将会被拆分成为单独的组件 -->