From e274ea7cbcf209a9d8f2f359b77d74eab75c08fe Mon Sep 17 00:00:00 2001
From: Bruce-Jay <yirenlin0218@gmail.com>
Date: Fri, 6 Sep 2024 10:36:37 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=9D=E6=AD=A5=E5=AE=8C=E6=88=90cal?=
 =?UTF-8?q?endar=E7=9A=84=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DevLeaderboard/CustomCalendar.tsx         | 90 +++++++++++++++++++
 src/components/DevLeaderboard/index.js        |  3 +-
 tsconfig.json                                 | 22 ++++-
 3 files changed, 110 insertions(+), 5 deletions(-)
 create mode 100644 src/components/DevLeaderboard/CustomCalendar.tsx

diff --git a/src/components/DevLeaderboard/CustomCalendar.tsx b/src/components/DevLeaderboard/CustomCalendar.tsx
new file mode 100644
index 0000000..8965d83
--- /dev/null
+++ b/src/components/DevLeaderboard/CustomCalendar.tsx
@@ -0,0 +1,90 @@
+import React from "react";
+import dayjs from "dayjs";
+
+import "dayjs/locale/zh-cn";
+
+import { Calendar, Col, Radio, Row, Select, theme, Typography } from "antd";
+import type { CalendarProps } from "antd";
+import type { Dayjs } from "dayjs";
+import dayLocaleData from "dayjs/plugin/localeData";
+
+dayjs.extend(dayLocaleData);
+
+const CustomCalendar: React.FC = () => {
+	const { token } = theme.useToken();
+
+	const onPanelChange = (value: Dayjs, mode: CalendarProps<Dayjs>["mode"]) => {
+		console.log(value.format("YYYY-MM-DD"), mode);
+	};
+
+	const wrapperStyle: React.CSSProperties = {
+		width: 300,
+		border: `1px solid ${token.colorBorderSecondary}`,
+		borderRadius: token.borderRadiusLG,
+	};
+
+	return (
+		<div style={wrapperStyle}>
+			<Calendar
+				fullscreen={false}
+				headerRender={({ value, onChange }) => {
+					const start = 0;
+					const end = 12;
+					const monthOptions = [];
+
+					let current = value.clone();
+					const localeData = value.localeData();
+					const months = [];
+					for (let i = 0; i < 12; i++) {
+						current = current.month(i);
+						months.push(localeData.monthsShort(current));
+					}
+
+					for (let i = start; i < end; i++) {
+						monthOptions.push(
+							<Select.Option key={i} value={i} className="month-item">
+								{months[i]}
+							</Select.Option>
+						);
+					}
+
+					const year = value.year();
+					const month = value.month();
+					const options = [];
+					for (let i = year - 10; i < year + 10; i += 1) {
+						options.push(
+							<Select.Option key={i} value={i} className="year-item">
+								{i}
+							</Select.Option>
+						);
+					}
+					return (
+						<div style={{ padding: 8 }}>
+							<Typography.Title level={4}>Custom header</Typography.Title>
+							<Row gutter={8}>
+								<Col>
+									<Select
+										size="small"
+										popupMatchSelectWidth={false}
+										className="my-year-select"
+										value={year}
+										onChange={(newYear) => {
+											const now = value.clone().year(newYear);
+											onChange(now);
+										}}
+									>
+										{options}
+									</Select>
+								</Col>
+							</Row>
+						</div>
+					);
+				}}
+				onPanelChange={onPanelChange}
+        mode="year"
+			/>
+		</div>
+	);
+};
+
+export default CustomCalendar;
diff --git a/src/components/DevLeaderboard/index.js b/src/components/DevLeaderboard/index.js
index a069998..c730bfc 100644
--- a/src/components/DevLeaderboard/index.js
+++ b/src/components/DevLeaderboard/index.js
@@ -6,6 +6,7 @@ import { Select, Input, Button, Space, Calendar } from "antd";
 import Leaderboard from "./Leaderboard";
 import Details from "./Details";
 import Graph from "./Graph";
+import CustomCalendar from "./CustomCalendar";
 import "./devLeaderboard.css";
 
 const DevLeaderboard = () => {
@@ -61,7 +62,7 @@ const DevLeaderboard = () => {
             </Space.Compact>
           </div>
 					
-          <Calendar fullscreen={false}/>
+          <CustomCalendar fullscreen={false}/>
 				</div>
 			</div>
 			<div id="main" className="bordered">
diff --git a/tsconfig.json b/tsconfig.json
index c03e21b..6b6dd61 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,8 +7,22 @@
     "node_modules",
   ],
   "compilerOptions": {
-    "baseUrl": ".",
-    "target": "ES2015",
-    "downlevelIteration": true
-  }
+    "target": "ES6", // 或 "ESNext"，取决于你需要的 JavaScript 版本
+    "lib": ["dom", "dom.iterable", "esnext"], // 用于支持 DOM 和最新的 ES 特性
+    "allowJs": true, // 如果你也有 .js 文件
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true, // 启用 TypeScript 的严格模式
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx", // 对于 React 17+ 或 React 18，使用 "react-jsx"。对于旧版本，使用 "react"。
+    "noEmit": true, // 如果你不希望生成编译后的文件，可以设置为 true
+    "paths": {
+      "@/*": ["src/*"] // 如果你使用了路径别名
+    }
+  },
 }