feat(frontend): 首页信息流与两大核心界面重构
- index.vue: 移除 tabs 单选改为五区块纵向信息流（Hero/排期/歌曲/投稿/消息） 新增 scrollToSection 平滑滚动与投稿成功自动跳转；为移动端底部导航预留 pb-24 - ScheduleList.vue: 移除左右分栏改为日期横条+时段分组紧凑卡片 序号采用 28px w900 紫粉蓝渐变 bg-clip-text；卡片三态状态标签色区分 - RequestForm.vue: 序号选择从 pill 升级为 40×40 方格三态（free/taken/selected） taken 态删除线+灰色；selected 三色渐变+scale1.05；选中显示「已锁定第N首」提示
This commit is contained in:
+440
-468
@@ -1,36 +1,8 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<div class="ellipse-effect" />
|
||||
<div class="home pb-24 lg:pb-0">
|
||||
<div class="main-content">
|
||||
<div class="top-bar">
|
||||
<div class="logo-section">
|
||||
<NuxtLink class="logo-link" to="/">
|
||||
<img
|
||||
alt="VoiceHub Logo"
|
||||
class="logo-image"
|
||||
:src="logo"
|
||||
width="90"
|
||||
height="90"
|
||||
decoding="async"
|
||||
fetchpriority="high"
|
||||
>
|
||||
</NuxtLink>
|
||||
<!-- 横线和学校logo -->
|
||||
<div v-if="schoolLogoHomeUrl && schoolLogoHomeUrl.trim()" class="logo-divider-container">
|
||||
<div class="logo-divider" />
|
||||
<img
|
||||
:src="proxiedSchoolLogoUrl"
|
||||
alt="学校Logo"
|
||||
class="school-logo"
|
||||
width="200"
|
||||
height="80"
|
||||
decoding="async"
|
||||
fetchpriority="high"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 用户信息区域 -->
|
||||
<!-- 右上角浮动用户操作区（简化版，仅保留 user-section） -->
|
||||
<div class="user-actions-floating">
|
||||
<div class="user-section">
|
||||
<ClientOnly>
|
||||
<div v-if="isClientAuthenticated" class="user-info">
|
||||
@@ -85,462 +57,435 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="siteTitle" class="site-title">
|
||||
<div class="title-container">
|
||||
<h2 class="main-title">{{ siteTitle }}</h2>
|
||||
<div class="title-divider" />
|
||||
<span class="sub-title">VoiceHub 校园广播系统</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Section Hero -->
|
||||
<section id="hero-section" class="hero-block">
|
||||
<div class="hero-left">
|
||||
<h1 class="hero-title">{{ siteTitle }}</h1>
|
||||
<p class="hero-subtitle">下周校园，听你的。</p>
|
||||
|
||||
<!-- 中间主体内容区域 -->
|
||||
<div class="content-area">
|
||||
<!-- 选项卡区域 -->
|
||||
<div class="tabs-row">
|
||||
<div
|
||||
:class="{ active: activeTab === 'schedule' }"
|
||||
class="section-tab schedule-tab"
|
||||
@click="handleTabClick('schedule')"
|
||||
>
|
||||
<Icon class="tab-icon" name="calendar" :size="20" />
|
||||
<span class="tab-text">播出排期</span>
|
||||
</div>
|
||||
<div
|
||||
:class="{ active: activeTab === 'songs' }"
|
||||
class="section-tab songs-tab"
|
||||
@click="handleTabClick('songs')"
|
||||
>
|
||||
<Icon class="tab-icon" name="music" :size="20" />
|
||||
<span class="tab-text">歌曲列表</span>
|
||||
</div>
|
||||
<div
|
||||
:class="{ active: activeTab === 'request' }"
|
||||
class="section-tab request-tab"
|
||||
@click="handleTabClick('request')"
|
||||
>
|
||||
<Icon class="tab-icon" name="search" :size="20" />
|
||||
<span class="tab-text">投稿歌曲</span>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<div
|
||||
ref="notificationTabRef"
|
||||
:class="{ active: activeTab === 'notification', disabled: !isClientAuthenticated }"
|
||||
class="section-tab"
|
||||
data-tab="notification"
|
||||
@click="isClientAuthenticated ? handleTabClick('notification') : showLoginNotice()"
|
||||
<div class="hero-cta">
|
||||
<button
|
||||
class="bg-gradient-to-r from-purple-500 via-pink-500 to-blue-500 text-white px-6 py-3 rounded-lg font-bold shadow-lg hover:shadow-xl transition-shadow"
|
||||
@click="scrollToSection('request-section')"
|
||||
>
|
||||
<div class="icon-wrapper">
|
||||
<Icon class="tab-icon" name="message-circle" :size="20" />
|
||||
<span
|
||||
v-if="isClientAuthenticated && hasUnreadNotifications"
|
||||
class="notification-badge-tab"
|
||||
/>
|
||||
</div>
|
||||
<span class="tab-text">
|
||||
消息
|
||||
<span
|
||||
v-if="isClientAuthenticated && hasUnreadNotifications"
|
||||
class="notification-badge-desktop"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<template #fallback>
|
||||
<div class="section-tab disabled" data-tab="notification">
|
||||
<Icon class="tab-icon" name="message-circle" :size="20" />
|
||||
<span class="tab-text">消息</span>
|
||||
</div>
|
||||
</template>
|
||||
</ClientOnly>
|
||||
立即点歌
|
||||
</button>
|
||||
<button
|
||||
class="border border-gray-300 text-gray-700 px-6 py-3 rounded-lg font-bold hover:bg-gray-50"
|
||||
@click="scrollToSection('schedule-section')"
|
||||
>
|
||||
查看排期
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="status-info">
|
||||
<span>
|
||||
{{ isRequestOpen ? '当前投稿开放' : '当前投稿关闭' }} · 共 {{ songCount || 0 }} 首投稿 · {{ scheduleCount || 0 }} 首已定排期
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<div class="tab-content-container">
|
||||
<ClientOnly>
|
||||
<!-- 播出排期内容 -->
|
||||
<div v-if="activeTab === 'schedule'" key="schedule" class="tab-pane schedule-tab-pane">
|
||||
<div class="full-width">
|
||||
<SongsScheduleList
|
||||
:error="error"
|
||||
:loading="loading"
|
||||
:schedules="publicSchedules"
|
||||
@semester-change="handleSemesterChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 用户使用指南组件 -->
|
||||
<UserTutorial />
|
||||
</div>
|
||||
<div id="hero-illustration-slot" class="w-full max-w-sm"></div>
|
||||
</section>
|
||||
|
||||
<!-- 歌曲列表内容 -->
|
||||
<div v-else-if="activeTab === 'songs'" key="songs" class="tab-pane">
|
||||
<div class="song-list-container">
|
||||
<SongsSongList
|
||||
:error="error"
|
||||
:is-admin="isAdmin"
|
||||
:loading="loading"
|
||||
:songs="filteredSongs"
|
||||
@refresh="refreshSongs"
|
||||
@vote="handleVote"
|
||||
@withdraw="handleWithdraw"
|
||||
@cancel-replay="handleCancelReplay"
|
||||
@request-replay="handleRequestReplay"
|
||||
@semester-change="handleSemesterChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Section Schedule -->
|
||||
<section id="schedule-section" class="content-block">
|
||||
<div class="section-header">
|
||||
<h2>本周排期</h2>
|
||||
<span class="sub">播出时间表</span>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<SongsScheduleList
|
||||
:error="error"
|
||||
:loading="loading"
|
||||
:schedules="publicSchedules"
|
||||
@semester-change="handleSemesterChange"
|
||||
/>
|
||||
</ClientOnly>
|
||||
</section>
|
||||
|
||||
<!-- 投稿歌曲内容 -->
|
||||
<div v-else-if="activeTab === 'request'" key="request" class="tab-pane request-pane">
|
||||
<SongsRequestForm
|
||||
ref="requestFormRef"
|
||||
:loading="loading"
|
||||
@request="handleRequest"
|
||||
@vote="handleVote"
|
||||
<!-- Section Songs -->
|
||||
<section id="songs-section" class="content-block">
|
||||
<div class="section-header">
|
||||
<h2>热门投稿</h2>
|
||||
<span class="sub">为喜欢的歌投票</span>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<SongsSongList
|
||||
:error="error"
|
||||
:is-admin="isAdmin"
|
||||
:loading="loading"
|
||||
:songs="filteredSongs"
|
||||
@refresh="refreshSongs"
|
||||
@vote="handleVote"
|
||||
@withdraw="handleWithdraw"
|
||||
@cancel-replay="handleCancelReplay"
|
||||
@request-replay="handleRequestReplay"
|
||||
@semester-change="handleSemesterChange"
|
||||
/>
|
||||
</ClientOnly>
|
||||
</section>
|
||||
|
||||
<!-- Section Request -->
|
||||
<section id="request-section" class="content-block">
|
||||
<div class="section-header">
|
||||
<h2>投稿歌曲</h2>
|
||||
<span class="sub" @click="showRules = true">点歌规则</span>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<div v-if="!isClientAuthenticated" class="login-required-container">
|
||||
<div class="login-required-content">
|
||||
<Lock class="login-icon" :size="48" />
|
||||
<h3>登录后投稿</h3>
|
||||
<p>登录后可选择期望日期和播出位置</p>
|
||||
<button class="login-button" @click="navigateToLogin">立即登录</button>
|
||||
</div>
|
||||
</div>
|
||||
<SongsRequestForm
|
||||
v-else
|
||||
ref="requestFormRef"
|
||||
:loading="loading"
|
||||
@request="handleRequest"
|
||||
@vote="handleVote"
|
||||
/>
|
||||
</ClientOnly>
|
||||
</section>
|
||||
|
||||
<!-- Section Notification -->
|
||||
<section id="notification-section" class="content-block">
|
||||
<div class="section-header">
|
||||
<h2>我的消息</h2>
|
||||
<button class="settings-icon" @click="toggleNotificationSettings">
|
||||
<svg
|
||||
fill="none"
|
||||
height="20"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
width="20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
<path
|
||||
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<div v-if="!isClientAuthenticated" class="login-required-container">
|
||||
<div class="login-required-content">
|
||||
<Lock class="login-icon" :size="48" />
|
||||
<h3>需要登录</h3>
|
||||
<p>您需要登录才能查看通知</p>
|
||||
<button class="login-button" @click="navigateToLogin">立即登录</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="notification-container">
|
||||
<!-- 通知列表 -->
|
||||
<div class="notification-list">
|
||||
<div v-if="notificationsLoading" class="loading-indicator">
|
||||
<div class="loading-spinner" />
|
||||
<span>加载中...</span>
|
||||
</div>
|
||||
|
||||
<div v-else-if="userNotifications.length === 0" class="empty-notification">
|
||||
<div class="empty-icon">
|
||||
<Icon :size="48" color="#6b7280" name="bell" />
|
||||
</div>
|
||||
<p>暂无通知</p>
|
||||
</div>
|
||||
|
||||
<Transition mode="out-in" name="notification-list-fade">
|
||||
<div
|
||||
v-if="userNotifications.length > 0"
|
||||
:key="notificationsService.currentPage.value"
|
||||
class="notification-items"
|
||||
>
|
||||
<div
|
||||
v-for="(notification, index) in userNotifications"
|
||||
:key="notification.id"
|
||||
:class="{ unread: !notification.read }"
|
||||
:style="{ '--animation-delay': index * 0.1 + 's' }"
|
||||
class="notification-card"
|
||||
@click="viewNotification(notification)"
|
||||
>
|
||||
<div class="notification-card-header">
|
||||
<div class="notification-icon-type">
|
||||
<Icon
|
||||
v-if="notification.type === 'SONG_SELECTED'"
|
||||
:size="20"
|
||||
color="#4f46e5"
|
||||
name="check"
|
||||
/>
|
||||
<Icon
|
||||
v-else-if="notification.type === 'SONG_PLAYED'"
|
||||
:size="20"
|
||||
color="#10b981"
|
||||
name="play"
|
||||
/>
|
||||
<Icon
|
||||
v-else-if="notification.type === 'SONG_VOTED'"
|
||||
:size="20"
|
||||
color="#f59e0b"
|
||||
name="thumbs-up"
|
||||
/>
|
||||
<Icon
|
||||
v-else-if="notification.type === 'SONG_REJECTED'"
|
||||
:size="20"
|
||||
color="#ef4444"
|
||||
name="x-circle"
|
||||
/>
|
||||
<Icon
|
||||
v-else-if="notification.type === 'COLLABORATION_INVITE'"
|
||||
:size="20"
|
||||
color="#0B5AFE"
|
||||
name="users"
|
||||
/>
|
||||
<Icon
|
||||
v-else-if="notification.type === 'COLLABORATION_RESPONSE'"
|
||||
:size="20"
|
||||
color="#8b5cf6"
|
||||
name="message-circle"
|
||||
/>
|
||||
<Icon v-else :size="20" color="#6b7280" name="bell" />
|
||||
</div>
|
||||
<div class="notification-title-row">
|
||||
<div class="notification-title">
|
||||
<span v-if="notification.type === 'SONG_SELECTED'">歌曲已选中</span>
|
||||
<span v-else-if="notification.type === 'SONG_PLAYED'"
|
||||
>歌曲已播放</span
|
||||
>
|
||||
<span v-else-if="notification.type === 'SONG_VOTED'">收到新投票</span>
|
||||
<span v-else-if="notification.type === 'SONG_REJECTED'"
|
||||
>歌曲被驳回</span
|
||||
>
|
||||
<span v-else-if="notification.type === 'COLLABORATION_INVITE'">
|
||||
联合投稿邀请
|
||||
<span
|
||||
v-if="notification.handled"
|
||||
:class="[
|
||||
'status-tag',
|
||||
notification.status === 'ACCEPTED'
|
||||
? 'accepted'
|
||||
: notification.status === 'INVALID'
|
||||
? 'invalid'
|
||||
: 'rejected'
|
||||
]"
|
||||
>
|
||||
{{
|
||||
notification.status === 'ACCEPTED'
|
||||
? '- 已接受'
|
||||
: notification.status === 'INVALID'
|
||||
? '- 已失效'
|
||||
: '- 已拒绝'
|
||||
}}
|
||||
</span>
|
||||
</span>
|
||||
<span v-else-if="notification.type === 'COLLABORATION_RESPONSE'"
|
||||
>联合投稿回复</span
|
||||
>
|
||||
<span v-else>系统通知</span>
|
||||
<span v-if="!notification.read" class="unread-indicator" />
|
||||
</div>
|
||||
<div class="notification-time">
|
||||
{{ formatNotificationTime(notification.createdAt) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="notification-card-body">
|
||||
<div class="notification-text">{{ notification.message }}</div>
|
||||
|
||||
<!-- 联合投稿邀请操作按钮 -->
|
||||
<div
|
||||
v-if="
|
||||
notification.type === 'COLLABORATION_INVITE' && !notification.handled
|
||||
"
|
||||
class="invite-actions"
|
||||
>
|
||||
<button
|
||||
:disabled="notification.processing"
|
||||
class="action-button accept-btn"
|
||||
@click.stop="handleCollaborationReply(notification, true)"
|
||||
>
|
||||
{{ notification.processing ? '处理中...' : '接受邀请' }}
|
||||
</button>
|
||||
<button
|
||||
:disabled="notification.processing"
|
||||
class="action-button reject-btn"
|
||||
@click.stop="handleCollaborationReply(notification, false)"
|
||||
>
|
||||
拒绝
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="notification-card-actions">
|
||||
<button
|
||||
class="action-button delete"
|
||||
title="删除"
|
||||
@click.stop="deleteNotification(notification.id)"
|
||||
>
|
||||
<svg
|
||||
fill="none"
|
||||
height="16"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
width="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<polyline points="3 6 5 6 21 6" />
|
||||
<path
|
||||
d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
|
||||
/>
|
||||
</svg>
|
||||
<span>删除</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
|
||||
<!-- 通知内容 -->
|
||||
<!-- 分页控件 -->
|
||||
<div
|
||||
v-else-if="activeTab === 'notification'"
|
||||
key="notification"
|
||||
class="tab-pane notification-pane"
|
||||
v-if="notificationsService.totalCount.value > 0"
|
||||
class="notification-pagination"
|
||||
>
|
||||
<div v-if="!isClientAuthenticated" class="login-required-container">
|
||||
<div class="login-required-content">
|
||||
<Lock class="login-icon" :size="48" />
|
||||
<h3>需要登录</h3>
|
||||
<p>您需要登录才能查看通知</p>
|
||||
<button class="login-button" @click="navigateToLogin">立即登录</button>
|
||||
</div>
|
||||
<div class="pagination-info">
|
||||
<span class="pagination-text">
|
||||
共 {{ notificationsService.totalCount.value }} 条通知， 第
|
||||
{{ notificationsService.currentPage.value }} /
|
||||
{{ notificationsService.totalPages.value }} 页
|
||||
</span>
|
||||
</div>
|
||||
<div v-else class="notification-container">
|
||||
<!-- 标题和设置按钮 -->
|
||||
<div class="notification-header">
|
||||
<h2 class="notification-title">通知中心</h2>
|
||||
<button class="settings-icon" @click="toggleNotificationSettings">
|
||||
|
||||
<div class="pagination-controls">
|
||||
<!-- 每页显示数量选择器 -->
|
||||
<div class="page-size-selector">
|
||||
<label for="pageSize">每页显示：</label>
|
||||
<CustomSelect
|
||||
id="pageSize"
|
||||
:model-value="notificationsService.pageSize.value"
|
||||
:options="pageSizeOptions"
|
||||
class="page-size-custom-select"
|
||||
@update:model-value="handlePageSizeChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 页码导航 -->
|
||||
<div class="page-navigation">
|
||||
<button
|
||||
:disabled="
|
||||
!notificationsService.hasPrevPage.value ||
|
||||
notificationsService.isPaginationLoading.value
|
||||
"
|
||||
class="page-nav-button"
|
||||
title="上一页"
|
||||
@click="notificationsService.prevPage()"
|
||||
>
|
||||
<svg
|
||||
fill="none"
|
||||
height="20"
|
||||
height="16"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
width="20"
|
||||
width="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
<path
|
||||
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
|
||||
/>
|
||||
<polyline points="15 18 9 12 15 6" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- 页码按钮 -->
|
||||
<div class="page-numbers">
|
||||
<template v-for="page in getVisiblePages()" :key="page">
|
||||
<button
|
||||
v-if="page !== '...'"
|
||||
:class="[
|
||||
'page-number-button',
|
||||
{ active: page === notificationsService.currentPage.value }
|
||||
]"
|
||||
:disabled="notificationsService.isPaginationLoading.value"
|
||||
@click="notificationsService.goToPage(page)"
|
||||
>
|
||||
{{ page }}
|
||||
</button>
|
||||
<span v-else class="page-ellipsis">...</span>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<button
|
||||
:disabled="
|
||||
!notificationsService.hasNextPage.value ||
|
||||
notificationsService.isPaginationLoading.value
|
||||
"
|
||||
class="page-nav-button"
|
||||
title="下一页"
|
||||
@click="notificationsService.nextPage()"
|
||||
>
|
||||
<svg
|
||||
fill="none"
|
||||
height="16"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
width="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<polyline points="9 18 15 12 9 6" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 通知列表 -->
|
||||
<div class="notification-list">
|
||||
<div v-if="notificationsLoading" class="loading-indicator">
|
||||
<div class="loading-spinner" />
|
||||
<span>加载中...</span>
|
||||
</div>
|
||||
|
||||
<div v-else-if="userNotifications.length === 0" class="empty-notification">
|
||||
<div class="empty-icon">
|
||||
<Icon :size="48" color="#6b7280" name="bell" />
|
||||
</div>
|
||||
<p>暂无通知</p>
|
||||
</div>
|
||||
|
||||
<Transition mode="out-in" name="notification-list-fade">
|
||||
<div
|
||||
v-if="userNotifications.length > 0"
|
||||
:key="notificationsService.currentPage.value"
|
||||
class="notification-items"
|
||||
>
|
||||
<div
|
||||
v-for="(notification, index) in userNotifications"
|
||||
:key="notification.id"
|
||||
:class="{ unread: !notification.read }"
|
||||
:style="{ '--animation-delay': index * 0.1 + 's' }"
|
||||
class="notification-card"
|
||||
@click="viewNotification(notification)"
|
||||
>
|
||||
<div class="notification-card-header">
|
||||
<div class="notification-icon-type">
|
||||
<Icon
|
||||
v-if="notification.type === 'SONG_SELECTED'"
|
||||
:size="20"
|
||||
color="#4f46e5"
|
||||
name="check"
|
||||
/>
|
||||
<Icon
|
||||
v-else-if="notification.type === 'SONG_PLAYED'"
|
||||
:size="20"
|
||||
color="#10b981"
|
||||
name="play"
|
||||
/>
|
||||
<Icon
|
||||
v-else-if="notification.type === 'SONG_VOTED'"
|
||||
:size="20"
|
||||
color="#f59e0b"
|
||||
name="thumbs-up"
|
||||
/>
|
||||
<Icon
|
||||
v-else-if="notification.type === 'SONG_REJECTED'"
|
||||
:size="20"
|
||||
color="#ef4444"
|
||||
name="x-circle"
|
||||
/>
|
||||
<Icon
|
||||
v-else-if="notification.type === 'COLLABORATION_INVITE'"
|
||||
:size="20"
|
||||
color="#0B5AFE"
|
||||
name="users"
|
||||
/>
|
||||
<Icon
|
||||
v-else-if="notification.type === 'COLLABORATION_RESPONSE'"
|
||||
:size="20"
|
||||
color="#8b5cf6"
|
||||
name="message-circle"
|
||||
/>
|
||||
<Icon v-else :size="20" color="#6b7280" name="bell" />
|
||||
</div>
|
||||
<div class="notification-title-row">
|
||||
<div class="notification-title">
|
||||
<span v-if="notification.type === 'SONG_SELECTED'">歌曲已选中</span>
|
||||
<span v-else-if="notification.type === 'SONG_PLAYED'"
|
||||
>歌曲已播放</span
|
||||
>
|
||||
<span v-else-if="notification.type === 'SONG_VOTED'">收到新投票</span>
|
||||
<span v-else-if="notification.type === 'SONG_REJECTED'"
|
||||
>歌曲被驳回</span
|
||||
>
|
||||
<span v-else-if="notification.type === 'COLLABORATION_INVITE'">
|
||||
联合投稿邀请
|
||||
<span
|
||||
v-if="notification.handled"
|
||||
:class="[
|
||||
'status-tag',
|
||||
notification.status === 'ACCEPTED'
|
||||
? 'accepted'
|
||||
: notification.status === 'INVALID'
|
||||
? 'invalid'
|
||||
: 'rejected'
|
||||
]"
|
||||
>
|
||||
{{
|
||||
notification.status === 'ACCEPTED'
|
||||
? '- 已接受'
|
||||
: notification.status === 'INVALID'
|
||||
? '- 已失效'
|
||||
: '- 已拒绝'
|
||||
}}
|
||||
</span>
|
||||
</span>
|
||||
<span v-else-if="notification.type === 'COLLABORATION_RESPONSE'"
|
||||
>联合投稿回复</span
|
||||
>
|
||||
<span v-else>系统通知</span>
|
||||
<span v-if="!notification.read" class="unread-indicator" />
|
||||
</div>
|
||||
<div class="notification-time">
|
||||
{{ formatNotificationTime(notification.createdAt) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="notification-card-body">
|
||||
<div class="notification-text">{{ notification.message }}</div>
|
||||
|
||||
<!-- 联合投稿邀请操作按钮 -->
|
||||
<div
|
||||
v-if="
|
||||
notification.type === 'COLLABORATION_INVITE' && !notification.handled
|
||||
"
|
||||
class="invite-actions"
|
||||
>
|
||||
<button
|
||||
:disabled="notification.processing"
|
||||
class="action-button accept-btn"
|
||||
@click.stop="handleCollaborationReply(notification, true)"
|
||||
>
|
||||
{{ notification.processing ? '处理中...' : '接受邀请' }}
|
||||
</button>
|
||||
<button
|
||||
:disabled="notification.processing"
|
||||
class="action-button reject-btn"
|
||||
@click.stop="handleCollaborationReply(notification, false)"
|
||||
>
|
||||
拒绝
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="notification-card-actions">
|
||||
<button
|
||||
class="action-button delete"
|
||||
title="删除"
|
||||
@click.stop="deleteNotification(notification.id)"
|
||||
>
|
||||
<svg
|
||||
fill="none"
|
||||
height="16"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
width="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<polyline points="3 6 5 6 21 6" />
|
||||
<path
|
||||
d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
|
||||
/>
|
||||
</svg>
|
||||
<span>删除</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
|
||||
<!-- 分页控件 -->
|
||||
<div
|
||||
v-if="notificationsService.totalCount.value > 0"
|
||||
class="notification-pagination"
|
||||
>
|
||||
<div class="pagination-info">
|
||||
<span class="pagination-text">
|
||||
共 {{ notificationsService.totalCount.value }} 条通知， 第
|
||||
{{ notificationsService.currentPage.value }} /
|
||||
{{ notificationsService.totalPages.value }} 页
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="pagination-controls">
|
||||
<!-- 每页显示数量选择器 -->
|
||||
<div class="page-size-selector">
|
||||
<label for="pageSize">每页显示：</label>
|
||||
<CustomSelect
|
||||
id="pageSize"
|
||||
:model-value="notificationsService.pageSize.value"
|
||||
:options="pageSizeOptions"
|
||||
class="page-size-custom-select"
|
||||
@update:model-value="handlePageSizeChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 页码导航 -->
|
||||
<div class="page-navigation">
|
||||
<button
|
||||
:disabled="
|
||||
!notificationsService.hasPrevPage.value ||
|
||||
notificationsService.isPaginationLoading.value
|
||||
"
|
||||
class="page-nav-button"
|
||||
title="上一页"
|
||||
@click="notificationsService.prevPage()"
|
||||
>
|
||||
<svg
|
||||
fill="none"
|
||||
height="16"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
width="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<polyline points="15 18 9 12 15 6" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- 页码按钮 -->
|
||||
<div class="page-numbers">
|
||||
<template v-for="page in getVisiblePages()" :key="page">
|
||||
<button
|
||||
v-if="page !== '...'"
|
||||
:class="[
|
||||
'page-number-button',
|
||||
{ active: page === notificationsService.currentPage.value }
|
||||
]"
|
||||
:disabled="notificationsService.isPaginationLoading.value"
|
||||
@click="notificationsService.goToPage(page)"
|
||||
>
|
||||
{{ page }}
|
||||
</button>
|
||||
<span v-else class="page-ellipsis">...</span>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<button
|
||||
:disabled="
|
||||
!notificationsService.hasNextPage.value ||
|
||||
notificationsService.isPaginationLoading.value
|
||||
"
|
||||
class="page-nav-button"
|
||||
title="下一页"
|
||||
@click="notificationsService.nextPage()"
|
||||
>
|
||||
<svg
|
||||
fill="none"
|
||||
height="16"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
width="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<polyline points="9 18 15 12 9 6" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分页加载状态 -->
|
||||
<div
|
||||
v-if="notificationsService.isPaginationLoading.value"
|
||||
class="pagination-loading"
|
||||
>
|
||||
<div class="loading-spinner" />
|
||||
<span>加载中...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部操作按钮 -->
|
||||
<div v-if="userNotifications.length > 0" class="notification-actions-bar">
|
||||
<button
|
||||
:class="{ disabled: !hasUnreadNotifications }"
|
||||
:disabled="!hasUnreadNotifications"
|
||||
class="action-button-large"
|
||||
@click="markAllNotificationsAsRead"
|
||||
>
|
||||
全部标记为已读
|
||||
</button>
|
||||
<button class="action-button-large danger" @click="clearAllNotifications">
|
||||
清空所有消息
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 确认对话框 -->
|
||||
<ConfirmDialog
|
||||
v-model:show="showConfirmDialog"
|
||||
:cancel-text="confirmDialogConfig.cancelText"
|
||||
:confirm-text="confirmDialogConfig.confirmText"
|
||||
:message="confirmDialogConfig.message"
|
||||
:title="confirmDialogConfig.title"
|
||||
:type="confirmDialogConfig.type"
|
||||
@cancel="handleCancelAction"
|
||||
@confirm="handleConfirmAction"
|
||||
/>
|
||||
<!-- 分页加载状态 -->
|
||||
<div
|
||||
v-if="notificationsService.isPaginationLoading.value"
|
||||
class="pagination-loading"
|
||||
>
|
||||
<div class="loading-spinner" />
|
||||
<span>加载中...</span>
|
||||
</div>
|
||||
</div>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部操作按钮 -->
|
||||
<div v-if="userNotifications.length > 0" class="notification-actions-bar">
|
||||
<button
|
||||
:class="{ disabled: !hasUnreadNotifications }"
|
||||
:disabled="!hasUnreadNotifications"
|
||||
class="action-button-large"
|
||||
@click="markAllNotificationsAsRead"
|
||||
>
|
||||
全部标记为已读
|
||||
</button>
|
||||
<button class="action-button-large danger" @click="clearAllNotifications">
|
||||
清空所有消息
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 确认对话框 -->
|
||||
<ConfirmDialog
|
||||
v-model:show="showConfirmDialog"
|
||||
:cancel-text="confirmDialogConfig.cancelText"
|
||||
:confirm-text="confirmDialogConfig.confirmText"
|
||||
:message="confirmDialogConfig.message"
|
||||
:title="confirmDialogConfig.title"
|
||||
:type="confirmDialogConfig.type"
|
||||
@cancel="handleCancelAction"
|
||||
@confirm="handleConfirmAction"
|
||||
/>
|
||||
</div>
|
||||
</ClientOnly>
|
||||
</section>
|
||||
|
||||
<!-- 页脚信息显示 -->
|
||||
<SiteFooter />
|
||||
@@ -1273,12 +1218,10 @@ const handleRequest = async (songData, done) => {
|
||||
await requestFormRef.value.refreshSubmissionStatus()
|
||||
}
|
||||
|
||||
// 如果当前在歌曲列表页，自动切换到该页面
|
||||
if (activeTab.value !== 'songs') {
|
||||
setTimeout(() => {
|
||||
handleTabClick('songs')
|
||||
}, 500)
|
||||
}
|
||||
// 投稿成功后自动滚动到歌曲列表
|
||||
setTimeout(() => {
|
||||
scrollToSection('songs-section')
|
||||
}, 500)
|
||||
|
||||
if (typeof done === 'function') done(true)
|
||||
return true
|
||||
@@ -1523,9 +1466,15 @@ const vRipple = {
|
||||
}
|
||||
}
|
||||
|
||||
// 处理标签点击事件，添加动画效果
|
||||
// 处理标签点击事件（@deprecated 保留以防它处引用，页面现已改为纵向区块无标签切换）
|
||||
const handleTabClick = (tab) => {
|
||||
activeTab.value = tab
|
||||
// activeTab.value = tab
|
||||
}
|
||||
|
||||
// 滚动到指定区块
|
||||
const scrollToSection = (id) => {
|
||||
const el = document.getElementById(id)
|
||||
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
||||
}
|
||||
|
||||
// 添加导航到登录页面的方法
|
||||
@@ -1650,6 +1599,15 @@ if (
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 右上角浮动用户操作区 */
|
||||
.user-actions-floating {
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* 顶部区域样式 */
|
||||
.top-bar {
|
||||
display: flex;
|
||||
@@ -3659,4 +3617,18 @@ if (
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(0, 67, 248, 0.3);
|
||||
}
|
||||
|
||||
/* ============ 新增纵向五区块样式 ============ */
|
||||
.home { width:100%; flex:1; background: var(--bg-primary, #FFFFFF); padding: 0; color: var(--text-primary, #111827); min-height:100vh; }
|
||||
.main-content { max-width: 1200px; margin: 0 auto; padding: 24px 16px 32px; }
|
||||
.hero-block { padding: 48px 0 24px; display: flex; flex-direction: column; gap: 32px; }
|
||||
@media (min-width: 1024px) { .hero-block { flex-direction: row; align-items: center; justify-content: space-between; } }
|
||||
.hero-title { font-size: 44px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 12px; }
|
||||
.hero-subtitle { font-size: 18px; color: var(--text-secondary, #4B5563); font-weight: 500; margin-bottom: 24px; }
|
||||
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
|
||||
.status-info { display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--bg-secondary, #F9FAFB); border: 1px solid var(--border-primary, #E5E7EB); border-radius: 8px; font-size: 13px; color: var(--text-secondary); font-weight: 500; }
|
||||
.content-block { padding: 28px 0; border-top: 1px solid var(--border-primary, #E5E7EB); }
|
||||
.section-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; }
|
||||
.section-header h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
|
||||
.section-header .sub { font-size: 13px; color: var(--text-tertiary, #6B7280); font-weight: 500; cursor: pointer; }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user