diff --git a/app/page.jsx b/app/page.jsx
index 5de8d45..eec91d9 100644
--- a/app/page.jsx
+++ b/app/page.jsx
@@ -1,5 +1,6 @@
 import Hero from "@/components/homes/home-15/Hero";
 import SwiperItems from "@/components/homes/home-15/SwiperItems";
+import CategoryItems from "@/components/homes/home-15/CategoryItems";
 import React from "react";
 import { getSiteSettings } from "@/utils/siteSettings";
 
@@ -35,7 +36,7 @@ export default function Page() {
             <Hero />
           </section>
           <section className="w-full xl:w-10/12 xl:mx-auto overflow-x-hidden">
-            <SwiperItems />
+            <CategoryItems />
           </section>
         </>
       </div>{" "}
diff --git a/components/homes/home-15/CategoryItems.jsx b/components/homes/home-15/CategoryItems.jsx
index 1b7010a..8bff923 100644
--- a/components/homes/home-15/CategoryItems.jsx
+++ b/components/homes/home-15/CategoryItems.jsx
@@ -1,172 +1,83 @@
-"use client";
-import { useEffect, useState } from "react";
-import { Swiper, SwiperSlide } from "swiper/react";
-import { Navigation, Pagination } from "swiper/modules";
 import Link from "next/link";
 import Image from "next/image";
-import axios from "axios";
+import { fetchComponentData, fetchListViewData } from "@/utils/data";
 
-export default function CategoryItems() {
-  const [data, setData] = useState(null);
-  const [posts, setPosts] = useState([]);
-  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 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: 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()}`);
-        const json = await res.json();
-        if (Array.isArray(json.data)) {
-          setPosts(json.data);
-        } else {
-          setPosts([]);
-        }
-      } catch (e) {
-        setPosts([]);
-      }
-      setLoading(false);
-    }
-    fetchPosts();
-  }, [data, pagetype, category, count]);
-
-  if (!data) return null;
-  // 渲染卡片内容
-  function renderCardImage(post, idx) {
-    // 多图轮播
-    if (Array.isArray(post.images) && post.images.length > 1) {
+// 渲染卡片内容
+function renderCardImage(post) {
+  // 视频
+  if (post.video_src || post.videoId) {
+    if (post.video_src && (post.video_src.endsWith('.mp4') || post.video_src.startsWith('/files/'))) {
       return (
-        <Swiper
-          className="swiper"
-          modules={[Navigation, Pagination]}
-          pagination={{ clickable: true, el: `.spdb${idx}` }}
-          navigation={{ prevEl: `.snbpb${idx}`, nextEl: `.snbnb${idx}` }}
-        >
-          {post.images.map((img, i) => (
-            <SwiperSlide key={i} className="swiper-slide">
-              <Image
-                className="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105 w-full h-auto"
-                alt={post.title || "image"}
-                src={img}
-                width={960}
-                height={600}
-              />
-            </SwiperSlide>
-          ))}
-        </Swiper>
+        <video controls className="w-full h-56 rounded-xl object-cover">
+          <source src={post.video_src} type="video/mp4" />
+          您的浏览器不支持视频播放。
+        </video>
       );
     }
-    // 视频
-    if (post.video_src || post.videoId) {
-      if (post.video_src && (post.video_src.endsWith('.mp4') || post.video_src.startsWith('/files/'))) {
-        return (
-          <video controls className="w-full h-56 rounded-xl object-cover">
-            <source src={post.video_src} type="video/mp4" />
-            您的浏览器不支持视频播放。
-          </video>
-        );
-      }
-      const vid = post.videoId || (post.video_src && post.video_src.includes('youtube') ? post.video_src.split('embed/')[1] : null);
-      if (vid) {
-        return (
-          <iframe
-            className="w-full h-56 rounded-xl"
-            src={`https://www.youtube.com/embed/${vid}`}
-            title="YouTube video"
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-            allowFullScreen
-          />
-        );
-      }
-    }
-    // 单图
-    const img = post.image || (Array.isArray(post.images) && post.images[0]);
-    if (img) {
+    const vid = post.videoId || (post.video_src && post.video_src.includes('youtube') ? post.video_src.split('embed/')[1] : null);
+    if (vid) {
       return (
-        <Image
-          className="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105 w-full h-auto"
-          alt={post.title || "image"}
-          src={img}
-          width={960}
-          height={600}
+        <iframe
+          className="w-full h-56 rounded-xl"
+          src={`https://www.youtube.com/embed/${vid}`}
+          title="YouTube video"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
         />
       );
     }
+  }
+  // 单图
+  const img = post.image || (Array.isArray(post.images) && post.images[0]);
+  if (img) {
+    return (
+      <Image
+        className="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105 w-full h-auto"
+        alt={post.title || "image"}
+        src={img}
+        width={960}
+        height={600}
+      />
+    );
+  }
+  return null;
+}
+
+function getSummary(text, maxLen = 58) {
+  if (!text) return "";
+  if (/[\u4e00-\u9fa5]/.test(text)) {
+    return text.length > maxLen ? text.slice(0, maxLen) + "..." : text;
+  }
+  if (text.length <= maxLen) return text;
+  let cut = text.slice(0, maxLen);
+  if (!/\s/.test(text[maxLen])) {
+    const lastSpace = cut.lastIndexOf(" ");
+    if (lastSpace > 0) cut = cut.slice(0, lastSpace);
+  }
+  return cut + "...";
+}
+
+export default async function CategoryItems() {
+  // 获取数据
+  const componentDataResult = await fetchComponentData("CategoryItems");
+  const data = componentDataResult.data;
+
+  let posts = [];
+  if (data) {
+    const { t1: pagetype, t2: category, t4: count } = data;
+    const postsResult = await fetchListViewData({ pagetype, category, count });
+    posts = postsResult.data || [];
+  }
+
+  if (!data) {
     return null;
   }
 
-  function getSummary(text, maxLen = 58) {
-    if (!text) return "";
-    // 中文：直接按字符截断
-    if (/[\u4e00-\u9fa5]/.test(text)) {
-      return text.length > maxLen ? text.slice(0, maxLen) + "..." : text;
-    }
-    // 英文：按字符截断，但不截断单词
-    if (text.length <= maxLen) return text;
-    let cut = text.slice(0, maxLen);
-    // 如果最后一个字符不是空格，向前找到最近的空格
-    if (!/\s/.test(text[maxLen])) {
-      const lastSpace = cut.lastIndexOf(" ");
-      if (lastSpace > 0) cut = cut.slice(0, lastSpace);
-    }
-    return cut + "...";
-  }
-
-  // 日期格式化函数，支持自定义是否显示时分秒
-  function formatDate(dateStr, options = {}) {
-    if (!dateStr) return "";
-    const d = new Date(dateStr);
-    if (isNaN(d.getTime())) return dateStr;
-    const { showTime = false } = options;
-    const yyyy = d.getFullYear();
-    const mm = String(d.getMonth() + 1).padStart(2, '0');
-    const dd = String(d.getDate()).padStart(2, '0');
-    let result = `${yyyy}-${mm}-${dd}`;
-    if (showTime) {
-      const hh = String(d.getHours()).padStart(2, '0');
-      const min = String(d.getMinutes()).padStart(2, '0');
-      const ss = String(d.getSeconds()).padStart(2, '0');
-      result += ` ${hh}:${min}:${ss}`;
-    }
-    return result;
-  }
+  // 从组件数据中提取字段
+  const { title, subtitle, t3: category_slug, t5: columns, button_text } = data;
 
   return (
     <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">
           {title && <h2 className="text-3xl font-bold mb-2">{title}</h2>}
@@ -174,18 +85,15 @@ export default function CategoryItems() {
         </div>
       )}
       <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 || 4} text-center py-12 text-gray-400`}>加载中...</div>
-        ) : posts.length === 0 ? (
+        {posts.length === 0 ? (
           <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">
               <div className="card">
-                {/* 图片/轮播/视频部分 */}
                 <figure className="card-img-top overlay overlay-1 hover-scale group">
                   <Link href={post.slug ? `/${category_slug}/${post.slug}` : "#"} className="block relative">
-                    {renderCardImage(post, idx)}
+                    {renderCardImage(post)}
                     <span className="bg"></span>
                     <figcaption className="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                       <h5 className="from-top !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">
@@ -194,17 +102,13 @@ export default function CategoryItems() {
                     </figcaption>
                   </Link>
                 </figure>
-                {/* 文字内容 */}
                 <div className="card-body flex-[1_1_auto] p-[40px] xl:!p-[2rem_2.5rem_1.25rem] lg:!p-[2rem_2.5rem_1.25rem] md:!p-[2rem_2.5rem_1.25rem] max-md:pb-4">
                   <div className="post-header !mb-[.9rem]">
                     <div className="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#1fc76f]">
-                    {post.additional_title}
+                      {post.additional_title}
                     </div>
                     <h2 className="post-title !mt-1 !leading-[1.35] !mb-0 text-base md:!text-[0.85rem]">
-                      <Link
-                        className="!text-[#333333] hover:!text-[#1fc76f]"
-                        href={post.slug ? `/${category_slug}/${post.slug}` : "#"}
-                      >
+                      <Link className="!text-[#333333] hover:!text-[#1fc76f]" href={post.slug ? `/${category_slug}/${post.slug}` : "#"}>
                         {post.title}
                       </Link>
                     </h2>
@@ -218,13 +122,12 @@ export default function CategoryItems() {
           ))
         )}
       </div>
-      {/* 底部更多按钮 */}
       {category_slug && (
         <div className="text-center mt-8">
           <a
             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"
-            >
+            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>