fats

src/layouts/AuthLayout/components/Header/User.jsx

@@ -1,5 +1,6 @@
 import React, { useState, forwardRef, useRef, useImperativeHandle } from 'react';
 import { Avatar, Button, Dropdown, Menu, Form, Input, Modal } from 'antd';
+import { useModel } from '@/store'
 
 const ChangePassword = forwardRef((props, ref) => {
   const [visible, setVisible] = useState(false);
@@ -65,6 +66,7 @@ export default (props) => {
   ];
 
   const passRef = useRef();
+  const { user = {} } = useModel('user');
 
   const onClick = ({ key }) => {
     if (key === 'changePassword') {
@@ -78,7 +80,7 @@ export default (props) => {
     <Dropdown overlay={menu}>
       <div className="user-info">
         <Avatar src="https://joeschmoe.io/api/v1/random" />
-        <span className='font'>张延森</span>
+        <span className='font'>{user.name}</span>
         <ChangePassword ref={passRef} />
       </div>
     </Dropdown>

src/layouts/AuthLayout/index.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Layout, Spin } from 'antd';
 import { useModel } from '@/store'
 import RequireLogin from './components/RequireLogin';
@@ -13,12 +13,18 @@ import './style.less';
 const { Content } = Layout;
 
 export default (props) => {
-  const [user] = useModel();
+  const { user, getCurrent } = useModel('user');
   // const isReady = useReady(user)
-  const isReady = true
+  // const isReady = true
+
+  useEffect(() => {
+    if (!user) {
+      getCurrent()
+    }
+  }, []);
 
   return (
-    <Spin spinning={!isReady}>
+    <Spin spinning={!user} size="large">
       <RequireLogin>
         <div className='main-layout'>
           <Header />

src/store/index.js

@@ -1,8 +1,10 @@
 import { createStore } from "@zjxpcyc/react-tiny-store";
 import useSystem from "./models/system";
+import useUser from "./models/user";
 
 const store = createStore({
   system: useSystem,
+  user: useUser,
 });
 
 export default store

src/store/models/user.js

@@ -0,0 +1,17 @@
+import { useState } from "react";
+
+export default function useUser() {
+
+  const [user, setUser] = useState()
+
+  const getCurrent = () => {
+    // mock api
+    setUser({ id: 1, name: '管理员' })
+  }
+
+  return {
+    user,
+    getCurrent,
+  }
+
+}