477 lines
22 KiB
TypeScript
477 lines
22 KiB
TypeScript
import { DashboardShell } from "@/components/dashboard-shell"
|
||
import { DashboardHeader } from "@/components/dashboard-header"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
|
||
import { Input } from "@/components/ui/input"
|
||
import { Label } from "@/components/ui/label"
|
||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||
import { Textarea } from "@/components/ui/textarea"
|
||
import { Switch } from "@/components/ui/switch"
|
||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||
import { Save, RefreshCw, Database, Shield, Bell, Sparkles } from "lucide-react"
|
||
|
||
export default function SettingsPage() {
|
||
return (
|
||
<DashboardShell>
|
||
<DashboardHeader heading="系统设置" text="管理系统配置和参数">
|
||
<Button className="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 transition-all duration-300 shadow-md hover:shadow-lg">
|
||
<Save className="mr-2 h-4 w-4" />
|
||
保存设置
|
||
</Button>
|
||
</DashboardHeader>
|
||
|
||
<Tabs defaultValue="general" className="space-y-4">
|
||
<TabsList className="bg-white p-1 shadow-md rounded-lg border">
|
||
<TabsTrigger
|
||
value="general"
|
||
className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-pink-500 data-[state=active]:to-purple-600 data-[state=active]:text-white rounded-md transition-all duration-300"
|
||
>
|
||
基本设置
|
||
</TabsTrigger>
|
||
<TabsTrigger
|
||
value="database"
|
||
className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-pink-500 data-[state=active]:to-purple-600 data-[state=active]:text-white rounded-md transition-all duration-300"
|
||
>
|
||
数据库设置
|
||
</TabsTrigger>
|
||
<TabsTrigger
|
||
value="security"
|
||
className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-pink-500 data-[state=active]:to-purple-600 data-[state=active]:text-white rounded-md transition-all duration-300"
|
||
>
|
||
安全设置
|
||
</TabsTrigger>
|
||
<TabsTrigger
|
||
value="notifications"
|
||
className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-pink-500 data-[state=active]:to-purple-600 data-[state=active]:text-white rounded-md transition-all duration-300"
|
||
>
|
||
通知设置
|
||
</TabsTrigger>
|
||
</TabsList>
|
||
|
||
<TabsContent value="general" className="space-y-4">
|
||
<Card className="border-none shadow-lg bg-gradient-to-br from-white to-purple-50">
|
||
<CardHeader>
|
||
<CardTitle className="text-xl font-bold flex items-center">
|
||
<span className="bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-pink-600">
|
||
基本设置
|
||
</span>
|
||
<div className="ml-2 h-1 w-10 bg-gradient-to-r from-purple-600 to-pink-600 rounded-full"></div>
|
||
</CardTitle>
|
||
<CardDescription>配置系统基本参数</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="system-name">系统名称</Label>
|
||
<Input
|
||
id="system-name"
|
||
defaultValue="洛天依管理系统"
|
||
className="border-gray-300 focus-visible:ring-pink-500"
|
||
/>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="system-version">系统版本</Label>
|
||
<Input
|
||
id="system-version"
|
||
defaultValue="1.0.0"
|
||
className="border-gray-300 focus-visible:ring-pink-500"
|
||
disabled
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="system-description">系统描述</Label>
|
||
<Textarea
|
||
id="system-description"
|
||
defaultValue="洛天依APP管理系统，用于管理洛天依的AI模型、服装、道具等内容。"
|
||
className="min-h-[100px] border-gray-300 focus-visible:ring-pink-500"
|
||
/>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="language">系统语言</Label>
|
||
<Select defaultValue="zh-CN">
|
||
<SelectTrigger className="border-gray-300 focus:ring-pink-500">
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="zh-CN">简体中文</SelectItem>
|
||
<SelectItem value="en-US">English</SelectItem>
|
||
<SelectItem value="ja-JP">日本語</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="timezone">系统时区</Label>
|
||
<Select defaultValue="Asia/Shanghai">
|
||
<SelectTrigger className="border-gray-300 focus:ring-pink-500">
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="Asia/Shanghai">中国标准时间 (UTC+8)</SelectItem>
|
||
<SelectItem value="America/New_York">美国东部时间 (UTC-5)</SelectItem>
|
||
<SelectItem value="Europe/London">格林威治标准时间 (UTC+0)</SelectItem>
|
||
<SelectItem value="Asia/Tokyo">日本标准时间 (UTC+9)</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center space-x-2 pt-2">
|
||
<Switch id="maintenance-mode" />
|
||
<Label htmlFor="maintenance-mode" className="cursor-pointer">
|
||
启用维护模式
|
||
</Label>
|
||
</div>
|
||
</CardContent>
|
||
<CardFooter className="flex justify-between">
|
||
<Button variant="outline" className="hover:bg-pink-50 hover:text-pink-700 transition-all duration-200">
|
||
<RefreshCw className="mr-2 h-4 w-4" />
|
||
恢复默认设置
|
||
</Button>
|
||
<Button className="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 transition-all duration-300 shadow-md hover:shadow-lg">
|
||
<Save className="mr-2 h-4 w-4" />
|
||
保存设置
|
||
</Button>
|
||
</CardFooter>
|
||
</Card>
|
||
|
||
<Card className="border-none shadow-lg bg-gradient-to-br from-white to-blue-50">
|
||
<CardHeader>
|
||
<CardTitle className="text-xl font-bold flex items-center">
|
||
<span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-teal-600">
|
||
系统外观
|
||
</span>
|
||
<div className="ml-2 h-1 w-10 bg-gradient-to-r from-blue-600 to-teal-600 rounded-full"></div>
|
||
</CardTitle>
|
||
<CardDescription>配置系统外观和主题</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="theme">系统主题</Label>
|
||
<Select defaultValue="light">
|
||
<SelectTrigger className="border-gray-300 focus:ring-blue-500">
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="light">浅色主题</SelectItem>
|
||
<SelectItem value="dark">深色主题</SelectItem>
|
||
<SelectItem value="system">跟随系统</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="primary-color">主题色</Label>
|
||
<Select defaultValue="pink-purple">
|
||
<SelectTrigger className="border-gray-300 focus:ring-blue-500">
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="pink-purple">粉紫渐变</SelectItem>
|
||
<SelectItem value="blue-teal">蓝青渐变</SelectItem>
|
||
<SelectItem value="orange-red">橙红渐变</SelectItem>
|
||
<SelectItem value="green-teal">绿青渐变</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center space-x-2 pt-2">
|
||
<Switch id="animations" defaultChecked />
|
||
<Label htmlFor="animations" className="cursor-pointer">
|
||
启用界面动画
|
||
</Label>
|
||
</div>
|
||
</CardContent>
|
||
<CardFooter className="flex justify-end">
|
||
<Button className="bg-gradient-to-r from-blue-500 to-teal-600 hover:from-blue-600 hover:to-teal-700 transition-all duration-300 shadow-md hover:shadow-lg">
|
||
<Sparkles className="mr-2 h-4 w-4" />
|
||
应用主题
|
||
</Button>
|
||
</CardFooter>
|
||
</Card>
|
||
</TabsContent>
|
||
|
||
<TabsContent value="database" className="space-y-4">
|
||
<Card className="border-none shadow-lg bg-gradient-to-br from-white to-purple-50">
|
||
<CardHeader>
|
||
<CardTitle className="text-xl font-bold flex items-center">
|
||
<span className="bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-pink-600">
|
||
数据库设置
|
||
</span>
|
||
<div className="ml-2 h-1 w-10 bg-gradient-to-r from-purple-600 to-pink-600 rounded-full"></div>
|
||
</CardTitle>
|
||
<CardDescription>配置系统数据库连接</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="db-type">数据库类型</Label>
|
||
<Select defaultValue="mysql">
|
||
<SelectTrigger className="border-gray-300 focus:ring-pink-500">
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="mysql">MySQL</SelectItem>
|
||
<SelectItem value="postgresql">PostgreSQL</SelectItem>
|
||
<SelectItem value="mongodb">MongoDB</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="db-host">数据库主机</Label>
|
||
<Input
|
||
id="db-host"
|
||
defaultValue="localhost"
|
||
className="border-gray-300 focus-visible:ring-pink-500"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="db-port">数据库端口</Label>
|
||
<Input id="db-port" defaultValue="3306" className="border-gray-300 focus-visible:ring-pink-500" />
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="db-name">数据库名称</Label>
|
||
<Input
|
||
id="db-name"
|
||
defaultValue="luo_tianyi_app"
|
||
className="border-gray-300 focus-visible:ring-pink-500"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="db-user">数据库用户名</Label>
|
||
<Input id="db-user" defaultValue="admin" className="border-gray-300 focus-visible:ring-pink-500" />
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="db-password">数据库密码</Label>
|
||
<Input
|
||
id="db-password"
|
||
type="password"
|
||
defaultValue="********"
|
||
className="border-gray-300 focus-visible:ring-pink-500"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center space-x-2 pt-2">
|
||
<Switch id="db-ssl" defaultChecked />
|
||
<Label htmlFor="db-ssl" className="cursor-pointer">
|
||
启用SSL连接
|
||
</Label>
|
||
</div>
|
||
</CardContent>
|
||
<CardFooter className="flex justify-between">
|
||
<Button variant="outline" className="hover:bg-pink-50 hover:text-pink-700 transition-all duration-200">
|
||
<Database className="mr-2 h-4 w-4" />
|
||
测试连接
|
||
</Button>
|
||
<Button className="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 transition-all duration-300 shadow-md hover:shadow-lg">
|
||
<Save className="mr-2 h-4 w-4" />
|
||
保存设置
|
||
</Button>
|
||
</CardFooter>
|
||
</Card>
|
||
</TabsContent>
|
||
|
||
<TabsContent value="security" className="space-y-4">
|
||
<Card className="border-none shadow-lg bg-gradient-to-br from-white to-purple-50">
|
||
<CardHeader>
|
||
<CardTitle className="text-xl font-bold flex items-center">
|
||
<span className="bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-pink-600">
|
||
安全设置
|
||
</span>
|
||
<div className="ml-2 h-1 w-10 bg-gradient-to-r from-purple-600 to-pink-600 rounded-full"></div>
|
||
</CardTitle>
|
||
<CardDescription>配置系统安全参数</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="session-timeout">会话超时时间（分钟）</Label>
|
||
<Input
|
||
id="session-timeout"
|
||
type="number"
|
||
defaultValue="30"
|
||
className="border-gray-300 focus-visible:ring-pink-500"
|
||
/>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="max-login-attempts">最大登录尝试次数</Label>
|
||
<Input
|
||
id="max-login-attempts"
|
||
type="number"
|
||
defaultValue="5"
|
||
className="border-gray-300 focus-visible:ring-pink-500"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="password-policy">密码策略</Label>
|
||
<Select defaultValue="strong">
|
||
<SelectTrigger className="border-gray-300 focus:ring-pink-500">
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="basic">基本（至少8个字符）</SelectItem>
|
||
<SelectItem value="medium">中等（至少8个字符，包含数字和字母）</SelectItem>
|
||
<SelectItem value="strong">强（至少8个字符，包含大小写字母、数字和特殊字符）</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="password-expiry">密码过期时间（天）</Label>
|
||
<Input
|
||
id="password-expiry"
|
||
type="number"
|
||
defaultValue="90"
|
||
className="border-gray-300 focus-visible:ring-pink-500"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center space-x-2 pt-2">
|
||
<Switch id="two-factor-auth" defaultChecked />
|
||
<Label htmlFor="two-factor-auth" className="cursor-pointer">
|
||
启用双因素认证
|
||
</Label>
|
||
</div>
|
||
|
||
<div className="flex items-center space-x-2 pt-2">
|
||
<Switch id="ip-restriction" />
|
||
<Label htmlFor="ip-restriction" className="cursor-pointer">
|
||
启用IP限制
|
||
</Label>
|
||
</div>
|
||
</CardContent>
|
||
<CardFooter className="flex justify-between">
|
||
<Button variant="outline" className="hover:bg-pink-50 hover:text-pink-700 transition-all duration-200">
|
||
<RefreshCw className="mr-2 h-4 w-4" />
|
||
恢复默认设置
|
||
</Button>
|
||
<Button className="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 transition-all duration-300 shadow-md hover:shadow-lg">
|
||
<Shield className="mr-2 h-4 w-4" />
|
||
保存安全设置
|
||
</Button>
|
||
</CardFooter>
|
||
</Card>
|
||
</TabsContent>
|
||
|
||
<TabsContent value="notifications" className="space-y-4">
|
||
<Card className="border-none shadow-lg bg-gradient-to-br from-white to-purple-50">
|
||
<CardHeader>
|
||
<CardTitle className="text-xl font-bold flex items-center">
|
||
<span className="bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-pink-600">
|
||
通知设置
|
||
</span>
|
||
<div className="ml-2 h-1 w-10 bg-gradient-to-r from-purple-600 to-pink-600 rounded-full"></div>
|
||
</CardTitle>
|
||
<CardDescription>配置系统通知参数</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="email-server">邮件服务器</Label>
|
||
<Input
|
||
id="email-server"
|
||
defaultValue="smtp.example.com"
|
||
className="border-gray-300 focus-visible:ring-pink-500"
|
||
/>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="email-port">邮件服务器端口</Label>
|
||
<Input id="email-port" defaultValue="587" className="border-gray-300 focus-visible:ring-pink-500" />
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="email-encryption">加密方式</Label>
|
||
<Select defaultValue="tls">
|
||
<SelectTrigger className="border-gray-300 focus:ring-pink-500">
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="none">无</SelectItem>
|
||
<SelectItem value="ssl">SSL</SelectItem>
|
||
<SelectItem value="tls">TLS</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="email-username">邮件账户</Label>
|
||
<Input
|
||
id="email-username"
|
||
defaultValue="noreply@example.com"
|
||
className="border-gray-300 focus-visible:ring-pink-500"
|
||
/>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="email-password">邮件密码</Label>
|
||
<Input
|
||
id="email-password"
|
||
type="password"
|
||
defaultValue="********"
|
||
className="border-gray-300 focus-visible:ring-pink-500"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label>通知类型</Label>
|
||
<div className="space-y-2">
|
||
<div className="flex items-center space-x-2">
|
||
<Switch id="notify-login" defaultChecked />
|
||
<Label htmlFor="notify-login" className="cursor-pointer">
|
||
登录通知
|
||
</Label>
|
||
</div>
|
||
<div className="flex items-center space-x-2">
|
||
<Switch id="notify-content" defaultChecked />
|
||
<Label htmlFor="notify-content" className="cursor-pointer">
|
||
内容更新通知
|
||
</Label>
|
||
</div>
|
||
<div className="flex items-center space-x-2">
|
||
<Switch id="notify-system" defaultChecked />
|
||
<Label htmlFor="notify-system" className="cursor-pointer">
|
||
系统更新通知
|
||
</Label>
|
||
</div>
|
||
<div className="flex items-center space-x-2">
|
||
<Switch id="notify-security" defaultChecked />
|
||
<Label htmlFor="notify-security" className="cursor-pointer">
|
||
安全警报通知
|
||
</Label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
<CardFooter className="flex justify-between">
|
||
<Button variant="outline" className="hover:bg-pink-50 hover:text-pink-700 transition-all duration-200">
|
||
<RefreshCw className="mr-2 h-4 w-4" />
|
||
恢复默认设置
|
||
</Button>
|
||
<Button className="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 transition-all duration-300 shadow-md hover:shadow-lg">
|
||
<Bell className="mr-2 h-4 w-4" />
|
||
保存通知设置
|
||
</Button>
|
||
</CardFooter>
|
||
</Card>
|
||
</TabsContent>
|
||
</Tabs>
|
||
</DashboardShell>
|
||
)
|
||
}
|