57 lines
2.4 KiB
TypeScript
57 lines
2.4 KiB
TypeScript
import React from 'react';
|
|
import { User, Globe, LogOut, Settings } from 'lucide-react';
|
|
import { Button, Card, Input } from '../components/UI';
|
|
|
|
export const ProfilePage: React.FC = () => {
|
|
return (
|
|
<div className="max-w-2xl mx-auto space-y-8 animate-in fade-in pt-10">
|
|
<div className="flex items-center space-x-4">
|
|
<div className="h-20 w-20 rounded-full bg-primary flex items-center justify-center text-primary-foreground text-3xl font-bold">
|
|
A
|
|
</div>
|
|
<div>
|
|
<h1 className="text-2xl font-bold">Admin User</h1>
|
|
<p className="text-muted-foreground">admin@example.com</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid gap-6">
|
|
<Card className="p-6 space-y-6">
|
|
<h2 className="text-lg font-semibold flex items-center"><User className="mr-2 h-5 w-5"/> 账户信息</h2>
|
|
<div className="grid gap-4">
|
|
<div className="grid gap-2">
|
|
<label className="text-sm font-medium">用户名</label>
|
|
<Input defaultValue="Admin User" />
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<label className="text-sm font-medium">邮箱</label>
|
|
<Input defaultValue="admin@example.com" disabled className="bg-muted"/>
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-end">
|
|
<Button>保存更改</Button>
|
|
</div>
|
|
</Card>
|
|
|
|
<Card className="p-6 space-y-6">
|
|
<h2 className="text-lg font-semibold flex items-center"><Settings className="mr-2 h-5 w-5"/> 系统设置</h2>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center space-x-2">
|
|
<Globe className="h-5 w-5 text-muted-foreground" />
|
|
<span>语言选择 / Language</span>
|
|
</div>
|
|
<select className="flex h-9 w-32 rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
|
|
<option>中文</option>
|
|
<option>English</option>
|
|
</select>
|
|
</div>
|
|
</Card>
|
|
|
|
<Button variant="destructive" className="w-full">
|
|
<LogOut className="mr-2 h-4 w-4" /> 退出登录
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|