🎨 调整加载逻辑

This commit is contained in:
目棃
2024-11-17 16:39:27 +08:00
parent 53f2612d32
commit 63929bc9fd
5 changed files with 77 additions and 22 deletions

View File

@@ -24,13 +24,13 @@
/> />
</template> </template>
<template #append> <template #append>
<v-btn class="news-top-btn" @click="firstLoad(tab, true)"> <v-btn class="post-news-btn" @click="firstLoad(tab, true)">
<v-icon>mdi-refresh</v-icon> <v-icon>mdi-refresh</v-icon>
</v-btn> </v-btn>
<v-btn class="news-top-btn" @click="showList = true"> <v-btn class="post-news-btn" @click="showList = true">
<v-icon>mdi-view-list</v-icon> <v-icon>mdi-view-list</v-icon>
</v-btn> </v-btn>
<v-btn class="news-top-btn" @click="switchAnno" v-if="gid === '2'"> <v-btn class="post-news-btn" @click="switchAnno" v-if="gid === '2'">
<template #prepend> <template #prepend>
<v-icon>mdi-bullhorn</v-icon> <v-icon>mdi-bullhorn</v-icon>
</template> </template>
@@ -46,7 +46,7 @@
</div> </div>
</div> </div>
<div class="load-news"> <div class="load-news">
<v-btn class="news-top-btn" :rounded="true" :loading="loading" @click="loadMore(value)"> <v-btn class="post-news-btn" :rounded="true" :loading="loading" @click="loadMore(value)">
已加载{{ rawData[value].lastId }}加载更多 已加载{{ rawData[value].lastId }}加载更多
</v-btn> </v-btn>
</div> </div>
@@ -149,6 +149,7 @@ async function firstLoad(key: NewsKey, refresh: boolean = false): Promise<void>
rawData.value[key].lastId = 0; rawData.value[key].lastId = 0;
} }
showLoading.start(`正在获取${gameName}${rawData.value[key].name}数据...`); showLoading.start(`正在获取${gameName}${rawData.value[key].name}数据...`);
document.documentElement.scrollTo({ top: 0, behavior: "smooth" });
const getData = await Mys.Painter.getNewsList(gid, NewsType[key]); const getData = await Mys.Painter.getNewsList(gid, NewsType[key]);
rawData.value[key].isLast = getData.is_last; rawData.value[key].isLast = getData.is_last;
rawData.value[key].lastId = getData.list.length; rawData.value[key].lastId = getData.list.length;
@@ -207,7 +208,7 @@ async function searchPost(): Promise<void> {
font-family: var(--font-title); font-family: var(--font-title);
} }
.news-top-btn { .post-news-btn {
height: 40px; height: 40px;
margin-left: 15px; margin-left: 15px;
background: var(--btn-bg-1); background: var(--btn-bg-1);
@@ -215,7 +216,7 @@ async function searchPost(): Promise<void> {
font-family: var(--font-title); font-family: var(--font-title);
} }
.dark .news-top-btn { .dark .post-news-btn {
border: 1px solid var(--common-shadow-2); border: 1px solid var(--common-shadow-2);
} }

View File

@@ -45,7 +45,7 @@
@click:append="searchPost" @click:append="searchPost"
@keyup.enter="searchPost" @keyup.enter="searchPost"
/> />
<v-btn :rounded="true" class="post-fresh-btn" @click="freshPostData()"> <v-btn :rounded="true" class="post-forum-btn" @click="freshPostData()">
<v-icon>mdi-refresh</v-icon> <v-icon>mdi-refresh</v-icon>
<span>刷新</span> <span>刷新</span>
</v-btn> </v-btn>
@@ -59,6 +59,11 @@
<TPostCard :model-value="post" v-if="post" /> <TPostCard :model-value="post" v-if="post" />
</div> </div>
</div> </div>
<div class="posts-load-more">
<v-btn class="post-forum-btn" :rounded="true" @click="loadMore()">
已加载{{ posts.length }}加载更多
</v-btn>
</div>
<ToPostSearch :gid="curGid.toString()" v-model="showSearch" :keyword="search" /> <ToPostSearch :gid="curGid.toString()" v-model="showSearch" :keyword="search" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@@ -86,9 +91,9 @@ type SortSelectGame = {
}; };
const sortOrderList: SortSelect[] = [ const sortOrderList: SortSelect[] = [
{ text: "默认排序", value: 0 },
{ text: "最新回复", value: 1 }, { text: "最新回复", value: 1 },
{ text: "最新发布", value: 2 }, { text: "最新发布", value: 2 },
{ text: "热门", value: 3 },
]; ];
const forumYsList: SortSelect[] = [ const forumYsList: SortSelect[] = [
{ text: "酒馆", value: 26 }, { text: "酒馆", value: 26 },
@@ -175,12 +180,14 @@ function getSortLabel(value: number): string {
// 渲染参数 // 渲染参数
const curGid = ref<number>(2); const curGid = ref<number>(2);
const curSortType = ref<number>(0); const curSortType = ref<number>(1);
const curForum = ref<number>(26); const curForum = ref<number>(26);
const curForumLabel = ref<string>(""); const curForumLabel = ref<string>("");
// 渲染数据 // 渲染数据
const posts = ref<TGApp.Plugins.Mys.Post.FullData[]>([]); const posts = ref<TGApp.Plugins.Mys.Post.FullData[]>([]);
const lastId = ref<string>("");
const isLast = ref<boolean>(false);
const search = ref<string>(""); const search = ref<string>("");
const showSearch = ref<boolean>(false); const showSearch = ref<boolean>(false);
const firstLoad = ref<boolean>(false); const firstLoad = ref<boolean>(false);
@@ -236,9 +243,26 @@ async function freshPostData(): Promise<void> {
await TGLogger.Info( await TGLogger.Info(
`[Posts][${gameLabel}][freshPostData][${forumLabel}][${sortLabel}] 刷新帖子列表`, `[Posts][${gameLabel}][freshPostData][${forumLabel}][${sortLabel}] 刷新帖子列表`,
); );
showLoading.update(`正在加载 ${gameLabel}-${forumLabel}-${sortLabel} 数据`); showLoading.update(`正在刷新 ${gameLabel}-${forumLabel}-${sortLabel} 数据`);
document.documentElement.scrollTo({ top: 0, behavior: "smooth" });
const postsGet = await Mys.Post.getForumPostList(curForum.value, curSortType.value); const postsGet = await Mys.Post.getForumPostList(curForum.value, curSortType.value);
posts.value = postsGet.list; posts.value = postsGet.list;
lastId.value = postsGet.last_id;
isLast.value = postsGet.is_last;
showLoading.end();
}
async function loadMore(): Promise<void> {
if (isLast.value) {
showSnackbar.warn("没有更多帖子了");
return;
}
showLoading.start("正在加载更多帖子数据...");
const postsGet = await Mys.Post.getForumPostList(curForum.value, curSortType.value, lastId.value);
posts.value = posts.value.concat(postsGet.list);
lastId.value = postsGet.last_id;
isLast.value = postsGet.is_last;
showSnackbar.success(`加载成功,共加载 ${postsGet.list.length} 条帖子`);
showLoading.end(); showLoading.end();
} }
@@ -285,14 +309,14 @@ function searchPost(): void {
height: 50px; height: 50px;
} }
.post-fresh-btn { .post-forum-btn {
height: 40px; height: 40px;
background: var(--btn-bg-1); background: var(--btn-bg-1);
color: var(--btn-text-1); color: var(--btn-text-1);
font-family: var(--font-title); font-family: var(--font-title);
} }
.dark .post-fresh-btn { .dark .post-forum-btn {
border: 1px solid var(--common-shadow-2); border: 1px solid var(--common-shadow-2);
} }
@@ -303,4 +327,13 @@ function searchPost(): void {
grid-gap: 10px; grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
} }
.posts-load-more {
display: flex;
align-items: center;
justify-content: center;
margin: 10px;
font-family: var(--font-title);
transition: all 0.3s linear;
}
</style> </style>

View File

@@ -42,7 +42,7 @@
@click:append="searchPost" @click:append="searchPost"
@keyup.enter="searchPost" @keyup.enter="searchPost"
/> />
<v-btn :rounded="true" class="post-fresh-btn" @click="firstLoad()"> <v-btn :rounded="true" class="post-topic-btn" @click="firstLoad()">
<v-icon>mdi-refresh</v-icon> <v-icon>mdi-refresh</v-icon>
<span>刷新</span> <span>刷新</span>
</v-btn> </v-btn>
@@ -97,7 +97,7 @@ const sortList = computed<SortSelect[]>(() => {
return [ return [
{ text: "最新", value: 0 }, { text: "最新", value: 0 },
{ text: "热门", value: 2 }, { text: "热门", value: 2 },
{ text: "", value: 1 }, { text: "", value: 1 },
]; ];
}); });
@@ -130,6 +130,7 @@ watch(
async function firstLoad(): Promise<void> { async function firstLoad(): Promise<void> {
if (curGame.value) showLoading.update(`正在加载${curGame.value.name}帖子列表`); if (curGame.value) showLoading.update(`正在加载${curGame.value.name}帖子列表`);
document.documentElement.scrollTo({ top: 0, behavior: "smooth" });
const postList = await Mys.Post.getTopicPostList(curGid.value, topic, curSortType.value); const postList = await Mys.Post.getTopicPostList(curGid.value, topic, curSortType.value);
if ("retcode" in postList) { if ("retcode" in postList) {
showLoading.end(); showLoading.end();
@@ -229,14 +230,14 @@ function searchPost(): void {
height: 50px; height: 50px;
} }
.post-fresh-btn { .post-topic-btn {
height: 40px; height: 40px;
background: var(--btn-bg-1); background: var(--btn-bg-1);
color: var(--btn-text-1); color: var(--btn-text-1);
font-family: var(--font-title); font-family: var(--font-title);
} }
.dark .post-fresh-btn { .dark .post-topic-btn {
border: 1px solid var(--common-shadow-2); border: 1px solid var(--common-shadow-2);
} }

View File

@@ -17,18 +17,38 @@ const Referer = "https://bbs.mihoyo.com/";
* @since Beta v0.6.2 * @since Beta v0.6.2
* @param {number} forumId 特定论坛 ID * @param {number} forumId 特定论坛 ID
* @param {number} type 排序方式: 0-按热度排序1-最新回复2-按时间排序 * @param {number} type 排序方式: 0-按热度排序1-最新回复2-按时间排序
* @param {string} last_id 最后 ID
* @param {number} page_size 每页数量 * @param {number} page_size 每页数量
* @return {Promise<TGApp.Plugins.Mys.Forum.FullData>} * @return {Promise<TGApp.Plugins.Mys.Forum.FullData>}
*/ */
export async function getForumPostList( export async function getForumPostList(
forumId: number, forumId: number,
type: number = 0, type: number = 1,
last_id?: string,
page_size: number = 20, page_size: number = 20,
): Promise<TGApp.Plugins.Mys.Forum.FullData> { ): Promise<TGApp.Plugins.Mys.Forum.FullData> {
let params;
if (type === 3) {
params = {
forum_id: forumId,
is_hot: true,
page_size: page_size,
last_id: last_id,
};
} else {
params = {
forum_id: forumId,
sort_type: type,
is_good: false,
is_hot: false,
page_size: page_size,
last_id: last_id,
};
}
return ( return (
await TGHttp<TGApp.Plugins.Mys.Forum.Response>(`${Mpabu}getForumPostList`, { await TGHttp<TGApp.Plugins.Mys.Forum.Response>(`${Mpabu}getForumPostList`, {
method: "GET", method: "GET",
query: { forum_id: forumId, sort_type: type, page_size: page_size }, query: params,
}) })
).data; ).data;
} }

View File

@@ -1,7 +1,7 @@
/** /**
* @file plugins/Mys/types/Forum.d.ts * @file plugins/Mys/types/Forum.d.ts
* @description Mys 插件论坛类型定义文件 * @description Mys 插件论坛类型定义文件
* @since Beta v0.4.5 * @since Beta v0.6.3
*/ */
/** /**
@@ -25,9 +25,9 @@ declare namespace TGApp.Plugins.Mys.Forum {
/** /**
* @description 特定论坛数据 * @description 特定论坛数据
* @since Beta v0.4.5 * @since Beta v0.6.3
* @interface FullData * @interface FullData
* @property {number} last_id 最后一条帖子 ID * @property {string} last_id 最后一条帖子 ID
* @property {boolean} is_last 是否最后一页 * @property {boolean} is_last 是否最后一页
* @property {boolean} is_origin 是否原创 * @property {boolean} is_origin 是否原创
* @property {number} page 页码 * @property {number} page 页码
@@ -36,7 +36,7 @@ declare namespace TGApp.Plugins.Mys.Forum {
* @return FullData * @return FullData
*/ */
interface FullData { interface FullData {
last_id: number; last_id: string;
is_last: boolean; is_last: boolean;
is_origin: boolean; is_origin: boolean;
page: number; page: number;