feat: 大致完成排行榜页面的开发，实现来源与仓库搜索功能。月份功能待优化。其他布局待优化

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

package.json

@@ -34,7 +34,8 @@
     "react-select": "^5.8.0",
     "rehype-katex": "^7.0.0",
     "remark-math": "^6.0.0",
-    "stackedit-js": "^1.0.7"
+    "stackedit-js": "^1.0.7",
+    "tailwindcss": "^3.4.10"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "^3.4.0",

src/components/DevLeaderboard/Banner.tsx

@@ -0,0 +1,73 @@
+import { Select, Input, Button, Space, DatePicker, ConfigProvider } from "antd";
+import type { DatePickerProps } from "antd";
+import { useContext, useState } from "react";
+
+interface BannerProps {
+  setPlatform: (value: string) => void;
+  setRepo: (value: string) => void;
+  setDate: (date: any) => void;
+}
+
+const Banner = ({ setPlatform, setRepo, setDate }: BannerProps) => {
+  const [searchRepo, setSearchRepo] = useState<string>("X-lab2017/open-digger");
+
+  const handlePlatformChange = (value: string) => {
+    setPlatform(value);
+    console.log(value);
+  };
+
+  const handleRepoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchRepo(e.target.value);
+  };
+
+  const handleRepoSearch = () => {
+    setRepo(searchRepo);
+  };
+
+  const handleDateChange: DatePickerProps["onChange"] = (date, dateString) => {
+    setDate(date);
+    console.log(date, dateString);
+  };
+  return (
+    <div className="banner-box">
+      <div className="banner-title">OpenRank贡献度排行榜</div>
+      <div className="banner-content">
+        <Select
+          defaultValue="github"
+          style={{ width: 120 }}
+          options={[
+            { value: "github", label: "GitHub" },
+            { value: "gitee", label: "Gitee" },
+            { value: "gitlab", label: "GitLab" },
+          ]}
+          onChange={handlePlatformChange}
+        />
+        <div>
+          <Space.Compact style={{ width: "300px" }}>
+            <Input
+              defaultValue="X-lab2017/open-digger"
+              onChange={handleRepoChange}
+            />
+            <Button type="primary" onClick={handleRepoSearch}>
+              查询
+            </Button>
+          </Space.Compact>
+        </div>
+        <ConfigProvider
+          theme={{
+            components: {
+              DatePicker: {
+                cellHeight: 52,
+                cellWidth: 23,
+              },
+            },
+          }}
+        >
+          <DatePicker onChange={handleDateChange} picker="month" />
+        </ConfigProvider>
+      </div>
+    </div>
+  );
+};
+
+export default Banner;

src/components/DevLeaderboard/Details.js

@@ -69,10 +69,7 @@ const Details = ({ graph, id, month, typeMap, platform }) => {
   }, [graph, id, month, typeMap, platform]);
 
   return (
-    <div className="bordered" id="details">
-      <div id="title">
-        <h2>Details</h2>
-      </div>
+    <div className="bordered right-box" id="details">
       <div id="details_div" className="scrollit">
         <table id="details_table">
           <thead>

src/components/DevLeaderboard/Graph.js

@@ -55,12 +55,7 @@ const Graph = ({
       const categories = Array.from(typeMap.values());
 
       const option = {
-        title: {
-          text: `Community OpenRank for ${repoName} in ${month}`,
-          top: "bottom",
-          left: "right",
-        },
-        legend: [{ data: categories }],
+        legend: { data: categories, top: "500px", left: "30px" },
         tooltip: { trigger: "item" },
         series: [
           {
@@ -95,7 +90,7 @@ const Graph = ({
   return (
     <div
       id="graph"
-      className="bordered graph-container"
+      className="graph-container"
     />
   );
 };

src/components/DevLeaderboard/Leaderboard.js

@@ -22,10 +22,7 @@ const Leaderboard = ({ graph, month }) => {
   }, [graph, month]);
 
   return (
-    <div className="bordered" id="list">
-      <div id="title">
-        <h2>Leaderboard</h2>
-      </div>
+    <div className="bordered left-box" id="list">
       <div id="leaderboard_div" className="scrollit">
         <table id="leaderboard_table">
           <thead>

src/components/DevLeaderboard/devLeaderboard.css

@@ -1,33 +1,13 @@
-.banner-box {
-  z-index: 3;
-  position: fixed;
-  top: 80px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 600px;
-  height: 200px;
-  background-color: rgba(255, 255, 255, 0.5);
-  border: 1px solid black;
-  border-radius: 1rem;
-  padding: 1rem;
-}
-
-.banner-title {
-  text-align: center;
-  font-size: 1.5rem;
-  font-weight: bold;
-}
-
-.banner-content {
-  display: flex;
-}
-
 #main {
-  display: flex;
+
 }
 
 #graph {
-  height: 800px;
+  position: absolute;
+  left: 0;
+  top: 70px;
+  width: 100%;
+  height: calc(100vh - 100px);
 }
 
 .graph-container {
@@ -47,15 +27,10 @@
 
 #details {
   width: 300px;
-  height: 440px;
+  height: 300px;
   margin: 10px;
 }
 
-#title {
-  text-align: center;
-  font-size: 12px;
-}
-
 #leaderboard_table {
   width: 95%;
   margin: 10px;
@@ -71,22 +46,60 @@
 }
 
 #leaderboard_div {
-  height: 240px;
+  height: 290px;
 }
 
 #details_div {
-  height: 380px;
+  height: 290px;
 }
 
 .scrollit {
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: scroll;
+}
+
+table tr:nth-child(even) {
+  background-color: #fff;
 }
 
-tr:nth-child(even) {
-  background-color: #D6EEEE;
+table th {
+  text-align: left;
 }
 
-table, th, td {
+.banner-box {
+  z-index: 3;
+  position: absolute;
+  top: 80px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 660px;
+  height: 120px;
+  background-color: rgba(255, 255, 255, 0.5);
   border: 1px solid black;
+  border-radius: 1rem;
+  padding: 1rem;
 }
+
+.banner-title {
+  text-align: center;
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+
+.banner-content {
+  display: flex;
+  justify-content: space-between;
+}
+
+.left-box {
+  position: absolute;
+  top: 220px;
+  left: 0;
+  background-color: #fff;
+}
+
+.right-box {
+  position: absolute;
+  top: 220px;
+  right: 0;
+  background-color: #fff;
+}