129 lines
5.9 KiB
TypeScript
129 lines
5.9 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 { Input } from "@/components/ui/input"
|
|
import { Label } from "@/components/ui/label"
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
|
import { Separator } from "@/components/ui/separator"
|
|
import { Eye, EyeOff, Save } from "lucide-react"
|
|
|
|
export default function Page() {
|
|
const [showPassword, setShowPassword] = useState(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">zhangsan2024</p>
|
|
</div>
|
|
<Button variant="outline" size="sm">
|
|
修改
|
|
</Button>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div className="flex items-center justify-between">
|
|
<div className="space-y-1">
|
|
<Label>邮箱地址</Label>
|
|
<p className="text-sm text-muted-foreground">zhangsan@example.com</p>
|
|
</div>
|
|
<Button variant="outline" size="sm">
|
|
修改
|
|
</Button>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="current-password">当前密码</Label>
|
|
<div className="relative">
|
|
<Input id="current-password" type={showPassword ? "text" : "password"} placeholder="输入当前密码" />
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
|
|
onClick={() => setShowPassword(!showPassword)}
|
|
>
|
|
{showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="new-password">新密码</Label>
|
|
<Input id="new-password" type="password" placeholder="输入新密码" />
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="confirm-password">确认新密码</Label>
|
|
<Input id="confirm-password" type="password" placeholder="再次输入新密码" />
|
|
</div>
|
|
</div>
|
|
|
|
<Button className="gap-2">
|
|
<Save className="h-4 w-4" />
|
|
更新密码
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>语言和地区</CardTitle>
|
|
<CardDescription>设置您的语言偏好和时区</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label>语言</Label>
|
|
<Select defaultValue="zh-cn">
|
|
<SelectTrigger>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="zh-cn">简体中文</SelectItem>
|
|
<SelectItem value="zh-tw">繁體中文</SelectItem>
|
|
<SelectItem value="en">English</SelectItem>
|
|
<SelectItem value="ja">日本語</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label>时区</Label>
|
|
<Select defaultValue="asia-shanghai">
|
|
<SelectTrigger>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="asia-shanghai">Asia/Shanghai (UTC+8)</SelectItem>
|
|
<SelectItem value="asia-tokyo">Asia/Tokyo (UTC+9)</SelectItem>
|
|
<SelectItem value="america-new-york">America/New_York (UTC-5)</SelectItem>
|
|
<SelectItem value="europe-london">Europe/London (UTC+0)</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<Button>保存设置</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|