在大、中、小屏幕的相关区域显示登录后的用户信息，包括用户名、avatar

src/layouts/NavMenu.tsx

@@ -11,6 +11,9 @@ import { FormattedMessage } from 'react-intl';
 import { Space, Button, Row } from 'antd';
 import { ToolOutlined } from '@ant-design/icons';
 import MeButton from '../pages/security/components/MeButton';
+import { useSelector } from 'react-redux';
+import { RootState } from '@/states/store'; // 使用路径别名@指向src
+import { isLoggedIn } from '../states/user_info'; // 根据你的实际路径调整
 
 type MenuItem = Required<MenuProps>['items'][number];
 
@@ -140,6 +143,10 @@ const NavMenu: React.FC<NavMenuProps> = ({ onMenuClick }) => {
     setOpenKeys([...openKeys, keys[0]]);
   };
 
+  const login = useSelector((state: RootState) => isLoggedIn(state.userInfo));
+  const username = useSelector((state: RootState) => state.userInfo.name);
+  const avatarUrl = useSelector((state: RootState) => state.userInfo.avatar);
+
   return (
     <>
       <Menu
@@ -183,10 +190,9 @@ const NavMenu: React.FC<NavMenuProps> = ({ onMenuClick }) => {
           </Space>
           <MeButton
             size="large"
-            isLogin={true}
-            avatarUrl={undefined}
-            username="未登录"
-            // username={true ? '用户名' : '未登录'} // TODO: 替换为实际登录状态和用户名
+            isLogin={login}
+            avatarUrl={avatarUrl || undefined}
+            username={login ? username : '未登录'}
             onClick={() => onMenuClick?.('me')}
           />
         </Space>

src/layouts/NavbarFloat.tsx

@@ -10,6 +10,9 @@ import {
 } from '@ant-design/icons';
 import type { MenuProps } from 'antd';
 import MeButton from '../pages/security/components/MeButton';
+import { useSelector } from 'react-redux';
+import { RootState } from '@/states/store';
+import { isLoggedIn } from '../states/user_info';
 
 interface NavbarFloatProps {
   position?: 'left' | 'right';
@@ -104,6 +107,11 @@ const NavbarFloat: React.FC<NavbarFloatProps> = ({
 
   const drawerPlacement = position === 'right' ? 'right' : 'left';
 
+  // 监听登录状态，获取用户名和头像
+  const login = useSelector((state: RootState) => isLoggedIn(state.userInfo));
+  const username = useSelector((state: RootState) => state.userInfo.name);
+  const avatarUrl = useSelector((state: RootState) => state.userInfo.avatar);
+
   return (
     <>
       {!open && (
@@ -191,10 +199,9 @@ const NavbarFloat: React.FC<NavbarFloatProps> = ({
             </Space>
             <MeButton
               size="large"
-              isLogin={true}
-              avatarUrl={undefined}
-              username={'未登录'}
-              // username={true ? '用户名' : '未登录'} // TODO: 替换为实际登录状态和用户名
+              isLogin={login}
+              avatarUrl={avatarUrl || undefined}
+              username={login ? username : '未登录'}
               onClick={() => {
                 if (props.onMenuClick) props.onMenuClick('me');
                 setOpen(false);

src/pages/security/Profile.tsx

@@ -1,6 +1,10 @@
 import React from 'react';
 import { Avatar, Typography, List, Space } from 'antd';
 import { UserOutlined, RightOutlined } from '@ant-design/icons';
+import { useSelector } from 'react-redux';
+
+import { RootState } from '@/states/store';
+import { isLoggedIn } from '../../states/user_info';
 
 const { Text } = Typography;
 
@@ -15,8 +19,10 @@ const settings = [
 ];
 
 const Profile: React.FC = () => {
-  // 假设用户名和头像
-  const username = '用户名';
+  // 监听登录状态，获取用户名和头像
+  const login = useSelector((state: RootState) => isLoggedIn(state.userInfo));
+  const username = useSelector((state: RootState) => state.userInfo.name);
+  const avatarUrl = useSelector((state: RootState) => state.userInfo.avatar);
 
   const handleItemClick = (item: (typeof settings)[0]) => {
     // TODO: 跳转到对应设置页面
@@ -28,9 +34,13 @@ const Profile: React.FC = () => {
   return (
     <div style={{ maxWidth: 400, margin: '0 auto', padding: 24 }}>
       <Space align="center" style={{ marginBottom: 32 }}>
-        <Avatar size={64} icon={<UserOutlined />} />
+        <Avatar
+          size={64}
+          icon={<UserOutlined />}
+          src={login && avatarUrl ? avatarUrl : undefined}
+        />
         <Text strong style={{ fontSize: 20, marginLeft: 16 }}>
-          {username}
+          {login ? username : '未登录'}
         </Text>
       </Space>
       <List

src/states/user_info/index.ts

@@ -42,3 +42,7 @@ export const { setUserInfo, clearUserInfo, updateUserName } =
 export default userInfoSlice.reducer;
 
 export type { UserInfoState };
+
+// 判断是否已登录
+export const isLoggedIn = (state: UserInfoState) =>
+  !!state.uid && !!state.token;