kyuuseiryuu/kaiqiu-rank-list
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(countdown)

Browse Source
This commit is contained in:
kyuuseiryuu 2026-01-28 15:11:13 +09:00
parent 06c99f5b6f
commit 0f33f63459
3 changed files with 32 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
bun.lock
View File

@ -9,6 +9,7 @@
"ahooks": "^3.9.6", "ahooks": "^3.9.6",
"antd": "^6.2.1", "antd": "^6.2.1",
"cheerio": "^1.2.0", "cheerio": "^1.2.0",
"dayjs": "^1.11.19",
"lodash": "^4.17.23", "lodash": "^4.17.23",
"react": "^19", "react": "^19",
"react-dom": "^19", "react-dom": "^19",

1
package.json
View File

@ -13,6 +13,7 @@
"ahooks": "^3.9.6", "ahooks": "^3.9.6",
"antd": "^6.2.1", "antd": "^6.2.1",
"cheerio": "^1.2.0", "cheerio": "^1.2.0",
"dayjs": "^1.11.19",
"lodash": "^4.17.23", "lodash": "^4.17.23",
"react": "^19", "react": "^19",
"react-dom": "^19", "react-dom": "^19",

50
src/components/GameSelector/GameSelector.tsx
View File

@ -1,10 +1,10 @@
import { Button, Card, Divider, Select, Space, Spin, Typography } from 'antd'; import { Card, Divider, Select, Space, Spin, Statistic, Typography } from 'antd';
import type React from 'react'; import type React from 'react';
import { clubs } from './clubList';
import { useCallback, useEffect, useState } from 'react';
import { useRequest } from 'ahooks'; import { useRequest } from 'ahooks';
import { GlobalOutlined } from '@ant-design/icons'; import { clubs } from './clubList';
import type { IEventInfo } from '../..'; import { useCallback, useEffect, useMemo, useState } from 'react';
import type { IEventInfo } from '../../types';
import dayjs from 'dayjs';
interface Props { interface Props {
onGameClick?: (info: IEventInfo) => void; onGameClick?: (info: IEventInfo) => void;
@ -40,21 +40,31 @@ export const GameSelector: React.FC<Props> = props => {
<Divider /> <Divider />
{isEmpty && (<Typography.Text type='secondary'>没有未开始的比赛</Typography.Text>)} {isEmpty && (<Typography.Text type='secondary'>没有未开始的比赛</Typography.Text>)}
<Spin spinning={requestEvents.loading}> <Spin spinning={requestEvents.loading}>
{gameList.map(e => ( {gameList.map(e => {
<Card const { y, M, D } = /^(?<y>\d{4})年(?<M>\d+)月(?<D>\d+)日/.exec(e.title)?.groups ?? {} as { y: string; M: string; D: string};
key={e.matchId} const hm = /(?<hm>\d+:\d+)\b/.exec(e.info.join('\n'))?.groups?.hm ?? '10:00';
title={e.title} const day = dayjs(`${y}-${M}-${D} ${hm}`);
hoverable return (
onClick={() => props.onGameClick?.(e)} <Card
> key={e.matchId}
<Typography.Text type='success'>{e.title}</Typography.Text> title={e.title}
{e.info.map(e => ( hoverable
<div key={e}> onClick={() => props.onGameClick?.(e)}
<Typography.Text type='secondary'>{e}</Typography.Text> >
</div> <Typography.Text type='success'>{e.title}</Typography.Text>
))} {e.info.map(e => (
</Card> <div key={e}>
))} <Typography.Text type='secondary'>{e}</Typography.Text>
</div>
))}
<Statistic.Timer
type='countdown'
value={day.toDate().getTime()}
format='距离比赛开始: DD 天 HH 时 mm 分 ss 秒'
/>
</Card>
);
})}
</Spin> </Spin>
</Space> </Space>
); );