Compare commits

..

No commits in common. "e894c20b98f3c9113eb7c7e703e8120d6f83e6bc" and "8663aadfb33bac0e6880fe70155de5ee58c903d1" have entirely different histories.

4 changed files with 941 additions and 538 deletions

View File

@ -41,7 +41,7 @@ const mockVideos: Video[] = [
duration: '15:30', duration: '15:30',
category: 'health', category: 'health',
views: 2345, views: 2345,
description: '专业生讲解养生知识', description: '专业<EFBFBD><EFBFBD>生讲解养生知识',
uploadTime: '2024-03-19', uploadTime: '2024-03-19',
likes: 342, likes: 342,
comments: 67, comments: 67,
@ -99,108 +99,54 @@ export const videoCategories = [
{ label: '新闻资讯', value: 'news' } { label: '新闻资讯', value: 'news' }
] ]
// 视频相关接口 // 模拟 API 接口
export const videoApi = { 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
} }

View File

@ -6,32 +6,38 @@
<div class="right"> <div class="right">
<template v-if="userStore.userInfo"> <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> </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>
<template v-else> <template v-else>
<router-link to="/login" class="login-btn"> <router-link to="/login" class="login-btn">
@ -136,14 +142,31 @@ const handleLogout = async () => {
text-decoration: none; text-decoration: none;
} }
.el-dropdown-menu__item { .menu-items {
display: flex !important; padding: 4px 0;
}
.menu-item {
display: flex;
align-items: center; align-items: center;
gap: 8px; 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 { .el-icon {
margin-right: 4px; font-size: 16px;
} }
.el-icon--right { .el-icon--right {

View File

@ -1,22 +1,16 @@
import './assets/styles/global.css' 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 ElementPlus from 'element-plus'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import 'element-plus/dist/index.css' import 'element-plus/dist/index.css'
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
import { createPinia } from 'pinia'
const app = createApp(App) 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(ElementPlus)
app.use(pinia)
app.use(router) app.use(router)
app.mount('#app') app.mount('#app')

File diff suppressed because it is too large Load Diff