novalon/novalon-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(admin): tokenize remaining admin pages for dark mode

Browse Source 
- 8 个 admin 页面(users/roles/zones/media/notifications/page/content×2)全部 gray→token
- 深色面板 bg-gray-900/800 → bg-dark-bg / bg-dark-bg-secondary(两模式保持深色)
- 深色面板上的文字保留 text-white(固定亮色,两模式可读)
- 遮罩 bg-black/50 → bg-overlay/50(独立 token,不随反色)
- border-t-gray-900 → border-t-border-dark 单独处理
- 验证: type-check 0 / lint 0 / Tailwind 生成确认 token 类产出 / 无 gray- 残留
This commit is contained in:
zhangxiang
2026-08-31 21:46:59 +08:00
parent 860a7f454a
commit 8090ba2b9e
8 changed files with 256 additions and 256 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/admin/users/page.tsx
+54 -54
View File
@@ -49,7 +49,7 @@ const ROLE_COLORS: Record<string, string> = {
content_admin: 'bg-blue-100 text-blue-700',
content_editor: 'bg-green-100 text-green-700',
reviewer: 'bg-amber-100 text-amber-700',
readonly: 'bg-gray-100 text-gray-700',
readonly: 'bg-bg-hover text-text-secondary',
};
export default function UsersPage() {
@@ -232,7 +232,7 @@ export default function UsersPage() {
if (authLoading || (!user && typeof window !== 'undefined')) {
return (
<div className="flex items-center justify-center h-64">
<div className="animate-spin w-8 h-8 border-2 border-gray-900 border-t-transparent rounded-full" />
<div className="animate-spin w-8 h-8 border-2 border-border-dark border-t-transparent rounded-full" />
</div>
);
}
@@ -241,12 +241,12 @@ export default function UsersPage() {
<div className="space-y-6">
<div className="flex items-center justify-between">
<div>
<h1 className="text-xl font-bold text-gray-900">用户管理</h1>
<p className="text-sm text-gray-500 mt-1">管理系统用户与角色分配</p>
<h1 className="text-xl font-bold text-text-primary">用户管理</h1>
<p className="text-sm text-text-muted mt-1">管理系统用户与角色分配</p>
</div>
<button
onClick={openCreateDialog}
className="flex items-center gap-2 px-4 py-2 bg-gray-900 text-white rounded-lg text-sm font-medium hover:bg-gray-800 transition-colors"
className="flex items-center gap-2 px-4 py-2 bg-dark-bg text-white rounded-lg text-sm font-medium hover:bg-dark-bg-secondary transition-colors"
>
<Plus className="w-4 h-4" />
创建用户
@@ -255,13 +255,13 @@ export default function UsersPage() {
{/* Search */}
<div className="relative">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-muted" />
<input
type="text"
placeholder="搜索用户名、昵称或邮箱..."
value={search}
onChange={(e) => { setSearch(e.target.value); setPage(1); }}
className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-200"
className="w-full pl-10 pr-4 py-2 border border-border-primary rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-border-primary"
/>
</div>
@@ -272,54 +272,54 @@ export default function UsersPage() {
)}
{/* Users table */}
<div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
<div className="bg-bg-primary rounded-lg border border-border-primary overflow-hidden">
<div className="overflow-x-auto">
<table className="w-full text-sm">
<thead>
<tr className="border-b border-gray-200 bg-gray-50">
<th className="text-left px-4 py-3 font-medium text-gray-600">用户名</th>
<th className="text-left px-4 py-3 font-medium text-gray-600">昵称</th>
<th className="text-left px-4 py-3 font-medium text-gray-600">邮箱</th>
<th className="text-left px-4 py-3 font-medium text-gray-600">角色</th>
<th className="text-left px-4 py-3 font-medium text-gray-600">状态</th>
<th className="text-left px-4 py-3 font-medium text-gray-600">创建时间</th>
<th className="text-right px-4 py-3 font-medium text-gray-600">操作</th>
<tr className="border-b border-border-primary bg-bg-secondary">
<th className="text-left px-4 py-3 font-medium text-text-tertiary">用户名</th>
<th className="text-left px-4 py-3 font-medium text-text-tertiary">昵称</th>
<th className="text-left px-4 py-3 font-medium text-text-tertiary">邮箱</th>
<th className="text-left px-4 py-3 font-medium text-text-tertiary">角色</th>
<th className="text-left px-4 py-3 font-medium text-text-tertiary">状态</th>
<th className="text-left px-4 py-3 font-medium text-text-tertiary">创建时间</th>
<th className="text-right px-4 py-3 font-medium text-text-tertiary">操作</th>
</tr>
</thead>
<tbody>
{loading ? (
<tr>
<td colSpan={7} className="px-4 py-12 text-center text-gray-400">
<td colSpan={7} className="px-4 py-12 text-center text-text-muted">
<div className="flex items-center justify-center gap-2">
<div className="animate-spin w-4 h-4 border-2 border-gray-400 border-t-transparent rounded-full" />
<div className="animate-spin w-4 h-4 border-2 border-border-secondary border-t-transparent rounded-full" />
加载中...
</div>
</td>
</tr>
) : users.length === 0 ? (
<tr>
<td colSpan={7} className="px-4 py-12 text-center text-gray-400">
<td colSpan={7} className="px-4 py-12 text-center text-text-muted">
暂无用户数据
</td>
</tr>
) : (
users.map((u) => (
<tr key={u.id} className="border-b border-gray-100 hover:bg-gray-50">
<tr key={u.id} className="border-b border-border-light hover:bg-bg-secondary">
<td className="px-4 py-3">
<div className="flex items-center gap-2">
<UserCog className="w-4 h-4 text-gray-400" />
<span className="font-medium text-gray-900">{u.username}</span>
<UserCog className="w-4 h-4 text-text-muted" />
<span className="font-medium text-text-primary">{u.username}</span>
</div>
</td>
<td className="px-4 py-3 text-gray-600">{u.nickname || '-'}</td>
<td className="px-4 py-3 text-text-tertiary">{u.nickname || '-'}</td>
<td className="px-4 py-3">
{u.email ? (
<a href={`mailto:${u.email}`} className="text-gray-600 hover:text-gray-900 flex items-center gap-1">
<a href={`mailto:${u.email}`} className="text-text-tertiary hover:text-text-primary flex items-center gap-1">
<Mail className="w-3 h-3" />
{u.email}
</a>
) : (
<span className="text-gray-400">-</span>
<span className="text-text-muted">-</span>
)}
</td>
<td className="px-4 py-3">
@@ -328,7 +328,7 @@ export default function UsersPage() {
<span
key={r.code}
className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium ${
ROLE_COLORS[r.code] || 'bg-gray-100 text-gray-700'
ROLE_COLORS[r.code] || 'bg-bg-hover text-text-secondary'
}`}
>
<Shield className="w-3 h-3" />
@@ -336,7 +336,7 @@ export default function UsersPage() {
</span>
))}
{u.roles.length === 0 && (
<span className="text-xs text-gray-400">无角色</span>
<span className="text-xs text-text-muted">无角色</span>
)}
</div>
</td>
@@ -351,7 +351,7 @@ export default function UsersPage() {
{u.status === 1 ? '启用' : '禁用'}
</span>
</td>
<td className="px-4 py-3 text-gray-500 text-xs">
<td className="px-4 py-3 text-text-muted text-xs">
<div className="flex items-center gap-1">
<Calendar className="w-3 h-3" />
{new Date(u.createdAt).toLocaleDateString('zh-CN')}
@@ -361,14 +361,14 @@ export default function UsersPage() {
<div className="flex items-center justify-end gap-1">
<button
onClick={() => openEditDialog(u)}
className="p-1.5 rounded hover:bg-gray-100 text-gray-500 hover:text-gray-700"
className="p-1.5 rounded hover:bg-bg-hover text-text-muted hover:text-text-secondary"
title="编辑"
>
<Edit className="w-4 h-4" />
</button>
<button
onClick={() => { setPendingDeleteId(u.id); setDeleteDialogOpen(true); }}
className="p-1.5 rounded hover:bg-red-50 text-gray-500 hover:text-red-600"
className="p-1.5 rounded hover:bg-red-50 text-text-muted hover:text-red-600"
title="删除"
>
<Trash2 className="w-4 h-4" />
@@ -384,22 +384,22 @@ export default function UsersPage() {
{/* Pagination */}
{totalPages > 1 && (
<div className="flex items-center justify-between px-4 py-3 border-t border-gray-200 bg-gray-50">
<span className="text-sm text-gray-500">
<div className="flex items-center justify-between px-4 py-3 border-t border-border-primary bg-bg-secondary">
<span className="text-sm text-text-muted">
共 {total} 条，第 {page}/{totalPages} 页
</span>
<div className="flex items-center gap-2">
<button
onClick={() => setPage((p) => Math.max(1, p - 1))}
disabled={page <= 1}
className="px-3 py-1.5 text-sm rounded border border-gray-200 hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
className="px-3 py-1.5 text-sm rounded border border-border-primary hover:bg-bg-hover disabled:opacity-50 disabled:cursor-not-allowed"
>
上一页
</button>
<button
onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
disabled={page >= totalPages}
className="px-3 py-1.5 text-sm rounded border border-gray-200 hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
className="px-3 py-1.5 text-sm rounded border border-border-primary hover:bg-bg-hover disabled:opacity-50 disabled:cursor-not-allowed"
>
下一页
</button>
@@ -411,71 +411,71 @@ export default function UsersPage() {
{/* Create/Edit Dialog */}
{dialogOpen && (
<div className="fixed inset-0 z-50 flex items-center justify-center">
<div className="fixed inset-0 bg-black/50" onClick={() => setDialogOpen(false)} />
<div className="relative bg-white rounded-lg shadow-xl w-full max-w-md mx-4 p-6">
<h2 className="text-lg font-bold text-gray-900 mb-4">
<div className="fixed inset-0 bg-overlay/50" onClick={() => setDialogOpen(false)} />
<div className="relative bg-bg-primary rounded-lg shadow-xl w-full max-w-md mx-4 p-6">
<h2 className="text-lg font-bold text-text-primary mb-4">
{editingUser ? '编辑用户' : '创建用户'}
</h2>
<div className="space-y-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">用户名</label>
<label className="block text-sm font-medium text-text-secondary mb-1">用户名</label>
<input
type="text"
value={formData.username}
onChange={(e) => setFormData((p) => ({ ...p, username: e.target.value }))}
disabled={!!editingUser}
className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-200 disabled:bg-gray-100 disabled:text-gray-400"
className="w-full px-3 py-2 border border-border-primary rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-border-primary disabled:bg-bg-hover disabled:text-text-muted"
placeholder="3-32 位字母/数字/下划线"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium text-text-secondary mb-1">
{editingUser ? '新密码（留空不修改）' : '密码'}
</label>
<input
type="password"
value={formData.password}
onChange={(e) => setFormData((p) => ({ ...p, password: e.target.value }))}
className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-200"
className="w-full px-3 py-2 border border-border-primary rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-border-primary"
placeholder={editingUser ? '留空保持原密码' : '至少 6 位'}
/>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">昵称</label>
<label className="block text-sm font-medium text-text-secondary mb-1">昵称</label>
<input
type="text"
value={formData.nickname}
onChange={(e) => setFormData((p) => ({ ...p, nickname: e.target.value }))}
className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-200"
className="w-full px-3 py-2 border border-border-primary rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-border-primary"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
<label className="block text-sm font-medium text-text-secondary mb-1">邮箱</label>
<input
type="email"
value={formData.email}
onChange={(e) => setFormData((p) => ({ ...p, email: e.target.value }))}
className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-200"
className="w-full px-3 py-2 border border-border-primary rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-border-primary"
/>
</div>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">手机号</label>
<label className="block text-sm font-medium text-text-secondary mb-1">手机号</label>
<input
type="tel"
value={formData.phone}
onChange={(e) => setFormData((p) => ({ ...p, phone: e.target.value }))}
className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-200"
className="w-full px-3 py-2 border border-border-primary rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-border-primary"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">角色分配</label>
<label className="block text-sm font-medium text-text-secondary mb-2">角色分配</label>
<div className="flex flex-wrap gap-2">
{roles.map((r) => (
<button
@@ -484,31 +484,31 @@ export default function UsersPage() {
onClick={() => toggleRole(r.code)}
className={`px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors ${
formData.roleCodes.includes(r.code)
? 'bg-gray-900 text-white border-gray-900'
: 'bg-white text-gray-600 border-gray-200 hover:border-gray-400'
? 'bg-dark-bg text-white border-border-dark'
: 'bg-bg-primary text-text-tertiary border-border-primary hover:border-border-secondary'
}`}
>
{r.name}
</button>
))}
{roles.length === 0 && (
<span className="text-xs text-gray-400">加载角色中...</span>
<span className="text-xs text-text-muted">加载角色中...</span>
)}
</div>
</div>
</div>
<div className="flex items-center justify-end gap-3 mt-6 pt-4 border-t border-gray-100">
<div className="flex items-center justify-end gap-3 mt-6 pt-4 border-t border-border-light">
<button
onClick={() => setDialogOpen(false)}
className="px-4 py-2 text-sm text-gray-600 hover:text-gray-900"
className="px-4 py-2 text-sm text-text-tertiary hover:text-text-primary"
>
取消
</button>
<button
onClick={handleSave}
disabled={saving}
className="flex items-center gap-2 px-4 py-2 bg-gray-900 text-white rounded-lg text-sm font-medium hover:bg-gray-800 disabled:opacity-50 transition-colors"
className="flex items-center gap-2 px-4 py-2 bg-dark-bg text-white rounded-lg text-sm font-medium hover:bg-dark-bg-secondary disabled:opacity-50 transition-colors"
>
{saving && <div className="animate-spin w-4 h-4 border-2 border-white border-t-transparent rounded-full" />}
{editingUser ? '保存更改' : '创建用户'}