70 lines
2.9 KiB
TypeScript
70 lines
2.9 KiB
TypeScript
import Card from '@mui/material/Card';
|
||
import CardActions from '@mui/material/CardActions';
|
||
import CardContent from '@mui/material/CardContent';
|
||
import Button from '@mui/material/Button';
|
||
import Typography from '@mui/material/Typography';
|
||
import CardHeader from '@mui/material/CardHeader';
|
||
import { user } from '@/store/store';
|
||
import { useAtomValue } from 'jotai';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import Box from '@mui/material/Box';
|
||
import useTitle from '@/hooks/useTitle';
|
||
import SkinViewUUID from '@/components/SkinViewUUID';
|
||
import root from '@/utils/root';
|
||
|
||
const Profile = function Profile() {
|
||
const navigate = useNavigate();
|
||
const userinfo = useAtomValue(user)
|
||
|
||
useTitle("个人信息")
|
||
|
||
|
||
return (
|
||
<>
|
||
<Box sx={{
|
||
display: "grid", gap: "1em", gridTemplateAreas: {
|
||
lg: '"a b d" "c b d"',
|
||
xs: '"a" "b" "c" "d"'
|
||
}, gridTemplateColumns: { lg: "1fr 1fr auto" }
|
||
}}>
|
||
<Card sx={{ gridArea: "a" }}>
|
||
<CardHeader title="游戏信息" />
|
||
<CardContent sx={{ display: "grid", gridTemplateColumns: "4em auto" }}>
|
||
<Typography>用户名</Typography>
|
||
<Typography>{userinfo.name}</Typography>
|
||
<Typography>UUID</Typography>
|
||
<Typography sx={{ wordBreak: 'break-all' }}>{userinfo.uuid}</Typography>
|
||
</CardContent>
|
||
{/* <CardActions>
|
||
<Button size="small">更改</Button>
|
||
</CardActions> */}
|
||
</Card>
|
||
<Card sx={{ gridArea: "b" }}>
|
||
<CardHeader title="皮肤" />
|
||
<CardContent sx={{ display: "flex", justifyContent: 'center' }}>
|
||
<SkinViewUUID uuid={userinfo?.uuid ?? ""} width={250} height={250} />
|
||
</CardContent>
|
||
<CardActions>
|
||
<Button onClick={() => navigate('/textures')} size="small">更改</Button>
|
||
</CardActions>
|
||
</Card>
|
||
<Card sx={{ gridArea: "c" }}>
|
||
<CardHeader title="启动器设置" />
|
||
<CardContent>
|
||
<Typography>本站 Yggdrasil 认证服务器地址</Typography>
|
||
<code style={{ wordBreak: "break-all" }}>{getYggRoot()}</code>
|
||
<Typography>点击下方按钮复制 API 地址，或者将按钮拖动至启动器的任意界面即可快速添加认证服务器。</Typography>
|
||
</CardContent>
|
||
</Card>
|
||
<Box sx={{ gridArea: "d" }}></Box>
|
||
</Box >
|
||
</>
|
||
)
|
||
}
|
||
|
||
function getYggRoot() {
|
||
const u = new URL(root() + "/api/yggdrasil")
|
||
return u.toString()
|
||
}
|
||
|
||
export default Profile |