实现修改昵称功能（就随便做了）

src/components/AvatarUnit/AvatarUnit.css

@@ -120,3 +120,32 @@
   width: 16px;
   height: 16px;
 }
+
+.nickname-edit {
+  margin-top: 5px;
+  margin-left: -1px;
+  width: 360px;
+  padding: 4px;
+  border-radius: 8px;
+  background-color: #f7f7f7;
+  border: 1px solid #e5e5e5;
+  display: flex;
+}
+.nickname-edit > label {
+  line-height: 1.7em;
+  font-size: 18px;
+}
+.nickname-edit > input {
+  flex-grow: 1;
+  border: none;
+  background-color: #eee;
+  border-radius: 6px;
+  margin-right: 10px;
+  padding: 0 5px;
+  font-size: 16px;
+}
+.nickname-edit > .btn {
+  padding: .1em 0;
+  width: 60px;
+  border-radius: 6px;
+}

src/components/AvatarUnit/AvatarUnit.js

@@ -1,11 +1,11 @@
-import { useState, useCallback, useRef } from "react";
+import { useState, useCallback, useRef, useEffect } from "react";
 import Spinner from '../Spinner/Spinner';
 import './AvatarUnit.css';
-import { multiFormPost } from '../../helper/axios';
+import { multiFormPost, post } from '../../helper/axios';
 import { alert } from '../../helper/alert';
 import { apis } from "../../helper/apis";
 
-export default function AvatarUnit({ avatar, onChangeAvatar, showTip }) {
+export default function AvatarUnit({ avatar, nickname, onChangeAvatar, showTip }) {
   const [showBubble, setShowBubble] = useState(showTip);
   const [showUpload, setShowUpload] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -14,9 +14,15 @@ export default function AvatarUnit({ avatar, onChangeAvatar, showTip }) {
   const [uploaded, setUploaded] = useState(false);
   const [dataURL, setDataURL] = useState(null);
   const [file, setFile] = useState(null);
+  const [nicknameNow, setNicknameNow] = useState('');
+  const [nicknameUploading, setNicknameUploading] = useState(false);
 
   const inputRef = useRef(null);
 
+  useEffect(() => {
+    setNicknameNow(nickname || '');
+  }, [nickname]);
+
   // useEffect(() => {
   //   setShowBubble(!localStorage.getItem("avatarTipShown"));
   //   localStorage.setItem("avatarTipShown", true);
@@ -66,20 +72,33 @@ export default function AvatarUnit({ avatar, onChangeAvatar, showTip }) {
       multiFormPost(apis.uploadAvatar, formData).then(data => {
         if (data.networkStatus === 200 && data.status) {
           setUploaded(true);
-          setUploading(false);
           setTimeout(() => {
             handleClose();
             onChangeAvatar(data.data);
           }, 800);
         }
         else {
-          alert(data.data);
+          alert('头像上传失败：' + data.data);
-          setUploading(false);
         }
+        setUploading(false);
       });
     }
   }, [file, onChangeAvatar]);
 
+  const handleChangeNickname = useCallback(() => {
+    setNicknameUploading(true);
+    post(apis.updateNickname, { nickname: nicknameNow }).then(data => {
+      if (data.networkStatus === 200 && data.status) {
+        alert('昵称已修改为：' + nicknameNow);
+        setNicknameNow(nicknameNow);
+      }
+      else {
+        alert('修改失败：' + data.data.map(item => item.msg).join('，'));
+      }
+      setNicknameUploading(false);
+    });
+  }, [nicknameNow]);
+
   return (
     <div className="user-avatar">
       <img src={avatar} alt="user avatar" onClick={() => {
@@ -96,7 +115,7 @@ export default function AvatarUnit({ avatar, onChangeAvatar, showTip }) {
           <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M597.333333 512l284.444445 284.444444c2.929778 3.328 2.929778 22.357333 0 28.444445l-56.888889 56.888889c-6.087111 2.929778-25.116444 2.929778-28.444445 0L512 597.333333 227.555556 881.777778c-3.328 2.929778-22.328889 2.929778-28.444445 0l-56.888889-56.888889c-2.929778-6.087111-2.929778-25.116444 0-28.444445l284.444445-284.444444L142.222222 227.555556c-2.929778-3.328-2.929778-22.328889 0-28.444445l56.888889-56.888889c6.115556-2.929778 25.116444-2.929778 28.444445 0l284.444444 284.444445L796.444444 142.222222c3.328-2.929778 22.357333-2.929778 28.444445 0l56.888889 56.888889c2.929778 6.115556 2.929778 25.116444 0 28.444445L597.333333 512z" fill="#4a4a4a"></path></svg>
         </button>
         <div className="user-avatar-edit-content">
-          <span className={'user-avatar-edit-tip' + (showBubble && !showUpload ? ' show' : '')}>点击图标修改头像</span>
+          <span className={'user-avatar-edit-tip' + (showBubble && !showUpload ? ' show' : '')}>点击图标修改头像和昵称</span>
           <div className="avatar-upload">
             <div className={"upload-unit-progress" + (uploaded ? ' show' : '')}>
               <div className="icon">
@@ -129,6 +148,19 @@ export default function AvatarUnit({ avatar, onChangeAvatar, showTip }) {
             </div>
           </div>
         </div>
+        <div className="nickname-edit">
+          <label>昵称：</label>
+          <input type="text" value={nicknameNow} onChange={e => setNicknameNow(e.target.value)} />
+          <button className="btn btn-primary" onClick={handleChangeNickname} disabled={nicknameUploading}>
+            {
+              nicknameUploading ? (
+                <Spinner />
+              ) : (
+                '保存'
+              )
+            }
+          </button>
+        </div>
       </div>
     </div>
   );

src/components/UserControl/UserControl.js

@@ -25,6 +25,7 @@ export default function UserControl({ pageAuthLevel, buttonOnly }) {
           name: data.realName,
           role: data.role,
           avatar: data.avatar,
+          nickname: data.nickname
         });
       });
       return;
@@ -46,44 +47,49 @@ export default function UserControl({ pageAuthLevel, buttonOnly }) {
     <UserContext.Consumer>
       {({ userData, setUserData }) => (
         <div className="user">
-          {buttonOnly || (
-            <Fragment>
-              {
-                userData.role === -1
-                ? (
-                  <Spinner isGray />
-                )
-                : userData.role > 0 && (
-                  <AvatarUnit
-                    avatar={userData.avatar || images.avatar}
-                    onChangeAvatar={url => setUserData({ ...userData, avatar: url })}
-                    showTip={!userData.avatar}
-                  />
-                )
-              }
-              {
-                userData.role !== 0 && (
-                  <div className="user-name">{userData.name}</div>
-                )
-              }
-            </Fragment>
-          )}
-          <button
-            className="btn btn-hollow btn-straight"
-            onClick={() => {
-              localStorage.setItem('jwt', '');
-              setUserData({ role: 0, name: '' });
-              History.force('/login');
-            }}
-          >{userData.role > 0 ? '退出账号' : '登录'}</button>
           {
-            userData.role === 2 && pageAuthLevel !== 2 && (
+            userData.role === -1
-              <button
+            ? (
-                className="btn btn-light btn-straight"
+              <Spinner />
-                onClick={() => {
+            ) : (
-                  History.push('/admin/review');
+              <Fragment>
-                }}
+                {buttonOnly || (
-              >进入审核</button>
+                  <Fragment>
+                    {
+                      userData.role > 0 && (
+                        <AvatarUnit
+                          avatar={userData.avatar || images.avatar}
+                          onChangeAvatar={url => setUserData({ ...userData, avatar: url })}
+                          showTip={!userData.avatar}
+                        />
+                      )
+                    }
+                    {
+                      userData.role !== 0 && (
+                        <div className="user-name">{userData.name}</div>
+                      )
+                    }
+                  </Fragment>
+                )}
+                <button
+                  className="btn btn-hollow btn-straight"
+                  onClick={() => {
+                    localStorage.setItem('jwt', '');
+                    setUserData({ role: 0, name: '' });
+                    History.force('/login');
+                  }}
+                >{userData.role > 0 ? '退出账号' : '登录'}</button>
+                {
+                  userData.role === 2 && pageAuthLevel !== 2 && (
+                    <button
+                      className="btn btn-light btn-straight"
+                      onClick={() => {
+                        History.push('/admin/review');
+                      }}
+                    >进入审核</button>
+                  )
+                }
+              </Fragment>
             )
           }
         </div>

src/helper/apis.js

@@ -5,6 +5,7 @@ export const apis = {
   login: backEndBaseURL + "/user/login",
   getProfile: backEndBaseURL + "/user/me",
   uploadAvatar: backEndBaseURL + "/user/uploadAvatar",
+  updateNickname: backEndBaseURL + "/user/updateNickname",
 
   submitMessage: backEndBaseURL + "/post/submit",
   listEssence: backEndBaseURL + "/post/listPublished?page=1",