perf: 优化在线列表头像的加载时机优化初次加载性能

src/components/RightContent/Book/components/UserList/index.less

@@ -152,7 +152,7 @@
   cursor: pointer;
 }
 .side-bg:hover {
-  background: url('/sideBg.png') no-repeat 0 0;
+  background-repeat: no-repeat 0 0;
 }
 .side-bg-current {
   position: absolute;
@@ -166,6 +166,6 @@
   transition-delay: 0.3s;
 }
 .show-side-bg.side-bg-current:hover {
-  background: url('/sideBg-current.png') no-repeat 0 0;
+  background-repeat: no-repeat 0 0;
   transform: rotate(-180deg);
 }

src/components/RightContent/Book/components/UserList/index.tsx

@@ -39,55 +39,52 @@ const UesrList: React.FC<UserListProps> = ({ onlineList }) => {
         </div>
       </span>
       <div
-        className={[
-          'book-list flex flex-col bg-hex-ffffff text-hex-666 shadow-card',
-          visible ? 'show-short' : ''
-        ].join(' ')}
+        className={['book-list flex flex-col bg-hex-ffffff text-hex-666 shadow-card', visible ? 'show-short' : ''].join(
+          ' '
+        )}
       >
         <div className="flex-1 h-full custom-scroll" ref={ref} onScroll={handleOnScroll}>
           <div className="w-full">
             <ul className="list-none m-0">
-              {onlineList.map(item => {
-                return (
-                  <li
-                    key={item.id}
-                    className="table px-2 py-2 text-hex-505050 hover-white hvr-rectangle-out w-full"
-                  >
-                    <div className="table-cell align-middle status status-success status-sm ">
-                      <span
-                        className="w-8 h-8 rounded-1/2 block"
-                        style={{
-                          backgroundImage: `url(${
-                            (isDevMode() ? 'http://cld2qa.com' : 'http://zhcld.com') +
-                            (item.avatar ? item.avatar : '/global/img/avtra_2.jpg')
-                          })`,
-                          backgroundSize: 'cover'
-                        }}
-                      />
-                    </div>
-                    <div className="table-cell w-full align-middle pl-2 pr-2">
-                      <div className="max-w-160px overflow-hidden whitespace-nowrap overflow-ellipsis text-sm relative">
-                        <span>{item.username}</span>
-                        {/* <small className="block italic text-hex-1dc9b7 text-xs">Online</small> */}
-                        <small className="block text-xs">
-                          {/* <span className="mr-1">正在</span> */}
-                          <span className="italic">
-                            {item.workStatus &&
-                              intl.formatMessage({
-                                id: item.workStatus,
-                                defaultMessage: ''
-                              })}
+              {visible &&
+                onlineList.map(item => {
+                  return (
+                    <li key={item.id} className="table px-2 py-2 text-hex-505050 hover-white hvr-rectangle-out w-full">
+                      <div className="table-cell align-middle status status-success status-sm ">
+                        <span
+                          className="w-8 h-8 rounded-1/2 block"
+                          style={{
+                            backgroundImage: `url(${
+                              (isDevMode() ? 'http://cld2qa.com' : 'http://zhcld.com') +
+                              (item.avatar ? item.avatar : '/global/img/avtra_2.jpg')
+                            })`,
+                            backgroundSize: 'cover'
+                          }}
+                        />
+                      </div>
+                      <div className="table-cell w-full align-middle pl-2 pr-2">
+                        <div className="max-w-160px overflow-hidden whitespace-nowrap overflow-ellipsis text-sm relative">
+                          <span>{item.username}</span>
+                          {/* <small className="block italic text-hex-1dc9b7 text-xs">Online</small> */}
+                          <small className="block text-xs">
+                            {/* <span className="mr-1">正在</span> */}
+                            <span className="italic">
+                              {item.workStatus &&
+                                intl.formatMessage({
+                                  id: item.workStatus,
+                                  defaultMessage: ''
+                                })}
+                            </span>
+                            <span className="ml-1">工作中</span>
+                          </small>
+                          <span className="text-xs text-gray-500 absolute right-0 top-1/2 postion">
+                            {item.department}
                           </span>
-                          <span className="ml-1">工作中</span>
-                        </small>
-                        <span className="text-xs text-gray-500 absolute right-0 top-1/2 postion">
-                          {item.department}
-                        </span>
+                        </div>
                       </div>
-                    </div>
-                  </li>
-                )
-              })}
+                    </li>
+                  )
+                })}
             </ul>
           </div>
         </div>