mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-12 09:18:14 +08:00
🎨 调整加载逻辑
This commit is contained in:
@@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
8
src/plugins/Mys/types/Forum.d.ts
vendored
8
src/plugins/Mys/types/Forum.d.ts
vendored
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user