From 0f33f63459918ed730375d5b5d65d946382bd3b6 Mon Sep 17 00:00:00 2001
From: kyuuseiryuu <kyuuseiryuu@gmail.com>
Date: Wed, 28 Jan 2026 15:11:13 +0900
Subject: [PATCH] feat(countdown)

---
 bun.lock                                     |  1 +
 package.json                                 |  1 +
 src/components/GameSelector/GameSelector.tsx | 50 ++++++++++++--------
 3 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/bun.lock b/bun.lock
index e6b7468..0a1dc3e 100644
--- a/bun.lock
+++ b/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",
diff --git a/package.json b/package.json
index 4330de5..0ff5b24 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/GameSelector/GameSelector.tsx b/src/components/GameSelector/GameSelector.tsx
index 5a48cc0..e6eb970 100644
--- a/src/components/GameSelector/GameSelector.tsx
+++ b/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,21 +40,31 @@ export const GameSelector: React.FC<Props> = props => {
       <Divider />
       {isEmpty && (<Typography.Text type='secondary'>没有未开始的比赛</Typography.Text>)}
       <Spin spinning={requestEvents.loading}>
-        {gameList.map(e => (
-          <Card
-            key={e.matchId}
-            title={e.title}
-            hoverable
-            onClick={() => props.onGameClick?.(e)}
-          >
-            <Typography.Text type='success'>{e.title}</Typography.Text>
-            {e.info.map(e => (
-              <div key={e}>
-                <Typography.Text type='secondary'>{e}</Typography.Text>
-              </div>
-            ))}
-          </Card>
-        ))}
+        {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}
+              hoverable
+              onClick={() => props.onGameClick?.(e)}
+            >
+              <Typography.Text type='success'>{e.title}</Typography.Text>
+              {e.info.map(e => (
+                <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>
     </Space>
   );