Compare commits
No commits in common. "e894c20b98f3c9113eb7c7e703e8120d6f83e6bc" and "8663aadfb33bac0e6880fe70155de5ee58c903d1" have entirely different histories.
e894c20b98
...
8663aadfb3
126
src/api/video.ts
126
src/api/video.ts
|
@ -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
|
|
||||||
}
|
|
|
@ -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 {
|
||||||
|
|
14
src/main.ts
14
src/main.ts
|
@ -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
Loading…
Reference in New Issue