Features组件改版为多图，fetchComponentData默认开启下载文件到本地功能

components/homes/home-15/Features/UI.jsx

@@ -7,6 +7,7 @@ export default function UI({ data }) {
 
   // 主图
   const mainImage = data.image || "/assets/img/photos/about2.jpg";
+  const secondImage = data.image_1 || "/assets/img/photos/about3.jpg";
   // 标题/副标题/描述
   const title = data.title || "";
   const subtitle = data.subtitle || "";
@@ -17,9 +18,47 @@ export default function UI({ data }) {
   const buttonLink = data.button_link || "#";
 
   return (
-    <div className="flex flex-wrap items-center justify-between mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px]">
+    <div className="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] !mb-[4.5rem] xl:!mb-[7rem] lg:!mb-[7rem] md:!mb-[7rem] items-center">
+      {/* 右侧图片区 - 错开叠放 */}
+      <div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full !relative xl:!order-2 lg:!order-2">
+        {/* 装饰性背景点 */}
+        <div
+          className="shape bg-dot primary bg-[radial-gradient(#3f78e0_2px,transparent_2.5px)] rellax !w-[6rem] !h-[10rem] absolute z-[1] opacity-50"
+          data-rellax-speed={1}
+          style={{ top: "3rem", left: "5.5rem" }}
+        />
+        {/* 错开叠放的图片容器 */}
+        <div className="flex flex-wrap !relative overlap-grid-2">
+          {/* 第一张图片 - 较大，位置偏右 */}
+          <div className="item xl:w-[70%] xl:z-[3] xl:ml-[30%] xl:!mt-0 lg:w-[70%] lg:z-[3] lg:ml-[30%] lg:!mt-0 md:w-[70%] md:z-[3] md:ml-[30%] md:!mt-0">
+            <figure className="!rounded-[.4rem] shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] relative">
+              <Image
+                className="!rounded-[.4rem]"
+                src={mainImage}
+                alt="image"
+                width={450}
+                height={450}
+                style={{ objectFit: "cover" }}
+              />
+            </figure>
+          </div>
+          {/* 第二张图片 - 较小，位置偏左，覆盖第一张图片 */}
+          <div className="item xl:w-[55%] xl:!mt-[-45%] xl:z-[4] xl:ml-0 lg:w-[55%] lg:!mt-[-45%] lg:z-[4] lg:ml-0 md:w-[55%] md:!mt-[-45%] md:z-[4] md:ml-0">
+            <figure className="!rounded-[.4rem] shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] relative">
+              <Image
+                className="!rounded-[.4rem]"
+                src={secondImage}
+                alt="image"
+                width={450}
+                height={450}
+                style={{ objectFit: "cover" }}
+              />
+            </figure>
+          </div>
+        </div>
+      </div>
       {/* 左侧内容区 */}
-      <div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full flex flex-col justify-center">
+      <div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
         {htmlCode ? (
           <div
             style={{ display: "inline-block", width: "2.6rem", height: "2.6rem", marginBottom: "1rem" }}
@@ -50,19 +89,6 @@ export default function UI({ data }) {
           </a>
         </div>
       </div>
-      {/* 右侧图片区 */}
-      <div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full flex justify-center">
-        <figure className="!rounded-[.4rem] shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] relative">
-          <Image
-            className="!rounded-[.4rem]"
-            src={mainImage}
-            alt="image"
-            width={550}
-            height={400}
-            style={{ objectFit: "cover", maxWidth: "100%", height: "auto" }}
-          />
-        </figure>
-      </div>
     </div>
   );
 }

utils/data.js

@@ -185,7 +185,7 @@ export async function getAllSlugs() {
   }
 }
 
-export async function fetchComponentData(componentName) {
+export async function fetchComponentData(componentName, downloadFiles = true) {
   try {
     const res = await axios.get(
       `${BACKEND_SERVER_URL}/api/action/jsite.api.v1.get_component_data`,
@@ -193,7 +193,14 @@ export async function fetchComponentData(componentName) {
         params: { component_name: componentName, site_name: BACKEND_SITE_NAME },
       }
     );
-    return { data: res.data.message?.data || null };
+    
+    let data = res.data.message?.data || null;
+    
+    if (data && downloadFiles) {
+      data = await processDataItem(data, downloadFiles);
+    }
+    
+    return { data };
   } catch (error) {
     if (
       error.response &&