视频起步

src/api/video.ts

@@ -41,7 +41,7 @@ const mockVideos: Video[] = [
     duration: '15:30',
     category: 'health',
     views: 2345,
-    description: '专业<EFBFBD><EFBFBD>生讲解养生知识',
+    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[]> {
+  async getList(params: {
-    await delay(500) // 模拟网络延迟
+    pageNum?: number
-    return mockVideos.filter(video => 
+    pageSize?: number
-      category ? video.category === category : true
+    keyword?: string
-    )
+  }) {
+    const res = await request.get('/videos', { params })
+    return res.data
   },
 
   // 获取视频详情
-  async getVideoDetail(id: number): Promise<Video | undefined> {
+  async getDetail(id: number) {
-    await delay(300)
+    const res = await request.get(`/videos/${id}`)
-    return mockVideos.find(video => video.id === id)
+    return res.data
   },
 
-  // 更新观看次数
+  // 上传视频
-  async updateViews(id: number): Promise<void> {
+  async upload(data: FormData) {
-    await delay(200)
+    const res = await request.post('/videos/upload', data, {
-    const video = mockVideos.find(v => v.id === id)
+      headers: {
-    if (video) {
+        'Content-Type': 'multipart/form-data'
-      video.views += 1
+      }
-    }
+    })
+    return res.data
   },
 
-  // 点赞视频
+  // 更新视频信息
-  async likeVideo(id: number): Promise<void> {
+  async update(id: number, data: {
-    await delay(200)
+    title: string
-    const video = mockVideos.find(v => v.id === id)
+    description: string
-    if (video) {
+    tags?: string
-      video.likes += 1
+  }) {
-    }
+    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[]> {
+  async getRecommend(limit: number = 10) {
-    await delay(300)
+    const res = await request.get('/videos/recommend', {
-    return mockVideos
+      params: { limit }
-      .filter(video => video.id !== currentId)
+    })
-      .sort(() => Math.random() - 0.5)
+    return res.data
-      .slice(0, 3)
   },
 
-  // 获取热门视频
+  // 获取相似视频
-  async getHotVideos(): Promise<Video[]> {
+  async getSimilar(id: number, limit: number = 10) {
-    await delay(300)
+    const res = await request.get(`/videos/${id}/similar`, {
-    return [...mockVideos]
+      params: { limit }
-      .sort((a, b) => b.views - a.views)
+    })
-      .slice(0, 5)
+    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
 } 

src/components/layout/TopBar.vue

@@ -6,38 +6,32 @@
     
     <div class="right">
       <template v-if="userStore.userInfo">
-        <el-popover
+        <el-dropdown trigger="click">
-          :width="200"
+          <div class="user-info">
-          trigger="click"
+            <el-avatar 
-          placement="bottom-end"
+              :size="32" 
-        >
+              :src="userStore.userInfo.avatar || defaultAvatar"
-          <template #reference>
+            />
-            <div class="user-info">
+            <span class="nickname">{{ userStore.userInfo.nickname || '用户' }}</span>
-              <el-avatar 
+            <el-icon class="el-icon--right"><arrow-down /></el-icon>
-                :size="32" 
-                :src="userStore.userInfo.avatar || defaultAvatar"
-              />
-              <span class="nickname">{{ userStore.userInfo.nickname || '用户' }}</span>
-              <el-icon class="el-icon--right"><arrow-down /></el-icon>
-            </div>
-          </template>
-          
-          <div class="menu-items">
-            <div class="menu-item" @click="handleProfile">
-              <el-icon><User /></el-icon>
-              <span>个人中心</span>
-            </div>
-            <div class="menu-item" @click="handleSettings">
-              <el-icon><Setting /></el-icon>
-              <span>设置</span>
-            </div>
-            <div class="divider"></div>
-            <div class="menu-item" @click="handleLogout">
-              <el-icon><SwitchButton /></el-icon>
-              <span>退出登录</span>
-            </div>
           </div>
-        </el-popover>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item @click="handleProfile">
+                <el-icon><User /></el-icon>
+                个人中心
+              </el-dropdown-item>
+              <el-dropdown-item @click="handleSettings">
+                <el-icon><Setting /></el-icon>
+                设置
+              </el-dropdown-item>
+              <el-dropdown-item divided @click="handleLogout">
+                <el-icon><SwitchButton /></el-icon>
+                退出登录
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
       </template>
       <template v-else>
         <router-link to="/login" class="login-btn">
@@ -142,31 +136,14 @@ const handleLogout = async () => {
   text-decoration: none;
 }
 
-.menu-items {
+.el-dropdown-menu__item {
-  padding: 4px 0;
+  display: flex !important;
-}
-
-.menu-item {
-  display: flex;
   align-items: center;
   gap: 8px;
-  padding: 8px 16px;
-  cursor: pointer;
-  transition: background-color 0.3s;
-}
-
-.menu-item:hover {
-  background-color: #f5f7fa;
-}
-
-.divider {
-  height: 1px;
-  background-color: #ebeef5;
-  margin: 4px 0;
 }
 
 .el-icon {
-  font-size: 16px;
+  margin-right: 4px;
 }
 
 .el-icon--right {

src/main.ts

@@ -1,16 +1,22 @@
 import './assets/styles/global.css'
-import { createApp } from 'vue'
+import { createApp, type Component } from 'vue'
+import { createPinia } from 'pinia'
 import ElementPlus from 'element-plus'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import 'element-plus/dist/index.css'
+
 import App from './App.vue'
 import router from './router'
-import { createPinia } from 'pinia'
 
 const app = createApp(App)
-const pinia = createPinia()
 
+// 注册 Element Plus 图标
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component as Component)
+}
+
+app.use(createPinia())
 app.use(ElementPlus)
-app.use(pinia)
 app.use(router)
 
 app.mount('#app')