1
---
2
// 请替换为你自己的信息
3
const uid = "此处为ID";        // 替换为你的ID
4
const token = 'urN************************************Mdq';     // 替换为你的 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 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
96
                data-target={key}
97
                role="tab"
98
                aria-selected={i === 0 ? "true" : "false"}
99
              >
100
                {name}（{data[key].length}）
101
              </button>
102
            ))}
103
          </div>
104

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

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

176
<!-- 客户端交互 -->
177
<script is:inline>
178
  // 最简单的选项卡切换函数
179
  function switchTab(clickedTab) {
180
    // 获取所有选项卡和内容区域
181
    const tabs = document.querySelectorAll('#bangumi-tabs .tab-button');
182
    const sections = document.querySelectorAll('.bangumi-section');
183

184
    // 重置所有选项卡
185
    tabs.forEach(tab => {
186
      tab.classList.remove('border-b-2', 'border-primary', 'text-primary');
187
      tab.classList.add('text-gray-500');
188
      tab.setAttribute('aria-selected', 'false');
189
    });
190

191
    // 设置当前选项卡
192
    clickedTab.classList.remove('text-gray-500');
193
    clickedTab.classList.add('border-b-2', 'border-primary', 'text-primary');
194
    clickedTab.setAttribute('aria-selected', 'true');
195

196
    // 切换内容区域
197
    const targetId = clickedTab.dataset.target;
198
    sections.forEach(section => {
199
      if (section.id === targetId) {
200
        section.classList.remove('hidden');
201
      } else {
202
        section.classList.add('hidden');
203
      }
204
    });
205
  }
206

207
  // 初始化函数
208
  function initBangumiTabs() {
209
    const tabs = document.querySelectorAll('#bangumi-tabs .tab-button');
210

211
    // 为每个选项卡绑定点击事件
212
    tabs.forEach(tab => {
213
      // 直接绑定事件，避免使用cloneNode导致的问题
214
      tab.addEventListener('click', function() {
215
        switchTab(this);
216
      });
217
    });
218

219
    // 激活第一个选项卡
220
    const firstTab = document.querySelector('#bangumi-tabs .tab-button');
221
    if (firstTab) {
222
      switchTab(firstTab);
223
    }
224
  }
225

226
  // 页面加载时初始化
227
  if (document.readyState === 'loading') {
228
    document.addEventListener('DOMContentLoaded', initBangumiTabs);
229
  } else {
230
    initBangumiTabs();
231
  }
232

233
  // Swup 页面切换时重新初始化
234
  if (window.swup) {
235
    window.swup.hooks.on('page:view', function() {
236
      setTimeout(initBangumiTabs, 50);
237
    });
238
  }
239
</script>
240

241
<!-- 全局样式 -->
242
<style is:global>
243
  .line-clamp-2 {
244
    display: -webkit-box;
245
    -webkit-line-clamp: 2;
246
    -webkit-box-orient: vertical;
247
    overflow: hidden;
248
  }
249
</style>