Merge branch 'dev' of https://github.com/nbtca/Home into dev

src/pages/freshman/join.astro

@@ -6,7 +6,17 @@ import logo from "./_assets/nbtca.gif";
 
 <BaseLayout title="加入我们">
   <main>
-    <ReactChild client:load />
-    <img src={logo.src} />
+    <div style="margin: -30px;display:flex; justify-content: center;">
+      <img src={logo.src} style="max-width: 450px;" />
+    </div>
+    <div style="display:flex; justify-content: center;font-size: large;">
+      加入计算机协会
+    </div>
+    <ReactChild client:only="react" />
+    <div style="display:flex; justify-content: center;margin-left: 20px;margin-right: 20px;">
+      1.本页面仅作计算机协会新人信息登记使用，原则上登记即可加入。但入社后可能仍需要在学校的平台登记，后续请留意群内通知。
+      <br />
+      2.允许多次提交表单，通常以最后一次提交为准。
+    </div>
   </main>
 </BaseLayout>

src/pages/freshman/qrcode.astro

@@ -0,0 +1,11 @@
+---
+import BaseLayout from "../../layouts/BaseLayout.astro"
+import ReactChild from "./react/qrcode.tsx"
+import qrcode from "./_assets/qrcode_1727189194077.jpg";
+---
+
+<BaseLayout title="QRCode">
+  <main>
+    <ReactChild client:only="react" qrcode={qrcode.src} />
+  </main>
+</BaseLayout>

src/pages/freshman/react/join.tsx

@@ -13,12 +13,34 @@ export default function JoinForm() {
     email: "",
     memo: "",
   })
+  function saveToLocalStorge() {
+    localStorage.setItem("formData", JSON.stringify(formData))
+  }
+  function loadFromLocalStorge() {
+    const data = localStorage.getItem("formData")
+    if (data) {
+      setFormData(JSON.parse(data))
+    }
+  }
+  const [firstRender, setFirstRender] = useState(true)
+  if (firstRender) {
+    setFirstRender(false)
+    loadFromLocalStorge()
+  }
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target
     setFormData(prevData => ({
       ...prevData,
       [name]: value,
     }))
+    setTimeout(() => {
+      try {
+        saveToLocalStorge()
+      }
+      catch (error) {
+        console.error("Failed to save form data to local storage", error)
+      }
+    }, 100)
   }
   const handleSubmit = async () => {
     try {
@@ -26,7 +48,7 @@ export default function JoinForm() {
         requestBody: formData,
       })
       alert("提交成功！ 后续请加群获取！")
-      window.location.href = "/about"
+      window.location.href = "/freshman/qrcode"
     }
     catch (error) {
       console.error("Error submitting form:", error)

src/pages/freshman/react/qrcode.tsx

@@ -0,0 +1,72 @@
+import { Button, Input } from "@nextui-org/react"
+
+function QrCodeContent({ qrcode }: { qrcode: string }) {
+  return (
+    <>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          marginTop: "20px",
+        }}
+      >
+        请扫描二维码加入计算机协会交流群（QQ）
+      </div>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+        }}
+      >
+        <img
+          src={qrcode}
+          style={{
+            maxWidth: "320px",
+            padding: "20px",
+          }}
+        />
+      </div>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          flexDirection: "column",
+          textAlign: "center",
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+          }}
+        >
+          <div
+            style={{
+              textAlign: "center",
+              width: "90px",
+              display: "flex",
+              justifyContent: "center",
+            }}
+          >
+            <Input readOnly={true} value="906370401" />
+          </div>
+        </div>
+        <Button
+          onClick={() => {
+            const inputElement = document.querySelector(
+              "input[value=\"906370401\"]",
+            ) as HTMLInputElement
+            if (inputElement) {
+              inputElement.select()
+              navigator.clipboard.writeText(inputElement.value)
+            }
+          }}
+        >
+          复制到剪切板
+        </Button>
+      </div>
+    </>
+  )
+}
+
+export default QrCodeContent

src/pages/join-us.astro

@@ -18,14 +18,24 @@ import mp4 from "./_assets/nbtca.mp4";
       <p class="life-at-apple__body-text">九月二十五日，百团等你！</p>
     </div>
     <div class="learn-more-link-container">
-      <a
-        href="/careers/cn/life-at-apple.html"
-        class="learn-more-link"
-        aria-label="进一步了解 NBTCA 的社区和文化"
-      >
-        了解在 NBTCA
-      </a>
-      <a class="learn-more-link-after">&gt; </a>
+      <div class="learn-more-link">
+        <a
+          href="/posts/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%8D%8F%E4%BC%9A%E5%85%A5%E7%A4%BE%E6%8C%87%E5%8D%97"
+          aria-label="进一步了解 NBTCA 的社区和文化"
+        >
+          了解在 NBTCA
+        </a>
+        <a class="learn-more-link-after">&gt; </a>
+        <br />
+        <br />
+        <a
+          href="/freshman/join"
+          aria-label="申请加入 NBTCA"
+        >
+          填写入社信息
+        </a>
+        <a class="learn-more-link-after">&gt; </a>
+      </div>
     </div>
     <video width="640" height="360" autoplay muted>
       <source src={mp4} type="video/mp4" />

src/pages/posts/计算机协会入社指南.md

@@ -25,9 +25,16 @@ tags: ["指南"]
 - [后记](#后记)
   - [v1.0 后记](#v1.后记)
 
+# 你好 👋
+
+- QQ 交流群：[906370401](https://qm.qq.com/q/bdnlaa3fHi)
+  ![906370401](./_assets/qrcode_group.svg)
+
+- 微信公众号： 石麟之光
+
 # NBTCA 是什么 ❓
 
-- 浙江大学宁波理工学院计算机协会（Association for Computing Machinery, Ningbo Institute of Technology, Zhejiang University ），今天的简写是[NBTCA🔗](https://github.com/nbtca/documents/blob/main/%E6%A1%A3%E6%A1%88/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%8D%8F%E4%BC%9A%E7%BA%B2%E8%A6%81)
+- 浙江大学宁波理工学院计算机协会（Computer Association of NingboTech University，原名 Association for Computing Machinery, Ningbo Institute of Technology, Zhejiang University ），今天的简写是[NBTCA🔗](https://github.com/nbtca/documents/blob/main/%E6%A1%A3%E6%A1%88/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%8D%8F%E4%BC%9A%E7%BA%B2%E8%A6%81)
 
 # 你们做什么 💻