增加当前页面待看列表置顶功能

This commit is contained in:
2025-09-14 08:17:11 +08:00
parent 7f4fb9c0ea
commit 735d62bc8e
+55 -4
View File
@@ -112,7 +112,8 @@
<div v-else class="items-list"> <div v-else class="items-list">
<div v-for="item in filteredAndSortedItems" :key="item.id" class="watchlist-item" :class="{ <div v-for="item in filteredAndSortedItems" :key="item.id" class="watchlist-item" :class="{
current: isCurrentUrl(item.url), current: isCurrentUrl(item.url),
duplicate: isDuplicateAuthor(item) duplicate: isDuplicateAuthor(item),
'pinned-artist': isPinnedCurrentArtist(item)
}"> }">
<div class="item-main" @click="navigateToItem(item)"> <div class="item-main" @click="navigateToItem(item)">
<div class="item-title" :title="item.title"> <div class="item-title" :title="item.title">
@@ -317,14 +318,38 @@ const filteredAndSortedItems = computed(() => {
); );
} }
// 排序 // 获取当前页面的作者ID
filteredItems.sort((a, b) => { const currentAuthorId = watchlistStore.extractAuthorId(currentPageUrl.value);
let pinnedItem: WatchlistItem | null = null;
let otherItems: WatchlistItem[] = [];
// 如果当前页面是artist页面,找到对应的待看项目进行置顶
if (currentAuthorId) {
const currentArtistItems = filteredItems.filter(item => {
const itemAuthorId = watchlistStore.extractAuthorId(item.url);
return itemAuthorId === currentAuthorId;
});
// 取第一个匹配的项目作为置顶项目
if (currentArtistItems.length > 0) {
pinnedItem = currentArtistItems[0];
otherItems = filteredItems.filter(item => item.id !== pinnedItem!.id);
} else {
otherItems = filteredItems;
}
} else {
otherItems = filteredItems;
}
// 对其他项目进行排序
otherItems.sort((a, b) => {
const dateA = new Date(a.createdAt).getTime(); const dateA = new Date(a.createdAt).getTime();
const dateB = new Date(b.createdAt).getTime(); const dateB = new Date(b.createdAt).getTime();
return sortOrder.value === 'desc' ? dateB - dateA : dateA - dateB; return sortOrder.value === 'desc' ? dateB - dateA : dateA - dateB;
}); });
return filteredItems; // 返回置顶项目在前,其他项目在后的数组
return pinnedItem ? [pinnedItem, ...otherItems] : otherItems;
}); });
// 获取当前页面完整URL // 获取当前页面完整URL
@@ -719,6 +744,15 @@ const isDuplicateAuthor = (item: WatchlistItem) => {
return itemsByAuthor.length > 1; return itemsByAuthor.length > 1;
}; };
// 检查是否为当前置顶的artist项目
const isPinnedCurrentArtist = (item: WatchlistItem) => {
const currentAuthorId = watchlistStore.extractAuthorId(currentPageUrl.value);
if (!currentAuthorId) return false;
const itemAuthorId = watchlistStore.extractAuthorId(item.url);
return itemAuthorId === currentAuthorId;
};
// 监听路由变化,更新当前页面URL // 监听路由变化,更新当前页面URL
watch(() => route.fullPath, () => { watch(() => route.fullPath, () => {
// 路由变化时更新当前页面URL // 路由变化时更新当前页面URL
@@ -1068,6 +1102,23 @@ watch(() => route.fullPath, () => {
/* 橙色边框 */ /* 橙色边框 */
} }
.watchlist-item.pinned-artist {
background: #f0f9ff;
/* 浅蓝色背景 */
border-color: #0ea5e9;
/* 蓝色边框 */
position: relative;
}
.watchlist-item.pinned-artist::before {
content: '📌';
position: absolute;
top: 0.5rem;
right: 0.5rem;
font-size: 0.875rem;
opacity: 0.7;
}
.item-main { .item-main {
flex: 1; flex: 1;
cursor: pointer; cursor: pointer;