登录与品类

src/layouts/User.tsx

@@ -1,13 +1,94 @@
-import React from 'react';
-import { Link, useIntl } from 'umi';
-const User: React.FC = (props) => {
-  const intl = useIntl();
-  
+import React, { useEffect, useState } from 'react';
+import { Link, useIntl, connect, history } from 'umi';
+import { Dropdown, Button, Modal } from 'antd';
+import { DownOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
+import type { ConnectProps, Dispatch } from 'umi';
+import type { UserModelState } from '@/models/user';
+import { message } from 'antd';
 
+interface PageProps extends ConnectProps {
+  user: UserModelState; // dva model状态
+  dispatch: Dispatch; // dva dispatch方法
+}
+const User: React.FC<PageProps> = ({ user, dispatch }) => {
+
+  
+  const intl = useIntl();
+  useEffect(() => {
+    if (!user.userInfo) {
+      const userinfoStr = sessionStorage.getItem('Userinfo');
+      if (userinfoStr) {
+        try {
+          const userInfo = JSON.parse(userinfoStr);
+          dispatch({
+            type: 'user/saveUserInfo',
+            payload: userInfo,
+          });
+        } catch (e) {
+          // 解析失败时可以报错提示
+          console.error('Userinfo 解析失败', e);
+        }
+      }
+    } else  if (user.token) {
+      dispatch({
+        type: 'user/fetchUserInfo',
+      });
+    }
+  }, [user.token]);
+  const handleMenuClick = (e: any) => {
+    if (e.key === 'logout') {
+      Modal.confirm({
+        title: '确定退出登录吗？',
+        icon: <ExclamationCircleOutlined />,
+        content: '退出登录后，您将需要重新登录',
+        onOk() {
+          dispatch({
+            type: 'user/logout',
+          }).then(() => {
+            sessionStorage.clear();
+            message.success('退出登录成功');
+            history.push('/login');
+          });
+        },
+        onCancel() {
+          return;
+        },
+      });
+    } else if(e.key === 'profile') {
+      console.log(111);
+      
+      // history.push('/profile');
+    }
+  };
   return (
     <div className="user">
-      <Link to={'/login'}>{intl.formatMessage({ id: '登录/注册' })}</Link>
+      {user.userInfo?.fullName ? (
+        <Dropdown
+          trigger={['hover']}
+          menu={{
+            items: [
+              {
+                key: 'profile',
+                label: '个人中心',
+              },
+              {
+                key: 'logout',
+                label: '退出登录',
+              },
+            ],
+            onClick: handleMenuClick,
+          }}
+        >
+          <Button type="link">
+            {`${user.userInfo?.fullName}`}
+            <DownOutlined />
+          </Button>
+        </Dropdown>
+      ) : (
+        <Link to={'/login'}>{intl.formatMessage({ id: '登录' })}</Link>
+      )}
     </div>
   );
 };
-export default User;
+
+export default connect(({ user }: { user: UserModelState }) => ({ user }))(User);