feat: 将首页那些改为支持播放视频的和图片

src/pages/Discovery/components/ExploreCards/index.vue

@@ -5,7 +5,27 @@
         <view v-for="(item, index) in normalizedList" :key="getItemKey(item, index)" class="explore-card"
           :class="`is-${item.tone}`" hover-class="is-pressed" hover-stay-time="80"
           @tap="handleCardTap(item.raw, index)">
-          <image v-if="item.coverImage" class="explore-card-image" :src="item.coverImage" mode="aspectFill" />
+          <video
+            v-if="item.coverImage && isMp4Video(item.coverImage)"
+            class="explore-card-image"
+            :src="item.coverImage"
+            autoplay
+            loop
+            muted
+            :controls="false"
+            :show-center-play-btn="false"
+            :show-play-btn="false"
+            :show-fullscreen-btn="false"
+            :show-mute-btn="false"
+            :enable-progress-gesture="false"
+            object-fit="cover"
+          />
+          <image
+            v-else-if="item.coverImage"
+            class="explore-card-image"
+            :src="item.coverImage"
+            mode="aspectFill"
+          />
 
           <view class="explore-card-gradient" />
 
@@ -55,6 +75,12 @@ const normalizedList = computed(() =>
 
 const getItemKey = (item, index) => item.id ?? item.title ?? index;
 
+const isMp4Video = (url) => {
+  if (typeof url !== "string") return false;
+  const resourcePath = url.trim().split(/[?#]/)[0];
+  return resourcePath.toLowerCase().endsWith(".mp4");
+};
+
 const handleCardTap = (item, index) => {
   emit("didSelectItem", item, index);
 };

src/pages/Discovery/components/PanoramicHome/index.vue

@@ -80,7 +80,27 @@
             v-for="(card, cardIndex) in panoramaOtherCards"
             :key="card.homePageId || cardIndex"
           >
-            <image class="h-full w-full" :src="card.coverImageUrl" mode="aspectFill" />
+            <video
+              v-if="isMp4Video(card.coverImageUrl)"
+              class="h-full w-full"
+              :src="card.coverImageUrl"
+              autoplay
+              loop
+              muted
+              :controls="false"
+              :show-center-play-btn="false"
+              :show-play-btn="false"
+              :show-fullscreen-btn="false"
+              :show-mute-btn="false"
+              :enable-progress-gesture="false"
+              object-fit="cover"
+            />
+            <image
+              v-else
+              class="h-full w-full"
+              :src="card.coverImageUrl"
+              mode="aspectFill"
+            />
           </swiper-item>
         </swiper>
 
@@ -124,7 +144,27 @@
         hover-stay-time="80"
         @tap="handleCardTap(card)"
       >
-        <image class="h-full w-full" :src="card.coverImageUrl" mode="aspectFill" />
+        <video
+          v-if="isMp4Video(card.coverImageUrl)"
+          class="h-full w-full"
+          :src="card.coverImageUrl"
+          autoplay
+          loop
+          muted
+          :controls="false"
+          :show-center-play-btn="false"
+          :show-play-btn="false"
+          :show-fullscreen-btn="false"
+          :show-mute-btn="false"
+          :enable-progress-gesture="false"
+          object-fit="cover"
+        />
+        <image
+          v-else
+          class="h-full w-full"
+          :src="card.coverImageUrl"
+          mode="aspectFill"
+        />
 
         <view class="pointer-events-none absolute inset-0 bg-[linear-gradient(180deg,rgba(5,24,24,0.72)_0%,rgba(5,24,24,0.18)_46%,rgba(5,24,24,0.34)_100%)]" />
 
@@ -161,7 +201,9 @@ const activeOtherCard = computed(() => {
 });
 
 const isMp4Video = (url) => {
-  return typeof url === "string" && /\.mp4(?:[?#].*)?$/i.test(url.trim());
+  if (typeof url !== "string") return false;
+  const resourcePath = url.trim().split(/[?#]/)[0];
+  return resourcePath.toLowerCase().endsWith(".mp4");
 };
 
 const handleSwiperChange = (event) => {