From e894c20b98f3c9113eb7c7e703e8120d6f83e6bc Mon Sep 17 00:00:00 2001
From: ovo <ovo@ovo.com>
Date: Sun, 8 Dec 2024 16:19:11 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=86=E9=A2=91=E8=B5=B7=E6=AD=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/video.ts        |  126 ++--
 src/views/VideoView.vue | 1252 +++++++++++++--------------------------
 2 files changed, 496 insertions(+), 882 deletions(-)

diff --git a/src/api/video.ts b/src/api/video.ts
index d7934ec..1e1ca0f 100644
--- a/src/api/video.ts
+++ b/src/api/video.ts
@@ -41,7 +41,7 @@ const mockVideos: Video[] = [
     duration: '15:30',
     category: 'health',
     views: 2345,
-    description: '专业��生讲解养生知识',
+    description: '专业医生讲解养生知识',
     uploadTime: '2024-03-19',
     likes: 342,
     comments: 67,
@@ -99,54 +99,108 @@ export const videoCategories = [
   { label: '新闻资讯', value: 'news' }
 ]
 
-// 模拟 API 接口
+// 视频相关接口
 export const videoApi = {
   // 获取视频列表
-  async getVideoList(category: string = ''): Promise<Video[]> {
-    await delay(500) // 模拟网络延迟
-    return mockVideos.filter(video => 
-      category ? video.category === category : true
-    )
+  async getList(params: {
+    pageNum?: number
+    pageSize?: number
+    keyword?: string
+  }) {
+    const res = await request.get('/videos', { params })
+    return res.data
   },
 
   // 获取视频详情
-  async getVideoDetail(id: number): Promise<Video | undefined> {
-    await delay(300)
-    return mockVideos.find(video => video.id === id)
+  async getDetail(id: number) {
+    const res = await request.get(`/videos/${id}`)
+    return res.data
   },
 
-  // 更新观看次数
-  async updateViews(id: number): Promise<void> {
-    await delay(200)
-    const video = mockVideos.find(v => v.id === id)
-    if (video) {
-      video.views += 1
-    }
+  // 上传视频
+  async upload(data: FormData) {
+    const res = await request.post('/videos/upload', data, {
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      }
+    })
+    return res.data
   },
 
-  // 点赞视频
-  async likeVideo(id: number): Promise<void> {
-    await delay(200)
-    const video = mockVideos.find(v => v.id === id)
-    if (video) {
-      video.likes += 1
-    }
+  // 更新视频信息
+  async update(id: number, data: {
+    title: string
+    description: string
+    tags?: string
+  }) {
+    const res = await request.put(`/videos/${id}`, data)
+    return res.data
+  },
+
+  // 删除视频
+  async delete(id: number) {
+    await request.delete(`/videos/${id}`)
+  },
+
+  // 点赞/取消点赞
+  async toggleLike(id: number) {
+    await request.post(`/videos/${id}/like`)
+  },
+
+  // 增加观看次数
+  async addView(id: number) {
+    await request.post(`/videos/${id}/view`)
   },
 
   // 获取推荐视频
-  async getRecommendedVideos(currentId: number): Promise<Video[]> {
-    await delay(300)
-    return mockVideos
-      .filter(video => video.id !== currentId)
-      .sort(() => Math.random() - 0.5)
-      .slice(0, 3)
+  async getRecommend(limit: number = 10) {
+    const res = await request.get('/videos/recommend', {
+      params: { limit }
+    })
+    return res.data
   },
 
-  // 获取热门视频
-  async getHotVideos(): Promise<Video[]> {
-    await delay(300)
-    return [...mockVideos]
-      .sort((a, b) => b.views - a.views)
-      .slice(0, 5)
+  // 获取相似视频
+  async getSimilar(id: number, limit: number = 10) {
+    const res = await request.get(`/videos/${id}/similar`, {
+      params: { limit }
+    })
+    return res.data
   }
+}
+
+// 视频DTO类型定义
+export interface VideoDTO {
+  id: number
+  title: string
+  description: string
+  url: string
+  coverUrl: string
+  duration: number
+  size: number
+  status: 'DRAFT' | 'PUBLISHED' | 'DELETED'
+  userId: number
+  username: string
+  createdTime: string
+  updatedTime: string
+  viewCount: number
+  likeCount: number
+  tags: string
+  hasLiked: boolean
+}
+
+// 分页响应类型
+export interface PageResponse<T> {
+  records: T[]
+  total: number
+  size: number
+  current: number
+  pages: number
+}
+
+// 响应类型
+export interface ApiResponse<T> {
+  code: number
+  message: string
+  data: T
 } 
\ No newline at end of file
diff --git a/src/views/VideoView.vue b/src/views/VideoView.vue
index be816c0..d1619bc 100644
--- a/src/views/VideoView.vue
+++ b/src/views/VideoView.vue
@@ -1,926 +1,486 @@
 <template>
-  <div class="video-container">
-    <!-- 页面标题 -->
+  <div class="video-page">
+    <!-- 顶部操作栏 -->
     <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">
-      <div class="search-wrapper">
-        <div class="search-box">
-          <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>
-        
-        <div class="search-tags">
-          <div class="hot-searches">
-            <div class="hot-label">
-              <el-icon><Histogram /></el-icon>
-              <span>热门搜索</span>
-            </div>
-            <el-tag
-              v-for="tag in hotSearches"
-              :key="tag"
-              size="small"
-              effect="plain"
-              class="hot-tag"
-              @click="searchQuery = tag"
-            >
-              <el-icon><Search /></el-icon>
-              {{ tag }}
-            </el-tag>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- 分类导航 -->
-    <div class="category-nav">
-      <div class="nav-item" 
-        v-for="item in videoCategories" 
-        :key="item.value"
-        :class="{ active: currentCategory === item.value }"
-        @click="currentCategory = item.value"
-      >
-        <el-icon><component :is="item.icon" /></el-icon>
-        <span>{{ item.label }}</span>
-      </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>
-          <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>
-          </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"
+      <div class="search-bar">
+        <el-input
+          v-model="searchKeyword"
+          placeholder="搜索视频..."
+          class="search-input"
+          @keyup.enter="handleSearch"
+          clearable
         >
-          <el-option label="最新发布" value="latest" />
-          <el-option label="最多播放" value="views" />
-          <el-option label="最多点赞" value="likes" />
-        </el-select>
+          <template #prefix>
+            <el-icon><Search /></el-icon>
+          </template>
+        </el-input>
       </div>
 
-      <div class="video-grid">
-        <template v-if="isLoading">
-          <div v-for="n in 8" :key="n" class="video-card loading-skeleton">
-            <div class="thumbnail-wrapper"></div>
+      <div class="actions">
+        <el-button type="primary" @click="showUploadDialog">
+          <el-icon><Upload /></el-icon>上传视频
+        </el-button>
+      </div>
+    </div>
+
+    <!-- 视频列表 -->
+    <div class="video-list" v-loading="loading">
+      <el-row :gutter="20">
+        <el-col 
+          v-for="video in videoList" 
+          :key="video.id"
+          :xs="24" 
+          :sm="12" 
+          :md="8" 
+          :lg="6"
+        >
+          <div class="video-card">
+            <div class="thumbnail" @click="playVideo(video)">
+              <img :src="video.coverUrl" :alt="video.title">
+              <span class="duration">{{ formatDuration(video.duration) }}</span>
+            </div>
             <div class="video-info">
-              <div class="title-skeleton"></div>
-              <div class="meta-skeleton"></div>
+              <h3>{{ video.title }}</h3>
+              <p class="description">{{ video.description }}</p>
+              <div class="meta">
+                <span>
+                  <el-icon><View /></el-icon>
+                  {{ formatNumber(video.viewCount) }}
+                </span>
+                <span>
+                  <el-icon><Star /></el-icon>
+                  {{ formatNumber(video.likeCount) }}
+                </span>
+                <span>{{ formatDate(video.createdTime) }}</span>
+              </div>
+              <div class="actions">
+                <el-button-group>
+                  <el-button 
+                    :type="video.hasLiked ? 'success' : 'default'"
+                    @click="handleLike(video)"
+                  >
+                    <el-icon><Star /></el-icon>
+                  </el-button>
+                  <el-button 
+                    type="primary"
+                    @click="handleEdit(video)"
+                  >
+                    <el-icon><Edit /></el-icon>
+                  </el-button>
+                  <el-button 
+                    type="danger"
+                    @click="handleDelete(video)"
+                  >
+                    <el-icon><Delete /></el-icon>
+                  </el-button>
+                </el-button-group>
+              </div>
             </div>
           </div>
-        </template>
-        <template v-else>
-          <video-card
-            v-for="video in displayVideos"
-            :key="video.id"
-            :video="video"
-            @click="playVideo(video)"
-            @favorite="toggleFavorite"
-          />
-        </template>
-      </div>
+        </el-col>
+      </el-row>
 
-      <!-- 分页器 -->
+      <!-- 分页 -->
       <div class="pagination">
         <el-pagination
           v-model:current-page="currentPage"
-          :page-size="pageSize"
-          :total="totalVideos"
-          layout="prev, pager, next"
-          @current-change="handlePageChange"
+          v-model:page-size="pageSize"
+          :total="total"
+          :page-sizes="[12, 24, 36, 48]"
+          layout="total, sizes, prev, pager, next"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
         />
       </div>
     </div>
+
+    <!-- 上传对话框 -->
+    <el-dialog
+      v-model="uploadDialogVisible"
+      title="上传视频"
+      width="500px"
+    >
+      <el-form ref="uploadFormRef" :model="uploadForm" :rules="uploadRules">
+        <el-form-item prop="file" label="视频文件">
+          <el-upload
+            class="video-upload"
+            :auto-upload="false"
+            :show-file-list="true"
+            :limit="1"
+            accept="video/*"
+            v-model:file-list="uploadFiles"
+          >
+            <el-button type="primary">选择视频</el-button>
+          </el-upload>
+        </el-form-item>
+        <el-form-item prop="title" label="标题">
+          <el-input v-model="uploadForm.title" />
+        </el-form-item>
+        <el-form-item prop="description" label="描述">
+          <el-input 
+            v-model="uploadForm.description"
+            type="textarea"
+            rows="3"
+          />
+        </el-form-item>
+        <el-form-item prop="tags" label="标签">
+          <el-input v-model="uploadForm.tags" placeholder="多个标签用逗号分隔" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="uploadDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleUpload" :loading="uploading">
+          上传
+        </el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 编辑对话框 -->
+    <el-dialog
+      v-model="editDialogVisible"
+      title="编辑视频"
+      width="500px"
+    >
+      <el-form ref="editFormRef" :model="editForm" :rules="editRules">
+        <el-form-item prop="title" label="标题">
+          <el-input v-model="editForm.title" />
+        </el-form-item>
+        <el-form-item prop="description" label="描述">
+          <el-input 
+            v-model="editForm.description"
+            type="textarea"
+            rows="3"
+          />
+        </el-form-item>
+        <el-form-item prop="tags" label="标签">
+          <el-input v-model="editForm.tags" placeholder="多个标签用逗号分隔" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="editDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleUpdate" :loading="updating">
+          保存
+        </el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
-import { Search, Star, VideoPlay, Calendar, Histogram as 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 { ref, onMounted } from 'vue'
+import { Search, View, Star, Upload, Edit, Delete } from '@element-plus/icons-vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { videoApi } from '@/api/video'
 import { useRouter } from 'vue-router'
+import type { FormInstance, UploadUserFile } from 'element-plus'
+import type { VideoDTO, PageResponse } from '@/api/video'
 
 const router = useRouter()
-const searchQuery = ref('')
-const activeCategory = ref('recommended')
-const sortBy = ref('latest')
+const loading = ref(false)
 const currentPage = ref(1)
 const pageSize = ref(12)
-const isLoading = ref(false)
+const total = ref(0)
+const videoList = ref<VideoDTO[]>([])
+const searchKeyword = 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 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 uploadDialogVisible = ref(false)
+const uploading = ref(false)
+const uploadFiles = ref<UploadUserFile[]>([])
+const uploadForm = ref({
+  title: '',
+  description: '',
+  tags: ''
 })
-
-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 uploadRules = {
+  title: [{ required: true, message: '请输入标题' }]
 }
+const uploadFormRef = ref<FormInstance>()
 
-const handleCategoryChange = async (category: string) => {
-  activeCategory.value = category
-  currentPage.value = 1
-  isLoading.value = true
+// 编辑相关
+const editDialogVisible = ref(false)
+const updating = ref(false)
+const editForm = ref({
+  id: 0,
+  title: '',
+  description: '',
+  tags: ''
+})
+const editRules = {
+  title: [{ required: true, message: '请输入标题' }]
+}
+const editFormRef = ref<FormInstance>()
+
+// 获取视频列表
+const getVideoList = async () => {
+  loading.value = true
   try {
-    // TODO: 加载对应分类的视频
-    await new Promise(resolve => setTimeout(resolve, 1000))
+    const res = await videoApi.getList({
+      pageNum: currentPage.value,
+      pageSize: pageSize.value,
+      keyword: searchKeyword.value
+    })
+    videoList.value = res.records
+    total.value = res.total
+  } catch (error) {
+    console.error('Failed to load videos:', error)
+    ElMessage.error('加载视频列表失败')
   } finally {
-    isLoading.value = false
+    loading.value = false
   }
 }
 
-const handleSort = () => {
-  // TODO: 实现排序逻辑
+// 搜索
+const handleSearch = () => {
+  currentPage.value = 1
+  getVideoList()
 }
 
-const handlePageChange = (page: number) => {
-  currentPage.value = page
-  // TODO: 加载对应页的视频
+// 分页
+const handleSizeChange = (val: number) => {
+  pageSize.value = val
+  getVideoList()
 }
 
-const playVideo = (video: any) => {
-  router.push(`/video-service/play/${video.id}`)
+const handleCurrentChange = (val: number) => {
+  currentPage.value = val
+  getVideoList()
 }
 
-const toggleFavorite = (videoId: number) => {
-  // TODO: 实现收藏/取消收藏逻辑
+// 上传视频
+const showUploadDialog = () => {
+  uploadForm.value = {
+    title: '',
+    description: '',
+    tags: ''
+  }
+  uploadFiles.value = []
+  uploadDialogVisible.value = true
 }
 
-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()
+const handleUpload = async () => {
+  if (!uploadFormRef.value) return
+  await uploadFormRef.value.validate(async (valid) => {
+    if (valid && uploadFiles.value[0]) {
+      uploading.value = true
+      try {
+        const formData = new FormData()
+        formData.append('file', uploadFiles.value[0].raw!)
+        formData.append('title', uploadForm.value.title)
+        formData.append('description', uploadForm.value.description)
+        formData.append('tags', uploadForm.value.tags)
+        
+        await videoApi.upload(formData)
+        ElMessage.success('上传成功')
+        uploadDialogVisible.value = false
+        getVideoList()
+      } catch (error) {
+        ElMessage.error('上传失败')
+      } finally {
+        uploading.value = false
+      }
     }
   })
 }
 
-// 根据分类获取对应图标
-const getCategoryIcon = computed(() => {
-  const icons = {
-    recommended: VideoPlay,
-    latest: Calendar,
-    popular: Fire,
-    favorites: Collection,
-    history: Timer
+// 编辑视频
+const handleEdit = (video: any) => {
+  editForm.value = {
+    id: video.id,
+    title: video.title,
+    description: video.description,
+    tags: video.tags
   }
-  return icons[activeCategory.value]
-})
+  editDialogVisible.value = true
+}
 
-// 热门搜索标签
-const hotSearches = [
-  '养生保健',
-  '健康饮食',
-  '运动指南',
-  '心理健康',
-  '智能设备'
-]
+const handleUpdate = async () => {
+  if (!editFormRef.value) return
+  await editFormRef.value.validate(async (valid) => {
+    if (valid) {
+      updating.value = true
+      try {
+        await videoApi.update(editForm.value.id, {
+          title: editForm.value.title,
+          description: editForm.value.description,
+          tags: editForm.value.tags
+        })
+        ElMessage.success('更新成功')
+        editDialogVisible.value = false
+        getVideoList()
+      } catch (error) {
+        ElMessage.error('更新失败')
+      } finally {
+        updating.value = false
+      }
+    }
+  })
+}
 
-// 视频分类
-const videoCategories = [
-  { label: '全部', value: 'all', icon: 'Grid' },
-  { label: '健康养生', value: 'health', icon: 'FirstAid' },
-  { label: '运动健身', value: 'fitness', icon: 'Position' },
-  { label: '营养饮食', value: 'diet', icon: 'Bowl' },
-  { label: '心理健康', value: 'mental', icon: 'SwitchButton' },
-  { label: '医疗保健', value: 'medical', icon: 'Stethoscope' },
-  { label: '智能设备', value: 'device', icon: 'Monitor' },
-  { label: '生活技巧', value: 'life', icon: 'House' },
-  { label: '文化娱乐', value: 'entertainment', icon: 'Film' },
-  { label: '旅游出行', value: 'travel', icon: 'Van' }
-]
+// 删除视频
+const handleDelete = async (video: any) => {
+  try {
+    await ElMessageBox.confirm('确定要删除这个视频吗?', '提示', {
+      type: 'warning'
+    })
+    await videoApi.delete(video.id)
+    ElMessage.success('删除成功')
+    getVideoList()
+  } catch (error) {
+    if (error !== 'cancel') {
+      ElMessage.error('删除失败')
+    }
+  }
+}
 
-const currentCategory = ref('all')
+// 点赞
+const handleLike = async (video: any) => {
+  try {
+    await videoApi.toggleLike(video.id)
+    video.hasLiked = !video.hasLiked
+    video.likeCount += video.hasLiked ? 1 : -1
+    ElMessage.success(video.hasLiked ? '点赞成功' : '已取消点赞')
+  } catch (error) {
+    ElMessage.error('操作失败')
+  }
+}
 
-// 检测是否需要显示滚动阴影
-const hasScroll = ref(false)
+// 播放视频
+const playVideo = async (video: any) => {
+  try {
+    await videoApi.addView(video.id)
+    router.push(`/video/${video.id}`)
+  } catch (error) {
+    ElMessage.error('操作失败')
+  }
+}
+
+// 格式化工具函数
+const formatNumber = (num: number) => {
+  if (num >= 10000) {
+    return (num / 10000).toFixed(1) + '万'
+  }
+  return num.toString()
+}
+
+const formatDuration = (seconds: number) => {
+  const minutes = Math.floor(seconds / 60)
+  const remainingSeconds = seconds % 60
+  return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`
+}
+
+const formatDate = (date: string) => {
+  return new Date(date).toLocaleDateString()
+}
 
-// 监听滚动容器宽度变化
 onMounted(() => {
-  const observer = new ResizeObserver(entries => {
-    for (const entry of entries) {
-      const { scrollWidth, clientWidth } = entry.target as HTMLElement
-      hasScroll.value = scrollWidth > clientWidth
-    }
-  })
-  
-  const scrollContainer = document.querySelector('.tags-container')
-  if (scrollContainer) {
-    observer.observe(scrollContainer)
-  }
+  getVideoList()
 })
 </script>
 
 <style scoped>
-.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-page {
+  padding: 20px;
 }
 
 .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;
-  }
+  margin-bottom: 20px;
 }
 
 .search-bar {
-  margin-bottom: 24px;
-  background: #fff;
-  border-radius: 12px;
-  padding: 24px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
-}
-
-.search-wrapper {
-  max-width: 800px;
-  margin: 0 auto;
-}
-
-.search-box {
   margin-bottom: 20px;
 }
 
 .search-input {
-  :deep(.el-input__wrapper) {
-    padding-left: 16px;
-    background: #f5f7fa;
-    box-shadow: none !important;
-    border: 2px solid transparent;
-    transition: all 0.3s;
-    
-    &:hover {
-      background: #ecf5ff;
-    }
-    
-    &.is-focus {
-      background: #fff;
-      border-color: #409EFF;
-    }
-  }
-  
-  :deep(.el-input__inner) {
-    height: 44px;
-    font-size: 15px;
-  }
-  
-  :deep(.search-icon) {
-    font-size: 18px;
-    color: #909399;
-  }
-  
-  :deep(.el-input-group__append) {
-    padding: 0;
-    
-    .el-button {
-      height: 44px;
-      padding: 0 24px;
-      font-size: 15px;
-      border-radius: 0 4px 4px 0;
-      
-      .el-icon {
-        font-size: 18px;
-      }
-      
-      .button-text {
-        margin-left: 8px;
-      }
-    }
-  }
+  max-width: 500px;
 }
 
-.search-tags {
-  position: relative;
-  padding-left: 100px;
-}
-
-.hot-searches {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  margin-bottom: 24px;
-  
-  .hot-label {
-    position: absolute;
-    left: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    color: #606266;
-    font-size: 13px;
-    font-weight: 500;
-    
-    .el-icon {
-      font-size: 16px;
-      color: #f56c6c;
-    }
-  }
-  
-  .hot-tag {
-    cursor: pointer;
-    padding: 0 12px;
-    height: 28px;
-    border-radius: 14px;
-    border-color: #e4e7ed;
-    transition: all 0.3s;
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    
-    .el-icon {
-      font-size: 12px;
-      color: #909399;
-    }
-    
-    &:hover {
-      color: #409EFF;
-      border-color: #409EFF;
-      transform: translateY(-1px);
-      box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
-      
-      .el-icon {
-        color: #409EFF;
-      }
-    }
-  }
-}
-
-@media (max-width: 768px) {
-  .search-tags {
-    padding-left: 0;
-  }
-  
-  .hot-searches {
-    .hot-label {
-      position: static;
-      transform: none;
-      margin-bottom: 8px;
-    }
-  }
-}
-
-.category-nav {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  background: #fff;
-  border-radius: 12px;
-  padding: 16px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
-  margin-bottom: 24px;
-  gap: 12px;
-}
-
-.nav-item {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 12px;
-  padding: 12px;
-  cursor: pointer;
-  border-radius: 8px;
-  transition: all 0.3s;
-  
-  .el-icon {
-    font-size: 18px;
-    color: #606266;
-    transition: all 0.3s;
-  }
-  
-  span {
-    font-size: 14px;
-    color: #606266;
-  }
-  
-  &:hover {
-    background: #f5f7fa;
-    
-    .el-icon {
-      color: #409EFF;
-      transform: scale(1.1);
-    }
-    
-    span {
-      color: #409EFF;
-    }
-  }
-  
-  &.active {
-    background: #ecf5ff;
-    
-    .el-icon {
-      color: #409EFF;
-      transform: scale(1.1);
-    }
-    
-    span {
-      color: #409EFF;
-      font-weight: 500;
-    }
-  }
-}
-
-@media (max-width: 1200px) {
-  .category-nav {
-    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-    gap: 8px;
-    padding: 12px;
-  }
-  
-  .nav-item {
-    padding: 8px;
-  }
-}
-
-.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;
+.category-tabs {
   margin-bottom: 20px;
-  h2 {
-    font-size: 20px;
-    color: #303133;
-  }
 }
 
-.video-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 24px;
-  margin-bottom: 24px;
+.video-card {
+  background: #fff;
+  border-radius: 8px;
+  overflow: hidden;
+  cursor: pointer;
+  transition: all 0.3s;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
 }
 
-.pagination {
+.video-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+}
+
+.thumbnail {
+  position: relative;
+  width: 100%;
+  padding-top: 56.25%; /* 16:9 比例 */
+}
+
+.thumbnail img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.duration {
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  background: rgba(0,0,0,0.7);
+  color: #fff;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+.video-info {
+  padding: 12px;
+}
+
+.video-info h3 {
+  margin: 0 0 8px;
+  font-size: 16px;
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.description {
+  color: #666;
+  font-size: 14px;
+  margin-bottom: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.meta {
   display: flex;
-  justify-content: center;
-  margin-top: 32px;
-  padding: 20px 0;
-  
-  :deep(.el-pagination) {
-    justify-content: center;
-  }
+  align-items: center;
+  gap: 12px;
+  color: #999;
+  font-size: 13px;
 }
 
-/* 响应式布局 */
-@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;
-  }
+.meta span {
+  display: flex;
+  align-items: center;
+  gap: 4px;
 }
 
-/* 添加加载动画 */
-.loading-skeleton {
-  background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 50%, #f2f2f2 75%);
-  background-size: 200% 100%;
-  animation: loading 1.5s infinite;
-}
-
-@keyframes loading {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
+.meta .el-icon {
+  font-size: 16px;
 }
 </style> 
\ No newline at end of file