admin/www/app/components/section/layouts/LayoutVideoShowcase.vue

<script setup lang="ts">
import type { SectionBlock } from '~/types/site';

const props = defineProps<{ section: SectionBlock }>();

const { overline, title, subtitle, isDark, overlineStyle, titleStyle, bodyStyle } = useSectionContent(props.section);

// 判断是否为可嵌入的 iframe 视频（YouTube / Bilibili）
const isEmbed = computed(() => /youtube\.com|youtu\.be|bilibili\.com|player\.bilibili\.com/.test(props.section.video_url));
</script>

<template>
  <div class="section-container py-96px">
    <!-- 标题区 -->
    <div class="text-center max-w-640px mx-auto mb-48px">
      <p v-if="overline" class="text-14px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'" :style="overlineStyle">
        {{ overline }}
      </p>
      <h2 class="mt-12px text-3xl md:text-4xl font-bold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'" :style="titleStyle">
        {{ title }}
      </h2>
      <p v-if="subtitle" class="mt-16px text-base" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'" :style="bodyStyle">
        {{ subtitle }}
      </p>
    </div>

    <!-- 视频 -->
    <div class="max-w-960px mx-auto rounded-16px overflow-hidden shadow-xl bg-black aspect-16/9">
      <iframe
        v-if="isEmbed"
        :src="section.video_url"
        class="w-full h-full"
        frameborder="0"
        allowfullscreen
        scrolling="no"
      />
      <video
        v-else-if="section.video_url"
        :src="section.video_url"
        class="w-full h-full object-cover"
        controls
        playsinline
      />
    </div>
  </div>
</template>