Henry_Du
cccaf36990
站长要求全站一致（小程序端已单独提交）。本次只改**用户可见文案与默认值**： - 服务端默认值/兜底：system-settings-defaults、admin/system-settings(GET/POST)、 site-config.get、utils/siteUtils —— 原来是 'VoiceHub' / '校园广播站点歌系统' - 用户可见通知文案：MeoW 绑定验证码与标题、MeoW 测试通知、微信订阅测试通知 - 2FA 应用名（authenticator.keyuri）、WebAuthn rpName（出现在系统密钥弹窗里） - 网页版界面：首页副标题、后台侧栏品牌名、登录/注册/找回/改密标题与文案、 年度回顾（IntroSlide / ShareCard / 页面标题）、用户教程、通知发送预览、 API 密钥与数据库导入说明、酷狗 sidecar 说明、打印页脚与歌单卡片页脚、Logo alt **刻意不动**：localStorage/sessionStorage 的 `voicehub_*` 键、`voicehub:` 前缀的 STORAGE_KEY 与缓存/Redis 前缀、`window.voiceHubPlayer` 之类代码标识、MeoW 的 User-Agent、以及上游项目链接 `github.com/laoshuikaixue/VoiceHub`（那是对原项目的署名）。 注意：站点名**数据**（systemSettings.siteTitle）仍是你后台里设置的「宝一外校园点歌」， 代码只保证默认值与文案一致；要让全站显示完整名称，请在后台「站点配置 → 站点标题」 改成「宝一外校园点歌系统」。
587 lines
17 KiB
Vue
587 lines
17 KiB
Vue
<template>
|
||
<div>
|
||
<ClientOnly>
|
||
<div class="admin-layout" @touchend="handleTouchEnd" @touchstart="handleTouchStart">
|
||
<!-- 左侧导航栏 -->
|
||
<AdminSidebar
|
||
:is-open="sidebarOpen"
|
||
:active-tab="activeTab"
|
||
:current-user="currentUser"
|
||
:permissions="permissions"
|
||
:site-title="siteTitle"
|
||
@navigate="handleNavigate"
|
||
@close="closeSidebar"
|
||
@logout="handleLogout"
|
||
/>
|
||
|
||
<!-- 移动端侧边栏遮罩 -->
|
||
<div
|
||
v-if="sidebarOpen"
|
||
class="fixed inset-0 bg-black/60 backdrop-blur-sm z-40 lg:hidden transition-opacity duration-300"
|
||
@click="closeSidebar"
|
||
/>
|
||
|
||
<!-- 主内容区域 -->
|
||
<main
|
||
class="flex-1 flex flex-col h-screen overflow-hidden lg:ml-64 relative bg-[#f8fafc] text-zinc-900"
|
||
>
|
||
<header
|
||
class="admin-main-header h-16 shrink-0 flex items-center justify-between px-4 md:px-8 border-b border-zinc-200 bg-white/80 backdrop-blur-xl z-30"
|
||
>
|
||
<div class="flex items-center gap-3">
|
||
<button
|
||
class="admin-mobile-menu-btn lg:hidden p-2 text-zinc-600 hover:bg-zinc-100 rounded-lg transition-colors"
|
||
@click="toggleSidebar"
|
||
>
|
||
<Menu :size="20" />
|
||
</button>
|
||
<h1 class="text-xl font-bold tracking-tight">{{ getPageTitle() }}</h1>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<button
|
||
class="px-3 py-1.5 text-xs font-semibold rounded-lg border border-zinc-200 text-zinc-600 hover:bg-zinc-100 transition-colors"
|
||
@click="openOnboardingTutorial"
|
||
>
|
||
新手引导
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<div
|
||
ref="contentScrollRef"
|
||
class="admin-content-area flex-1 custom-scrollbar p-4 md:p-8 overflow-y-auto"
|
||
>
|
||
<!-- 移动端返回顶部按钮 -->
|
||
<button
|
||
v-if="showBackToTop"
|
||
aria-label="返回顶部"
|
||
class="back-to-top-btn fixed bottom-8 right-8 p-3 bg-blue-600 text-white rounded-full shadow-lg hover:bg-blue-700 transition-all z-50"
|
||
@click="scrollToTop"
|
||
>
|
||
<ChevronUp :size="24" />
|
||
</button>
|
||
|
||
<div :key="`${activeTab}-${tabRefreshKey}`">
|
||
<!-- 数据概览 -->
|
||
<div
|
||
v-if="activeTab === 'overview' && permissions.canAccessPage('overview')"
|
||
class="animate-in fade-in slide-in-from-bottom-4 duration-500"
|
||
>
|
||
<LazyAdminOverviewDashboard @navigate="handleNavigate" />
|
||
</div>
|
||
|
||
<!-- 工作流教程 -->
|
||
<div
|
||
v-if="activeTab === 'workflow-tutorial' && permissions.canAccessPage('workflow-tutorial')"
|
||
class="animate-in fade-in slide-in-from-bottom-4 duration-500"
|
||
>
|
||
<LazyAdminWorkflowTutorial />
|
||
</div>
|
||
|
||
<!-- 歌曲管理 -->
|
||
<div
|
||
v-if="activeTab === 'songs' && permissions.canAccessPage('songs')"
|
||
class="animate-in fade-in slide-in-from-bottom-4 duration-500"
|
||
>
|
||
<LazyAdminSongManagement />
|
||
</div>
|
||
|
||
<!-- 排期管理 -->
|
||
<div
|
||
v-if="activeTab === 'schedule' && permissions.canAccessPage('schedule')"
|
||
class="animate-in fade-in slide-in-from-bottom-4 duration-500 h-full"
|
||
>
|
||
<LazyAdminScheduleManager />
|
||
</div>
|
||
|
||
<!-- 打印排期 -->
|
||
<div
|
||
v-if="activeTab === 'print' && permissions.canAccessPage('print')"
|
||
class="animate-in fade-in slide-in-from-bottom-4 duration-500 h-full"
|
||
>
|
||
<LazyAdminSchedulePrinter />
|
||
</div>
|
||
|
||
<!-- 导入酷狗：账号扫码绑定 + 按排期自动创建/同步酷狗歌单 -->
|
||
<div
|
||
v-if="activeTab === 'playlist-card' && permissions.canAccessPage('playlist-card')"
|
||
class="animate-in fade-in slide-in-from-bottom-4 duration-500 h-full"
|
||
>
|
||
<LazyAdminKuGouImporter />
|
||
</div>
|
||
|
||
<!-- 数据分析 -->
|
||
<div
|
||
v-if="activeTab === 'data-analysis' && permissions.canAccessPage('data-analysis')"
|
||
class="animate-in fade-in slide-in-from-bottom-4 duration-500"
|
||
>
|
||
<LazyAdminDataAnalysisPanel />
|
||
</div>
|
||
|
||
<!-- 用户管理 -->
|
||
<div
|
||
v-if="activeTab === 'users' && permissions.canAccessPage('users')"
|
||
class="animate-in fade-in slide-in-from-bottom-4 duration-500"
|
||
>
|
||
<LazyAdminUserManager />
|
||
</div>
|
||
|
||
<!-- 消息管理 -->
|
||
<div
|
||
v-if="activeTab === 'notifications' && permissions.canAccessPage('notifications')"
|
||
class="animate-in fade-in slide-in-from-bottom-4 duration-500"
|
||
>
|
||
<LazyAdminNotificationSender />
|
||
</div>
|
||
|
||
<!-- SMTP邮件配置 -->
|
||
<div
|
||
v-if="activeTab === 'smtp-config' && permissions.canAccessPage('smtp-config')"
|
||
class="animate-in fade-in slide-in-from-bottom-4 duration-500"
|
||
>
|
||
<LazyAdminSmtpManager />
|
||
</div>
|
||
|
||
<!-- 播出时段 -->
|
||
<div
|
||
v-if="activeTab === 'playtimes' && permissions.canAccessPage('playtimes')"
|
||
class="animate-in fade-in slide-in-from-bottom-4 duration-500"
|
||
>
|
||
<LazyAdminPlayTimeManager />
|
||
</div>
|
||
|
||
<!-- 投稿管理 -->
|
||
<div
|
||
v-if="activeTab === 'request-times' && permissions.canAccessPage('request-times')"
|
||
class="animate-in fade-in slide-in-from-bottom-4 duration-500"
|
||
>
|
||
<LazyAdminRequestTimeManager />
|
||
</div>
|
||
|
||
<!-- 学期管理 -->
|
||
<div
|
||
v-if="activeTab === 'semesters' && permissions.canAccessPage('semesters')"
|
||
class="animate-in fade-in slide-in-from-bottom-4 duration-500"
|
||
>
|
||
<LazyAdminSemesterManager />
|
||
</div>
|
||
|
||
<!-- 黑名单管理 -->
|
||
<div
|
||
v-if="activeTab === 'blacklist' && permissions.canAccessPage('blacklist')"
|
||
class="animate-in fade-in slide-in-from-bottom-4 duration-500"
|
||
>
|
||
<LazyAdminBlacklistManager />
|
||
</div>
|
||
|
||
<!-- 站点配置 -->
|
||
<div
|
||
v-if="activeTab === 'site-config' && permissions.canAccessPage('site-config')"
|
||
class="animate-in fade-in slide-in-from-bottom-4 duration-500"
|
||
>
|
||
<LazyAdminSiteConfigManager />
|
||
</div>
|
||
|
||
<!-- 更新日志 -->
|
||
<div
|
||
v-if="activeTab === 'changelog' && permissions.canAccessPage('changelog')"
|
||
class="animate-in fade-in slide-in-from-bottom-4 duration-500"
|
||
>
|
||
<LazyAdminChangelogManager />
|
||
</div>
|
||
|
||
<!-- 选曲日期管理 -->
|
||
<div
|
||
v-if="activeTab === 'expected-play-dates' && permissions.canAccessPage('settings')"
|
||
class="animate-in fade-in slide-in-from-bottom-4 duration-500 h-full"
|
||
>
|
||
<LazyAdminExpectedPlayDates />
|
||
</div>
|
||
|
||
<!-- 数据库操作 -->
|
||
<div
|
||
v-if="activeTab === 'database' && permissions.canAccessPage('database')"
|
||
class="animate-in fade-in slide-in-from-bottom-4 duration-500"
|
||
>
|
||
<LazyAdminDatabaseManager />
|
||
</div>
|
||
|
||
<!-- 权限组管理 -->
|
||
<div
|
||
v-if="activeTab === 'roles' && permissions.canAccessPage('roles')"
|
||
class="animate-in fade-in slide-in-from-bottom-4 duration-500"
|
||
>
|
||
<LazyAdminRolesManager />
|
||
</div>
|
||
|
||
<!-- API密钥管理 -->
|
||
<div
|
||
v-if="activeTab === 'api-keys' && permissions.canAccessPage('api-keys')"
|
||
class="animate-in fade-in slide-in-from-bottom-4 duration-500"
|
||
>
|
||
<LazyAdminApiKeyManager />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<AdminOnboardingTutorial
|
||
:visible="showOnboardingTutorial"
|
||
@navigate="handleNavigate"
|
||
@close="closeOnboardingTutorial"
|
||
@complete="completeOnboardingTutorial"
|
||
/>
|
||
</main>
|
||
</div>
|
||
</ClientOnly>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed, onMounted, onUnmounted, provide, ref, watch } from 'vue'
|
||
import { Menu, ChevronUp } from '@lucide/vue'
|
||
import { useAuth } from '~/composables/useAuth'
|
||
import { usePermissions } from '~/composables/usePermissions'
|
||
import { fetchRolesConfig } from '~/composables/usePermissions'
|
||
import { useSiteConfig } from '~/composables/useSiteConfig'
|
||
import AdminOnboardingTutorial from '~/components/Admin/AdminOnboardingTutorial.vue'
|
||
|
||
// 使用站点配置
|
||
const { siteTitle, initSiteConfig } = useSiteConfig()
|
||
|
||
// 导入组件
|
||
|
||
// 页面元数据
|
||
definePageMeta({
|
||
layout: false
|
||
})
|
||
|
||
// 响应式数据
|
||
const activeTab = ref('overview')
|
||
const currentUser = ref(null)
|
||
const sidebarOpen = ref(false)
|
||
const showBackToTop = ref(false)
|
||
const showOnboardingTutorial = ref(false)
|
||
const contentScrollRef = ref(null)
|
||
const beforeNavigateHooks = ref([])
|
||
const tabRefreshKey = ref(0)
|
||
|
||
let revisionInterval = null
|
||
let lastDataRevision = ''
|
||
|
||
// 提供注册导航拦截钩子的方法
|
||
const registerBeforeNavigate = (hook) => {
|
||
beforeNavigateHooks.value.push(hook)
|
||
return () => {
|
||
const index = beforeNavigateHooks.value.indexOf(hook)
|
||
if (index > -1) {
|
||
beforeNavigateHooks.value.splice(index, 1)
|
||
}
|
||
}
|
||
}
|
||
provide('registerBeforeNavigate', registerBeforeNavigate)
|
||
|
||
// 服务
|
||
let auth = null
|
||
const permissions = usePermissions()
|
||
|
||
const fetchDataRevision = async () => {
|
||
try {
|
||
if (!auth || !auth.isAuthenticated.value) return ''
|
||
const authConfig = auth.getAuthConfig()
|
||
const result = await $fetch('/api/songs/revision', {
|
||
...authConfig,
|
||
query: { t: Date.now() }
|
||
})
|
||
return result?.revision || ''
|
||
} catch (e) {
|
||
console.error('获取数据修订号失败:', e)
|
||
return ''
|
||
}
|
||
}
|
||
|
||
const startRevisionPolling = async () => {
|
||
if (revisionInterval) clearInterval(revisionInterval)
|
||
lastDataRevision = await fetchDataRevision()
|
||
revisionInterval = setInterval(async () => {
|
||
const next = await fetchDataRevision()
|
||
if (!next || next === lastDataRevision) return
|
||
lastDataRevision = next
|
||
tabRefreshKey.value++
|
||
}, 5000)
|
||
}
|
||
|
||
// 方法
|
||
const getPageTitle = () => {
|
||
const titles = {
|
||
overview: '数据概览',
|
||
'workflow-tutorial': '流程与教程',
|
||
'data-analysis': '数据分析',
|
||
songs: '歌曲管理',
|
||
schedule: '排期管理',
|
||
print: '打印排期',
|
||
'playlist-card': '导入酷狗',
|
||
users: '用户管理',
|
||
blacklist: '黑名单管理',
|
||
'api-keys': 'API密钥管理',
|
||
notifications: '通知管理',
|
||
'smtp-config': '邮件配置',
|
||
playtimes: '播出时段',
|
||
'request-times': '投稿管理',
|
||
semesters: '学期管理',
|
||
'expected-play-dates': '选曲日期',
|
||
'site-config': '站点配置',
|
||
changelog: '更新日志',
|
||
database: '数据库操作',
|
||
password: '修改密码'
|
||
}
|
||
return titles[activeTab.value] || '管理后台'
|
||
}
|
||
|
||
// 动态页面标题
|
||
const dynamicTitle = computed(() => {
|
||
const currentPageTitle = getPageTitle()
|
||
if (siteTitle && siteTitle.value) {
|
||
return `${currentPageTitle} | ${siteTitle.value}`
|
||
}
|
||
return `${currentPageTitle} | 宝一外校园点歌系统`
|
||
})
|
||
|
||
// 监听activeTab变化，更新页面标题
|
||
watch(
|
||
activeTab,
|
||
() => {
|
||
if (typeof document !== 'undefined') {
|
||
document.title = dynamicTitle.value
|
||
}
|
||
},
|
||
{ immediate: true }
|
||
)
|
||
|
||
// 监听siteTitle变化，更新页面标题
|
||
watch(
|
||
() => siteTitle?.value,
|
||
() => {
|
||
if (typeof document !== 'undefined') {
|
||
document.title = dynamicTitle.value
|
||
}
|
||
}
|
||
)
|
||
|
||
const getRoleDisplayName = (role) => {
|
||
const roleNames = {
|
||
USER: '普通用户',
|
||
SONG_ADMIN: '歌曲管理员',
|
||
ADMIN: '超级管理员',
|
||
SUPER_ADMIN: '超级管理员'
|
||
}
|
||
return roleNames[role] || role
|
||
}
|
||
|
||
const handleLogout = async () => {
|
||
if (auth) {
|
||
await auth.logout()
|
||
await navigateTo('/login')
|
||
}
|
||
}
|
||
|
||
// 导航方法
|
||
const handleNavigate = async (tab) => {
|
||
if (activeTab.value === tab) return
|
||
|
||
// 检查是否有拦截
|
||
for (const hook of beforeNavigateHooks.value) {
|
||
if (!(await hook(tab))) return
|
||
}
|
||
|
||
activeTab.value = tab
|
||
// 移动端点击导航后关闭侧边栏
|
||
if (window.innerWidth <= 768) {
|
||
closeSidebar()
|
||
}
|
||
}
|
||
|
||
// 侧边栏控制方法
|
||
const toggleSidebar = () => {
|
||
sidebarOpen.value = !sidebarOpen.value
|
||
}
|
||
|
||
const closeSidebar = () => {
|
||
sidebarOpen.value = false
|
||
}
|
||
|
||
const openOnboardingTutorial = () => {
|
||
showOnboardingTutorial.value = true
|
||
}
|
||
|
||
const closeOnboardingTutorial = () => {
|
||
showOnboardingTutorial.value = false
|
||
}
|
||
|
||
const completeOnboardingTutorial = () => {
|
||
showOnboardingTutorial.value = false
|
||
if (typeof window !== 'undefined') {
|
||
localStorage.setItem('voicehub_admin_tutorial_seen_v1', 'true')
|
||
}
|
||
}
|
||
|
||
// 监听窗口大小变化，大屏幕时自动关闭移动端侧边栏
|
||
const handleResize = () => {
|
||
if (window.innerWidth > 768) {
|
||
sidebarOpen.value = false
|
||
}
|
||
}
|
||
|
||
// 返回顶部功能
|
||
const scrollToTop = () => {
|
||
if (contentScrollRef.value) {
|
||
contentScrollRef.value.scrollTo({ top: 0, behavior: 'smooth' })
|
||
}
|
||
}
|
||
|
||
// 监听滚动事件
|
||
const handleScroll = () => {
|
||
showBackToTop.value = (contentScrollRef.value?.scrollTop || 0) > 300
|
||
}
|
||
|
||
// 触摸手势支持
|
||
let touchStartX = 0
|
||
let touchStartY = 0
|
||
let touchEndX = 0
|
||
let touchEndY = 0
|
||
|
||
const handleTouchStart = (e) => {
|
||
touchStartX = e.changedTouches[0].screenX
|
||
touchStartY = e.changedTouches[0].screenY
|
||
}
|
||
|
||
const handleTouchEnd = (e) => {
|
||
touchEndX = e.changedTouches[0].screenX
|
||
touchEndY = e.changedTouches[0].screenY
|
||
handleSwipe()
|
||
}
|
||
|
||
const handleSwipe = () => {
|
||
const deltaX = touchEndX - touchStartX
|
||
const deltaY = touchEndY - touchStartY
|
||
const minSwipeDistance = 50
|
||
|
||
// 只在移动端处理滑动手势
|
||
if (window.innerWidth > 768) return
|
||
|
||
// 水平滑动距离大于垂直滑动距离，且超过最小滑动距离
|
||
if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > minSwipeDistance) {
|
||
if (deltaX > 0 && touchStartX < 50) {
|
||
// 从左边缘向右滑动，打开侧边栏
|
||
sidebarOpen.value = true
|
||
} else if (deltaX < 0 && sidebarOpen.value) {
|
||
// 向左滑动，关闭侧边栏
|
||
sidebarOpen.value = false
|
||
}
|
||
}
|
||
}
|
||
|
||
// 生命周期
|
||
onMounted(async () => {
|
||
// 初始化站点配置
|
||
await initSiteConfig()
|
||
|
||
// 初始化服务
|
||
auth = useAuth()
|
||
await fetchRolesConfig()
|
||
|
||
// 检查认证状态（plugin已经初始化过了）
|
||
|
||
if (!auth.isAuthenticated.value) {
|
||
await navigateTo('/login')
|
||
return
|
||
}
|
||
|
||
// 检查用户是否有访问后台的权限
|
||
if (!permissions.canAccessAdmin.value) {
|
||
await navigateTo('/')
|
||
return
|
||
}
|
||
|
||
currentUser.value = auth.user.value
|
||
|
||
// 设置默认页面
|
||
const userPages = permissions.getUserPages.value
|
||
if (userPages.length > 0 && !userPages.includes(activeTab.value)) {
|
||
activeTab.value = userPages[0]
|
||
}
|
||
|
||
// 设置初始页面标题
|
||
if (typeof document !== 'undefined') {
|
||
document.title = dynamicTitle.value
|
||
}
|
||
|
||
// 添加窗口大小监听器
|
||
window.addEventListener('resize', handleResize)
|
||
contentScrollRef.value?.addEventListener('scroll', handleScroll, { passive: true })
|
||
handleScroll()
|
||
|
||
// 添加双击关闭侧边栏事件
|
||
document.addEventListener('dblclick', (e) => {
|
||
if (window.innerWidth <= 768 && sidebarOpen.value) {
|
||
closeSidebar()
|
||
}
|
||
})
|
||
|
||
if (!localStorage.getItem('voicehub_admin_tutorial_seen_v1')) {
|
||
setTimeout(() => {
|
||
showOnboardingTutorial.value = true
|
||
}, 800)
|
||
}
|
||
|
||
await startRevisionPolling()
|
||
})
|
||
|
||
// 组件卸载时清理事件监听器
|
||
onUnmounted(() => {
|
||
window.removeEventListener('resize', handleResize)
|
||
contentScrollRef.value?.removeEventListener('scroll', handleScroll)
|
||
if (revisionInterval) clearInterval(revisionInterval)
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.admin-layout {
|
||
display: flex;
|
||
min-height: 100vh;
|
||
background: var(--bg-primary, #ffffff);
|
||
color: var(--text-primary, #1a2332);
|
||
position: relative;
|
||
}
|
||
|
||
/* 自定义滚动条样式 */
|
||
.custom-scrollbar::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
.custom-scrollbar::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||
background: var(--border-primary, #cbd5e1);
|
||
border-radius: 10px;
|
||
}
|
||
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||
background: var(--border-secondary, #94a3b8);
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.admin-main-header {
|
||
padding-top: max(0px, env(safe-area-inset-top));
|
||
}
|
||
|
||
.admin-content-area {
|
||
padding-bottom: calc(1rem + env(safe-area-inset-bottom));
|
||
}
|
||
|
||
.back-to-top-btn {
|
||
right: 1rem;
|
||
bottom: calc(1rem + env(safe-area-inset-bottom));
|
||
padding: 0.65rem;
|
||
}
|
||
}
|
||
</style>
|