feat: 初步完成calendar的开发

Signed-off-by: Bruce-Jay <[email protected]>

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;

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">

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/*"] // 如果你使用了路径别名
+    }
+  },
 }