674 lines
15 KiB
Vue
674 lines
15 KiB
Vue
<template>
|
|
<div class="home-page">
|
|
<section class="channel-panel page-shell">
|
|
<div
|
|
class="channel-main"
|
|
@mouseenter="categoryExpanded = true"
|
|
@mouseleave="categoryExpanded = false"
|
|
>
|
|
<div class="quick-entry-group">
|
|
<button
|
|
v-for="entry in quickEntries"
|
|
:key="entry.label"
|
|
class="quick-entry"
|
|
@click="entry.action()"
|
|
>
|
|
<span class="quick-icon">{{ entry.short }}</span>
|
|
<span>{{ entry.label }}</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="channel-grid">
|
|
<button
|
|
v-for="entry in visibleCategoryEntries"
|
|
:key="entry.label"
|
|
class="channel-pill"
|
|
@click="entry.action()"
|
|
>
|
|
{{ entry.label }}
|
|
</button>
|
|
<button
|
|
v-if="hiddenCategoryEntries.length"
|
|
class="channel-pill more-pill"
|
|
@mouseenter="categoryExpanded = true"
|
|
>
|
|
更多
|
|
</button>
|
|
</div>
|
|
|
|
<transition name="expand-fade">
|
|
<div
|
|
v-if="categoryExpanded && hiddenCategoryEntries.length"
|
|
class="channel-expand"
|
|
>
|
|
<button
|
|
v-for="entry in hiddenCategoryEntries"
|
|
:key="`extra-${entry.label}`"
|
|
class="channel-pill"
|
|
@click="entry.action()"
|
|
>
|
|
{{ entry.label }}
|
|
</button>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<section class="top-feed page-shell">
|
|
<div class="top-feed-main">
|
|
<van-swipe
|
|
class="banner-swipe"
|
|
:autoplay="4000"
|
|
indicator-color="#ffffff"
|
|
>
|
|
<van-swipe-item
|
|
v-for="item in bannerVideos"
|
|
:key="item.id"
|
|
>
|
|
<button
|
|
class="banner-card"
|
|
@click="goToVideo(item.id)"
|
|
>
|
|
<van-image
|
|
:src="getCoverUrl(item.coverUrl)"
|
|
fit="cover"
|
|
class="banner-image"
|
|
/>
|
|
<div class="banner-overlay">
|
|
<strong>{{ item.title }}</strong>
|
|
<span>{{ item.userNickname || '匿名用户' }}</span>
|
|
</div>
|
|
</button>
|
|
</van-swipe-item>
|
|
</van-swipe>
|
|
</div>
|
|
|
|
<div class="top-feed-side">
|
|
<button
|
|
v-for="item in topSideVideos"
|
|
:key="item.id"
|
|
class="top-video-card"
|
|
@click="goToVideo(item.id)"
|
|
>
|
|
<div class="top-video-cover">
|
|
<van-image
|
|
:src="getCoverUrl(item.coverUrl)"
|
|
fit="cover"
|
|
class="top-video-image"
|
|
/>
|
|
<div class="top-video-mask">
|
|
<span>{{ formatPlayCount(item.viewCount) }}</span>
|
|
<span>{{ formatDuration(item.duration) }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="top-video-title">
|
|
{{ item.title }}
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="content-section page-shell">
|
|
<div class="content-main">
|
|
<div
|
|
v-for="row in categoryRows"
|
|
:key="row.id"
|
|
class="content-row"
|
|
>
|
|
<div class="row-head">
|
|
<div class="row-title">
|
|
<span class="row-dot" />
|
|
<strong>{{ row.name }}</strong>
|
|
</div>
|
|
<button
|
|
class="row-more"
|
|
@click="router.push(`/category/${row.id}`)"
|
|
>
|
|
更多
|
|
</button>
|
|
</div>
|
|
|
|
<div class="row-grid">
|
|
<VideoCard
|
|
v-for="video in row.videos"
|
|
:key="`${row.id}-${video.id}`"
|
|
:video="video"
|
|
@click="goToVideo(video.id)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="!categoryRows.length"
|
|
class="content-row"
|
|
>
|
|
<div class="row-head">
|
|
<div class="row-title">
|
|
<span class="row-dot" />
|
|
<strong>最新发布</strong>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row-grid">
|
|
<VideoCard
|
|
v-for="video in fallbackContentVideos"
|
|
:key="`fallback-${video.id}`"
|
|
:video="video"
|
|
@click="goToVideo(video.id)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="content-side">
|
|
<div class="side-card">
|
|
<div class="side-head">
|
|
<strong>热门排行</strong>
|
|
<button
|
|
class="side-link"
|
|
@click="router.push('/search?keyword=热门')"
|
|
>
|
|
更多
|
|
</button>
|
|
</div>
|
|
|
|
<button
|
|
v-for="(video, index) in hotVideos.slice(0, 10)"
|
|
:key="video.id"
|
|
class="rank-item"
|
|
@click="goToVideo(video.id)"
|
|
>
|
|
<span class="rank-index">{{ index + 1 }}</span>
|
|
<div class="rank-copy">
|
|
<strong>{{ video.title }}</strong>
|
|
<span>{{ formatPlayCount(video.viewCount) }} 播放</span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, onMounted, ref } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { categoryApi, type Category } from '@/api/category.ts'
|
|
import { recommendApi } from '@/api/recommend.ts'
|
|
import { videoApi } from '@/api/video.ts'
|
|
import type { VideoInfo } from '@/types'
|
|
import { formatDuration, formatPlayCount } from '@/utils'
|
|
import { resolveMediaUrl } from '@/utils/media'
|
|
import VideoCard from '@/components/video/VideoCard.vue'
|
|
|
|
interface CategoryRow {
|
|
id: number
|
|
name: string
|
|
videos: VideoInfo[]
|
|
}
|
|
|
|
const router = useRouter()
|
|
const categories = ref<Category[]>([])
|
|
const featuredVideos = ref<VideoInfo[]>([])
|
|
const hotVideos = ref<VideoInfo[]>([])
|
|
const categoryRows = ref<CategoryRow[]>([])
|
|
const fallbackVideos = ref<VideoInfo[]>([])
|
|
const categoryExpanded = ref(false)
|
|
|
|
const defaultCover =
|
|
'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 180"%3E%3Crect width="320" height="180" fill="%23edf2f7"/%3E%3Ctext x="50%25" y="50%25" dy=".3em" text-anchor="middle" fill="%239499a0"%3EHAOVP%3C/text%3E%3C/svg%3E'
|
|
|
|
const getCoverUrl = (coverUrl?: string) => resolveMediaUrl(coverUrl) || defaultCover
|
|
|
|
const quickEntries = computed(() => [{ label: '热门', short: '热', action: () => router.push('/search?keyword=热门') }])
|
|
|
|
const categoryEntries = computed(() =>
|
|
categories.value.map((category) => ({
|
|
label: category.name,
|
|
action: () => router.push(`/category/${category.id}`)
|
|
}))
|
|
)
|
|
|
|
const visibleCategoryEntries = computed(() => categoryEntries.value.slice(0, 16))
|
|
const hiddenCategoryEntries = computed(() => categoryEntries.value.slice(16))
|
|
|
|
const allTopVideos = computed(() => {
|
|
const merged = [...featuredVideos.value, ...hotVideos.value, ...fallbackVideos.value]
|
|
const deduplicated: VideoInfo[] = []
|
|
const seen = new Set<number>()
|
|
for (const item of merged) {
|
|
if (!item?.id || seen.has(item.id)) continue
|
|
seen.add(item.id)
|
|
deduplicated.push(item)
|
|
}
|
|
return deduplicated
|
|
})
|
|
|
|
const bannerVideos = computed(() => allTopVideos.value.slice(0, 4))
|
|
const topSideVideos = computed(() => {
|
|
return allTopVideos.value.slice(4, 10)
|
|
})
|
|
const fallbackContentVideos = computed(() => allTopVideos.value.slice(0, 8))
|
|
|
|
const loadHomeData = async () => {
|
|
const [categoryList, recommendList, hotList, publicList] = await Promise.all([
|
|
categoryApi.getCategoryList(),
|
|
recommendApi.getHomeRecommend(1, 12).catch(() => []),
|
|
recommendApi.getHotRecommend(1, 12).catch(() => []),
|
|
videoApi.getVideoPublicList({ pageNum: 1, pageSize: 80 }).catch(() => ({
|
|
records: [],
|
|
total: 0,
|
|
size: 80,
|
|
current: 1,
|
|
pages: 0
|
|
}))
|
|
])
|
|
|
|
categories.value = categoryList
|
|
hotVideos.value = hotList
|
|
featuredVideos.value = recommendList
|
|
fallbackVideos.value = publicList.records
|
|
|
|
if (!featuredVideos.value.length) {
|
|
featuredVideos.value = publicList.records.slice(0, 12)
|
|
}
|
|
|
|
if (!hotVideos.value.length) {
|
|
hotVideos.value = publicList.records.slice(0, 12)
|
|
}
|
|
|
|
const categoryMap = new Map(categoryList.map((category) => [category.id, category]))
|
|
const groupedRows = new Map<number, VideoInfo[]>()
|
|
for (const video of publicList.records) {
|
|
if (!video.categoryId || !categoryMap.has(video.categoryId)) continue
|
|
const current = groupedRows.get(video.categoryId) || []
|
|
if (current.length < 8) {
|
|
current.push(video)
|
|
groupedRows.set(video.categoryId, current)
|
|
}
|
|
}
|
|
|
|
const groupedResult = [...groupedRows.entries()]
|
|
.map(([categoryId, videos]) => ({
|
|
id: categoryId,
|
|
name: categoryMap.get(categoryId)?.name || '分类',
|
|
videos
|
|
}))
|
|
.filter((row) => row.videos.length > 0)
|
|
.slice(0, 6)
|
|
|
|
// If category distribution is too sparse, fall back to a few curated sections
|
|
// so the homepage still looks populated with current data.
|
|
if (groupedResult.length >= 2) {
|
|
categoryRows.value = groupedResult
|
|
return
|
|
}
|
|
|
|
const fallbackRows: CategoryRow[] = []
|
|
const appendRow = (id: number, name: string, videos: VideoInfo[]) => {
|
|
const normalized = videos.filter((video, index, arr) => video?.id && arr.findIndex((item) => item.id === video.id) === index).slice(0, 8)
|
|
if (normalized.length) {
|
|
fallbackRows.push({ id, name, videos: normalized })
|
|
}
|
|
}
|
|
|
|
appendRow(-1, '推荐内容', featuredVideos.value)
|
|
appendRow(-2, '热门内容', hotVideos.value)
|
|
appendRow(-3, '最新发布', publicList.records)
|
|
|
|
categoryRows.value = fallbackRows
|
|
}
|
|
|
|
const goToVideo = (id: number) => {
|
|
if (!id) return
|
|
router.push(`/video/${id}`)
|
|
}
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
await loadHomeData()
|
|
} catch (error) {
|
|
console.error('首页加载失败:', error)
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.home-page {
|
|
min-height: 100vh;
|
|
background: #f4f5f7;
|
|
padding: 16px 0 36px;
|
|
}
|
|
|
|
.channel-panel,
|
|
.content-row,
|
|
.side-card {
|
|
background: #fff;
|
|
border-radius: 10px;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.channel-panel {
|
|
padding: 14px 16px;
|
|
}
|
|
|
|
.channel-main {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: 82px minmax(0, 1fr);
|
|
gap: 16px;
|
|
align-items: start;
|
|
}
|
|
|
|
.quick-entry-group {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.quick-entry {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8px;
|
|
width: 82px;
|
|
padding: 8px 0;
|
|
flex: 0 0 82px;
|
|
}
|
|
|
|
.quick-icon {
|
|
width: 52px;
|
|
height: 52px;
|
|
border-radius: 999px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
background: linear-gradient(135deg, #4cb4e7, #fb7299);
|
|
}
|
|
|
|
.channel-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(8, minmax(0, 1fr));
|
|
gap: 10px;
|
|
width: 100%;
|
|
}
|
|
|
|
.channel-expand {
|
|
position: absolute;
|
|
left: 98px;
|
|
right: 0;
|
|
top: calc(100% + 12px);
|
|
padding: 14px;
|
|
border-radius: 12px;
|
|
background: #fff;
|
|
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
|
|
display: grid;
|
|
grid-template-columns: repeat(8, minmax(0, 1fr));
|
|
gap: 10px;
|
|
z-index: 6;
|
|
}
|
|
|
|
.channel-pill {
|
|
width: 100%;
|
|
min-height: 38px;
|
|
padding: 0 8px;
|
|
border-radius: 8px;
|
|
background: #f6f7f8;
|
|
color: #505965;
|
|
font-size: 14px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.more-pill {
|
|
color: var(--link-color);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.top-feed {
|
|
margin-top: 14px;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
|
|
gap: 16px;
|
|
}
|
|
|
|
.banner-swipe,
|
|
.banner-card {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.banner-card {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: 10px;
|
|
aspect-ratio: 16 / 9;
|
|
text-align: left;
|
|
}
|
|
|
|
.banner-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.banner-overlay {
|
|
position: absolute;
|
|
inset: auto 0 0;
|
|
padding: 54px 18px 18px;
|
|
background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.82));
|
|
|
|
strong {
|
|
display: block;
|
|
color: #fff;
|
|
font-size: 18px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
span {
|
|
display: inline-block;
|
|
margin-top: 6px;
|
|
color: rgba(255, 255, 255, 0.78);
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
.top-feed-side {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 16px;
|
|
}
|
|
|
|
.top-video-card {
|
|
width: 100%;
|
|
text-align: left;
|
|
}
|
|
|
|
.top-video-cover {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: 8px;
|
|
aspect-ratio: 16 / 10;
|
|
background: #edf2f7;
|
|
}
|
|
|
|
.top-video-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.top-video-mask {
|
|
position: absolute;
|
|
inset: auto 0 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 18px 8px 6px;
|
|
background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.78));
|
|
|
|
span {
|
|
color: #fff;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
.top-video-title {
|
|
margin-top: 8px;
|
|
color: #18191c;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.content-section {
|
|
margin-top: 18px;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 320px;
|
|
gap: 16px;
|
|
}
|
|
|
|
.content-main {
|
|
display: grid;
|
|
gap: 18px;
|
|
}
|
|
|
|
.content-row {
|
|
padding: 18px;
|
|
}
|
|
|
|
.row-head,
|
|
.side-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
.row-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
|
|
strong {
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
|
|
.row-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 999px;
|
|
background: var(--link-color);
|
|
}
|
|
|
|
.row-more,
|
|
.side-link {
|
|
color: var(--link-color);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.row-grid {
|
|
margin-top: 14px;
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 16px;
|
|
}
|
|
|
|
.side-card {
|
|
padding: 18px;
|
|
}
|
|
|
|
.rank-item {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
padding: 12px 0;
|
|
text-align: left;
|
|
|
|
& + .rank-item {
|
|
border-top: 1px solid #f1f2f3;
|
|
}
|
|
}
|
|
|
|
.rank-index {
|
|
width: 22px;
|
|
height: 22px;
|
|
flex-shrink: 0;
|
|
border-radius: 4px;
|
|
background: #00a1d6;
|
|
color: #fff;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.rank-copy {
|
|
min-width: 0;
|
|
display: grid;
|
|
gap: 4px;
|
|
|
|
strong {
|
|
color: #18191c;
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
}
|
|
|
|
span {
|
|
color: #999;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
.content-section,
|
|
.top-feed {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.row-grid {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.channel-main,
|
|
.channel-grid,
|
|
.top-feed-side,
|
|
.row-grid,
|
|
.channel-expand {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.quick-entry-group {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.channel-expand {
|
|
left: 0;
|
|
right: auto;
|
|
}
|
|
}
|
|
|
|
.expand-fade-enter-active,
|
|
.expand-fade-leave-active {
|
|
transition: opacity 0.18s ease, transform 0.18s ease;
|
|
}
|
|
|
|
.expand-fade-enter-from,
|
|
.expand-fade-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(-4px);
|
|
}
|
|
</style>
|