Skip to content

Commit 783b86f

Browse files
liguobaoliguobao
committed
feat: add up list
1 parent 39d50cf commit 783b86f

8 files changed

Lines changed: 5197 additions & 8 deletions

File tree

‎src/components/Pagination.tsx‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import type { FC } from 'react';
2+
3+
interface PaginationProps {
4+
currentPage: number;
5+
totalPages: number;
6+
onPageChange: (page: number) => void;
7+
}
8+
9+
type PageItem = number | 'ellipsis';
10+
11+
const buildPages = (currentPage: number, totalPages: number): PageItem[] => {
12+
if (totalPages <= 7) {
13+
return Array.from({ length: totalPages }, (_, index) => index + 1);
14+
}
15+
16+
const pages: PageItem[] = [1];
17+
const start = Math.max(2, currentPage - 1);
18+
const end = Math.min(totalPages - 1, currentPage + 1);
19+
20+
if (start > 2) {
21+
pages.push('ellipsis');
22+
}
23+
24+
for (let page = start; page <= end; page += 1) {
25+
pages.push(page);
26+
}
27+
28+
if (end < totalPages - 1) {
29+
pages.push('ellipsis');
30+
}
31+
32+
pages.push(totalPages);
33+
return pages;
34+
};
35+
36+
const Pagination: FC<PaginationProps> = ({ currentPage, totalPages, onPageChange }) => {
37+
if (totalPages <= 1) {
38+
return null;
39+
}
40+
41+
const handleChange = (page: number) => {
42+
if (page < 1 || page > totalPages || page === currentPage) {
43+
return;
44+
}
45+
onPageChange(page);
46+
};
47+
48+
const pages = buildPages(currentPage, totalPages);
49+
50+
return (
51+
<nav
52+
className="pagination"
53+
role="navigation"
54+
aria-label={`分页，共 ${totalPages} 页`}
55+
>
56+
<button
57+
type="button"
58+
className="pagination__control"
59+
onClick={() => handleChange(currentPage - 1)}
60+
disabled={currentPage === 1}
61+
aria-label="上一页"
62+
>
63+
上一页
64+
</button>
65+
<div className="pagination__pages">
66+
{pages.map((item, index) => {
67+
if (item === 'ellipsis') {
68+
return (
69+
<span key={`ellipsis-${index}`} className="pagination__ellipsis" aria-hidden="true">
70+
…
71+
</span>
72+
);
73+
}
74+
75+
const isCurrent = item === currentPage;
76+
return (
77+
<button
78+
key={item}
79+
type="button"
80+
className={`pagination__page${isCurrent ? ' pagination__page--current' : ''}`}
81+
onClick={() => handleChange(item)}
82+
aria-current={isCurrent ? 'page' : undefined}
83+
aria-label={`第 ${item} 页`}
84+
>
85+
{item}
86+
</button>
87+
);
88+
})}
89+
</div>
90+
<button
91+
type="button"
92+
className="pagination__control"
93+
onClick={() => handleChange(currentPage + 1)}
94+
disabled={currentPage === totalPages}
95+
aria-label="下一页"
96+
>
97+
下一页
98+
</button>
99+
</nav>
100+
);
101+
};
102+
103+
export default Pagination;

‎src/data/details/BV13YpZzxEnP.json‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
{
2+
"bvid": "BV13YpZzxEnP",
3+
"uploader": {
4+
"id": "up_3493282587871429",
5+
"name": "稳重一点啊",
6+
"avatar": "https://i1.hdslb.com/bfs/face/79cd635ebb685efecb17d9036ca79ff086f1741b.jpg",
7+
"bio": "",
8+
"followerCount": 0,
9+
"verified": false
10+
},
11+
"videoInfo": {
12+
"title": "《关于漠叔和饼叔在晚上12点审片子这件事》",
13+
"videoUrl": "https://www.bilibili.com/video/BV13YpZzxEnP",
14+
"thumbnail": "https://i2.hdslb.com/bfs/archive/be34e6083f7d830c080d815d54c0fbb56aab5547.jpg",
15+
"duration": "16:08",
16+
"publishDate": "2025-09-21T05:00:00.000Z",
17+
"likeCount": 5890,
18+
"description": ""
19+
},
20+
"specialtyProduct": {
21+
"title": "麻辣牛肉220g/盒山东老字号开袋即食小袋装休闲零食",
22+
"description": "食贫道",
23+
"tags": [
24+
"美食综合",
25+
"食贫道"
26+
]
27+
},
28+
"externalLinks": [
29+
{
30+
"title": "稳重一点啊 · B站主页",
31+
"url": "https://space.bilibili.com/3493282587871429",
32+
"type": "profile",
33+
"platform": "bilibili"
34+
},
35+
{
36+
"title": "食贫道 麻辣牛肉220g/盒山东老字号开袋即食小袋装休闲零食",
37+
"url": "https://mall.bilibili.com/neul-next/detailuniversal/detail.html?isMerchant=1&page=detailuniversal_detail&saleType=0&itemsId=13197781&loadingShow=1&noTitleBar=1&track_id=pbaes.TyrFStq_2Ya7IHl8lwz_InWp1WckUgFulSENLVZI2XweIhZGGACY8aBdK_ff0nxKsMCBlGjeruoBcj25k2iu_fjome8HeHKjLf61pYc5zn91OVCCbtggsfK3MlrmCycrztzOqA8W7yMyOjcC-mxFrp009oOQ7utaavoIjfP8TlgnLomVrmQD3JIWtNsOXY2K&from=&from_spmid=__SPMID__&msource=cps_comments_3493282587871429_cont-1-115239005718107&is_ad=1",
38+
"type": "purchase",
39+
"platform": "bilibili"
40+
},
41+
{
42+
"title": "食贫道 《人间喜剧》笔记本子原创A5精装本创意文艺手账本记事本",
43+
"url": "https://mall.bilibili.com/neul-next/detailuniversal/detail.html?isMerchant=1&page=detailuniversal_detail&saleType=0&itemsId=13066444&loadingShow=1&noTitleBar=1&track_id=pbaes.TyrFStq_2Ya7IHl8lwz_InWp1WckUgFulSENLVZI2XweIhZGGACY8aBdK_ff0nxKsMCBlGjeruoBcj25k2iu_fjome8HeHKjLf61pYc5zn91OVCCbtggsfK3MlrmCycrztzOqA8W7yMyOjcC-mxFrp009oOQ7utaavoIjfP8TlgnLomVrmQD3JIWtNsOXY2K&from=&from_spmid=__SPMID__&msource=cps_comments_3493282587871429_cont-1-115239005718107&is_ad=1",
44+
"type": "purchase",
45+
"platform": "bilibili"
46+
}
47+
],
48+
"metadata": {
49+
"createdAt": "2025-09-20T22:37:30.000Z",
50+
"updatedAt": "2025-09-21T05:00:00.000Z",
51+
"status": "published",
52+
"category": "美食综合",
53+
"region": "全国",
54+
"featured": false
55+
}
56+
}

‎src/data/details/BV1KkpZzJEfB.json‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
{
2+
"bvid": "BV1KkpZzJEfB",
3+
"uploader": {
4+
"id": "up_3493282587871429",
5+
"name": "稳重一点啊",
6+
"avatar": "https://i1.hdslb.com/bfs/face/79cd635ebb685efecb17d9036ca79ff086f1741b.jpg",
7+
"bio": "",
8+
"followerCount": 0,
9+
"verified": false
10+
},
11+
"videoInfo": {
12+
"title": "《不爱吃肉是你的谎言》",
13+
"videoUrl": "https://www.bilibili.com/video/BV1KkpZzJEfB",
14+
"thumbnail": "https://i0.hdslb.com/bfs/archive/07372477d27d77aa97ac29c44b8b383b4a3b5b9d.jpg",
15+
"duration": "14:26",
16+
"publishDate": "2025-09-21T03:00:00.000Z",
17+
"likeCount": 2489,
18+
"description": ""
19+
},
20+
"specialtyProduct": {
21+
"title": "食贫道 原汁酱牛肉220g/盒山东老字号开袋即食小袋装休闲零食",
22+
"description": "开袋即食小袋装",
23+
"tags": [
24+
"美食记录",
25+
"美食侦探"
26+
]
27+
},
28+
"externalLinks": [
29+
{
30+
"title": "稳重一点啊 · B站主页",
31+
"url": "https://space.bilibili.com/3493282587871429",
32+
"type": "profile",
33+
"platform": "bilibili"
34+
},
35+
{
36+
"title": "食贫道 原汁酱牛肉220g/盒山东老字号开袋即食小袋装休闲零食",
37+
"url": "https://mall.bilibili.com/neul-next/detailuniversal/detail.html?isMerchant=1&page=detailuniversal_detail&saleType=0&itemsId=13198307&loadingShow=1&noTitleBar=1&track_id=__BGMT__&from=&from_spmid=__SPMID__&msource=cps_comments_3493282587871429_cont-1-115238972163380",
38+
"type": "purchase",
39+
"platform": "bilibili"
40+
},
41+
{
42+
"title": "视频原链接",
43+
"url": "https://www.bilibili.com/video/BV1KkpZzJEfB",
44+
"type": "video",
45+
"platform": "bilibili"
46+
}
47+
],
48+
"metadata": {
49+
"createdAt": "2025-09-20T22:27:53.000Z",
50+
"updatedAt": "2025-09-21T03:00:00.000Z",
51+
"status": "published",
52+
"category": "美食记录",
53+
"region": "全国",
54+
"featured": false
55+
}
56+
}

‎src/data/list.json‎

Lines changed: 74 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -92,8 +92,8 @@
9292
"description": "-"
9393
},
9494
"specialtyProduct": {
95-
"title": "[TODO] 关联特色产品标题",
96-
"description": "[TODO] 关联特色产品描述",
95+
"title": "盘锦湿地河蟹鲜活全母稻田蟹顺丰空运包邮中秋河蟹礼盒",
96+
"description": "",
9797
"tags": [
9898
"打野采摘",
9999
"小宠异宠"
@@ -127,8 +127,8 @@
127127
"description": ""
128128
},
129129
"specialtyProduct": {
130-
"title": "[TODO] 关联特色产品标题",
131-
"description": "[TODO] 关联特色产品描述",
130+
"title": "四川平武2025年深山土蜂蜜纯天然0添加",
131+
"description": "来自四川平武的纯天然土蜂蜜，0添加，保留了蜂蜜的原始风味。",
132132
"tags": [
133133
"农村生活",
134134
"三农"
@@ -142,5 +142,75 @@
142142
"region": "全国",
143143
"featured": false
144144
}
145+
},
146+
{
147+
"bvid": "BV13YpZzxEnP",
148+
"uploader": {
149+
"id": "up_3493282587871429",
150+
"name": "稳重一点啊",
151+
"avatar": "https://i1.hdslb.com/bfs/face/79cd635ebb685efecb17d9036ca79ff086f1741b.jpg",
152+
"bio": "",
153+
"verified": false
154+
},
155+
"videoInfo": {
156+
"title": "《关于漠叔和饼叔在晚上12点审片子这件事》",
157+
"videoUrl": "https://www.bilibili.com/video/BV13YpZzxEnP",
158+
"thumbnail": "https://i2.hdslb.com/bfs/archive/be34e6083f7d830c080d815d54c0fbb56aab5547.jpg",
159+
"duration": "16:08",
160+
"publishDate": "2025-09-21T05:00:00.000Z",
161+
"likeCount": 5890,
162+
"description": ""
163+
},
164+
"specialtyProduct": {
165+
"title": "[TODO] 关联特色产品标题",
166+
"description": "[TODO] 关联特色产品描述",
167+
"tags": [
168+
"美食综合",
169+
"美食侦探"
170+
]
171+
},
172+
"metadata": {
173+
"createdAt": "2025-09-20T22:37:30.000Z",
174+
"updatedAt": "2025-09-21T05:00:00.000Z",
175+
"status": "published",
176+
"category": "美食综合",
177+
"region": "全国",
178+
"featured": false
179+
}
180+
},
181+
{
182+
"bvid": "BV1KkpZzJEfB",
183+
"uploader": {
184+
"id": "up_3493282587871429",
185+
"name": "稳重一点啊",
186+
"avatar": "https://i1.hdslb.com/bfs/face/79cd635ebb685efecb17d9036ca79ff086f1741b.jpg",
187+
"bio": "",
188+
"verified": false
189+
},
190+
"videoInfo": {
191+
"title": "《不爱吃肉是你的谎言》",
192+
"videoUrl": "https://www.bilibili.com/video/BV1KkpZzJEfB",
193+
"thumbnail": "https://i0.hdslb.com/bfs/archive/07372477d27d77aa97ac29c44b8b383b4a3b5b9d.jpg",
194+
"duration": "14:26",
195+
"publishDate": "2025-09-21T03:00:00.000Z",
196+
"likeCount": 2489,
197+
"description": ""
198+
},
199+
"specialtyProduct": {
200+
"title": "食贫道 原汁酱牛肉220g/盒山东老字号开袋即食小袋装休闲零食",
201+
"description": "开袋即食小袋装",
202+
"tags": [
203+
"美食记录",
204+
"美食侦探"
205+
]
206+
},
207+
"metadata": {
208+
"createdAt": "2025-09-20T22:27:53.000Z",
209+
"updatedAt": "2025-09-21T03:00:00.000Z",
210+
"status": "published",
211+
"category": "美食记录",
212+
"region": "全国",
213+
"featured": false
214+
}
145215
}
146216
]

0 commit comments

Comments
 (0)