From 7db07273af4dd4885ed78781fba87b1d98c9393a Mon Sep 17 00:00:00 2001
From: duanshuwen <duanshuwen@gogpay.cn>
Date: Tue, 7 Jul 2026 20:00:36 +0800
Subject: [PATCH] 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
---
 .../home/components/TemplateCard/index.vue    | 27 +++++++++++++--
 .../components/TemplateCard/styles/index.scss |  3 +-
 src/pages-aigc/home/data/templates.js         | 34 +++++++++----------
 .../components/TemplateVersionHero/index.vue  | 27 +++++++++++++--
 .../TemplateVersionHero/styles/index.scss     |  3 +-
 5 files changed, 71 insertions(+), 23 deletions(-)

diff --git a/src/pages-aigc/home/components/TemplateCard/index.vue b/src/pages-aigc/home/components/TemplateCard/index.vue
index 2adb4f4..3cb389f 100644
--- a/src/pages-aigc/home/components/TemplateCard/index.vue
+++ b/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">
diff --git a/src/pages-aigc/home/components/TemplateCard/styles/index.scss b/src/pages-aigc/home/components/TemplateCard/styles/index.scss
index 560f500..54c9bef 100644
--- a/src/pages-aigc/home/components/TemplateCard/styles/index.scss
+++ b/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;
diff --git a/src/pages-aigc/home/data/templates.js b/src/pages-aigc/home/data/templates.js
index e734f27..ecb077c 100644
--- a/src/pages-aigc/home/data/templates.js
+++ b/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 = ["选模板", "传素材", "添积分", "出结果"];
diff --git a/src/pages-aigc/useTemplate/components/TemplateVersionHero/index.vue b/src/pages-aigc/useTemplate/components/TemplateVersionHero/index.vue
index a90e4e0..2755244 100644
--- a/src/pages-aigc/useTemplate/components/TemplateVersionHero/index.vue
+++ b/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">
diff --git a/src/pages-aigc/useTemplate/components/TemplateVersionHero/styles/index.scss b/src/pages-aigc/useTemplate/components/TemplateVersionHero/styles/index.scss
index 5c1b878..602c30c 100644
--- a/src/pages-aigc/useTemplate/components/TemplateVersionHero/styles/index.scss
+++ b/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;