fix(ui): 适配前台浅色背景细节
- 学校 logo 替换为黑字版本，修改 useSiteConfig 默认值和 fallback - 首页通知卡片补齐浅色样式：status-tag（三态）、unread-indicator、 invite-actions、accept-btn、reject-btn - 投稿区域状态徽章由绝对定位改为搜索标题行内布局，背景改为浅色 - 消息设置页面整体改为浅色主题，主色系改为 indigo 以匹配 ModernLight
This commit is contained in:
@@ -56,7 +56,16 @@
|
|||||||
|
|
||||||
<div class="form-container">
|
<div class="form-container">
|
||||||
<form class="song-request-form" @submit.prevent="handleSearch">
|
<form class="song-request-form" @submit.prevent="handleSearch">
|
||||||
<div v-if="user && submissionStatus" class="submission-status-corner">
|
<!-- 顶部行：搜索和联合投稿 -->
|
||||||
|
<div class="form-header-row">
|
||||||
|
<!-- 歌曲搜索区域 -->
|
||||||
|
<div class="search-section">
|
||||||
|
<div class="search-header-row">
|
||||||
|
<div class="search-label">歌曲搜索</div>
|
||||||
|
<div
|
||||||
|
v-if="user && submissionStatus"
|
||||||
|
class="submission-status-inline"
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
:class="[
|
:class="[
|
||||||
'submission-status-badge',
|
'submission-status-badge',
|
||||||
@@ -77,7 +86,7 @@
|
|||||||
{{ submissionStatus.currentTimePeriod.name }}
|
{{ submissionStatus.currentTimePeriod.name }}
|
||||||
</template>
|
</template>
|
||||||
<template v-else-if="submissionStatus.nextTimePeriod">
|
<template v-else-if="submissionStatus.nextTimePeriod">
|
||||||
下次开始：{{
|
下次：{{
|
||||||
submissionStatus.nextTimePeriod.startTime
|
submissionStatus.nextTimePeriod.startTime
|
||||||
? formatBeijingDateTime(submissionStatus.nextTimePeriod.startTime)
|
? formatBeijingDateTime(submissionStatus.nextTimePeriod.startTime)
|
||||||
: submissionStatus.nextTimePeriod.name
|
: submissionStatus.nextTimePeriod.name
|
||||||
@@ -86,12 +95,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<!-- 顶部行：搜索和联合投稿 -->
|
|
||||||
<div class="form-header-row">
|
|
||||||
<!-- 歌曲搜索区域 -->
|
|
||||||
<div class="search-section">
|
|
||||||
<div class="search-label">歌曲搜索</div>
|
|
||||||
<div class="search-input-group">
|
<div class="search-input-group">
|
||||||
<input
|
<input
|
||||||
id="title"
|
id="title"
|
||||||
@@ -3012,38 +3016,36 @@ defineExpose({
|
|||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.submission-status-corner {
|
.submission-status-inline {
|
||||||
position: absolute;
|
display: flex;
|
||||||
top: 0;
|
align-items: center;
|
||||||
right: 0;
|
justify-content: flex-end;
|
||||||
z-index: 30;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.submission-status-badge {
|
.submission-status-badge {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 2px;
|
gap: 2px;
|
||||||
padding: 8px 10px;
|
padding: 8px 12px;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
border: 1px solid var(--border-tertiary);
|
border: 1px solid var(--border-primary);
|
||||||
background: rgba(6, 15, 22, 0.9);
|
background: var(--bg-primary, #ffffff);
|
||||||
backdrop-filter: blur(8px);
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
|
||||||
min-width: 140px;
|
min-width: 140px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 640px) {
|
@media (max-width: 640px) {
|
||||||
.submission-status-corner {
|
.submission-status-inline {
|
||||||
position: static;
|
justify-content: flex-start;
|
||||||
align-self: flex-end;
|
width: 100%;
|
||||||
margin-top: -6px;
|
|
||||||
margin-bottom: -2px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.submission-status-badge {
|
.submission-status-badge {
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
padding: 6px 9px;
|
padding: 6px 10px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.badge-title {
|
.badge-title {
|
||||||
@@ -3056,11 +3058,13 @@ defineExpose({
|
|||||||
}
|
}
|
||||||
|
|
||||||
.submission-status-badge.open {
|
.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 {
|
.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 {
|
.badge-title {
|
||||||
@@ -3070,7 +3074,7 @@ defineExpose({
|
|||||||
}
|
}
|
||||||
|
|
||||||
.submission-status-badge.open .badge-title {
|
.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 {
|
.submission-status-badge.closed .badge-title {
|
||||||
@@ -3083,6 +3087,23 @@ defineExpose({
|
|||||||
color: var(--text-secondary);
|
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 {
|
.login-required-hint {
|
||||||
margin-left: 0.5rem;
|
margin-left: 0.5rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -3171,19 +3192,20 @@ defineExpose({
|
|||||||
|
|
||||||
.search-section {
|
.search-section {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
flex-direction: column;
|
||||||
gap: 0.75rem;
|
align-items: stretch;
|
||||||
|
gap: 0.5rem;
|
||||||
flex: 1.5;
|
flex: 1.5;
|
||||||
min-width: 400px; /* 增加最小宽度，确保搜索框、标签和按钮有足够空间 */
|
min-width: 400px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-label {
|
.search-label {
|
||||||
font-family: 'MiSans', sans-serif;
|
font-family: 'MiSans', sans-serif;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
color: var(--text-primary, #ffffff);
|
color: var(--text-primary, #09090b);
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
flex-shrink: 0; /* 防止标签被压缩 */
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-input-group {
|
.search-input-group {
|
||||||
|
|||||||
@@ -52,7 +52,7 @@ export const useSiteConfig = () => {
|
|||||||
siteConfig.value = {
|
siteConfig.value = {
|
||||||
siteTitle: '校园广播站点歌系统',
|
siteTitle: '校园广播站点歌系统',
|
||||||
siteLogoUrl: '/images/site-logo.png',
|
siteLogoUrl: '/images/site-logo.png',
|
||||||
schoolLogoHomeUrl: '/images/school-logo-white.png',
|
schoolLogoHomeUrl: '/images/school-logo-black.png',
|
||||||
schoolLogoPrintUrl: '/images/school-logo-transparent.png',
|
schoolLogoPrintUrl: '/images/school-logo-transparent.png',
|
||||||
siteDescription: '校园广播站点歌系统 - 让你的声音被听见',
|
siteDescription: '校园广播站点歌系统 - 让你的声音被听见',
|
||||||
siteVersion: '',
|
siteVersion: '',
|
||||||
@@ -81,7 +81,7 @@ export const useSiteConfig = () => {
|
|||||||
})
|
})
|
||||||
const schoolLogoHomeUrl = computed(() => {
|
const schoolLogoHomeUrl = computed(() => {
|
||||||
const raw = (siteConfig.value.schoolLogoHomeUrl || '').trim()
|
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) return fallback
|
||||||
if (raw === '/images/school-logo-white.png' || raw === '/images/school-logo-black.png') return fallback
|
if (raw === '/images/school-logo-white.png' || raw === '/images/school-logo-black.png') return fallback
|
||||||
|
|||||||
@@ -3781,4 +3781,91 @@ if (
|
|||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
box-shadow: 0 5px 15px rgba(0, 67, 248, 0.3);
|
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>
|
</style>
|
||||||
|
|||||||
@@ -1,19 +1,19 @@
|
|||||||
<template>
|
<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
|
<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="max-w-[1000px] mx-auto flex items-center justify-between">
|
||||||
<div class="flex items-center gap-4">
|
<div class="flex items-center gap-4">
|
||||||
<button
|
<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"
|
@click="goBack"
|
||||||
>
|
>
|
||||||
<ArrowLeft :size="20" />
|
<ArrowLeft :size="20" />
|
||||||
</button>
|
</button>
|
||||||
<div>
|
<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">
|
<p class="text-[10px] text-zinc-500 font-medium uppercase tracking-widest mt-0.5">
|
||||||
Notification Settings
|
Notification Settings
|
||||||
</p>
|
</p>
|
||||||
@@ -22,7 +22,7 @@
|
|||||||
|
|
||||||
<button
|
<button
|
||||||
:disabled="loading || saving"
|
: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"
|
@click="saveSettings"
|
||||||
>
|
>
|
||||||
<template v-if="saving"> <Loader2 :size="14" class="animate-spin" /> 保存中... </template>
|
<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 class="max-w-[1000px] mx-auto px-4">
|
||||||
<div v-if="loading" class="flex flex-col items-center justify-center py-32">
|
<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>
|
<p class="text-zinc-500 text-sm font-medium">加载设置中...</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-else class="space-y-8">
|
<div v-else class="space-y-8">
|
||||||
<!-- 站内通知设置 -->
|
<!-- 站内通知设置 -->
|
||||||
<section :class="sectionClass">
|
<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-blue-500/10 rounded-xl">
|
<div class="p-2.5 bg-indigo-500/10 rounded-xl">
|
||||||
<Bell :size="20" class="text-blue-500" />
|
<Bell :size="20" class="text-indigo-600" />
|
||||||
</div>
|
</div>
|
||||||
<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>
|
<p class="text-xs text-zinc-500 mt-0.5">配置您希望在系统内接收的消息类型</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -54,14 +54,14 @@
|
|||||||
<!-- 歌曲被选中消息 -->
|
<!-- 歌曲被选中消息 -->
|
||||||
<div :class="itemClass">
|
<div :class="itemClass">
|
||||||
<div class="flex-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>
|
<p class="text-[11px] text-zinc-500 mt-1">当您投稿的歌曲被选中播放时通知您</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="shrink-0">
|
<div class="shrink-0">
|
||||||
<input
|
<input
|
||||||
v-model="localSettings.songSelectedNotify"
|
v-model="localSettings.songSelectedNotify"
|
||||||
type="checkbox"
|
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>
|
||||||
</div>
|
</div>
|
||||||
@@ -69,14 +69,14 @@
|
|||||||
<!-- 歌曲已播放消息 -->
|
<!-- 歌曲已播放消息 -->
|
||||||
<div :class="itemClass">
|
<div :class="itemClass">
|
||||||
<div class="flex-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>
|
<p class="text-[11px] text-zinc-500 mt-1">当您投稿的歌曲播放完成时通知您</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="shrink-0">
|
<div class="shrink-0">
|
||||||
<input
|
<input
|
||||||
v-model="localSettings.songPlayedNotify"
|
v-model="localSettings.songPlayedNotify"
|
||||||
type="checkbox"
|
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>
|
||||||
</div>
|
</div>
|
||||||
@@ -84,14 +84,14 @@
|
|||||||
<!-- 歌曲获得投票消息 -->
|
<!-- 歌曲获得投票消息 -->
|
||||||
<div :class="itemClass">
|
<div :class="itemClass">
|
||||||
<div class="flex-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>
|
<p class="text-[11px] text-zinc-500 mt-1">当您投稿的歌曲获得投票时通知您</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="shrink-0">
|
<div class="shrink-0">
|
||||||
<input
|
<input
|
||||||
v-model="localSettings.songVotedNotify"
|
v-model="localSettings.songVotedNotify"
|
||||||
type="checkbox"
|
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>
|
||||||
</div>
|
</div>
|
||||||
@@ -99,14 +99,14 @@
|
|||||||
<!-- 系统通知 -->
|
<!-- 系统通知 -->
|
||||||
<div :class="itemClass">
|
<div :class="itemClass">
|
||||||
<div class="flex-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>
|
<p class="text-[11px] text-zinc-500 mt-1">接收系统重要通知和公告</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="shrink-0">
|
<div class="shrink-0">
|
||||||
<input
|
<input
|
||||||
v-model="localSettings.systemNotify"
|
v-model="localSettings.systemNotify"
|
||||||
type="checkbox"
|
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>
|
||||||
</div>
|
</div>
|
||||||
@@ -114,7 +114,7 @@
|
|||||||
<!-- 投票阈值设置 -->
|
<!-- 投票阈值设置 -->
|
||||||
<div :class="[itemClass, 'md:col-span-1']">
|
<div :class="[itemClass, 'md:col-span-1']">
|
||||||
<div class="flex-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>
|
<p class="text-[11px] text-zinc-500 mt-1">当投票数达到此阈值时才发送通知</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center gap-2">
|
<div class="flex items-center gap-2">
|
||||||
@@ -123,16 +123,16 @@
|
|||||||
type="number"
|
type="number"
|
||||||
max="100"
|
max="100"
|
||||||
min="1"
|
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>
|
</div>
|
||||||
|
|
||||||
<!-- 通知刷新间隔 -->
|
<!-- 通知刷新间隔 -->
|
||||||
<div :class="[itemClass, 'md:col-span-1']">
|
<div :class="[itemClass, 'md:col-span-1']">
|
||||||
<div class="flex-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>
|
<p class="text-[11px] text-zinc-500 mt-1">设置系统自动检查新通知的时间间隔</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center gap-3">
|
<div class="flex items-center gap-3">
|
||||||
@@ -142,9 +142,9 @@
|
|||||||
max="300"
|
max="300"
|
||||||
min="30"
|
min="30"
|
||||||
step="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
|
>{{ localSettings.refreshInterval }}s</span
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
@@ -154,12 +154,12 @@
|
|||||||
|
|
||||||
<!-- 社交账号绑定 -->
|
<!-- 社交账号绑定 -->
|
||||||
<section :class="sectionClass">
|
<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">
|
<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>
|
||||||
<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>
|
<p class="text-xs text-zinc-500 mt-0.5">绑定您的社交账号以接收实时推送通知</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -168,14 +168,14 @@
|
|||||||
<!-- 邮箱绑定 -->
|
<!-- 邮箱绑定 -->
|
||||||
<div v-if="smtpEnabled" :class="cardClass">
|
<div v-if="smtpEnabled" :class="cardClass">
|
||||||
<div class="flex items-center gap-3 mb-4">
|
<div class="flex items-center gap-3 mb-4">
|
||||||
<div class="p-2 bg-zinc-950 rounded-lg border border-zinc-800">
|
<div class="p-2 bg-white rounded-lg border border-zinc-200">
|
||||||
<Mail :size="16" class="text-zinc-400" />
|
<Mail :size="16" class="text-zinc-500" />
|
||||||
</div>
|
</div>
|
||||||
<h3 class="text-sm font-bold text-zinc-200">邮箱消息通知</h3>
|
<h3 class="text-sm font-bold text-zinc-800">邮箱消息通知</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="space-y-4">
|
<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 class="flex items-center justify-between">
|
||||||
<div>
|
<div>
|
||||||
<p
|
<p
|
||||||
@@ -183,14 +183,14 @@
|
|||||||
>
|
>
|
||||||
当前绑定邮箱
|
当前绑定邮箱
|
||||||
</p>
|
</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>
|
||||||
<div
|
<div
|
||||||
:class="[
|
:class="[
|
||||||
'px-2 py-0.5 rounded-full text-[10px] font-black uppercase tracking-wider',
|
'px-2 py-0.5 rounded-full text-[10px] font-black uppercase tracking-wider',
|
||||||
emailVerified
|
emailVerified
|
||||||
? 'bg-emerald-500/10 text-emerald-500'
|
? 'bg-emerald-500/10 text-emerald-600'
|
||||||
: 'bg-amber-500/10 text-amber-500'
|
: 'bg-amber-500/10 text-amber-600'
|
||||||
]"
|
]"
|
||||||
>
|
>
|
||||||
{{ emailVerified ? '已验证' : '待验证' }}
|
{{ emailVerified ? '已验证' : '待验证' }}
|
||||||
@@ -207,11 +207,11 @@
|
|||||||
:disabled="bindingEmail"
|
:disabled="bindingEmail"
|
||||||
type="email"
|
type="email"
|
||||||
placeholder="请输入邮箱地址"
|
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
|
<button
|
||||||
:disabled="!newEmail || bindingEmail"
|
: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"
|
@click="bindEmail"
|
||||||
>
|
>
|
||||||
{{ bindingEmail ? '请稍候...' : '立即绑定' }}
|
{{ bindingEmail ? '请稍候...' : '立即绑定' }}
|
||||||
@@ -222,10 +222,10 @@
|
|||||||
<!-- 待验证状态 -->
|
<!-- 待验证状态 -->
|
||||||
<div v-else-if="!emailVerified" class="space-y-4 pt-2">
|
<div v-else-if="!emailVerified" class="space-y-4 pt-2">
|
||||||
<div
|
<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" />
|
<AlertCircle :size="14" class="text-indigo-600 shrink-0 mt-0.5" />
|
||||||
<p class="text-[11px] text-zinc-500 leading-relaxed">
|
<p class="text-[11px] text-zinc-600 leading-relaxed">
|
||||||
验证码已发送至您的邮箱，请在 5 分钟内完成验证。若未收到邮件，请检查垃圾箱。
|
验证码已发送至您的邮箱，请在 5 分钟内完成验证。若未收到邮件，请检查垃圾箱。
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -237,10 +237,10 @@
|
|||||||
maxlength="6"
|
maxlength="6"
|
||||||
placeholder="输入 6 位数字验证码"
|
placeholder="输入 6 位数字验证码"
|
||||||
:class="[
|
: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
|
emailCodeError
|
||||||
? 'border-rose-500 shadow-[0_0_15px_rgba(244,63,94,0.1)]'
|
? '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"
|
@input="handleEmailCodeInput"
|
||||||
@keydown="handleEmailCodeKeydown"
|
@keydown="handleEmailCodeKeydown"
|
||||||
@@ -248,21 +248,21 @@
|
|||||||
<div class="grid grid-cols-2 gap-2">
|
<div class="grid grid-cols-2 gap-2">
|
||||||
<button
|
<button
|
||||||
:disabled="bindingEmail || emailCode.length !== 6"
|
: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"
|
@click="verifyEmailCode"
|
||||||
>
|
>
|
||||||
{{ bindingEmail ? '验证中...' : '确认验证' }}
|
{{ bindingEmail ? '验证中...' : '确认验证' }}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
:disabled="resendingEmail"
|
: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"
|
@click="resendVerificationEmail"
|
||||||
>
|
>
|
||||||
{{ resendingEmail ? '发送中...' : '重新发送' }}
|
{{ resendingEmail ? '发送中...' : '重新发送' }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<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"
|
@click="changeEmail"
|
||||||
>
|
>
|
||||||
更换邮箱地址
|
更换邮箱地址
|
||||||
@@ -273,14 +273,14 @@
|
|||||||
<!-- 已验证状态 -->
|
<!-- 已验证状态 -->
|
||||||
<div v-else class="flex gap-2 pt-2">
|
<div v-else class="flex gap-2 pt-2">
|
||||||
<button
|
<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"
|
@click="changeEmail"
|
||||||
>
|
>
|
||||||
更换邮箱
|
更换邮箱
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
:disabled="unbindingEmail"
|
: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"
|
@click="unbindEmail"
|
||||||
>
|
>
|
||||||
{{ unbindingEmail ? '正在解绑...' : '解绑邮箱' }}
|
{{ unbindingEmail ? '正在解绑...' : '解绑邮箱' }}
|
||||||
@@ -290,34 +290,34 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- MeoW 账号绑定 -->
|
<!-- 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 justify-between mb-4">
|
||||||
<div class="flex items-center gap-3">
|
<div class="flex items-center gap-3">
|
||||||
<div class="p-2 bg-blue-500/10 rounded-lg border border-blue-500/20">
|
<div class="p-2 bg-indigo-500/10 rounded-lg border border-indigo-500/20">
|
||||||
<Smartphone :size="16" class="text-blue-500" />
|
<Smartphone :size="16" class="text-indigo-600" />
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
||||||
<div class="space-y-4">
|
<div class="space-y-4">
|
||||||
<div
|
<div
|
||||||
v-if="localSettings.meowUserId"
|
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 class="flex items-center justify-between">
|
||||||
<div>
|
<div>
|
||||||
<p
|
<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
|
当前绑定 ID
|
||||||
</p>
|
</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 }}
|
{{ localSettings.meowUserId }}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<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>
|
</div>
|
||||||
@@ -337,11 +337,11 @@
|
|||||||
:disabled="binding"
|
:disabled="binding"
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="请输入 MeoW 用户 ID"
|
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
|
<button
|
||||||
:disabled="!meowUserId || binding"
|
: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"
|
@click="sendVerificationCode"
|
||||||
>
|
>
|
||||||
{{ binding ? '发送中...' : '发送验证码' }}
|
{{ binding ? '发送中...' : '发送验证码' }}
|
||||||
@@ -351,12 +351,12 @@
|
|||||||
<!-- 第二步：输入验证码 -->
|
<!-- 第二步：输入验证码 -->
|
||||||
<div v-else class="space-y-4">
|
<div v-else class="space-y-4">
|
||||||
<div
|
<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" />
|
<AlertCircle :size="14" class="text-indigo-600 shrink-0 mt-0.5" />
|
||||||
<p class="text-[11px] text-zinc-500 leading-relaxed">
|
<p class="text-[11px] text-zinc-600 leading-relaxed">
|
||||||
验证码已发送至 MeoW ID:
|
验证码已发送至 MeoW ID:
|
||||||
<span class="font-bold text-zinc-200">{{ meowUserId }}</span
|
<span class="font-bold text-zinc-800">{{ meowUserId }}</span
|
||||||
>，请在客户端查收。
|
>，请在客户端查收。
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -368,10 +368,10 @@
|
|||||||
maxlength="6"
|
maxlength="6"
|
||||||
placeholder="输入 6 位验证码"
|
placeholder="输入 6 位验证码"
|
||||||
:class="[
|
: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
|
verificationCodeError
|
||||||
? 'border-rose-500 shadow-[0_0_15px_rgba(244,63,94,0.1)]'
|
? '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"
|
@input="handleVerificationCodeInput"
|
||||||
@keydown="handleVerificationCodeKeydown"
|
@keydown="handleVerificationCodeKeydown"
|
||||||
@@ -379,14 +379,14 @@
|
|||||||
<div class="grid grid-cols-2 gap-2">
|
<div class="grid grid-cols-2 gap-2">
|
||||||
<button
|
<button
|
||||||
:disabled="binding || verificationCode.length !== 6"
|
: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"
|
@click="verifyAndBind"
|
||||||
>
|
>
|
||||||
{{ binding ? '验证中...' : '确认绑定' }}
|
{{ binding ? '验证中...' : '确认绑定' }}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
:disabled="binding"
|
: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"
|
@click="cancelVerification"
|
||||||
>
|
>
|
||||||
取消
|
取消
|
||||||
@@ -399,7 +399,7 @@
|
|||||||
<!-- 已绑定状态 -->
|
<!-- 已绑定状态 -->
|
||||||
<div v-else class="pt-2">
|
<div v-else class="pt-2">
|
||||||
<button
|
<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"
|
@click="showUnbindConfirm"
|
||||||
>
|
>
|
||||||
解除 MeoW 账号绑定
|
解除 MeoW 账号绑定
|
||||||
@@ -452,11 +452,11 @@ const { siteTitle, smtpEnabled, initSiteConfig } = useSiteConfig()
|
|||||||
const { showToast } = useToast()
|
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 =
|
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 =
|
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)
|
const loading = ref(true)
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 162 KiB After Width: | Height: | Size: 861 KiB |
Reference in New Issue
Block a user