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

feat(admin-ui): 管理后台整体切换为浅色主题(ModernLight) + 新增 lightbulb 图标

Browse Source 
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 处手工精细化修正)
This commit is contained in:
Henry_Du
2026-09-19 08:30:59 +08:00
parent 357876a716
commit 573e168702
36 changed files with 1023 additions and 1017 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Admin/UserManager.vue
+105 -105
View File
@@ -3,7 +3,7 @@
<!-- Header -->
<div class="flex flex-col md:flex-row md:items-end justify-between gap-6 mt-4">
<div>
<h2 class="text-2xl font-black text-zinc-100 tracking-tight">用户管理</h2>
<h2 class="text-2xl font-black text-zinc-900 tracking-tight">用户管理</h2>
<p class="text-xs text-zinc-500 mt-1">系统共有 {{ totalUsers }} 位成员 · 权限与账户管理</p>
</div>
<div class="flex flex-wrap items-center gap-2">
@@ -15,14 +15,14 @@
添加
</button>
<button
class="flex-1 md:flex-none flex items-center justify-center gap-2 px-4 py-2.5 bg-zinc-900 border border-zinc-800 text-zinc-300 text-xs font-black rounded-lg transition-all uppercase tracking-widest"
class="flex-1 md:flex-none flex items-center justify-center gap-2 px-4 py-2.5 bg-white border border-zinc-200 text-zinc-600 text-xs font-black rounded-lg transition-all uppercase tracking-widest"
@click="showImportModal = true"
>
<FileSpreadsheet class="text-emerald-500" :size="14" />
导入
</button>
<button
class="flex-1 md:flex-none flex items-center justify-center gap-2 px-4 py-2.5 bg-zinc-900 border border-zinc-800 text-zinc-300 text-xs font-black rounded-lg transition-all uppercase tracking-widest"
class="flex-1 md:flex-none flex items-center justify-center gap-2 px-4 py-2.5 bg-white border border-zinc-200 text-zinc-600 text-xs font-black rounded-lg transition-all uppercase tracking-widest"
@click="showBatchUpdateModal = true"
>
<Layers class="text-purple-500" :size="14" />
@@ -33,7 +33,7 @@
<!-- Filter Bar -->
<div
class="bg-zinc-900/40 border border-zinc-800/60 rounded-xl p-3 flex flex-col lg:flex-row gap-3 items-center"
class="bg-zinc-50/40 border border-zinc-200/60 rounded-xl p-3 flex flex-col lg:flex-row gap-3 items-center"
>
<div class="relative flex-1 w-full group">
<Search
@@ -42,7 +42,7 @@
/>
<input
v-model="searchQuery"
class="w-full bg-zinc-950 border border-zinc-800/80 rounded-lg pl-11 pr-4 py-2.5 text-xs focus:outline-none focus:border-blue-500/30 transition-all text-zinc-200"
class="w-full bg-white border border-zinc-200/80 rounded-lg pl-11 pr-4 py-2.5 text-xs focus:outline-none focus:border-blue-200 transition-all text-zinc-700"
placeholder="通过姓名或学号搜索..."
type="text"
>
@@ -84,7 +84,7 @@
/>
<button
class="p-3 bg-zinc-950 border border-zinc-800 rounded-lg text-zinc-600 hover:text-blue-400 transition-all shadow-sm"
class="p-3 bg-white border border-zinc-200 rounded-lg text-zinc-600 hover:text-blue-700 transition-all shadow-sm"
@click="loadUsers(1)"
>
<RefreshCw :size="14" />
@@ -96,17 +96,17 @@
<div class="space-y-4">
<div v-if="loading" class="flex flex-col items-center justify-center py-20 text-zinc-500">
<div
class="w-8 h-8 border-2 border-blue-500/20 border-t-blue-500 rounded-full animate-spin mb-4"
class="w-8 h-8 border-2 border-blue-200 border-t-blue-500 rounded-full animate-spin mb-4"
/>
<div class="text-xs font-black uppercase tracking-widest">正在加载用户...</div>
</div>
<div
v-else-if="users.length === 0"
class="flex flex-col items-center justify-center py-20 bg-zinc-900/20 border border-zinc-800/50 rounded-xl"
class="flex flex-col items-center justify-center py-20 bg-zinc-50/20 border border-zinc-200 rounded-xl"
>
<div
class="w-16 h-16 rounded-lg bg-zinc-800/50 flex items-center justify-center text-zinc-600 mb-4"
class="w-16 h-16 rounded-lg bg-zinc-100/50 flex items-center justify-center text-zinc-600 mb-4"
>
<Search :size="32" />
</div>
@@ -118,12 +118,12 @@
<template v-else>
<!-- 桌面端表格 -->
<div
class="hidden lg:block bg-zinc-900/20 border border-zinc-800/50 rounded-xl overflow-hidden shadow-lg custom-scrollbar"
class="hidden lg:block bg-zinc-50/20 border border-zinc-200 rounded-xl overflow-hidden shadow-lg custom-scrollbar"
>
<table class="w-full">
<thead>
<tr
class="bg-zinc-900/60 border-b border-zinc-800 text-[10px] font-black text-zinc-600 uppercase tracking-widest"
class="bg-zinc-50/60 border-b border-zinc-200 text-[10px] font-black text-zinc-600 uppercase tracking-widest"
>
<th class="px-6 py-5 text-left">用户详情</th>
<th class="px-6 py-5 text-left">角色权限</th>
@@ -137,7 +137,7 @@
<tr
v-for="user in users"
:key="user.id"
class="group hover:bg-zinc-800/30 transition-all text-xs cursor-pointer"
class="group hover:bg-zinc-100/30 transition-all text-xs cursor-pointer"
@click="showUserDetail(user, $event)"
>
<td class="px-6 py-5">
@@ -145,17 +145,17 @@
<img
v-if="user.avatar && !failedImages[user.id]"
:src="user.avatar"
class="w-10 h-10 rounded-xl object-cover border border-zinc-700/50"
class="w-10 h-10 rounded-xl object-cover border border-zinc-200"
@error="handleImageError(user.id)"
>
<div
v-else
class="w-10 h-10 rounded-xl bg-zinc-800 flex items-center justify-center font-black text-zinc-500 group-hover:text-zinc-300 transition-colors border border-zinc-700/50"
class="w-10 h-10 rounded-xl bg-zinc-100 flex items-center justify-center font-black text-zinc-500 group-hover:text-zinc-600 transition-colors border border-zinc-200"
>
{{ (user.name || user.username || '?').charAt(0).toUpperCase() }}
</div>
<div>
<p class="font-black text-zinc-100">{{ user.name || user.username }}</p>
<p class="font-black text-zinc-900">{{ user.name || user.username }}</p>
<p class="text-[10px] text-zinc-600 font-mono mt-0.5">
ID: {{ user.username }}
</p>
@@ -167,9 +167,9 @@
class="px-2 py-0.5 text-[10px] font-black rounded border uppercase tracking-widest"
:class="{
'bg-orange-500/10 text-orange-400 border-orange-500/20': user.role?.toUpperCase() === 'SUPER_ADMIN',
'bg-blue-500/10 text-blue-400 border-blue-500/20': user.role?.toUpperCase() === 'ADMIN' || user.role?.toUpperCase() === 'MINISTER',
'bg-blue-500/10 text-blue-700 border-blue-200': user.role?.toUpperCase() === 'ADMIN' || user.role?.toUpperCase() === 'MINISTER',
'bg-purple-500/10 text-purple-400 border-purple-500/20': user.role?.toUpperCase() === 'SONG_ADMIN' || user.role?.toUpperCase() === 'STAFF' || user.role?.toUpperCase() === 'VICE_MINISTER',
'bg-zinc-800 text-zinc-500 border-zinc-700/50': !['SUPER_ADMIN', 'ADMIN', 'MINISTER', 'SONG_ADMIN', 'STAFF', 'VICE_MINISTER'].includes(user.role?.toUpperCase())
'bg-zinc-100 text-zinc-500 border-zinc-200': !['SUPER_ADMIN', 'ADMIN', 'MINISTER', 'SONG_ADMIN', 'STAFF', 'VICE_MINISTER'].includes(user.role?.toUpperCase())
}"
>
{{ getRoleDisplayName(user.role?.toUpperCase()) }}
@@ -222,14 +222,14 @@
>
<button
:disabled="isSelf(user) || !canManageTargetUser(user)"
class="p-2 bg-zinc-950 border border-zinc-800 rounded-xl text-zinc-500 hover:text-blue-400 transition-colors disabled:opacity-20 disabled:cursor-not-allowed action-btn"
class="p-2 bg-white border border-zinc-200 rounded-xl text-zinc-500 hover:text-blue-700 transition-colors disabled:opacity-20 disabled:cursor-not-allowed action-btn"
:title="!canManageTargetUser(user) ? '权限不足：无法编辑该用户' : '编辑用户'"
@click="editUser(user)"
>
<Edit2 :size="13" />
</button>
<button
class="p-2 bg-zinc-950 border border-zinc-800 rounded-xl text-zinc-500 hover:text-purple-400 transition-colors action-btn"
class="p-2 bg-white border border-zinc-200 rounded-xl text-zinc-500 hover:text-purple-400 transition-colors action-btn"
title="查看歌曲"
@click="viewUserSongs(user)"
>
@@ -237,7 +237,7 @@
</button>
<button
:disabled="isSelf(user) || !canResetPasswordFor(user)"
class="p-2 bg-zinc-950 border border-zinc-800 rounded-xl text-zinc-500 hover:text-amber-400 transition-colors disabled:opacity-20 disabled:cursor-not-allowed action-btn"
class="p-2 bg-white border border-zinc-200 rounded-xl text-zinc-500 hover:text-amber-700 transition-colors disabled:opacity-20 disabled:cursor-not-allowed action-btn"
:title="!canResetPasswordFor(user) ? '权限不足：无法重置该用户的密码' : '重置密码'"
@click="resetPassword(user)"
>
@@ -245,7 +245,7 @@
</button>
<button
:disabled="isSelf(user) || !canManageTargetUser(user)"
class="p-2 bg-zinc-950 border border-zinc-800 rounded-xl text-zinc-500 hover:text-red-400 transition-colors disabled:opacity-20 disabled:cursor-not-allowed action-btn"
class="p-2 bg-white border border-zinc-200 rounded-xl text-zinc-500 hover:text-red-400 transition-colors disabled:opacity-20 disabled:cursor-not-allowed action-btn"
:title="!canManageTargetUser(user) ? '权限不足：无法删除该用户' : '删除用户'"
@click="confirmDeleteUser(user)"
>
@@ -263,7 +263,7 @@
<div
v-for="user in users"
:key="user.id"
class="bg-zinc-900/40 border border-zinc-800 rounded-xl p-5 space-y-5 shadow-lg shadow-black/20"
class="bg-zinc-50/40 border border-zinc-200 rounded-xl p-5 space-y-5 shadow-lg shadow-zinc-900/5"
@click="showUserDetail(user, $event)"
>
<div class="flex items-start justify-between">
@@ -271,17 +271,17 @@
<img
v-if="user.avatar && !failedImages[user.id]"
:src="user.avatar"
class="w-12 h-12 rounded-lg object-cover border border-zinc-700"
class="w-12 h-12 rounded-lg object-cover border border-zinc-200"
@error="handleImageError(user.id)"
>
<div
v-else
class="w-12 h-12 rounded-lg bg-zinc-800 flex items-center justify-center font-black text-lg text-zinc-500 border border-zinc-700"
class="w-12 h-12 rounded-lg bg-zinc-100 flex items-center justify-center font-black text-lg text-zinc-500 border border-zinc-200"
>
{{ (user.name || user.username || '?').charAt(0).toUpperCase() }}
</div>
<div>
<h4 class="text-base font-black text-zinc-100">{{ user.name || user.username }}</h4>
<h4 class="text-base font-black text-zinc-900">{{ user.name || user.username }}</h4>
<p class="text-xs text-zinc-500 font-mono">@{{ user.username }}</p>
</div>
</div>
@@ -320,7 +320,7 @@
</div>
</div>
<div class="grid grid-cols-2 gap-4 py-4 border-y border-zinc-800/50">
<div class="grid grid-cols-2 gap-4 py-4 border-y border-zinc-200">
<div class="space-y-1">
<p class="text-[9px] font-black text-zinc-600 uppercase tracking-widest">
角色/等级
@@ -330,9 +330,9 @@
class="px-2 py-0.5 text-[10px] font-black rounded border uppercase tracking-widest"
:class="{
'bg-orange-500/10 text-orange-400 border-orange-500/20': user.role?.toUpperCase() === 'SUPER_ADMIN',
'bg-blue-500/10 text-blue-400 border-blue-500/20': user.role?.toUpperCase() === 'ADMIN' || user.role?.toUpperCase() === 'MINISTER',
'bg-blue-500/10 text-blue-700 border-blue-200': user.role?.toUpperCase() === 'ADMIN' || user.role?.toUpperCase() === 'MINISTER',
'bg-purple-500/10 text-purple-400 border-purple-500/20': user.role?.toUpperCase() === 'SONG_ADMIN' || user.role?.toUpperCase() === 'STAFF' || user.role?.toUpperCase() === 'VICE_MINISTER',
'bg-zinc-800 text-zinc-500 border-zinc-700/50': !['SUPER_ADMIN', 'ADMIN', 'MINISTER', 'SONG_ADMIN', 'STAFF', 'VICE_MINISTER'].includes(user.role?.toUpperCase())
'bg-zinc-100 text-zinc-500 border-zinc-200': !['SUPER_ADMIN', 'ADMIN', 'MINISTER', 'SONG_ADMIN', 'STAFF', 'VICE_MINISTER'].includes(user.role?.toUpperCase())
}"
>
{{ getRoleDisplayName(user.role?.toUpperCase()) }}
@@ -343,7 +343,7 @@
<p class="text-[9px] font-black text-zinc-600 uppercase tracking-widest">
所在班级
</p>
<p class="text-xs font-bold text-zinc-300">
<p class="text-xs font-bold text-zinc-600">
{{ user.grade || '-' }} {{ user.class || '-' }}
</p>
</div>
@@ -364,21 +364,21 @@
<div class="flex gap-2 action-buttons">
<button
:disabled="isSelf(user) || !canManageTargetUser(user)"
class="flex-1 py-2.5 bg-zinc-950 border border-zinc-800 rounded-lg text-zinc-400 flex items-center justify-center gap-2 text-[10px] font-black uppercase tracking-widest active:bg-blue-600 active:text-white transition-colors disabled:opacity-20 action-btn"
class="flex-1 py-2.5 bg-white border border-zinc-200 rounded-lg text-zinc-400 flex items-center justify-center gap-2 text-[10px] font-black uppercase tracking-widest active:bg-blue-600 active:text-white transition-colors disabled:opacity-20 action-btn"
:title="!canManageTargetUser(user) ? '权限不足：无法编辑该用户' : '编辑用户'"
@click="editUser(user)"
>
<Edit2 :size="12" /> 编辑
</button>
<button
class="flex-1 py-2.5 bg-zinc-950 border border-zinc-800 rounded-lg text-zinc-400 flex items-center justify-center gap-2 text-[10px] font-black uppercase tracking-widest active:bg-purple-600 active:text-white transition-colors action-btn"
class="flex-1 py-2.5 bg-white border border-zinc-200 rounded-lg text-zinc-400 flex items-center justify-center gap-2 text-[10px] font-black uppercase tracking-widest active:bg-purple-600 active:text-white transition-colors action-btn"
@click="viewUserSongs(user)"
>
<Music :size="12" /> 记录
</button>
<button
:disabled="isSelf(user) || !canResetPasswordFor(user)"
class="flex-1 py-2.5 bg-zinc-950 border border-zinc-800 rounded-lg text-zinc-400 flex items-center justify-center gap-2 text-[10px] font-black uppercase tracking-widest active:bg-amber-600 active:text-white transition-colors disabled:opacity-20 action-btn"
class="flex-1 py-2.5 bg-white border border-zinc-200 rounded-lg text-zinc-400 flex items-center justify-center gap-2 text-[10px] font-black uppercase tracking-widest active:bg-amber-600 active:text-white transition-colors disabled:opacity-20 action-btn"
:title="!canResetPasswordFor(user) ? '权限不足：无法重置该用户的密码' : '重置密码'"
@click="resetPassword(user)"
>
@@ -386,7 +386,7 @@
</button>
<button
:disabled="isSelf(user) || !canManageTargetUser(user)"
class="px-3 py-2.5 bg-zinc-950 border border-zinc-800 rounded-lg text-zinc-400 active:bg-red-600 active:text-white transition-colors disabled:opacity-20 action-btn"
class="px-3 py-2.5 bg-white border border-zinc-200 rounded-lg text-zinc-400 active:bg-red-600 active:text-white transition-colors disabled:opacity-20 action-btn"
:title="!canManageTargetUser(user) ? '权限不足：无法删除该用户' : '删除用户'"
@click="confirmDeleteUser(user)"
>
@@ -422,15 +422,15 @@
@click="closeModal"
>
<div
class="bg-zinc-900 border border-zinc-800 w-full max-w-lg rounded-3xl overflow-hidden shadow-2xl"
class="bg-white border border-zinc-200 w-full max-w-lg rounded-3xl overflow-hidden shadow-2xl"
@click.stop
>
<div class="p-8">
<div class="flex items-center justify-between mb-8">
<div>
<h3 class="text-xl font-black text-zinc-100 tracking-tight flex items-center gap-3">
<h3 class="text-xl font-black text-zinc-900 tracking-tight flex items-center gap-3">
<div
class="w-10 h-10 rounded-2xl bg-blue-600/10 flex items-center justify-center text-blue-500"
class="w-10 h-10 rounded-2xl bg-blue-50 flex items-center justify-center text-blue-500"
>
<UserPlus v-if="!editingUser" :size="20" />
<Edit2 v-else :size="20" />
@@ -440,7 +440,7 @@
<p class="text-xs text-zinc-500 mt-1 ml-13">请填写以下账户详细信息以继续</p>
</div>
<button
class="p-3 bg-zinc-800/50 hover:bg-zinc-800 text-zinc-500 hover:text-zinc-200 rounded-2xl transition-all"
class="p-3 bg-zinc-100/50 hover:bg-zinc-100 text-zinc-500 hover:text-zinc-700 rounded-2xl transition-all"
@click="closeModal"
>
<X :size="20" />
@@ -460,7 +460,7 @@
/>
<input
v-model="userForm.name"
class="w-full bg-zinc-950 border border-zinc-800 rounded-2xl pl-11 pr-4 py-3 text-xs focus:outline-none focus:border-blue-500/30 transition-all text-zinc-200"
class="w-full bg-white border border-zinc-200 rounded-2xl pl-11 pr-4 py-3 text-xs focus:outline-none focus:border-blue-200 transition-all text-zinc-700"
placeholder="请输入真实姓名"
type="text"
>
@@ -478,7 +478,7 @@
<input
v-model="userForm.username"
:disabled="!!editingUser"
class="w-full bg-zinc-950 border border-zinc-800 rounded-2xl pl-11 pr-4 py-3 text-xs focus:outline-none focus:border-blue-500/30 transition-all text-zinc-200 disabled:opacity-50"
class="w-full bg-white border border-zinc-200 rounded-2xl pl-11 pr-4 py-3 text-xs focus:outline-none focus:border-blue-200 transition-all text-zinc-700 disabled:opacity-50"
placeholder="登录唯一标识"
type="text"
>
@@ -497,7 +497,7 @@
/>
<input
v-model="userForm.password"
class="w-full bg-zinc-950 border border-zinc-800 rounded-2xl pl-11 pr-4 py-3 text-xs focus:outline-none focus:border-blue-500/30 transition-all text-zinc-200"
class="w-full bg-white border border-zinc-200 rounded-2xl pl-11 pr-4 py-3 text-xs focus:outline-none focus:border-blue-200 transition-all text-zinc-700"
placeholder="设置安全访问密码"
type="password"
>
@@ -571,7 +571,7 @@
<div class="flex gap-3 mt-10">
<button
class="flex-1 px-6 py-4 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 text-xs font-black rounded-2xl transition-all uppercase tracking-widest"
class="flex-1 px-6 py-4 bg-zinc-100 hover:bg-zinc-200 text-zinc-600 text-xs font-black rounded-2xl transition-all uppercase tracking-widest"
@click="closeModal"
>
取消操作
@@ -606,7 +606,7 @@
@click="closeResetPassword"
>
<div
class="bg-zinc-900 border border-zinc-800 w-full max-w-md rounded-3xl overflow-hidden shadow-2xl"
class="bg-white border border-zinc-200 w-full max-w-md rounded-3xl overflow-hidden shadow-2xl"
@click.stop
>
<div class="p-8 text-center">
@@ -615,10 +615,10 @@
>
<Lock :size="32" />
</div>
<h3 class="text-xl font-black text-zinc-100 tracking-tight">重置访问密码</h3>
<h3 class="text-xl font-black text-zinc-900 tracking-tight">重置访问密码</h3>
<p class="text-xs text-zinc-500 mt-2 mb-8">
正在为
<span class="text-zinc-200 font-bold">{{ resetPasswordUser.name }}</span> 修改登录凭据
<span class="text-zinc-700 font-bold">{{ resetPasswordUser.name }}</span> 修改登录凭据
</p>
<div class="space-y-4 text-left">
@@ -633,7 +633,7 @@
/>
<input
v-model="passwordForm.password"
class="w-full bg-zinc-950 border border-zinc-800 rounded-2xl pl-11 pr-4 py-3 text-xs focus:outline-none focus:border-amber-500/30 transition-all text-zinc-200"
class="w-full bg-white border border-zinc-200 rounded-2xl pl-11 pr-4 py-3 text-xs focus:outline-none focus:border-amber-200 transition-all text-zinc-700"
placeholder="设置高强度新密码"
type="password"
>
@@ -650,7 +650,7 @@
/>
<input
v-model="passwordForm.confirmPassword"
class="w-full bg-zinc-950 border border-zinc-800 rounded-2xl pl-11 pr-4 py-3 text-xs focus:outline-none focus:border-amber-500/30 transition-all text-zinc-200"
class="w-full bg-white border border-zinc-200 rounded-2xl pl-11 pr-4 py-3 text-xs focus:outline-none focus:border-amber-200 transition-all text-zinc-700"
placeholder="请再次输入以确认"
type="password"
>
@@ -668,7 +668,7 @@
<div class="flex gap-3 mt-8">
<button
class="flex-1 px-6 py-4 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 text-xs font-black rounded-2xl transition-all uppercase tracking-widest"
class="flex-1 px-6 py-4 bg-zinc-100 hover:bg-zinc-200 text-zinc-600 text-xs font-black rounded-2xl transition-all uppercase tracking-widest"
@click="closeResetPassword"
>
取消
@@ -703,13 +703,13 @@
@click="closeImportModal"
>
<div
class="bg-zinc-900 border border-zinc-800 w-full max-w-2xl rounded-3xl overflow-hidden shadow-2xl"
class="bg-white border border-zinc-200 w-full max-w-2xl rounded-3xl overflow-hidden shadow-2xl"
@click.stop
>
<div class="p-8">
<div class="flex items-center justify-between mb-8">
<div>
<h3 class="text-xl font-black text-zinc-100 tracking-tight flex items-center gap-3">
<h3 class="text-xl font-black text-zinc-900 tracking-tight flex items-center gap-3">
<div
class="w-10 h-10 rounded-2xl bg-emerald-600/10 flex items-center justify-center text-emerald-500"
>
@@ -722,7 +722,7 @@
</p>
</div>
<button
class="p-3 bg-zinc-800/50 hover:bg-zinc-800 text-zinc-500 hover:text-zinc-200 rounded-2xl transition-all"
class="p-3 bg-zinc-100/50 hover:bg-zinc-100 text-zinc-500 hover:text-zinc-700 rounded-2xl transition-all"
@click="closeImportModal"
>
<X :size="20" />
@@ -730,9 +730,9 @@
</div>
<div class="space-y-6 max-h-[60vh] overflow-y-auto pr-2 custom-scrollbar">
<div class="p-5 bg-zinc-950/50 border border-zinc-800/50 rounded-3xl space-y-4">
<div class="flex items-center gap-2 text-zinc-300 font-bold text-sm mb-2">
<Info :size="16" class="text-blue-400" />
<div class="p-5 bg-white/70 border border-zinc-200 rounded-3xl space-y-4">
<div class="flex items-center gap-2 text-zinc-600 font-bold text-sm mb-2">
<Info :size="16" class="text-blue-700" />
导入说明
</div>
<p class="text-xs text-zinc-500 leading-relaxed">
@@ -740,16 +740,16 @@
注意：第一行可以是标题行（会自动跳过），角色字段必须匹配系统定义的角色。
</p>
<div class="overflow-hidden rounded-2xl border border-zinc-800/80">
<div class="overflow-hidden rounded-2xl border border-zinc-200/80">
<table class="w-full text-[10px] text-left">
<thead class="bg-zinc-900 text-zinc-400 uppercase tracking-tighter">
<thead class="bg-white text-zinc-400 uppercase tracking-tighter">
<tr>
<th class="px-3 py-2 border-b border-zinc-800">姓名</th>
<th class="px-3 py-2 border-b border-zinc-800">账号名</th>
<th class="px-3 py-2 border-b border-zinc-800">密码</th>
<th class="px-3 py-2 border-b border-zinc-800">角色</th>
<th class="px-3 py-2 border-b border-zinc-800">年级</th>
<th class="px-3 py-2 border-b border-zinc-800">班级</th>
<th class="px-3 py-2 border-b border-zinc-200">姓名</th>
<th class="px-3 py-2 border-b border-zinc-200">账号名</th>
<th class="px-3 py-2 border-b border-zinc-200">密码</th>
<th class="px-3 py-2 border-b border-zinc-200">角色</th>
<th class="px-3 py-2 border-b border-zinc-200">年级</th>
<th class="px-3 py-2 border-b border-zinc-200">班级</th>
</tr>
</thead>
<tbody class="text-zinc-500">
@@ -767,7 +767,7 @@
<div class="flex items-center justify-between gap-4">
<div
class="p-3 bg-blue-500/5 border border-blue-500/10 rounded-2xl text-[10px] text-blue-400/80 leading-relaxed flex-1"
class="p-3 bg-blue-500/5 border border-blue-500/10 rounded-2xl text-[10px] text-blue-700/80 leading-relaxed flex-1"
>
<strong>支持的角色：</strong>
<span v-if="isSuperAdmin"
@@ -804,15 +804,15 @@
@change="handleFileUpload"
>
<div
class="w-full py-10 border-2 border-dashed border-zinc-800 group-hover:border-emerald-500/50 group-hover:bg-emerald-500/5 rounded-3xl transition-all flex flex-col items-center justify-center gap-3"
class="w-full py-10 border-2 border-dashed border-zinc-200 group-hover:border-emerald-500/50 group-hover:bg-emerald-500/5 rounded-3xl transition-all flex flex-col items-center justify-center gap-3"
>
<div
class="w-12 h-12 rounded-2xl bg-zinc-900 flex items-center justify-center text-zinc-600 group-hover:text-emerald-500 transition-colors"
class="w-12 h-12 rounded-2xl bg-white flex items-center justify-center text-zinc-600 group-hover:text-emerald-500 transition-colors"
>
<Upload :size="24" />
</div>
<div class="text-center">
<p class="text-sm font-bold text-zinc-300">点击或拖拽上传 Excel 文件</p>
<p class="text-sm font-bold text-zinc-600">点击或拖拽上传 Excel 文件</p>
<p class="text-xs text-zinc-500 mt-1">仅支持 .xlsx 格式</p>
</div>
</div>
@@ -829,7 +829,7 @@
<div
v-if="importSuccess"
class="p-4 bg-emerald-500/10 border border-emerald-500/20 rounded-2xl flex items-center gap-3 text-emerald-400 text-xs"
class="p-4 bg-emerald-500/10 border border-emerald-500/20 rounded-2xl flex items-center gap-3 text-emerald-700 text-xs"
>
<CheckCircle2 :size="16" />
{{ importSuccess }}
@@ -841,9 +841,9 @@
>预览数据 ({{ previewData.length }}条记录)</label
>
</div>
<div class="overflow-hidden rounded-3xl border border-zinc-800 bg-zinc-950/30">
<div class="overflow-hidden rounded-3xl border border-zinc-200 bg-white/60">
<table class="w-full text-xs text-left">
<thead class="bg-zinc-900/50 text-zinc-500">
<thead class="bg-zinc-50/50 text-zinc-500">
<tr>
<th class="px-4 py-3 font-medium">姓名</th>
<th class="px-4 py-3 font-medium">账号</th>
@@ -855,13 +855,13 @@
<tr
v-for="(row, index) in previewData.slice(0, 5)"
:key="index"
class="text-zinc-300"
class="text-zinc-600"
>
<td class="px-4 py-3">{{ row.name }}</td>
<td class="px-4 py-3">{{ row.username }}</td>
<td class="px-4 py-3">
<span
class="px-2 py-0.5 bg-zinc-800 rounded-md text-[10px] text-zinc-400 uppercase"
class="px-2 py-0.5 bg-zinc-100 rounded-md text-[10px] text-zinc-400 uppercase"
>{{ row.role }}</span
>
</td>
@@ -883,7 +883,7 @@
<div class="flex gap-3 mt-8">
<button
class="flex-1 px-6 py-4 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 text-xs font-black rounded-2xl transition-all uppercase tracking-widest"
class="flex-1 px-6 py-4 bg-zinc-100 hover:bg-zinc-200 text-zinc-600 text-xs font-black rounded-2xl transition-all uppercase tracking-widest"
@click="closeImportModal"
>
取消
@@ -945,15 +945,15 @@
@click="closeUserDetailModal"
>
<div
class="bg-zinc-900 border border-zinc-800 w-full max-w-3xl rounded-3xl overflow-hidden shadow-2xl"
class="bg-white border border-zinc-200 w-full max-w-3xl rounded-3xl overflow-hidden shadow-2xl"
@click.stop
>
<div class="p-8">
<div class="flex items-center justify-between mb-8">
<div>
<h3 class="text-xl font-black text-zinc-100 tracking-tight flex items-center gap-3">
<h3 class="text-xl font-black text-zinc-900 tracking-tight flex items-center gap-3">
<div
class="w-10 h-10 rounded-2xl bg-blue-600/10 flex items-center justify-center text-blue-500"
class="w-10 h-10 rounded-2xl bg-blue-50 flex items-center justify-center text-blue-500"
>
<User :size="20" />
</div>
@@ -962,7 +962,7 @@
<p class="text-xs text-zinc-500 mt-1 ml-13">查看完整的账户资料与操作记录</p>
</div>
<button
class="p-3 bg-zinc-800/50 hover:bg-zinc-800 text-zinc-500 hover:text-zinc-200 rounded-2xl transition-all"
class="p-3 bg-zinc-100/50 hover:bg-zinc-100 text-zinc-500 hover:text-zinc-700 rounded-2xl transition-all"
@click="closeUserDetailModal"
>
<X :size="20" />
@@ -982,27 +982,27 @@
基本信息
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="p-4 bg-zinc-950/50 border border-zinc-800/50 rounded-2xl space-y-1">
<div class="p-4 bg-white/70 border border-zinc-200 rounded-2xl space-y-1">
<div class="text-[10px] font-black text-zinc-600 uppercase tracking-tighter">
用户 ID
</div>
<div class="text-sm font-bold text-zinc-300">{{ selectedUserDetail.id }}</div>
<div class="text-sm font-bold text-zinc-600">{{ selectedUserDetail.id }}</div>
</div>
<div class="p-4 bg-zinc-950/50 border border-zinc-800/50 rounded-2xl space-y-1">
<div class="p-4 bg-white/70 border border-zinc-200 rounded-2xl space-y-1">
<div class="text-[10px] font-black text-zinc-600 uppercase tracking-tighter">
姓名
</div>
<div class="text-sm font-bold text-zinc-300">{{ selectedUserDetail.name }}</div>
<div class="text-sm font-bold text-zinc-600">{{ selectedUserDetail.name }}</div>
</div>
<div class="p-4 bg-zinc-950/50 border border-zinc-800/50 rounded-2xl space-y-1">
<div class="p-4 bg-white/70 border border-zinc-200 rounded-2xl space-y-1">
<div class="text-[10px] font-black text-zinc-600 uppercase tracking-tighter">
用户名
</div>
<div class="text-sm font-bold text-zinc-300">
<div class="text-sm font-bold text-zinc-600">
{{ selectedUserDetail.username }}
</div>
</div>
<div class="p-4 bg-zinc-950/50 border border-zinc-800/50 rounded-2xl space-y-1">
<div class="p-4 bg-white/70 border border-zinc-200 rounded-2xl space-y-1">
<div class="text-[10px] font-black text-zinc-600 uppercase tracking-tighter">
角色权限
</div>
@@ -1017,19 +1017,19 @@
</span>
</div>
</div>
<div class="p-4 bg-zinc-950/50 border border-zinc-800/50 rounded-2xl space-y-1">
<div class="p-4 bg-white/70 border border-zinc-200 rounded-2xl space-y-1">
<div class="text-[10px] font-black text-zinc-600 uppercase tracking-tighter">
年级
</div>
<div class="text-sm font-bold text-zinc-300">
<div class="text-sm font-bold text-zinc-600">
{{ selectedUserDetail.grade || '未设置' }}
</div>
</div>
<div class="p-4 bg-zinc-950/50 border border-zinc-800/50 rounded-2xl space-y-1">
<div class="p-4 bg-white/70 border border-zinc-200 rounded-2xl space-y-1">
<div class="text-[10px] font-black text-zinc-600 uppercase tracking-tighter">
班级
</div>
<div class="text-sm font-bold text-zinc-300">
<div class="text-sm font-bold text-zinc-600">
{{ selectedUserDetail.class || '未设置' }}
</div>
</div>
@@ -1046,7 +1046,7 @@
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div
class="p-4 bg-zinc-950/50 border border-zinc-800/50 rounded-2xl flex items-center justify-between"
class="p-4 bg-white/70 border border-zinc-200 rounded-2xl flex items-center justify-between"
>
<div class="space-y-1">
<div class="text-[10px] font-black text-zinc-600 uppercase tracking-tighter">
@@ -1089,7 +1089,7 @@
</div>
</div>
<div
class="p-4 bg-zinc-950/50 border border-zinc-800/50 rounded-2xl flex items-center justify-between"
class="p-4 bg-white/70 border border-zinc-200 rounded-2xl flex items-center justify-between"
>
<div class="space-y-1">
<div class="text-[10px] font-black text-zinc-600 uppercase tracking-tighter">
@@ -1113,7 +1113,7 @@
'w-8 h-8 rounded-xl flex items-center justify-center',
selectedUserDetail.meowNickname
? 'bg-emerald-500/10 text-emerald-500'
: 'bg-zinc-800 text-zinc-600'
: 'bg-zinc-100 text-zinc-600'
]"
>
<AtSign :size="16" />
@@ -1133,18 +1133,18 @@
</div>
<div class="space-y-3">
<div
class="flex items-center justify-between text-xs p-3 bg-zinc-950/30 rounded-xl border border-zinc-800/30"
class="flex items-center justify-between text-xs p-3 bg-white/60 rounded-xl border border-zinc-200/30"
>
<span class="text-zinc-500">最后登录</span>
<span class="text-zinc-300 font-medium">{{
<span class="text-zinc-600 font-medium">{{
formatDate(selectedUserDetail.lastLogin)
}}</span>
</div>
<div
class="flex items-center justify-between text-xs p-3 bg-zinc-950/30 rounded-xl border border-zinc-800/30"
class="flex items-center justify-between text-xs p-3 bg-white/60 rounded-xl border border-zinc-200/30"
>
<span class="text-zinc-500">登录 IP</span>
<span class="text-zinc-300 font-medium">{{
<span class="text-zinc-600 font-medium">{{
selectedUserDetail.lastLoginIp || '未知'
}}</span>
</div>
@@ -1159,18 +1159,18 @@
</div>
<div class="space-y-3">
<div
class="flex items-center justify-between text-xs p-3 bg-zinc-950/30 rounded-xl border border-zinc-800/30"
class="flex items-center justify-between text-xs p-3 bg-white/60 rounded-xl border border-zinc-200/30"
>
<span class="text-zinc-500">创建时间</span>
<span class="text-zinc-300 font-medium">{{
<span class="text-zinc-600 font-medium">{{
formatDate(selectedUserDetail.createdAt)
}}</span>
</div>
<div
class="flex items-center justify-between text-xs p-3 bg-zinc-950/30 rounded-xl border border-zinc-800/30"
class="flex items-center justify-between text-xs p-3 bg-white/60 rounded-xl border border-zinc-200/30"
>
<span class="text-zinc-500">最近更新</span>
<span class="text-zinc-300 font-medium">{{
<span class="text-zinc-600 font-medium">{{
formatDate(selectedUserDetail.updatedAt)
}}</span>
</div>
@@ -1201,21 +1201,21 @@
<div
v-else-if="statusLogs.length === 0"
class="py-12 text-center bg-zinc-950/30 border border-zinc-800/50 rounded-3xl"
class="py-12 text-center bg-white/60 border border-zinc-200 rounded-3xl"
>
<p class="text-xs text-zinc-600">暂无状态变更记录</p>
</div>
<div v-else class="space-y-4">
<div
class="relative pl-6 space-y-6 before:absolute before:left-[11px] before:top-2 before:bottom-2 before:w-0.5 before:bg-zinc-800"
class="relative pl-6 space-y-6 before:absolute before:left-[11px] before:top-2 before:bottom-2 before:w-0.5 before:bg-zinc-100"
>
<div v-for="log in statusLogs" :key="log.id" class="relative">
<div
class="absolute -left-[23px] top-1.5 w-3 h-3 rounded-full bg-zinc-900 border-2 border-zinc-700 ring-4 ring-zinc-900"
class="absolute -left-[23px] top-1.5 w-3 h-3 rounded-full bg-white border-2 border-zinc-200 ring-4 ring-zinc-900"
/>
<div
class="p-4 bg-zinc-950/50 border border-zinc-800/50 rounded-2xl space-y-3"
class="p-4 bg-white/70 border border-zinc-200 rounded-2xl space-y-3"
>
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
@@ -1244,7 +1244,7 @@
<div
v-if="log.reason"
class="text-xs text-zinc-400 bg-zinc-900/50 p-2.5 rounded-xl border border-zinc-800/30 leading-relaxed"
class="text-xs text-zinc-400 bg-zinc-50/50 p-2.5 rounded-xl border border-zinc-200/30 leading-relaxed"
>
<span class="text-zinc-600 font-bold mr-1">原因:</span>
{{ log.reason }}
@@ -1252,12 +1252,12 @@
<div class="flex items-center gap-2 text-[10px]">
<div
class="w-4 h-4 rounded-full bg-zinc-800 flex items-center justify-center text-zinc-500"
class="w-4 h-4 rounded-full bg-zinc-100 flex items-center justify-center text-zinc-500"
>
<User :size="8" />
</div>
<span class="text-zinc-500">操作者:</span>
<span class="text-zinc-300 font-bold">{{
<span class="text-zinc-600 font-bold">{{
log.operator?.name || '系统'
}}</span>
</div>
@@ -1277,7 +1277,7 @@
<div class="mt-8">
<button
class="w-full px-6 py-4 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 text-xs font-black rounded-2xl transition-all uppercase tracking-widest"
class="w-full px-6 py-4 bg-zinc-100 hover:bg-zinc-200 text-zinc-600 text-xs font-black rounded-2xl transition-all uppercase tracking-widest"
@click="closeUserDetailModal"
>
关闭窗口