chore: update auth and portal
This commit is contained in:
@@ -1,86 +1,119 @@
|
||||
<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(tenantRoute(`/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="tenantRoute('/')" 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 { useRoute } from 'vue-router';
|
||||
import Toast from 'primevue/toast';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
import { tenantPath } from '../../utils/tenant';
|
||||
import { ref } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import Toast from "primevue/toast";
|
||||
import { useToast } from "primevue/usetoast";
|
||||
import { tenantPath } from "../../utils/tenant";
|
||||
|
||||
const toast = useToast();
|
||||
const route = useRoute();
|
||||
const tenantRoute = (path) => tenantPath(path, route);
|
||||
|
||||
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天前点赞'
|
||||
}
|
||||
{
|
||||
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 });
|
||||
items.value = items.value.filter((i) => i.id !== id);
|
||||
toast.add({ severity: "success", summary: "已取消点赞", life: 2000 });
|
||||
};
|
||||
</script>
|
||||
|
||||
<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(tenantRoute(`/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="tenantRoute('/')"
|
||||
class="mt-4 inline-block text-primary-600 font-medium hover:underline"
|
||||
>去发现好内容</router-link
|
||||
>
|
||||
</div>
|
||||
|
||||
<Toast />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user