feat: 修复测试套件问题并添加Woodpecker CI配置
- 修复API测试认证问题：创建全局认证设置，更新Playwright配置 - 优化回归测试稳定性：增加超时时间到15秒，修复定位器 - 创建Woodpecker CI工作流：CI、部署和质量门禁配置 - 添加Jest配置和测试脚本 - 移除登录页面的默认账号密码显示（安全问题修复）
This commit is contained in:
张翔
@@ -0,0 +1,278 @@
|
||||
'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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user