fix timeline (#1723)

* fix timeline * fix timeline
eesast · Apr 7, 2024 · c16ea55 · c16ea55
1 parent 567f147
commit c16ea55
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 5 deletions.
diff --git a/src/app/ContestSite/IntroPage.tsx b/src/app/ContestSite/IntroPage.tsx
@@ -5,6 +5,7 @@ import { useUrl } from "../../api/hooks/url";
 import Markdown from "react-markdown";
 import * as graphql from "@/generated/graphql";
 import { ContestProps } from ".";
+import dayjs from "dayjs";
 
 const { Countdown } = Statistic;
 
@@ -32,14 +33,19 @@ const IntroPage: React.FC<ContestProps> = ({ mode, user }) => {
       },
     });
 
-  // TODO: 在这里插入获取时间线数据的代码
-
+  const { data: CountdownData } = graphql.useGetContestTimesQuery({
+    variables: {
+      contest_id: Contest_id,
+    },
+  });
+  const contestTimes = CountdownData?.contest_time || [];
   /* ---------------- useEffect ---------------- */
   useEffect(() => {
     if (contestInfoError) {
       message.error("简介加载失败");
     }
   }, [contestInfoError]);
+
   /* ---------------- 页面组件 ---------------- */
   return (
     <Space
@@ -98,8 +104,43 @@ const IntroPage: React.FC<ContestProps> = ({ mode, user }) => {
         </Col>
         <Col span={8}>
           <Card bordered={false}>
-            {/* TODO: 在这里插入时间线组件，相关设置详见 https://ant.design/components/timeline-cn */}
-            <Timeline />
+            <Timeline
+              items={contestTimes.map((contestTime) => {
+                // 检查比赛结束时间是否已经过去
+                const isCurrentEvent =
+                  dayjs().isAfter(dayjs(contestTime.start)) &&
+                  dayjs().isBefore(dayjs(contestTime.end));
+                const isPastEvent = dayjs().isAfter(dayjs(contestTime.end));
+
+                return {
+                  color: isCurrentEvent
+                    ? "green"
+                    : isPastEvent
+                      ? "grey"
+                      : "blue", // 如果比赛已经结束，设置颜色为灰色，否则为蓝色
+                  children: (
+                    <>
+                      <p
+                        style={{
+                          fontWeight: "bold",
+                          fontSize: "larger",
+                          color: isPastEvent ? "grey" : "inherit",
+                        }}
+                      >
+                        {contestTime.event}
+                      </p>
+                      <p style={{ color: isPastEvent ? "grey" : "inherit" }}>
+                        {dayjs(contestTime.start).format("YYYY-MM-DD")} ~{" "}
+                        {dayjs(contestTime.end).format("YYYY-MM-DD")}
+                      </p>
+                      <p style={{ color: isPastEvent ? "grey" : "inherit" }}>
+                        {contestTime.description}
+                      </p>
+                    </>
+                  ),
+                };
+              })}
+            />
           </Card>
         </Col>
       </Row>

diff --git a/src/generated/graphql.tsx b/src/generated/graphql.tsx
@@ -17413,4 +17413,4 @@ export function useGetUser_IdSuspenseQuery(baseOptions?: Apollo.SuspenseQueryHoo
 export type GetUser_IdQueryHookResult = ReturnType<typeof useGetUser_IdQuery>;
 export type GetUser_IdLazyQueryHookResult = ReturnType<typeof useGetUser_IdLazyQuery>;
 export type GetUser_IdSuspenseQueryHookResult = ReturnType<typeof useGetUser_IdSuspenseQuery>;
-export type GetUser_IdQueryResult = Apollo.QueryResult<GetUser_IdQuery, GetUser_IdQueryVariables>;
+export type GetUser_IdQueryResult = Apollo.QueryResult<GetUser_IdQuery, GetUser_IdQueryVariables>;