From 75d4081102196b314ffd36480f3a2e4fe4f866b4 Mon Sep 17 00:00:00 2001
From: leiyuee <lye15671582681@163.com>
Date: Thu, 23 Jul 2026 18:37:04 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E5=A4=8D=20=E7=B2=BE?=
 =?UTF-8?q?=E9=80=89=E6=8E=A8=E8=8D=90=20PC=E7=AB=AF=E5=B1=95=E5=BC=80?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ExploreFeatured/ExploreFeatured.tsx       | 84 ++++++++++++++-----
 1 file changed, 61 insertions(+), 23 deletions(-)

diff --git a/src/pages/Explore/ExploreFeatured/ExploreFeatured.tsx b/src/pages/Explore/ExploreFeatured/ExploreFeatured.tsx
index 078c5df..f1703b2 100644
--- a/src/pages/Explore/ExploreFeatured/ExploreFeatured.tsx
+++ b/src/pages/Explore/ExploreFeatured/ExploreFeatured.tsx
@@ -21,6 +21,7 @@ import "./ExploreFeatured.scss";
 const FEATURED_IMAGE_SUB_TYPE = 103;
 const FEATURED_VIDEO_SUB_TYPE = 202;
 const DEFAULT_ACTIVE_FEATURED_INDEX = 1;
+const FEATURED_CAROUSEL_MEDIA_QUERY = "(max-width: 720px)";
 
 export interface RecommendBannerItem {
   id?: number;
@@ -41,6 +42,34 @@ type AppDownloadDialogState = {
 
 type FeaturedCardInteractionMode = "grid" | "carousel";
 
+function getIsFeaturedCarouselEnabled(): boolean {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return false;
+  }
+
+  return window.matchMedia(FEATURED_CAROUSEL_MEDIA_QUERY).matches;
+}
+
+function useIsFeaturedCarouselEnabled(): boolean {
+  const [isEnabled, setIsEnabled] = useState(getIsFeaturedCarouselEnabled);
+
+  useEffect(() => {
+    const mediaQueryList = window.matchMedia(FEATURED_CAROUSEL_MEDIA_QUERY);
+    const sync = () => {
+      setIsEnabled(mediaQueryList.matches);
+    };
+
+    sync();
+    mediaQueryList.addEventListener("change", sync);
+
+    return () => {
+      mediaQueryList.removeEventListener("change", sync);
+    };
+  }, []);
+
+  return isEnabled;
+}
+
 function normalizeBannerUrlList(urlList?: string[]) {
   if (!Array.isArray(urlList)) return [];
   return [...new Set(urlList.map((item) => item.trim()).filter(Boolean))];
@@ -84,6 +113,7 @@ export default function ExploreFeatured() {
   const requestApplyMedia = useGlobalPromptImageStore((s) => s.requestApplyMedia);
   const requestComposerExpand = useComposerStore((s) => s.requestComposerExpand);
   const isSkeletonPreviewing = useExploreSkeletonPreview();
+  const isFeaturedCarouselEnabled = useIsFeaturedCarouselEnabled();
   const featuredSwiperRef = useRef<SwiperInstance | null>(null);
 
   const [recommendBannerList, setRecommendBannerList] = useState<RecommendBannerItem[]>([]);
@@ -91,6 +121,12 @@ export default function ExploreFeatured() {
   const [activeFeaturedIndex, setActiveFeaturedIndex] = useState(DEFAULT_ACTIVE_FEATURED_INDEX);
   const [appDownloadDialog, setAppDownloadDialog] = useState<AppDownloadDialogState | null>(null);
 
+  useEffect(() => {
+    if (!isFeaturedCarouselEnabled) {
+      featuredSwiperRef.current = null;
+    }
+  }, [isFeaturedCarouselEnabled]);
+
   useEffect(() => {
     let isActive = true;
 
@@ -175,7 +211,7 @@ export default function ExploreFeatured() {
   );
 
   const renderFeaturedCard = (config: (typeof EXPLORE_FEATURED_ITEMS)[number], index: number, mode: FeaturedCardInteractionMode) => {
-    const banner = recommendBannerList[index];
+    const banner = index < recommendBannerList.length ? recommendBannerList[index] : undefined;
     const urlList = normalizeBannerUrlList(banner?.urlList);
     const collapsedCover = getBannerCover(banner);
     const expandedCover = urlList[0] ?? collapsedCover;
@@ -236,28 +272,30 @@ export default function ExploreFeatured() {
         <>
           <div className="explorePage__featuredGrid">{EXPLORE_FEATURED_ITEMS.map((config, index) => renderFeaturedCard(config, index, "grid"))}</div>
 
-          <Swiper
-            className="explorePage__featuredCarousel"
-            modules={[EffectCoverflow]}
-            effect="coverflow"
-            centeredSlides={true}
-            slidesPerView="auto"
-            initialSlide={DEFAULT_ACTIVE_FEATURED_INDEX}
-            loop={EXPLORE_FEATURED_ITEMS.length > 3}
-            coverflowEffect={{ rotate: 0, stretch: -28, depth: 60, modifier: 1, slideShadows: false }}
-            onSwiper={(swiper) => {
-              featuredSwiperRef.current = swiper;
-            }}
-            onSlideChange={(swiper) => {
-              setActiveFeaturedIndex(swiper.realIndex);
-            }}
-          >
-            {EXPLORE_FEATURED_ITEMS.map((config, index) => (
-              <SwiperSlide className="explorePage__featuredCarouselSlide" key={config.id}>
-                {renderFeaturedCard(config, index, "carousel")}
-              </SwiperSlide>
-            ))}
-          </Swiper>
+          {isFeaturedCarouselEnabled ? (
+            <Swiper
+              className="explorePage__featuredCarousel"
+              modules={[EffectCoverflow]}
+              effect="coverflow"
+              centeredSlides={true}
+              slidesPerView="auto"
+              initialSlide={activeFeaturedIndex}
+              loop={EXPLORE_FEATURED_ITEMS.length > 3}
+              coverflowEffect={{ rotate: 0, stretch: -28, depth: 60, modifier: 1, slideShadows: false }}
+              onSwiper={(swiper) => {
+                featuredSwiperRef.current = swiper;
+              }}
+              onSlideChange={(swiper) => {
+                setActiveFeaturedIndex(swiper.realIndex);
+              }}
+            >
+              {EXPLORE_FEATURED_ITEMS.map((config, index) => (
+                <SwiperSlide className="explorePage__featuredCarouselSlide" key={config.id}>
+                  {renderFeaturedCard(config, index, "carousel")}
+                </SwiperSlide>
+              ))}
+            </Swiper>
+          ) : null}
         </>
       )}