From d4716b979f107fa47e49de3ed9e8e3f7aac0f0b9 Mon Sep 17 00:00:00 2001
From: Rogee <rogee@ipao.vip>
Date: Fri, 26 Dec 2025 21:45:15 +0800
Subject: [PATCH] feat(portal): add favorites and likes views; update user
 layout with new navigation links

---
 frontend/portal/src/layout/LayoutUser.vue     | 19 +++-
 frontend/portal/src/router/index.js           | 10 ++
 .../portal/src/views/user/FavoritesView.vue   | 94 +++++++++++++++++++
 frontend/portal/src/views/user/LikesView.vue  | 82 ++++++++++++++++
 4 files changed, 200 insertions(+), 5 deletions(-)
 create mode 100644 frontend/portal/src/views/user/FavoritesView.vue
 create mode 100644 frontend/portal/src/views/user/LikesView.vue

diff --git a/frontend/portal/src/layout/LayoutUser.vue b/frontend/portal/src/layout/LayoutUser.vue
index 56c1b5f..d8a65bb 100644
--- a/frontend/portal/src/layout/LayoutUser.vue
+++ b/frontend/portal/src/layout/LayoutUser.vue
@@ -37,11 +37,20 @@
                      </router-link>
                      <router-link to="/me/library" 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-book 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-book text-lg"></i>
+                                             <span>已购内容</span>
+                                          </router-link>
+                                          <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>
diff --git a/frontend/portal/src/router/index.js b/frontend/portal/src/router/index.js
index 209ed3e..bccc2fd 100644
--- a/frontend/portal/src/router/index.js
+++ b/frontend/portal/src/router/index.js
@@ -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',
diff --git a/frontend/portal/src/views/user/FavoritesView.vue b/frontend/portal/src/views/user/FavoritesView.vue
new file mode 100644
index 0000000..b172937
--- /dev/null
+++ b/frontend/portal/src/views/user/FavoritesView.vue
@@ -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>
diff --git a/frontend/portal/src/views/user/LikesView.vue b/frontend/portal/src/views/user/LikesView.vue
new file mode 100644
index 0000000..4b85e95
--- /dev/null
+++ b/frontend/portal/src/views/user/LikesView.vue
@@ -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>