1
---
2
// 请替换为你自己的信息
3
const uid = "YOUR_BANGUMI_UID";        // 替换为你的数字 ID
4
const token = 'YOUR_BEARER_TOKEN';     // 替换为你的 access_token
5
const base = 'https://api.bgm.tv/v0';
6

7
// --- 类型定义 ---
8
type Cat = 'watching' | 'wish' | 'collect';
9
type CatNum = 3 | 1 | 2;
10

11
interface Image {
12
  large?: string;
13
  common?: string;
14
  medium?: string;
15
  small?: string;
16
  grid?: string;
17
}
18

19
interface Subject {
20
  id: number;
21
  type: number;
22
  name: string;
23
  name_cn: string;
24
  eps?: number;
25
  images?: Image;
26
}
27

28
interface CollectionItem {
29
  subject_id: number;
30
  subject: Subject;
31
  ep_status: number;
32
  type: CatNum;
33
}
34

35
interface CollectionResponse {
36
  data: CollectionItem[];
37
  limit: number;
38
  offset: number;
39
  total: number;
40
}
41

42
const cats = [
43
  { key: 'watching', name: '在看', type: 3 },
44
  { key: 'wish',     name: '想看', type: 1 },
45
  { key: 'collect',  name: '看完', type: 2 },
46
];
47

48
// --- 数据获取 ---
49
async function fetchOnce(type: CatNum): Promise<CollectionItem[]> {
50
  try {
51
    const res = await fetch(
52
      `${base}/users/${uid}/collections?subject_type=2&type=${type}&limit=50`,
53
      { headers: { Authorization: `Bearer ${token}` } }
54
    );
55

56
    if (!res.ok) {
57
      console.error(`API Error (${type}):`, res.status, await res.text());
58
      return [];
59
    }
60

61
    const json: CollectionResponse = await res.json();
62
    return Array.isArray(json.data) ? json.data : [];
63
  } catch (err) {
64
    console.error('Fetch error:', err);
65
    return [];
66
  }
67
}
68

69
let allDataFetched = true;
70
const data: Record<Cat, CollectionItem[]> = { watching: [], wish: [], collect: [] };
71

72
try {
73
  const results = await Promise.all(cats.map(({ type }) => fetchOnce(type)));
74
  cats.forEach(({ key }, i) => { data[key] = results[i]; });
75
} catch (err) {
76
  console.error("Fetch failed:", err);
77
  allDataFetched = false;
78
}
79

80
import MainGridLayout from "../layouts/MainGridLayout.astro";
81
---
82

83
<MainGridLayout title="Bangumi 追番" description="我的动画收藏列表" class="bangumi-page">
84
  <div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative min-h-32 shadow-sm">
85
    <div class="card-base z-10 px-4 sm:px-6 py-6 relative w-full">
86
      <h1 class="text-2xl font-bold mb-6 dark:text-white">我的 Bangumi 追番</h1>
87

88
      {allDataFetched ? (
89
        <>
90
          <!-- 标签页 -->
91
          <div class="flex border-b border-gray-200 dark:border-gray-700 mb-6" role="tablist" id="bangumi-tabs">
92
            {cats.map(({ key, name }, i) => (
93
              <button
94
                id={`tab-${key}`}
95
                class={`tab-button px-4 py-2 font-medium text-sm transition-colors ${
96
                  i === 0
97
                    ? 'border-b-2 border-primary text-primary dark:text-[var(--primary)]'
98
                    : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
99
                }`}
100
                data-target={key}
101
                role="tab"
102
                aria-selected={i === 0}
103
              >
104
                {name}（{data[key].length}）
105
              </button>
106
            ))}
107
          </div>
108

109
          <!-- 内容区 -->
110
          <div class="mt-4 bangumi-content-container">
111
            {cats.map(({ key, name }, i) => (
112
              <section
113
                id={key}
114
                role="tabpanel"
115
                class={`bangumi-section ${i !== 0 ? 'hidden' : ''}`}
116
                aria-hidden={i !== 0}
117
              >
118
                {data[key].length ? (
119
                  <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
120
                    {data[key].map(item => {
121
                      const s = item.subject;
122
                      const total = s.eps || 0;
123
                      const watched = item.ep_status || 0;
124
                      const percent = total ? Math.min(100, Math.round((watched / total) * 100)) : 0;
125
                      const img = s.images?.large || s.images?.common || '/default-image.png';
126

127
                      return (
128
                        <div class="card-base overflow-hidden hover:shadow-lg transition-transform hover:scale-[1.02] dark:bg-[var(--card-bg)]">
129
                          <div class="aspect-[3/4] overflow-hidden">
130
                            <img
131
                              src={img}
132
                              alt={s.name_cn || s.name || '未知'}
133
                              class="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
134
                              loading="lazy"
135
                              data-src-fallback="/default-image.png"
136
                            />
137
                          </div>
138
                          <div class="p-3">
139
                            <h2 class="font-medium text-sm line-clamp-2 mb-2 min-h-[2.5rem] dark:text-white">
140
                              {s.name_cn || s.name}
141
                            </h2>
142
                            <div class="text-xs">
143
                              <div class="flex justify-between mb-1">
144
                                <span class="text-gray-600 dark:text-gray-300">{watched}/{total}</span>
145
                                <span class="text-gray-600 dark:text-gray-300">{percent}%</span>
146
                              </div>
147
                              <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5">
148
                                <div
149
                                  class="h-1.5 rounded-full transition-all duration-300"
150
                                  style={`width: ${percent}%; background-color: var(--primary)`}
151
                                ></div>
152
                              </div>
153
                            </div>
154
                          </div>
155
                        </div>
156
                      );
157
                    })}
158
                  </div>
159
                ) : (
160
                  <div class="text-center py-12 text-gray-500 dark:text-gray-400">
161
                    暂无 {name} 的记录
162
                  </div>
163
                )}
164
              </section>
165
            ))}
166
          </div>
167
        </>
168
      ) : (
169
        <div class="text-center py-12 text-red-500 dark:text-red-400">
170
          数据加载失败，请检查网络或稍后重试。
171
        </div>
172
      )}
173
    </div>
174
  </div>
175
</MainGridLayout>
176

177
<!-- 客户端交互 -->
178
<script is:inline>
179
  document.addEventListener('DOMContentLoaded', () => {
180
    const tabs = document.querySelectorAll('#bangumi-tabs .tab-button');
181
    const sections = document.querySelectorAll('.bangumi-section');
182

183
    function switchTab(tab) {
184
      tabs.forEach(t => {
185
        const selected = t === tab;
186
        t.classList.toggle('border-b-2', selected);
187
        t.classList.toggle('border-primary', selected);
188
        t.classList.toggle('text-primary', selected);
189
        t.classList.toggle('dark:text-[var(--primary)]', selected);
190
        t.setAttribute('aria-selected', selected);
191
      });
192
      sections.forEach(sec => {
193
        sec.classList.toggle('hidden', sec.id !== tab.dataset.target);
194
        sec.setAttribute('aria-hidden', sec.id !== tab.dataset.target);
195
      });
196
    }
197

198
    tabs.forEach(tab => tab.addEventListener('click', () => switchTab(tab)));
199

200
    // 图片错误处理
201
    document.querySelectorAll('img[data-src-fallback]').forEach(img => {
202
      img.addEventListener('error', function () {
203
        if (this.src !== this.dataset.srcFallback) {
204
          this.src = this.dataset.srcFallback;
205
          this.alt = '图片加载失败';
206
        }
207
      });
208
    });
209
  });
210
</script>
211

212
<!-- 全局样式 -->
213
<style is:global>
214
  .line-clamp-2 {
215
    display: -webkit-box;
216
    -webkit-line-clamp: 2;
217
    -webkit-box-orient: vertical;
218
    overflow: hidden;
219
  }
220
</style>