修改首页上传图像

src/layouts/components/OuterSide.tsx

 import React from 'react'
-import { Layout, Menu } from 'antd'
+import { Layout, Menu, Avatar, Image } from 'antd'
 import { AppstoreOutlined } from '@ant-design/icons'
 import { Link } from 'umi'
 import styles from '../styles/MenuSlider.less'
 import { getRouters } from '@/utils/auth'
 import { isDev } from '@/constants'
-
+import {observer, inject} from 'mobx-react';
 const { Sider } = Layout
 
 export interface OuterSiderProps {
@@ -14,7 +14,7 @@ export interface OuterSiderProps {
 }
 
 
-const OuterSider: React.FC<OuterSiderProps> = (props) => {
+const OuterSider: React.FC<OuterSiderProps> = observer((props) => {
   const { menuData, pathname = "/" } = props
   const authRouters = getRouters()
   let defaultSelectedKeys: string = ""
@@ -45,7 +45,13 @@ const OuterSider: React.FC<OuterSiderProps> = (props) => {
   const siderMenu = getSubMenu()
   return <>
     <Sider collapsed={true} collapsedWidth={64} className={styles.wrapperSilder}>
-      <div className={styles.userPic} />
+      {
+        props.UserStore.avatar
+        ? <div className={styles.userPic}>
+            <img src={props.UserStore.avatar} className={styles.avatar} />
+          </div>
+        : <div className={styles.userPic} />
+      }
       <ul className={styles.menuBox}>
         {
           siderMenu.map(item => (
@@ -60,8 +66,9 @@ const OuterSider: React.FC<OuterSiderProps> = (props) => {
       </ul>
     </Sider>
   </>
-}
+})
 
 OuterSider.defaultProps = {}
 
-export default OuterSider
\ No newline at end of file
+// export default OuterSider
+export default inject('UserStore')(OuterSider)

src/layouts/components/RightContent.tsx

@@ -33,11 +33,8 @@ const GlobalHeaderRight: React.FC<{}> = (props) => {
     if (SOCKET_URL && (!ws.current || ws.current.readyState === 3) && userInfo) {
       const url = `${SOCKET_URL}/report/websocket?memberId=${userInfo.memberId}&roleId=${userInfo.memberRoleId}&token=${userInfo.token}&source=${1}`;
       ws.current = new WebSocket(url);
-      ws.current.onopen = (e) => {
-        console.log(e)
-      }
+      ws.current.onopen = (e) => {}
       ws.current.onmessage = (e) => {
-        console.log(e)
         const data = JSON.parse(e.data);
         if(data.type === NOT_READ_MESSAGE) {
           setMessage(data.data);

src/layouts/styles/MenuSlider.less

@@ -48,6 +48,11 @@
   background: rgba(255, 255, 255, 0.2);
   margin: 16px;
   border-radius: 50%;
+  overflow: hidden;
+  .avatar {
+    width: 32px;
+    height: 32px;
+  }
 }
 
 .wrapperSilder {

src/pages/home/components/UserCenter/index.tsx

@@ -12,6 +12,7 @@ import StatusTag from '@/components/StatusTag';
 import home_user from '@/assets/imgs/home_user.png';
 import { UPLOAD_TYPE } from '@/constants'
 import { PublicApi } from '@/services/api';
+import {observer, inject} from 'mobx-react';
 interface Iprops {}
 
 const WEEKDAYS = ["天", "一","二", "三", "四", "五","六"];
@@ -31,12 +32,11 @@ function reducer(state, action) {
   }
 }
 
-const UserCenter: React.FC<Iprops> = () => {
-  // const [uploadLoading, setUpload]
+const UserCenter: React.FC<Iprops> = (props) => {
   const today = moment();
   const userAuth = getAuth();
-  const hasChangeMemberAuth = userAuth?.urls.includes(EDIT_USER_URL);
-  const hasCenterAuth = userAuth?.urls.includes(USER_CENTER_URL);
+  // const hasChangeMemberAuth = userAuth?.urls.includes(EDIT_USER_URL);
+  // const hasCenterAuth = userAuth?.urls.includes(USER_CENTER_URL);
   const currentRole = userAuth.roles.filter((item) => item.memberRoleId === userAuth.memberRoleId)
  const [state, dispatch] = useReducer(reducer, { loading: false, logo: userAuth.logo})
   if(!userAuth) {
@@ -65,6 +65,7 @@ const UserCenter: React.FC<Iprops> = () => {
           .then((res) => {
             if(res.code === 1000) {
               dispatch({type: 'done',  payload: {url: data}})
+              props.UserStore.setUserAvatar(data)
             }
           })
         }
@@ -146,4 +147,5 @@ const UserCenter: React.FC<Iprops> = () => {
   )
 }
 
-export default UserCenter
+// export default UserCenter
+export default inject('UserStore')(observer(UserCenter))

src/store/user/index.ts

@@ -10,7 +10,8 @@ class LoginStore implements ILoginModule {
   @observable public username: string = 'admin';
   @observable public password: string = "123456";
   @observable public res: object = {};
-  @observable public userInfo = getAuth()
+  @observable public userInfo = getAuth();
+  @observable public avatar = this.userInfo.logo;
 
   // 可以改变对应的状态值
   // @todo 接入更新用户信息接口
@@ -62,6 +63,11 @@ class LoginStore implements ILoginModule {
       return error
     }
   }
+  // 改变用户的头像
+  @action.bound
+  public setUserAvatar(link: string) {
+    this.avatar = link;
+  }
 }
 
 export default LoginStore