diff --git a/app/admin/common/admin-panel-config.tsx b/app/admin/common/admin-panel-config.tsx new file mode 100644 index 0000000..2d4ab12 --- /dev/null +++ b/app/admin/common/admin-panel-config.tsx @@ -0,0 +1,496 @@ +import { + Settings, + Users, + Database, + Shield, + Bell, + Mail, + Globe, + Palette, + Monitor, + Smartphone, + Save, + RefreshCw, + Eye, + EyeOff, + Zap, + HardDrive, + Lock, + Server +} from "lucide-react"; +import { AdminPanelConfig } from "@/types/admin-panel"; + +// 示例配置：完整的后台管理面板配置 +export const defaultAdminPanelConfig: AdminPanelConfig = { + header: { + title: "后台管理面板", + description: "系统设置和配置管理", + breadcrumbs: [ + { label: "首页", href: "/" }, + { label: "管理", href: "/admin" }, + { label: "系统设置" } + ], + actions: [ + { + id: "refresh", + label: "刷新", + icon: , + variant: "outline", + onClick: () => window.location.reload() + }, + { + id: "export", + label: "导出配置", + icon: , + variant: "outline", + onClick: () => console.log("导出配置") + } + ] + }, + tabs: [ + { + id: "general", + title: "常规设置", + icon: , + sections: [ + { + id: "site-info", + title: "网站信息", + description: "网站基本信息和配置", + icon: , + fields: [ + { + id: "siteName", + label: "网站名称", + description: "显示在浏览器标题栏的网站名称", + type: "input", + value: "我的网站", + placeholder: "请输入网站名称", + validation: { + required: true, + minLength: 2, + maxLength: 50 + } + }, + { + id: "siteDescription", + label: "网站描述", + description: "网站的简短描述，用于SEO", + type: "textarea", + value: "这是一个很棒的网站", + rows: 3, + validation: { + maxLength: 200 + } + }, + { + id: "adminEmail", + label: "管理员邮箱", + description: "接收系统通知的邮箱地址", + type: "email", + value: "admin@example.com", + validation: { + required: true, + pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/ + } + }, + { + id: "language", + label: "默认语言", + description: "网站的默认显示语言", + type: "select", + value: "zh-CN", + options: [ + { label: "简体中文", value: "zh-CN" }, + { label: "English", value: "en-US" }, + { label: "日本語", value: "ja-JP" }, + { label: "한국어", value: "ko-KR" } + ] + }, + { + id: "timezone", + label: "时区", + description: "服务器时区设置", + type: "select", + value: "Asia/Shanghai", + options: [ + { label: "北京时间 (UTC+8)", value: "Asia/Shanghai" }, + { label: "东京时间 (UTC+9)", value: "Asia/Tokyo" }, + { label: "纽约时间 (UTC-5)", value: "America/New_York" }, + { label: "伦敦时间 (UTC+0)", value: "Europe/London" } + ] + } + ] + } + ] + }, + { + id: "system", + title: "系统设置", + icon: , + sections: [ + { + id: "performance", + title: "性能设置", + description: "系统性能和资源配置", + icon: , + columns: 2, + fields: [ + { + id: "enableMaintenance", + label: "维护模式", + description: "启用后网站将显示维护页面", + type: "switch", + value: false + }, + { + id: "cacheEnabled", + label: "启用缓存", + description: "开启页面缓存以提高性能", + type: "switch", + value: true + }, + { + id: "maxUsers", + label: "最大用户数", + description: "系统允许的最大注册用户数量", + type: "slider", + value: 1000, + min: 100, + max: 10000, + step: 100 + }, + { + id: "sessionTimeout", + label: "会话超时时间（分钟）", + description: "用户登录会话的超时时间", + type: "slider", + value: 30, + min: 5, + max: 120, + step: 5 + }, + { + id: "backupFrequency", + label: "备份频率", + description: "自动备份数据的频率", + type: "select", + value: "daily", + options: [ + { label: "每小时", value: "hourly", description: "适合高频更新的网站" }, + { label: "每天", value: "daily", description: "推荐设置" }, + { label: "每周", value: "weekly", description: "适合低频更新的网站" }, + { label: "每月", value: "monthly", description: "仅适合静态网站" } + ] + }, + { + id: "logLevel", + label: "日志级别", + description: "系统日志记录的详细程度", + type: "select", + value: "info", + options: [ + { label: "错误", value: "error" }, + { label: "警告", value: "warn" }, + { label: "信息", value: "info" }, + { label: "调试", value: "debug" } + ] + } + ] + } + ] + }, + { + id: "security", + title: "安全设置", + icon: , + sections: [ + { + id: "auth-settings", + title: "认证设置", + description: "用户认证和访问控制", + icon: , + fields: [ + { + id: "enableRegistration", + label: "允许用户注册", + description: "是否允许新用户注册账户", + type: "switch", + value: true + }, + { + id: "enableSSL", + label: "强制HTTPS", + description: "强制所有连接使用HTTPS协议", + type: "switch", + value: true + }, + { + id: "securityLevel", + label: "安全级别", + description: "系统安全防护级别 (1-10)", + type: "slider", + value: 8, + min: 1, + max: 10, + step: 1 + }, + { + id: "maxLoginAttempts", + label: "最大登录尝试次数", + description: "账户锁定前允许的最大失败登录次数", + type: "number", + value: 5, + min: 1, + max: 20 + }, + { + id: "passwordPolicy", + label: "密码策略", + description: "密码复杂度要求", + type: "select", + value: "medium", + options: [ + { label: "简单", value: "simple", description: "至少6位字符" }, + { label: "中等", value: "medium", description: "至少8位，包含字母和数字" }, + { label: "复杂", value: "complex", description: "至少12位，包含大小写字母、数字和特殊字符" } + ] + } + ] + } + ] + }, + { + id: "appearance", + title: "外观设置", + icon: , + sections: [ + { + id: "theme-settings", + title: "主题设置", + description: "界面主题和视觉配置", + icon: , + fields: [ + { + id: "theme", + label: "主题模式", + description: "选择网站的主题外观", + type: "radio", + value: "light", + options: [ + { label: "浅色主题", value: "light" }, + { label: "深色主题", value: "dark" }, + { label: "自动切换", value: "auto" } + ] + }, + { + id: "primaryColor", + label: "主色调", + description: "网站的主要颜色", + type: "color", + value: "#3b82f6" + }, + { + id: "enableComments", + label: "启用评论", + description: "是否在文章页面显示评论功能", + type: "switch", + value: true + }, + { + id: "performanceScore", + label: "性能优化级别", + description: "网站性能优化程度 (0-100)", + type: "slider", + value: 75, + min: 0, + max: 100, + step: 5 + }, + { + id: "customCSS", + label: "自定义样式", + description: "添加自定义CSS代码", + type: "textarea", + value: "", + rows: 6, + placeholder: "/* 在这里添加自定义CSS */", + showWhen: (values) => values.theme === "dark" + } + ] + } + ] + }, + { + id: "notifications", + title: "通知设置", + icon: , + sections: [ + { + id: "notification-settings", + title: "通知配置", + description: "系统通知和邮件设置", + icon: , + fields: [ + { + id: "enableNotifications", + label: "启用通知", + description: "是否接收系统通知", + type: "switch", + value: true + }, + { + id: "emailNotifications", + label: "邮件通知类型", + description: "选择要接收的邮件通知类型", + type: "checkbox", + value: true, + // Note: For multiple checkboxes, you'd typically use a different approach + // This is a simplified example + }, + { + id: "maxFileSize", + label: "最大文件大小 (MB)", + description: "允许上传的最大文件大小", + type: "slider", + value: 10, + min: 1, + max: 100, + step: 1 + }, + { + id: "enableCDN", + label: "启用CDN", + description: "使用内容分发网络加速", + type: "switch", + value: false + }, + { + id: "notificationSound", + label: "通知声音", + description: "上传自定义通知声音文件", + type: "file", + value: null, + accept: "audio/*" + } + ] + } + ] + }, + { + id: "users", + title: "用户管理", + icon: , + badge: "4", + sections: [ + { + id: "user-list", + title: "用户列表", + description: "管理系统用户账户和权限", + icon: , + fields: [ + { + id: "userSearch", + label: "搜索用户", + description: "输入用户名或邮箱进行搜索", + type: "input", + value: "", + placeholder: "搜索用户..." + }, + { + id: "userRole", + label: "默认用户角色", + description: "新注册用户的默认角色", + type: "select", + value: "user", + options: [ + { label: "用户", value: "user" }, + { label: "编辑", value: "editor" }, + { label: "管理员", value: "admin" } + ] + } + ] + } + ] + } + ], + + // 配置选项 + autoSave: true, + autoSaveDelay: 3000, + validateOnChange: true, + validateOnSubmit: true, + + // 主题设置 + theme: { + spacing: "normal", + layout: "tabs" + }, + + // 回调函数 + onValueChange: (path, value, allValues) => { + console.log(`配置项 ${path} 已更改为:`, value); + }, + + onSave: async (values) => { + console.log("保存配置:", values); + // 这里可以添加保存到服务器的逻辑 + }, + + onReset: () => { + console.log("重置配置"); + }, + + onValidate: (values) => { + const errors: Record = {}; + + // 自定义验证逻辑 + if (values.siteName && values.siteName.includes("测试")) { + errors.siteName = "网站名称不能包含'测试'字样"; + } + + if (values.maxUsers && values.sessionTimeout && + values.maxUsers > 5000 && values.sessionTimeout < 15) { + errors.sessionTimeout = "当最大用户数超过5000时，会话超时时间不能少于15分钟"; + } + + return errors; + } +}; + +// 简化版配置示例 +export const simpleAdminPanelConfig: AdminPanelConfig = { + header: { + title: "快速设置", + description: "基本配置选项" + }, + tabs: [ + { + id: "basic", + title: "基本设置", + icon: , + sections: [ + { + id: "basic-info", + title: "基本信息", + icon: , + fields: [ + { + id: "name", + label: "名称", + type: "input", + value: "", + validation: { required: true } + }, + { + id: "enabled", + label: "启用", + type: "switch", + value: true + } + ] + } + ] + } + ] +}; \ No newline at end of file diff --git a/app/admin/common/control.tsx b/app/admin/common/control.tsx index 519715c..0a48546 100644 --- a/app/admin/common/control.tsx +++ b/app/admin/common/control.tsx @@ -29,287 +29,210 @@ import { Cpu, } from "lucide-react" - - export default function Control() { const [config, setConfig] = useState(defaultConfig) - const updateConfig = (key: keyof Config, value: any) => { - setConfig(prev => ({ - ...prev, - [key]: value - })) + const updateConfig = (path: string, value: any) => { + setConfig(prev => { + const newConfig = { ...prev } + const keys = path.split('.') + let current: any = newConfig + + for (let i = 0; i < keys.length - 1; i++) { + current = current[keys[i]] + } + + current[keys[keys.length - 1]] = value + return newConfig + }) } - const updateSliderConfig = (key: keyof Config, value: number[]) => { - updateConfig(key, value[0]) + const updateNestedConfig = (path: string, value: any) => { + updateConfig(path, value) } return ( -
+
-
+
+ {/* App Configuration */} - - System Controls + + 应用配置 - Audio, display, and hardware settings + 应用基本设置
- - updateSliderConfig('volume', value)} - max={100} - step={1} + + updateConfig('app.name', e.target.value)} + placeholder="输入应用名称" />
- - updateSliderConfig('brightness', value)} - max={100} - step={1} + + updateConfig('app.version', e.target.value)} + placeholder="输入版本号" />
-
- - updateSliderConfig('temperature', value)} - min={16} - max={30} - step={0.5} +
+ + updateConfig('app.debug', checked)} />
- - updateConfig('app.timezone', value)}> - Light Theme - Dark Theme - Auto Theme - High Contrast + UTC + 中国标准时间 + 美国东部时间 + 英国时间
- {/* Server Configuration */} + {/* Database Configuration */} + + + + + 数据库配置 + + 数据库连接设置 + + +
+ + updateConfig('database.max_connections', value[0])} + min={5} + max={100} + step={5} + /> +
+ +
+ + updateConfig('database.connection_timeout', value[0])} + min={10} + max={120} + step={5} + /> +
+ + + + {/* Kafka Configuration */} - Server Configuration + Kafka配置 - Core server and API settings + 消息队列设置
- - updateConfig('serverName', e.target.value)} - placeholder="Enter server name" - /> -
- -
- - updateConfig('apiKey', e.target.value)} - placeholder="Enter API key" - /> -
- -
- - -
- -
- - -
- - - - {/* Performance Settings */} - - - - - Performance Settings - - Resource allocation and optimization - - -
- + updateSliderConfig('maxConnections', value)} - min={10} - max={500} - step={10} - /> -
- -
- - updateSliderConfig('cacheSize', value)} - min={64} - max={2048} - step={64} - /> -
- -
- - updateSliderConfig('threadCount', value)} + id="kafka-retries" + value={[config.kafka.max_retries]} + onValueChange={(value) => updateConfig('kafka.max_retries', value[0])} min={1} - max={32} + max={10} step={1} />
- + updateSliderConfig('memoryLimit', value)} - min={512} - max={8192} - step={256} - /> -
- -
- - updateSliderConfig('networkBandwidth', value)} - min={10} - max={1000} - step={10} + id="kafka-delay" + value={[config.kafka.retry_delay]} + onValueChange={(value) => updateConfig('kafka.retry_delay', value[0])} + min={100} + max={5000} + step={100} />
- {/* Security & Features */} + {/* Security Configuration */} - Security & Features + 安全配置 - Security settings and feature toggles + 安全相关设置 -
- - updateConfig('sslEnabled', checked)} +
+ + updateConfig('security.session_timeout', value[0])} + min={1800} + max={7200} + step={300} />
-
- - updateConfig('autoBackup', checked)} - /> -
- -
- - updateConfig('compressionEnabled', checked)} - /> -
- -
- - updateConfig('debugMode', checked)} - /> -
- -
- - updateConfig('maintenanceMode', checked)} +
+ + updateConfig('security.max_login_attempts', value[0])} + min={3} + max={10} + step={1} />
+ + + {/* Logging Configuration */} + + + + + 日志配置 + + 日志记录设置 + +
- - updateConfig('logging.level', value)}> @@ -318,242 +241,333 @@ export default function Control() { Info Warning Error - Fatal
+ +
+ + updateConfig('logging.max_files', value[0])} + min={5} + max={50} + step={5} + /> +
- {/* Notifications & Alerts */} + {/* Cache Configuration */} + + + + + 缓存配置 + + 缓存系统设置 + + +
+ + updateConfig('cache.ttl', value[0])} + min={60} + max={3600} + step={60} + /> +
+ +
+ + updateConfig('cache.max_size', value[0])} + min={100} + max={10000} + step={100} + /> +
+ + + + {/* Site Configuration */} + + + + + 站点配置 + + 网站基本设置 + + +
+ + updateConfig('site.name', e.target.value)} + placeholder="输入站点名称" + /> +
+ +
+ + +
+ +
+ + updateConfig('site.brand.logo_url', e.target.value)} + placeholder="输入Logo URL" + /> +
+ +
+ + updateConfig('site.brand.primary_color', e.target.value)} + /> +
+ +
+ + updateConfig('site.brand.dark_mode_default', checked)} + /> +
+ + + + {/* Notice Configuration */} - Notifications & Alerts + 通知配置 - Configure notification preferences + 系统通知设置
- + updateConfig('notifications', checked)} + id="banner-enabled" + checked={config.notice.banner.enabled} + onCheckedChange={(checked) => updateConfig('notice.banner.enabled', checked)} />
-
- - updateConfig('emailAlerts', checked)} - /> -
+ {config.notice.banner.enabled && ( + <> +
+ + updateConfig('notice.banner.text.zh-CN', e.target.value)} + placeholder="输入中文横幅文本" + /> +
-
- - updateConfig('smsAlerts', checked)} - /> -
- -
- - updateConfig('monitoringEnabled', checked)} - /> -
- -
- - -
- -
- - -
+
+ + updateConfig('notice.banner.text.en', e.target.value)} + placeholder="Enter English banner text" + /> +
+ + )} - {/* Advanced Configuration */} + {/* Maintenance Configuration */} - - Advanced Configuration + + 维护配置 - Detailed system configuration options + 系统维护设置 -
- -