Henry_Du
573e168702
1. layout(管理控制台 dashboard.vue): main bg-[#09090b] text-zinc-100 → bg-[#f8fafc] text-zinc-900; header bg-zinc-950/60 border-zinc-800 → bg-white/80 border-zinc-200; 移动菜单按钮/新手引导按钮 text-zinc-300/400 hover:bg-zinc-800 → text-zinc-600 hover:bg-zinc-100 border-zinc-200
2. Admin/Sidebar.vue: bg-[#09090b] border-zinc-800 → bg-white border-zinc-200 + shadow-sm; 标题 text-zinc-100 → 900; activeTab bg-blue-600/10 text-blue-400 → bg-blue-50 text-blue-700 border-blue-200; 未选中 text-zinc-500 hover:text-zinc-200 hover:bg-zinc-800/40 → text-zinc-600 hover:text-zinc-900 hover:bg-zinc-100; 用户卡 avatar/首字母 bg-white/70 border-zinc-200 + 退出按钮 hover:bg-red-50 text-red-600
3. 批量 33 个 Admin 组件硬编码深色原子类 1414 处替换(bg-zinc-9xx / border-zinc-8xx / text-zinc-100,200,300 / shadow-black/ -> 对应 light 版本) + style 块原生 CSS rgba(255,255,255,x) 16 处改为 rgba(0,0,0,x) / var 浅色主题 + 硬编码 bg-[#0c0c0e] / border-white/10 / color:white / surface-primary fallback 对应浅色修正
4. 二轮批量追加: bg-zinc-950 + opacity 变体(80/60/50/40/30/20/10) 共 431 处 → bg-white 对应 opacity 版本；placeholder:text-zinc-800 → 500；text-blue/red/emerald/amber/rose/purple 400 版 → 700/600 深浅一致版；border color /500 /30 → 200；focus:ring /20 → /30；shadow color 阴影降低强度
5. hover:text-white 扫尾: 13 处 DataAnalysisPanel/DatabaseManager/NotificationSender/SemesterManager/SongManagement/UserSongsModal hover 文本从 white → zinc-900；按钮三态从 hover:bg-*600 白字 → hover:bg-*-100/200 对应深字色，和前台 indigo/浅色体系保持一致
6. BlacklistManager 前台可见提示 💡→ <Icon lightbulb amber-600 size=13>；ChangelogManager 徽章色从 emerald-300/blue-300/zinc-400 → emerald-700/blue-700/zinc-600 可读；Icon.vue 新增 lightbulb 分支 stroke 图标
7. 受影响文件: dashboard.vue + Sidebar.vue + Icon.vue + Admin/* (33个组件共 1874 处批量替换 + 20 处手工精细化修正)
884 lines
32 KiB
Vue
884 lines
32 KiB
Vue
<template>
|
||
<div class="max-w-[1200px] mx-auto space-y-8 pb-20 px-2">
|
||
<!-- 页面标题 -->
|
||
<div class="space-y-1">
|
||
<h2 class="text-2xl font-black text-zinc-900 tracking-tight">数据库操作</h2>
|
||
<p class="text-xs text-zinc-500 font-medium">
|
||
执行系统底层维护任务，包括备份、恢复及全局数据重置
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 操作卡片网格 -->
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div
|
||
v-for="card in cards"
|
||
:key="card.id"
|
||
:class="[
|
||
'group relative bg-zinc-50/40 border border-zinc-200 rounded-2xl p-8 transition-all hover:border-zinc-200 hover:shadow-2xl hover:shadow-black/40',
|
||
card.isDanger ? 'hover:border-rose-500/20' : ''
|
||
]"
|
||
>
|
||
<div class="flex flex-col h-full space-y-6">
|
||
<div class="flex items-center justify-between">
|
||
<div
|
||
:class="[
|
||
'p-3.5 rounded-2xl bg-white border border-zinc-200 transition-all',
|
||
card.isDanger
|
||
? 'text-rose-500 border-rose-500/10'
|
||
: `text-${card.color}-500 border-${card.color}-500/10 shadow-lg`
|
||
]"
|
||
>
|
||
<component :is="card.icon" class="w-6 h-6" />
|
||
</div>
|
||
<span
|
||
v-if="card.isDanger"
|
||
class="px-2 py-0.5 bg-rose-500/10 text-rose-500 text-[9px] font-black uppercase tracking-widest border border-rose-500/20 rounded"
|
||
>高风险操作</span
|
||
>
|
||
</div>
|
||
|
||
<div class="flex-1 space-y-2">
|
||
<h3 class="text-lg font-bold text-zinc-900 group-hover:text-blue-700 transition-colors">
|
||
{{ card.title }}
|
||
</h3>
|
||
<p class="text-xs text-zinc-500 leading-relaxed font-medium">
|
||
{{ card.desc }}
|
||
</p>
|
||
</div>
|
||
|
||
<button
|
||
:disabled="isLoading(card.id)"
|
||
class="w-full py-3 rounded-xl text-xs font-black uppercase tracking-widest transition-all active:scale-95 bg-white border border-zinc-200 text-zinc-400 hover:bg-zinc-100 hover:text-zinc-900 hover:border-zinc-200"
|
||
:class="
|
||
card.isDanger
|
||
? 'bg-white border border-rose-200 text-rose-600 hover:bg-rose-600 hover:text-zinc-900 hover:border-rose-600 shadow-lg shadow-rose-900/5'
|
||
: ''
|
||
"
|
||
@click="openModal(card.id)"
|
||
>
|
||
<span v-if="isLoading(card.id)">执行中...</span>
|
||
<span v-else>{{ card.btnText }}</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 背景装饰 -->
|
||
<div
|
||
:class="[
|
||
'absolute -right-4 -bottom-4 w-32 h-32 blur-3xl opacity-0 group-hover:opacity-100 transition-opacity rounded-full pointer-events-none',
|
||
card.isDanger ? 'bg-rose-500/5' : `bg-${card.color}-500/5`
|
||
]"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 维护建议 -->
|
||
<div class="bg-blue-600/5 border border-blue-500/10 rounded-xl p-5 flex items-start gap-4">
|
||
<AlertCircle class="text-blue-500 shrink-0 mt-0.5 w-[18px] h-[18px]" />
|
||
<div class="space-y-1">
|
||
<p class="text-[11px] font-bold text-zinc-600">数据库维护建议</p>
|
||
<p class="text-[10px] text-zinc-500 leading-relaxed">
|
||
建议每周进行一次全量备份。在执行“恢复备份”或“重置数据库”前，请务必先创建一份当前的数据备份，以免误操作造成不可挽回的损失。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 创建备份模态框 -->
|
||
<div
|
||
v-if="activeModal === 'backup'"
|
||
class="fixed inset-0 z-[100] flex items-center justify-center p-4"
|
||
>
|
||
<div class="absolute inset-0 bg-black/80 backdrop-blur-sm" @click="activeModal = 'none'" />
|
||
<div
|
||
class="relative bg-white border border-zinc-200 rounded-3xl w-full max-w-lg overflow-hidden shadow-2xl animate-in fade-in zoom-in duration-200"
|
||
>
|
||
<div class="px-8 py-6 border-b border-zinc-200 flex items-center justify-between">
|
||
<h3 class="text-xl font-black text-zinc-900 tracking-tight">创建数据库备份</h3>
|
||
<button
|
||
class="p-2 hover:bg-zinc-100 rounded-xl transition-colors text-zinc-500 hover:text-zinc-700"
|
||
@click="activeModal = 'none'"
|
||
>
|
||
<X class="w-5 h-5" />
|
||
</button>
|
||
</div>
|
||
<div class="p-8 space-y-6">
|
||
<div class="space-y-2">
|
||
<p class="text-[10px] font-black text-zinc-600 uppercase tracking-widest px-1">
|
||
选择包含的内容
|
||
</p>
|
||
<div class="space-y-2">
|
||
<label
|
||
v-for="(item, i) in backupOptions"
|
||
:key="i"
|
||
class="flex items-start gap-4 p-4 bg-white/70 border border-zinc-200 rounded-xl cursor-pointer hover:border-zinc-200 transition-all group"
|
||
>
|
||
<div class="shrink-0 mt-0.5">
|
||
<input
|
||
v-model="createForm[item.key]"
|
||
type="checkbox"
|
||
class="w-4 h-4 rounded border-zinc-200 bg-white accent-blue-600"
|
||
>
|
||
</div>
|
||
<div>
|
||
<p
|
||
class="text-xs font-bold text-zinc-700 group-hover:text-blue-700 transition-colors"
|
||
>
|
||
{{ item.label }}
|
||
</p>
|
||
<p class="text-[10px] text-zinc-600 font-medium mt-0.5">{{ item.desc }}</p>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 bg-blue-500/5 border border-blue-500/10 rounded-xl">
|
||
<p class="text-[10px] text-zinc-500 text-center italic">
|
||
备份文件将以 .json 格式生成并自动下载
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="px-8 py-6 bg-white/70 border-t border-zinc-200 flex gap-3 justify-end">
|
||
<button
|
||
class="px-4 py-2 text-xs font-bold text-zinc-500 hover:text-zinc-600 transition-colors uppercase tracking-widest"
|
||
@click="activeModal = 'none'"
|
||
>
|
||
取消
|
||
</button>
|
||
<button
|
||
:disabled="createLoading"
|
||
class="px-8 py-2 bg-blue-600 hover:bg-blue-500 text-white text-xs font-black rounded-xl shadow-lg transition-all active:scale-95 uppercase tracking-widest disabled:opacity-50 disabled:cursor-not-allowed"
|
||
@click="createBackup"
|
||
>
|
||
{{ createLoading ? '正在导出...' : '开始导出' }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 恢复备份模态框 -->
|
||
<div
|
||
v-if="activeModal === 'restore'"
|
||
class="fixed inset-0 z-[100] flex items-center justify-center p-4"
|
||
>
|
||
<div class="absolute inset-0 bg-black/80 backdrop-blur-sm" @click="activeModal = 'none'" />
|
||
<div
|
||
class="relative bg-white border border-zinc-200 rounded-3xl w-full max-w-lg overflow-hidden shadow-2xl animate-in fade-in zoom-in duration-200"
|
||
>
|
||
<div class="px-8 py-6 border-b border-zinc-200 flex items-center justify-between">
|
||
<h3 class="text-xl font-black text-zinc-900 tracking-tight">恢复数据库备份</h3>
|
||
<button
|
||
class="p-2 hover:bg-zinc-100 rounded-xl transition-colors text-zinc-500 hover:text-zinc-700"
|
||
@click="activeModal = 'none'"
|
||
>
|
||
<X class="w-5 h-5" />
|
||
</button>
|
||
</div>
|
||
<div class="p-8 space-y-6">
|
||
<div
|
||
class="border-2 border-dashed border-zinc-200 rounded-2xl p-10 flex flex-col items-center justify-center text-center group hover:border-emerald-500/50 hover:bg-emerald-500/5 transition-all cursor-pointer"
|
||
@click="$refs.fileInput.click()"
|
||
@dragover.prevent
|
||
@drop.prevent="handleFileDrop"
|
||
>
|
||
<Upload
|
||
class="w-8 h-8 text-zinc-700 mb-4 group-hover:text-emerald-500 transition-colors"
|
||
/>
|
||
<h5 class="text-sm font-bold text-zinc-600">
|
||
{{ selectedFile ? selectedFile.name : '点击选择或拖拽备份文件' }}
|
||
</h5>
|
||
<p class="text-[10px] text-zinc-600 font-bold uppercase mt-1 tracking-widest">
|
||
仅支持 VoiceHub 导出的 .json 格式
|
||
</p>
|
||
<input
|
||
ref="fileInput"
|
||
accept=".json"
|
||
class="hidden"
|
||
type="file"
|
||
@change="handleFileSelect"
|
||
>
|
||
</div>
|
||
|
||
<div class="space-y-3">
|
||
<label class="text-[10px] font-black text-zinc-600 uppercase tracking-widest px-1"
|
||
>恢复模式</label
|
||
>
|
||
<div class="grid grid-cols-2 gap-3">
|
||
<button
|
||
:class="[
|
||
'p-4 border rounded-xl text-left transition-all',
|
||
restoreForm.mode === 'merge'
|
||
? 'bg-white border-emerald-200'
|
||
: 'bg-white border-zinc-200 hover:border-zinc-200'
|
||
]"
|
||
@click="restoreForm.mode = 'merge'"
|
||
>
|
||
<h6
|
||
:class="[
|
||
'text-xs font-bold',
|
||
restoreForm.mode === 'merge' ? 'text-emerald-700' : 'text-zinc-500'
|
||
]"
|
||
>
|
||
增量模式
|
||
</h6>
|
||
<p class="text-[9px] text-zinc-600 uppercase mt-0.5">仅导入不重复的新记录</p>
|
||
</button>
|
||
<button
|
||
:class="[
|
||
'p-4 border rounded-xl text-left transition-all',
|
||
restoreForm.mode === 'replace'
|
||
? 'bg-white border-emerald-200'
|
||
: 'bg-white border-zinc-200 hover:border-zinc-200'
|
||
]"
|
||
@click="restoreForm.mode = 'replace'"
|
||
>
|
||
<h6
|
||
:class="[
|
||
'text-xs font-bold',
|
||
restoreForm.mode === 'replace' ? 'text-emerald-700' : 'text-zinc-500'
|
||
]"
|
||
>
|
||
覆盖模式
|
||
</h6>
|
||
<p class="text-[9px] text-zinc-600 uppercase mt-0.5">清空现有表后完整恢复</p>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
v-if="restoreForm.mode === 'replace' && hasSuperAdminInBackup"
|
||
class="p-4 bg-white border border-zinc-200 rounded-xl"
|
||
>
|
||
<label class="flex items-start gap-3 cursor-pointer">
|
||
<input
|
||
v-model="restoreForm.overwriteSuperAdmin"
|
||
type="checkbox"
|
||
class="mt-0.5 accent-emerald-500"
|
||
>
|
||
<div>
|
||
<p class="text-xs font-bold text-zinc-700">覆盖备份中的超级管理员账号数据</p>
|
||
<p class="text-[10px] text-zinc-500 mt-1">
|
||
关闭时将保留当前超级管理员账号及其第三方绑定、2FA等关联数据
|
||
</p>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
|
||
<div
|
||
class="p-4 bg-amber-500/5 border border-amber-500/10 rounded-xl flex items-start gap-3"
|
||
>
|
||
<AlertCircle class="text-amber-500 shrink-0 mt-0.5 w-4 h-4" />
|
||
<p class="text-[10px] text-zinc-500 leading-normal font-medium">
|
||
注意：覆盖模式将永久清空当前数据库中对应的表内容。此操作将导致现有会话中断。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="px-8 py-6 bg-white/70 border-t border-zinc-200 flex gap-3 justify-end">
|
||
<button
|
||
class="px-4 py-2 text-xs font-bold text-zinc-500 hover:text-zinc-600 transition-colors uppercase tracking-widest"
|
||
@click="activeModal = 'none'"
|
||
>
|
||
取消
|
||
</button>
|
||
<button
|
||
:disabled="uploadLoading || !selectedFile"
|
||
class="px-8 py-2 bg-emerald-600 hover:bg-emerald-500 text-white text-xs font-black rounded-xl shadow-lg transition-all active:scale-95 uppercase tracking-widest disabled:opacity-50 disabled:cursor-not-allowed"
|
||
@click="restoreBackup"
|
||
>
|
||
{{ uploadLoading ? restoreProgress || '正在恢复...' : '确认并开始恢复' }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 重置序列模态框 -->
|
||
<div
|
||
v-if="activeModal === 'reset-seq'"
|
||
class="fixed inset-0 z-[100] flex items-center justify-center p-4"
|
||
>
|
||
<div class="absolute inset-0 bg-black/80 backdrop-blur-sm" @click="activeModal = 'none'" />
|
||
<div
|
||
class="relative bg-white border border-zinc-200 rounded-3xl w-full max-w-lg overflow-hidden shadow-2xl animate-in fade-in zoom-in duration-200"
|
||
>
|
||
<div class="px-8 py-6 border-b border-zinc-200 flex items-center justify-between">
|
||
<h3 class="text-xl font-black text-zinc-900 tracking-tight">重置数据表序列</h3>
|
||
<button
|
||
class="p-2 hover:bg-zinc-100 rounded-xl transition-colors text-zinc-500 hover:text-zinc-700"
|
||
@click="activeModal = 'none'"
|
||
>
|
||
<X class="w-5 h-5" />
|
||
</button>
|
||
</div>
|
||
<div class="p-8 space-y-6">
|
||
<div class="space-y-2">
|
||
<label class="text-[10px] font-black text-zinc-600 uppercase tracking-widest px-1"
|
||
>选择目标表</label
|
||
>
|
||
<CustomSelect
|
||
v-model="sequenceForm.table"
|
||
:options="tableOptions"
|
||
class="w-full"
|
||
/>
|
||
</div>
|
||
|
||
<div class="p-6 bg-white/70 border border-zinc-200 rounded-2xl space-y-4">
|
||
<div class="flex items-center gap-3">
|
||
<div
|
||
class="w-8 h-8 rounded-lg bg-amber-500/10 text-amber-500 flex items-center justify-center"
|
||
>
|
||
<AlertCircle class="w-4 h-4" />
|
||
</div>
|
||
<h6 class="text-xs font-bold text-zinc-600 uppercase tracking-widest">
|
||
什么是重置序列？
|
||
</h6>
|
||
</div>
|
||
<p class="text-[11px] text-zinc-500 leading-relaxed font-medium">
|
||
如果您的数据表 ID
|
||
出现了断档或在手动操作数据库后无法自增，重置序列可以将数据库底层的计数器更新为当前 ID
|
||
最大值 +1，从而解决 ID 冲突导致的写入失败问题。此操作不会修改任何现有数据。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="px-8 py-6 bg-white/70 border-t border-zinc-200 flex gap-3 justify-end">
|
||
<button
|
||
class="px-4 py-2 text-xs font-bold text-zinc-500 hover:text-zinc-600 transition-colors uppercase tracking-widest"
|
||
@click="activeModal = 'none'"
|
||
>
|
||
取消
|
||
</button>
|
||
<button
|
||
:disabled="sequenceLoading || !sequenceForm.table"
|
||
class="px-8 py-2 bg-amber-600 hover:bg-amber-500 text-white text-xs font-black rounded-xl shadow-lg transition-all active:scale-95 uppercase tracking-widest disabled:opacity-50 disabled:cursor-not-allowed"
|
||
@click="resetSequence"
|
||
>
|
||
{{ sequenceLoading ? '正在重置...' : '执行重置' }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 重置数据库模态框 -->
|
||
<div
|
||
v-if="activeModal === 'reset-db'"
|
||
class="fixed inset-0 z-[100] flex items-center justify-center p-4"
|
||
>
|
||
<div class="absolute inset-0 bg-black/80 backdrop-blur-sm" @click="activeModal = 'none'" />
|
||
<div
|
||
class="relative bg-white border border-zinc-200 rounded-3xl w-full max-w-lg overflow-hidden shadow-2xl animate-in fade-in zoom-in duration-200"
|
||
>
|
||
<div class="px-8 py-6 border-b border-zinc-200 flex items-center justify-between">
|
||
<h3 class="text-xl font-black text-rose-500 tracking-tight">危险操作：重置数据库</h3>
|
||
<button
|
||
class="p-2 hover:bg-zinc-100 rounded-xl transition-colors text-zinc-500 hover:text-zinc-700"
|
||
@click="activeModal = 'none'"
|
||
>
|
||
<X class="w-5 h-5" />
|
||
</button>
|
||
</div>
|
||
<div class="p-8 space-y-6">
|
||
<div
|
||
class="p-6 bg-rose-600/10 border border-rose-500/20 rounded-2xl flex flex-col items-center text-center"
|
||
>
|
||
<Trash2 class="text-rose-500 mb-4 w-12 h-12" />
|
||
<h4 class="text-lg font-black text-rose-500 tracking-tight">
|
||
您正在执行极其危险的操作！
|
||
</h4>
|
||
<p class="text-xs text-zinc-500 mt-2 font-medium leading-relaxed">
|
||
重置操作将永久删除系统中的所有
|
||
<span class="text-zinc-600 font-bold"
|
||
>歌曲、投稿记录、排期文件、通知、日志及除您以外的用户账号</span
|
||
>。
|
||
</p>
|
||
</div>
|
||
|
||
<div class="space-y-3">
|
||
<label
|
||
class="text-[11px] font-black text-rose-500/80 uppercase tracking-widest px-1 flex items-center justify-center gap-2"
|
||
>
|
||
请输入以下代码以确认操作
|
||
</label>
|
||
<div
|
||
class="bg-white border border-rose-200 rounded-xl px-4 py-3 font-mono text-[10px] text-rose-700 text-center select-all"
|
||
>
|
||
{{ CONFIRM_CODE }}
|
||
</div>
|
||
<input
|
||
v-model="resetConfirmText"
|
||
type="text"
|
||
placeholder="在此输入上述代码..."
|
||
class="w-full bg-white border border-zinc-200 rounded-xl px-4 py-3 text-sm text-zinc-700 focus:outline-none focus:border-rose-200 text-center font-mono placeholder:text-zinc-700"
|
||
>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-2 gap-3 pt-2">
|
||
<button
|
||
class="py-3 bg-white hover:bg-zinc-100 text-zinc-500 text-xs font-black rounded-xl transition-all uppercase tracking-widest"
|
||
@click="activeModal = 'none'"
|
||
>
|
||
取消
|
||
</button>
|
||
<button
|
||
:disabled="resetConfirmText !== CONFIRM_CODE || resetLoading"
|
||
class="py-3 rounded-xl text-xs font-black uppercase tracking-widest transition-all shadow-lg disabled:bg-zinc-100 disabled:text-zinc-600 disabled:cursor-not-allowed disabled:border-zinc-200"
|
||
:class="
|
||
resetConfirmText === CONFIRM_CODE
|
||
? 'bg-rose-600 hover:bg-rose-500 text-white shadow-rose-900/20 active:scale-95'
|
||
: ''
|
||
"
|
||
@click="resetDatabase"
|
||
>
|
||
{{ resetLoading ? '正在重置...' : '确认彻底重置' }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import { Download, Upload, RotateCw, Trash2, AlertCircle, X } from '@lucide/vue'
|
||
import CustomSelect from '~/components/UI/Common/CustomSelect.vue'
|
||
import { useToast } from '~/composables/useToast'
|
||
import { useAuth } from '~/composables/useAuth'
|
||
|
||
const { showToast: showNotification } = useToast()
|
||
const auth = useAuth()
|
||
|
||
// 状态
|
||
const activeModal = ref('none')
|
||
const createLoading = ref(false)
|
||
const uploadLoading = ref(false)
|
||
const sequenceLoading = ref(false)
|
||
const resetLoading = ref(false)
|
||
const selectedFile = ref(null)
|
||
const resetConfirmText = ref('')
|
||
const restoreProgress = ref('')
|
||
const hasSuperAdminInBackup = ref(false)
|
||
const CONFIRM_CODE = 'CONFIRM-DATABASE-RESET-OPERATION'
|
||
|
||
// 卡片配置
|
||
const cards = [
|
||
{
|
||
id: 'backup',
|
||
title: '创建备份',
|
||
desc: '导出当前数据库的所有数据到文件，用于安全备份或迁移。',
|
||
icon: Download,
|
||
color: 'blue',
|
||
btnText: '创建备份文件'
|
||
},
|
||
{
|
||
id: 'restore',
|
||
title: '恢复备份',
|
||
desc: '从之前导出的备份文件中恢复系统数据。',
|
||
icon: Upload,
|
||
color: 'emerald',
|
||
btnText: '选择备份文件'
|
||
},
|
||
{
|
||
id: 'reset-seq',
|
||
title: '重置序列',
|
||
desc: '修复数据表的自增ID序列，确保新记录的ID从正确值开始。',
|
||
icon: RotateCw,
|
||
color: 'amber',
|
||
btnText: '开始重置序列'
|
||
},
|
||
{
|
||
id: 'reset-db',
|
||
title: '重置数据库',
|
||
desc: '清空除管理员账号外的所有系统数据。此操作不可撤销。',
|
||
icon: Trash2,
|
||
color: 'rose',
|
||
btnText: '立即重置数据库',
|
||
isDanger: true
|
||
}
|
||
]
|
||
|
||
// 备份选项
|
||
const backupOptions = [
|
||
{
|
||
key: 'includeSongs',
|
||
label: '歌曲与排期数据',
|
||
desc: '包含所有歌曲库、用户投稿记录及历史播音排期'
|
||
},
|
||
{
|
||
key: 'includeSystemData',
|
||
label: '系统配置信息',
|
||
desc: '包含站点设置、黑名单、播出时段等全局参数'
|
||
},
|
||
{
|
||
key: 'includeUsers',
|
||
label: '用户账户数据',
|
||
desc: '包含所有注册用户的权限、偏好设置（不含管理员敏感信息）'
|
||
}
|
||
]
|
||
|
||
// 表单数据
|
||
const createForm = ref({
|
||
includeSongs: true,
|
||
includeUsers: true,
|
||
includeSystemData: true
|
||
})
|
||
|
||
const restoreForm = ref({
|
||
mode: 'merge',
|
||
overwriteSuperAdmin: false
|
||
})
|
||
|
||
const sequenceForm = ref({
|
||
table: '重置所有表 (All)'
|
||
})
|
||
|
||
const tableOptions = [
|
||
'重置所有表 (All)',
|
||
'歌曲表 (Song)',
|
||
'用户表 (User)',
|
||
'投票表 (Vote)',
|
||
'排期表 (Schedule)',
|
||
'通知表 (Notification)',
|
||
'通知设置表 (NotificationSettings)',
|
||
'播放时段表 (PlayTime)',
|
||
'学期表 (Semester)',
|
||
'系统设置表 (SystemSettings)',
|
||
'歌曲黑名单表 (SongBlacklist)'
|
||
]
|
||
|
||
const labelToValueMap = {
|
||
'重置所有表 (All)': 'all',
|
||
'歌曲表 (Song)': 'Song',
|
||
'用户表 (User)': 'User',
|
||
'投票表 (Vote)': 'Vote',
|
||
'排期表 (Schedule)': 'Schedule',
|
||
'通知表 (Notification)': 'Notification',
|
||
'通知设置表 (NotificationSettings)': 'NotificationSettings',
|
||
'播放时段表 (PlayTime)': 'PlayTime',
|
||
'学期表 (Semester)': 'Semester',
|
||
'系统设置表 (SystemSettings)': 'SystemSettings',
|
||
'歌曲黑名单表 (SongBlacklist)': 'SongBlacklist'
|
||
}
|
||
|
||
// 辅助函数
|
||
const isLoading = (id) => {
|
||
if (id === 'backup') return createLoading.value
|
||
if (id === 'restore') return uploadLoading.value
|
||
if (id === 'reset-seq') return sequenceLoading.value
|
||
if (id === 'reset-db') return resetLoading.value
|
||
return false
|
||
}
|
||
|
||
const openModal = (id) => {
|
||
activeModal.value = id
|
||
if (id === 'reset-db') {
|
||
resetConfirmText.value = ''
|
||
}
|
||
}
|
||
|
||
// 文件处理
|
||
const parseBackupSuperAdmin = async (file) => {
|
||
try {
|
||
const fileContent = await file.text()
|
||
const backupData = JSON.parse(fileContent)
|
||
const users = Array.isArray(backupData?.data?.users) ? backupData.data.users : []
|
||
hasSuperAdminInBackup.value = users.some((item) => item?.role === 'SUPER_ADMIN')
|
||
if (!hasSuperAdminInBackup.value) {
|
||
restoreForm.value.overwriteSuperAdmin = false
|
||
}
|
||
} catch (error) {
|
||
hasSuperAdminInBackup.value = false
|
||
restoreForm.value.overwriteSuperAdmin = false
|
||
showNotification('无法解析备份文件，请检查文件格式是否正确。', 'error')
|
||
console.error('解析备份文件失败:', error)
|
||
}
|
||
}
|
||
|
||
const handleFileSelect = async (event) => {
|
||
const file = event.target.files[0]
|
||
if (file && file.type === 'application/json') {
|
||
selectedFile.value = file
|
||
await parseBackupSuperAdmin(file)
|
||
} else {
|
||
showNotification('请选择有效的JSON备份文件', 'error')
|
||
}
|
||
}
|
||
|
||
const handleFileDrop = async (event) => {
|
||
const file = event.dataTransfer.files[0]
|
||
if (file && file.type === 'application/json') {
|
||
selectedFile.value = file
|
||
await parseBackupSuperAdmin(file)
|
||
} else {
|
||
showNotification('请选择有效的JSON备份文件', 'error')
|
||
}
|
||
}
|
||
|
||
// API 操作
|
||
const createBackup = async () => {
|
||
createLoading.value = true
|
||
try {
|
||
let tables = 'all'
|
||
if (createForm.value.includeUsers && createForm.value.includeSongs) {
|
||
tables = 'all'
|
||
} else if (createForm.value.includeUsers) {
|
||
tables = 'users'
|
||
} else if (createForm.value.includeSongs) {
|
||
tables = 'songs'
|
||
} else if (createForm.value.includeSystemData) {
|
||
tables = ['systemSettings']
|
||
} else {
|
||
throw new Error('请至少选择一项备份内容')
|
||
}
|
||
|
||
const response = await $fetch('/api/admin/backup/export', {
|
||
method: 'POST',
|
||
body: {
|
||
tables,
|
||
includeSystemData: createForm.value.includeSystemData
|
||
}
|
||
})
|
||
|
||
if (response.success && response.backup) {
|
||
if (response.backup.downloadMode === 'direct' && response.backup.data) {
|
||
const blob = new Blob([JSON.stringify(response.backup.data, null, 2)], {
|
||
type: 'application/json'
|
||
})
|
||
const url = URL.createObjectURL(blob)
|
||
const a = document.createElement('a')
|
||
a.href = url
|
||
a.download = response.backup.filename
|
||
document.body.appendChild(a)
|
||
a.click()
|
||
document.body.removeChild(a)
|
||
URL.revokeObjectURL(url)
|
||
showNotification('备份文件已下载', 'success')
|
||
activeModal.value = 'none'
|
||
} else if (response.backup.downloadMode === 'file' && response.backup.filename) {
|
||
const downloadUrl = `/api/admin/backup/download/${response.backup.filename}`
|
||
const downloadResponse = await fetch(downloadUrl, {
|
||
method: 'GET',
|
||
credentials: 'include'
|
||
})
|
||
if (!downloadResponse.ok) throw new Error(`下载失败: ${downloadResponse.status}`)
|
||
const blob = await downloadResponse.blob()
|
||
const url = URL.createObjectURL(blob)
|
||
const a = document.createElement('a')
|
||
a.href = url
|
||
a.download = response.backup.filename
|
||
document.body.appendChild(a)
|
||
a.click()
|
||
document.body.removeChild(a)
|
||
URL.revokeObjectURL(url)
|
||
showNotification('备份文件已下载', 'success')
|
||
activeModal.value = 'none'
|
||
}
|
||
} else {
|
||
throw new Error(response.message || '备份创建失败')
|
||
}
|
||
} catch (error) {
|
||
console.error('创建备份失败:', error)
|
||
showNotification('创建备份失败: ' + error.message, 'error')
|
||
} finally {
|
||
createLoading.value = false
|
||
}
|
||
}
|
||
|
||
const restoreBackup = async () => {
|
||
if (!selectedFile.value) return showNotification('请选择备份文件', 'error')
|
||
|
||
uploadLoading.value = true
|
||
restoreProgress.value = '正在读取文件...'
|
||
|
||
try {
|
||
const fileContent = await selectedFile.value.text()
|
||
let backupData
|
||
try {
|
||
backupData = JSON.parse(fileContent)
|
||
} catch {
|
||
throw new Error('无法解析备份文件，文件格式不正确')
|
||
}
|
||
|
||
if (!backupData.data) throw new Error('备份文件缺少数据部分')
|
||
const fileHasSuperAdmin = hasSuperAdminInBackup.value
|
||
if (!fileHasSuperAdmin) {
|
||
restoreForm.value.overwriteSuperAdmin = false
|
||
}
|
||
|
||
let preservedSuperAdminIds = []
|
||
let temporaryPreservedUserId = null
|
||
|
||
if (restoreForm.value.mode === 'replace') {
|
||
restoreProgress.value = '正在清空现有数据...'
|
||
const clearResult = await $fetch('/api/admin/backup/clear', {
|
||
method: 'POST',
|
||
body: {
|
||
overwriteSuperAdmin: restoreForm.value.overwriteSuperAdmin,
|
||
hasSuperAdminInBackup: fileHasSuperAdmin
|
||
}
|
||
})
|
||
if (!clearResult.success) throw new Error(clearResult.message || '清空数据失败')
|
||
preservedSuperAdminIds = clearResult.preservedSuperAdminIds || []
|
||
temporaryPreservedUserId = clearResult.temporaryPreservedUserId || null
|
||
}
|
||
|
||
const tableOrder = [
|
||
'users',
|
||
'userIdentities',
|
||
'systemSettings',
|
||
'semesters',
|
||
'playTimes',
|
||
'songs',
|
||
'votes',
|
||
'schedules',
|
||
'notificationSettings',
|
||
'notifications',
|
||
'songBlacklist',
|
||
'userStatusLogs'
|
||
]
|
||
|
||
const mappings = {
|
||
users: {},
|
||
songs: {},
|
||
meta: {
|
||
preservedSuperAdminIds,
|
||
temporaryPreservedUserId
|
||
}
|
||
}
|
||
const CHUNK_SIZE = 50
|
||
let totalProcessed = 0
|
||
let totalRecords = 0
|
||
|
||
for (const tableName of tableOrder) {
|
||
if (backupData.data[tableName] && Array.isArray(backupData.data[tableName])) {
|
||
totalRecords += backupData.data[tableName].length
|
||
}
|
||
}
|
||
|
||
for (const tableName of tableOrder) {
|
||
const records = backupData.data[tableName]
|
||
if (!records || !Array.isArray(records) || records.length === 0) continue
|
||
|
||
for (let i = 0; i < records.length; i += CHUNK_SIZE) {
|
||
const chunk = records.slice(i, i + CHUNK_SIZE)
|
||
const progressPercent = Math.round((totalProcessed / totalRecords) * 100)
|
||
restoreProgress.value = `正在恢复 ${tableName} (${i + 1}-${Math.min(i + CHUNK_SIZE, records.length)}/${records.length}) ${progressPercent}%`
|
||
|
||
const response = await $fetch('/api/admin/backup/restore-chunk', {
|
||
method: 'POST',
|
||
body: {
|
||
tableName,
|
||
records: chunk,
|
||
mappings,
|
||
mode: restoreForm.value.mode,
|
||
overwriteSuperAdmin: restoreForm.value.overwriteSuperAdmin,
|
||
hasSuperAdminInBackup: fileHasSuperAdmin
|
||
}
|
||
})
|
||
|
||
if (!response.success) throw new Error(response.message || `恢复表 ${tableName} 失败`)
|
||
if (response.newMappings) {
|
||
if (response.newMappings.users) Object.assign(mappings.users, response.newMappings.users)
|
||
if (response.newMappings.songs) Object.assign(mappings.songs, response.newMappings.songs)
|
||
}
|
||
totalProcessed += chunk.length
|
||
}
|
||
}
|
||
|
||
restoreProgress.value = '正在修复数据表序列...'
|
||
const sequenceResult = await $fetch('/api/admin/fix-sequence', {
|
||
method: 'POST',
|
||
body: { table: 'all' }
|
||
})
|
||
if (!sequenceResult.success) {
|
||
throw new Error(sequenceResult.message || sequenceResult.error || '序列修复失败')
|
||
}
|
||
|
||
restoreProgress.value = '正在重载SMTP配置...'
|
||
const smtpReloadResult = await $fetch('/api/admin/smtp/reload', {
|
||
method: 'POST'
|
||
})
|
||
if (!smtpReloadResult.success) {
|
||
throw new Error(smtpReloadResult.message || 'SMTP配置重载失败')
|
||
}
|
||
|
||
const shouldFinalizeTempUser =
|
||
restoreForm.value.mode === 'replace' &&
|
||
restoreForm.value.overwriteSuperAdmin &&
|
||
fileHasSuperAdmin &&
|
||
temporaryPreservedUserId
|
||
|
||
if (shouldFinalizeTempUser) {
|
||
const restoredUserIds = Object.values(mappings.users).map((id) => Number(id))
|
||
if (!restoredUserIds.includes(Number(temporaryPreservedUserId))) {
|
||
restoreProgress.value = '正在完成管理员替换...'
|
||
await $fetch('/api/admin/backup/clear', {
|
||
method: 'POST',
|
||
body: {
|
||
finalizeTempUser: true
|
||
}
|
||
})
|
||
}
|
||
showNotification('数据库恢复成功，正在重新登录', 'success')
|
||
activeModal.value = 'none'
|
||
setTimeout(() => {
|
||
if (auth.logout) {
|
||
auth.logout()
|
||
}
|
||
localStorage.removeItem('auth-token')
|
||
localStorage.removeItem('user-info')
|
||
window.location.href = '/'
|
||
}, 1200)
|
||
return
|
||
}
|
||
|
||
showNotification('数据库恢复成功', 'success')
|
||
activeModal.value = 'none'
|
||
} catch (error) {
|
||
console.error('恢复备份失败:', error)
|
||
showNotification('恢复备份失败: ' + error.message, 'error')
|
||
} finally {
|
||
uploadLoading.value = false
|
||
restoreProgress.value = ''
|
||
}
|
||
}
|
||
|
||
const resetSequence = async () => {
|
||
if (!sequenceForm.value.table) return
|
||
sequenceLoading.value = true
|
||
try {
|
||
const tableValue = labelToValueMap[sequenceForm.value.table] || sequenceForm.value.table
|
||
const response = await $fetch('/api/admin/fix-sequence', {
|
||
method: 'POST',
|
||
body: { table: tableValue }
|
||
})
|
||
if (response.success) {
|
||
showNotification(response.message || '序列重置成功', 'success')
|
||
activeModal.value = 'none'
|
||
} else {
|
||
throw new Error(response.error || response.message || '重置失败')
|
||
}
|
||
} catch (error) {
|
||
console.error('重置序列失败:', error)
|
||
showNotification('重置序列失败: ' + error.message, 'error')
|
||
} finally {
|
||
sequenceLoading.value = false
|
||
}
|
||
}
|
||
|
||
const resetDatabase = async () => {
|
||
if (resetConfirmText.value !== CONFIRM_CODE) return
|
||
resetLoading.value = true
|
||
try {
|
||
const response = await $fetch('/api/admin/database/reset', { method: 'POST' })
|
||
if (response.success) {
|
||
showNotification('数据库已成功重置', 'success')
|
||
activeModal.value = 'none'
|
||
setTimeout(() => window.location.reload(), 1500)
|
||
} else {
|
||
throw new Error(response.message || '重置失败')
|
||
}
|
||
} catch (error) {
|
||
console.error('重置数据库失败:', error)
|
||
showNotification('重置数据库失败: ' + error.message, 'error')
|
||
} finally {
|
||
resetLoading.value = false
|
||
}
|
||
}
|
||
</script>
|