feat: 视频组件

src/pages/ChatModule/AigcPhotoCard/index.vue

@@ -1,28 +1,38 @@
 <template>
-  <view
-    class="aigc-photo-card relative rounded-24 overflow-hidden w-full"
-    :class="{ 'is-disabled': disabled }"
-    @click="handleAction"
-  >
-    <image
-      class="aigc-photo-card__image block w-full"
-      :src="data.cover"
-      mode="aspectFill"
-    />
-    <view class="aigc-photo-card__shade"></view>
-
-    <view class="aigc-photo-card__play flex flex-items-center flex-justify-center rounded-full">
-      <view class="aigc-photo-card__triangle"></view>
-    </view>
-
-    <view class="aigc-photo-card__title color-white font-size-16 font-900">
-      {{ data.title }}
+  <view class="w-full bg-white border-box border-ff overflow-hidden rounded-20 flex flex-col">
+  <!-- 占位撑开 -->
+  <view class="w-vw"></view>
+  
+  <view class="aigc-photo-card relative rounded-24 overflow-hidden w-full"
+      :class="{ 'is-disabled': disabled, 'is-empty': !videoUrl }" @click="handleAction">
+      <video v-if="videoUrl" :id="videoId" class="aigc-photo-card__video block w-full" :src="videoUrl" :poster="poster"
+        :controls="!disabled" :show-center-play-btn="!disabled" :show-play-btn="!disabled"
+        :show-fullscreen-btn="!disabled" :enable-progress-gesture="!disabled"
+        :direction="fullscreenDirection" object-fit="cover" @click.stop @play="handlePlay"
+        @fullscreenchange="handleFullScreenChange" @error="handleError" />
+      <view
+        v-if="videoUrl && !disabled"
+        class="aigc-photo-card__fullscreen flex flex-items-center flex-justify-center color-white font-size-12"
+        @click.stop="requestFullScreen"
+      >
+        全屏
+      </view>
+      <view v-if="!videoUrl" class="aigc-photo-card__empty flex flex-items-center flex-justify-center color-white font-size-14">
+        视频地址为空
+      </view>
     </view>
   </view>
+  
 </template>
 
 <script setup>
+import { computed, getCurrentInstance } from "vue";
+
 const props = defineProps({
+  toolCall: {
+    type: Object,
+    default: () => ({}),
+  },
   data: {
     type: Object,
     default: () => ({}),
@@ -33,12 +43,75 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["select", "action"]);
+const emit = defineEmits(["select", "action", "play", "fullscreenchange", "error"]);
+const instance = getCurrentInstance();
+const videoId = `aigc-video-${Math.random().toString(36).slice(2, 10)}`;
+
+const cardData = computed(() => ({
+  ...props.data,
+  ...(props.toolCall?.componentNameParams || {}),
+}));
+
+const videoUrl = computed(
+  () => cardData.value.videoUrl || cardData.value.url || cardData.value.src || ""
+);
+
+const poster = computed(
+  () => cardData.value.poster || cardData.value.cover || cardData.value.coverUrl || ""
+);
+
+const title = computed(() => cardData.value.title || cardData.value.name || "");
+
+const fullscreenDirection = computed(
+  () => cardData.value.fullscreenDirection ?? cardData.value.direction ?? 90
+);
+
+const eventPayload = computed(() => {
+  if (props.toolCall && Object.keys(props.toolCall).length > 0) {
+    return {
+      ...props.toolCall,
+      componentNameParams: cardData.value,
+    };
+  }
+  return cardData.value;
+});
 
 const handleAction = () => {
   if (props.disabled) return;
-  emit("select", props.data);
-  emit("action", props.data);
+  emit("select", eventPayload.value);
+  emit("action", eventPayload.value);
+};
+
+const handlePlay = () => {
+  if (props.disabled) return;
+  emit("play", eventPayload.value);
+};
+
+const requestFullScreen = () => {
+  if (!videoUrl.value || props.disabled) return;
+
+  const videoContext = uni.createVideoContext(
+    videoId,
+    instance?.proxy || instance
+  );
+  videoContext?.play?.();
+  videoContext?.requestFullScreen?.({
+    direction: Number(fullscreenDirection.value),
+  });
+};
+
+const handleFullScreenChange = (event) => {
+  emit("fullscreenchange", {
+    event,
+    data: eventPayload.value,
+  });
+};
+
+const handleError = (event) => {
+  emit("error", {
+    event,
+    data: eventPayload.value,
+  });
 };
 </script>