src/api/video.ts

@@ -41,7 +41,7 @@ const mockVideos: Video[] = [
     duration: '15:30',
     category: 'health',
     views: 2345,
-    description: '专业医生讲解养生知识',
+    description: '专业<EFBFBD><EFBFBD>生讲解养生知识',
     uploadTime: '2024-03-19',
     likes: 342,
     comments: 67,
@@ -99,108 +99,54 @@ export const videoCategories = [
   { label: '新闻资讯', value: 'news' }
 ]
 
-// 视频相关接口
+// 模拟 API 接口
 export const videoApi = {
   // 获取视频列表
-  async getList(params: {
+  async getVideoList(category: string = ''): Promise<Video[]> {
-    pageNum?: number
+    await delay(500) // 模拟网络延迟
-    pageSize?: number
+    return mockVideos.filter(video => 
-    keyword?: string
+      category ? video.category === category : true
-  }) {
+    )
-    const res = await request.get('/videos', { params })
-    return res.data
   },
 
   // 获取视频详情
-  async getDetail(id: number) {
+  async getVideoDetail(id: number): Promise<Video | undefined> {
-    const res = await request.get(`/videos/${id}`)
+    await delay(300)
-    return res.data
+    return mockVideos.find(video => video.id === id)
   },
 
-  // 上传视频
+  // 更新观看次数
-  async upload(data: FormData) {
+  async updateViews(id: number): Promise<void> {
-    const res = await request.post('/videos/upload', data, {
+    await delay(200)
-      headers: {
+    const video = mockVideos.find(v => v.id === id)
-        'Content-Type': 'multipart/form-data'
+    if (video) {
-      }
+      video.views += 1
-    })
+    }
-    return res.data
   },
 
-  // 更新视频信息
+  // 点赞视频
-  async update(id: number, data: {
+  async likeVideo(id: number): Promise<void> {
-    title: string
+    await delay(200)
-    description: string
+    const video = mockVideos.find(v => v.id === id)
-    tags?: string
+    if (video) {
-  }) {
+      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 getRecommend(limit: number = 10) {
+  async getRecommendedVideos(currentId: number): Promise<Video[]> {
-    const res = await request.get('/videos/recommend', {
+    await delay(300)
-      params: { limit }
+    return mockVideos
-    })
+      .filter(video => video.id !== currentId)
-    return res.data
+      .sort(() => Math.random() - 0.5)
+      .slice(0, 3)
   },
 
-  // 获取相似视频
+  // 获取热门视频
-  async getSimilar(id: number, limit: number = 10) {
+  async getHotVideos(): Promise<Video[]> {
-    const res = await request.get(`/videos/${id}/similar`, {
+    await delay(300)
-      params: { limit }
+    return [...mockVideos]
-    })
+      .sort((a, b) => b.views - a.views)
-    return res.data
+      .slice(0, 5)
   }
-}
-
-// 视频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,32 +6,38 @@
     
     <div class="right">
       <template v-if="userStore.userInfo">
-        <el-dropdown trigger="click">
+        <el-popover
-          <div class="user-info">
+          :width="200"
-            <el-avatar 
+          trigger="click"
-              :size="32" 
+          placement="bottom-end"
-              :src="userStore.userInfo.avatar || defaultAvatar"
+        >
-            />
+          <template #reference>
-            <span class="nickname">{{ userStore.userInfo.nickname || '用户' }}</span>
+            <div class="user-info">
-            <el-icon class="el-icon--right"><arrow-down /></el-icon>
+              <el-avatar 
-          </div>
+                :size="32" 
-          <template #dropdown>
+                :src="userStore.userInfo.avatar || defaultAvatar"
-            <el-dropdown-menu>
+              />
-              <el-dropdown-item @click="handleProfile">
+              <span class="nickname">{{ userStore.userInfo.nickname || '用户' }}</span>
-                <el-icon><User /></el-icon>
+              <el-icon class="el-icon--right"><arrow-down /></el-icon>
-                个人中心
+            </div>
-              </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>
+          
+          <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>
       <template v-else>
         <router-link to="/login" class="login-btn">
@@ -136,14 +142,31 @@ const handleLogout = async () => {
   text-decoration: none;
 }
 
-.el-dropdown-menu__item {
+.menu-items {
-  display: flex !important;
+  padding: 4px 0;
+}
+
+.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 {
-  margin-right: 4px;
+  font-size: 16px;
 }
 
 .el-icon--right {

src/main.ts

@@ -1,22 +1,16 @@
 import './assets/styles/global.css'
-import { createApp, type Component } from 'vue'
+import { createApp } 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')