Skip to content

Commit c8a83b6

Browse files
Lily-121rootyouyc22
authored
add：tourguidesite (#2148)
* adjust the code * tourguidesite * Update MenuPage.tsx * Update MenuPage.tsx * Update index.tsx * Update index.tsx --------- Co-authored-by: root <root@abing> Co-authored-by: Yichen You <[email protected]>
1 parent 04837ac commit c8a83b6

File tree

3 files changed

+186
-3
lines changed

3 files changed

+186
-3
lines changed

‎src/app/ShareSite/TourGuidePage.tsx‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
import React from "react";
2+
import { Button, Card, Col, Row, Space, Typography } from "antd";
3+
import { RightCircleOutlined } from "@ant-design/icons";
4+
import { PageProps } from "..";
5+
import { useUrl } from "@/api/hooks/url";
6+
import { useNavigate } from "react-router-dom";
7+
8+
/* ---------------- 接口和类型定义 ---------------- */
9+
type ResourceProps = {
10+
image: string;
11+
title: string;
12+
text: string;
13+
link: string;
14+
reverse?: boolean;
15+
};
16+
17+
const Resource: React.FC<ResourceProps> = ({
18+
image,
19+
title,
20+
text,
21+
link,
22+
reverse,
23+
}) => {
24+
const navigate = useNavigate();
25+
26+
return (
27+
<Card
28+
bordered
29+
style={{
30+
margin: "1rem",
31+
borderRadius: "1rem",
32+
display: "flex",
33+
flexDirection: "column",
34+
height: "250px",
35+
justifyContent: "center",
36+
}}
37+
>
38+
<Row
39+
justify="space-between"
40+
align="middle"
41+
style={{
42+
flexDirection: reverse ? "row-reverse" : "row",
43+
height: "100%",
44+
}}
45+
>
46+
<Col xs={24} sm={12} md={10}>
47+
<img
48+
src={image}
49+
alt="resource"
50+
style={{
51+
width: "100%",
52+
height: "auto",
53+
borderRadius: "1rem",
54+
}}
55+
/>
56+
</Col>
57+
<Col xs={24} sm={12} md={13}>
58+
<Space direction="vertical" size="small" style={{ width: "100%" }}>
59+
<Title level={3} style={{ marginBottom: "0.5rem" }}>
60+
{title}
61+
</Title>
62+
<Paragraph style={{ fontSize: "14px", marginBottom: "1rem" }}>
63+
{text}
64+
</Paragraph>
65+
{link && (
66+
<Button
67+
type="primary"
68+
onClick={() =>
69+
link.includes("http")
70+
? window.open(link, "_blank")
71+
: navigate(link)
72+
}
73+
>
74+
<RightCircleOutlined />
75+
点击进入
76+
</Button>
77+
)}
78+
</Space>
79+
</Col>
80+
</Row>
81+
</Card>
82+
);
83+
};
84+
85+
/* ---------------- 不随渲染刷新的常量 ---------------- */
86+
const { Title, Paragraph } = Typography;
87+
88+
/* ---------------- 主页面 ---------------- */
89+
const TourGuidePage: React.FC<PageProps> = () => {
90+
/* ---------------- States 和常量 Hooks ---------------- */
91+
const url = useUrl();
92+
93+
/* ---------------- 页面组件 ---------------- */
94+
return (
95+
<div style={{ padding: "1rem" }}>
96+
<Row gutter={[16, 16]}>
97+
<Col xs={24} sm={12} md={12}>
98+
<Resource
99+
image={`${process.env.REACT_APP_STATIC_URL}/public/images/help_contest.jpg`}
100+
title="赛事互动站"
101+
text="新版官网致力于为所有选手和赛事组织者提供更好的参赛体验，包括试玩功能、数据透视功能、以及全新设计的页面布局，让您轻松上手，玩转比赛！"
102+
link={url.link("contest/list", "site")}
103+
/>
104+
</Col>
105+
<Col xs={24} sm={12} md={12}>
106+
<Resource
107+
image={`${process.env.REACT_APP_STATIC_URL}/public/images/help_info.jpg`}
108+
title="信息化平台"
109+
text="信息化平台是与院系合作建设的学生操作平台，目前囊括了新生导师和奖学金申请功能，未来将覆盖学习生活的更多方面，敬请期待！"
110+
link={url.link("info/notices", "site")}
111+
/>
112+
</Col>
113+
<Col xs={24} sm={12} md={12}>
114+
<Resource
115+
image={`${process.env.REACT_APP_STATIC_URL}/public/images/help_share.jpg`}
116+
title="资源共享站"
117+
text="资源共享站是新版官网整合而成的全新子站，希望为同学们接入更多有趣的资源，包括课程资料、技术分享、以及娱乐活动等，让您的大学生活更加丰富多彩！"
118+
link={url.link("share/intro", "site")}
119+
/>
120+
</Col>
121+
<Col xs={24} sm={12} md={12}>
122+
<Resource
123+
image={`${process.env.REACT_APP_STATIC_URL}/public/images/help_dark.jpg`}
124+
title="暗色模式"
125+
text="此外还有炫酷的暗色模式，既护眼又极客，快来体验一下吧！"
126+
link=""
127+
/>
128+
</Col>
129+
</Row>
130+
</div>
131+
);
132+
};
133+
134+
export default TourGuidePage;

‎src/app/ShareSite/index.tsx‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { useUrl } from "../../api/hooks/url";
1010
import { PageProps } from "..";
1111
import IntroPage from "./IntroPage";
1212
import MinecraftPage from "./MinecraftPage";
13+
import TourGuidePage from "./TourGuidePage";
1314
import Authenticate, { courseRoles } from "../Components/Authenticate";
1415
import DivisionPage from "../HomeSite/DivisionPage";
1516
import ContestPage from "../HomeSite/ContestPage";
@@ -55,7 +56,9 @@ const ShareSite: React.FC<PageProps> = ({ mode, user }) => {
5556
width: 100%;
5657
background-color: ${mode === "light" ? `white` : `#141414`};
5758
border-bottom: 1px solid
58-
${mode === "light" ? `rgba(5, 5, 5, 0.06)` : `rgba(253, 253, 253, 0.12)`};
59+
${mode === "light"
60+
? `rgba(5, 5, 5, 0.06)`
61+
: `rgba(253, 253, 253, 0.12)`};
5962
position: sticky;
6063
top: 72px;
6164
`;
@@ -83,6 +86,10 @@ const ShareSite: React.FC<PageProps> = ({ mode, user }) => {
8386
key: "minecraft",
8487
label: <Link to={url.link("minecraft")}>Minecraft</Link>,
8588
},
89+
{
90+
key: "tourguide",
91+
label: <Link to={url.link("tourguide")}>网站说明</Link>,
92+
},
8693
{
8794
key: "division",
8895
label: <Link to={url.link("division")}>部门</Link>,
@@ -127,7 +134,10 @@ const ShareSite: React.FC<PageProps> = ({ mode, user }) => {
127134
</Authenticate>
128135
}
129136
/>
130-
<Route path="repo" element={<RepoPage mode={mode} user={user} />} />
137+
<Route
138+
path="repo"
139+
element={<RepoPage mode={mode} user={user} />}
140+
/>
131141
<Route
132142
path="weekly"
133143
element={<WeeklyPage mode={mode} user={user} />}
@@ -136,6 +146,10 @@ const ShareSite: React.FC<PageProps> = ({ mode, user }) => {
136146
path="minecraft"
137147
element={<MinecraftPage mode={mode} user={user} />}
138148
/>
149+
<Route
150+
path="tourguide"
151+
element={<TourGuidePage mode={mode} user={user} />}
152+
/>
139153
<Route
140154
path="division"
141155
element={<DivisionPage mode={mode} user={user} />}

‎src/app/index.tsx‎

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {
1919
ExportOutlined,
2020
NotificationTwoTone,
2121
NotificationOutlined,
22+
QuestionOutlined,
2223
} from "@ant-design/icons";
2324
import { Route, Link, Routes, Navigate } from "react-router-dom";
2425
import styled from "styled-components";
@@ -383,6 +384,39 @@ const App: React.FC = () => {
383384
</Link>
384385
);
385386
};
387+
const TourGuideSite = () => {
388+
return (
389+
<Link
390+
to={url.link("share/tourguide", "site")}
391+
css={`
392+
display: flex;
393+
align-items: center;
394+
justify-content: center;
395+
height: 32px;
396+
width: 32px;
397+
position: absolute;
398+
right: 165px;
399+
`}
400+
>
401+
<Button
402+
style={{
403+
width: "26px",
404+
height: "26px",
405+
border: "1px solid #ccc",
406+
borderRadius: "50%",
407+
background: "transparent",
408+
padding: "0",
409+
outline: "none",
410+
display: "flex",
411+
alignItems: "center",
412+
justifyContent: "center",
413+
}}
414+
>
415+
<QuestionOutlined style={{ fontSize: "17px" }} />
416+
</Button>
417+
</Link>
418+
);
419+
};
386420

387421
const steps: TourProps["steps"] = [
388422
{
@@ -420,7 +454,7 @@ const App: React.FC = () => {
420454
},
421455
{
422456
title: "暗色模式",
423-
description: "此外还有炫酷的暗色模式，即护眼又极客，快来体验一下吧！",
457+
description: "此外还有炫酷的暗色模式，既护眼又极客，快来体验一下吧！",
424458
placement: "bottom",
425459
target: () => themeRef.current,
426460
},
@@ -503,6 +537,7 @@ const App: React.FC = () => {
503537
<Home />
504538
<Navigation />
505539
<ThemeSwitch />
540+
<TourGuideSite />
506541
<NotificationSwitch />
507542
<User />
508543
</StyledHeader>

0 commit comments

Comments
 (0)