100 lines
2.6 KiB
Svelte
100 lines
2.6 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
import { toast } from 'svelte-sonner';
|
|
import SubscriptionCard from '$lib/components/subscription-card.svelte';
|
|
import Pagination from '$lib/components/pagination.svelte';
|
|
import { setBreadcrumb } from '$lib/stores/breadcrumb';
|
|
import api from '$lib/api';
|
|
import type { CollectionWithSubscriptionStatus, ApiError } from '$lib/types';
|
|
|
|
let collections: CollectionWithSubscriptionStatus[] = [];
|
|
let totalCount = 0;
|
|
let currentPage = 0;
|
|
let loading = false;
|
|
|
|
const pageSize = 50;
|
|
|
|
async function loadCollections(page: number = 0) {
|
|
loading = true;
|
|
try {
|
|
const response = await api.getFollowedCollections(page + 1, pageSize); // API 使用 1 基索引
|
|
collections = response.data.collections;
|
|
totalCount = response.data.total;
|
|
} catch (error) {
|
|
console.error('加载合集失败：', error);
|
|
toast.error('加载合集失败', {
|
|
description: (error as ApiError).message
|
|
});
|
|
} finally {
|
|
loading = false;
|
|
}
|
|
}
|
|
|
|
function handleSubscriptionSuccess() {
|
|
// 重新加载数据以获取最新状态
|
|
loadCollections(currentPage);
|
|
}
|
|
|
|
async function handlePageChange(page: number) {
|
|
currentPage = page;
|
|
await loadCollections(page);
|
|
}
|
|
|
|
onMount(async () => {
|
|
setBreadcrumb([
|
|
{
|
|
label: '我关注的合集'
|
|
}
|
|
]);
|
|
await loadCollections();
|
|
});
|
|
|
|
$: totalPages = Math.ceil(totalCount / pageSize);
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>关注的合集 - Bili Sync</title>
|
|
</svelte:head>
|
|
|
|
<div>
|
|
<div class="mb-6 flex items-center justify-between">
|
|
<div class="text-sm font-medium">
|
|
{#if !loading}
|
|
共 {totalCount} 个合集
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
{#if loading}
|
|
<div class="flex items-center justify-center py-12">
|
|
<div class="text-muted-foreground">加载中...</div>
|
|
</div>
|
|
{:else if collections.length > 0}
|
|
<div
|
|
style="display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; width: 100%; max-width: none; justify-items: start;"
|
|
>
|
|
{#each collections as collection (collection.sid)}
|
|
<div style="max-width: 450px; width: 100%;">
|
|
<SubscriptionCard
|
|
item={collection}
|
|
type="collection"
|
|
onSubscriptionSuccess={handleSubscriptionSuccess}
|
|
/>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
|
|
<!-- 分页组件 -->
|
|
{#if totalPages > 1}
|
|
<Pagination {currentPage} {totalPages} onPageChange={handlePageChange} />
|
|
{/if}
|
|
{:else}
|
|
<div class="flex items-center justify-center py-12">
|
|
<div class="space-y-2 text-center">
|
|
<p class="text-muted-foreground">暂无合集数据</p>
|
|
<p class="text-muted-foreground text-sm">请先在 B 站关注一些合集，或检查账号配置</p>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|