fix: 1

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

@@ -1,7 +1,8 @@
 import { isDevMode } from '@/utils/env'
 import classNames from 'classnames'
-import { useState, useRef } from 'react'
-import { useIntl } from 'umi'
+import { useState, useRef, useEffect, useMemo } from 'react'
+import { connect, useDispatch, useIntl } from 'umi'
+import List from 'rc-virtual-list'
 import './index.less'
 
 export type StaffItem = {
@@ -15,22 +16,36 @@ export type StaffItem = {
 
 type UserListProps = {
   onlineList: StaffItem[]
+  contacts: StaffItem[]
 }
 
-const UesrList: React.FC<UserListProps> = ({ onlineList }) => {
-  const ref = useRef()
-  const t = useRef()
+const data = []
+for (let index = 0; index < 100; index++) {
+  data.push({
+    avatar: '/resource/avatar/avatar_143_2.jpg',
+    department: '研发部',
+    username: '蓝健荣',
+    workStatus: 'menu.workbench.dashboard',
+    wsKey: '蓝健荣',
+    id: index
+  })
+}
+const UesrList: React.FC<UserListProps> = ({ contacts, onlineList }) => {
+  const allStaffListRef = useRef()
+  allStaffListRef.current = useMemo(() => contacts, [contacts])
+  const dispatch = useDispatch()
+  useEffect(() => {
+    if (!contacts.length) {
+      dispatch({
+        type: 'staff/fetchStaffList'
+      })
+    }
+  }, [])
   const [visible, setVisible] = useState(false)
   const intl = useIntl()
-  const handleOnScroll = () => {
-    if (!ref.current?.classList?.contains('scrolling')) {
-      ref.current?.classList?.add('scrolling')
-    }
-    clearTimeout(t.current)
-    t.current = setTimeout(() => {
-      ref.current?.classList?.remove('scrolling')
-    }, 450)
-  }
+  if (!contacts?.length) return null
+  const height = document.body.clientHeight - 48
+  // console.log(allStaffListRef.current)
 
   return (
     <>
@@ -42,57 +57,54 @@ const UesrList: React.FC<UserListProps> = ({ onlineList }) => {
       <div
         className={classNames('book-list flex flex-col bg-hex-ffffff text-hex-666 shadow-card', {
           'show-short': visible
-        })}
-      >
-        <div className="flex-1 h-full custom-scroll" ref={ref} onScroll={handleOnScroll}>
-          <div className="w-full">
-            <ul className="list-none m-0">
-              {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 text-xs">
-                            <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>
-                        </div>
-                      </div>
-                    </li>
-                  )
-                })}
-            </ul>
-          </div>
-        </div>
+        })}>
+        <List itemHeight={52} height={height} data={onlineList} itemKey="id">
+          {/* <div className="w-full"> */}
+          {/* <ul className="list-none m-0"> */}
+          {item => {
+            return (
+              <div
+                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 text-xs">
+                      <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>
+                  </div>
+                </div>
+              </div>
+            )
+          }}
+          {/* </ul> */}
+          {/* </div> */}
+        </List>
       </div>
     </>
   )
 }
 
-export default UesrList
+export default connect(({ staff }) => ({ contacts: staff.allStaffList }))(UesrList)