修复部分问题

frontend/src/store/store.ts

@@ -1,3 +1,4 @@
+import { atom } from 'jotai'
 import { atomWithStorage } from 'jotai/utils'
 
 export const token = atomWithStorage("token", "")
@@ -5,3 +6,5 @@ export const user = atomWithStorage("username", {
     name: "",
     uuid: ""
 })
+
+export const LayoutAlertErr = atom("")

frontend/src/views/Layout.tsx

@@ -13,15 +13,13 @@ import ListItem from '@mui/material/ListItem';
 import ListItemButton from '@mui/material/ListItemButton';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
-import InboxIcon from '@mui/icons-material/MoveToInbox';
-import MailIcon from '@mui/icons-material/Mail';
 import AppBar from '@mui/material/AppBar';
 import { Outlet } from 'react-router-dom';
 import { AccountCircle } from '@mui/icons-material';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
-import { token, user } from '@/store/store';
-import { atom, useAtom, useAtomValue, useSetAtom } from 'jotai';
+import { LayoutAlertErr, token, user } from '@/store/store';
+import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import Button from '@mui/material/Button';
 import { useNavigate } from "react-router-dom";
 import { useRequest, useMemoizedFn } from 'ahooks';
@@ -30,12 +28,13 @@ import Snackbar from '@mui/material/Snackbar';
 import Alert from '@mui/material/Alert';
 import { memo } from 'react';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import useTilg from 'tilg'
 import { ApiErr } from '@/apis/error';
 import Typography from '@mui/material/Typography';
 import Container from '@mui/material/Container';
-
-export const AlertErr = atom("")
+import PersonIcon from '@mui/icons-material/Person';
+import SecurityIcon from '@mui/icons-material/Security';
+import SettingsIcon from '@mui/icons-material/Settings';
+import useTilg from 'tilg'
 
 const drawerWidth = 240;
 
@@ -48,16 +47,21 @@ const DrawerHeader = styled('div')(({ theme }) => ({
     justifyContent: 'flex-end',
 }));
 
+interface ListItem {
+    icon: JSX.Element
+    title: string
+    link: string
+}
 
-export default function Layout() {
+
+const Layout = memo(function Layout() {
     const theme = useTheme();
     const isLg = useMediaQuery(theme.breakpoints.up('lg'))
     const [open, setOpen] = React.useState(false);
     const nowToken = useAtomValue(token)
-    const [err, setErr] = useAtom(AlertErr)
+    const [err, setErr] = useAtom(LayoutAlertErr)
     const navigate = useNavigate();
 
-
     const userinfo = useRequest(() => userInfo(nowToken), {
         refreshDeps: [nowToken],
         cacheKey: "/api/v1/user",
@@ -71,7 +75,32 @@ export default function Layout() {
         }
     })
 
-    useTilg(isLg, open)
+    const userDrawerList = React.useMemo(() => [
+        {
+            icon: <PersonIcon />,
+            title: '个人信息',
+            link: '/profile'
+        },
+        {
+            icon: <SettingsIcon />,
+            title: '皮肤设置',
+            link: '/textures'
+        },
+        {
+            icon: <SecurityIcon />,
+            title: '安全设置',
+            link: '/setting'
+        }
+    ] as ListItem[], [])
+
+    const adminDrawerList = React.useMemo(() => [
+        {
+            icon: <PersonIcon />,
+            title: 'test'
+        }
+    ] as ListItem[], [])
+
+    useTilg()
 
     return (<>
         <Box sx={{ display: 'flex' }}>
@@ -103,33 +132,11 @@ export default function Layout() {
                         </IconButton>
                     </DrawerHeader>
                     <Divider />
-                    <List>
-                        {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
-                            <ListItem key={text} disablePadding>
-                                <ListItemButton>
-                                    <ListItemIcon>
-                                        {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
-                                    </ListItemIcon>
-                                    <ListItemText primary={text} />
-                                </ListItemButton>
-                            </ListItem>
-                        ))}
-                    </List>
+                    <MyList list={userDrawerList} />
                     {userinfo.data?.is_admin && (
                         <>
                             <Divider />
-                            <List>
-                                {['All mail', 'Trash', 'Spam'].map((text, index) => (
-                                    <ListItem key={text} disablePadding>
-                                        <ListItemButton>
-                                            <ListItemIcon>
-                                                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
-                                            </ListItemIcon>
-                                            <ListItemText primary={text} />
-                                        </ListItemButton>
-                                    </ListItem>
-                                ))}
-                            </List>
+                            <MyList list={adminDrawerList} />
                         </>)}
                 </Drawer>
             )}
@@ -149,14 +156,14 @@ export default function Layout() {
             </Box>
         </Box>
     </>)
-}
+})
 
-const MyToolbar = memo((p: { setOpen: (v: boolean) => void }) => {
+const MyToolbar = memo(function MyToolbar(p: { setOpen: (v: boolean) => void }) {
     const [nowUser, setNowUser] = useAtom(user)
     const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
     const navigate = useNavigate();
     const [, setToken] = useAtom(token)
-    const setErr = useSetAtom(AlertErr)
+    const setErr = useSetAtom(LayoutAlertErr)
 
     const server = useRequest(serverInfo, {
         cacheKey: "/api/yggdrasil",
@@ -168,7 +175,6 @@ const MyToolbar = memo((p: { setOpen: (v: boolean) => void }) => {
     })
 
 
-
     const handleLogOut = useMemoizedFn(() => {
         setAnchorEl(null);
         setNowUser({ name: "", uuid: "" })
@@ -176,8 +182,6 @@ const MyToolbar = memo((p: { setOpen: (v: boolean) => void }) => {
         navigate("/")
     })
 
-
-
     return (
         <>
             <Toolbar>
@@ -234,3 +238,38 @@ const MyToolbar = memo((p: { setOpen: (v: boolean) => void }) => {
             </Toolbar>
         </>)
 })
+
+const MyList = memo(function MyList(p: { list: ListItem[] }) {
+    useTilg()
+
+    return (
+        <>
+            <List>
+                {p.list.map(item =>
+                    <MyListItem {...item} key={item.title} />
+                )}
+            </List>
+        </>
+    )
+})
+
+const MyListItem = memo(function MyListItem(p: ListItem) {
+    const navigate = useNavigate();
+
+    const handleClick = useMemoizedFn(() => {
+        navigate(p.link)
+    })
+
+    return (
+        <ListItem disablePadding>
+            <ListItemButton onClick={handleClick}>
+                <ListItemIcon>
+                    {p.icon}
+                </ListItemIcon>
+                <ListItemText primary={p.title} />
+            </ListItemButton>
+        </ListItem>
+    )
+})
+
+export default Layout

frontend/src/views/profile/Profile.tsx

@@ -6,10 +6,9 @@ import Typography from '@mui/material/Typography';
 import CardHeader from '@mui/material/CardHeader';
 import { useHover, useRequest } from 'ahooks';
 import { ApiErr } from '@/apis/error';
-import { token } from '@/store/store';
+import { LayoutAlertErr, token } from '@/store/store';
 import { useAtomValue, useSetAtom } from 'jotai';
 import { userInfo, yggProfile } from '@/apis/apis';
-import { AlertErr } from '@/views/Layout';
 import { useNavigate } from 'react-router-dom';
 import Box from '@mui/material/Box';
 import { memo, useEffect, useRef, useState } from 'react';
@@ -19,12 +18,11 @@ import type { ReactSkinview3dOptions } from "react-skinview3d"
 import { WalkingAnimation } from "skinview3d"
 import type { SkinViewer } from "skinview3d"
 import Skeleton from '@mui/material/Skeleton';
-import useTilg from 'tilg';
 
-const Profile = () => {
+const Profile = memo(function Profile() {
     const nowToken = useAtomValue(token)
     const navigate = useNavigate();
-    const setErr = useSetAtom(AlertErr)
+    const setErr = useSetAtom(LayoutAlertErr)
     const [textures, setTextures] = useState({ skin: "", cape: "", model: "default" })
 
     const userinfo = useRequest(() => userInfo(nowToken), {
@@ -67,10 +65,10 @@ const Profile = () => {
                 <Card sx={{ gridArea: "a" }}>
                     <CardHeader title="信息" />
                     <CardContent sx={{ display: "grid", gridTemplateColumns: "4em auto" }}>
-                        <Typography>用户名</Typography>
-                        <Typography>{SkinInfo.loading || userinfo.loading ? <Skeleton /> : SkinInfo.data?.name}</Typography>
                         <Typography>uid</Typography>
                         <Typography sx={{ wordBreak: 'break-all' }}>{userinfo.loading ? <Skeleton /> : userinfo.data?.uid}</Typography>
+                        <Typography>name</Typography>
+                        <Typography>{SkinInfo.loading || userinfo.loading ? <Skeleton /> : SkinInfo.data?.name}</Typography>
                         <Typography>uuid</Typography>
                         <Typography sx={{ wordBreak: 'break-all' }}>{userinfo.loading ? <Skeleton /> : userinfo.data?.uuid}</Typography>
                     </CardContent>
@@ -94,25 +92,24 @@ const Profile = () => {
                         }
                     </CardContent>
                     <CardActions>
-                        <Button size="small">更改</Button>
+                        <Button onClick={() => navigate('/textures')} size="small">更改</Button>
                     </CardActions>
                 </Card>
                 <Card sx={{ gridArea: "c" }}>
                     <CardHeader title="启动器设置" />
                     <CardContent>
                         <Typography>本站 Yggdrasil API 地址</Typography>
-                        <code>{import.meta.env.VITE_APIADDR + "/api/yggdrasil"}</code>
+                        <code>{getYggRoot()}</code>
                     </CardContent>
                 </Card>
                 <Box sx={{ gridArea: "d" }}></Box>
             </Box >
         </>
     )
-}
+})
 
 
-
-const MySkin = memo((p: ReactSkinview3dOptions) => {
+const MySkin = memo(function MySkin(p: ReactSkinview3dOptions) {
     const refSkinview3d = useRef(null);
     const skinisHovering = useHover(refSkinview3d);
     const skinview3dView = useRef<SkinViewer | null>(null);
@@ -126,7 +123,6 @@ const MySkin = memo((p: ReactSkinview3dOptions) => {
         }
     }, [skinisHovering])
 
-    useTilg(`refSkinview3d= `, refSkinview3d, `skinisHovering=${skinisHovering}`);
     return <div ref={refSkinview3d}>
         <ReactSkinview3d
             {...p}
@@ -135,4 +131,9 @@ const MySkin = memo((p: ReactSkinview3dOptions) => {
     </div>
 })
 
+function getYggRoot() {
+    const u = new URL((import.meta.env.VITE_APIADDR ?? location.origin) + "/api/yggdrasil")
+    return u.toString()
+}
+
 export default Profile