102 lines
3.0 KiB
JavaScript
102 lines
3.0 KiB
JavaScript
import React, { PureComponent } from 'react';
|
||
import { connect } from 'dva';
|
||
import { Card, Button, Icon, List } from 'antd';
|
||
|
||
import Ellipsis from '@/components/Ellipsis';
|
||
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
|
||
|
||
import styles from './CardList.less';
|
||
|
||
@connect(({ list, loading }) => ({
|
||
list,
|
||
loading: loading.models.list,
|
||
}))
|
||
class CardList extends PureComponent {
|
||
componentDidMount() {
|
||
const { dispatch } = this.props;
|
||
dispatch({
|
||
type: 'list/fetch',
|
||
payload: {
|
||
count: 8,
|
||
},
|
||
});
|
||
}
|
||
|
||
render() {
|
||
const {
|
||
list: { list },
|
||
loading,
|
||
} = this.props;
|
||
|
||
const content = (
|
||
<div className={styles.pageHeaderContent}>
|
||
<p>
|
||
段落示意：蚂蚁金服务设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，
|
||
提供跨越设计与开发的体验解决方案。
|
||
</p>
|
||
<div className={styles.contentLink}>
|
||
<a>
|
||
<img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg" />{' '}
|
||
快速开始
|
||
</a>
|
||
<a>
|
||
<img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg" />{' '}
|
||
产品简介
|
||
</a>
|
||
<a>
|
||
<img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg" />{' '}
|
||
产品文档
|
||
</a>
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
const extraContent = (
|
||
<div className={styles.extraImg}>
|
||
<img
|
||
alt="这是一个标题"
|
||
src="https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png"
|
||
/>
|
||
</div>
|
||
);
|
||
|
||
return (
|
||
<PageHeaderWrapper title="卡片列表" content={content} extraContent={extraContent}>
|
||
<div className={styles.cardList}>
|
||
<List
|
||
rowKey="id"
|
||
loading={loading}
|
||
grid={{ gutter: 24, lg: 3, md: 2, sm: 1, xs: 1 }}
|
||
dataSource={['', ...list]}
|
||
renderItem={item =>
|
||
item ? (
|
||
<List.Item key={item.id}>
|
||
<Card hoverable className={styles.card} actions={[<a>操作一</a>, <a>操作二</a>]}>
|
||
<Card.Meta
|
||
avatar={<img alt="" className={styles.cardAvatar} src={item.avatar} />}
|
||
title={<a>{item.title}</a>}
|
||
description={
|
||
<Ellipsis className={styles.item} lines={3}>
|
||
{item.description}
|
||
</Ellipsis>
|
||
}
|
||
/>
|
||
</Card>
|
||
</List.Item>
|
||
) : (
|
||
<List.Item>
|
||
<Button type="dashed" className={styles.newButton}>
|
||
<Icon type="plus" /> 新建产品
|
||
</Button>
|
||
</List.Item>
|
||
)
|
||
}
|
||
/>
|
||
</div>
|
||
</PageHeaderWrapper>
|
||
);
|
||
}
|
||
}
|
||
|
||
export default CardList;
|