愚道
8 years ago
6 changed files with 222 additions and 242 deletions
@ -1,78 +1,86 @@ |
|||
import React from 'react'; |
|||
import React, { PureComponent } from 'react'; |
|||
import { List, Card, Icon, Dropdown, Menu, Avatar, Tooltip } from 'antd'; |
|||
import numeral from 'numeral'; |
|||
import { connect } from 'dva'; |
|||
import { formatWan } from '../../../utils/utils'; |
|||
import stylesApplications from '../../List/Search/Applications.less'; |
|||
import stylesApplications from '../../List/Applications.less'; |
|||
|
|||
export default props => { |
|||
const { list } = props; |
|||
const itemMenu = ( |
|||
<Menu> |
|||
<Menu.Item> |
|||
<a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/"> |
|||
1st menu item |
|||
</a> |
|||
</Menu.Item> |
|||
<Menu.Item> |
|||
<a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/"> |
|||
2nd menu item |
|||
</a> |
|||
</Menu.Item> |
|||
<Menu.Item> |
|||
<a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/"> |
|||
3d menu item |
|||
</a> |
|||
</Menu.Item> |
|||
</Menu> |
|||
); |
|||
const CardInfo = ({ activeUser, newUser }) => ( |
|||
<div className={stylesApplications.cardInfo}> |
|||
<div> |
|||
<p>活跃用户</p> |
|||
<p>{activeUser}</p> |
|||
@connect(({ list }) => ({ |
|||
list, |
|||
})) |
|||
export default class Center extends PureComponent { |
|||
render() { |
|||
const { |
|||
list: { list }, |
|||
} = this.props; |
|||
const itemMenu = ( |
|||
<Menu> |
|||
<Menu.Item> |
|||
<a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/"> |
|||
1st menu item |
|||
</a> |
|||
</Menu.Item> |
|||
<Menu.Item> |
|||
<a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/"> |
|||
2nd menu item |
|||
</a> |
|||
</Menu.Item> |
|||
<Menu.Item> |
|||
<a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/"> |
|||
3d menu item |
|||
</a> |
|||
</Menu.Item> |
|||
</Menu> |
|||
); |
|||
const CardInfo = ({ activeUser, newUser }) => ( |
|||
<div className={stylesApplications.cardInfo}> |
|||
<div> |
|||
<p>活跃用户</p> |
|||
<p>{activeUser}</p> |
|||
</div> |
|||
<div> |
|||
<p>新增用户</p> |
|||
<p>{newUser}</p> |
|||
</div> |
|||
</div> |
|||
<div> |
|||
<p>新增用户</p> |
|||
<p>{newUser}</p> |
|||
</div> |
|||
</div> |
|||
); |
|||
return ( |
|||
<List |
|||
rowKey="id" |
|||
className={stylesApplications.filterCardList} |
|||
grid={{ gutter: 24, xxl: 3, xl: 2, lg: 2, md: 2, sm: 2, xs: 1 }} |
|||
dataSource={list} |
|||
renderItem={item => ( |
|||
<List.Item key={item.id}> |
|||
<Card |
|||
hoverable |
|||
bodyStyle={{ paddingBottom: 20 }} |
|||
actions={[ |
|||
<Tooltip title="下载"> |
|||
<Icon type="download" /> |
|||
</Tooltip>, |
|||
<Tooltip title="编辑"> |
|||
<Icon type="edit" /> |
|||
</Tooltip>, |
|||
<Tooltip title="分享"> |
|||
<Icon type="share-alt" /> |
|||
</Tooltip>, |
|||
<Dropdown overlay={itemMenu}> |
|||
<Icon type="ellipsis" /> |
|||
</Dropdown>, |
|||
]} |
|||
> |
|||
<Card.Meta avatar={<Avatar size="small" src={item.avatar} />} title={item.title} /> |
|||
<div className={stylesApplications.cardItemContent}> |
|||
<CardInfo |
|||
activeUser={formatWan(item.activeUser)} |
|||
newUser={numeral(item.newUser).format('0,0')} |
|||
/> |
|||
</div> |
|||
</Card> |
|||
</List.Item> |
|||
)} |
|||
/> |
|||
); |
|||
}; |
|||
); |
|||
return ( |
|||
<List |
|||
rowKey="id" |
|||
className={stylesApplications.filterCardList} |
|||
grid={{ gutter: 24, xxl: 3, xl: 2, lg: 2, md: 2, sm: 2, xs: 1 }} |
|||
dataSource={list} |
|||
renderItem={item => ( |
|||
<List.Item key={item.id}> |
|||
<Card |
|||
hoverable |
|||
bodyStyle={{ paddingBottom: 20 }} |
|||
actions={[ |
|||
<Tooltip title="下载"> |
|||
<Icon type="download" /> |
|||
</Tooltip>, |
|||
<Tooltip title="编辑"> |
|||
<Icon type="edit" /> |
|||
</Tooltip>, |
|||
<Tooltip title="分享"> |
|||
<Icon type="share-alt" /> |
|||
</Tooltip>, |
|||
<Dropdown overlay={itemMenu}> |
|||
<Icon type="ellipsis" /> |
|||
</Dropdown>, |
|||
]} |
|||
> |
|||
<Card.Meta avatar={<Avatar size="small" src={item.avatar} />} title={item.title} /> |
|||
<div className={stylesApplications.cardItemContent}> |
|||
<CardInfo |
|||
activeUser={formatWan(item.activeUser)} |
|||
newUser={numeral(item.newUser).format('0,0')} |
|||
/> |
|||
</div> |
|||
</Card> |
|||
</List.Item> |
|||
)} |
|||
/> |
|||
); |
|||
} |
|||
} |
|||
|
|||
@ -1,60 +1,68 @@ |
|||
import React from 'react'; |
|||
import React, { PureComponent } from 'react'; |
|||
import { List, Icon, Avatar, Tag } from 'antd'; |
|||
import moment from 'moment'; |
|||
import stylesArticles from '../../List/Search/Articles.less'; |
|||
import { connect } from 'dva'; |
|||
import stylesArticles from '../../List/Articles.less'; |
|||
import styles from './Articles.less'; |
|||
|
|||
export default props => { |
|||
const { list } = props; |
|||
const IconText = ({ type, text }) => ( |
|||
<span> |
|||
<Icon type={type} style={{ marginRight: 8 }} /> |
|||
{text} |
|||
</span> |
|||
); |
|||
const ListContent = ({ data: { content, updatedAt, avatar, owner, href } }) => ( |
|||
<div className={stylesArticles.listContent}> |
|||
<div className={stylesArticles.description}>{content}</div> |
|||
<div className={stylesArticles.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> |
|||
@connect(({ list }) => ({ |
|||
list, |
|||
})) |
|||
export default class Center extends PureComponent { |
|||
render() { |
|||
const { |
|||
list: { list }, |
|||
} = this.props; |
|||
const IconText = ({ type, text }) => ( |
|||
<span> |
|||
<Icon type={type} style={{ marginRight: 8 }} /> |
|||
{text} |
|||
</span> |
|||
); |
|||
const ListContent = ({ data: { content, updatedAt, avatar, owner, href } }) => ( |
|||
<div className={stylesArticles.listContent}> |
|||
<div className={stylesArticles.description}>{content}</div> |
|||
<div className={stylesArticles.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> |
|||
</div> |
|||
); |
|||
return ( |
|||
<List |
|||
size="large" |
|||
className={styles.articleList} |
|||
rowKey="id" |
|||
itemLayout="vertical" |
|||
dataSource={list} |
|||
renderItem={item => ( |
|||
<List.Item |
|||
key={item.id} |
|||
actions={[ |
|||
<IconText type="star-o" text={item.star} />, |
|||
<IconText type="like-o" text={item.like} />, |
|||
<IconText type="message" text={item.message} />, |
|||
]} |
|||
> |
|||
<List.Item.Meta |
|||
title={ |
|||
<a className={stylesArticles.listItemMetaTitle} href={item.href}> |
|||
{item.title} |
|||
</a> |
|||
} |
|||
description={ |
|||
<span> |
|||
<Tag>Ant Design</Tag> |
|||
<Tag>设计语言</Tag> |
|||
<Tag>蚂蚁金服</Tag> |
|||
</span> |
|||
} |
|||
/> |
|||
<ListContent data={item} /> |
|||
</List.Item> |
|||
)} |
|||
/> |
|||
); |
|||
}; |
|||
); |
|||
return ( |
|||
<List |
|||
size="large" |
|||
className={styles.articleList} |
|||
rowKey="id" |
|||
itemLayout="vertical" |
|||
dataSource={list} |
|||
renderItem={item => ( |
|||
<List.Item |
|||
key={item.id} |
|||
actions={[ |
|||
<IconText type="star-o" text={item.star} />, |
|||
<IconText type="like-o" text={item.like} />, |
|||
<IconText type="message" text={item.message} />, |
|||
]} |
|||
> |
|||
<List.Item.Meta |
|||
title={ |
|||
<a className={stylesArticles.listItemMetaTitle} href={item.href}> |
|||
{item.title} |
|||
</a> |
|||
} |
|||
description={ |
|||
<span> |
|||
<Tag>Ant Design</Tag> |
|||
<Tag>设计语言</Tag> |
|||
<Tag>蚂蚁金服</Tag> |
|||
</span> |
|||
} |
|||
/> |
|||
<ListContent data={item} /> |
|||
</List.Item> |
|||
)} |
|||
/> |
|||
); |
|||
} |
|||
} |
|||
|
|||
@ -1,42 +1,50 @@ |
|||
import React from 'react'; |
|||
import React, { PureComponent } from 'react'; |
|||
import { List, Card } from 'antd'; |
|||
import moment from 'moment'; |
|||
import { connect } from 'dva'; |
|||
import AvatarList from '../../../components/AvatarList'; |
|||
import stylesProjects from '../../List/Search/Projects.less'; |
|||
import stylesProjects from '../../List/Projects.less'; |
|||
|
|||
export default props => { |
|||
const { list } = props; |
|||
return ( |
|||
<List |
|||
className={stylesProjects.coverCardList} |
|||
rowKey="id" |
|||
grid={{ gutter: 24, xxl: 3, xl: 2, lg: 2, md: 2, sm: 2, xs: 1 }} |
|||
dataSource={list} |
|||
renderItem={item => ( |
|||
<List.Item> |
|||
<Card |
|||
className={stylesProjects.card} |
|||
hoverable |
|||
cover={<img alt={item.title} src={item.cover} />} |
|||
> |
|||
<Card.Meta title={<a href="#">{item.title}</a>} description={item.subDescription} /> |
|||
<div className={stylesProjects.cardItemContent}> |
|||
<span>{moment(item.updatedAt).fromNow()}</span> |
|||
<div className={stylesProjects.avatarList}> |
|||
<AvatarList size="mini"> |
|||
{item.members.map(member => ( |
|||
<AvatarList.Item |
|||
key={`${item.id}-avatar-${member.id}`} |
|||
src={member.avatar} |
|||
tips={member.name} |
|||
/> |
|||
))} |
|||
</AvatarList> |
|||
@connect(({ list }) => ({ |
|||
list, |
|||
})) |
|||
export default class Center extends PureComponent { |
|||
render() { |
|||
const { |
|||
list: { list }, |
|||
} = this.props; |
|||
return ( |
|||
<List |
|||
className={stylesProjects.coverCardList} |
|||
rowKey="id" |
|||
grid={{ gutter: 24, xxl: 3, xl: 2, lg: 2, md: 2, sm: 2, xs: 1 }} |
|||
dataSource={list} |
|||
renderItem={item => ( |
|||
<List.Item> |
|||
<Card |
|||
className={stylesProjects.card} |
|||
hoverable |
|||
cover={<img alt={item.title} src={item.cover} />} |
|||
> |
|||
<Card.Meta title={<a href="#">{item.title}</a>} description={item.subDescription} /> |
|||
<div className={stylesProjects.cardItemContent}> |
|||
<span>{moment(item.updatedAt).fromNow()}</span> |
|||
<div className={stylesProjects.avatarList}> |
|||
<AvatarList size="mini"> |
|||
{item.members.map(member => ( |
|||
<AvatarList.Item |
|||
key={`${item.id}-avatar-${member.id}`} |
|||
src={member.avatar} |
|||
tips={member.name} |
|||
/> |
|||
))} |
|||
</AvatarList> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</Card> |
|||
</List.Item> |
|||
)} |
|||
/> |
|||
); |
|||
}; |
|||
</Card> |
|||
</List.Item> |
|||
)} |
|||
/> |
|||
); |
|||
} |
|||
} |
|||
|
|||
Loading…
Reference in new issue