feat(countdown)

bun.lock

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

package.json

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

src/components/GameSelector/GameSelector.tsx

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