CategoryItems组件改成动态版从后端读取参数

app/page.jsx

@@ -4,6 +4,7 @@ import Features from "@/components/homes/home-15/Features";
 import Hero from "@/components/homes/home-15/Hero";
 import PageItems from "@/components/homes/home-15/PageItems";
 import CategoryItems from "@/components/homes/home-15/CategoryItems";
+import SwiperItems from "@/components/homes/home-15/SwiperItems";
 import React from "react";
 import { getSiteSettings } from "@/utlis/siteSettings";
 
@@ -41,15 +42,7 @@ export default function Page() {
           </section>
           <section className="wrapper !bg-[#ffffff] ">
             <div className="w-full">
-            <CategoryItems 
+            <SwiperItems />
-            pagetype="Jsite Project" 
-            category="案例" 
-            category_slug="case" 
-            count={8} 
-            columns={4} 
-            title="应用场景" 
-            subtitle="Jingrow 系统行业应用场景及案例"
-             />
             </div>
           </section>
         </>

components/footers/Footer.jsx

@@ -14,7 +14,7 @@ export default function Footer15() {
 
   return (
     <footer className="bg-[#fefefe] !text-[#333333]">
-      <div className="container pt-20 pb-7">
+      <div className="container pt-50 pb-7">
         <div className="w-full flex flex-col md:flex-row justify-center items-stretch gap-8 md:gap-10 xl:gap-16">
           {/* 产品中心 */}
           <div className="flex-1 min-w-[220px] max-w-xs  flex flex-col">

components/homes/home-15/CategoryItems.jsx

@@ -4,17 +4,48 @@ import { Swiper, SwiperSlide } from "swiper/react";
 import { Navigation, Pagination } from "swiper/modules";
 import Link from "next/link";
 import Image from "next/image";
-import PropTypes from "prop-types";
+import axios from "axios";
 
-export default function CategoryItems({ pagetype = "", category = "", category_slug = "" , count = 8, columns = 4, title = "", subtitle = "" }) {
+export default function CategoryItems() {
+  const [data, setData] = useState(null);
   const [posts, setPosts] = useState([]);
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  // 统一字段映射，便于团队查阅和维护
+  const title = data?.title;
+  const subtitle = data?.subtitle;
+  const pagetype = data?.t1;
+  const category = data?.t2;
+  const category_slug = data?.t3;
+  const count = data?.t4;
+  const columns = data?.t5;
+  const button_text = data?.button_text;
 
   useEffect(() => {
-    async function fetchData() {
+    async function fetchComponentData() {
+      try {
+        setLoading(true);
+        const res = await axios.get("/api/get-component-data", {
+          params: { component_name: "CategoryItems" },
+        });
+        setData(res.data.data);
+      } catch (err) {
+        setError("获取CategoryItems数据失败");
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchComponentData();
+  }, []);
+
+  useEffect(() => {
+    async function fetchPosts() {
+      if (!data) return;
       setLoading(true);
       try {
-        const params = new URLSearchParams({ pagetype });
+        // 使用统一映射变量
+        const params = new URLSearchParams({ pagetype: pagetype || "" });
         if (category) params.append("category", category);
         if (count !== undefined && count !== null) params.append("count", count);
         const res = await fetch(`/api/get-listview-data?${params.toString()}`);
@@ -29,9 +60,10 @@ export default function CategoryItems({ pagetype = "", category = "", category_s
       }
       setLoading(false);
     }
-    fetchData();
+    fetchPosts();
-  }, [pagetype, category, count]);
+  }, [data, pagetype, category, count]);
 
+  if (!data) return null;
   // 渲染卡片内容
   function renderCardImage(post, idx) {
     // 多图轮播
@@ -133,7 +165,7 @@ export default function CategoryItems({ pagetype = "", category = "", category_s
   }
 
   return (
-    <div className="xl:w-10/12 lg:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto my-[300px]">
+    <div className="xl:w-10/12 lg:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
       {/* 新增模块标题和副标题显示 */}
       {(title || subtitle) && (
         <div className="relative z-20 text-center mb-10 select-text">
@@ -141,11 +173,11 @@ export default function CategoryItems({ pagetype = "", category = "", category_s
           {subtitle && <p className="text-lg text-gray-500">{subtitle}</p>}
         </div>
       )}
-      <div className={`blog classic-view grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-${columns} gap-6`}>
+      <div className={`blog classic-view grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-${columns || 4} gap-6`}>
         {loading ? (
-          <div className={`col-span-${columns} text-center py-12 text-gray-400`}>加载中...</div>
+          <div className={`col-span-${columns || 4} text-center py-12 text-gray-400`}>加载中...</div>
         ) : posts.length === 0 ? (
-          <div className={`col-span-${columns} text-center py-12 text-gray-400`}>暂无数据</div>
+          <div className={`col-span-${columns || 4} text-center py-12 text-gray-400`}>暂无数据</div>
         ) : (
           posts.map((post, idx) => (
             <article key={post.slug || post.id || idx} className="post !mb-8">
@@ -193,23 +225,10 @@ export default function CategoryItems({ pagetype = "", category = "", category_s
             href={`/${category_slug}`}
             className="btn btn-lg btn-fuchsia !text-white !bg-[#1A1A1A]  hover:text-white hover:bg-[#1A1A1A] hover:!border-[#1A1A1A] active:text-white active:bg-[#1A1A1A] active:border-[#1A1A1A] disabled:text-white disabled:bg-[#1A1A1A] disabled:border-[#1A1A1A] !rounded-[0.8rem] mx-1"
             >
-            更多
+            {button_text || "更多"}
           </a>
         </div>
       )}
     </div>
   );
 }
-
-CategoryItems.propTypes = {
-  pagetype: PropTypes.string,
-  category: PropTypes.string,
-  count: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number
-  ]),
-  columns: PropTypes.number,
-  category_slug: PropTypes.string,
-  title: PropTypes.string,
-  subtitle: PropTypes.string,
-};

components/homes/home-15/Hero.jsx

@@ -41,7 +41,7 @@ export default function Hero() {
 
 
   return (
-    <div className="container pt-36 xl:pt-[12.5rem] lg:pt-[12.5rem] md:pt-[12.5rem] !text-center !relative">
+    <div className="container pt-36 xl:py-[12.5rem] lg:py-[12.5rem] md:py-[12.5rem] !text-center !relative">
       <div
         className="absolute"
         style={{