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

fix(ui): 适配前台浅色背景细节

Browse Source 
- 学校 logo 替换为黑字版本，修改 useSiteConfig 默认值和 fallback
- 首页通知卡片补齐浅色样式：status-tag（三态）、unread-indicator、
  invite-actions、accept-btn、reject-btn
- 投稿区域状态徽章由绝对定位改为搜索标题行内布局，背景改为浅色
- 消息设置页面整体改为浅色主题，主色系改为 indigo 以匹配 ModernLight
This commit is contained in:
Henry_Du
2026-09-18 22:15:09 +08:00
parent 90e32ad086
commit 43f05a6e34
5 changed files with 234 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Songs/RequestForm.vue
+77 -55
View File
@@ -56,42 +56,46 @@
<div class="form-container">
<form class="song-request-form" @submit.prevent="handleSearch">
<div v-if="user && submissionStatus" class="submission-status-corner">
<div
:class="[
'submission-status-badge',
{
open: !submissionStatus.submissionClosed,
closed: submissionStatus.submissionClosed
}
]"
>
<div class="badge-title">
{{ submissionStatus.submissionClosed ? '投稿未开放' : '投稿开放中' }}
</div>
<div
v-if="submissionStatus.timeLimitationEnabled"
class="badge-subtitle"
>
<template v-if="submissionStatus.currentTimePeriod">
{{ submissionStatus.currentTimePeriod.name }}
</template>
<template v-else-if="submissionStatus.nextTimePeriod">
下次开始：{{
submissionStatus.nextTimePeriod.startTime
? formatBeijingDateTime(submissionStatus.nextTimePeriod.startTime)
: submissionStatus.nextTimePeriod.name
}}
</template>
</div>
</div>
</div>
<!-- 顶部行：搜索和联合投稿 -->
<div class="form-header-row">
<!-- 歌曲搜索区域 -->
<div class="search-section">
<div class="search-label">歌曲搜索</div>
<div class="search-header-row">
<div class="search-label">歌曲搜索</div>
<div
v-if="user && submissionStatus"
class="submission-status-inline"
>
<div
:class="[
'submission-status-badge',
{
open: !submissionStatus.submissionClosed,
closed: submissionStatus.submissionClosed
}
]"
>
<div class="badge-title">
{{ submissionStatus.submissionClosed ? '投稿未开放' : '投稿开放中' }}
</div>
<div
v-if="submissionStatus.timeLimitationEnabled"
class="badge-subtitle"
>
<template v-if="submissionStatus.currentTimePeriod">
{{ submissionStatus.currentTimePeriod.name }}
</template>
<template v-else-if="submissionStatus.nextTimePeriod">
下次：{{
submissionStatus.nextTimePeriod.startTime
? formatBeijingDateTime(submissionStatus.nextTimePeriod.startTime)
: submissionStatus.nextTimePeriod.name
}}
</template>
</div>
</div>
</div>
</div>
<div class="search-input-group">
<input
id="title"
@@ -3012,38 +3016,36 @@ defineExpose({
position: relative;
}
.submission-status-corner {
position: absolute;
top: 0;
right: 0;
z-index: 30;
.submission-status-inline {
display: flex;
align-items: center;
justify-content: flex-end;
}
.submission-status-badge {
display: flex;
flex-direction: column;
gap: 2px;
padding: 8px 10px;
padding: 8px 12px;
border-radius: 12px;
border: 1px solid var(--border-tertiary);
background: rgba(6, 15, 22, 0.9);
backdrop-filter: blur(8px);
border: 1px solid var(--border-primary);
background: var(--bg-primary, #ffffff);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
min-width: 140px;
text-align: center;
}
@media (max-width: 640px) {
.submission-status-corner {
position: static;
align-self: flex-end;
margin-top: -6px;
margin-bottom: -2px;
.submission-status-inline {
justify-content: flex-start;
width: 100%;
}
.submission-status-badge {
min-width: 0;
padding: 6px 9px;
padding: 6px 10px;
border-radius: 10px;
flex: 1;
}
.badge-title {
@@ -3056,11 +3058,13 @@ defineExpose({
}
.submission-status-badge.open {
border-color: rgba(16, 185, 129, 0.35);
background: rgba(22, 163, 74, 0.06);
border-color: rgba(22, 163, 74, 0.2);
}
.submission-status-badge.closed {
border-color: rgba(239, 68, 68, 0.35);
background: rgba(239, 68, 68, 0.06);
border-color: rgba(239, 68, 68, 0.2);
}
.badge-title {
@@ -3070,7 +3074,7 @@ defineExpose({
}
.submission-status-badge.open .badge-title {
color: rgba(16, 185, 129, 0.95);
color: rgba(22, 163, 74, 0.95);
}
.submission-status-badge.closed .badge-title {
@@ -3083,6 +3087,23 @@ defineExpose({
color: var(--text-secondary);
}
.search-header-row {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 0.75rem;
margin-bottom: 0.5rem;
}
@media (max-width: 640px) {
.search-header-row {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
}
.login-required-hint {
margin-left: 0.5rem;
display: flex;
@@ -3171,19 +3192,20 @@ defineExpose({
.search-section {
display: flex;
align-items: center;
gap: 0.75rem;
flex-direction: column;
align-items: stretch;
gap: 0.5rem;
flex: 1.5;
min-width: 400px; /* 增加最小宽度，确保搜索框、标签和按钮有足够空间 */
min-width: 400px;
}
.search-label {
font-family: 'MiSans', sans-serif;
font-weight: 600;
font-size: 15px;
color: var(--text-primary, #ffffff);
color: var(--text-primary, #09090b);
white-space: nowrap;
flex-shrink: 0; /* 防止标签被压缩 */
flex-shrink: 0;
}
.search-input-group {
app/composables/useSiteConfig.js
+2 -2
View File
@@ -52,7 +52,7 @@ export const useSiteConfig = () => {
siteConfig.value = {
siteTitle: '校园广播站点歌系统',
siteLogoUrl: '/images/site-logo.png',
schoolLogoHomeUrl: '/images/school-logo-white.png',
schoolLogoHomeUrl: '/images/school-logo-black.png',
schoolLogoPrintUrl: '/images/school-logo-transparent.png',
siteDescription: '校园广播站点歌系统 - 让你的声音被听见',
siteVersion: '',
@@ -81,7 +81,7 @@ export const useSiteConfig = () => {
})
const schoolLogoHomeUrl = computed(() => {
const raw = (siteConfig.value.schoolLogoHomeUrl || '').trim()
const fallback = '/images/school-logo-white.png'
const fallback = '/images/school-logo-black.png'
if (!raw) return fallback
if (raw === '/images/school-logo-white.png' || raw === '/images/school-logo-black.png') return fallback
app/pages/index.vue
+87
View File
@@ -3781,4 +3781,91 @@ if (
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 67, 248, 0.3);
}
.status-tag {
display: inline-block;
margin-left: 6px;
padding: 2px 8px;
font-size: 10px;
font-weight: 700;
border-radius: 6px;
letter-spacing: 0.02em;
}
.status-tag.accepted {
background: var(--success-light, rgba(22, 163, 74, 0.1));
color: var(--success, #16a34a);
border: 1px solid var(--success-border, rgba(22, 163, 74, 0.2));
}
.status-tag.rejected {
background: var(--error-light, rgba(225, 29, 72, 0.1));
color: var(--error, #e11d48);
border: 1px solid var(--error-border, rgba(225, 29, 72, 0.2));
}
.status-tag.invalid {
background: var(--warning-light, rgba(234, 88, 12, 0.1));
color: var(--warning, #ea580c);
border: 1px solid var(--warning-border, rgba(234, 88, 12, 0.2));
}
.unread-indicator {
display: inline-block;
width: 6px;
height: 6px;
margin-left: 8px;
vertical-align: middle;
background: var(--primary, #4f46e5);
border-radius: 50%;
box-shadow: 0 0 0 2px var(--primary-light, rgba(79, 70, 229, 0.2));
}
.invite-actions {
display: flex;
gap: 10px;
margin-top: 12px;
}
.action-button {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
font-size: 12px;
font-weight: 600;
border-radius: 10px;
border: 1px solid transparent;
cursor: pointer;
transition: all 0.2s ease;
}
.action-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.action-button.accept-btn {
background: var(--success-light, rgba(22, 163, 74, 0.1));
color: var(--success, #16a34a);
border-color: var(--success-border, rgba(22, 163, 74, 0.2));
}
.action-button.accept-btn:hover:not(:disabled) {
background: var(--success, #16a34a);
color: #ffffff;
border-color: var(--success, #16a34a);
}
.action-button.reject-btn {
background: var(--bg-secondary, #f4f4f5);
color: var(--text-secondary, #3f3f46);
border-color: var(--border-primary, #e4e4e7);
}
.action-button.reject-btn:hover:not(:disabled) {
background: var(--error-light, rgba(225, 29, 72, 0.1));
color: var(--error, #e11d48);
border-color: var(--error-border, rgba(225, 29, 72, 0.2));
}
</style>
app/pages/notification-settings.vue
+68 -68
View File
@@ -1,19 +1,19 @@
<template>
<div class="min-h-screen bg-zinc-950 text-zinc-200 pb-24">
<div class="min-h-screen bg-zinc-50 text-zinc-900 pb-24">
<!-- 顶部导航栏 -->
<div
class="sticky top-0 z-30 bg-zinc-950/80 backdrop-blur-xl border-b border-zinc-900/50 px-4 py-4 mb-8"
class="sticky top-0 z-30 bg-white/80 backdrop-blur-xl border-b border-zinc-200/50 px-4 py-4 mb-8"
>
<div class="max-w-[1000px] mx-auto flex items-center justify-between">
<div class="flex items-center gap-4">
<button
class="p-2 hover:bg-zinc-900 rounded-xl transition-all text-zinc-400 hover:text-zinc-100"
class="p-2 hover:bg-zinc-100 rounded-xl transition-all text-zinc-500 hover:text-zinc-900"
@click="goBack"
>
<ArrowLeft :size="20" />
</button>
<div>
<h1 class="text-xl font-black text-zinc-100 tracking-tight">消息设置</h1>
<h1 class="text-xl font-black text-zinc-900 tracking-tight">消息设置</h1>
<p class="text-[10px] text-zinc-500 font-medium uppercase tracking-widest mt-0.5">
Notification Settings
</p>
@@ -22,7 +22,7 @@
<button
:disabled="loading || saving"
class="flex items-center gap-2 px-6 py-2 bg-blue-600 hover:bg-blue-500 text-white text-xs font-black rounded-xl shadow-lg shadow-blue-900/20 transition-all active:scale-95 disabled:opacity-50"
class="flex items-center gap-2 px-6 py-2 bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-black rounded-xl shadow-lg shadow-indigo-500/20 transition-all active:scale-95 disabled:opacity-50"
@click="saveSettings"
>
<template v-if="saving"> <Loader2 :size="14" class="animate-spin" /> 保存中... </template>
@@ -33,19 +33,19 @@
<div class="max-w-[1000px] mx-auto px-4">
<div v-if="loading" class="flex flex-col items-center justify-center py-32">
<Loader2 :size="32" class="text-blue-500 animate-spin mb-4" />
<Loader2 :size="32" class="text-indigo-500 animate-spin mb-4" />
<p class="text-zinc-500 text-sm font-medium">加载设置中...</p>
</div>
<div v-else class="space-y-8">
<!-- 站内通知设置 -->
<section :class="sectionClass">
<div class="flex items-center gap-3 border-b border-zinc-800/50 pb-5 mb-6">
<div class="p-2.5 bg-blue-500/10 rounded-xl">
<Bell :size="20" class="text-blue-500" />
<div class="flex items-center gap-3 border-b border-zinc-200/50 pb-5 mb-6">
<div class="p-2.5 bg-indigo-500/10 rounded-xl">
<Bell :size="20" class="text-indigo-600" />
</div>
<div>
<h2 class="text-base font-black text-zinc-100">站内消息设置</h2>
<h2 class="text-base font-black text-zinc-900">站内消息设置</h2>
<p class="text-xs text-zinc-500 mt-0.5">配置您希望在系统内接收的消息类型</p>
</div>
</div>
@@ -54,14 +54,14 @@
<!-- 歌曲被选中消息 -->
<div :class="itemClass">
<div class="flex-1">
<h3 class="text-sm font-bold text-zinc-200">歌曲被选中消息</h3>
<h3 class="text-sm font-bold text-zinc-800">歌曲被选中消息</h3>
<p class="text-[11px] text-zinc-500 mt-1">当您投稿的歌曲被选中播放时通知您</p>
</div>
<div class="shrink-0">
<input
v-model="localSettings.songSelectedNotify"
type="checkbox"
class="w-5 h-5 rounded border-zinc-800 bg-zinc-900 accent-blue-600 cursor-pointer"
class="w-5 h-5 rounded border-zinc-300 bg-white accent-indigo-600 cursor-pointer"
>
</div>
</div>
@@ -69,14 +69,14 @@
<!-- 歌曲已播放消息 -->
<div :class="itemClass">
<div class="flex-1">
<h3 class="text-sm font-bold text-zinc-200">歌曲已播放消息</h3>
<h3 class="text-sm font-bold text-zinc-800">歌曲已播放消息</h3>
<p class="text-[11px] text-zinc-500 mt-1">当您投稿的歌曲播放完成时通知您</p>
</div>
<div class="shrink-0">
<input
v-model="localSettings.songPlayedNotify"
type="checkbox"
class="w-5 h-5 rounded border-zinc-800 bg-zinc-900 accent-blue-600 cursor-pointer"
class="w-5 h-5 rounded border-zinc-300 bg-white accent-indigo-600 cursor-pointer"
>
</div>
</div>
@@ -84,14 +84,14 @@
<!-- 歌曲获得投票消息 -->
<div :class="itemClass">
<div class="flex-1">
<h3 class="text-sm font-bold text-zinc-200">歌曲获得投票消息</h3>
<h3 class="text-sm font-bold text-zinc-800">歌曲获得投票消息</h3>
<p class="text-[11px] text-zinc-500 mt-1">当您投稿的歌曲获得投票时通知您</p>
</div>
<div class="shrink-0">
<input
v-model="localSettings.songVotedNotify"
type="checkbox"
class="w-5 h-5 rounded border-zinc-800 bg-zinc-900 accent-blue-600 cursor-pointer"
class="w-5 h-5 rounded border-zinc-300 bg-white accent-indigo-600 cursor-pointer"
>
</div>
</div>
@@ -99,14 +99,14 @@
<!-- 系统通知 -->
<div :class="itemClass">
<div class="flex-1">
<h3 class="text-sm font-bold text-zinc-200">系统通知</h3>
<h3 class="text-sm font-bold text-zinc-800">系统通知</h3>
<p class="text-[11px] text-zinc-500 mt-1">接收系统重要通知和公告</p>
</div>
<div class="shrink-0">
<input
v-model="localSettings.systemNotify"
type="checkbox"
class="w-5 h-5 rounded border-zinc-800 bg-zinc-900 accent-blue-600 cursor-pointer"
class="w-5 h-5 rounded border-zinc-300 bg-white accent-indigo-600 cursor-pointer"
>
</div>
</div>
@@ -114,7 +114,7 @@
<!-- 投票阈值设置 -->
<div :class="[itemClass, 'md:col-span-1']">
<div class="flex-1">
<h3 class="text-sm font-bold text-zinc-200">投票通知阈值</h3>
<h3 class="text-sm font-bold text-zinc-800">投票通知阈值</h3>
<p class="text-[11px] text-zinc-500 mt-1">当投票数达到此阈值时才发送通知</p>
</div>
<div class="flex items-center gap-2">
@@ -123,16 +123,16 @@
type="number"
max="100"
min="1"
class="w-16 bg-zinc-950 border border-zinc-800 rounded-lg px-2 py-1.5 text-xs text-center focus:outline-none focus:border-blue-500/30"
class="w-16 bg-white border border-zinc-200 rounded-lg px-2 py-1.5 text-xs text-center focus:outline-none focus:border-indigo-500/30"
>
<span class="text-[10px] font-black text-zinc-600 uppercase">票</span>
<span class="text-[10px] font-black text-zinc-500 uppercase">票</span>
</div>
</div>
<!-- 通知刷新间隔 -->
<div :class="[itemClass, 'md:col-span-1']">
<div class="flex-1">
<h3 class="text-sm font-bold text-zinc-200">通知刷新间隔</h3>
<h3 class="text-sm font-bold text-zinc-800">通知刷新间隔</h3>
<p class="text-[11px] text-zinc-500 mt-1">设置系统自动检查新通知的时间间隔</p>
</div>
<div class="flex items-center gap-3">
@@ -142,9 +142,9 @@
max="300"
min="30"
step="30"
class="w-24 h-1.5 bg-zinc-800 rounded-full appearance-none accent-blue-600 cursor-pointer"
class="w-24 h-1.5 bg-zinc-200 rounded-full appearance-none accent-indigo-600 cursor-pointer"
>
<span class="text-[11px] font-bold text-blue-500 min-w-[40px] text-right"
<span class="text-[11px] font-bold text-indigo-600 min-w-[40px] text-right"
>{{ localSettings.refreshInterval }}s</span
>
</div>
@@ -154,12 +154,12 @@
<!-- 社交账号绑定 -->
<section :class="sectionClass">
<div class="flex items-center gap-3 border-b border-zinc-800/50 pb-5 mb-6">
<div class="flex items-center gap-3 border-b border-zinc-200/50 pb-5 mb-6">
<div class="p-2.5 bg-purple-500/10 rounded-xl">
<Link :size="20" class="text-purple-500" />
<Link :size="20" class="text-purple-600" />
</div>
<div>
<h2 class="text-base font-black text-zinc-100">社交账号绑定</h2>
<h2 class="text-base font-black text-zinc-900">社交账号绑定</h2>
<p class="text-xs text-zinc-500 mt-0.5">绑定您的社交账号以接收实时推送通知</p>
</div>
</div>
@@ -168,14 +168,14 @@
<!-- 邮箱绑定 -->
<div v-if="smtpEnabled" :class="cardClass">
<div class="flex items-center gap-3 mb-4">
<div class="p-2 bg-zinc-950 rounded-lg border border-zinc-800">
<Mail :size="16" class="text-zinc-400" />
<div class="p-2 bg-white rounded-lg border border-zinc-200">
<Mail :size="16" class="text-zinc-500" />
</div>
<h3 class="text-sm font-bold text-zinc-200">邮箱消息通知</h3>
<h3 class="text-sm font-bold text-zinc-800">邮箱消息通知</h3>
</div>
<div class="space-y-4">
<div v-if="userEmail" class="p-3 bg-zinc-950/50 border border-zinc-800 rounded-xl">
<div v-if="userEmail" class="p-3 bg-zinc-50 border border-zinc-200 rounded-xl">
<div class="flex items-center justify-between">
<div>
<p
@@ -183,14 +183,14 @@
>
当前绑定邮箱
</p>
<p class="text-sm font-medium text-zinc-200">{{ userEmail }}</p>
<p class="text-sm font-medium text-zinc-800">{{ userEmail }}</p>
</div>
<div
:class="[
'px-2 py-0.5 rounded-full text-[10px] font-black uppercase tracking-wider',
emailVerified
? 'bg-emerald-500/10 text-emerald-500'
: 'bg-amber-500/10 text-amber-500'
? 'bg-emerald-500/10 text-emerald-600'
: 'bg-amber-500/10 text-amber-600'
]"
>
{{ emailVerified ? '已验证' : '待验证' }}
@@ -207,11 +207,11 @@
:disabled="bindingEmail"
type="email"
placeholder="请输入邮箱地址"
class="flex-1 bg-zinc-950 border border-zinc-800 rounded-xl px-4 py-2 text-sm focus:outline-none focus:border-blue-500/30 w-full sm:w-auto"
class="flex-1 bg-white border border-zinc-200 rounded-xl px-4 py-2 text-sm focus:outline-none focus:border-indigo-500/30 w-full sm:w-auto"
>
<button
:disabled="!newEmail || bindingEmail"
class="px-4 py-2 bg-zinc-800 hover:bg-zinc-700 text-zinc-200 text-xs font-bold rounded-xl transition-all disabled:opacity-50 whitespace-nowrap"
class="px-4 py-2 bg-zinc-100 hover:bg-zinc-200 text-zinc-800 text-xs font-bold rounded-xl transition-all disabled:opacity-50 whitespace-nowrap"
@click="bindEmail"
>
{{ bindingEmail ? '请稍候...' : '立即绑定' }}
@@ -222,10 +222,10 @@
<!-- 待验证状态 -->
<div v-else-if="!emailVerified" class="space-y-4 pt-2">
<div
class="p-3 bg-blue-500/5 border border-blue-500/10 rounded-xl flex items-start gap-3"
class="p-3 bg-indigo-500/5 border border-indigo-500/10 rounded-xl flex items-start gap-3"
>
<AlertCircle :size="14" class="text-blue-500 shrink-0 mt-0.5" />
<p class="text-[11px] text-zinc-500 leading-relaxed">
<AlertCircle :size="14" class="text-indigo-600 shrink-0 mt-0.5" />
<p class="text-[11px] text-zinc-600 leading-relaxed">
验证码已发送至您的邮箱，请在 5 分钟内完成验证。若未收到邮件，请检查垃圾箱。
</p>
</div>
@@ -237,10 +237,10 @@
maxlength="6"
placeholder="输入 6 位数字验证码"
:class="[
'w-full bg-zinc-950 border rounded-xl px-4 py-3 text-lg font-black tracking-[0.5em] text-center focus:outline-none transition-all',
'w-full bg-white border rounded-xl px-4 py-3 text-lg font-black tracking-[0.5em] text-center focus:outline-none transition-all',
emailCodeError
? 'border-rose-500 shadow-[0_0_15px_rgba(244,63,94,0.1)]'
: 'border-zinc-800 focus:border-blue-500/30'
: 'border-zinc-200 focus:border-indigo-500/30'
]"
@input="handleEmailCodeInput"
@keydown="handleEmailCodeKeydown"
@@ -248,21 +248,21 @@
<div class="grid grid-cols-2 gap-2">
<button
:disabled="bindingEmail || emailCode.length !== 6"
class="px-4 py-2.5 bg-blue-600 hover:bg-blue-500 text-white text-xs font-black rounded-xl transition-all disabled:opacity-50"
class="px-4 py-2.5 bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-black rounded-xl transition-all disabled:opacity-50"
@click="verifyEmailCode"
>
{{ bindingEmail ? '验证中...' : '确认验证' }}
</button>
<button
:disabled="resendingEmail"
class="px-4 py-2.5 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 text-xs font-bold rounded-xl transition-all disabled:opacity-50"
class="px-4 py-2.5 bg-zinc-100 hover:bg-zinc-200 text-zinc-700 text-xs font-bold rounded-xl transition-all disabled:opacity-50"
@click="resendVerificationEmail"
>
{{ resendingEmail ? '发送中...' : '重新发送' }}
</button>
</div>
<button
class="w-full py-2 text-zinc-600 hover:text-zinc-400 text-[10px] font-black uppercase tracking-widest transition-all"
class="w-full py-2 text-zinc-500 hover:text-zinc-700 text-[10px] font-black uppercase tracking-widest transition-all"
@click="changeEmail"
>
更换邮箱地址
@@ -273,14 +273,14 @@
<!-- 已验证状态 -->
<div v-else class="flex gap-2 pt-2">
<button
class="flex-1 py-2.5 bg-zinc-900 border border-zinc-800 hover:border-zinc-700 text-zinc-400 text-xs font-bold rounded-xl transition-all"
class="flex-1 py-2.5 bg-zinc-50 border border-zinc-200 hover:border-zinc-300 text-zinc-500 text-xs font-bold rounded-xl transition-all"
@click="changeEmail"
>
更换邮箱
</button>
<button
:disabled="unbindingEmail"
class="flex-1 py-2.5 bg-rose-500/10 border border-rose-500/20 hover:bg-rose-500/20 text-rose-500 text-xs font-black rounded-xl transition-all"
class="flex-1 py-2.5 bg-rose-500/10 border border-rose-500/20 hover:bg-rose-500/20 text-rose-600 text-xs font-black rounded-xl transition-all"
@click="unbindEmail"
>
{{ unbindingEmail ? '正在解绑...' : '解绑邮箱' }}
@@ -290,34 +290,34 @@
</div>
<!-- MeoW 账号绑定 -->
<div :class="[cardClass, 'border-blue-500/20 bg-blue-500/[0.02]']">
<div :class="[cardClass, 'border-indigo-500/20 bg-indigo-500/[0.02]']">
<div class="flex items-center justify-between mb-4">
<div class="flex items-center gap-3">
<div class="p-2 bg-blue-500/10 rounded-lg border border-blue-500/20">
<Smartphone :size="16" class="text-blue-500" />
<div class="p-2 bg-indigo-500/10 rounded-lg border border-indigo-500/20">
<Smartphone :size="16" class="text-indigo-600" />
</div>
<h3 class="text-sm font-bold text-zinc-200">MeoW App 推送</h3>
<h3 class="text-sm font-bold text-zinc-800">MeoW App 推送</h3>
</div>
</div>
<div class="space-y-4">
<div
v-if="localSettings.meowUserId"
class="p-3 bg-blue-500/10 border border-blue-500/20 rounded-xl"
class="p-3 bg-indigo-500/10 border border-indigo-500/20 rounded-xl"
>
<div class="flex items-center justify-between">
<div>
<p
class="text-[10px] text-blue-500/60 font-black uppercase tracking-widest mb-1"
class="text-[10px] text-indigo-600/60 font-black uppercase tracking-widest mb-1"
>
当前绑定 ID
</p>
<p class="text-sm font-black text-blue-500 tracking-tight">
<p class="text-sm font-black text-indigo-600 tracking-tight">
{{ localSettings.meowUserId }}
</p>
</div>
<div
class="px-2 py-0.5 bg-blue-500 text-white rounded-full text-[10px] font-black uppercase tracking-wider"
class="px-2 py-0.5 bg-indigo-600 text-white rounded-full text-[10px] font-black uppercase tracking-wider"
>
已连接
</div>
@@ -337,11 +337,11 @@
:disabled="binding"
type="text"
placeholder="请输入 MeoW 用户 ID"
class="flex-1 bg-zinc-950 border border-zinc-800 rounded-xl px-4 py-2 text-sm focus:outline-none focus:border-blue-500/30 w-full sm:w-auto"
class="flex-1 bg-white border border-zinc-200 rounded-xl px-4 py-2 text-sm focus:outline-none focus:border-indigo-500/30 w-full sm:w-auto"
>
<button
:disabled="!meowUserId || binding"
class="px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white text-xs font-black rounded-xl transition-all disabled:opacity-50 shadow-lg shadow-blue-900/20 whitespace-nowrap"
class="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-black rounded-xl transition-all disabled:opacity-50 shadow-lg shadow-indigo-500/20 whitespace-nowrap"
@click="sendVerificationCode"
>
{{ binding ? '发送中...' : '发送验证码' }}
@@ -351,12 +351,12 @@
<!-- 第二步：输入验证码 -->
<div v-else class="space-y-4">
<div
class="p-3 bg-blue-500/5 border border-blue-500/10 rounded-xl flex items-start gap-3"
class="p-3 bg-indigo-500/5 border border-indigo-500/10 rounded-xl flex items-start gap-3"
>
<AlertCircle :size="14" class="text-blue-500 shrink-0 mt-0.5" />
<p class="text-[11px] text-zinc-500 leading-relaxed">
<AlertCircle :size="14" class="text-indigo-600 shrink-0 mt-0.5" />
<p class="text-[11px] text-zinc-600 leading-relaxed">
验证码已发送至 MeoW ID:
<span class="font-bold text-zinc-200">{{ meowUserId }}</span
<span class="font-bold text-zinc-800">{{ meowUserId }}</span
>，请在客户端查收。
</p>
</div>
@@ -368,10 +368,10 @@
maxlength="6"
placeholder="输入 6 位验证码"
:class="[
'w-full bg-zinc-950 border rounded-xl px-4 py-3 text-lg font-black tracking-[0.5em] text-center focus:outline-none transition-all',
'w-full bg-white border rounded-xl px-4 py-3 text-lg font-black tracking-[0.5em] text-center focus:outline-none transition-all',
verificationCodeError
? 'border-rose-500 shadow-[0_0_15px_rgba(244,63,94,0.1)]'
: 'border-zinc-800 focus:border-blue-500/30'
: 'border-zinc-200 focus:border-indigo-500/30'
]"
@input="handleVerificationCodeInput"
@keydown="handleVerificationCodeKeydown"
@@ -379,14 +379,14 @@
<div class="grid grid-cols-2 gap-2">
<button
:disabled="binding || verificationCode.length !== 6"
class="px-4 py-2.5 bg-blue-600 hover:bg-blue-500 text-white text-xs font-black rounded-xl transition-all disabled:opacity-50"
class="px-4 py-2.5 bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-black rounded-xl transition-all disabled:opacity-50"
@click="verifyAndBind"
>
{{ binding ? '验证中...' : '确认绑定' }}
</button>
<button
:disabled="binding"
class="px-4 py-2.5 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 text-xs font-bold rounded-xl transition-all disabled:opacity-50"
class="px-4 py-2.5 bg-zinc-100 hover:bg-zinc-200 text-zinc-700 text-xs font-bold rounded-xl transition-all disabled:opacity-50"
@click="cancelVerification"
>
取消
@@ -399,7 +399,7 @@
<!-- 已绑定状态 -->
<div v-else class="pt-2">
<button
class="w-full py-2.5 bg-rose-500/10 border border-rose-500/20 hover:bg-rose-500/20 text-rose-500 text-xs font-black rounded-xl transition-all"
class="w-full py-2.5 bg-rose-500/10 border border-rose-500/20 hover:bg-rose-500/20 text-rose-600 text-xs font-black rounded-xl transition-all"
@click="showUnbindConfirm"
>
解除 MeoW 账号绑定
@@ -452,11 +452,11 @@ const { siteTitle, smtpEnabled, initSiteConfig } = useSiteConfig()
const { showToast } = useToast()
// 样式类常量
const sectionClass = 'bg-zinc-900/40 border border-zinc-900 rounded-3xl p-6 md:p-8 shadow-2xl'
const sectionClass = 'bg-white border border-zinc-200 rounded-3xl p-6 md:p-8 shadow-lg'
const cardClass =
'bg-zinc-950/40 border border-zinc-800/50 rounded-2xl p-5 transition-all hover:border-zinc-700/50'
'bg-zinc-50 border border-zinc-200 rounded-2xl p-5 transition-all hover:border-zinc-300'
const itemClass =
'flex items-center justify-between p-4 bg-zinc-950/30 border border-zinc-900 rounded-2xl hover:bg-zinc-900/50 transition-all group'
'flex items-center justify-between p-4 bg-white border border-zinc-200 rounded-2xl hover:bg-zinc-50 transition-all group'
// 页面状态
const loading = ref(true)