Henry_Du/BYW-VoiceHub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 迁移自定义功能至 1.5.9.9 版本

Browse Source 
包含音乐源限制、CI 防 OOM 优化、数据库连接池优化、管理端权限及 UI 细节定制等功能
This commit is contained in:
Henry_Du
2026-09-12 19:26:42 +08:00
parent 34f0679117
commit 1106aeea6c
161 changed files with 18963 additions and 27900 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Admin/UserSongsModal.vue
+86 -92
View File
@@ -13,7 +13,7 @@
@click="handleOverlayClick"
>
<!-- 遮罩层 -->
<div class="absolute inset-0 bg-bg-primary-60 backdrop-blur-sm" />
<div class="absolute inset-0 bg-black/60 backdrop-blur-sm" />
<!-- 模态框面板 -->
<transition
@@ -26,58 +26,71 @@
>
<div
v-if="show"
class="relative w-full max-w-4xl max-h-[85vh] flex flex-col bg-bg-secondary border border-border-secondary rounded-xl shadow-2xl overflow-hidden"
class="relative w-full max-w-4xl max-h-[85vh] flex flex-col bg-zinc-900 border border-zinc-800 rounded-xl shadow-2xl overflow-hidden"
@click.stop
>
<!-- 头部 -->
<div
class="flex items-center justify-between px-6 py-4 border-b border-border-secondary bg-bg-secondary"
class="flex items-center justify-between px-6 py-4 border-b border-zinc-800 bg-zinc-900/50 backdrop-blur-sm"
>
<h3 class="text-lg font-semibold text-text-primary">{{ locale.title }}</h3>
<h3 class="text-lg font-semibold text-white">用户歌曲信息</h3>
<button
class="p-2 text-text-tertiary hover:text-text-primary hover:bg-bg-tertiary rounded-lg transition-colors"
class="p-2 text-zinc-400 hover:text-white hover:bg-zinc-800 rounded-lg transition-colors"
@click="$emit('close')"
>
<Icon name="x" :size="20" />
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M18 6 6 18" />
<path d="m6 6 18 12" />
</svg>
</button>
</div>
<!-- 主体内容 -->
<div class="flex-1 flex flex-col min-h-0 overflow-hidden bg-bg-secondary">
<div class="flex-1 flex flex-col min-h-0 overflow-hidden bg-zinc-900">
<!-- 加载状态 -->
<div v-if="loading" class="flex-1 flex flex-col items-center justify-center">
<LoadingState :message="locale.loading" spinner-type="circle" />
<LoadingState message="加载数据中..." spinner-type="circle" />
</div>
<!-- 错误状态 -->
<div
v-else-if="error"
class="flex-1 flex flex-col items-center justify-center text-text-tertiary gap-4"
class="flex-1 flex flex-col items-center justify-center text-zinc-400 gap-4"
>
<div class="text-4xl">⚠️</div>
<Icon class="text-4xl text-yellow-500" name="alert-triangle" size="48" />
<p>{{ error }}</p>
<button
class="px-4 py-2 bg-primary-hover hover:bg-primary text-text-primary rounded-lg transition-colors text-sm font-medium"
class="px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg transition-colors text-sm font-medium"
@click="retryFetch"
>
{{ commonLocale.retry }}
重试
</button>
</div>
<!-- 内容 -->
<div v-else-if="userSongs" class="flex-1 flex flex-col min-h-0">
<!-- 用户信息头部 -->
<div class="px-6 py-4 bg-bg-secondary border-b border-border-secondary">
<div class="px-6 py-4 bg-zinc-900 border-b border-zinc-800">
<div class="flex flex-col gap-1">
<div class="flex items-center gap-3">
<h4 class="text-base font-medium text-text-primary">{{ userSongs.user.name }}</h4>
<span class="text-sm text-text-tertiary font-mono">{{
<h4 class="text-base font-medium text-white">{{ userSongs.user.name }}</h4>
<span class="text-sm text-zinc-500 font-mono">{{
userSongs.user.username
}}</span>
</div>
<p
v-if="userSongs.user.grade || userSongs.user.class"
class="text-sm text-text-tertiary"
class="text-sm text-zinc-400"
>
{{ userSongs.user.grade || '' }} {{ userSongs.user.class || '' }}
</p>
@@ -86,7 +99,7 @@
<!-- 工具栏 (标签页 + 过滤) -->
<div
class="flex flex-col sm:flex-row items-center justify-between border-b border-border-secondary bg-bg-secondary-50"
class="flex flex-col sm:flex-row items-center justify-between border-b border-zinc-800 bg-zinc-900/50"
>
<!-- 标签页 -->
<div class="flex w-full sm:w-auto overflow-x-auto no-scrollbar">
@@ -96,8 +109,8 @@
class="relative px-6 py-3 text-sm font-medium transition-colors whitespace-nowrap flex-shrink-0"
:class="
activeTab === tab.id
? 'text-primary'
: 'text-text-tertiary hover:text-text-primary hover:bg-bg-tertiary-50'
? 'text-blue-500'
: 'text-zinc-400 hover:text-white hover:bg-zinc-800/50'
"
@click="activeTab = tab.id"
>
@@ -106,8 +119,8 @@
class="ml-1.5 text-xs px-1.5 py-0.5 rounded-full"
:class="
activeTab === tab.id
? 'bg-primary-10 text-primary'
: 'bg-bg-tertiary text-text-tertiary'
? 'bg-blue-500/10 text-blue-500'
: 'bg-zinc-800 text-zinc-500'
"
>
{{ getTabCount(tab.id) }}
@@ -115,20 +128,20 @@
<!-- 激活指示器 -->
<div
v-if="activeTab === tab.id"
class="absolute bottom-0 left-0 right-0 h-0.5 bg-primary"
class="absolute bottom-0 left-0 right-0 h-0.5 bg-blue-500"
/>
</button>
</div>
<!-- 学期过滤器 -->
<div
class="w-full sm:w-auto px-4 py-2 border-t sm:border-t-0 sm:border-l border-border-secondary flex items-center gap-3 bg-bg-secondary-30"
class="w-full sm:w-auto px-4 py-2 border-t sm:border-t-0 sm:border-l border-zinc-800 flex items-center gap-3 bg-zinc-900/30"
>
<CustomSelect
v-model="selectedSemester"
:options="[{ label: locale.allSemesters, value: null }, ...semesterOptions]"
:label="locale.semesterFilter"
:placeholder="locale.allSemesters"
:options="[{ label: '全部学期', value: null }, ...semesterOptions]"
label="学期过滤"
placeholder="全部学期"
class-name="w-full sm:w-48"
/>
</div>
@@ -138,38 +151,38 @@
<div class="flex-1 overflow-y-auto p-4 sm:p-6 space-y-3 custom-scrollbar">
<div
v-if="filteredSongs.length === 0"
class="flex flex-col items-center justify-center py-20 text-text-tertiary"
class="flex flex-col items-center justify-center py-20 text-zinc-500"
>
<div class="text-5xl mb-4 opacity-50">{{ activeTabIcon }}</div>
<p>{{ locale.empty }}</p>
<Icon class="text-5xl mb-4 opacity-50" :name="activeTabIcon" size="48" />
<p>没有找到相关记录</p>
</div>
<div
v-for="song in filteredSongs"
:key="song.id"
class="group flex flex-col sm:flex-row sm:items-center justify-between gap-4 p-4 rounded-lg border border-border-secondary bg-bg-tertiary-20 hover:bg-bg-tertiary-50 hover:border-border-tertiary transition-all duration-200"
class="group flex flex-col sm:flex-row sm:items-center justify-between gap-4 p-4 rounded-lg border border-zinc-800 bg-zinc-800/20 hover:bg-zinc-800/50 hover:border-zinc-700 transition-all duration-200"
>
<!-- 歌曲信息 -->
<div class="flex-1 min-w-0">
<div class="flex items-center gap-2 mb-1">
<h5 class="text-sm font-medium text-text-primary truncate">{{ song.title }}</h5>
<h5 class="text-sm font-medium text-white truncate">{{ song.title }}</h5>
<span
v-if="song.semester"
class="px-1.5 py-0.5 rounded text-[10px] font-medium bg-bg-tertiary text-text-tertiary border border-border-tertiary"
class="px-1.5 py-0.5 rounded text-[10px] font-medium bg-zinc-800 text-zinc-400 border border-zinc-700"
>
{{ song.semester }}
</span>
</div>
<div class="text-sm text-text-tertiary truncate">{{ song.artist }}</div>
<div class="text-sm text-zinc-400 truncate">{{ song.artist }}</div>
<!-- Meta Info (Mobile) -->
<div
class="flex flex-wrap items-center gap-3 mt-3 sm:hidden text-xs text-text-tertiary"
class="flex flex-wrap items-center gap-3 mt-3 sm:hidden text-xs text-zinc-500"
>
<span>{{ getMetaTime(song) }}</span>
<span v-if="song.voteCount !== undefined">{{ formatLocale(locale.votes, song.voteCount) }}</span>
<span v-if="song.voteCount !== undefined">{{ song.voteCount }} 票</span>
<span v-if="song.requestCount !== undefined"
>{{ formatLocale(locale.requests, song.requestCount) }}</span
>{{ song.requestCount }} 人申请</span
>
</div>
</div>
@@ -188,21 +201,21 @@
<!-- Meta Info (Desktop) -->
<div class="hidden sm:flex flex-col items-end gap-0.5 min-w-[100px]">
<span class="text-xs text-text-tertiary">{{ getMetaTime(song) }}</span>
<span class="text-xs text-zinc-400">{{ getMetaTime(song) }}</span>
<div class="flex items-center gap-2">
<span v-if="song.voteCount !== undefined" class="text-xs text-text-tertiary"
>{{ formatLocale(locale.votes, song.voteCount) }}</span
<span v-if="song.voteCount !== undefined" class="text-xs text-zinc-500"
>{{ song.voteCount }} 票</span
>
<span v-if="song.requestCount !== undefined" class="text-xs text-text-tertiary"
>{{ formatLocale(locale.requests, song.requestCount) }}</span
<span v-if="song.requestCount !== undefined" class="text-xs text-zinc-500"
>{{ song.requestCount }} 人申请</span
>
</div>
</div>
<!-- Submitter Info (if available) -->
<div v-if="song.requester" class="hidden sm:block text-right min-w-[80px]">
<div class="text-xs text-text-secondary">{{ song.requester.name }}</div>
<div class="text-[10px] text-text-tertiary">
<div class="text-xs text-zinc-300">{{ song.requester.name }}</div>
<div class="text-[10px] text-zinc-500">
{{ song.requester.grade }}{{ song.requester.class }}
</div>
</div>
@@ -211,12 +224,12 @@
<!-- 投稿人信息 (移动端) -->
<div
v-if="song.requester"
class="sm:hidden pt-3 mt-1 border-t border-border-secondary-50 flex justify-between items-center text-xs"
class="sm:hidden pt-3 mt-1 border-t border-zinc-800/50 flex justify-between items-center text-xs"
>
<span class="text-text-tertiary">{{ locale.requester }}</span>
<span class="text-text-secondary">
<span class="text-zinc-500">投稿人:</span>
<span class="text-zinc-300">
{{ song.requester.name }}
<span class="text-text-tertiary ml-1">
<span class="text-zinc-500 ml-1">
{{ song.requester.grade }}{{ song.requester.class }}
</span>
</span>
@@ -235,9 +248,7 @@
import { ref, computed, watch } from 'vue'
import { useSemesters } from '~/composables/useSemesters'
import CustomSelect from '~/components/UI/Common/CustomSelect.vue'
import Icon from '~/components/UI/Icon.vue'
import LoadingState from '~/components/UI/Common/LoadingState.vue'
import { useLocale } from '~/utils/locale'
const props = defineProps({
show: {
@@ -261,16 +272,6 @@ const selectedSemester = ref(null)
// Composables
const { semesters, fetchSemesterOptions } = useSemesters()
const { common, currentLocale } = useLocale()
const commonLocale = computed(() => common.value || {})
const locale = computed(() => {
const base = common.value?.userSongsModal || {}
return {
...base,
tabs: { ...(base.tabs || {}) },
statuses: { ...(base.statuses || {}) }
}
})
// Computed
const semesterOptions = computed(() => {
@@ -280,22 +281,22 @@ const semesterOptions = computed(() => {
}))
})
const tabs = computed(() => [
{ id: 'submitted', label: locale.value.tabs.submitted },
{ id: 'voted', label: locale.value.tabs.voted },
{ id: 'replay', label: locale.value.tabs.replay }
])
const tabs = [
{ id: 'submitted', label: '投稿歌曲' },
{ id: 'voted', label: '投票歌曲' },
{ id: 'replay', label: '重播申请' }
]
const activeTabIcon = computed(() => {
switch (activeTab.value) {
case 'submitted':
return '🎵'
return 'music'
case 'voted':
return '❤️'
return 'heart'
case 'replay':
return '🔁'
return 'repeat'
default:
return '📄'
return 'file-text'
}
})
@@ -370,7 +371,7 @@ const fetchUserSongs = async () => {
userSongs.value = songsResponse
} catch (err) {
console.error('获取用户歌曲信息失败:', err)
error.value = err.data?.message || locale.value.fetchFailed
error.value = err.data?.message || '获取用户歌曲信息失败'
} finally {
loading.value = false
}
@@ -385,25 +386,18 @@ const handleOverlayClick = () => {
}
// Helpers
const formatTimeAgo = (key, value) => {
const message = commonLocale.value?.time?.[key]
if (typeof message === 'function') return message(value)
if (typeof message === 'string') return message.replace(/{(\d+)}/g, (match, index) => index === '0' ? String(value) : match)
return ''
}
const formatDate = (dateString) => {
if (!dateString) return ''
const date = new Date(dateString)
const now = getSyncedDate()
const now = new Date()
const diff = now - date
if (diff < 60000) return commonLocale.value?.time?.justNow || ''
if (diff < 3600000) return formatTimeAgo('minutesAgo', Math.floor(diff / 60000))
if (diff < 86400000) return formatTimeAgo('hoursAgo', Math.floor(diff / 3600000))
if (diff < 86400000 * 7) return formatTimeAgo('daysAgo', Math.floor(diff / 86400000))
if (diff < 60000) return '刚刚'
if (diff < 3600000) return `${Math.floor(diff / 60000)}分钟前`
if (diff < 86400000) return `${Math.floor(diff / 3600000)}小时前`
if (diff < 86400000 * 7) return `${Math.floor(diff / 86400000)}天前`
return date.toLocaleDateString(currentLocale.value, {
return date.toLocaleDateString('zh-CN', {
year: 'numeric',
month: 'short',
day: 'numeric'
@@ -412,25 +406,25 @@ const formatDate = (dateString) => {
const getMetaTime = (song) => {
if (activeTab.value === 'submitted') return formatDate(song.createdAt)
if (activeTab.value === 'voted') return `${formatDate(song.votedAt)} ${locale.value.voted}`
if (activeTab.value === 'replay') return `${formatDate(song.requestedAt)} ${locale.value.requested}`
if (activeTab.value === 'voted') return `${formatDate(song.votedAt)} 投票`
if (activeTab.value === 'replay') return `${formatDate(song.requestedAt)} 申请`
return ''
}
const getStatusText = (song) => {
if (song.played) return locale.value.statuses.played
if (song.scheduled) return locale.value.statuses.scheduled
return locale.value.statuses.pending
if (song.played) return '已播放'
if (song.scheduled) return '已排期'
return '待排期'
}
const getStatusClasses = (song) => {
if (song.played) {
return 'bg-success-10 text-success border-success-20'
return 'bg-emerald-500/10 text-emerald-500 border-emerald-500/20'
}
if (song.scheduled) {
return 'bg-primary-10 text-primary border-primary-20'
return 'bg-blue-500/10 text-blue-500 border-blue-500/20'
}
return 'bg-warning-10 text-warning border-warning-20'
return 'bg-amber-500/10 text-amber-500 border-amber-500/20'
}
// 监听器
@@ -470,12 +464,12 @@ watch(
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background-color: var(--usersongs-scroll-thumb);
background-color: rgba(113, 113, 122, 0.3); /* zinc-500/30 */
border-radius: 3px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background-color: var(--usersongs-scroll-thumb-hover);
background-color: rgba(113, 113, 122, 0.5);
}
/* 标签页隐藏滚动条 */