feat(app): 添加招聘列表页面- 实现了一个新的招聘列表页面，包含面包屑导航、职位列表和分页功能

- 使用 React、Ant Design 和 Next.js 构建
- 集成了服务器请求，用于获取招聘信息
-优化了页面样式和布局，适应不同屏幕尺寸

src/app/about/recruitList/page.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+import React, {useEffect, useState} from "react";
+import {Breadcrumb, Pagination, Spin} from "antd";
+import Image from "next/image";
+import {serverPost} from "@/utils/request";
+import Link from "next/link";
+
+export default function RecruitmentListPage() {
+  const [data, setData] = useState<Page<RecruitmentInfo>>();
+  const [loading, setLoading] = useState(false);
+  const [pageNum, setPageNum] = useState(1);
+  const pageSize = 4;
+
+  const fetchData = async (page: number) => {
+    setLoading(true);
+    try {
+      const res = await serverPost<Page<RecruitmentInfo>, { pageNum: number; pageSize: number }>(
+        "webSite/getRecruitmentInfoByPage",
+        {pageNum: page, pageSize}
+      );
+      setData(res.data);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchData(pageNum);
+  }, [pageNum]);
+
+  return (
+    <div className="w-full bg-[url('/assets/about/recruitList/1.png')] bg-cover min-h-screen">
+      <div className="w-3/5 mx-auto">
+        {/* 面包屑 */}
+        <div className="pt-10 ml-20 flex gap-2">
+          <span className="text-sm">您当前的所在位置:</span>
+          <Breadcrumb
+            separator=">"
+            items={[
+              {title: "关于我们", href: "/about"},
+              {title: "招聘列表"},
+            ]}
+          />
+        </div>
+
+        {/* 内容 */}
+        <div className="p-10">
+          {loading ? (
+            <div className="flex justify-center py-20">
+              <Spin size="large"/>
+            </div>
+          ) : (
+            <>
+              {data?.records?.map((item) => (
+                <div
+                  key={item.id}
+                  className="mb-10 bg-[url('/assets/about/recruitList/2.png')] bg-[length:100.5%_106%] rounded-4xl shadow-lg"
+                >
+                  <div className="text-xl pt-1.5 pl-4 text-white font-bold">
+                    {item.jobOpenings}
+                  </div>
+
+                  <div className="flex flex-col lg:flex-row p-8 gap-6">
+                    {/* 左侧内容 */}
+                    <div className="flex-1">
+                      <div className="grid grid-cols-2 gap-4 text-sm font-bold">
+                        <div className="flex gap-2 items-center">
+                          <Image
+                            className="w-4 h-4"
+                            src={"/assets/about/recruitList/3.png"}
+                            alt="图标"
+                            width={16}
+                            height={16}
+                          />
+                          <span>工作地址: {item.workLocation}</span>
+                        </div>
+                        <div className="flex gap-2 items-center">
+                          <Image
+                            className="w-4 h-4"
+                            src={"/assets/about/recruitList/3.png"}
+                            alt="图标"
+                            width={16}
+                            height={16}
+                          />
+                          <span>招聘人数: {item.numberRecruits}</span>
+                        </div>
+                        <div className="flex gap-2 items-center">
+                          <Image
+                            className="w-4 h-4"
+                            src={"/assets/about/recruitList/3.png"}
+                            alt="图标"
+                            width={16}
+                            height={16}
+                          />
+                          <span>薪资: {item.salary}</span>
+                        </div>
+                        <div className="flex gap-2 items-center">
+                          <Image
+                            className="w-4 h-4"
+                            src={"/assets/about/recruitList/3.png"}
+                            alt="图标"
+                            width={16}
+                            height={16}
+                          />
+                          <span>联系人: {item.contact}</span>
+                        </div>
+                      </div>
+
+                      <div className="mt-4 flex gap-2 items-start">
+                        <Image
+                          className="w-5 h-5 mt-1"
+                          src={"/assets/about/recruitList/3.png"}
+                          alt="图标"
+                          width={20}
+                          height={20}
+                        />
+                        <p className="text-sm w-4/5 line-clamp-6">
+                          职位要求: {item.jobRequirements}
+                        </p>
+                      </div>
+                    </div>
+
+                    {/* 右侧按钮 */}
+                    <div className="flex justify-center items-center">
+                      <Link href={`/about/recruitList/${item.id}`}>
+                        <button
+                          className="cursor-pointer mt-4 lg:mt-20 w-40 bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-full transition duration-300 ease-in-out transform hover:scale-105">
+                          了解详情 &gt;&gt;
+                        </button>
+                      </Link>
+                    </div>
+                  </div>
+                </div>
+              ))}
+
+              {/* 分页器 */}
+              <div className="flex justify-center py-6">
+                <Pagination
+                  current={pageNum}
+                  pageSize={pageSize}
+                  total={data?.total || 0}
+                  onChange={(page) => setPageNum(page)}
+                  showSizeChanger={false}
+                />
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}