add page

src/pages/freshman/join.astro

@@ -1,11 +1,10 @@
 ---
 import BaseLayout from "../../layouts/BaseLayout.astro"
-// import { Button } from "@nextui-org/react";
-import ReactChild from "./react/join.tsx"
+import ReactChild from "./react/join.tsx";
 ---
 
-<BaseLayout title="Welcome to Astro.">
+<BaseLayout title="加入我们">
   <main>
-    <ReactChild client:visible />
+    <ReactChild />
   </main>
 </BaseLayout>

src/pages/freshman/list.astro

@@ -0,0 +1,10 @@
+---
+import BaseLayout from "../../layouts/BaseLayout.astro"
+import ReactChild from "./react/list.tsx";
+---
+
+<BaseLayout title="加入我们">
+  <main>
+    <ReactChild />
+  </main>
+</BaseLayout>

src/pages/freshman/react/join.tsx

@@ -1,27 +1,90 @@
-import { Button } from "@nextui-org/react"
+import { useState } from "react"
+import { Button, Input, Card, CardBody, CardFooter } from "@nextui-org/react"
 import { activeClient } from "../../../utils/client"
 
-export default function Page() {
+export default function JoinForm() {
+  const [formData, setFormData] = useState({
+    name: "",
+    class: "",
+    number: "",
+    major: "",
+    phone: "",
+    qq: "",
+    email: "",
+  })
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target
+    setFormData(prevData => ({
+      ...prevData,
+      [name]: value,
+    }))
+  }
+
+  const handleSubmit = async () => {
+    try {
+      await activeClient.freshman.postFreshmanAdd({
+        requestBody: formData,
+      })
+      alert("Form submitted successfully!")
+    }
+    catch (error) {
+      console.error("Error submitting form:", error)
+      alert("Failed to submit form.")
+    }
+  }
+
   return (
     <div>
-      <Button
-        onClick={() => {
-          // 提交表单
-          activeClient.freshman.postFreshmanAdd({
-            requestBody: {
-              class: "1",
-              name: "1",
-              phone: "1",
-              qq: "1",
-              email: "1",
-              number: "1",
-              major: "1",
-            },
-          })
-        }}
-      >
-        提交表单
-      </Button>
+      <Card>
+        <CardBody>
+          <Input
+            name="name"
+            placeholder="姓名"
+            value={formData.name}
+            onChange={handleChange}
+          />
+          <Input
+            name="class"
+            placeholder="班级"
+            value={formData.class}
+            onChange={handleChange}
+          />
+          <Input
+            name="number"
+            placeholder="学号"
+            value={formData.number}
+            onChange={handleChange}
+          />
+          <Input
+            name="major"
+            placeholder="专业"
+            value={formData.major}
+            onChange={handleChange}
+          />
+          <Input
+            name="phone"
+            placeholder="电话"
+            value={formData.phone}
+            onChange={handleChange}
+          />
+          <Input
+            name="qq"
+            placeholder="QQ"
+            value={formData.qq}
+            onChange={handleChange}
+          />
+          <Input
+            name="email"
+            placeholder="邮箱"
+            value={formData.email}
+            onChange={handleChange}
+          />
+        </CardBody>
+        <CardFooter>
+          <Button onClick={handleSubmit}>提交表单</Button>
+        </CardFooter>
+      </Card>
     </div>
   )
 }

src/pages/freshman/react/list.tsx

@@ -0,0 +1,65 @@
+import {
+  //   Button,
+  //   Input,
+  Card,
+  CardBody,
+  CardFooter,
+  //   PaginationItem,
+} from "@nextui-org/react"
+import {
+  activeClient,
+  type GetFreshmanListResponse,
+} from "../../../utils/client"
+// activeClient.freshman.getFreshmanList();
+import { useEffect, useState } from "react"
+// import { Pagination } from "@nextui-org/react";
+const FreshmanList = () => {
+  const [freshmen, setFreshmen] = useState<GetFreshmanListResponse>({
+    list: [],
+    total: 0,
+  })
+  const [currentPage, setCurrentPage] = useState(0)
+  useEffect(() => {
+    const fetchFreshmen = async () => {
+      const result = await activeClient.freshman.getFreshmanList({
+        page: currentPage,
+      })
+      setFreshmen(result)
+    }
+    fetchFreshmen()
+  }, [])
+  setTimeout(() => {
+    setCurrentPage(1)
+  }, 1000)
+  return (
+    <div>
+      <Card>
+        {JSON.stringify(freshmen)}
+        <CardBody>
+          {freshmen.list.map(freshman => (
+            <div key={freshman.number}>
+              <div>{freshman.name}</div>
+              <div>{freshman.number}</div>
+              <div>{freshman.major}</div>
+              <div>{freshman.class}</div>
+              <div>{freshman.email}</div>
+              <div>{freshman.phone}</div>
+              <div>{freshman.qq}</div>
+            </div>
+          ))}
+        </CardBody>
+        <CardFooter>
+          {/* <PaginationItem
+            // count={Math.ceil(freshmen.total / ITEMS_PER_PAGE)}
+            page={currentPage}
+            onChange={(page) => {
+              setCurrentPage(page);
+            }}
+          /> */}
+        </CardFooter>
+      </Card>
+    </div>
+  )
+}
+
+export default FreshmanList

src/utils/active/services.gen.ts

@@ -5,6 +5,7 @@ import type { BaseHttpRequest } from "./core/BaseHttpRequest";
 import type {
   PostFreshmanAddData,
   PostFreshmanAddResponse,
+  GetFreshmanListData,
   GetFreshmanListResponse,
 } from "./types.gen";
 
@@ -15,7 +16,7 @@ export class FreshmanService {
    * 添加新人
    * @param data The data for the request.
    * @param data.requestBody
-   * @returns unknown Returns the created task
+   * @returns unknown 返回创建结果
    * @throws ApiError
    */
   public postFreshmanAdd(
@@ -31,13 +32,23 @@ export class FreshmanService {
 
   /**
    * 获取新人列表
-   * @returns unknown Returns a list of tasks
+   * @param data The data for the request.
+   * @param data.page 页码
+   * @returns unknown 返回列表
    * @throws ApiError
    */
-  public getFreshmanList(): CancelablePromise<GetFreshmanListResponse> {
+  public getFreshmanList(
+    data: GetFreshmanListData = {},
+  ): CancelablePromise<GetFreshmanListResponse> {
     return this.httpRequest.request({
       method: "GET",
       url: "/api/freshman",
+      query: {
+        page: data.page,
+      },
+      errors: {
+        500: "服务器错误",
+      },
     });
   }
 }

src/utils/active/types.gen.ts

@@ -26,8 +26,14 @@ export type PostFreshmanAddResponse = {
   error?: string;
 };
 
+export type GetFreshmanListData = {
+  /**
+   * 页码
+   */
+  page?: number;
+};
+
 export type GetFreshmanListResponse = {
-  success: boolean;
   list: Array<{
     name: string;
     number: string;
@@ -37,4 +43,5 @@ export type GetFreshmanListResponse = {
     phone: string;
     qq: string;
   }>;
+  total: number;
 };

src/utils/client.ts

@@ -11,3 +11,4 @@ export const saturdayClient = createClient<saturdayPaths>({
 export const activeClient = new ApiClient({
   BASE: "/active",
 })
+export * from "./active/types.gen"