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

feat: 添加租户列表接口，优化租户相关功能；更新前端租户列表和收藏功能

Browse Source
This commit is contained in:
Rogee
2026-01-07 16:10:03 +08:00
parent 1298192157
commit 5b45f7d5c4
10 changed files with 252 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
frontend/portal/src/views/user/FavoritesView.vue
View File

@@ -15,8 +15,10 @@
<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>
<i class="pi" :class="item.type === 'video' ? 'pi-play-circle' : (item.type === 'audio' ? 'pi-volume-up' : 'pi-book')"></i>
<span v-if="item.type === 'video'">视频</span>
<span v-else-if="item.type === 'audio'">音频</span>
<span v-else>文章</span>
</div>
</div>
@@ -24,11 +26,11 @@
<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>
<img :src="item.author_avatar || `https://api.dicebear.com/7.x/avataaars/svg?seed=${item.author_id}`" class="w-5 h-5 rounded-full">
<span>{{ item.author_name }}</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>
<span>{{ item.created_at }}</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>
@@ -49,46 +51,37 @@
</template>
<script setup>
import { ref } from 'vue';
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import Toast from 'primevue/toast';
import { useToast } from 'primevue/usetoast';
import { userApi } from '../../api/user';
const router = useRouter();
const toast = useToast();
const items = ref([]);
const loading = ref(true);
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 fetchFavorites = async () => {
try {
const res = await userApi.getFavorites();
items.value = res || [];
} catch (e) {
console.error(e);
} finally {
loading.value = false;
}
]);
};
const removeItem = (id) => {
items.value = items.value.filter(i => i.id !== id);
toast.add({ severity: 'success', summary: '已取消收藏', life: 2000 });
onMounted(fetchFavorites);
const removeItem = async (id) => {
try {
await userApi.removeFavorite(id);
items.value = items.value.filter(i => i.id !== id);
toast.add({ severity: 'success', summary: '已取消收藏', life: 2000 });
} catch (e) {
toast.add({ severity: 'error', summary: '操作失败', detail: e.message, life: 3000 });
}
};
</script>