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/content/[modelCode]/[itemId]/page.tsx
+47 -47
View File
@@ -105,8 +105,8 @@ function JsonEditor({
onChange={(e) => handleChange(e.target.value)} onChange={(e) => handleChange(e.target.value)}
placeholder={placeholder || '输入 JSON 数据'} placeholder={placeholder || '输入 JSON 数据'}
rows={10} rows={10}
className={`w-full px-3 py-2 border rounded-lg text-sm font-mono focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-transparent resize-y ${ className={`w-full px-3 py-2 border rounded-lg text-sm font-mono focus:outline-none focus:ring-2 focus:ring-border-dark focus:border-transparent resize-y ${
error || parseError ? 'border-red-300 bg-red-50' : 'border-gray-300' error || parseError ? 'border-red-300 bg-red-50' : 'border-border-secondary'
}`} }`}
spellCheck={false} spellCheck={false}
/> />
@@ -420,12 +420,12 @@ export default function ContentEditorPage() {
case 'text': case 'text':
return ( return (
<div key={key}> <div key={key}>
<label htmlFor={key} className="block text-sm font-medium text-gray-700 mb-1"> <label htmlFor={key} className="block text-sm font-medium text-text-secondary mb-1">
{field.label} {field.label}
{field.required && <span className="text-red-500 ml-1">*</span>} {field.required && <span className="text-red-500 ml-1">*</span>}
</label> </label>
{field.description && ( {field.description && (
<p className="text-xs text-gray-400 mb-1.5">{field.description}</p> <p className="text-xs text-text-muted mb-1.5">{field.description}</p>
)} )}
<input <input
id={key} id={key}
@@ -434,8 +434,8 @@ export default function ContentEditorPage() {
onChange={(e) => handleFieldChange(field.name, e.target.value)} onChange={(e) => handleFieldChange(field.name, e.target.value)}
onBlur={() => handleFieldBlur(field.name)} onBlur={() => handleFieldBlur(field.name)}
placeholder={field.placeholder} placeholder={field.placeholder}
className={`w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-transparent ${ className={`w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-border-dark focus:border-transparent ${
error ? 'border-red-300 bg-red-50' : 'border-gray-300' error ? 'border-red-300 bg-red-50' : 'border-border-secondary'
}`} }`}
/> />
<FieldError error={error} /> <FieldError error={error} />
@@ -445,12 +445,12 @@ export default function ContentEditorPage() {
case 'textarea': case 'textarea':
return ( return (
<div key={key}> <div key={key}>
<label htmlFor={key} className="block text-sm font-medium text-gray-700 mb-1"> <label htmlFor={key} className="block text-sm font-medium text-text-secondary mb-1">
{field.label} {field.label}
{field.required && <span className="text-red-500 ml-1">*</span>} {field.required && <span className="text-red-500 ml-1">*</span>}
</label> </label>
{field.description && ( {field.description && (
<p className="text-xs text-gray-400 mb-1.5">{field.description}</p> <p className="text-xs text-text-muted mb-1.5">{field.description}</p>
)} )}
<textarea <textarea
id={key} id={key}
@@ -459,8 +459,8 @@ export default function ContentEditorPage() {
onBlur={() => handleFieldBlur(field.name)} onBlur={() => handleFieldBlur(field.name)}
placeholder={field.placeholder} placeholder={field.placeholder}
rows={4} rows={4}
className={`w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-transparent resize-y ${ className={`w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-border-dark focus:border-transparent resize-y ${
error ? 'border-red-300 bg-red-50' : 'border-gray-300' error ? 'border-red-300 bg-red-50' : 'border-border-secondary'
}`} }`}
/> />
<FieldError error={error} /> <FieldError error={error} />
@@ -470,7 +470,7 @@ export default function ContentEditorPage() {
case 'number': case 'number':
return ( return (
<div key={key}> <div key={key}>
<label htmlFor={key} className="block text-sm font-medium text-gray-700 mb-1"> <label htmlFor={key} className="block text-sm font-medium text-text-secondary mb-1">
{field.label} {field.label}
{field.required && <span className="text-red-500 ml-1">*</span>} {field.required && <span className="text-red-500 ml-1">*</span>}
</label> </label>
@@ -479,8 +479,8 @@ export default function ContentEditorPage() {
type="number" type="number"
value={(value as number) ?? ''} value={(value as number) ?? ''}
onChange={(e) => handleFieldChange(field.name, parseFloat(e.target.value) || 0)} onChange={(e) => handleFieldChange(field.name, parseFloat(e.target.value) || 0)}
className={`w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-transparent ${ className={`w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-border-dark focus:border-transparent ${
error ? 'border-red-300 bg-red-50' : 'border-gray-300' error ? 'border-red-300 bg-red-50' : 'border-border-secondary'
}`} }`}
/> />
<FieldError error={error} /> <FieldError error={error} />
@@ -495,11 +495,11 @@ export default function ContentEditorPage() {
type="checkbox" type="checkbox"
checked={!!value} checked={!!value}
onChange={(e) => handleFieldChange(field.name, e.target.checked)} onChange={(e) => handleFieldChange(field.name, e.target.checked)}
className="w-4 h-4 rounded border-gray-300 text-gray-900 focus:ring-gray-900" className="w-4 h-4 rounded border-border-secondary text-text-primary focus:ring-border-dark"
/> />
<label htmlFor={key} className="text-sm font-medium text-gray-700">{field.label}</label> <label htmlFor={key} className="text-sm font-medium text-text-secondary">{field.label}</label>
{field.description && ( {field.description && (
<span className="text-xs text-gray-400">{field.description}</span> <span className="text-xs text-text-muted">{field.description}</span>
)} )}
</div> </div>
); );
@@ -508,14 +508,14 @@ export default function ContentEditorPage() {
case 'dropdown': case 'dropdown':
return ( return (
<div key={key}> <div key={key}>
<label htmlFor={key} className="block text-sm font-medium text-gray-700 mb-1"> <label htmlFor={key} className="block text-sm font-medium text-text-secondary mb-1">
{field.label} {field.label}
</label> </label>
<select <select
id={key} id={key}
value={(value as string) || ''} value={(value as string) || ''}
onChange={(e) => handleFieldChange(field.name, e.target.value)} onChange={(e) => handleFieldChange(field.name, e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-transparent" className="w-full px-3 py-2 border border-border-secondary rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-border-dark focus:border-transparent"
> >
<option value="">请选择</option> <option value="">请选择</option>
{field.options?.map((opt) => ( {field.options?.map((opt) => (
@@ -530,12 +530,12 @@ export default function ContentEditorPage() {
case 'json': case 'json':
return ( return (
<div key={key}> <div key={key}>
<label htmlFor={key} className="block text-sm font-medium text-gray-700 mb-1"> <label htmlFor={key} className="block text-sm font-medium text-text-secondary mb-1">
{field.label} {field.label}
{field.required && <span className="text-red-500 ml-1">*</span>} {field.required && <span className="text-red-500 ml-1">*</span>}
</label> </label>
{field.description && ( {field.description && (
<p className="text-xs text-gray-400 mb-1.5">{field.description}</p> <p className="text-xs text-text-muted mb-1.5">{field.description}</p>
)} )}
<JsonEditor <JsonEditor
id={key} id={key}
@@ -550,7 +550,7 @@ export default function ContentEditorPage() {
case 'image': case 'image':
return ( return (
<div key={key}> <div key={key}>
<label htmlFor={key} className="block text-sm font-medium text-gray-700 mb-1"> <label htmlFor={key} className="block text-sm font-medium text-text-secondary mb-1">
{field.label} {field.label}
</label> </label>
<input <input
@@ -559,13 +559,13 @@ export default function ContentEditorPage() {
value={(value as string) || ''} value={(value as string) || ''}
onChange={(e) => handleFieldChange(field.name, e.target.value)} onChange={(e) => handleFieldChange(field.name, e.target.value)}
placeholder="输入图片 URL 或从媒体库选择" placeholder="输入图片 URL 或从媒体库选择"
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-transparent" className="w-full px-3 py-2 border border-border-secondary rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-border-dark focus:border-transparent"
/> />
{!!value && ( {!!value && (
<img <img
src={String(value)} src={String(value)}
alt="预览" alt="预览"
className="mt-2 max-h-32 rounded border border-gray-200" className="mt-2 max-h-32 rounded border border-border-primary"
/> />
)} )}
</div> </div>
@@ -574,8 +574,8 @@ export default function ContentEditorPage() {
case 'array': case 'array':
case 'object': case 'object':
return ( return (
<fieldset key={key} className="border border-gray-200 rounded-lg p-4"> <fieldset key={key} className="border border-border-primary rounded-lg p-4">
<legend className="text-sm font-medium text-gray-700 mb-3 px-1"> <legend className="text-sm font-medium text-text-secondary mb-3 px-1">
{field.label} {field.label}
</legend> </legend>
{field.fields?.map((subField) => renderField(subField, `${field.name}.`))} {field.fields?.map((subField) => renderField(subField, `${field.name}.`))}
@@ -585,7 +585,7 @@ export default function ContentEditorPage() {
default: default:
return ( return (
<div key={key}> <div key={key}>
<label htmlFor={key} className="block text-sm font-medium text-gray-700 mb-1"> <label htmlFor={key} className="block text-sm font-medium text-text-secondary mb-1">
{field.label} {field.label}
</label> </label>
<input <input
@@ -593,7 +593,7 @@ export default function ContentEditorPage() {
type="text" type="text"
value={(value as string) || ''} value={(value as string) || ''}
onChange={(e) => handleFieldChange(field.name, e.target.value)} onChange={(e) => handleFieldChange(field.name, e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-transparent" className="w-full px-3 py-2 border border-border-secondary rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-border-dark focus:border-transparent"
/> />
</div> </div>
); );
@@ -603,7 +603,7 @@ export default function ContentEditorPage() {
if (authLoading || loading) { if (authLoading || loading) {
return ( return (
<div className="flex items-center justify-center h-64"> <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> </div>
); );
} }
@@ -620,15 +620,15 @@ export default function ContentEditorPage() {
} }
router.push(`/admin/content/${modelCode}`); router.push(`/admin/content/${modelCode}`);
}} }}
className="p-2 rounded hover:bg-gray-100 transition-colors" className="p-2 rounded hover:bg-bg-hover transition-colors"
> >
<ArrowLeft className="w-5 h-5" /> <ArrowLeft className="w-5 h-5" />
</button> </button>
<div> <div>
<h1 className="text-xl font-bold text-gray-900"> <h1 className="text-xl font-bold text-text-primary">
{isNew ? `新增${modelLabel}` : `编辑${modelLabel}`} {isNew ? `新增${modelLabel}` : `编辑${modelLabel}`}
</h1> </h1>
<p className="text-sm text-gray-500 mt-1">{model?.name}</p> <p className="text-sm text-text-muted mt-1">{model?.name}</p>
</div> </div>
</div> </div>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
@@ -646,7 +646,7 @@ export default function ContentEditorPage() {
<CheckCircle className="w-3 h-3" /> <CheckCircle className="w-3 h-3" />
已保存 已保存
{lastSaved && ( {lastSaved && (
<span className="text-gray-400"> <span className="text-text-muted">
{lastSaved.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })} {lastSaved.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })}
</span> </span>
)} )}
@@ -659,7 +659,7 @@ export default function ContentEditorPage() {
</span> </span>
)} )}
{autoSaveStatus === 'idle' && ( {autoSaveStatus === 'idle' && (
<span className="text-gray-400 flex items-center gap-1"> <span className="text-text-muted flex items-center gap-1">
<Cloud className="w-3 h-3" /> <Cloud className="w-3 h-3" />
</span> </span>
)} )}
@@ -671,7 +671,7 @@ export default function ContentEditorPage() {
<button <button
onClick={handleSaveOnly} onClick={handleSaveOnly}
disabled={saving} disabled={saving}
className="flex items-center gap-2 px-3 py-2 border border-gray-300 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-50 disabled:opacity-50 transition-colors" className="flex items-center gap-2 px-3 py-2 border border-border-secondary text-text-secondary rounded-lg text-sm font-medium hover:bg-bg-secondary disabled:opacity-50 transition-colors"
> >
<Save className="w-4 h-4" /> <Save className="w-4 h-4" />
保存 保存
@@ -698,7 +698,7 @@ export default function ContentEditorPage() {
<button <button
onClick={handleSaveAndBack} onClick={handleSaveAndBack}
disabled={saving} disabled={saving}
className="flex items-center gap-2 bg-gray-900 text-white rounded-lg px-4 py-2 text-sm font-medium hover:bg-gray-800 disabled:opacity-50 transition-colors" className="flex items-center gap-2 bg-dark-bg text-white rounded-lg px-4 py-2 text-sm font-medium hover:bg-dark-bg-secondary disabled:opacity-50 transition-colors"
> >
<Save className="w-4 h-4" /> <Save className="w-4 h-4" />
{saving ? '保存中...' : isNew ? '创建' : '保存并返回'} {saving ? '保存中...' : isNew ? '创建' : '保存并返回'}
@@ -728,10 +728,10 @@ export default function ContentEditorPage() {
)} )}
{/* Form */} {/* Form */}
<div className="bg-white rounded-lg border border-gray-200 p-6 space-y-5"> <div className="bg-bg-primary rounded-lg border border-border-primary p-6 space-y-5">
{/* 标题 */} {/* 标题 */}
<div> <div>
<label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-1"> <label htmlFor="title" className="block text-sm font-medium text-text-secondary mb-1">
标题 <span className="text-red-500">*</span> 标题 <span className="text-red-500">*</span>
</label> </label>
<input <input
@@ -752,8 +752,8 @@ export default function ContentEditorPage() {
} }
}} }}
placeholder="请输入标题" placeholder="请输入标题"
className={`w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-transparent ${ className={`w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-border-dark focus:border-transparent ${
validationErrors.title ? 'border-red-300 bg-red-50' : 'border-gray-300' validationErrors.title ? 'border-red-300 bg-red-50' : 'border-border-secondary'
}`} }`}
/> />
<FieldError error={validationErrors.title} /> <FieldError error={validationErrors.title} />
@@ -761,7 +761,7 @@ export default function ContentEditorPage() {
{/* Slug */} {/* Slug */}
<div> <div>
<label htmlFor="slug" className="block text-sm font-medium text-gray-700 mb-1">Slug</label> <label htmlFor="slug" className="block text-sm font-medium text-text-secondary mb-1">Slug</label>
<input <input
id="slug" id="slug"
type="text" type="text"
@@ -783,8 +783,8 @@ export default function ContentEditorPage() {
} }
}} }}
placeholder="URL 友好标识（留空自动生成）" placeholder="URL 友好标识（留空自动生成）"
className={`w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-transparent ${ className={`w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-border-dark focus:border-transparent ${
validationErrors.slug ? 'border-red-300 bg-red-50' : 'border-gray-300' validationErrors.slug ? 'border-red-300 bg-red-50' : 'border-border-secondary'
}`} }`}
/> />
<FieldError error={validationErrors.slug} /> <FieldError error={validationErrors.slug} />
@@ -792,12 +792,12 @@ export default function ContentEditorPage() {
{/* 状态 */} {/* 状态 */}
<div> <div>
<label htmlFor="status" className="block text-sm font-medium text-gray-700 mb-1">状态</label> <label htmlFor="status" className="block text-sm font-medium text-text-secondary mb-1">状态</label>
<select <select
id="status" id="status"
value={status} value={status}
onChange={(e) => setStatus(e.target.value)} onChange={(e) => setStatus(e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-transparent" className="w-full px-3 py-2 border border-border-secondary rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-border-dark focus:border-transparent"
> >
<option value="draft">草稿</option> <option value="draft">草稿</option>
<option value="published">已发布</option> <option value="published">已发布</option>
@@ -811,7 +811,7 @@ export default function ContentEditorPage() {
{/* Bottom actions */} {/* Bottom actions */}
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-2 text-xs text-gray-400"> <div className="flex items-center gap-2 text-xs text-text-muted">
<FileText className="w-3.5 h-3.5" /> <FileText className="w-3.5 h-3.5" />
{modelCode} / {isNew ? '新建' : itemId} {modelCode} / {isNew ? '新建' : itemId}
</div> </div>
@@ -821,7 +821,7 @@ export default function ContentEditorPage() {
<button <button
onClick={handleSaveOnly} onClick={handleSaveOnly}
disabled={saving} disabled={saving}
className="flex items-center gap-2 px-4 py-2.5 border border-gray-300 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-50 disabled:opacity-50 transition-colors" className="flex items-center gap-2 px-4 py-2.5 border border-border-secondary text-text-secondary rounded-lg text-sm font-medium hover:bg-bg-secondary disabled:opacity-50 transition-colors"
> >
<Save className="w-4 h-4" /> <Save className="w-4 h-4" />
保存 保存
@@ -832,7 +832,7 @@ export default function ContentEditorPage() {
<button <button
onClick={handleSaveAndBack} onClick={handleSaveAndBack}
disabled={saving} disabled={saving}
className="flex items-center gap-2 bg-gray-900 text-white rounded-lg px-6 py-2.5 text-sm font-medium hover:bg-gray-800 disabled:opacity-50 transition-colors" className="flex items-center gap-2 bg-dark-bg text-white rounded-lg px-6 py-2.5 text-sm font-medium hover:bg-dark-bg-secondary disabled:opacity-50 transition-colors"
> >
<Save className="w-4 h-4" /> <Save className="w-4 h-4" />
{saving ? '保存中...' : isNew ? '创建' : '保存并返回'} {saving ? '保存中...' : isNew ? '创建' : '保存并返回'}
src/app/admin/content/[modelCode]/page.tsx
+28 -28
View File
@@ -109,7 +109,7 @@ export default function ContentListPage() {
if (authLoading || (!user && typeof window !== 'undefined')) { if (authLoading || (!user && typeof window !== 'undefined')) {
return ( return (
<div className="flex items-center justify-center h-64"> <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> </div>
); );
} }
@@ -119,12 +119,12 @@ export default function ContentListPage() {
{/* Header */} {/* Header */}
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<h1 className="text-xl font-bold text-gray-900">{modelLabel}</h1> <h1 className="text-xl font-bold text-text-primary">{modelLabel}</h1>
<p className="text-sm text-gray-500 mt-1">共 {total} 条内容</p> <p className="text-sm text-text-muted mt-1">共 {total} 条内容</p>
</div> </div>
<button <button
onClick={() => router.push(`/admin/content/${modelCode}/new`)} onClick={() => router.push(`/admin/content/${modelCode}/new`)}
className="flex items-center gap-2 bg-gray-900 text-white rounded-lg px-4 py-2 text-sm font-medium hover:bg-gray-800 transition-colors" className="flex items-center gap-2 bg-dark-bg text-white rounded-lg px-4 py-2 text-sm font-medium hover:bg-dark-bg-secondary transition-colors"
> >
<Plus className="w-4 h-4" /> <Plus className="w-4 h-4" />
新增 新增
@@ -134,13 +134,13 @@ export default function ContentListPage() {
{/* Search */} {/* Search */}
<div className="flex gap-3"> <div className="flex gap-3">
<div className="relative flex-1 max-w-md"> <div className="relative flex-1 max-w-md">
<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 <input
type="text" type="text"
value={search} value={search}
onChange={(e) => { setSearch(e.target.value); setPage(1); }} onChange={(e) => { setSearch(e.target.value); setPage(1); }}
placeholder={`搜索${modelLabel}...`} placeholder={`搜索${modelLabel}...`}
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-transparent" className="w-full pl-10 pr-4 py-2 border border-border-secondary rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-border-dark focus:border-transparent"
/> />
</div> </div>
</div> </div>
@@ -153,41 +153,41 @@ export default function ContentListPage() {
)} )}
{/* Table */} {/* 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"> <div className="overflow-x-auto">
<table className="w-full"> <table className="w-full">
<thead> <thead>
<tr className="border-b border-gray-200 bg-gray-50"> <tr className="border-b border-border-primary bg-bg-secondary">
<th className="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase">标题</th> <th className="text-left px-4 py-3 text-xs font-medium text-text-muted uppercase">标题</th>
<th className="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase">Slug</th> <th className="text-left px-4 py-3 text-xs font-medium text-text-muted uppercase">Slug</th>
<th className="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase">状态</th> <th className="text-left px-4 py-3 text-xs font-medium text-text-muted uppercase">状态</th>
<th className="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase">更新时间</th> <th className="text-left px-4 py-3 text-xs font-medium text-text-muted uppercase">更新时间</th>
<th className="text-right px-4 py-3 text-xs font-medium text-gray-500 uppercase">操作</th> <th className="text-right px-4 py-3 text-xs font-medium text-text-muted uppercase">操作</th>
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-gray-100"> <tbody className="divide-y divide-border-light">
{loading ? ( {loading ? (
<tr> <tr>
<td colSpan={5} className="px-4 py-12 text-center text-gray-400"> <td colSpan={5} className="px-4 py-12 text-center text-text-muted">
<div className="flex justify-center"> <div className="flex justify-center">
<div className="animate-spin w-6 h-6 border-2 border-gray-300 border-t-gray-900 rounded-full" /> <div className="animate-spin w-6 h-6 border-2 border-border-secondary border-t-border-dark rounded-full" />
</div> </div>
</td> </td>
</tr> </tr>
) : items.length === 0 ? ( ) : items.length === 0 ? (
<tr> <tr>
<td colSpan={5} className="px-4 py-12 text-center text-gray-400"> <td colSpan={5} className="px-4 py-12 text-center text-text-muted">
暂无数据 暂无数据
</td> </td>
</tr> </tr>
) : ( ) : (
items.map((item) => ( items.map((item) => (
<tr key={item.id} className="hover:bg-gray-50 transition-colors"> <tr key={item.id} className="hover:bg-bg-secondary transition-colors">
<td className="px-4 py-3"> <td className="px-4 py-3">
<span className="text-sm font-medium text-gray-900">{item.title}</span> <span className="text-sm font-medium text-text-primary">{item.title}</span>
</td> </td>
<td className="px-4 py-3"> <td className="px-4 py-3">
<code className="text-xs text-gray-500 bg-gray-100 px-1.5 py-0.5 rounded"> <code className="text-xs text-text-muted bg-bg-hover px-1.5 py-0.5 rounded">
{item.slug || '-'} {item.slug || '-'}
</code> </code>
</td> </td>
@@ -198,27 +198,27 @@ export default function ContentListPage() {
? 'bg-green-50 text-green-700' ? 'bg-green-50 text-green-700'
: item.status === 'draft' : item.status === 'draft'
? 'bg-yellow-50 text-yellow-700' ? 'bg-yellow-50 text-yellow-700'
: 'bg-gray-100 text-gray-600' : 'bg-bg-hover text-text-tertiary'
}`} }`}
> >
{item.status === 'published' ? '已发布' : item.status === 'draft' ? '草稿' : '已归档'} {item.status === 'published' ? '已发布' : item.status === 'draft' ? '草稿' : '已归档'}
</span> </span>
</td> </td>
<td className="px-4 py-3 text-sm text-gray-500"> <td className="px-4 py-3 text-sm text-text-muted">
{item.updatedAt ? new Date(item.updatedAt).toLocaleDateString('zh-CN') : '-'} {item.updatedAt ? new Date(item.updatedAt).toLocaleDateString('zh-CN') : '-'}
</td> </td>
<td className="px-4 py-3"> <td className="px-4 py-3">
<div className="flex items-center justify-end gap-2"> <div className="flex items-center justify-end gap-2">
<button <button
onClick={() => router.push(`/admin/content/${modelCode}/${item.id}`)} onClick={() => router.push(`/admin/content/${modelCode}/${item.id}`)}
className="p-1.5 rounded hover:bg-gray-100 text-gray-400 hover:text-gray-600 transition-colors" className="p-1.5 rounded hover:bg-bg-hover text-text-muted hover:text-text-tertiary transition-colors"
title="编辑" title="编辑"
> >
<Edit className="w-4 h-4" /> <Edit className="w-4 h-4" />
</button> </button>
<button <button
onClick={() => openDeleteDialog(item.id)} onClick={() => openDeleteDialog(item.id)}
className="p-1.5 rounded hover:bg-red-50 text-gray-400 hover:text-red-500 transition-colors" className="p-1.5 rounded hover:bg-red-50 text-text-muted hover:text-red-500 transition-colors"
title="删除" title="删除"
> >
<Trash2 className="w-4 h-4" /> <Trash2 className="w-4 h-4" />
@@ -234,22 +234,22 @@ export default function ContentListPage() {
{/* Pagination */} {/* Pagination */}
{totalPages > 1 && ( {totalPages > 1 && (
<div className="flex items-center justify-between px-4 py-3 border-t border-gray-200"> <div className="flex items-center justify-between px-4 py-3 border-t border-border-primary">
<span className="text-sm text-gray-500"> <span className="text-sm text-text-muted">
第 {page} / {totalPages} 页 第 {page} / {totalPages} 页
</span> </span>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<button <button
onClick={() => setPage((p) => Math.max(1, p - 1))} onClick={() => setPage((p) => Math.max(1, p - 1))}
disabled={page <= 1} disabled={page <= 1}
className="p-1.5 rounded hover:bg-gray-100 disabled:opacity-30 disabled:cursor-not-allowed" className="p-1.5 rounded hover:bg-bg-hover disabled:opacity-30 disabled:cursor-not-allowed"
> >
<ChevronLeft className="w-4 h-4" /> <ChevronLeft className="w-4 h-4" />
</button> </button>
<button <button
onClick={() => setPage((p) => Math.min(totalPages, p + 1))} onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
disabled={page >= totalPages} disabled={page >= totalPages}
className="p-1.5 rounded hover:bg-gray-100 disabled:opacity-30 disabled:cursor-not-allowed" className="p-1.5 rounded hover:bg-bg-hover disabled:opacity-30 disabled:cursor-not-allowed"
> >
<ChevronRight className="w-4 h-4" /> <ChevronRight className="w-4 h-4" />
</button> </button>
src/app/admin/media/page.tsx
+18 -18
View File
@@ -113,7 +113,7 @@ export default function MediaPage() {
if (authLoading || loading) { if (authLoading || loading) {
return ( return (
<div className="flex items-center justify-center h-64"> <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> </div>
); );
} }
@@ -122,10 +122,10 @@ export default function MediaPage() {
<div className="space-y-6"> <div className="space-y-6">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<h1 className="text-xl font-bold text-gray-900">媒体库</h1> <h1 className="text-xl font-bold text-text-primary">媒体库</h1>
<p className="text-sm text-gray-500 mt-1">共 {items.length} 个文件</p> <p className="text-sm text-text-muted mt-1">共 {items.length} 个文件</p>
</div> </div>
<label className="flex items-center gap-2 bg-gray-900 text-white rounded-lg px-4 py-2 text-sm font-medium hover:bg-gray-800 cursor-pointer transition-colors"> <label className="flex items-center gap-2 bg-dark-bg text-white rounded-lg px-4 py-2 text-sm font-medium hover:bg-dark-bg-secondary cursor-pointer transition-colors">
<Upload className="w-4 h-4" /> <Upload className="w-4 h-4" />
{uploading ? '上传中...' : '上传文件'} {uploading ? '上传中...' : '上传文件'}
<input <input
@@ -142,10 +142,10 @@ export default function MediaPage() {
{items.map((item) => ( {items.map((item) => (
<div <div
key={item.id} key={item.id}
className="bg-white rounded-lg border border-gray-200 overflow-hidden group hover:shadow-md transition-shadow" className="bg-bg-primary rounded-lg border border-border-primary overflow-hidden group hover:shadow-md transition-shadow"
> >
{isImage(item.mimeType) ? ( {isImage(item.mimeType) ? (
<div className="aspect-square bg-gray-100 flex items-center justify-center overflow-hidden"> <div className="aspect-square bg-bg-hover flex items-center justify-center overflow-hidden">
<img <img
src={item.url} src={item.url}
alt={item.name} alt={item.name}
@@ -153,22 +153,22 @@ export default function MediaPage() {
/> />
</div> </div>
) : ( ) : (
<div className="aspect-square bg-gray-100 flex items-center justify-center"> <div className="aspect-square bg-bg-hover flex items-center justify-center">
<File className="w-8 h-8 text-gray-400" /> <File className="w-8 h-8 text-text-muted" />
</div> </div>
)} )}
<div className="p-2"> <div className="p-2">
<p className="text-xs text-gray-700 truncate" title={item.name}> <p className="text-xs text-text-secondary truncate" title={item.name}>
{item.name} {item.name}
</p> </p>
<p className="text-xs text-gray-400 mt-0.5">{formatSize(item.size)}</p> <p className="text-xs text-text-muted mt-0.5">{formatSize(item.size)}</p>
</div> </div>
<div className="flex border-t border-gray-100"> <div className="flex border-t border-border-light">
<button <button
onClick={() => handleCopyUrl(item.url, item.id)} onClick={() => handleCopyUrl(item.url, item.id)}
className="flex-1 flex items-center justify-center gap-1 py-1.5 text-xs text-gray-500 hover:bg-gray-50 transition-colors" className="flex-1 flex items-center justify-center gap-1 py-1.5 text-xs text-text-muted hover:bg-bg-secondary transition-colors"
title="复制链接" title="复制链接"
> >
{copiedId === item.id ? ( {copiedId === item.id ? (
@@ -180,7 +180,7 @@ export default function MediaPage() {
</button> </button>
<button <button
onClick={() => openDeleteDialog(item.id)} onClick={() => openDeleteDialog(item.id)}
className="flex-1 flex items-center justify-center gap-1 py-1.5 text-xs text-gray-500 hover:bg-red-50 hover:text-red-500 transition-colors" className="flex-1 flex items-center justify-center gap-1 py-1.5 text-xs text-text-muted hover:bg-red-50 hover:text-red-500 transition-colors"
title="删除" title="删除"
> >
<Trash2 className="w-3 h-3" /> <Trash2 className="w-3 h-3" />
@@ -192,12 +192,12 @@ export default function MediaPage() {
</div> </div>
{items.length === 0 && !loading && ( {items.length === 0 && !loading && (
<div className="text-center py-16 bg-white rounded-lg border border-dashed border-gray-300"> <div className="text-center py-16 bg-bg-primary rounded-lg border border-dashed border-border-secondary">
{/* eslint-disable-next-line jsx-a11y/alt-text -- lucide Image 图标（装饰性 SVG，非 <img>），aria-hidden 表明装饰意图 */} {/* eslint-disable-next-line jsx-a11y/alt-text -- lucide Image 图标（装饰性 SVG，非 <img>），aria-hidden 表明装饰意图 */}
<Image aria-hidden="true" className="w-12 h-12 mx-auto mb-4 text-gray-300" /> <Image aria-hidden="true" className="w-12 h-12 mx-auto mb-4 text-text-muted" />
<h3 className="text-sm font-medium text-gray-900 mb-1">暂无媒体文件</h3> <h3 className="text-sm font-medium text-text-primary mb-1">暂无媒体文件</h3>
<p className="text-sm text-gray-500 mb-4">上传图片、文档等资源，即可在内容编辑中使用</p> <p className="text-sm text-text-muted mb-4">上传图片、文档等资源，即可在内容编辑中使用</p>
<label className="inline-flex items-center gap-2 bg-gray-900 text-white rounded-lg px-4 py-2 text-sm font-medium hover:bg-gray-800 cursor-pointer transition-colors"> <label className="inline-flex items-center gap-2 bg-dark-bg text-white rounded-lg px-4 py-2 text-sm font-medium hover:bg-dark-bg-secondary cursor-pointer transition-colors">
<Upload className="w-4 h-4" /> <Upload className="w-4 h-4" />
上传文件 上传文件
<input <input
src/app/admin/notifications/page.tsx
+26 -26
View File
@@ -41,14 +41,14 @@ const NOTIFICATION_TYPE_ICONS: Record<string, React.ReactNode> = {
review_pending: <AlertCircle className="w-4 h-4 text-amber-500" />, review_pending: <AlertCircle className="w-4 h-4 text-amber-500" />,
review_approved: <CheckCircle className="w-4 h-4 text-green-500" />, review_approved: <CheckCircle className="w-4 h-4 text-green-500" />,
review_rejected: <XCircle className="w-4 h-4 text-red-500" />, review_rejected: <XCircle className="w-4 h-4 text-red-500" />,
item_archived: <Archive className="w-4 h-4 text-gray-500" />, item_archived: <Archive className="w-4 h-4 text-text-muted" />,
}; };
const NOTIFICATION_TYPE_COLORS: Record<string, string> = { const NOTIFICATION_TYPE_COLORS: Record<string, string> = {
review_pending: 'bg-amber-50 border-amber-200', review_pending: 'bg-amber-50 border-amber-200',
review_approved: 'bg-green-50 border-green-200', review_approved: 'bg-green-50 border-green-200',
review_rejected: 'bg-red-50 border-red-200', review_rejected: 'bg-red-50 border-red-200',
item_archived: 'bg-gray-50 border-gray-200', item_archived: 'bg-bg-secondary border-border-primary',
}; };
export default function NotificationsPage() { export default function NotificationsPage() {
@@ -143,7 +143,7 @@ export default function NotificationsPage() {
if (authLoading || (!user && typeof window !== 'undefined')) { if (authLoading || (!user && typeof window !== 'undefined')) {
return ( return (
<div className="flex items-center justify-center h-64"> <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> </div>
); );
} }
@@ -152,8 +152,8 @@ export default function NotificationsPage() {
<div className="space-y-6"> <div className="space-y-6">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<h1 className="text-xl font-bold text-gray-900">通知中心</h1> <h1 className="text-xl font-bold text-text-primary">通知中心</h1>
<p className="text-sm text-gray-500 mt-1"> <p className="text-sm text-text-muted mt-1">
共 {total} 条通知 共 {total} 条通知
{unreadCount > 0 && ( {unreadCount > 0 && (
<span className="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-700"> <span className="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-700">
@@ -167,8 +167,8 @@ export default function NotificationsPage() {
onClick={() => { setUnreadOnly(!unreadOnly); setPage(1); }} onClick={() => { setUnreadOnly(!unreadOnly); setPage(1); }}
className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium border transition-colors ${ className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium border transition-colors ${
unreadOnly unreadOnly
? 'bg-gray-900 text-white border-gray-900' ? 'bg-dark-bg text-white border-border-dark'
: 'bg-white text-gray-600 border-gray-200 hover:border-gray-400' : 'bg-bg-primary text-text-tertiary border-border-primary hover:border-border-secondary'
}`} }`}
> >
<Mail className="w-4 h-4" /> <Mail className="w-4 h-4" />
@@ -177,7 +177,7 @@ export default function NotificationsPage() {
{unreadCount > 0 && ( {unreadCount > 0 && (
<button <button
onClick={handleMarkAllAsRead} onClick={handleMarkAllAsRead}
className="flex items-center gap-2 px-3 py-2 bg-white text-gray-600 rounded-lg text-sm font-medium border border-gray-200 hover:border-gray-400 transition-colors" className="flex items-center gap-2 px-3 py-2 bg-bg-primary text-text-tertiary rounded-lg text-sm font-medium border border-border-primary hover:border-border-secondary transition-colors"
> >
<CheckCheck className="w-4 h-4" /> <CheckCheck className="w-4 h-4" />
全部已读 全部已读
@@ -185,7 +185,7 @@ export default function NotificationsPage() {
)} )}
<button <button
onClick={() => { fetchNotifications(); fetchUnreadCount(); }} onClick={() => { fetchNotifications(); fetchUnreadCount(); }}
className="flex items-center gap-2 px-3 py-2 bg-white text-gray-600 rounded-lg text-sm font-medium border border-gray-200 hover:border-gray-400 transition-colors" className="flex items-center gap-2 px-3 py-2 bg-bg-primary text-text-tertiary rounded-lg text-sm font-medium border border-border-primary hover:border-border-secondary transition-colors"
> >
<RefreshCw className="w-4 h-4" /> <RefreshCw className="w-4 h-4" />
刷新 刷新
@@ -202,18 +202,18 @@ export default function NotificationsPage() {
{/* Notifications list */} {/* Notifications list */}
<div className="space-y-2"> <div className="space-y-2">
{loading ? ( {loading ? (
<div className="flex items-center justify-center py-12 text-gray-400"> <div className="flex items-center justify-center py-12 text-text-muted">
<div className="flex items-center gap-2"> <div className="flex items-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> </div>
</div> </div>
) : notifications.length === 0 ? ( ) : notifications.length === 0 ? (
<div className="flex flex-col items-center justify-center py-16 text-gray-400"> <div className="flex flex-col items-center justify-center py-16 text-text-muted">
<Bell className="w-12 h-12 mb-3 text-gray-200" /> <Bell className="w-12 h-12 mb-3 text-text-muted" />
<p className="text-sm">暂无通知</p> <p className="text-sm">暂无通知</p>
{unreadOnly && ( {unreadOnly && (
<p className="text-xs text-gray-300 mt-1">没有未读通知，试试查看全部</p> <p className="text-xs text-text-muted mt-1">没有未读通知，试试查看全部</p>
)} )}
</div> </div>
) : ( ) : (
@@ -222,7 +222,7 @@ export default function NotificationsPage() {
key={item.id} key={item.id}
className={`relative flex items-start gap-4 p-4 rounded-lg border transition-colors ${ className={`relative flex items-start gap-4 p-4 rounded-lg border transition-colors ${
item.read item.read
? 'bg-white border-gray-100' ? 'bg-bg-primary border-border-light'
: NOTIFICATION_TYPE_COLORS[item.type] || 'bg-blue-50 border-blue-200' : NOTIFICATION_TYPE_COLORS[item.type] || 'bg-blue-50 border-blue-200'
}`} }`}
> >
@@ -233,20 +233,20 @@ export default function NotificationsPage() {
{/* Type icon */} {/* Type icon */}
<div className={`flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center ${ <div className={`flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center ${
item.read ? 'bg-gray-100' : 'bg-white' item.read ? 'bg-bg-hover' : 'bg-bg-primary'
}`}> }`}>
{NOTIFICATION_TYPE_ICONS[item.type] || <Bell className="w-4 h-4 text-gray-400" />} {NOTIFICATION_TYPE_ICONS[item.type] || <Bell className="w-4 h-4 text-text-muted" />}
</div> </div>
{/* Content */} {/* Content */}
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-1"> <div className="flex items-center gap-2 mb-1">
<span className={`text-xs font-medium px-1.5 py-0.5 rounded ${ <span className={`text-xs font-medium px-1.5 py-0.5 rounded ${
item.read ? 'text-gray-500' : '' item.read ? 'text-text-muted' : ''
}`}> }`}>
{NOTIFICATION_TYPE_LABELS[item.type] || item.type} {NOTIFICATION_TYPE_LABELS[item.type] || item.type}
</span> </span>
<span className="text-xs text-gray-400 flex items-center gap-1"> <span className="text-xs text-text-muted flex items-center gap-1">
<Clock className="w-3 h-3" /> <Clock className="w-3 h-3" />
{new Date(item.createdAt).toLocaleString('zh-CN', { {new Date(item.createdAt).toLocaleString('zh-CN', {
year: 'numeric', year: 'numeric',
@@ -257,10 +257,10 @@ export default function NotificationsPage() {
})} })}
</span> </span>
</div> </div>
<h3 className={`text-sm font-medium ${item.read ? 'text-gray-600' : 'text-gray-900'}`}> <h3 className={`text-sm font-medium ${item.read ? 'text-text-tertiary' : 'text-text-primary'}`}>
{item.title} {item.title}
</h3> </h3>
<p className={`text-xs mt-0.5 ${item.read ? 'text-gray-400' : 'text-gray-500'}`}> <p className={`text-xs mt-0.5 ${item.read ? 'text-text-muted' : 'text-text-muted'}`}>
{item.message} {item.message}
</p> </p>
@@ -269,7 +269,7 @@ export default function NotificationsPage() {
{!item.read && ( {!item.read && (
<button <button
onClick={() => handleMarkAsRead(item.id)} onClick={() => handleMarkAsRead(item.id)}
className="text-xs text-gray-500 hover:text-gray-700 flex items-center gap-1" className="text-xs text-text-muted hover:text-text-secondary flex items-center gap-1"
> >
<MailOpen className="w-3 h-3" /> <MailOpen className="w-3 h-3" />
标记已读 标记已读
@@ -293,22 +293,22 @@ export default function NotificationsPage() {
{/* Pagination */} {/* Pagination */}
{totalPages > 1 && ( {totalPages > 1 && (
<div className="flex items-center justify-between px-4 py-3 bg-white rounded-lg border border-gray-200"> <div className="flex items-center justify-between px-4 py-3 bg-bg-primary rounded-lg border border-border-primary">
<span className="text-sm text-gray-500"> <span className="text-sm text-text-muted">
共 {total} 条，第 {page}/{totalPages} 页 共 {total} 条，第 {page}/{totalPages} 页
</span> </span>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<button <button
onClick={() => setPage((p) => Math.max(1, p - 1))} onClick={() => setPage((p) => Math.max(1, p - 1))}
disabled={page <= 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>
<button <button
onClick={() => setPage((p) => Math.min(totalPages, p + 1))} onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
disabled={page >= totalPages} 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> </button>
src/app/admin/page.tsx
+38 -38
View File
@@ -80,7 +80,7 @@ const STATUS_LABELS: Record<string, string> = {
}; };
const STATUS_COLORS: Record<string, string> = { const STATUS_COLORS: Record<string, string> = {
draft: 'bg-gray-100 text-gray-700', draft: 'bg-bg-hover text-text-secondary',
review: 'bg-amber-100 text-amber-700', review: 'bg-amber-100 text-amber-700',
published: 'bg-green-100 text-green-700', published: 'bg-green-100 text-green-700',
archived: 'bg-red-100 text-red-700', archived: 'bg-red-100 text-red-700',
@@ -90,7 +90,7 @@ const NOTIFICATION_TYPE_ICONS: Record<string, React.ReactNode> = {
review_pending: <AlertCircle className="w-4 h-4 text-amber-500" />, review_pending: <AlertCircle className="w-4 h-4 text-amber-500" />,
review_approved: <CheckCircle className="w-4 h-4 text-green-500" />, review_approved: <CheckCircle className="w-4 h-4 text-green-500" />,
review_rejected: <XCircle className="w-4 h-4 text-red-500" />, review_rejected: <XCircle className="w-4 h-4 text-red-500" />,
item_archived: <Archive className="w-4 h-4 text-gray-500" />, item_archived: <Archive className="w-4 h-4 text-text-muted" />,
}; };
export default function AdminDashboardPage() { export default function AdminDashboardPage() {
@@ -115,7 +115,7 @@ export default function AdminDashboardPage() {
if (authLoading || (!user && typeof window !== 'undefined')) { if (authLoading || (!user && typeof window !== 'undefined')) {
return ( return (
<div className="flex items-center justify-center h-64"> <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> </div>
); );
} }
@@ -123,8 +123,8 @@ export default function AdminDashboardPage() {
return ( return (
<div className="space-y-6"> <div className="space-y-6">
<div> <div>
<h1 className="text-xl font-bold text-gray-900">仪表盘</h1> <h1 className="text-xl font-bold text-text-primary">仪表盘</h1>
<p className="text-sm text-gray-500 mt-1">欢迎回来，{user?.nickname || user?.username}</p> <p className="text-sm text-text-muted mt-1">欢迎回来，{user?.nickname || user?.username}</p>
</div> </div>
{/* Stats cards */} {/* Stats cards */}
@@ -151,22 +151,22 @@ export default function AdminDashboardPage() {
].map((stat) => ( ].map((stat) => (
<div <div
key={stat.label} key={stat.label}
className={`bg-white rounded-lg border p-4 ${ className={`bg-bg-primary rounded-lg border p-4 ${
stat.highlight ? 'border-red-200 ring-1 ring-red-100' : 'border-gray-200' stat.highlight ? 'border-red-200 ring-1 ring-red-100' : 'border-border-primary'
}`} }`}
> >
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<p className="text-xs text-gray-500">{stat.label}</p> <p className="text-xs text-text-muted">{stat.label}</p>
<p className={`text-2xl font-bold mt-1 ${ <p className={`text-2xl font-bold mt-1 ${
stat.highlight ? 'text-red-600' : 'text-gray-900' stat.highlight ? 'text-red-600' : 'text-text-primary'
}`}> }`}>
{fetching ? '-' : stat.value} {fetching ? '-' : stat.value}
</p> </p>
</div> </div>
<div className={`w-10 h-10 rounded-lg ${stat.color} flex items-center justify-center`}> <div className={`w-10 h-10 rounded-lg ${stat.color} flex items-center justify-center`}>
<stat.icon className={`w-5 h-5 ${ <stat.icon className={`w-5 h-5 ${
stat.highlight ? 'text-red-500' : 'text-gray-600' stat.highlight ? 'text-red-500' : 'text-text-tertiary'
}`} /> }`} />
</div> </div>
</div> </div>
@@ -176,20 +176,20 @@ export default function AdminDashboardPage() {
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* Content status distribution */} {/* Content status distribution */}
<div className="bg-white rounded-lg border border-gray-200 p-6"> <div className="bg-bg-primary rounded-lg border border-border-primary p-6">
<h2 className="text-sm font-semibold text-gray-900 mb-4">内容状态分布</h2> <h2 className="text-sm font-semibold text-text-primary mb-4">内容状态分布</h2>
{fetching ? ( {fetching ? (
<div className="flex items-center justify-center py-8 text-gray-400 text-sm">加载中...</div> <div className="flex items-center justify-center py-8 text-text-muted text-sm">加载中...</div>
) : !stats?.statusCounts?.length ? ( ) : !stats?.statusCounts?.length ? (
<div className="text-center py-8 text-gray-400 text-sm">暂无数据</div> <div className="text-center py-8 text-text-muted text-sm">暂无数据</div>
) : ( ) : (
<div className="space-y-3"> <div className="space-y-3">
{stats.statusCounts.map((s) => ( {stats.statusCounts.map((s) => (
<div key={s.status} className="flex items-center justify-between"> <div key={s.status} className="flex items-center justify-between">
<span className={`text-sm px-2 py-0.5 rounded ${STATUS_COLORS[s.status] || 'bg-gray-100 text-gray-700'}`}> <span className={`text-sm px-2 py-0.5 rounded ${STATUS_COLORS[s.status] || 'bg-bg-hover text-text-secondary'}`}>
{STATUS_LABELS[s.status] || s.status} {STATUS_LABELS[s.status] || s.status}
</span> </span>
<span className="text-sm font-medium text-gray-900">{s.count}</span> <span className="text-sm font-medium text-text-primary">{s.count}</span>
</div> </div>
))} ))}
</div> </div>
@@ -197,9 +197,9 @@ export default function AdminDashboardPage() {
</div> </div>
{/* Recent notifications */} {/* Recent notifications */}
<div className="bg-white rounded-lg border border-gray-200 p-6"> <div className="bg-bg-primary rounded-lg border border-border-primary p-6">
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4">
<h2 className="text-sm font-semibold text-gray-900">最近通知</h2> <h2 className="text-sm font-semibold text-text-primary">最近通知</h2>
<button <button
onClick={() => router.push('/admin/notifications')} onClick={() => router.push('/admin/notifications')}
className="text-xs text-blue-600 hover:text-blue-800" className="text-xs text-blue-600 hover:text-blue-800"
@@ -208,10 +208,10 @@ export default function AdminDashboardPage() {
</button> </button>
</div> </div>
{fetching ? ( {fetching ? (
<div className="flex items-center justify-center py-8 text-gray-400 text-sm">加载中...</div> <div className="flex items-center justify-center py-8 text-text-muted text-sm">加载中...</div>
) : !stats?.recentNotifications?.length ? ( ) : !stats?.recentNotifications?.length ? (
<div className="flex flex-col items-center justify-center py-8 text-gray-400"> <div className="flex flex-col items-center justify-center py-8 text-text-muted">
<Bell className="w-8 h-8 mb-2 text-gray-200" /> <Bell className="w-8 h-8 mb-2 text-text-muted" />
<span className="text-sm">暂无通知</span> <span className="text-sm">暂无通知</span>
</div> </div>
) : ( ) : (
@@ -219,13 +219,13 @@ export default function AdminDashboardPage() {
{stats.recentNotifications.map((n) => ( {stats.recentNotifications.map((n) => (
<div key={n.id} className="flex items-start gap-3"> <div key={n.id} className="flex items-start gap-3">
<div className="flex-shrink-0 mt-0.5"> <div className="flex-shrink-0 mt-0.5">
{NOTIFICATION_TYPE_ICONS[n.type] || <Bell className="w-4 h-4 text-gray-400" />} {NOTIFICATION_TYPE_ICONS[n.type] || <Bell className="w-4 h-4 text-text-muted" />}
</div> </div>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<p className={`text-sm truncate ${n.read ? 'text-gray-500' : 'text-gray-900 font-medium'}`}> <p className={`text-sm truncate ${n.read ? 'text-text-muted' : 'text-text-primary font-medium'}`}>
{n.title} {n.title}
</p> </p>
<p className="text-xs text-gray-400 flex items-center gap-1 mt-0.5"> <p className="text-xs text-text-muted flex items-center gap-1 mt-0.5">
<Clock className="w-3 h-3" /> <Clock className="w-3 h-3" />
{new Date(n.createdAt).toLocaleDateString('zh-CN')} {new Date(n.createdAt).toLocaleDateString('zh-CN')}
</p> </p>
@@ -238,31 +238,31 @@ export default function AdminDashboardPage() {
</div> </div>
{/* Recent content updates */} {/* Recent content updates */}
<div className="bg-white rounded-lg border border-gray-200 p-6"> <div className="bg-bg-primary rounded-lg border border-border-primary p-6">
<h2 className="text-sm font-semibold text-gray-900 mb-4">最近更新</h2> <h2 className="text-sm font-semibold text-text-primary mb-4">最近更新</h2>
{fetching ? ( {fetching ? (
<div className="flex items-center justify-center py-8 text-gray-400 text-sm">加载中...</div> <div className="flex items-center justify-center py-8 text-text-muted text-sm">加载中...</div>
) : !stats?.recentItems?.length ? ( ) : !stats?.recentItems?.length ? (
<div className="text-center py-8 text-gray-400 text-sm">暂无更新</div> <div className="text-center py-8 text-text-muted text-sm">暂无更新</div>
) : ( ) : (
<div className="space-y-3"> <div className="space-y-3">
{stats.recentItems.map((item) => ( {stats.recentItems.map((item) => (
<button <button
key={item.id} key={item.id}
onClick={() => router.push(`/admin/content/${item.modelCode}/${item.id}`)} onClick={() => router.push(`/admin/content/${item.modelCode}/${item.id}`)}
className="w-full text-left flex items-start gap-3 hover:bg-gray-50 rounded-lg p-2 -mx-2 transition-colors" className="w-full text-left flex items-start gap-3 hover:bg-bg-secondary rounded-lg p-2 -mx-2 transition-colors"
> >
<div className="flex-shrink-0 mt-0.5"> <div className="flex-shrink-0 mt-0.5">
<FileText className="w-4 h-4 text-gray-400" /> <FileText className="w-4 h-4 text-text-muted" />
</div> </div>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<p className="text-sm text-gray-900 truncate">{item.title || '无标题'}</p> <p className="text-sm text-text-primary truncate">{item.title || '无标题'}</p>
<div className="flex items-center gap-2 mt-0.5"> <div className="flex items-center gap-2 mt-0.5">
<span className="text-xs text-gray-400"> <span className="text-xs text-text-muted">
{MODEL_LABELS[item.modelCode] || item.modelCode} {MODEL_LABELS[item.modelCode] || item.modelCode}
</span> </span>
<span className={`text-xs px-1.5 py-0.5 rounded ${ <span className={`text-xs px-1.5 py-0.5 rounded ${
STATUS_COLORS[item.status] || 'bg-gray-100 text-gray-700' STATUS_COLORS[item.status] || 'bg-bg-hover text-text-secondary'
}`}> }`}>
{STATUS_LABELS[item.status] || item.status} {STATUS_LABELS[item.status] || item.status}
</span> </span>
@@ -276,8 +276,8 @@ export default function AdminDashboardPage() {
</div> </div>
{/* Quick links */} {/* Quick links */}
<div className="bg-white rounded-lg border border-gray-200 p-6"> <div className="bg-bg-primary rounded-lg border border-border-primary p-6">
<h2 className="text-sm font-semibold text-gray-900 mb-4">内容管理</h2> <h2 className="text-sm font-semibold text-text-primary mb-4">内容管理</h2>
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3"> <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
{modelCards.map((card) => { {modelCards.map((card) => {
const count = stats?.modelItemCounts?.find((m) => m.modelCode === card.code)?.count; const count = stats?.modelItemCounts?.find((m) => m.modelCode === card.code)?.count;
@@ -285,14 +285,14 @@ export default function AdminDashboardPage() {
<button <button
key={card.code} key={card.code}
onClick={() => router.push(`/admin/content/${card.code}`)} onClick={() => router.push(`/admin/content/${card.code}`)}
className="flex flex-col items-center gap-2 p-4 rounded-lg border border-gray-200 hover:border-gray-300 hover:bg-gray-50 transition-colors text-center relative" className="flex flex-col items-center gap-2 p-4 rounded-lg border border-border-primary hover:border-border-secondary hover:bg-bg-secondary transition-colors text-center relative"
> >
<div className={`w-10 h-10 rounded-lg ${card.color} flex items-center justify-center`}> <div className={`w-10 h-10 rounded-lg ${card.color} flex items-center justify-center`}>
<card.icon className="w-5 h-5" /> <card.icon className="w-5 h-5" />
</div> </div>
<span className="text-xs font-medium text-gray-700">{card.name}</span> <span className="text-xs font-medium text-text-secondary">{card.name}</span>
{count !== undefined && ( {count !== undefined && (
<span className="text-xs text-gray-400">{count} 条</span> <span className="text-xs text-text-muted">{count} 条</span>
)} )}
</button> </button>
); );
src/app/admin/roles/page.tsx
+30 -30
View File
@@ -127,7 +127,7 @@ export default function RolesPage() {
if (authLoading || (!user && typeof window !== 'undefined')) { if (authLoading || (!user && typeof window !== 'undefined')) {
return ( return (
<div className="flex items-center justify-center h-64"> <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> </div>
); );
} }
@@ -137,14 +137,14 @@ export default function RolesPage() {
{/* Header */} {/* Header */}
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<h1 className="text-xl font-bold text-gray-900">角色权限</h1> <h1 className="text-xl font-bold text-text-primary">角色权限</h1>
<p className="text-sm text-gray-500 mt-1">按角色配置内容模型的操作权限</p> <p className="text-sm text-text-muted mt-1">按角色配置内容模型的操作权限</p>
</div> </div>
{isEditable && ( {isEditable && (
<button <button
onClick={handleSave} onClick={handleSave}
disabled={saving} disabled={saving}
className="flex items-center gap-2 bg-gray-900 text-white rounded-lg px-4 py-2 text-sm font-medium hover:bg-gray-800 transition-colors disabled:opacity-60 disabled:cursor-not-allowed" className="flex items-center gap-2 bg-dark-bg text-white rounded-lg px-4 py-2 text-sm font-medium hover:bg-dark-bg-secondary transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
> >
{saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />} {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
保存权限 保存权限
@@ -161,37 +161,37 @@ export default function RolesPage() {
<div className="grid grid-cols-1 lg:grid-cols-4 gap-6"> <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
{/* Role list */} {/* Role list */}
<div className="bg-white rounded-lg border border-gray-200 overflow-hidden lg:col-span-1"> <div className="bg-bg-primary rounded-lg border border-border-primary overflow-hidden lg:col-span-1">
<div className="px-4 py-3 border-b border-gray-200 bg-gray-50"> <div className="px-4 py-3 border-b border-border-primary bg-bg-secondary">
<h2 className="text-sm font-semibold text-gray-900 flex items-center gap-2"> <h2 className="text-sm font-semibold text-text-primary flex items-center gap-2">
<Shield className="w-4 h-4" /> <Shield className="w-4 h-4" />
角色列表 角色列表
</h2> </h2>
</div> </div>
<div className="divide-y divide-gray-100"> <div className="divide-y divide-border-light">
{loading ? ( {loading ? (
<div className="p-8 flex justify-center"> <div className="p-8 flex justify-center">
<div className="animate-spin w-6 h-6 border-2 border-gray-300 border-t-gray-900 rounded-full" /> <div className="animate-spin w-6 h-6 border-2 border-border-secondary border-t-border-dark rounded-full" />
</div> </div>
) : roles.length === 0 ? ( ) : roles.length === 0 ? (
<div className="p-8 text-center text-sm text-gray-400">暂无角色</div> <div className="p-8 text-center text-sm text-text-muted">暂无角色</div>
) : ( ) : (
roles.map((role) => ( roles.map((role) => (
<button <button
key={role.code} key={role.code}
onClick={() => setSelectedRole(role.code)} onClick={() => setSelectedRole(role.code)}
className={`w-full text-left px-4 py-3 flex items-center justify-between hover:bg-gray-50 transition-colors ${ className={`w-full text-left px-4 py-3 flex items-center justify-between hover:bg-bg-secondary transition-colors ${
selectedRole === role.code ? 'bg-gray-50' : '' selectedRole === role.code ? 'bg-bg-secondary' : ''
}`} }`}
> >
<div> <div>
<p className={`text-sm font-medium ${selectedRole === role.code ? 'text-gray-900' : 'text-gray-700'}`}> <p className={`text-sm font-medium ${selectedRole === role.code ? 'text-text-primary' : 'text-text-secondary'}`}>
{role.name} {role.name}
</p> </p>
<p className="text-xs text-gray-400 mt-0.5">{role.code}</p> <p className="text-xs text-text-muted mt-0.5">{role.code}</p>
</div> </div>
{role.code === 'super_admin' && ( {role.code === 'super_admin' && (
<Lock className="w-4 h-4 text-gray-400" /> <Lock className="w-4 h-4 text-text-muted" />
)} )}
</button> </button>
)) ))
@@ -200,13 +200,13 @@ export default function RolesPage() {
</div> </div>
{/* Permission matrix */} {/* Permission matrix */}
<div className="bg-white rounded-lg border border-gray-200 overflow-hidden lg:col-span-3"> <div className="bg-bg-primary rounded-lg border border-border-primary overflow-hidden lg:col-span-3">
<div className="px-4 py-3 border-b border-gray-200 bg-gray-50 flex items-center justify-between"> <div className="px-4 py-3 border-b border-border-primary bg-bg-secondary flex items-center justify-between">
<h2 className="text-sm font-semibold text-gray-900"> <h2 className="text-sm font-semibold text-text-primary">
{selectedRoleInfo ? `${selectedRoleInfo.name} 权限矩阵` : '权限矩阵'} {selectedRoleInfo ? `${selectedRoleInfo.name} 权限矩阵` : '权限矩阵'}
</h2> </h2>
{selectedRoleInfo?.code === 'super_admin' && ( {selectedRoleInfo?.code === 'super_admin' && (
<span className="text-xs text-gray-500 flex items-center gap-1"> <span className="text-xs text-text-muted flex items-center gap-1">
<Lock className="w-3 h-3" /> <Lock className="w-3 h-3" />
内置超级管理员拥有所有权限，不可修改 内置超级管理员拥有所有权限，不可修改
</span> </span>
@@ -214,31 +214,31 @@ export default function RolesPage() {
</div> </div>
{!selectedRoleInfo || models.length === 0 ? ( {!selectedRoleInfo || models.length === 0 ? (
<div className="p-12 text-center text-sm text-gray-400">暂无数据</div> <div className="p-12 text-center text-sm text-text-muted">暂无数据</div>
) : ( ) : (
<div className="overflow-x-auto"> <div className="overflow-x-auto">
<table className="w-full min-w-[640px]"> <table className="w-full min-w-[640px]">
<thead> <thead>
<tr className="border-b border-gray-200"> <tr className="border-b border-border-primary">
<th className="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase sticky left-0 bg-white min-w-[160px]"> <th className="text-left px-4 py-3 text-xs font-medium text-text-muted uppercase sticky left-0 bg-bg-primary min-w-[160px]">
内容模型 内容模型
</th> </th>
{ACTION_ORDER.map((action) => ( {ACTION_ORDER.map((action) => (
<th <th
key={action} key={action}
className="text-center px-2 py-3 text-xs font-medium text-gray-500 uppercase w-[1%] whitespace-nowrap" className="text-center px-2 py-3 text-xs font-medium text-text-muted uppercase w-[1%] whitespace-nowrap"
> >
{ACTION_LABELS[action]} {ACTION_LABELS[action]}
</th> </th>
))} ))}
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-gray-100"> <tbody className="divide-y divide-border-light">
{models.map((model) => ( {models.map((model) => (
<tr key={model.code} className="hover:bg-gray-50 transition-colors"> <tr key={model.code} className="hover:bg-bg-secondary transition-colors">
<td className="px-4 py-3 sticky left-0 bg-white"> <td className="px-4 py-3 sticky left-0 bg-bg-primary">
<p className="text-sm font-medium text-gray-900">{model.name}</p> <p className="text-sm font-medium text-text-primary">{model.name}</p>
<code className="text-xs text-gray-400">{model.code}</code> <code className="text-xs text-text-muted">{model.code}</code>
</td> </td>
{ACTION_ORDER.map((action) => { {ACTION_ORDER.map((action) => {
const enabled = hasPermission(selectedRole, model.code, action); const enabled = hasPermission(selectedRole, model.code, action);
@@ -249,8 +249,8 @@ export default function RolesPage() {
disabled={!isEditable} disabled={!isEditable}
className={`inline-flex items-center justify-center w-8 h-8 rounded-md transition-colors ${ className={`inline-flex items-center justify-center w-8 h-8 rounded-md transition-colors ${
enabled enabled
? 'bg-gray-900 text-white' ? 'bg-dark-bg text-white'
: 'bg-gray-100 text-gray-300' : 'bg-bg-hover text-text-muted'
} ${ } ${
isEditable isEditable
? 'hover:opacity-80 cursor-pointer' ? 'hover:opacity-80 cursor-pointer'
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_admin: 'bg-blue-100 text-blue-700',
content_editor: 'bg-green-100 text-green-700', content_editor: 'bg-green-100 text-green-700',
reviewer: 'bg-amber-100 text-amber-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() { export default function UsersPage() {
@@ -232,7 +232,7 @@ export default function UsersPage() {
if (authLoading || (!user && typeof window !== 'undefined')) { if (authLoading || (!user && typeof window !== 'undefined')) {
return ( return (
<div className="flex items-center justify-center h-64"> <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> </div>
); );
} }
@@ -241,12 +241,12 @@ export default function UsersPage() {
<div className="space-y-6"> <div className="space-y-6">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<h1 className="text-xl font-bold text-gray-900">用户管理</h1> <h1 className="text-xl font-bold text-text-primary">用户管理</h1>
<p className="text-sm text-gray-500 mt-1">管理系统用户与角色分配</p> <p className="text-sm text-text-muted mt-1">管理系统用户与角色分配</p>
</div> </div>
<button <button
onClick={openCreateDialog} 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" /> <Plus className="w-4 h-4" />
创建用户 创建用户
@@ -255,13 +255,13 @@ export default function UsersPage() {
{/* Search */} {/* Search */}
<div className="relative"> <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 <input
type="text" type="text"
placeholder="搜索用户名、昵称或邮箱..." placeholder="搜索用户名、昵称或邮箱..."
value={search} value={search}
onChange={(e) => { setSearch(e.target.value); setPage(1); }} 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> </div>
@@ -272,54 +272,54 @@ export default function UsersPage() {
)} )}
{/* Users table */} {/* 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"> <div className="overflow-x-auto">
<table className="w-full text-sm"> <table className="w-full text-sm">
<thead> <thead>
<tr className="border-b border-gray-200 bg-gray-50"> <tr className="border-b border-border-primary bg-bg-secondary">
<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-text-tertiary">用户名</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-text-tertiary">昵称</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-text-tertiary">邮箱</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-text-tertiary">角色</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-text-tertiary">状态</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-text-tertiary">创建时间</th>
<th className="text-right px-4 py-3 font-medium text-gray-600">操作</th> <th className="text-right px-4 py-3 font-medium text-text-tertiary">操作</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{loading ? ( {loading ? (
<tr> <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="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> </div>
</td> </td>
</tr> </tr>
) : users.length === 0 ? ( ) : users.length === 0 ? (
<tr> <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> </td>
</tr> </tr>
) : ( ) : (
users.map((u) => ( 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"> <td className="px-4 py-3">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<UserCog className="w-4 h-4 text-gray-400" /> <UserCog className="w-4 h-4 text-text-muted" />
<span className="font-medium text-gray-900">{u.username}</span> <span className="font-medium text-text-primary">{u.username}</span>
</div> </div>
</td> </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"> <td className="px-4 py-3">
{u.email ? ( {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" /> <Mail className="w-3 h-3" />
{u.email} {u.email}
</a> </a>
) : ( ) : (
<span className="text-gray-400">-</span> <span className="text-text-muted">-</span>
)} )}
</td> </td>
<td className="px-4 py-3"> <td className="px-4 py-3">
@@ -328,7 +328,7 @@ export default function UsersPage() {
<span <span
key={r.code} key={r.code}
className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium ${ 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" /> <Shield className="w-3 h-3" />
@@ -336,7 +336,7 @@ export default function UsersPage() {
</span> </span>
))} ))}
{u.roles.length === 0 && ( {u.roles.length === 0 && (
<span className="text-xs text-gray-400">无角色</span> <span className="text-xs text-text-muted">无角色</span>
)} )}
</div> </div>
</td> </td>
@@ -351,7 +351,7 @@ export default function UsersPage() {
{u.status === 1 ? '启用' : '禁用'} {u.status === 1 ? '启用' : '禁用'}
</span> </span>
</td> </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"> <div className="flex items-center gap-1">
<Calendar className="w-3 h-3" /> <Calendar className="w-3 h-3" />
{new Date(u.createdAt).toLocaleDateString('zh-CN')} {new Date(u.createdAt).toLocaleDateString('zh-CN')}
@@ -361,14 +361,14 @@ export default function UsersPage() {
<div className="flex items-center justify-end gap-1"> <div className="flex items-center justify-end gap-1">
<button <button
onClick={() => openEditDialog(u)} 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="编辑" title="编辑"
> >
<Edit className="w-4 h-4" /> <Edit className="w-4 h-4" />
</button> </button>
<button <button
onClick={() => { setPendingDeleteId(u.id); setDeleteDialogOpen(true); }} 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="删除" title="删除"
> >
<Trash2 className="w-4 h-4" /> <Trash2 className="w-4 h-4" />
@@ -384,22 +384,22 @@ export default function UsersPage() {
{/* Pagination */} {/* Pagination */}
{totalPages > 1 && ( {totalPages > 1 && (
<div className="flex items-center justify-between px-4 py-3 border-t border-gray-200 bg-gray-50"> <div className="flex items-center justify-between px-4 py-3 border-t border-border-primary bg-bg-secondary">
<span className="text-sm text-gray-500"> <span className="text-sm text-text-muted">
共 {total} 条，第 {page}/{totalPages} 页 共 {total} 条，第 {page}/{totalPages} 页
</span> </span>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<button <button
onClick={() => setPage((p) => Math.max(1, p - 1))} onClick={() => setPage((p) => Math.max(1, p - 1))}
disabled={page <= 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>
<button <button
onClick={() => setPage((p) => Math.min(totalPages, p + 1))} onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
disabled={page >= totalPages} 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> </button>
@@ -411,71 +411,71 @@ export default function UsersPage() {
{/* Create/Edit Dialog */} {/* Create/Edit Dialog */}
{dialogOpen && ( {dialogOpen && (
<div className="fixed inset-0 z-50 flex items-center justify-center"> <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="fixed inset-0 bg-overlay/50" onClick={() => setDialogOpen(false)} />
<div className="relative bg-white rounded-lg shadow-xl w-full max-w-md mx-4 p-6"> <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-gray-900 mb-4"> <h2 className="text-lg font-bold text-text-primary mb-4">
{editingUser ? '编辑用户' : '创建用户'} {editingUser ? '编辑用户' : '创建用户'}
</h2> </h2>
<div className="space-y-4"> <div className="space-y-4">
<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 <input
type="text" type="text"
value={formData.username} value={formData.username}
onChange={(e) => setFormData((p) => ({ ...p, username: e.target.value }))} onChange={(e) => setFormData((p) => ({ ...p, username: e.target.value }))}
disabled={!!editingUser} 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 位字母/数字/下划线" placeholder="3-32 位字母/数字/下划线"
/> />
</div> </div>
<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 ? '新密码（留空不修改）' : '密码'} {editingUser ? '新密码（留空不修改）' : '密码'}
</label> </label>
<input <input
type="password" type="password"
value={formData.password} value={formData.password}
onChange={(e) => setFormData((p) => ({ ...p, password: e.target.value }))} 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 位'} placeholder={editingUser ? '留空保持原密码' : '至少 6 位'}
/> />
</div> </div>
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<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 <input
type="text" type="text"
value={formData.nickname} value={formData.nickname}
onChange={(e) => setFormData((p) => ({ ...p, nickname: e.target.value }))} 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>
<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 <input
type="email" type="email"
value={formData.email} value={formData.email}
onChange={(e) => setFormData((p) => ({ ...p, email: e.target.value }))} 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> </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 <input
type="tel" type="tel"
value={formData.phone} value={formData.phone}
onChange={(e) => setFormData((p) => ({ ...p, phone: e.target.value }))} 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>
<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"> <div className="flex flex-wrap gap-2">
{roles.map((r) => ( {roles.map((r) => (
<button <button
@@ -484,31 +484,31 @@ export default function UsersPage() {
onClick={() => toggleRole(r.code)} onClick={() => toggleRole(r.code)}
className={`px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors ${ className={`px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors ${
formData.roleCodes.includes(r.code) formData.roleCodes.includes(r.code)
? 'bg-gray-900 text-white border-gray-900' ? 'bg-dark-bg text-white border-border-dark'
: 'bg-white text-gray-600 border-gray-200 hover:border-gray-400' : 'bg-bg-primary text-text-tertiary border-border-primary hover:border-border-secondary'
}`} }`}
> >
{r.name} {r.name}
</button> </button>
))} ))}
{roles.length === 0 && ( {roles.length === 0 && (
<span className="text-xs text-gray-400">加载角色中...</span> <span className="text-xs text-text-muted">加载角色中...</span>
)} )}
</div> </div>
</div> </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 <button
onClick={() => setDialogOpen(false)} 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>
<button <button
onClick={handleSave} onClick={handleSave}
disabled={saving} 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" />} {saving && <div className="animate-spin w-4 h-4 border-2 border-white border-t-transparent rounded-full" />}
{editingUser ? '保存更改' : '创建用户'} {editingUser ? '保存更改' : '创建用户'}
src/app/admin/zones/page.tsx
+15 -15
View File
@@ -74,7 +74,7 @@ export default function ZonesPage() {
if (authLoading || loading) { if (authLoading || loading) {
return ( return (
<div className="flex items-center justify-center h-64"> <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> </div>
); );
} }
@@ -82,64 +82,64 @@ export default function ZonesPage() {
return ( return (
<div className="space-y-6"> <div className="space-y-6">
<div> <div>
<h1 className="text-xl font-bold text-gray-900">页面区域配置</h1> <h1 className="text-xl font-bold text-text-primary">页面区域配置</h1>
<p className="text-sm text-gray-500 mt-1">管理系统各页面的内容区域布局</p> <p className="text-sm text-text-muted mt-1">管理系统各页面的内容区域布局</p>
</div> </div>
<div className="grid gap-4"> <div className="grid gap-4">
{zones.map((zone) => ( {zones.map((zone) => (
<div key={zone.id} className="bg-white rounded-lg border border-gray-200 p-4"> <div key={zone.id} className="bg-bg-primary rounded-lg border border-border-primary p-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<h3 className="text-sm font-semibold text-gray-900">{zone.name}</h3> <h3 className="text-sm font-semibold text-text-primary">{zone.name}</h3>
<p className="text-xs text-gray-500 mt-0.5"> <p className="text-xs text-text-muted mt-0.5">
Code: {zone.code} | 页面: {zone.pageCode || '-'} | 区域: {zone.zoneKey || '-'} Code: {zone.code} | 页面: {zone.pageCode || '-'} | 区域: {zone.zoneKey || '-'}
</p> </p>
<p className="text-xs text-gray-400 mt-0.5"> <p className="text-xs text-text-muted mt-0.5">
允许模型: {zone.allowedModels?.join(', ') || '-'} | 内容数: {zone.items?.length || 0} 允许模型: {zone.allowedModels?.join(', ') || '-'} | 内容数: {zone.items?.length || 0}
</p> </p>
</div> </div>
<button <button
onClick={() => setEditingZone(editingZone?.id === zone.id ? null : zone)} onClick={() => setEditingZone(editingZone?.id === zone.id ? null : zone)}
className="text-sm text-gray-600 hover:text-gray-900 px-3 py-1.5 rounded border border-gray-300 hover:border-gray-400 transition-colors" className="text-sm text-text-tertiary hover:text-text-primary px-3 py-1.5 rounded border border-border-secondary hover:border-border-secondary transition-colors"
> >
{editingZone?.id === zone.id ? '取消编辑' : '编辑'} {editingZone?.id === zone.id ? '取消编辑' : '编辑'}
</button> </button>
</div> </div>
{editingZone?.id === zone.id && ( {editingZone?.id === zone.id && (
<div className="mt-4 pt-4 border-t border-gray-100 space-y-4"> <div className="mt-4 pt-4 border-t border-border-light space-y-4">
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div> <div>
<label className="block text-xs font-medium text-gray-700 mb-1">名称</label> <label className="block text-xs font-medium text-text-secondary mb-1">名称</label>
<input <input
type="text" type="text"
value={editingZone.name} value={editingZone.name}
onChange={(e) => setEditingZone({ ...editingZone, name: e.target.value })} onChange={(e) => setEditingZone({ ...editingZone, name: e.target.value })}
className="w-full px-3 py-1.5 border border-gray-300 rounded text-sm" className="w-full px-3 py-1.5 border border-border-secondary rounded text-sm"
/> />
</div> </div>
<div> <div>
<label className="block text-xs font-medium text-gray-700 mb-1">页面标识</label> <label className="block text-xs font-medium text-text-secondary mb-1">页面标识</label>
<input <input
type="text" type="text"
value={editingZone.pageCode} value={editingZone.pageCode}
onChange={(e) => setEditingZone({ ...editingZone, pageCode: e.target.value })} onChange={(e) => setEditingZone({ ...editingZone, pageCode: e.target.value })}
className="w-full px-3 py-1.5 border border-gray-300 rounded text-sm" className="w-full px-3 py-1.5 border border-border-secondary rounded text-sm"
/> />
</div> </div>
</div> </div>
<div className="flex justify-end gap-2"> <div className="flex justify-end gap-2">
<button <button
onClick={() => setEditingZone(null)} onClick={() => setEditingZone(null)}
className="text-sm text-gray-600 px-4 py-1.5 rounded border border-gray-300 hover:bg-gray-50" className="text-sm text-text-tertiary px-4 py-1.5 rounded border border-border-secondary hover:bg-bg-secondary"
> >
取消 取消
</button> </button>
<button <button
onClick={handleSave} onClick={handleSave}
disabled={saving} disabled={saving}
className="flex items-center gap-1.5 text-sm bg-gray-900 text-white px-4 py-1.5 rounded hover:bg-gray-800 disabled:opacity-50" className="flex items-center gap-1.5 text-sm bg-dark-bg text-white px-4 py-1.5 rounded hover:bg-dark-bg-secondary disabled:opacity-50"
> >
<Save className="w-3.5 h-3.5" /> <Save className="w-3.5 h-3.5" />
保存 保存