rogee/quyun-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(portal): complete user center pages and refine interactive feedback

Browse Source
This commit is contained in:
Rogee
2025-12-26 10:25:26 +08:00
parent 648e3f7c21
commit 6b71ac47d1
7 changed files with 173 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
frontend/portal/src/views/user/LibraryView.vue
View File

@@ -1,6 +1,133 @@
<template>
<div class="p-8">
<h1 class="text-2xl font-bold mb-4">My Library</h1>
<p class="text-slate-400">(Purchased content)</p>
<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">
<select class="h-10 pl-3 pr-8 rounded-lg border border-slate-200 bg-white text-sm focus:border-primary-500 focus:outline-none cursor-pointer hover:border-primary-300 transition-colors">
<option>全部类型</option>
<option>视频</option>
<option>音频</option>
<option>图文专栏</option>
</select>
<div class="relative">
<i class="pi pi-search absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"></i>
<input type="text" placeholder="搜索已购内容..." class="h-10 pl-9 pr-4 rounded-lg border border-slate-200 text-sm focus:border-primary-500 focus:outline-none w-48 transition-all focus:w-64">
</div>
</div>
</div>
<!-- Content List (Vertical Stack) -->
<div class="space-y-6">
<div
v-for="item in libraryItems"
:key="item.id"
@click="item.status !== 'offline' ? $router.push(`/contents/${item.id}`) : null"
class="group relative bg-white border border-slate-200 rounded-xl overflow-hidden hover:shadow-md transition-all hover:border-primary-200 flex flex-col sm:flex-row"
:class="item.status !== 'offline' ? 'cursor-pointer active:scale-[0.99]' : 'opacity-75 cursor-not-allowed'"
>
<!-- Cover -->
<div class="w-full sm:w-64 aspect-video bg-slate-100 relative overflow-hidden flex-shrink-0">
<img :src="item.cover" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" :class="{ 'grayscale opacity-70': item.status === 'expired' || item.status === 'offline' }">
<!-- Type Icon -->
<div class="absolute bottom-2 left-2 w-8 h-8 bg-black/60 rounded-full flex items-center justify-center text-white backdrop-blur-sm">
<i class="pi" :class="getTypeIcon(item.type)"></i>
</div>
</div>
<!-- Info -->
<div class="p-6 flex flex-col flex-1 min-w-0">
<div class="flex items-start justify-between gap-4 mb-2">
<h3 class="font-bold text-slate-900 text-lg sm:text-xl line-clamp-2 group-hover:text-primary-600 transition-colors">{{ item.title }}</h3>
<!-- Status Badges (Moved here for list layout) -->
<span v-if="item.status === 'active'" class="flex-shrink-0 px-2 py-1 bg-green-100 text-green-700 text-xs font-bold rounded">永久有效</span>
<span v-else-if="item.status === 'expiring'" class="flex-shrink-0 px-2 py-1 bg-orange-100 text-orange-700 text-xs font-bold rounded">剩余 3 天</span>
<span v-else-if="item.status === 'expired'" class="flex-shrink-0 px-2 py-1 bg-slate-100 text-slate-500 text-xs font-bold rounded">已过期</span>
<span v-else-if="item.status === 'offline'" class="flex-shrink-0 px-2 py-1 bg-red-100 text-red-600 text-xs font-bold rounded">已下架</span>
</div>
<div class="flex items-center gap-3 text-sm text-slate-500 mb-4">
<img :src="item.tenantAvatar" class="w-6 h-6 rounded-full">
<span class="font-medium text-slate-700">{{ item.tenantName }}</span>
<span class="w-1 h-1 bg-slate-300 rounded-full"></span>
<span>{{ item.purchaseDate }} 购买</span>
</div>
<!-- Action -->
<div class="mt-auto pt-4 border-t border-slate-50 flex items-center justify-end">
<button v-if="item.status === 'active' || item.status === 'expiring'" class="px-6 py-2 bg-primary-600 text-white text-base font-bold rounded-lg hover:bg-primary-700 transition-colors shadow-sm shadow-primary-200">
立即阅读
</button>
<button v-else class="px-6 py-2 bg-slate-100 text-slate-400 text-base font-bold rounded-lg cursor-not-allowed">
不可查看
</button>
</div>
</div>
</div>
</div>
<!-- Empty State (Hidden) -->
<!-- <div class="flex flex-col items-center justify-center py-20">
<div class="w-20 h-20 bg-slate-50 rounded-full flex items-center justify-center mb-4"><i class="pi pi-book text-3xl text-slate-300"></i></div>
<p class="text-slate-500">暂无已购内容</p>
<button class="mt-4 text-primary-600 font-medium hover:underline">去发现好内容</button>
</div> -->
</div>
</template>
<script setup>
import { ref } from 'vue';
const getTypeIcon = (type) => {
switch(type) {
case 'video': return 'pi-video';
case 'audio': return 'pi-volume-up';
default: return 'pi-file';
}
};
// Mock Data
const libraryItems = ref([
{
id: 1,
title: '《锁麟囊》程派艺术解析专栏',
cover: 'https://images.unsplash.com/photo-1514306191717-452ec28c7f31?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60',
tenantName: '梅派传人小林',
tenantAvatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Master1',
purchaseDate: '2025-12-20',
type: 'article',
status: 'active'
},
{
id: 2,
title: '京剧打击乐基础教程 (视频课)',
cover: 'https://images.unsplash.com/photo-1533174072545-e8d4aa97edf9?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60',
tenantName: '戏曲学院官方',
tenantAvatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=School',
purchaseDate: '2025-11-15',
type: 'video',
status: 'expiring'
},
{
id: 3,
title: '【已过期】2024 新年戏曲晚会直播回放',
cover: 'https://images.unsplash.com/photo-1469571486292-0ba58a3f068b?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60',
tenantName: 'CCTV 戏曲',
tenantAvatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=TV',
purchaseDate: '2025-01-01',
type: 'video',
status: 'expired'
},
{
id: 4,
title: '【已下架】某某名家访谈录',
cover: 'https://images.unsplash.com/photo-1516450360452-9312f5e86fc7?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60',
tenantName: '未知用户',
tenantAvatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Unknown',
purchaseDate: '2024-12-10',
type: 'audio',
status: 'offline'
}
]);
</script>