feat(portal): add favorites and likes views; update user layout with new navigation links
This commit is contained in:
@@ -40,8 +40,17 @@
|
||||
<i class="pi pi-book text-lg"></i>
|
||||
<span>已购内容</span>
|
||||
</router-link>
|
||||
<router-link to="/me/notifications" active-class="bg-primary-50 text-primary-600 font-semibold"
|
||||
<router-link to="/me/favorites" active-class="bg-primary-50 text-primary-600 font-semibold"
|
||||
class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors">
|
||||
<i class="pi pi-heart text-lg"></i>
|
||||
<span>我的收藏</span>
|
||||
</router-link>
|
||||
<router-link to="/me/likes" active-class="bg-primary-50 text-primary-600 font-semibold"
|
||||
class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors">
|
||||
<i class="pi pi-thumbs-up text-lg"></i>
|
||||
<span>我的点赞</span>
|
||||
</router-link>
|
||||
<router-link to="/me/notifications" active-class="bg-primary-50 text-primary-600 font-semibold" class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors">
|
||||
<i class="pi pi-bell text-lg"></i>
|
||||
<span>消息中心</span>
|
||||
</router-link>
|
||||
|
||||
@@ -88,6 +88,16 @@ const router = createRouter({
|
||||
name: 'user-library',
|
||||
component: () => import('../views/user/LibraryView.vue')
|
||||
},
|
||||
{
|
||||
path: 'favorites',
|
||||
name: 'user-favorites',
|
||||
component: () => import('../views/user/FavoritesView.vue')
|
||||
},
|
||||
{
|
||||
path: 'likes',
|
||||
name: 'user-likes',
|
||||
component: () => import('../views/user/LikesView.vue')
|
||||
},
|
||||
{
|
||||
path: 'notifications',
|
||||
name: 'user-notifications',
|
||||
|
||||
94
frontend/portal/src/views/user/FavoritesView.vue
Normal file
94
frontend/portal/src/views/user/FavoritesView.vue
Normal file
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<div class="bg-white rounded-xl shadow-sm border border-slate-100 min-h-[600px] p-8">
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<h1 class="text-2xl font-bold text-slate-900">我的收藏</h1>
|
||||
<div class="flex gap-4">
|
||||
<button class="text-sm font-bold text-slate-500 hover:text-slate-900 cursor-pointer">批量管理</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content Grid -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div v-for="item in items" :key="item.id" class="group relative bg-white border border-slate-200 rounded-xl overflow-hidden hover:shadow-md transition-all hover:border-primary-200 cursor-pointer" @click="$router.push(`/contents/${item.id}`)">
|
||||
|
||||
<!-- Cover -->
|
||||
<div class="aspect-video bg-slate-100 relative overflow-hidden">
|
||||
<img :src="item.cover" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
|
||||
<div class="absolute bottom-2 left-2 px-1.5 py-0.5 bg-black/60 text-white text-xs rounded flex items-center gap-1">
|
||||
<i class="pi" :class="item.type === 'video' ? 'pi-play-circle' : 'pi-book'"></i>
|
||||
<span>{{ item.duration || '专栏' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Info -->
|
||||
<div class="p-4">
|
||||
<h3 class="font-bold text-slate-900 mb-2 line-clamp-2 group-hover:text-primary-600 transition-colors">{{ item.title }}</h3>
|
||||
<div class="flex items-center gap-2 text-xs text-slate-500 mb-3">
|
||||
<img :src="item.authorAvatar" class="w-5 h-5 rounded-full">
|
||||
<span>{{ item.author }}</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs text-slate-400 border-t border-slate-50 pt-3">
|
||||
<span>{{ item.time }}</span>
|
||||
<button @click.stop="removeItem(item.id)" class="hover:text-red-500 flex items-center gap-1 transition-colors"><i class="pi pi-heart-fill text-red-500"></i> 取消收藏</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div v-if="items.length === 0" class="text-center py-20">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-slate-50 mb-4">
|
||||
<i class="pi pi-star text-2xl text-slate-300"></i>
|
||||
</div>
|
||||
<p class="text-slate-500 text-lg">暂无收藏内容</p>
|
||||
<router-link to="/" class="mt-4 inline-block text-primary-600 font-medium hover:underline">去发现好内容</router-link>
|
||||
</div>
|
||||
|
||||
<Toast />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import Toast from 'primevue/toast';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
|
||||
const toast = useToast();
|
||||
|
||||
const items = ref([
|
||||
{
|
||||
id: 1,
|
||||
title: '程派《荒山泪》夜织选段:沉浸式视听体验',
|
||||
cover: 'https://images.unsplash.com/photo-1516450360452-9312f5e86fc7?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60',
|
||||
author: '梅派传人小林',
|
||||
authorAvatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Master1',
|
||||
type: 'video',
|
||||
duration: '12:40',
|
||||
time: '2天前收藏'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '京剧脸谱颜色的含义深度解析',
|
||||
cover: 'https://images.unsplash.com/photo-1533174072545-e8d4aa97edf9?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60',
|
||||
author: '戏曲学院官方',
|
||||
authorAvatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=School',
|
||||
type: 'article',
|
||||
time: '1周前收藏'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '经典唱段合集:名家名段欣赏',
|
||||
cover: 'https://images.unsplash.com/photo-1469571486292-0ba58a3f068b?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60',
|
||||
author: 'CCTV 戏曲',
|
||||
authorAvatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=TV',
|
||||
type: 'video',
|
||||
duration: '45:00',
|
||||
time: '1个月前收藏'
|
||||
}
|
||||
]);
|
||||
|
||||
const removeItem = (id) => {
|
||||
items.value = items.value.filter(i => i.id !== id);
|
||||
toast.add({ severity: 'success', summary: '已取消收藏', life: 2000 });
|
||||
};
|
||||
</script>
|
||||
82
frontend/portal/src/views/user/LikesView.vue
Normal file
82
frontend/portal/src/views/user/LikesView.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<div class="bg-white rounded-xl shadow-sm border border-slate-100 min-h-[600px] p-8">
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<h1 class="text-2xl font-bold text-slate-900">我的点赞</h1>
|
||||
</div>
|
||||
|
||||
<!-- Content Grid -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div v-for="item in items" :key="item.id" class="group relative bg-white border border-slate-200 rounded-xl overflow-hidden hover:shadow-md transition-all hover:border-primary-200 cursor-pointer" @click="$router.push(`/contents/${item.id}`)">
|
||||
|
||||
<!-- Cover -->
|
||||
<div class="aspect-video bg-slate-100 relative overflow-hidden">
|
||||
<img :src="item.cover" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
|
||||
<div class="absolute bottom-2 left-2 px-1.5 py-0.5 bg-black/60 text-white text-xs rounded flex items-center gap-1">
|
||||
<i class="pi" :class="item.type === 'video' ? 'pi-play-circle' : 'pi-book'"></i>
|
||||
<span>{{ item.duration || '文章' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Info -->
|
||||
<div class="p-4">
|
||||
<h3 class="font-bold text-slate-900 mb-2 line-clamp-2 group-hover:text-primary-600 transition-colors">{{ item.title }}</h3>
|
||||
<div class="flex items-center gap-2 text-xs text-slate-500 mb-3">
|
||||
<img :src="item.authorAvatar" class="w-5 h-5 rounded-full">
|
||||
<span>{{ item.author }}</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs text-slate-400 border-t border-slate-50 pt-3">
|
||||
<span>{{ item.time }}</span>
|
||||
<button @click.stop="removeItem(item.id)" class="hover:text-primary-600 flex items-center gap-1 transition-colors"><i class="pi pi-thumbs-up-fill text-primary-600"></i> 取消点赞</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div v-if="items.length === 0" class="text-center py-20">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-slate-50 mb-4">
|
||||
<i class="pi pi-thumbs-up text-2xl text-slate-300"></i>
|
||||
</div>
|
||||
<p class="text-slate-500 text-lg">暂无点赞内容</p>
|
||||
<router-link to="/" class="mt-4 inline-block text-primary-600 font-medium hover:underline">去发现好内容</router-link>
|
||||
</div>
|
||||
|
||||
<Toast />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import Toast from 'primevue/toast';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
|
||||
const toast = useToast();
|
||||
|
||||
const items = ref([
|
||||
{
|
||||
id: 4,
|
||||
title: '《霸王别姬》全本实录珍藏版',
|
||||
cover: 'https://images.unsplash.com/photo-1514306191717-452ec28c7f31?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60',
|
||||
author: '梅派传人小林',
|
||||
authorAvatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Master1',
|
||||
type: 'video',
|
||||
duration: '120:00',
|
||||
time: '昨天点赞'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: '京剧打击乐基础教程',
|
||||
cover: 'https://images.unsplash.com/photo-1576014131795-d44019d02374?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60',
|
||||
author: '戏曲学院官方',
|
||||
authorAvatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=School',
|
||||
type: 'video',
|
||||
duration: '45:00',
|
||||
time: '3天前点赞'
|
||||
}
|
||||
]);
|
||||
|
||||
const removeItem = (id) => {
|
||||
items.value = items.value.filter(i => i.id !== id);
|
||||
toast.add({ severity: 'success', summary: '已取消点赞', life: 2000 });
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user