张翔
6d92024b63
- 修复API测试认证问题：创建全局认证设置，更新Playwright配置 - 优化回归测试稳定性：增加超时时间到15秒，修复定位器 - 创建Woodpecker CI工作流：CI、部署和质量门禁配置 - 添加Jest配置和测试脚本 - 移除登录页面的默认账号密码显示（安全问题修复）
279 lines
10 KiB
TypeScript
279 lines
10 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import {
|
|
Save,
|
|
RefreshCw,
|
|
Loader2,
|
|
ChevronDown,
|
|
ChevronUp
|
|
} from 'lucide-react';
|
|
|
|
interface ConfigItem {
|
|
id: string;
|
|
key: string;
|
|
value: Record<string, any>;
|
|
category: 'feature' | 'style' | 'seo' | 'general';
|
|
description: string | null;
|
|
updatedAt: string;
|
|
}
|
|
|
|
const categoryLabels = {
|
|
feature: '功能配置',
|
|
style: '样式配置',
|
|
seo: 'SEO 配置',
|
|
general: '常规配置'
|
|
};
|
|
|
|
const categoryColors = {
|
|
feature: 'bg-blue-100 text-blue-800',
|
|
style: 'bg-purple-100 text-purple-800',
|
|
seo: 'bg-green-100 text-green-800',
|
|
general: 'bg-gray-100 text-gray-800'
|
|
};
|
|
|
|
export default function SettingsPage() {
|
|
const [configs, setConfigs] = useState<ConfigItem[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [saving, setSaving] = useState<string | null>(null);
|
|
const [expandedCategories, setExpandedCategories] = useState<Set<string>>(new Set(['feature', 'seo']));
|
|
const [editedValues, setEditedValues] = useState<Record<string, Record<string, any>>>({});
|
|
|
|
useEffect(() => {
|
|
fetchConfigs();
|
|
}, []);
|
|
|
|
const fetchConfigs = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const res = await fetch('/api/admin/config');
|
|
const data = await res.json();
|
|
if (res.ok) {
|
|
setConfigs(data.configs || []);
|
|
}
|
|
} catch (error) {
|
|
console.error('获取配置失败:', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleSave = async (configId: string) => {
|
|
const editedValue = editedValues[configId];
|
|
if (!editedValue) return;
|
|
|
|
try {
|
|
setSaving(configId);
|
|
const res = await fetch('/api/admin/config', {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
id: configId,
|
|
value: editedValue
|
|
})
|
|
});
|
|
|
|
if (res.ok) {
|
|
setEditedValues(prev => {
|
|
const updated = { ...prev };
|
|
delete updated[configId];
|
|
return updated;
|
|
});
|
|
await fetchConfigs();
|
|
}
|
|
} catch (error) {
|
|
console.error('保存配置失败:', error);
|
|
} finally {
|
|
setSaving(null);
|
|
}
|
|
};
|
|
|
|
const toggleCategory = (category: string) => {
|
|
setExpandedCategories(prev => {
|
|
const updated = new Set(prev);
|
|
if (updated.has(category)) {
|
|
updated.delete(category);
|
|
} else {
|
|
updated.add(category);
|
|
}
|
|
return updated;
|
|
});
|
|
};
|
|
|
|
const handleValueChange = (configId: string, field: string, value: any) => {
|
|
setEditedValues(prev => ({
|
|
...prev,
|
|
[configId]: {
|
|
...prev[configId],
|
|
[field]: value
|
|
}
|
|
}));
|
|
};
|
|
|
|
const getConfigValue = (config: ConfigItem, field: string) => {
|
|
if (editedValues[config.id]?.[field] !== undefined) {
|
|
return editedValues[config.id]![field];
|
|
}
|
|
return config.value[field];
|
|
};
|
|
|
|
const hasChanges = (configId: string) => {
|
|
return editedValues[configId] && Object.keys(editedValues[configId]).length > 0;
|
|
};
|
|
|
|
const groupedConfigs = configs.reduce((acc, config) => {
|
|
if (!acc[config.category]) {
|
|
acc[config.category] = [];
|
|
}
|
|
acc[config.category]!.push(config);
|
|
return acc;
|
|
}, {} as Record<string, ConfigItem[]>);
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center h-64">
|
|
<Loader2 className="h-8 w-8 animate-spin text-gray-400" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-900">配置中心</h1>
|
|
<p className="text-gray-600 mt-1">管理网站功能和样式配置</p>
|
|
</div>
|
|
<button
|
|
onClick={fetchConfigs}
|
|
className="flex items-center gap-2 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
|
|
>
|
|
<RefreshCw className="h-4 w-4" />
|
|
刷新
|
|
</button>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
{Object.entries(groupedConfigs).map(([category, categoryConfigs]) => (
|
|
<div key={category} className="bg-white rounded-lg border overflow-hidden">
|
|
<button
|
|
onClick={() => toggleCategory(category)}
|
|
className="w-full flex items-center justify-between p-4 hover:bg-gray-50 transition-colors"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<span className={`px-3 py-1 rounded-full text-sm font-medium ${categoryColors[category as keyof typeof categoryColors]}`}>
|
|
{categoryLabels[category as keyof typeof categoryLabels]}
|
|
</span>
|
|
<span className="text-gray-600 text-sm">
|
|
{categoryConfigs.length} 项配置
|
|
</span>
|
|
</div>
|
|
{expandedCategories.has(category) ? (
|
|
<ChevronUp className="h-5 w-5 text-gray-400" />
|
|
) : (
|
|
<ChevronDown className="h-5 w-5 text-gray-400" />
|
|
)}
|
|
</button>
|
|
|
|
{expandedCategories.has(category) && (
|
|
<div className="border-t divide-y">
|
|
{categoryConfigs.map(config => (
|
|
<div key={config.id} className="p-4">
|
|
<div className="flex items-start justify-between mb-3">
|
|
<div>
|
|
<h3 className="font-medium text-gray-900">{config.key}</h3>
|
|
{config.description && (
|
|
<p className="text-sm text-gray-600 mt-1">{config.description}</p>
|
|
)}
|
|
</div>
|
|
{hasChanges(config.id) && (
|
|
<button
|
|
onClick={() => handleSave(config.id)}
|
|
disabled={saving === config.id}
|
|
className="flex items-center gap-2 px-3 py-1.5 bg-[#C41E3A] text-white rounded-lg hover:bg-[#A01830] transition-colors disabled:opacity-50"
|
|
>
|
|
{saving === config.id ? (
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|
) : (
|
|
<Save className="h-4 w-4" />
|
|
)}
|
|
保存
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
{Object.entries(config.value).map(([field, value]) => {
|
|
const currentValue = getConfigValue(config, field);
|
|
|
|
return (
|
|
<div key={field} className="flex items-start gap-4">
|
|
<label className="w-32 text-sm font-medium text-gray-700 pt-2">
|
|
{field}
|
|
</label>
|
|
<div className="flex-1">
|
|
{typeof value === 'boolean' ? (
|
|
<label className="flex items-center gap-2 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={currentValue}
|
|
onChange={(e) => handleValueChange(config.id, field, e.target.checked)}
|
|
className="w-4 h-4 text-[#C41E3A] border-gray-300 rounded focus:ring-[#C41E3A]"
|
|
/>
|
|
<span className="text-sm text-gray-600">
|
|
{currentValue ? '已启用' : '已禁用'}
|
|
</span>
|
|
</label>
|
|
) : typeof value === 'string' ? (
|
|
<input
|
|
type="text"
|
|
value={currentValue}
|
|
onChange={(e) => handleValueChange(config.id, field, e.target.value)}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#C41E3A] focus:border-transparent"
|
|
/>
|
|
) : typeof value === 'number' ? (
|
|
<input
|
|
type="number"
|
|
value={currentValue}
|
|
onChange={(e) => handleValueChange(config.id, field, Number(e.target.value))}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#C41E3A] focus:border-transparent"
|
|
/>
|
|
) : Array.isArray(value) ? (
|
|
<textarea
|
|
value={Array.isArray(currentValue) ? currentValue.join('\n') : currentValue}
|
|
onChange={(e) => handleValueChange(config.id, field, e.target.value.split('\n').filter(Boolean))}
|
|
rows={3}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#C41E3A] focus:border-transparent font-mono text-sm"
|
|
placeholder="每行一个值"
|
|
/>
|
|
) : (
|
|
<textarea
|
|
value={JSON.stringify(currentValue, null, 2)}
|
|
onChange={(e) => {
|
|
try {
|
|
const parsed = JSON.parse(e.target.value);
|
|
handleValueChange(config.id, field, parsed);
|
|
} catch (err) {
|
|
// Invalid JSON, ignore
|
|
}
|
|
}}
|
|
rows={5}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#C41E3A] focus:border-transparent font-mono text-sm"
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|