496 lines
19 KiB
TypeScript
496 lines
19 KiB
TypeScript
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: <RefreshCw className="h-4 w-4" />,
|
||
variant: "outline",
|
||
onClick: () => window.location.reload()
|
||
},
|
||
{
|
||
id: "export",
|
||
label: "导出配置",
|
||
icon: <Save className="h-4 w-4" />,
|
||
variant: "outline",
|
||
onClick: () => console.log("导出配置")
|
||
}
|
||
]
|
||
},
|
||
tabs: [
|
||
{
|
||
id: "general",
|
||
title: "常规设置",
|
||
icon: <Settings className="h-4 w-4" />,
|
||
sections: [
|
||
{
|
||
id: "site-info",
|
||
title: "网站信息",
|
||
description: "网站基本信息和配置",
|
||
icon: <Globe className="h-5 w-5" />,
|
||
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: <Database className="h-4 w-4" />,
|
||
sections: [
|
||
{
|
||
id: "performance",
|
||
title: "性能设置",
|
||
description: "系统性能和资源配置",
|
||
icon: <Zap className="h-5 w-5" />,
|
||
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: <Shield className="h-4 w-4" />,
|
||
sections: [
|
||
{
|
||
id: "auth-settings",
|
||
title: "认证设置",
|
||
description: "用户认证和访问控制",
|
||
icon: <Lock className="h-5 w-5" />,
|
||
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: <Palette className="h-4 w-4" />,
|
||
sections: [
|
||
{
|
||
id: "theme-settings",
|
||
title: "主题设置",
|
||
description: "界面主题和视觉配置",
|
||
icon: <Monitor className="h-5 w-5" />,
|
||
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: <Bell className="h-4 w-4" />,
|
||
sections: [
|
||
{
|
||
id: "notification-settings",
|
||
title: "通知配置",
|
||
description: "系统通知和邮件设置",
|
||
icon: <Mail className="h-5 w-5" />,
|
||
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: <Users className="h-4 w-4" />,
|
||
badge: "4",
|
||
sections: [
|
||
{
|
||
id: "user-list",
|
||
title: "用户列表",
|
||
description: "管理系统用户账户和权限",
|
||
icon: <Users className="h-5 w-5" />,
|
||
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: false,
|
||
|
||
// 主题设置
|
||
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<string, string> = {};
|
||
|
||
// 自定义验证逻辑
|
||
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: <Settings className="h-4 w-4" />,
|
||
sections: [
|
||
{
|
||
id: "basic-info",
|
||
title: "基本信息",
|
||
icon: <Globe className="h-5 w-5" />,
|
||
fields: [
|
||
{
|
||
id: "name",
|
||
label: "名称",
|
||
type: "input",
|
||
value: "",
|
||
validation: { required: true }
|
||
},
|
||
{
|
||
id: "enabled",
|
||
label: "启用",
|
||
type: "switch",
|
||
value: true
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}; |