修改首页上传图像

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 {
@@ -117,4 +122,4 @@
     height: 48px !important;
     line-height: 48px !important;
   }
-}
\ No newline at end of file
+}

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

-import { action, computed, observable, runInAction } from 'mobx'
-import { ILoginModule } from '@/module/userModule'
-import { getAuth } from '@/utils/auth'
-import { localStorage } from '@/utils/storage'
-// import { userDetailGet } from '@/services/user'
-
-// const userInfo = localStorage.getItem('userInfo')
-
-class LoginStore implements ILoginModule {
-  @observable public username: string = 'admin';
-  @observable public password: string = "123456";
-  @observable public res: object = {};
-  @observable public userInfo = getAuth()
-
-  // 可以改变对应的状态值
-  // @todo 接入更新用户信息接口
-  @action.bound
-  public async updateUserInfo() {
-    // try {
-    //   const res = await userDetailGet()
-    //   runInAction(() => {
-    //     this.userInfo = res.data;
-    //     localStorage.setItem('userInfo', JSON.stringify(this.userInfo))
-    //   })
-    // } catch (error) {
-    //   return error
-    // }
-  }
-
-  // 当有时需要拼接状态，但又不希望改变原有状态，可以采取如下, 类似vue中的computed
-  @computed
-  public get printInfo(): string {
-    return `hello, ${this.username}, your password is ${this.password}`
-  }
-
-  // 可以改变对应的状态值
-  @action.bound
-  public setUsername(username: string) {
-    this.username = username;
-  }
-
-  @action.bound
-  public setPassword(password: string) {
-    this.password = password;
-  }
-
-  // 异步修改数据, 需要使用bound，保持this指向当前store
-  @action.bound
-  public async handleLogin() {
-    try {
-      let params = {
-        username: this.username,
-        password: this.password
-      }
-      const result = {}
-      runInAction(() => {
-        this.res = result
-      })
-
-      return result
-    } catch (error) {
-      return error
-    }
-  }
-}
-
-export default LoginStore
+import { action, computed, observable, runInAction } from 'mobx'
+import { ILoginModule } from '@/module/userModule'
+import { getAuth } from '@/utils/auth'
+import { localStorage } from '@/utils/storage'
+// import { userDetailGet } from '@/services/user'
+
+// const userInfo = localStorage.getItem('userInfo')
+
+class LoginStore implements ILoginModule {
+  @observable public username: string = 'admin';
+  @observable public password: string = "123456";
+  @observable public res: object = {};
+  @observable public userInfo = getAuth();
+  @observable public avatar = this.userInfo.logo;
+
+  // 可以改变对应的状态值
+  // @todo 接入更新用户信息接口
+  @action.bound
+  public async updateUserInfo() {
+    // try {
+    //   const res = await userDetailGet()
+    //   runInAction(() => {
+    //     this.userInfo = res.data;
+    //     localStorage.setItem('userInfo', JSON.stringify(this.userInfo))
+    //   })
+    // } catch (error) {
+    //   return error
+    // }
+  }
+
+  // 当有时需要拼接状态，但又不希望改变原有状态，可以采取如下, 类似vue中的computed
+  @computed
+  public get printInfo(): string {
+    return `hello, ${this.username}, your password is ${this.password}`
+  }
+
+  // 可以改变对应的状态值
+  @action.bound
+  public setUsername(username: string) {
+    this.username = username;
+  }
+
+  @action.bound
+  public setPassword(password: string) {
+    this.password = password;
+  }
+
+  // 异步修改数据, 需要使用bound，保持this指向当前store
+  @action.bound
+  public async handleLogin() {
+    try {
+      let params = {
+        username: this.username,
+        password: this.password
+      }
+      const result = {}
+      runInAction(() => {
+        this.res = result
+      })
+
+      return result
+    } catch (error) {
+      return error
+    }
+  }
+  // 改变用户的头像
+  @action.bound
+  public setUserAvatar(link: string) {
+    this.avatar = link;
+  }
+}
+
+export default LoginStore