diff --git a/src/app/ContestSite/AnalysisPage.tsx b/src/app/ContestSite/AnalysisPage.tsx new file mode 100644 index 000000000..df402517a --- /dev/null +++ b/src/app/ContestSite/AnalysisPage.tsx @@ -0,0 +1,17 @@ +import React from "react"; +import { ContestProps } from "."; +//import { useUrl } from "../../api/hooks/url"; + +/* ---------------- 主页面 ---------------- */ +const AnalysisPage: React.FC = ({ mode, user }) => { + /* ---------------- States 和常量 Hooks ---------------- */ + //const url = useUrl(); + //const Contest_id = url.query.get("contest"); + return ( +
+

敬请期待!

+
+ ); +}; + +export default AnalysisPage; diff --git a/src/app/ContestSite/MenuPage.tsx b/src/app/ContestSite/MenuPage.tsx index 384b12460..f24a81850 100644 --- a/src/app/ContestSite/MenuPage.tsx +++ b/src/app/ContestSite/MenuPage.tsx @@ -1,5 +1,5 @@ -import React, { Suspense, useEffect, useState } from "react"; -import { Link, Route, Routes } from "react-router-dom"; +import React, { Suspense, useEffect, useRef, useState } from "react"; +import { Link, Route, Routes, useNavigate } from "react-router-dom"; import { HomeOutlined, TeamOutlined, @@ -24,7 +24,16 @@ import { ReadOutlined, MenuOutlined, } from "@ant-design/icons"; -import { Menu, Layout, message, Button, MenuProps, Spin } from "antd"; +import { + Menu, + Layout, + message, + Button, + MenuProps, + Spin, + Tour, + TourProps, +} from "antd"; //以下为子分页 import IntroPage from "./IntroPage"; import NoticePage from "./NoticePage"; @@ -39,6 +48,7 @@ import StreamPage from "./StreamPage"; import ManageTeamsPage from "./ManageTeamsPage"; import SettingPage from "./SettingPage"; import NotFoundPage from "../Components/NotFound"; +import AnalysisPage from "./AnalysisPage"; // hasura查询 //学长写好的api,用以没登陆会跳转到登陆页面 import { useUrl } from "../../api/hooks/url"; @@ -62,7 +72,6 @@ const { Sider, Content } = Layout; const MenuPage: React.FC = (props) => { const url = useUrl(); const Contest_id = url.query.get("contest"); - const userAgent = navigator.userAgent; const isMobile = userAgent.match( /(iPhone|iPod|Android|ios|iPad|AppleWebKit.*Mobile.*)/i, @@ -70,6 +79,13 @@ const MenuPage: React.FC = (props) => { const [collapsed, setCollapsed] = React.useState(isMobile ? true : false); const [openKeys, setOpenKeys] = useState([""]); + const introRef = useRef(null); + const playRef = useRef(null); + const joinRef = useRef(null); + const codeRef = useRef(null); + const arenaRef = useRef(null); + const navigate = useNavigate(); + const { data: getContestManagersData, error: getContestManagersError } = graphql.useGetContestManagersSuspenseQuery({ variables: { @@ -77,6 +93,13 @@ const MenuPage: React.FC = (props) => { }, }); + const { data: contestData, error: contestError } = + graphql.useGetContestInfoSuspenseQuery({ + variables: { + contest_id: Contest_id, + }, + }); + useEffect(() => { if (getContestManagersError) { message.error("管理员加载失败"); @@ -84,6 +107,13 @@ const MenuPage: React.FC = (props) => { } }, [getContestManagersError]); + useEffect(() => { + if (contestError) { + message.error("比赛信息加载失败"); + console.log(contestError.message); + } + }, [contestError]); + const items = [ { key: "back", @@ -94,7 +124,11 @@ const MenuPage: React.FC = (props) => { }, { key: "home", - label: "比赛详情", + label: ( + + 比赛详情 + + ), icon: , children: [ { @@ -116,7 +150,11 @@ const MenuPage: React.FC = (props) => { }, { key: "game", - label: "游玩时刻", + label: ( + + 游玩时刻 + + ), icon: , children: [ { @@ -138,7 +176,11 @@ const MenuPage: React.FC = (props) => { }, { key: "team", - label: "现在报名", + label: ( + + 现在报名 + + ), icon: , children: [ { @@ -160,12 +202,20 @@ const MenuPage: React.FC = (props) => { }, { key: "code", - label: 代码提交, + label: ( + + 代码提交 + + ), icon: , }, { key: "arena", - label: "天梯试炼", + label: ( + + 天梯试炼 + + ), icon: , children: [ { @@ -190,7 +240,7 @@ const MenuPage: React.FC = (props) => { const itemsAdmin = [ { key: "admin", - label: "管理员", + label: 管理员, icon: , children: [ { @@ -226,9 +276,77 @@ const MenuPage: React.FC = (props) => { ); }; + const steps: TourProps["steps"] = [ + { + title: contestData?.contest_by_pk?.contest_name, + description: + "欢迎参加" + + contestData?.contest_by_pk?.contest_name + + "比赛!下面让我来帮助你熟悉赛事互动页面,帮助你更好地参加比赛吧!", + target: null, + //cover: 2024New, + mask: { + style: { + backdropFilter: "blur(8px)", + }, + }, + }, + { + title: "比赛介绍", + description: + "在这里,你可以查看比赛的基本介绍、时间安排和比赛公告,请及时关注~", + placement: "right", + target: () => introRef.current, + }, + { + title: "游玩时刻", + description: + "在这里,你可以试玩我们的游戏,还可以观看比赛直播和比赛回放!", + placement: "right", + target: () => playRef.current, + }, + { + title: "现在报名", + description: "在这里,你可以选择自己创建队伍或者加入别人的队伍~", + placement: "right", + target: () => joinRef.current, + }, + { + title: "代码提交", + description: "比赛的代码在这里提交~", + placement: "right", + target: () => codeRef.current, + }, + { + title: "天梯试炼", + description: + "在这里,你可以查看比赛的积分榜,查看队伍的对战记录,甚至还有专属于你们队伍的数据分析!", + placement: "right", + target: () => arenaRef.current, + }, + ]; + + const TourGuide = () => { + const [open, setOpen] = useState( + localStorage.getItem("tour_contest") !== "true" && + process.env.NODE_ENV !== "development", + ); + return ( + { + setOpen(false); + localStorage.setItem("tour_contest", "true"); + navigate(url.link("playground")); + }} + steps={steps} + /> + ); + }; //渲染页面,switch类似c,用以切换url return ( + = (props) => { } /> } /> - } /> + } + />