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

import { useState } from 'react'
import { useIntl } from 'umi'
import './index.less'

interface StaffItem {
  avatar: string
  id: string
  username: string
  workStatus: string
  wsKey: string
  department: string
}

type UserListProps = {
  onlineList: StaffItem[]
}

const UesrList: React.FC<UserListProps> = ({ onlineList }) => {
  const [visible, setVisible] = useState(false)
  const intl = useIntl()
  return (
    <>
      <span className="absolute top-70 left-[-0.75rem]" onClick={() => setVisible(!visible)}>
        <div className="side-bg">
          <span className={['side-bg-current', visible ? 'show-side-bg' : ''].join(' ')} />
        </div>
      </span>
      <div
        className={[
          'book-list border border-solid border-hex-1d1d1d border-opacity-7 bg-hex-f7f9fa flex flex-col bg-hex-f9f7fa text-hex-666',
          visible ? 'show-short' : ''
        ].join(' ')}>
        <div className="flex-1 h-full custom-scroll">
          <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(http://cld.smartcost.com.cn${item.avatar}_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">
                            {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>
      </div>
    </>
  )
}

export default UesrList