antd#Avatar JavaScript Examples

render() {
    const { comments, submitting, value } = this.state;

    return (
      <>
        {comments.length > 0 && <CommentList comments={comments} />}
        <Comment
          avatar={
            <Avatar
              src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
              alt="Han Solo"
            />
          }
          content={
            <Editor
              onChange={this.handleChange}
              onSubmit={this.handleSubmit}
              submitting={submitting}
              value={value}
            />
          }
        />
      </>
    );
  }

ArticleListContent = ({ data: { content, updatedAt, avatar, owner, href } }) => (
  <div className={styles.listContent}>
    <div className={styles.description}>{content}</div>
    <div className={styles.extra}>
      <Avatar src={avatar} size="small" />
      <a href={href}>{owner}</a> 发布在 <a href={href}>{href}</a>
      <em>{moment(updatedAt).format('YYYY-MM-DD HH:mm')}</em>
    </div>
  </div>
)

function OrgMemberCard(props) {


	
	
	const { data, organization_id } = props;
    const isSelf = data.user_id === props.userId
    

	return (
		<Card
			className="member-card"
			bordered={false}
			hoverable
		>
			<div className='image-container'>
				{(!data.avatar) ? (<Avatar size={64} icon="user" />) : (
					<img alt="user avatar" src={`${process.env.REACT_APP_S3_STORAGE_PATH}${data.avatar}`} />)}
			</div>
			<p className="small">{data.user_full_name}</p>
			 
			<OrgEditMemberCard member={data} isSelf={isSelf} organization_id = {organization_id} />
		</Card>
	)
}

List = () => {
  // 设置列表信息
  const [data, setData] = useState([]);
  // 设置页码信息
  const [page, setPage] = useState(1);
  const [pageInfo, setPageInfo] = useState();

  useEffect(() => {
    console.log({ page });
    (async () => {
      const result = await fetchVegetable(page, 10);
      const { vegetableList } = result.data;
      setData(() => vegetableList.items);
      setPageInfo(() => ({
        current: vegetableList.page,
        pageSize: vegetableList.pageSize,
        total: vegetableList.total,
        onChange: (page) => setPage(page),
      }));
    })();
  }, [page]);

  return (
    <Card title="React 子应用列表页">
      <Table rowKey="_id" dataSource={data} pagination={pageInfo}>
        <Column dataIndex="poster" render={(text) => <Avatar src={text} />} />
        <Column dataIndex="name" />
        <Column dataIndex="price" render={(text) => <>￥ {text}</>} />
      </Table>
    </Card>
  );
}

PopUpList = ({ tech }) => {
  const [users, setUsers] = useState([]);

  const usersUseTechs = useCallback(async () => {
    const data = await Http.get("/api/techs/projectsUsersTechs/" + tech.id);
    setUsers(data);
  }, [tech]);

  useEffect(() => {
    // Wait for loading data user
    //setLoading(true);

    usersUseTechs();
    //setLoading(false);
    return () => setUsers([]);  
  }, [usersUseTechs]);
  return (
    <div>
      {users.map((user) => {
          user.icon = require("../../img/" + user.avatar);
        return (
          <Popover content={contentPopOver(user)} key={user.id}>
            <Avatar src={user.icon} />
          </Popover>
        );
      })}
    </div>
  );
}

render() {
    let { metadata, user_name, create_time, zone_code, env, operator_type } = this.props.data;
    try {
      metadata = JSON.parse(metadata);
    } catch (e) {
      return null;
    }

    return (
      <div className={styles.listItem}>
        <div>
          <Avatar size={'small'}>{user_name?.substr(0, 1)}</Avatar>
          <span className={styles.username}>
            {operator_type === 'openapi' && <Tag>Open API</Tag>}
            {user_name}
          </span>
          <span className={styles.createTime}>- {moment(create_time * 1000).fromNow()}</span>

          <span className={styles.envInfo}>
            {zone_code && <Tag color={'green'}>{zone_code}</Tag>}
            {env && <Tag color={'red'}>{env}</Tag>}
          </span>

          <div className={styles.absoluteTime}>
            {moment(create_time * 1000).format('YYYY-MM-DD HH:mm:ss')}
          </div>
        </div>
        {this.renderEvent()}
      </div>
    );
  }

MemberInfoCard = ({ data }) => {
	return (
		<>
			<Card style={{ marginBottom: "4px" }}>
				<Row
					style={{
						alignItems: "center"
						//justifyContent: "space-between"
						//margin: "-10px"
					}}
				>
					<Col span={4}>
						<Avatar
							src={data.image}
							style={{ marginLeft: "8px" }}
						/>
					</Col>
					<Col
						span={data.type === "head" ? 14 : 16}
						style={{ fontSize: "14px" }}
					>
						{data.name}
					</Col>
					{data.type === "head" ? (
						<Col span={2}>
							<FaCrown />
						</Col>
					) : null}

					<Col>
						<Tag color="red">{data.role}</Tag>
					</Col>
				</Row>
			</Card>
		</>
	);
}

ArticleListContent = ({ data: { content, updatedAt, avatar, owner, href } }) => (
  <div className={styles.listContent}>
    <div className={styles.description}>{content}</div>
    <div className={styles.extra}>
      <Avatar src={avatar} size="small" />
      <a href={href}>{owner}</a> 发布在 <a href={href}>{href}</a>
      <em>{moment(updatedAt).format('YYYY-MM-DD HH:mm')}</em>
    </div>
  </div>
)

render() {
        const {name = 'unknown', src, icon, ...others} = this.props;

        if (icon === true) return <UserOutlined style={{marginRight: 5}} />;

        if (src) return <Avatar {...others} src={src}/>;

        const nameFirstChar = name[0];
        const colors = [
            'rgb(80, 193, 233)',
            'rgb(255, 190, 26)',
            'rgb(228, 38, 146)',
            'rgb(169, 109, 243)',
            'rgb(253, 117, 80)',
            'rgb(103, 197, 12)',
            'rgb(80, 193, 233)',
            'rgb(103, 197, 12)',
        ];
        const backgroundColor = colors[nameFirstChar.charCodeAt(0) % colors.length];

        if (!others.style) others.style = {};

        others.style.backgroundColor = backgroundColor;
        others.style.verticalAlign = 'middle';

        return (
            <Avatar{...others}>
                {nameFirstChar}
            </Avatar>
        );
    }

function PictureCardList({ pictures }) {
  const transitions = useTransition(pictures, (picture) => picture?.id, {
    config: config.gentle,
    from: { opacity: 0, transform: 'translate3d(25%, 0%, 0px)' },
    enter: { opacity: 1, transform: 'translate3d(0%, 0px, 0px)' },
    leave: { opacity: 0, height: 0, transform: 'translate3d(-25%, 0px, 0px)' },
  });

  return (
    <>
      {transitions.map(({ item: picture, props, key }) => (
        <Card key={key} style={props}>
          <Card.Info>
            <Link to={`/protest/${picture.protestId}`}>
              <Card.Info.Title>
                {picture.protestName}
                {picture.cityName && `, ${picture.cityName}`}
              </Card.Info.Title>
            </Link>
            {picture.uploaderName && (
              <Card.Info.Subtitle>
                <Avatar size={21} src={picture.userAvatar || 'https://1km.co.il/anonymousPofile.png'} style={{ marginLeft: 6 }} />
                {picture.uploaderName}
              </Card.Info.Subtitle>
            )}
            {picture.description && <Card.Description>{picture.description}</Card.Description>}
            <Card.Info.Timestamp>
              <TimeAgo datetime={picture.createdAt} locale="he" />
            </Card.Info.Timestamp>
          </Card.Info>
          <Card.Image src={picture.imageUrl} alt="" />
        </Card>
      ))}
    </>
  );
}

Item = ({ src, size, tips, onClick = () => {} }) => {
  const cls = classNames(styles.avatarItem, {
    [styles.avatarItemLarge]: size === 'large',
    [styles.avatarItemSmall]: size === 'small',
    [styles.avatarItemMini]: size === 'mini',
  });

  return (
    <li className={cls} onClick={onClick}>
      {tips ? (
        <Tooltip title={tips}>
          <Avatar src={src} size={size} style={{ cursor: 'pointer' }} />
        </Tooltip>
      ) : (
        <Avatar src={src} size={size} />
      )}
    </li>
  );
}

export default function HeaderContent() {
  const dispatch = useDispatch();

  const menu = (
    <Menu>
      <Menu.Item key={`${uniqueId()}`} onClick={() => dispatch(logout())}>
        logout
      </Menu.Item>
      <Menu.Item key={`${uniqueId()}`}>
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="http://www.taobao.com/"
        >
          2nd menu item
        </a>
      </Menu.Item>
      <Menu.Item key={`${uniqueId()}`}>
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="http://www.tmall.com/"
        >
          3rd menu item
        </a>
      </Menu.Item>
    </Menu>
  );
  return (
    <Header
      className="site-layout-background"
      style={{ padding: 0, background: "none" }}
    >
      <Dropdown overlay={menu} placement="bottomRight" arrow>
        <Avatar icon={<UserOutlined />} />
      </Dropdown>
    </Header>
  );
}

renderActivities() {
    const {
      activities: { list },
    } = this.props;
    return list.map(item => {
      const events = item.template.split(/@\{([^{}]*)\}/gi).map(key => {
        if (item[key]) {
          return (
            <a href={item[key].link} key={item[key].name}>
              {item[key].name}
            </a>
          );
        }
        return key;
      });
      return (
        <List.Item key={item.id}>
          <List.Item.Meta
            avatar={<Avatar src={item.user.avatar} />}
            title={
              <span>
                <a className={styles.username}>{item.user.name}</a>
                &nbsp;
                <span className={styles.event}>{events}</span>
              </span>
            }
            description={
              <span className={styles.datetime} title={item.updatedAt}>
                {moment(item.updatedAt).fromNow()}
              </span>
            }
          />
        </List.Item>
      );
    });
  }

export default function MainVideoView(props) {

  const videoRef = useRef(null);

  useEffect(() => {
    videoRef.current.srcObject = props.stream;
    return () => {
      videoRef.current.srcObject = null;
    }
  }, [])

  const { id, stream, vidFit, muted } = props;
  const fitClass = vidFit ? "fit-vid" : ""

  return (
    <div className="main-video-layout">
      <video
        ref={videoRef}
        id={id}
        autoPlay
        playsInline
        muted={false}
        className={"main-video-size " + fitClass}
      />
      {
        muted ?
          <div className='main-video-avatar'>
            <Avatar size={156} icon="user" />
          </div>
          : ""
      }
      <div className="main-video-name">
        <a className="main-video-name-a">{stream.info.name}</a>
      </div>
    </div>
  );
}

render() {
        const {onCollapse, collapsed} = this.props;
        const menu = (
            <Menu
                theme='light'
                mode="horizontal"
                style={{
                    lineHeight:'64px',
                    width: '100%'
                }}
                selectable={false}
            >
                <Menu.Item key={"Header"}>
                    <Typography.Text style={{fontSize: '1.2rem', float: 'left'}}>{this.props.profileData.company_name}</Typography.Text>
                </Menu.Item>
                <Menu.Item key="logout" onClick={this.handleLogoutAction} style={{float: 'right'}}>
                    <Avatar size={35} src={this.props.profileData.logo_link}/>
                </Menu.Item>
                <Menu.Item key={"notification"} style={{float: 'right'}}>
                    <Badge count={21}>
                        <BellOutlined style={{fontSize: '1.2rem'}}/>
                    </Badge>
                </Menu.Item>
                <Menu.Item key={"searchBar"} style={{float: 'right'}}>
                    <Input.Search
                        placeholder={"Search students"}
                    />
                </Menu.Item>
            </Menu>
        );
        return (
            <Header style={{background: '#fff', padding: '0 12px'}}>
                {menu}
            </Header>
        );
    }

getUsernameAvatar = (username, size = 'large') => {
  return (
    <div>
      <Avatar
        style={{
          backgroundColor: getColor(username),
          verticalAlign: 'middle',
        }}
        size={size}
      >
        {username ? username.charAt(0).toUpperCase() : ''}
      </Avatar>
    </div>
  );
}

AnnotationInfo = props => {
  const { measurementData = {} } = props;
  const { userInfor = {} } = measurementData;
  return (
    <div className="annotation-info">
      <ul className="label-list">
        {(measurementData.locationLabel || []).map((lb, idx) => (
          <li className="lb-item" key={idx}>
            {`${lb}`}
          </li>
        ))}
      </ul>
      <div className="author-info">
        {userInfor.username || ''}
        {userInfor.avatar && (
          <Avatar className="ic-avatar" size="small" icon="user" />
        )}
      </div>
    </div>
  );
}

render() {
    const { loading } = this.state;

    return (
      <>
        <Switch checked={!loading} onChange={this.onChange} />

        <Card style={{ width: 300, marginTop: 16 }} loading={loading}>
          <Meta
            avatar={
              <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
            }
            title="Card title"
            description="This is the description"
          />
        </Card>

        <Card
          style={{ width: 300, marginTop: 16 }}
          actions={[
            <SettingOutlined key="setting" />,
            <EditOutlined key="edit" />,
            <EllipsisOutlined key="ellipsis" />,
          ]}
        >
          <Skeleton loading={loading} avatar active>
            <Meta
              avatar={
                <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
              }
              title="Card title"
              description="This is the description"
            />
          </Skeleton>
        </Card>
      </>
    );
  }

DeveloperItem = ({ name, avatar, url, contributions }) => {
  return (
    <A href={url} target="_blank" rel="noreferrer">
      <Card hoverable>
        <Card.Meta
          avatar={<Avatar src={avatar} />}
          title={name}
          description={
            <>
              <b>{contributions}</b> commit
              {contributions > 1 ? 's' : ''}
            </>
          }
        />
      </Card>
    </A>
  )
}

PageHeaderContent = ({ currentUser }) => {
  const loading = currentUser && Object.keys(currentUser).length;

  if (!loading) {
    return (
      <Skeleton
        avatar
        paragraph={{
          rows: 1,
        }}
        active
      />
    );
  }

  return (
    <div className={styles.pageHeaderContent}>
      <div className={styles.avatar}>
        <Avatar size="large" src={currentUser.avatar} />
      </div>
      <div className={styles.content}>
        <div className={styles.contentTitle}>
          早安，
          {currentUser.name}
          ，祝你开心每一天！
        </div>
        <div>
          {currentUser.title} |{currentUser.group}
        </div>
      </div>
    </div>
  );
}

render() {
    const {
      currentUser = {
        avatar: '',
        name: '',
      },
      menu,
    } = this.props;
    const menuHeaderDropdown = (
      <Menu className={styles.menu} selectedKeys={[]} onClick={this.onMenuClick}>
        {menu && (
          <Menu.Item key="center">
            <UserOutlined />
            个人中心
          </Menu.Item>
        )}
        {menu && (
          <Menu.Item key="settings">
            <SettingOutlined />
            个人设置
          </Menu.Item>
        )}
        {menu && <Menu.Divider />}

        <Menu.Item key="logout">
          <LogoutOutlined />
          退出登录
        </Menu.Item>
      </Menu>
    );
    return currentUser && currentUser.name ? (
      <HeaderDropdown overlay={menuHeaderDropdown}>
        <span className={`${styles.action} ${styles.account}`}>
          <Avatar size="small" className={styles.avatar} src={currentUser.avatar} alt="avatar" />
          {/*<span className={`${styles.name} anticon`}>{currentUser.name}</span>*/}
        </span>
      </HeaderDropdown>
    ) : (
      <span className={`${styles.action} ${styles.account}`}>
        <Spin
          size="small"
          style={{
            marginLeft: 8,
            marginRight: 8,
          }}
        />
      </span>
    );
  }

Dropzone = (props) => {
	const [hightlight, setHighlight] = useState(false);
	const fileInputRef = React.createRef();

	const fileListToArray = (list) => {
		const array = [];

		for (var i = 0; i < list.length; i++) {
			array.push(list.item(i));
		}
		array[0].path = URL.createObjectURL(list[0]);

		return array;
	};

	const onFileAdded = (evt) => {
		if (props.disabled) return;
		const files = evt.target.files;
		if (props.onFileAdded) {
			const array = fileListToArray(files);
			props.onFileAdded(array);
		}
	};

	const openFileDialog = () => {
		if (props.disabled) return;
		fileInputRef.current.click();
	};

	const onDragOver = (evt) => {
		evt.preventDefault();

		if (props.disabled) return;

		setHighlight(true);
	};

	const onDragLeave = () => {
		setHighlight(false);
	};

	const onDrop = (event) => {
		event.preventDefault();

		if (props.disabled) return;

		const files = event.dataTransfer.files;
		if (props.onFileAdded) {
			const array = fileListToArray(files);
			props.onFileAdded(array);
		}
		setHighlight(false);
	};

	return (
		<div className="dropzone-component">
			<Avatar
				alt="user avatar"
				size={216}
				className="user-avatar"
				src={`${process.env.REACT_APP_S3_STORAGE_PATH}${props.avatar}`}
			/>
			<Icon
				type="cloud-upload"
				className={`Dropzone ${hightlight ? "Highlight" : ""}`}
				onDragOver={onDragOver}
				onDragLeave={onDragLeave}
				onDrop={onDrop}
				onClick={openFileDialog}
				style={{ cursor: props.disabled ? "default" : "pointer" }}
			/>
			<input ref={fileInputRef} className="FileInput" type="file" multiple onChange={onFileAdded} />
			<Button onClick={openFileDialog}>
				<span>Change profile picture</span>
			</Button>
		</div>
	);
}

render() {
    console.log(this.context)
    const { headerItem, lang } = this.state
    const { loginData } = this.props
    const menu = (<Menu>
      <Menu.Item>
        <a onClick={this.loginOut}>退出登陆</a>
      </Menu.Item></Menu>)
    return (
      <div className="header">
        <div className="left-section">
          {/* left */}
          <div className="icon-container">
            <span className="header-icon" />
            <p>&nbsp; Doraemon</p>
          </div>
          <div className="func-section">
            {
              headerItem && headerItem.map(item => (
                <Dropdown overlay={this.menu}>
                  <span className="ant-dropdown-link">
                    {item}<Icon type="down" />
                  </span>
                </Dropdown>
              ))
            }
          </div>
        </div>
        <div className="right-container">
          {/* right */}
          <div className="func-section">
            <span onClick={() => this.changeLang(lang === CN ? EN : CN)}>{lang === CN ? EN : CN}</span>
            <div className="divider" />
            <Dropdown overlay={menu}>
              <span className="ant-dropdown-link text">
                <Avatar style={{ justifyContent: 'center' }} icon="user" />{loginData.data}
              </span>
            </Dropdown>
          </div>
        </div>
      </div>
    );
  }

Home = ({ history }) => {

  const [list, setList] = useState([]);

  const [currentPageIndex, setCurrentPageIndex] = useState(1);

  const [total, setTotal] = useState(0);

  const [loading, setLoading] = useState(false);

  useEffect(() => {
    async function loadData() {
      try {
        await setLoading(true);
        const data = await getListByPage(currentPageIndex);
        setList(data.list);
        setTotal(data.count);
        message.success('加载成功!');
      } catch (error) {
        message.error('加载失败!');
      } finally {
        await setLoading(false);
      }
    }

    loadData()
  }, [currentPageIndex]);

  const onHandlePageChange = (page, size) => {
    setCurrentPageIndex(page);
  }


  const renderCardList = useMemo(() => {

    const onHandleDetail = item => {
      history.push({ pathname: '/workspace', state: { id: item.id } });
    };
  
    return list.map(item => <Col style={{ margin: '10px 0px' }} key={item.id} span={6}>
      <Card
        loading={loading}
        hoverable
        title={item.name}
        bordered={false}
        cover={<Spin spinning={loading}><div onClick={() => onHandleDetail(item)} style={{ height: 200, padding: 10, textAlign: 'center' }}><img alt="cover" style={{ height: '100%', width: '100%' }} src={`http://topology.le5le.com${item.image}`} /></div></Spin>}
        extra={[
          <div key="like" style={{ display: 'inline', }}><Icon type="like" /><b style={{ fontSize: 15, marginLeft: 5 }}>{item.star}</b></div>,
          <div key="heart" style={{ display: 'inline', marginLeft: 10 }}><Icon type="heart" /><b style={{ fontSize: 15, marginLeft: 5 }}>{item.recommend}</b></div>
        ]}
      >
        <Meta
          title={item.username}
          avatar={<Avatar style={{ backgroundColor: colorList[Math.ceil(Math.random() * 4)], verticalAlign: 'middle' }} size="large">{item.username.slice(0, 1)}</Avatar>}
          description={item.desc || '暂无描述'}
          style={{ height: 80, overflow: 'hidden' }}
        />
      </Card>
    </Col>)
  }, [list, loading, history])


  return (
    <div style={{ background: '#ECECEC', padding: '30px 200px', height: '100vh', overflow: 'auto' }}>
      <Row gutter={16}>
        {
          renderCardList
        }
      </Row>
      <Pagination style={{ textAlign: 'center', marginTop: 30 }} current={currentPageIndex} total={total} onChange={onHandlePageChange} />
    </div>
  );
}

Status = () => {
  const [userInfo, setUserInfo] = useState();
  useEffect(() => {
    if (!token) return;

    (async () => {
      setUserInfo({
        nickname: "shadows",
        avatarUrl: "",
        gender: 1,
        country: "中国",
        province: "广东",
        city: "深圳",
      });
    })();
  }, []);

  if (!userInfo) return null;

  return (
    <section>
      <Descriptions title={`欢迎你，${userInfo.nickname}`}>
        <Descriptions.Item label="Avatar">
          <Avatar src={userInfo.avatarUrl} />
        </Descriptions.Item>
        <Descriptions.Item label="UserName">
          {userInfo.nickname}
        </Descriptions.Item>
        <Descriptions.Item label="Gender">
          {userInfo.gender ? "boy" : "girl"}
        </Descriptions.Item>
        <Descriptions.Item label="Live">{`${userInfo.country} ${userInfo.province} ${userInfo.city}`}</Descriptions.Item>
      </Descriptions>
      <style jsx>{`
        section {
          padding: 20px;
        }
      `}</style>
    </section>
  );
}

export default function NoticeList({
  data = [],
  onClick,
  onClear,
  title,
  locale,
  emptyText,
  emptyImage,
  onViewMore = null,
  showClear = true,
  showViewMore = false,
}) {
  if (data.length === 0) {
    return (
      <div className={styles.notFound}>
        {emptyImage ? <img src={emptyImage} alt="not found" /> : null}
        <div>{emptyText || locale.emptyText}</div>
      </div>
    );
  }
  return (
    <div>
      <List className={styles.list}>
        {data.map((item, i) => {
          const itemCls = classNames(styles.item, {
            [styles.read]: item.read,
          });
          // eslint-disable-next-line no-nested-ternary
          const leftIcon = item.avatar ? (
            typeof item.avatar === 'string' ? (
              <Avatar className={styles.avatar} src={item.avatar} />
            ) : (
              <span className={styles.iconElement}>{item.avatar}</span>
            )
          ) : null;

          return (
            <List.Item className={itemCls} key={item.key || i} onClick={() => onClick(item)}>
              <List.Item.Meta
                className={styles.meta}
                avatar={leftIcon}
                title={
                  <div className={styles.title}>
                    {item.title}
                    <div className={styles.extra}>{item.extra}</div>
                  </div>
                }
                description={
                  <div>
                    <div className={styles.description} title={item.description}>
                      {item.description}
                    </div>
                    <div className={styles.datetime}>{item.datetime}</div>
                  </div>
                }
              />
            </List.Item>
          );
        })}
      </List>
      <div className={styles.bottomBar}>
        {showClear ? (
          <div onClick={onClear}>
            {locale.clear} {locale[title] || title}
          </div>
        ) : null}
        {showViewMore ? <div onClick={onViewMore}>{locale.viewMore}</div> : null}
      </div>
    </div>
  );
}

export function ChannelItem({ channel, handleShowChannel = () => {} }) {
    const { setChannel } = useDashboard()

    const handleClickChannel = () => {
        setChannel(channel)
        handleShowChannel()
    }

    const isUnread = channel.isUnread
    const url = channel.url
    const shortName = capitalizeFirstLetter(
        firstCharacterOfEachString(channel.name)
    )
    const name = channel.name
    const lastMessage = channel.lastMessage
    const createdAt = formatLastTime(channel.createdAt)

    return (
        <Row
            style={{
                height: 60,
                width: '100%',
                justifyContent: 'space-between',
                alignItems: 'center',
                borderBottom: `1px solid ${THIRD_COLOR}`,
                padding: '0 12px',
                backgroundColor: isUnread && FOURTH_COLOR,
                cursor: 'pointer',
            }}
            key={url}
            onClick={handleClickChannel}
        >
            <Col xs={3} sm={3} md={3} lg={4} xl={3}>
                <Avatar style={{ marginRight: 12 }} src={url} size="large">
                    {shortName}
                </Avatar>
            </Col>
            <Col xs={14} sm={14} md={14} lg={12} xl={14}>
                <Row>
                    <Text
                        style={{ margin: 0, padding: '0 10px' }}
                        strong={isUnread}
                        ellipsis={true}
                        // level={5}
                    >
                        {name}
                    </Text>
                </Row>
                <Row>
                    <Text
                        style={{ padding: '0 10px', fontSize: 12 }}
                        type={!isUnread && 'secondary'}
                        ellipsis={true}
                        strong={isUnread}
                    >
                        {lastMessage}
                    </Text>
                </Row>
            </Col>
            <Col
                style={{
                    display: 'flex',
                    justifyContent: 'flex-end',
                    alignItems: 'center',
                }}
                xs={7}
                sm={7}
                md={7}
                lg={8}
                xl={7}
            >
                <Text strong={isUnread}>{createdAt}</Text>
                {isUnread && (
                    <Badge style={{ marginLeft: 12 }} color={PRIMARY_COLOR} />
                )}
            </Col>
        </Row>
    )
}

AppLayout = props => {
  let history = useHistory();

  // 结构赋值
  const { isCollapsed, username, toggle, signOut } = props;

  return (
    <Layout className={styles.wrapper}>
      <Sider trigger={null} collapsible collapsed={isCollapsed}>
        {props.sidebar}
      </Sider>
      <Layout>
        <Header className={styles.header}>
          <LegacyIcon
            className={styles["trigger"]}
            type={isCollapsed ? "menu-unfold" : "menu-fold"}
            onClick={() => toggle(isCollapsed)}
          />
          <span className={styles.home}>首页</span>
          <div className={styles["icon-group"]}>
            <Avatar
              style={{
                color: "#f56a00",
                backgroundColor: "#fde3cf",
                marginRight: "10px"
              }}
            >
              {username ? username[0] : ""}
            </Avatar>
            <span>
              <NotificationOutlined />
            </span>
            <span className={styles["icon-box"]}>
              <Dropdown
                overlay={() => menu(signOut, history)}
                placement="bottomCenter"
              >
                <MoreOutlined className={styles.icon} />
              </Dropdown>
            </span>
          </div>
        </Header>
        <Content
          style={{
            margin: "24px 16px",
            padding: 24,
            background: "#fff",
            minHeight: 280,
            overflowY: "scroll"
          }}
        >
          {props.content}
        </Content>
      </Layout>
      {/* <div
        style={{
          position: "absolute",
          bottom: "0px",
          width: "100%",
          textAlign: "center",
          backgroundColor: "#2d3a4b",
          color: "#eee",
          padding: "5px 0",
          fontSize: "12px"
        }}
      >
        鄂ICP备19026512号-3
      </div> */}
    </Layout>
  );
}

render() {
    const {
      currentUser = { avatar: '',  nickname: '', },  menu } = this.props;
    const menuHeaderDropdown = (
      <Menu className={styles.menu} selectedKeys={[]} onClick={this.onMenuClick}>
        {menu && (
          <Menu.Item key="center">
            <Icon type="user" />
            <FormattedMessage id="menu.account.center" defaultMessage="account center" />
          </Menu.Item>
        )}
        {menu && (
          <Menu.Item key="settings">
            <Icon type="setting" />
            <FormattedMessage id="menu.account.settings" defaultMessage="account settings" />
          </Menu.Item>
        )}
        {menu && <Menu.Divider />}

        <Menu.Item key="logout">
          <Icon type="logout" />
          <FormattedMessage id="menu.account.logout" defaultMessage="logout" />
        </Menu.Item>
      </Menu>
    );
    return currentUser && currentUser.nickname ? (
      <HeaderDropdown overlay={menuHeaderDropdown}>
        <span className={`${styles.action} ${styles.account}`}>
          <Avatar size="small" className={styles.avatar} src={currentUser.avatar} alt="avatar" />
          <span className={styles.name}>{currentUser.nickname}</span>
        </span>
      </HeaderDropdown>
    ) : (
      <Spin
        size="small"
        style={{
          marginLeft: 8,
          marginRight: 8,
        }}
      />
    );
  }