feat(template-card): add media placeholder and smooth video fade-in

add gradient background media placeholder for empty states
update video to use 0.18s ease opacity fade-in transition
add videoReady state to track when video is ready to display
adjust z-indexes for correct media layer stacking
fix video rendering condition and add state reset watchers
update template media container background color

src/pages-aigc/home/components/TemplateCard/index.vue

@@ -4,10 +4,12 @@
     :class="{ 'is-active': active }"
   >
     <view class="template-media">
+      <view class="template-media-placeholder" />
       <image v-if="templatePosterUrl" class="template-image" :src="templatePosterUrl" mode="aspectFill" />
       <video
-        v-else-if="templateVideoUrl && playing && !videoLoadFailed"
+        v-if="templateVideoUrl && playing && !videoLoadFailed"
         class="template-video"
+        :class="{ 'is-ready': videoReady }"
         :src="templateVideoUrl"
         autoplay
         muted
@@ -18,6 +20,8 @@
         :show-fullscreen-btn="false"
         :enable-progress-gesture="false"
         object-fit="cover"
+        @play="handleVideoReady"
+        @timeupdate="handleVideoReady"
         @error="handleVideoError"
       />
       <view class="template-media-shade" />
@@ -57,6 +61,7 @@ const emit = defineEmits(["select"]);
 
 const VIDEO_EXT_REGEXP = /\.(mp4|mov|webm|m4v)(?:[?#].*)?$/i;
 const videoLoadFailed = ref(false);
+const videoReady = ref(false);
 
 const templateMediaUrl = computed(() => {
   return props.template.templateContentUrl || props.template.coverPhotoUrl || "";
@@ -75,13 +80,26 @@ const templatePosterUrl = computed(() => {
   return templateMediaUrl.value;
 });
 
+const handleVideoReady = () => {
+  videoReady.value = true;
+};
+
 const handleVideoError = () => {
+  videoReady.value = false;
   videoLoadFailed.value = true;
 };
 
 watch(templateVideoUrl, () => {
+  videoReady.value = false;
   videoLoadFailed.value = false;
 });
+
+watch(() => props.playing, (playing) => {
+  videoReady.value = false;
+  if (playing) {
+    videoLoadFailed.value = false;
+  }
+});
 </script>
 
 <style scoped lang="scss">