首页实现

提示词

ts

你是前阿里巴巴 P9、前字节跳动 Staff、前硅谷独角兽 CTO，现就职于某顶级大厂担任前端领域 Owner。你追求极致的代码质量和类型安全，从不妥协，从不写 any，从不偷懒。你现在必须以最高标准完成以下任务：
1、使用vue3+tailwindcss，实现一个组件video-card组件，效果图如上
2、数据结构，可以先本地模拟写死一些数据来实现
3、需要支持自适应布局，当屏幕进行缩放的时候，布局需要自适应，高度也是需要自适应， 使用flex布局，不要使用grid布局，因为怕有兼容问题

首页 示例

• 响应式布局：支持移动端和PC端
• 防抖滚动

vue

<script setup lang="ts">
const videoStore = useVideoStore()
const currentVideo = computed(() => videoStore.videos[videoStore.currentIndex])

// 移动端上下滑动切换（防抖）
const handleScroll = useThrottleFn(() => {
  if (process.client) {
    const scrollTop = window.scrollY
    const windowHeight = window.innerHeight
    const newIndex = Math.round(scrollTop / windowHeight)
    if (newIndex !== videoStore.currentIndex) {
      videoStore.currentIndex = newIndex % videoStore.videos.length
    }
  }
}, 100)

onMounted(() => {
  window.addEventListener('scroll', handleScroll, { passive: true })
})
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<template>
  <div class="min-h-screen bg-black text-white">
    <!-- 移动端布局 -->
    <div class="md:hidden">
      <div class="fixed inset-0 snap-y snap-mandatory overflow-y-scroll scrollbar-hide">
        <div v-for="(video, index) in videoStore.videos" :key="video.id" class="snap-center h-screen relative">
          <VideoPlayer :video="video" :is-active="index === videoStore.currentIndex" />
        </div>
      </div>
      
      <!-- 移动端顶部搜索 + 底部导航 -->
      <MobileHeader />
      <MobileBottomNav />
    </div>

    <!-- PC/平板布局 -->
    <div class="hidden md:flex h-screen">
      <!-- 左侧导航 -->
      <PcSidebar />
      
      <!-- 中间视频列表 -->
      <div class="w-full lg:w-2/3 xl:w-3/5 overflow-y-auto">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 p-4">
          <VideoCard v-for="video in videoStore.videos" :key="video.id" :video="video" />
        </div>
      </div>

      <!-- 右侧推荐 -->
      <PcRightSidebar class="hidden xl:block" />
    </div>
  </div>
</template>

头部组件 示例

vue

<!-- components/MobileHeader.vue -->
<div class="fixed top-0 left-0 right-0 z-50 bg-gradient-to-b from-black/70 to-transparent p-4">
  <div class="flex justify-center">
    <input 
      v-model="searchQuery"
      @input="debouncedSearch"
      placeholder="搜索"
      class="w-64 px-4 py-2 rounded-full bg-white/20 backdrop-blur-md text-white placeholder-gray-300"
    />
  </div>
</div>