From 765f0b6a8ff622293a462f37b179657b1790d1ca Mon Sep 17 00:00:00 2001
From: ovo <ovo@ovo.com>
Date: Fri, 6 Dec 2024 00:18:16 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=B3=A8=E5=86=8C=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                       |  92 +++-
 src/components/layout/SideBar.vue |  14 +-
 src/router/index.ts               |   8 +-
 src/views/VideoView.vue           | 821 +++++++++++++++++++++++-------
 vite.config.ts                    |   6 +-
 5 files changed, 745 insertions(+), 196 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ce45766..1e3cc05 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,7 +6,7 @@
   
   <template v-else>
     <div class="app-container">
-      <SideBar />
+      <SideBar :menu-items="menuItems" />
       <div class="main-wrapper" :class="{ 'sidebar-collapsed': isCollapsed }">
         <TopBar />
         <div class="main-content">
@@ -31,6 +31,96 @@ provide('isCollapsed', isCollapsed)
 const isAuthPage = computed(() => {
   return ['/login', '/register', '/forgot-password'].includes(route.path)
 })
+
+const menuItems = ref([
+  {
+    icon: 'House',
+    title: '首页',
+    path: '/'
+  },
+  {
+    icon: 'DataBoard',
+    title: '数据看板',
+    path: '/dashboard'
+  },
+  {
+    icon: 'VideoCamera',
+    title: '视频服务',
+    path: '/video-service'
+  },
+  {
+    icon: 'FirstAidKit',
+    title: '医疗服务',
+    path: '/medical'
+  },
+  {
+    icon: 'Van',
+    title: '出行服务',
+    path: '/transportation'
+  },
+  {
+    icon: 'Bowl',
+    title: '饮食服务',
+    path: '/diet'
+  },
+  {
+    icon: 'Microphone',
+    title: '语音助手',
+    path: '/voice-assistant'
+  },
+  {
+    icon: 'Calendar',
+    title: '活动中心',
+    path: '/activities'
+  },
+  {
+    icon: 'Monitor',
+    title: '设备管理',
+    path: '/devices'
+  },
+  {
+    icon: 'Service',
+    title: '生活服务',
+    path: '/life-service'
+  },
+  {
+    icon: 'ChatDotRound',
+    title: '社区交流',
+    path: '/community'
+  },
+  {
+    icon: 'Bell',
+    title: '新闻资讯',
+    path: '/news'
+  },
+  {
+    icon: 'Headset',
+    title: '音乐服务',
+    path: '/music'
+  },
+  {
+    icon: 'ChatLineRound',
+    title: 'AI助手',
+    path: '/ai-assistant'
+  },
+  {
+    icon: 'Monitor',
+    title: '娱乐服务',
+    path: '/entertainment'
+  },
+  {
+    icon: 'Shop',
+    title: '智慧商城',
+    path: '/shop'
+  },
+  {
+    icon: 'Setting',
+    title: '系统设置',
+    path: '/settings'
+  }
+])
+
+provide('menuItems', menuItems)  // 提供给子组件使用
 </script>
 
 <style>
diff --git a/src/components/layout/SideBar.vue b/src/components/layout/SideBar.vue
index f833764..653213c 100644
--- a/src/components/layout/SideBar.vue
+++ b/src/components/layout/SideBar.vue
@@ -33,15 +33,21 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, inject } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { Platform, Expand, Fold } from '@element-plus/icons-vue'
-import { menuItems } from '@/config/menu'
+
+defineProps<{
+  menuItems: {
+    icon: string
+    title: string
+    path: string
+  }[]
+}>()
 
 const router = useRouter()
 const route = useRoute()
-
-const isCollapsed = ref(false)
+const isCollapsed = inject('isCollapsed')
 const activeMenu = computed(() => route.path)
 
 const toggleCollapse = () => {
diff --git a/src/router/index.ts b/src/router/index.ts
index d3586bd..d0dc10d 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -29,11 +29,17 @@ const router = createRouter({
       meta: { requiresAuth: true }
     },
     {
-      path: '/video',
+      path: '/video-service',
       name: 'video',
       component: () => import('../views/VideoView.vue'),
       meta: { requiresAuth: true }
     },
+    {
+      path: '/video-service/play/:id',
+      name: 'video-play',
+      component: () => import('../views/VideoPlayView.vue'),
+      meta: { requiresAuth: true }
+    },
     {
       path: '/medical',
       name: 'medical',
diff --git a/src/views/VideoView.vue b/src/views/VideoView.vue
index f823ae9..bd97ce8 100644
--- a/src/views/VideoView.vue
+++ b/src/views/VideoView.vue
@@ -1,231 +1,680 @@
 <template>
-  <div class="video-page">
-    <el-row :gutter="20" class="video-content">
-      <el-col :span="16" class="video-player-container">
-        <VideoPlayer 
-          ref="videoPlayerRef"
-          :src="currentVideo?.url"
-          :title="currentVideo?.title"
-          :poster="currentVideo?.thumbnail"
-        />
-      </el-col>
-      <el-col :span="8" class="video-list-container">
-        <el-card class="video-list">
-          <template #header>
-            <div class="video-list-header">
-              <span>视频列表</span>
-              <el-select v-model="currentCategory" placeholder="选择分类" @change="filterVideos">
-                <el-option
-                  v-for="item in categories"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                />
-              </el-select>
+  <div class="video-container">
+    <!-- 页面标题 -->
+    <div class="page-header">
+      <div class="title-wrapper">
+        <el-icon :size="28"><VideoCamera /></el-icon>
+        <h1>视频服务</h1>
+      </div>
+      <p class="subtitle">为您精选优质养老视频内容</p>
+    </div>
+
+    <!-- 顶部搜索栏 -->
+    <div class="search-bar">
+      <el-input
+        v-model="searchQuery"
+        placeholder="搜索视频..."
+        class="search-input"
+        clearable
+      >
+        <template #prefix>
+          <el-icon class="search-icon"><Search /></el-icon>
+        </template>
+        <template #append>
+          <el-button type="primary" :icon="Search" @click="handleSearch">
+            <span class="button-text">搜索</span>
+          </el-button>
+        </template>
+      </el-input>
+      <div class="hot-searches">
+        <span class="label">热门搜索：</span>
+        <el-tag
+          v-for="tag in hotSearches"
+          :key="tag"
+          size="small"
+          effect="plain"
+          class="hot-tag"
+          @click="searchQuery = tag"
+        >
+          {{ tag }}
+        </el-tag>
+      </div>
+    </div>
+
+    <!-- 视频分类标签 -->
+    <div class="category-tags">
+      <el-tabs 
+        v-model="activeCategory" 
+        @tab-change="handleCategoryChange"
+        class="custom-tabs"
+      >
+        <el-tab-pane label="推荐" name="recommended">
+          <template #label>
+            <div class="tab-label">
+              <el-icon><VideoPlay /></el-icon>
+              <span>推荐</span>
             </div>
           </template>
-          <el-scrollbar height="calc(100vh - 280px)">
-            <div
-              v-for="video in filteredVideos"
-              :key="video.id"
-              class="video-item"
-              :class="{ 'active': currentVideo?.id === video.id }"
-              @click="playVideo(video)"
-            >
-              <el-image 
-                :src="video.thumbnail" 
-                fit="cover"
-                :lazy="true"
-              >
-                <template #placeholder>
-                  <div class="image-placeholder">
-                    <el-icon><Picture /></el-icon>
-                  </div>
-                </template>
-              </el-image>
-              <div class="video-info">
-                <h4>{{ video.title }}</h4>
-                <p class="video-meta">
-                  <span>{{ video.duration }}</span>
-                  <span>播放次数：{{ video.views }}</span>
-                </p>
-              </div>
+          <video-grid :videos="recommendedVideos" />
+        </el-tab-pane>
+        <el-tab-pane label="最新" name="latest">
+          <video-grid :videos="latestVideos" />
+        </el-tab-pane>
+        <el-tab-pane label="热门" name="popular">
+          <video-grid :videos="popularVideos" />
+        </el-tab-pane>
+        <el-tab-pane label="收藏" name="favorites">
+          <video-grid :videos="favoriteVideos" />
+        </el-tab-pane>
+        <el-tab-pane label="历史" name="history">
+          <video-grid :videos="historyVideos" />
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+
+    <!-- 视频推荐区域 -->
+    <div v-if="activeCategory === 'recommended'" class="featured-section">
+      <div class="section-title">
+        <el-icon><Star /></el-icon>
+        <h2>精选推荐</h2>
+        <el-tag type="warning" effect="plain" class="featured-tag">
+          <el-icon><Trophy /></el-icon>
+          <span>精品内容</span>
+        </el-tag>
+      </div>
+      <el-carousel 
+        :interval="4000" 
+        type="card" 
+        height="300px"
+        :autoplay="true"
+        class="featured-carousel"
+      >
+        <el-carousel-item v-for="video in featuredVideos" :key="video.id">
+          <div class="featured-video" @click="playVideo(video)">
+            <img :src="video.thumbnail" :alt="video.title">
+            <div class="featured-info">
+              <h3>{{ video.title }}</h3>
+              <p>{{ video.description }}</p>
             </div>
-          </el-scrollbar>
-        </el-card>
-      </el-col>
-    </el-row>
+          </div>
+        </el-carousel-item>
+      </el-carousel>
+    </div>
+
+    <!-- 视频列表区域 -->
+    <div class="video-section">
+      <div class="section-header">
+        <div class="section-title">
+          <el-icon>
+            <component :is="getCategoryIcon" />
+          </el-icon>
+          <h2>{{ getCategoryTitle }}</h2>
+        </div>
+        <el-select 
+          v-model="sortBy" 
+          placeholder="排序方式" 
+          @change="handleSort"
+          class="sort-select"
+        >
+          <el-option label="最新发布" value="latest" />
+          <el-option label="最多播放" value="views" />
+          <el-option label="最多点赞" value="likes" />
+        </el-select>
+      </div>
+
+      <div class="video-grid">
+        <video-card
+          v-for="video in displayVideos"
+          :key="video.id"
+          :video="video"
+          @click="playVideo(video)"
+          @favorite="toggleFavorite"
+        />
+      </div>
+
+      <!-- 分页器 -->
+      <div class="pagination">
+        <el-pagination
+          v-model:current-page="currentPage"
+          :page-size="pageSize"
+          :total="totalVideos"
+          layout="prev, pager, next"
+          @current-change="handlePageChange"
+        />
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, watch } from 'vue'
-import { Picture } from '@element-plus/icons-vue'
-import VideoPlayer from '@/components/video/VideoPlayer.vue'
-import { videoApi, type Video } from '@/api/video'
-import { ElLoading, ElMessage } from 'element-plus'
+import { ref, computed } from 'vue'
+import { Search, Star, VideoPlay, Calendar, Fire, Collection, Timer, VideoCamera, Trophy } from '@element-plus/icons-vue'
+import VideoCard from '@/components/video/VideoCard.vue'
+import VideoGrid from '@/components/video/VideoGrid.vue'
+import { useRouter } from 'vue-router'
 
-const currentCategory = ref('')
-const categories = [
-  { label: '全部', value: '' },
-  { label: '健康讲座', value: 'health' },
-  { label: '娱乐节目', value: 'entertainment' },
-  { label: '新闻资讯', value: 'news' }
-]
+const router = useRouter()
+const searchQuery = ref('')
+const activeCategory = ref('recommended')
+const sortBy = ref('latest')
+const currentPage = ref(1)
+const pageSize = ref(12)
 
-const videoList = ref<Video[]>([])
-const currentVideo = ref<Video | null>(null)
-const videoPlayerRef = ref()
+// 模拟数据
+const featuredVideos = ref([
+  {
+    id: 1,
+    title: '健康生活指南',
+    description: '日常保健小技巧',
+    thumbnail: 'https://picsum.photos/800/450',
+    duration: '10:30',
+    views: 1500,
+    likes: 230,
+    date: '2024-01-15'
+  },
+  {
+    id: 2,
+    title: '老年人居家运动指南',
+    description: '适合老年人的居家健身方法',
+    thumbnail: 'https://picsum.photos/800/451',
+    duration: '15:20',
+    views: 2800,
+    likes: 450,
+    date: '2024-01-16'
+  },
+  {
+    id: 3,
+    title: '营养健康饮食课堂',
+    description: '专业营养师教您科学饮食',
+    thumbnail: 'https://picsum.photos/800/452',
+    duration: '12:45',
+    views: 3500,
+    likes: 520,
+    date: '2024-01-17'
+  }
+])
 
-const filteredVideos = computed(() => {
-  if (!currentCategory.value) return videoList.value
-  return videoList.value.filter(video => video.category === currentCategory.value)
+const recommendedVideos = ref([
+  {
+    id: 4,
+    title: '每日健康操',
+    thumbnail: 'https://picsum.photos/800/453',
+    duration: '08:30',
+    views: 1200,
+    likes: 180,
+    date: '2024-01-18'
+  },
+  {
+    id: 5,
+    title: '中医养生知识讲座',
+    thumbnail: 'https://picsum.photos/800/454',
+    duration: '20:15',
+    views: 4500,
+    likes: 680,
+    date: '2024-01-19'
+  },
+  {
+    id: 6,
+    title: '老年人心理健康指导',
+    thumbnail: 'https://picsum.photos/800/455',
+    duration: '16:40',
+    views: 2300,
+    likes: 340,
+    date: '2024-01-20'
+  }
+])
+
+const latestVideos = ref([
+  {
+    id: 7,
+    title: '智能设备使用教程',
+    thumbnail: 'https://picsum.photos/800/456',
+    duration: '11:20',
+    views: 1800,
+    likes: 260,
+    date: '2024-01-21'
+  },
+  {
+    id: 8,
+    title: '防诈骗知识讲解',
+    thumbnail: 'https://picsum.photos/800/457',
+    duration: '14:50',
+    views: 5600,
+    likes: 890,
+    date: '2024-01-22'
+  }
+])
+
+const popularVideos = ref([
+  {
+    id: 9,
+    title: '老年人体育运动指南',
+    thumbnail: 'https://picsum.photos/800/458',
+    duration: '18:30',
+    views: 8900,
+    likes: 1200,
+    date: '2024-01-20',
+    isFavorite: true
+  },
+  {
+    id: 10,
+    title: '健康饮食与营养搭配',
+    thumbnail: 'https://picsum.photos/800/459',
+    duration: '25:15',
+    views: 7600,
+    likes: 980,
+    date: '2024-01-19',
+    isFavorite: true
+  }
+])
+
+const favoriteVideos = ref([
+  {
+    id: 11,
+    title: '居家养老服务指南',
+    thumbnail: 'https://picsum.photos/800/460',
+    duration: '16:45',
+    views: 3200,
+    likes: 520,
+    date: '2024-01-18',
+    isFavorite: true
+  },
+  {
+    id: 12,
+    title: '老年人心理健康课程',
+    thumbnail: 'https://picsum.photos/800/461',
+    duration: '22:10',
+    views: 4100,
+    likes: 730,
+    date: '2024-01-17',
+    isFavorite: true
+  },
+  {
+    id: 13,
+    title: '智能家居使用教程',
+    thumbnail: 'https://picsum.photos/800/462',
+    duration: '19:30',
+    views: 2800,
+    likes: 450,
+    date: '2024-01-16',
+    isFavorite: true
+  }
+])
+
+const historyVideos = ref([
+  {
+    id: 14,
+    title: '老年人手机使用技巧',
+    thumbnail: 'https://picsum.photos/800/463',
+    duration: '13:20',
+    views: 2100,
+    likes: 380,
+    date: '2024-01-23',
+    watchedAt: '2024-01-23T15:30:00'
+  },
+  {
+    id: 15,
+    title: '养生保健知识讲座',
+    thumbnail: 'https://picsum.photos/800/464',
+    duration: '28:45',
+    views: 5300,
+    likes: 860,
+    date: '2024-01-22',
+    watchedAt: '2024-01-23T14:20:00'
+  },
+  {
+    id: 16,
+    title: '老年人理财安全指南',
+    thumbnail: 'https://picsum.photos/800/465',
+    duration: '20:15',
+    views: 4200,
+    likes: 690,
+    date: '2024-01-21',
+    watchedAt: '2024-01-23T10:15:00'
+  },
+  {
+    id: 17,
+    title: '家庭医疗保健常识',
+    thumbnail: 'https://picsum.photos/800/466',
+    duration: '17:40',
+    views: 3800,
+    likes: 570,
+    date: '2024-01-20',
+    watchedAt: '2024-01-22T16:45:00'
+  }
+])
+
+// 计算属性
+const getCategoryTitle = computed(() => {
+  const titles = {
+    recommended: '推荐视频',
+    latest: '最新视频',
+    popular: '热门视频',
+    favorites: '我的收藏',
+    history: '观看历史'
+  }
+  return titles[activeCategory.value]
 })
 
-const loadVideos = async () => {
-  const loading = ElLoading.service({
-    target: '.video-list-container',
-    text: '加载中...'
-  })
-  try {
-    const data = await videoApi.getVideoList(currentCategory.value)
-    videoList.value = data
-    if (data.length > 0 && !currentVideo.value) {
-      currentVideo.value = data[0]
+const displayVideos = computed(() => {
+  // 根据当前分类和排序方式返回对应的视频列表
+  let videos = []
+  switch (activeCategory.value) {
+    case 'recommended':
+      videos = recommendedVideos.value
+      break
+    case 'latest':
+      videos = latestVideos.value
+      break
+    case 'popular':
+      videos = popularVideos.value
+      break
+    case 'favorites':
+      videos = favoriteVideos.value
+      break
+    case 'history':
+      videos = historyVideos.value
+      break
+  }
+
+  // 应用排序
+  return sortVideos(videos)
+})
+
+const totalVideos = computed(() => displayVideos.value.length)
+
+// 方法
+const handleSearch = () => {
+  if (!searchQuery.value.trim()) return
+  // TODO: 实现搜索逻辑
+}
+
+const handleCategoryChange = (category: string) => {
+  activeCategory.value = category
+  currentPage.value = 1
+  // TODO: 加载对应分类的视频
+}
+
+const handleSort = () => {
+  // TODO: 实现排序逻辑
+}
+
+const handlePageChange = (page: number) => {
+  currentPage.value = page
+  // TODO: 加载对应页的视频
+}
+
+const playVideo = (video: any) => {
+  router.push(`/video-service/play/${video.id}`)
+}
+
+const toggleFavorite = (videoId: number) => {
+  // TODO: 实现收藏/取消收藏逻辑
+}
+
+const sortVideos = (videos: any[]) => {
+  return [...videos].sort((a, b) => {
+    switch (sortBy.value) {
+      case 'views':
+        return b.views - a.views
+      case 'likes':
+        return b.likes - a.likes
+      case 'latest':
+      default:
+        return new Date(b.date).getTime() - new Date(a.date).getTime()
     }
-  } catch (error) {
-    console.error('加载视频列表失败:', error)
-    ElMessage.error('加载视频列表失败')
-  } finally {
-    loading.close()
-  }
+  })
 }
 
-const playVideo = async (video: Video) => {
-  currentVideo.value = video
-  if (videoPlayerRef.value) {
-    videoPlayerRef.value.changeVideo(video.url, video.thumbnail)
+// 根据分类获取对应图标
+const getCategoryIcon = computed(() => {
+  const icons = {
+    recommended: VideoPlay,
+    latest: Calendar,
+    popular: Fire,
+    favorites: Collection,
+    history: Timer
   }
-  try {
-    await videoApi.updateViews(video.id)
-    // 更新本地数据
-    video.views += 1
-  } catch (error) {
-    console.error('更新观看次数失败:', error)
-  }
-}
-
-const filterVideos = () => {
-  const filtered = filteredVideos.value
-  if (filtered.length > 0) {
-    playVideo(filtered[0])
-  }
-}
-
-watch(currentCategory, () => {
-  loadVideos()
+  return icons[activeCategory.value]
 })
 
-onMounted(() => {
-  loadVideos()
-})
+// 热门搜索标签
+const hotSearches = [
+  '养生保健',
+  '健康饮食',
+  '运动指南',
+  '心理健康',
+  '智能设备'
+]
 </script>
 
 <style scoped>
-.video-page {
-  height: 100%;
-  width: 100%;
-  min-width: 1000px;
+.video-container {
+  padding: 30px;
+  max-width: 1400px;
+  margin: 20px auto;
+  background: #fff;
+  border-radius: 16px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
 }
 
-.video-content {
-  height: 100%;
-  margin: 0 !important;
+.page-header {
+  margin-bottom: 30px;
+  
+  .title-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 8px;
+    
+    .el-icon {
+      color: #409EFF;
+    }
+    
+    h1 {
+      font-size: 28px;
+      margin: 0;
+      color: #303133;
+      font-weight: 600;
+    }
+  }
+  
+  .subtitle {
+    margin: 0;
+    color: #909399;
+    font-size: 14px;
+  }
 }
 
-.video-player-container {
-  height: 100%;
-  padding: 0 10px;
-}
-
-.video-list-container {
-  height: 100%;
-  padding: 0 10px;
-}
-
-.video-list {
-  height: 100%;
+.search-bar {
+  margin-bottom: 30px;
   display: flex;
   flex-direction: column;
+  align-items: center;
+  gap: 12px;
 }
 
-.video-list :deep(.el-card__body) {
-  flex: 1;
-  padding: 0;
+.hot-searches {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  
+  .label {
+    color: #909399;
+    font-size: 13px;
+  }
+  
+  .hot-tag {
+    cursor: pointer;
+    transition: all 0.3s;
+    
+    &:hover {
+      color: #409EFF;
+      border-color: #409EFF;
+    }
+  }
 }
 
-.video-list-header {
+.search-input {
+  width: 100%;
+  max-width: 600px;
+  
+  :deep(.el-input__wrapper) {
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
+    border-radius: 8px;
+    padding-left: 16px;
+    height: 44px;
+  }
+  
+  :deep(.el-input-group__append) {
+    padding: 0;
+    .el-button {
+      border-radius: 0 8px 8px 0;
+      padding: 0 24px;
+      height: 44px;
+      font-size: 15px;
+      
+      .button-text {
+        margin-left: 4px;
+      }
+    }
+  }
+}
+
+.category-tags {
+  .custom-tabs {
+    :deep(.el-tabs__item) {
+      .tab-label {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        
+        .el-icon {
+          margin-right: 4px;
+        }
+      }
+    }
+  }
+}
+
+.section-title {
+  position: relative;
+  
+  .featured-tag {
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 6px 12px;
+    
+    .el-icon {
+      color: #e6a23c;
+    }
+  }
+}
+
+.featured-carousel {
+  :deep(.el-carousel__arrow) {
+    width: 36px;
+    height: 36px;
+    font-size: 20px;
+    background: rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(4px);
+  }
+}
+
+.featured-video {
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(
+      to bottom,
+      transparent 50%,
+      rgba(0, 0, 0, 0.7) 100%
+    );
+    pointer-events: none;
+  }
+  
+  &:hover {
+    transform: translateY(-4px);
+    &::after {
+      background: linear-gradient(
+        to bottom,
+        transparent 40%,
+        rgba(0, 0, 0, 0.8) 100%
+      );
+    }
+  }
+}
+
+.section-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 10px;
+  margin-bottom: 20px;
+  h2 {
+    font-size: 20px;
+    color: #303133;
+  }
 }
 
-.video-item {
-  display: flex;
-  padding: 10px;
-  cursor: pointer;
-  border-bottom: 1px solid #eee;
-  transition: all 0.3s;
+.video-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 24px;
+  margin-bottom: 24px;
 }
 
-.video-item:hover {
-  background-color: #f5f7fa;
-}
-
-.video-item.active {
-  background-color: #ecf5ff;
-}
-
-.video-item .el-image {
-  width: 160px;
-  height: 90px;
-  margin-right: 10px;
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.image-placeholder {
-  width: 100%;
-  height: 100%;
+.pagination {
   display: flex;
   justify-content: center;
-  align-items: center;
-  background-color: #f5f7fa;
-  color: #909399;
+  margin-top: 32px;
+  padding: 20px 0;
+  
+  :deep(.el-pagination) {
+    justify-content: center;
+  }
 }
 
-.video-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.video-info h4 {
-  margin: 0 0 5px 0;
-  font-size: 14px;
-  line-height: 1.4;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-}
-
-.video-meta {
-  margin: 0;
-  color: #909399;
-  font-size: 12px;
-  display: flex;
-  justify-content: space-between;
+/* 响应式布局 */
+@media (max-width: 768px) {
+  .video-container {
+    padding: 20px;
+    margin: 10px;
+  }
+  
+  .search-input {
+    max-width: 100%;
+  }
+  
+  .section-title {
+    h2 {
+      font-size: 18px;
+    }
+    
+    .el-icon {
+      font-size: 20px;
+    }
+  }
+  
+  .page-header {
+    .title-wrapper {
+      h1 {
+        font-size: 24px;
+      }
+    }
+  }
+  
+  .hot-searches {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
 }
 </style> 
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index de5cb31..0190307 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,14 +1,12 @@
-import { fileURLToPath, URL } from 'node:url'
-
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import path from 'path'
 
-// https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
+      '@': path.resolve(__dirname, './src')
     }
   }
 })