src/components/AvatarUnit/AvatarUnit.css

@@ -120,32 +120,3 @@
   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, useEffect } from "react";
+import { useState, useCallback, useRef } from "react";
 import Spinner from '../Spinner/Spinner';
 import './AvatarUnit.css';
-import { multiFormPost, post } from '../../helper/axios';
+import { multiFormPost } from '../../helper/axios';
 import { alert } from '../../helper/alert';
 import { apis } from "../../helper/apis";
 
-export default function AvatarUnit({ avatar, nickname, onChangeAvatar, showTip }) {
+export default function AvatarUnit({ avatar, onChangeAvatar, showTip }) {
   const [showBubble, setShowBubble] = useState(showTip);
   const [showUpload, setShowUpload] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -14,15 +14,9 @@ export default function AvatarUnit({ avatar, nickname, 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);
@@ -72,33 +66,20 @@ export default function AvatarUnit({ avatar, nickname, 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);
+        }
       });
     }
   }, [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={() => {
@@ -115,7 +96,7 @@ export default function AvatarUnit({ avatar, nickname, 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">
@@ -148,19 +129,6 @@ export default function AvatarUnit({ avatar, nickname, 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,7 +25,6 @@ export default function UserControl({ pageAuthLevel, buttonOnly }) {
           name: data.realName,
           role: data.role,
           avatar: data.avatar,
-          nickname: data.nickname
         });
       });
       return;
@@ -47,16 +46,14 @@ export default function UserControl({ pageAuthLevel, buttonOnly }) {
     <UserContext.Consumer>
       {({ userData, setUserData }) => (
         <div className="user">
-          {
-            userData.role === -1
-            ? (
-              <Spinner />
-            ) : (
-              <Fragment>
           {buttonOnly || (
             <Fragment>
               {
-                      userData.role > 0 && (
+                userData.role === -1
+                ? (
+                  <Spinner isGray />
+                )
+                : userData.role > 0 && (
                   <AvatarUnit
                     avatar={userData.avatar || images.avatar}
                     onChangeAvatar={url => setUserData({ ...userData, avatar: url })}
@@ -89,9 +86,6 @@ export default function UserControl({ pageAuthLevel, buttonOnly }) {
               >进入审核</button>
             )
           }
-              </Fragment>
-            )
-          }
         </div>
       )}
     </UserContext.Consumer>

src/helper/apis.js

@@ -5,7 +5,6 @@ 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",

src/index/index.js

@@ -62,7 +62,7 @@ export class AppContainer extends Component {
                             <div className="post-header">
                               <img class="post-avatar" src={post.avatar} alt="头像" />
                               <div>
-                                <div class="post-username">{post.nickname}</div>
+                                <div class="post-username">{post.realName}</div>
                                 <div class="post-time">于{new Date(post.time * 1000).toLocaleString()}发布</div>
                               </div>
                             </div>