feat(aigc): add video template display support

add video media detection and rendering in TemplateCard and TemplateVersionHero components
update scss styles to support both image and video media elements
update sample template data to use video covers and adjust template information
comment out unused deprecated culture postcard template entry

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

@@ -8,7 +8,19 @@
     :style="{ '--memory-accent': template.accent || '#0f7069' }"
   >
     <view class="template-media">
-      <image class="template-image" :src="template.cover" mode="aspectFill" />
+      <video
+        v-if="isVideoTemplate"
+        class="template-video"
+        :src="template.cover"
+        autoplay
+        muted
+        loop
+        :controls="false"
+        :show-play-btn="false"
+        :show-center-play-btn="false"
+        object-fit="cover"
+      />
+      <image v-else class="template-image" :src="template.cover" mode="aspectFill" />
       <view class="template-media-shade" />
     </view>
 
@@ -25,7 +37,9 @@
 </template>
 
 <script setup>
-defineProps({
+import { computed } from "vue";
+
+const props = defineProps({
   template: {
     type: Object,
     default: () => ({}),
@@ -37,6 +51,15 @@ defineProps({
 });
 
 const emit = defineEmits(["select"]);
+
+const VIDEO_EXT_REGEXP = /\.(mp4|mov|webm|m4v)(\?.*)?$/i;
+
+const isVideoTemplate = computed(() => {
+  const mediaType = props.template.type || props.template.mediaType;
+  if (mediaType === "video") return true;
+
+  return VIDEO_EXT_REGEXP.test(props.template.cover || "");
+});
 </script>
 
 <style scoped lang="scss">

src/pages-aigc/home/components/TemplateCard/styles/index.scss

@@ -39,7 +39,8 @@
   background: var(--memory-accent);
 }
 
-.template-image {
+.template-image,
+.template-video {
   width: 100%;
   height: 100%;
   display: block;

src/pages-aigc/home/data/templates.js

@@ -12,37 +12,37 @@ export const aigcTemplates = [
   },
   {
     id: "bridge-memory",
-    title: "小七孔古桥留影",
-    desc: "把古桥与湖光做成专属旅行大片",
+    title: "秘境探险时光",
+    desc: "在鸳鸯湖划船时留下美好回忆",
     note: "图片版100积分 · 动效视频版200积分/5秒内",
     badge: "同源双版本",
     buttonText: "选这个模板",
-    cover: "https://oss.nianxx.cn/mp/static/xiaoqi/card-bridge.png",
+    cover: "https://oss.nianxx.cn/config/2f642480fdd79f40a07a56c79317a77c.mp4",
     tone: "emerald",
     accent: "#0f7069",
   },
   {
     id: "waterfall-story",
-    title: "翠谷瀑布旅拍",
-    desc: "适合清爽夏日氛围的动态内容",
+    title: "卧龙潭粘土拍立得",
+    desc: "用粘土数字形象，从画框中走向屏幕前",
     note: "图片版100积分 · 动效视频版200积分/5秒内",
     badge: "同源双版本",
     buttonText: "选这个模板",
-    cover: "https://oss.nianxx.cn/mp/static/xiaoqi/card-waterfall.png",
+    cover: "https://oss.nianxx.cn/config/70cef08f598ac30bf42c34ed31dda9bd.mp4",
     tone: "aqua",
     accent: "#155e75",
   },
-  {
-    id: "culture-postcard",
-    title: "瑶山古寨印象",
-    desc: "把民族风情做成旅行收藏卡",
-    note: "图片版100积分 · 动效视频版200积分/5秒内",
-    badge: "同源双版本",
-    buttonText: "选这个模板",
-    cover: "https://oss.nianxx.cn/mp/static/xiaoqi/card-culture-1.png",
-    tone: "forest",
-    accent: "#36563d",
-  },
+  // {
+  //   id: "culture-postcard",
+  //   title: "瑶山古寨印象",
+  //   desc: "把民族风情做成旅行收藏卡",
+  //   note: "图片版100积分 · 动效视频版200积分/5秒内",
+  //   badge: "同源双版本",
+  //   buttonText: "选这个模板",
+  //   cover: "https://oss.nianxx.cn/mp/static/xiaoqi/card-culture-1.png",
+  //   tone: "forest",
+  //   accent: "#36563d",
+  // },
 ];
 
 export const aigcFlowSteps = ["选模板", "传素材", "添积分", "出结果"];

src/pages-aigc/useTemplate/components/TemplateVersionHero/index.vue

@@ -4,7 +4,19 @@
     :class="`is-${variant}`"
     :style="{ '--template-accent': template.accent || '#0a4d46' }"
   >
-    <image class="template-version-image" :src="template.cover" mode="aspectFill" />
+    <video
+      v-if="isVideoTemplate"
+      class="template-version-video"
+      :src="template.cover"
+      autoplay
+      muted
+      loop
+      :controls="false"
+      :show-play-btn="false"
+      :show-center-play-btn="false"
+      object-fit="cover"
+    />
+    <image v-else class="template-version-image" :src="template.cover" mode="aspectFill" />
     <view class="template-version-shade" />
 
     <view class="template-version-copy">
@@ -16,7 +28,9 @@
 </template>
 
 <script setup>
-defineProps({
+import { computed } from "vue";
+
+const props = defineProps({
   template: {
     type: Object,
     default: () => ({}),
@@ -26,6 +40,15 @@ defineProps({
     default: "default",
   },
 });
+
+const VIDEO_EXT_REGEXP = /\.(mp4|mov|webm|m4v)(\?.*)?$/i;
+
+const isVideoTemplate = computed(() => {
+  const mediaType = props.template.type || props.template.mediaType;
+  if (mediaType === "video") return true;
+
+  return VIDEO_EXT_REGEXP.test(props.template.cover || "");
+});
 </script>
 
 <style scoped lang="scss">

src/pages-aigc/useTemplate/components/TemplateVersionHero/styles/index.scss

@@ -14,7 +14,8 @@
   box-shadow: 0 12px 24px rgba(15, 29, 37, 0.08);
 }
 
-.template-version-image {
+.template-version-image,
+.template-version-video {
   position: absolute;
   top: 0;
   right: 0;