愚道
8 years ago
6 changed files with 54 additions and 465 deletions
@ -1,7 +0,0 @@ |
|||||
// Use require.context to require reducers automatically
|
|
||||
// Ref: https://webpack.js.org/guides/dependency-management/#require-context
|
|
||||
const context = require.context('./', false, /\.js$/); |
|
||||
export default context |
|
||||
.keys() |
|
||||
.filter(item => item !== './index.js') |
|
||||
.map(key => context(key)); |
|
||||
@ -1,414 +0,0 @@ |
|||||
import React, { PureComponent } from 'react'; |
|
||||
import { connect } from 'dva'; |
|
||||
import { Link } from 'dva/router'; |
|
||||
import moment from 'moment'; |
|
||||
import numeral from 'numeral'; |
|
||||
import { |
|
||||
List, |
|
||||
Card, |
|
||||
Row, |
|
||||
Col, |
|
||||
Icon, |
|
||||
Dropdown, |
|
||||
Menu, |
|
||||
Avatar, |
|
||||
Tag, |
|
||||
Divider, |
|
||||
Tooltip, |
|
||||
Spin, |
|
||||
Input, |
|
||||
} from 'antd'; |
|
||||
import AvatarList from '../../components/AvatarList'; |
|
||||
import { formatWan } from '../../utils/utils'; |
|
||||
import stylesProjects from '../List/Projects.less'; |
|
||||
import styles from './Center.less'; |
|
||||
import stylesArticles from '../List/Articles.less'; |
|
||||
import stylesApplications from '../List/Applications.less'; |
|
||||
import GridContent from '../../layouts/GridContent'; |
|
||||
|
|
||||
@connect(({ list, loading, user, project }) => ({ |
|
||||
list, |
|
||||
listLoading: loading.effects['list/fetch'], |
|
||||
currentUser: user.currentUser, |
|
||||
currentUserLoading: loading.effects['user/fetchCurrent'], |
|
||||
project, |
|
||||
projectLoading: loading.effects['project/fetchNotice'], |
|
||||
})) |
|
||||
export default class Center extends PureComponent { |
|
||||
state = { |
|
||||
key: 'article', |
|
||||
newTags: [], |
|
||||
inputVisible: false, |
|
||||
inputValue: '', |
|
||||
}; |
|
||||
|
|
||||
componentDidMount() { |
|
||||
const { dispatch } = this.props; |
|
||||
dispatch({ |
|
||||
type: 'user/fetchCurrent', |
|
||||
}); |
|
||||
dispatch({ |
|
||||
type: 'list/fetch', |
|
||||
payload: { |
|
||||
count: 8, |
|
||||
}, |
|
||||
}); |
|
||||
dispatch({ |
|
||||
type: 'project/fetchNotice', |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
onTabChange = key => { |
|
||||
this.setState({ key }); |
|
||||
}; |
|
||||
|
|
||||
showInput = () => { |
|
||||
this.setState({ inputVisible: true }, () => this.input.focus()); |
|
||||
}; |
|
||||
|
|
||||
saveInputRef = input => { |
|
||||
this.input = input; |
|
||||
}; |
|
||||
|
|
||||
handleInputChange = e => { |
|
||||
this.setState({ inputValue: e.target.value }); |
|
||||
}; |
|
||||
|
|
||||
handleInputConfirm = () => { |
|
||||
const { state } = this; |
|
||||
const { inputValue } = state; |
|
||||
let { newTags } = state; |
|
||||
if (inputValue && newTags.filter(tag => tag.label === inputValue).length === 0) { |
|
||||
newTags = [...newTags, { key: `new-${newTags.length}`, label: inputValue }]; |
|
||||
} |
|
||||
this.setState({ |
|
||||
newTags, |
|
||||
inputVisible: false, |
|
||||
inputValue: '', |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
renderArticles = (list, loading) => { |
|
||||
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> |
|
||||
); |
|
||||
return ( |
|
||||
<List |
|
||||
size="large" |
|
||||
className={styles.articleList} |
|
||||
loading={loading} |
|
||||
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> |
|
||||
)} |
|
||||
/> |
|
||||
); |
|
||||
}; |
|
||||
|
|
||||
renderApplications = (list, loading) => { |
|
||||
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> |
|
||||
); |
|
||||
return ( |
|
||||
<List |
|
||||
rowKey="id" |
|
||||
className={stylesApplications.filterCardList} |
|
||||
grid={{ gutter: 24, xxl: 3, xl: 2, lg: 2, md: 2, sm: 2, xs: 1 }} |
|
||||
loading={loading} |
|
||||
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> |
|
||||
)} |
|
||||
/> |
|
||||
); |
|
||||
}; |
|
||||
|
|
||||
renderProjects = (list, loading) => { |
|
||||
return ( |
|
||||
<List |
|
||||
className={stylesProjects.coverCardList} |
|
||||
rowKey="id" |
|
||||
loading={loading} |
|
||||
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> |
|
||||
</Card> |
|
||||
</List.Item> |
|
||||
)} |
|
||||
/> |
|
||||
); |
|
||||
}; |
|
||||
|
|
||||
renderContent() { |
|
||||
const { newTags, inputVisible, inputValue } = this.state; |
|
||||
const { |
|
||||
currentUser, |
|
||||
project: { notice }, |
|
||||
projectLoading, |
|
||||
} = this.props; |
|
||||
return ( |
|
||||
<div> |
|
||||
<div className={styles.avatarHolder}> |
|
||||
<img alt="" src={currentUser.avatar} /> |
|
||||
<div className={styles.name}>{currentUser.name}</div> |
|
||||
<div>{currentUser.signature}</div> |
|
||||
</div> |
|
||||
<div className={styles.detail}> |
|
||||
<p> |
|
||||
<i className={styles.title} /> |
|
||||
{currentUser.title} |
|
||||
</p> |
|
||||
<p> |
|
||||
<i className={styles.group} /> |
|
||||
{currentUser.group} |
|
||||
</p> |
|
||||
<p> |
|
||||
<i className={styles.address} /> |
|
||||
{currentUser.geographic.province.label} |
|
||||
{currentUser.geographic.city.label} |
|
||||
</p> |
|
||||
</div> |
|
||||
<Divider dashed /> |
|
||||
<div className={styles.tags}> |
|
||||
<div className={styles.tagsTitle}>标签</div> |
|
||||
{currentUser.tags.map(item => <Tag key={item.key}>{item.label}</Tag>)} |
|
||||
<Tag style={{ background: '#fff', borderStyle: 'dashed' }}> |
|
||||
<Icon type="plus" /> |
|
||||
</Tag> |
|
||||
</div> |
|
||||
<Divider dashed /> |
|
||||
<div className={styles.team}> |
|
||||
<div className={styles.teamTitle}>团队</div> |
|
||||
<Spin spinning={projectLoading}> |
|
||||
<Row gutter={36}> |
|
||||
{notice.map(item => ( |
|
||||
<Col key={item.id} className={styles.item} lg={24} xl={12}> |
|
||||
<Avatar size="small" src={item.logo} /> |
|
||||
{item.member} |
|
||||
</Col> |
|
||||
))} |
|
||||
</Row> |
|
||||
</Spin> |
|
||||
</div> |
|
||||
<Divider dashed /> |
|
||||
<div className={styles.tags}> |
|
||||
<div className={styles.tagsTitle}>标签</div> |
|
||||
{currentUser.tags.concat(newTags).map(item => <Tag key={item.key}>{item.label}</Tag>)} |
|
||||
{inputVisible && ( |
|
||||
<Input |
|
||||
ref={this.saveInputRef} |
|
||||
type="text" |
|
||||
size="small" |
|
||||
style={{ width: 78 }} |
|
||||
value={inputValue} |
|
||||
onChange={this.handleInputChange} |
|
||||
onBlur={this.handleInputConfirm} |
|
||||
onPressEnter={this.handleInputConfirm} |
|
||||
/> |
|
||||
)} |
|
||||
{!inputVisible && ( |
|
||||
<Tag onClick={this.showInput} style={{ background: '#fff', borderStyle: 'dashed' }}> |
|
||||
<Icon type="plus" /> |
|
||||
</Tag> |
|
||||
)} |
|
||||
</div> |
|
||||
<Divider style={{ marginTop: 16 }} dashed /> |
|
||||
<div className={styles.team}> |
|
||||
<div className={styles.teamTitle}>团队</div> |
|
||||
<Spin spinning={projectLoading}> |
|
||||
<Row gutter={36}> |
|
||||
{notice.map(item => ( |
|
||||
<Col key={item.id} lg={24} xl={12}> |
|
||||
<Link to={item.href}> |
|
||||
<Avatar size="small" src={item.logo} /> |
|
||||
{item.member} |
|
||||
</Link> |
|
||||
</Col> |
|
||||
))} |
|
||||
</Row> |
|
||||
</Spin> |
|
||||
</div> |
|
||||
</div> |
|
||||
); |
|
||||
} |
|
||||
|
|
||||
render() { |
|
||||
const { |
|
||||
list: { list }, |
|
||||
listLoading, |
|
||||
currentUser, |
|
||||
currentUserLoading, |
|
||||
} = this.props; |
|
||||
const operationTabList = [ |
|
||||
{ |
|
||||
key: 'article', |
|
||||
tab: ( |
|
||||
<span> |
|
||||
文章 <span style={{ fontSize: 14 }}>(8)</span> |
|
||||
</span> |
|
||||
), |
|
||||
}, |
|
||||
{ |
|
||||
key: 'application', |
|
||||
tab: ( |
|
||||
<span> |
|
||||
应用 <span style={{ fontSize: 14 }}>(8)</span> |
|
||||
</span> |
|
||||
), |
|
||||
}, |
|
||||
{ |
|
||||
key: 'project', |
|
||||
tab: ( |
|
||||
<span> |
|
||||
项目 <span style={{ fontSize: 14 }}>(8)</span> |
|
||||
</span> |
|
||||
), |
|
||||
}, |
|
||||
]; |
|
||||
const contentMap = { |
|
||||
article: this.renderArticles(list, listLoading), |
|
||||
application: this.renderApplications(list, listLoading), |
|
||||
project: this.renderProjects(list, listLoading), |
|
||||
}; |
|
||||
const { key } = this.state; |
|
||||
return ( |
|
||||
<GridContent> |
|
||||
<div className={styles.userCenter}> |
|
||||
<Row gutter={24}> |
|
||||
<Col lg={7} md={24}> |
|
||||
<Card bordered={false} style={{ marginBottom: 24 }} loading={currentUserLoading}> |
|
||||
{currentUser && Object.keys(currentUser).length |
|
||||
? this.renderContent() |
|
||||
: 'loading...'} |
|
||||
</Card> |
|
||||
</Col> |
|
||||
<Col lg={17} md={24}> |
|
||||
<Card |
|
||||
className={styles.tabsCard} |
|
||||
bordered={false} |
|
||||
tabList={operationTabList} |
|
||||
onTabChange={this.onTabChange} |
|
||||
> |
|
||||
{contentMap[key]} |
|
||||
</Card> |
|
||||
</Col> |
|
||||
</Row> |
|
||||
</div> |
|
||||
</GridContent> |
|
||||
); |
|
||||
} |
|
||||
} |
|
||||
Loading…
Reference in new issue