{field.label}

handleFieldChange(field.id, e.target.value)}
                        />
                        {field.description && (
                            <p className="text-sm text-gray-500">{field.description}</p>
                        )}
                        {error && (
                            <p className="text-sm text-red-500">{error}</p>
                        )}
                    </div>
                );

case 'number':
                return (
                    <div key={field.id} className="space-y-2">
                        <label htmlFor={field.id} className="text-sm font-medium">
                            {field.label}
                        </label>
                        <input
                            {...commonProps}
                            type="number"
                            onChange={(e) => handleFieldChange(field.id, Number(e.target.value))}
                        />
                        {field.description && (
                            <p className="text-sm text-gray-500">{field.description}</p>
                        )}
                        {error && (
                            <p className="text-sm text-red-500">{error}</p>
                        )}
                    </div>
                );

case 'email':
                return (
                    <div key={field.id} className="space-y-2">
                        <label htmlFor={field.id} className="text-sm font-medium">
                            {field.label}
                        </label>
                        <input
                            {...commonProps}
                            type="email"
                        />
                        {field.description && (
                            <p className="text-sm text-gray-500">{field.description}</p>
                        )}
                        {error && (
                            <p className="text-sm text-red-500">{error}</p>
                        )}
                    </div>
                );

case 'password':
                return (
                    <div key={field.id} className="space-y-2">
                        <label htmlFor={field.id} className="text-sm font-medium">
                            {field.label}
                        </label>
                        <input
                            {...commonProps}
                            type="password"
                        />
                        {field.description && (
                            <p className="text-sm text-gray-500">{field.description}</p>
                        )}
                        {error && (
                            <p className="text-sm text-red-500">{error}</p>
                        )}
                    </div>
                );

case 'select':
                return (
                    <div key={field.id} className="space-y-2">
                        <label htmlFor={field.id} className="text-sm font-medium">
                            {field.label}
                        </label>
                        <select
                            {...commonProps}
                            onChange={(e) => handleFieldChange(field.id, e.target.value)}
                        >
                            {field.options?.map((option: any) => (
                                <option key={option.value} value={option.value}>
                                    {option.label}
                                </option>
                            ))}
                        </select>
                        {field.description && (
                            <p className="text-sm text-gray-500">{field.description}</p>
                        )}
                        {error && (
                            <p className="text-sm text-red-500">{error}</p>
                        )}
                    </div>
                );

case 'switch':
                return (
                    <div key={field.id} className="space-y-2">
                        <div className="flex items-center justify-between">
                            <div>
                                <label htmlFor={field.id} className="text-sm font-medium">
                                    {field.label}
                                </label>
                                {field.description && (
                                    <p className="text-sm text-gray-500">{field.description}</p>
                                )}
                            </div>
                            <button
                                type="button"
                                onClick={() => handleFieldChange(field.id, !value)}
                                className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${value ? 'bg-blue-600' : 'bg-gray-200'
                                    }`}
                            >
                                <span
                                    className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${value ? 'translate-x-6' : 'translate-x-1'
                                        }`}
                                />
                            </button>
                        </div>
                        {error && (
                            <p className="text-sm text-red-500">{error}</p>
                        )}
                    </div>
                );

default:
                return null;
        }
    };

return (
        <div className="min-h-screen bg-gray-50">
            {/* 头部 */}
            <div className="bg-white border-b border-gray-200 px-6 py-4">
                <div className="flex items-center justify-between">
                    <div>
                        <h1 className="text-2xl font-bold text-gray-900">{config.header.title}</h1>
                        <p className="text-gray-600">{config.header.description}</p>
                    </div>
                    <div className="flex items-center gap-3">
                        {config.header.actions?.map((action) => (
                            <Button
                                key={action.id}
                                variant={action.variant as any}
                                onClick={action.onClick}
                                className="flex items-center gap-2"
                            >
                                {action.icon}
                                {action.label}
                            </Button>
                        ))}
                    </div>
                </div>

{/* 面包屑 */}
                <nav className="flex mt-4" aria-label="Breadcrumb">
                    <ol className="flex items-center space-x-2">
                        {config.header.breadcrumbs?.map((crumb, index) => (
                            <li key={index} className="flex items-center">
                                {index > 0 && <span className="mx-2 text-gray-400">/</span>}
                                {crumb.href ? (
                                    <a
                                        href={crumb.href}
                                        className="text-sm text-blue-600 hover:text-blue-800"
                                    >
                                        {crumb.label}
                                    </a>
                                ) : (
                                    <span className="text-sm text-gray-500">{crumb.label}</span>
                                )}
                            </li>
                        ))}
                    </ol>
                </nav>
            </div>

{/* 主要内容 */}
            <div className="flex-1 px-6 py-6">
                <div className="max-w-7xl mx-auto">
                    {/* 标签页 */}
                    <div className="bg-white rounded-lg shadow">
                        <div className="border-b border-gray-200">
                            <nav className="-mb-px flex space-x-8 px-6" aria-label="Tabs">
                                {config.tabs.map((tab) => (
                                    <button
                                        key={tab.id}
                                        className="flex items-center gap-2 py-4 px-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300"
                                    >
                                        {tab.icon}
                                        {tab.title}
                                    </button>
                                ))}
                            </nav>
                        </div>

{/* 标签页内容 */}
                        <div className="p-6">
                            {config.tabs.map((tab) => (
                                <div key={tab.id} className="space-y-8">
                                    {tab.sections.map((section) => (
                                        <div key={section.id} className="space-y-6">
                                            <div className="flex items-center gap-3">
                                                {section.icon}
                                                <div>
                                                    <h3 className="text-lg font-medium text-gray-900">
                                                        {section.title}
                                                    </h3>
                                                    <p className="text-sm text-gray-500">
                                                        {section.description}
                                                    </p>
                                                </div>
                                            </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                                {section.fields.map((field) => renderField(field))}
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            ))}
                        </div>
                    </div>

{/* 保存按钮和状态 */}
                    <div className="mt-8 flex items-center justify-between">
                        <ConfigStatusIndicator
                            status={saveStatus}
                            message={errorMessage}
                        />

<ConfigSaveButton
                            onSave={handleSave}
                            loading={loading || saveStatus === 'loading'}
                            disabled={Object.keys(validationErrors).length > 0}
                        />
                    </div>
                </div>
            </div>
        </div>
    );
}