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

chore: format portal home view

Browse Source
This commit is contained in:
Rogee
2026-01-08 14:09:42 +08:00
parent edbb62449b
commit f4efcefe20
1 changed files with 118 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
frontend/portal/src/views/HomeView.vue
View File

@@ -1,5 +1,5 @@
<script setup>
import { ref, onMounted } from 'vue';
import { onMounted, ref } from 'vue';
import { contentApi } from '../../api/content';
import { tenantApi } from '../../api/tenant';
@@ -87,7 +87,8 @@ onMounted(fetchData);
<template>
<div class="mx-auto max-w-screen-xl py-8">
<!-- Hero Banner -->
<div class="relative w-full h-[400px] rounded-2xl overflow-hidden bg-slate-900 mb-8 group" v-if="bannerItems.length > 0">
<div class="relative w-full h-[400px] rounded-2xl overflow-hidden bg-slate-900 mb-8 group"
v-if="bannerItems.length > 0">
<div v-for="(item, index) in bannerItems" :key="item.id"
class="absolute inset-0 transition-opacity duration-700"
:class="{ 'opacity-100 z-10': activeBannerIndex === index, 'opacity-0 z-0': activeBannerIndex !== index }">
@@ -95,7 +96,8 @@ onMounted(fetchData);
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent"></div>
<div class="absolute bottom-0 left-0 p-10 max-w-2xl text-white">
<div class="inline-block px-3 py-1 bg-red-600 text-white text-xs font-bold rounded mb-3">置顶推荐</div>
<h2 class="text-4xl font-bold mb-4 leading-tight cursor-pointer hover:underline" @click="$router.push(`/contents/${item.id}`)">{{ item.title }}</h2>
<h2 class="text-4xl font-bold mb-4 leading-tight cursor-pointer hover:underline"
@click="$router.push(`/contents/${item.id}`)">{{ item.title }}</h2>
<p class="text-lg text-slate-200 line-clamp-2">{{ item.description || item.title }}</p>
</div>
</div>
@@ -119,11 +121,15 @@ onMounted(fetchData);
<!-- Filter Bar -->
<div class="mb-8">
<div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-6 border-b border-slate-200 pb-4">
<div
class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-6 border-b border-slate-200 pb-4">
<div class="flex items-center gap-8">
<button class="text-lg font-bold text-primary-600 border-b-2 border-primary-600 -mb-4.5 pb-4 px-2">推荐</button>
<button class="text-lg font-medium text-slate-500 hover:text-slate-800 -mb-4.5 pb-4 px-2 transition-colors">最新</button>
<button class="text-lg font-medium text-slate-500 hover:text-slate-800 -mb-4.5 pb-4 px-2 transition-colors">热门</button>
<button
class="text-lg font-bold text-primary-600 border-b-2 border-primary-600 -mb-4.5 pb-4 px-2">推荐</button>
<button
class="text-lg font-medium text-slate-500 hover:text-slate-800 -mb-4.5 pb-4 px-2 transition-colors">最新</button>
<button
class="text-lg font-medium text-slate-500 hover:text-slate-800 -mb-4.5 pb-4 px-2 transition-colors">热门</button>
</div>
<!-- Global Search -->
@@ -155,13 +161,15 @@ onMounted(fetchData);
<div class="col-span-12 lg:col-span-8 xl:col-span-9 space-y-6">
<!-- Matched Creators (Search Result) -->
<div v-if="searchKeyword && matchedCreators.length > 0" class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6">
<div v-if="searchKeyword && matchedCreators.length > 0"
class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6">
<h3 class="font-bold text-slate-900 mb-4">相关频道</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div v-for="creator in matchedCreators" :key="creator.id"
class="flex items-center gap-3 p-3 rounded-xl hover:bg-slate-50 transition-colors cursor-pointer border border-transparent hover:border-slate-200"
@click="$router.push(`/creators/${creator.id}`)">
<img :src="creator.avatar || `https://api.dicebear.com/7.x/avataaars/svg?seed=${creator.id}`" class="w-12 h-12 rounded-full border border-slate-100">
<img :src="creator.avatar || `https://api.dicebear.com/7.x/avataaars/svg?seed=${creator.id}`"
class="w-12 h-12 rounded-full border border-slate-100">
<div class="flex-1 min-w-0">
<div class="font-bold text-slate-900 truncate">{{ creator.name }}</div>
<div class="text-xs text-slate-500 truncate">{{ creator.bio || '暂无简介' }}</div>
@@ -175,30 +183,42 @@ onMounted(fetchData);
<div class="flex gap-8">
<div class="flex-1 min-w-0 flex flex-col">
<div class="flex items-center gap-3 mb-3">
<span v-if="item.price === 0" class="px-2 py-0.5 rounded text-xs font-bold bg-green-500 text-white">免费</span>
<span v-if="item.price === 0"
class="px-2 py-0.5 rounded text-xs font-bold bg-green-500 text-white">免费</span>
<span v-else class="px-2 py-0.5 rounded text-xs font-bold bg-red-600 text-white">付费</span>
<span class="text-xs font-bold text-slate-700 bg-slate-50 border border-slate-100 px-2 py-0.5 rounded-full">{{ item.genre }}</span>
<span
class="text-xs font-bold text-slate-700 bg-slate-50 border border-slate-100 px-2 py-0.5 rounded-full">{{
item.genre }}</span>
</div>
<h3 class="text-xl font-bold text-slate-900 mb-3 leading-snug group-hover:text-primary-600 transition-colors">{{ item.title }}</h3>
<p class="text-base text-slate-500 line-clamp-2 mb-6 leading-relaxed">{{ item.description || item.title }}</p>
<h3
class="text-xl font-bold text-slate-900 mb-3 leading-snug group-hover:text-primary-600 transition-colors">
{{ item.title }}</h3>
<p class="text-base text-slate-500 line-clamp-2 mb-6 leading-relaxed">{{ item.description ||
item.title }}</p>
<div class="mt-auto flex items-center justify-between">
<div class="flex items-center gap-3 text-sm text-slate-500">
<img :src="item.author_avatar || 'https://api.dicebear.com/7.x/avataaars/svg?seed=' + item.author_id" class="w-7 h-7 rounded-full ring-2 ring-white">
<img
:src="item.author_avatar || 'https://api.dicebear.com/7.x/avataaars/svg?seed=' + item.author_id"
class="w-7 h-7 rounded-full ring-2 ring-white">
<span class="font-medium text-slate-700">{{ item.author_name || 'Unknown' }}</span>
<span class="text-slate-300">|</span>
<span>{{ item.create_time || '刚刚' }}</span>
</div>
<div class="flex items-center gap-4">
<span class="text-sm text-slate-400 font-medium"><i class="pi pi-eye mr-1"></i> {{ item.views }}</span>
<span class="text-sm text-slate-400 font-medium"><i class="pi pi-eye mr-1"></i> {{ item.views
}}</span>
<span class="text-xl font-bold text-red-600">¥ {{ item.price }}</span>
</div>
</div>
</div>
<div v-if="item.cover" class="w-[280px] h-[157px] flex-shrink-0 rounded-xl overflow-hidden relative bg-slate-100 hidden sm:block shadow-inner">
<img :src="item.cover" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
<div v-if="item.cover"
class="w-[280px] h-[157px] flex-shrink-0 rounded-xl overflow-hidden relative bg-slate-100 hidden sm:block shadow-inner">
<img :src="item.cover"
class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
<div class="absolute inset-0 bg-black/10 group-hover:bg-black/0 transition-colors"></div>
<div class="absolute inset-0 flex items-center justify-center">
<i class="pi pi-play-circle text-5xl text-white opacity-0 group-hover:opacity-100 transition-all scale-75 group-hover:scale-100 drop-shadow-lg"></i>
<i
class="pi pi-play-circle text-5xl text-white opacity-0 group-hover:opacity-100 transition-all scale-75 group-hover:scale-100 drop-shadow-lg"></i>
</div>
</div>
</div>
@@ -233,12 +253,15 @@ onMounted(fetchData);
<h3 class="font-bold text-slate-900 mb-4">推荐名家</h3>
<div class="space-y-4">
<div v-for="creator in recommendedCreators" :key="creator.id" class="flex items-center gap-3">
<img :src="creator.avatar || `https://api.dicebear.com/7.x/avataaars/svg?seed=${creator.id}`" class="w-10 h-10 rounded-full cursor-pointer" @click="$router.push(`/creators/${creator.id}`)">
<img :src="creator.avatar || `https://api.dicebear.com/7.x/avataaars/svg?seed=${creator.id}`"
class="w-10 h-10 rounded-full cursor-pointer" @click="$router.push(`/creators/${creator.id}`)">
<div class="flex-1 min-w-0">
<div class="font-bold text-slate-900 text-sm truncate hover:text-primary-600 cursor-pointer" @click="$router.push(`/creators/${creator.id}`)">{{ creator.name }}</div>
<div class="font-bold text-slate-900 text-sm truncate hover:text-primary-600 cursor-pointer"
@click="$router.push(`/creators/${creator.id}`)">{{ creator.name }}</div>
<div class="text-xs text-slate-500 truncate">粉丝 {{ creator.stats?.followers || 0 }}</div>
</div>
<button class="px-3 py-1 bg-primary-50 text-primary-600 text-xs font-bold rounded-full hover:bg-primary-100">关注</button>
<button
class="px-3 py-1 bg-primary-50 text-primary-600 text-xs font-bold rounded-full hover:bg-primary-100">关注</button>
</div>
<div v-if="recommendedCreators.length === 0" class="text-center text-slate-400 text-sm">暂无推荐</div>
</div>
@@ -251,7 +274,9 @@ onMounted(fetchData);
</h3>
<ul class="space-y-4">
<li v-for="(item, index) in trendingItems" :key="item.id" class="flex gap-3 items-start">
<span class="font-bold italic text-lg w-4" :class="index === 0 ? 'text-red-500' : (index === 1 ? 'text-orange-500' : 'text-yellow-500')">{{ index + 1 }}</span>
<span class="font-bold italic text-lg w-4"
:class="index === 0 ? 'text-red-500' : (index === 1 ? 'text-orange-500' : 'text-yellow-500')">{{
index + 1 }}</span>
<div class="flex-1">
<h4 @click="$router.push(`/contents/${item.id}`)"
class="text-sm font-medium text-slate-800 line-clamp-2 hover:text-primary-600 cursor-pointer">