126 lines
5.8 KiB
TypeScript
126 lines
5.8 KiB
TypeScript
"use client"
|
||
|
||
import { useState } from "react"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||
import { Label } from "@/components/ui/label"
|
||
import { Switch } from "@/components/ui/switch"
|
||
import { Badge } from "@/components/ui/badge"
|
||
import { Separator } from "@/components/ui/separator"
|
||
import { Save } from "lucide-react"
|
||
|
||
export default function Page() {
|
||
const [security, setSecurity] = useState({
|
||
twoFactor: true,
|
||
loginAlerts: true,
|
||
dataExport: false,
|
||
})
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
<div>
|
||
<h2 className="text-2xl font-bold tracking-tight">安全设置</h2>
|
||
<p className="text-muted-foreground">保护您的账户安全和隐私</p>
|
||
</div>
|
||
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>安全设置</CardTitle>
|
||
<CardDescription>保护您的账户安全</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-6">
|
||
<div className="space-y-4">
|
||
<div className="flex items-center justify-between">
|
||
<div className="space-y-1">
|
||
<Label>双重认证</Label>
|
||
<p className="text-sm text-muted-foreground">为您的账户添加额外的安全保护</p>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<Badge variant={security.twoFactor ? "default" : "secondary"}>
|
||
{security.twoFactor ? "已启用" : "未启用"}
|
||
</Badge>
|
||
<Switch
|
||
checked={security.twoFactor}
|
||
onCheckedChange={(checked) => setSecurity({ ...security, twoFactor: checked })}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<Separator />
|
||
|
||
<div className="flex items-center justify-between">
|
||
<div className="space-y-1">
|
||
<Label>登录提醒</Label>
|
||
<p className="text-sm text-muted-foreground">当有新设备登录时发送通知</p>
|
||
</div>
|
||
<Switch
|
||
checked={security.loginAlerts}
|
||
onCheckedChange={(checked) => setSecurity({ ...security, loginAlerts: checked })}
|
||
/>
|
||
</div>
|
||
|
||
<Separator />
|
||
|
||
<div className="flex items-center justify-between">
|
||
<div className="space-y-1">
|
||
<Label>数据导出</Label>
|
||
<p className="text-sm text-muted-foreground">允许导出个人数据</p>
|
||
</div>
|
||
<Switch
|
||
checked={security.dataExport}
|
||
onCheckedChange={(checked) => setSecurity({ ...security, dataExport: checked })}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-4 pt-4 border-t">
|
||
<h4 className="font-medium">活跃会话</h4>
|
||
<div className="space-y-3">
|
||
<div className="flex items-center justify-between p-3 border rounded-lg">
|
||
<div className="space-y-1">
|
||
<p className="font-medium">当前设备</p>
|
||
<p className="text-sm text-muted-foreground">Chrome on Windows • 北京市 • 刚刚活跃</p>
|
||
</div>
|
||
<Badge variant="outline">当前</Badge>
|
||
</div>
|
||
|
||
<div className="flex items-center justify-between p-3 border rounded-lg">
|
||
<div className="space-y-1">
|
||
<p className="font-medium">iPhone</p>
|
||
<p className="text-sm text-muted-foreground">Safari on iOS • 上海市 • 2小时前</p>
|
||
</div>
|
||
<Button variant="outline" size="sm">
|
||
注销
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<Button className="gap-2">
|
||
<Save className="h-4 w-4" />
|
||
保存安全设置
|
||
</Button>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-destructive/50">
|
||
<CardHeader>
|
||
<CardTitle className="text-destructive">危险操作</CardTitle>
|
||
<CardDescription>这些操作不可逆转，请谨慎操作</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<div className="flex items-center justify-between">
|
||
<div className="space-y-1">
|
||
<Label>删除账户</Label>
|
||
<p className="text-sm text-muted-foreground">永久删除您的账户和所有相关数据</p>
|
||
</div>
|
||
<Button variant="destructive" size="sm">
|
||
删除账户
|
||
</Button>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
)
|
||
}
|