From b1953e18f194dde0bca72e46128840380ccaa6d3 Mon Sep 17 00:00:00 2001
From: xiangmy21 <2248278431@qq.com>
Date: Mon, 1 Apr 2024 17:26:46 +0800
Subject: [PATCH] feat(Share): add IntroPage & MinecraftPage

---
 src/app/ShareSite/IntroPage.tsx     | 110 ++++++++++++++++++++++++++++
 src/app/ShareSite/MinecraftPage.tsx | 107 +++++++++++++++++++++++++++
 src/app/ShareSite/index.tsx         |  36 ++++++---
 3 files changed, 244 insertions(+), 9 deletions(-)
 create mode 100644 src/app/ShareSite/IntroPage.tsx
 create mode 100644 src/app/ShareSite/MinecraftPage.tsx

diff --git a/src/app/ShareSite/IntroPage.tsx b/src/app/ShareSite/IntroPage.tsx
new file mode 100644
index 000000000..eb9439652
--- /dev/null
+++ b/src/app/ShareSite/IntroPage.tsx
@@ -0,0 +1,110 @@
+import React from "react";
+import { Button, Card, Col, Row, Space, Typography } from "antd";
+import { RightCircleOutlined } from "@ant-design/icons";
+import { PageProps } from "..";
+import { useUrl } from "@/api/hooks/url";
+import { useNavigate } from "react-router-dom";
+
+const { Title, Paragraph } = Typography;
+
+type ResourceProps = {
+  image: string;
+  title: string;
+  text: string;
+  link: string;
+  reverse?: boolean;
+};
+
+const Resource: React.FC<ResourceProps> = ({
+  image,
+  title,
+  text,
+  link,
+  reverse,
+}) => {
+  const navigate = useNavigate();
+  return (
+    <Card
+      bordered
+      style={{
+        marginLeft: "5%",
+        marginRight: "5%",
+        marginTop: "3%",
+        borderRadius: "1rem",
+      }}
+    >
+      <Row
+        justify="space-between"
+        align="middle"
+        style={{ flexDirection: reverse ? "row-reverse" : "row" }}
+      >
+        <Col span={8}>
+          <img
+            src={image}
+            alt="resource"
+            style={{ width: "100%", borderRadius: "1rem" }}
+          />
+        </Col>
+        <Col span={15}>
+          <Space direction="vertical" size="middle" style={{ width: "100%" }}>
+            <Title level={3}>{title}</Title>
+            <Paragraph ellipsis={{ rows: 2, expandable: true }}>
+              {text}
+            </Paragraph>
+            <Button
+              type="primary"
+              onClick={() =>
+                link.includes("http")
+                  ? window.open(link, "_blank")
+                  : navigate(link)
+              }
+            >
+              <RightCircleOutlined />
+              点击进入
+            </Button>
+          </Space>
+        </Col>
+      </Row>
+    </Card>
+  );
+};
+
+const IntroPage: React.FC<PageProps> = ({ mode, user }) => {
+  const url = useUrl();
+  return (
+    <Space direction="vertical" size="small" style={{ width: "100%" }}>
+      <Resource
+        image={`${process.env.REACT_APP_STATIC_URL}/public/images/eesast_docs.png`}
+        title="EESAST DOCS"
+        text="软件部丰富、实用的技术文档，包含C++,C#,HTML,JS等编程语言，Git、WSL等常用工具的使用方法，游戏开发、网站开发等技术的学习资料。"
+        link="https://docs.eesast.com/"
+      />
+      <Resource
+        image={`${process.env.REACT_APP_STATIC_URL}/public/images/sast_weekly.jfif`}
+        title="SAST Weekly"
+        text="SAST Weekly 是由电子工程系学生科协推出的科技系列推送，内容涵盖信息领域技术科普、研究前沿热点介绍、科技新闻跟进探索等多个方面，帮助同学们增长姿势，开拓眼界，每周更新，欢迎关注！"
+        link={url.link("weekly")}
+      />
+      <Resource
+        image={`${process.env.REACT_APP_STATIC_URL}/public/images/bilibili_account.png`}
+        title="清华大学电子系软件部Bilibili账户"
+        text="软件部在Bilibili上的账户，包含软件部的技术培训视频、软件设计比赛的精彩展示视频等。"
+        link="https://space.bilibili.com/687960301"
+      />
+      <Resource
+        image={`${process.env.REACT_APP_STATIC_URL}/public/images/electronic_design.png`}
+        title="电子设计大赛硬件课程资料"
+        text="电子设计大赛是电子系与自动化系联合承办的高水平科技赛事，每年都会为选手提供嵌入式硬件技术培训，帮助选手搭建属于自己的智能小车。这里提供了2021年至今的丰富的课程资料。"
+        link="https://obsidian-algebra-843.notion.site/2023-7b054b53f0fd4d588d6f9b7528f9e1ec"
+      />
+      <Resource
+        image={`${process.env.REACT_APP_STATIC_URL}/public/images/eesast_minecraft.png`}
+        title="Minecraft服务器"
+        text="部署在软件部服务器上的Minecraft服务器，你可以在里面自由的探索！欢迎加入！"
+        link={url.link("minecraft")}
+      />
+    </Space>
+  );
+};
+
+export default IntroPage;
diff --git a/src/app/ShareSite/MinecraftPage.tsx b/src/app/ShareSite/MinecraftPage.tsx
new file mode 100644
index 000000000..8749b8ef0
--- /dev/null
+++ b/src/app/ShareSite/MinecraftPage.tsx
@@ -0,0 +1,107 @@
+import React, { useEffect } from "react";
+import { Typography, Space, Image, Card, Row, Col } from "antd";
+import { SmileOutlined } from "@ant-design/icons";
+import { PageProps } from "..";
+
+const { Title, Paragraph, Text, Link } = Typography;
+const { Meta } = Card;
+
+const MinecraftPage: React.FC<PageProps> = ({ mode, user }) => {
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
+  return (
+    <Space
+      direction="vertical"
+      style={{ margin: 0, padding: "1% 20%", backgroundColor: "white" }}
+    >
+      <Typography>
+        <Title level={1}>
+          <SmileOutlined /> 欢迎来到EESAST的Minecraft服务器！
+        </Title>
+
+        <Paragraph>
+          众所周知，Minecraft是一款非常受欢迎的沙盒游戏，同时其中的红石电路部分与电子工程息息相关，
+          我们可以在实践中轻松地学习逻辑门、触发器等数字逻辑知识，搭建各种有趣的机器，亲手体验电子工程的乐趣。
+          <br />
+          为了让大家更好地体验Minecraft和数字电路的乐趣，我们特别搭建了这个服务器，大家可以在这里互相交流玩耍。
+          <br />
+          软件部还会在暑假举办红石设计大赛，不论是萌新还是老手，都可以参与其中，一展自己的才华！
+        </Paragraph>
+
+        <Title level={2}>什么是Minecraft服务器？</Title>
+        <Paragraph>
+          Minecraft服务器是一个游戏服务端，大家可以使用本地Minecraft客户端通过IP地址或域名连接到服务器，
+          从而实现多个玩家在同一个世界中一起游玩，共享资源，合作建设，竞争或对战。
+          服务器可以设置不同的规则和模式，例如创造模式、生存模式或冒险模式，以适应各种游戏风格。
+          服务器的管理员可以通过插件或模组来自定义服务器的各种功能，包括物品生成，怪物出生，天气变化等。这些服务器可以在个人电脑上运行，也可以租用专业的游戏服务器托管。
+        </Paragraph>
+
+        <Title level={2}>我要怎么连接服务器？</Title>
+        <Paragraph>
+          <Text strong>
+            EESAST的服务器域名为 <Text code>mc.eesast.com</Text>
+          </Text>
+          ， 推荐大家使用PCL2客户端连接（也可自选其他客户端），具体教程请参考
+          <Link
+            href="https://www.bilibili.com/read/cv18149705/"
+            target="_blank"
+          >
+            PCL2食用(设置)教程
+          </Link>
+          。
+        </Paragraph>
+
+        <Title level={2}>我要去哪里学习红石知识？</Title>
+        <Paragraph>
+          <Text strong>
+            软件部的红石基础教程：
+            <Link
+              href="https://www.bilibili.com/video/BV11N4y187ZE?p=14&vd_source=f4d9b019d3ab13d634e8df2b16a9cae3"
+              target="_blank"
+            >
+              清华大学电子系科协软件部2023暑期培训
+            </Link>
+            。
+          </Text>
+          你可以通过这个视频了解到红石的基本概念和使用方法，帮助你更好地开始你的Minecraft之旅。如果希望进一步学习，可以参考网上的更多资料。如果你对Minecraft非常感兴趣，可以考虑了解一下学校次世代社团的MC部THUnion，那里汇集了许多MC爱好者，他们也在红石设计大赛中展示了非常优秀的作品。
+        </Paragraph>
+
+        <Row gutter={16}>
+          <Col span={8} offset={3}>
+            <Card
+              style={{ width: "100%", border: 0 }}
+              cover={
+                <Image
+                  src={`${process.env.REACT_APP_STATIC_URL}/public/images/redstone1.png`}
+                />
+              }
+            >
+              <Meta
+                description="选手设计的混凝土工厂"
+                style={{ textAlign: "center" }}
+              />
+            </Card>
+          </Col>
+          <Col span={8} offset={2}>
+            <Card
+              style={{ width: "100%", border: 0 }}
+              cover={
+                <div style={{ paddingTop: "80px" }}>
+                  <Image
+                    src={`${process.env.REACT_APP_STATIC_URL}/public/images/redstone2.png`}
+                  />
+                </div>
+              }
+            >
+              <Meta description="红石电路实现的32位有符号四则运算计算器" />
+            </Card>
+          </Col>
+        </Row>
+      </Typography>
+    </Space>
+  );
+};
+
+export default MinecraftPage;
diff --git a/src/app/ShareSite/index.tsx b/src/app/ShareSite/index.tsx
index f88db2c85..84b450550 100644
--- a/src/app/ShareSite/index.tsx
+++ b/src/app/ShareSite/index.tsx
@@ -8,6 +8,8 @@ import styled from "styled-components";
 import WeeklyPage from "./WeeklyPage";
 import { useUrl } from "../../api/hooks/url";
 import { PageProps } from "..";
+import IntroPage from "./IntroPage";
+import MinecraftPage from "./MinecraftPage";
 
 const ShareSite: React.FC<PageProps> = ({ mode, user }) => {
   const url = useUrl();
@@ -52,16 +54,20 @@ const ShareSite: React.FC<PageProps> = ({ mode, user }) => {
 
   const items = [
     {
-      key: "course",
-      label: <Link to={url.link("course")}>课程</Link>,
-      disabled: true,
-    },
-    {
-      key: "repo",
-      label: <Link to={url.link("repo")}>仓库</Link>,
-      disabled: true,
+      key: "intro",
+      label: <Link to={url.link("intro")}>介绍</Link>,
     },
     // {
+    //   key: "course",
+    //   label: <Link to={url.link("course")}>课程</Link>,
+    //   disabled: true,
+    // },
+    // {
+    //   key: "repo",
+    //   label: <Link to={url.link("repo")}>仓库</Link>,
+    //   disabled: true,
+    // },
+    // {
     //   key: "toturial",
     //   label: <Link to={url.link("toturial")}>教程</Link>,
     // },
@@ -69,6 +75,10 @@ const ShareSite: React.FC<PageProps> = ({ mode, user }) => {
       key: "weekly",
       label: <Link to={url.link("weekly")}>推送</Link>,
     },
+    {
+      key: "minecraft",
+      label: <Link to={url.link("minecraft")}>Minecraft</Link>,
+    },
   ];
 
   return (
@@ -84,7 +94,11 @@ const ShareSite: React.FC<PageProps> = ({ mode, user }) => {
       <Content>
         <Suspense fallback={<Loading />}>
           <Routes>
-            <Route path="/" element={<Navigate to={url.link("weekly")} />} />
+            <Route path="/" element={<Navigate to={url.link("intro")} />} />
+            <Route
+              path="intro"
+              element={<IntroPage mode={mode} user={user} />}
+            />
             <Route
               path="course"
               element={<CoursePage mode={mode} user={user} />}
@@ -95,6 +109,10 @@ const ShareSite: React.FC<PageProps> = ({ mode, user }) => {
               path="weekly"
               element={<WeeklyPage mode={mode} user={user} />}
             />
+            <Route
+              path="minecraft"
+              element={<MinecraftPage mode={mode} user={user} />}
+            />
             <Route path="*" element={<NotFoundPage />} />
           </Routes>
         </Suspense>