tsai
/
ant-design-pro
mirror of https://github.com/ant-design/ant-design-pro
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

add acount center

pull/1774/head
愚道 8 years ago
parent
dc5b0f67a6
commit
931e27fb49
6 changed files with 222 additions and 242 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 69
      config/config.js
  2. 154
      src/pages/Account/Center/Applications.js
  3. 118
      src/pages/Account/Center/Articles.js
  4. 23
      src/pages/Account/Center/Center.js
  5. 82
      src/pages/Account/Center/Projects.js
  6. 18
      src/pages/Account/Settings/Info.js

69
config/config.js
View File

@ -76,6 +76,32 @@ export default {
{ path: '/exception/403', component: './Exception/403' }, { path: '/exception/403', component: './Exception/403' },
{ path: '/exception/404', component: './Exception/404' }, { path: '/exception/404', component: './Exception/404' },
{ path: '/exception/500', component: './Exception/500' }, { path: '/exception/500', component: './Exception/500' },
// acount
{
path: '/acount/center',
component: './Account/Center/Center',
routes: [
{ path: '/acount/center', redirect: '/acount/center/articles' },
{ path: '/acount/center/articles', component: './Account/Center/Articles' },
{ path: '/acount/center/applications', component: './Account/Center/Applications' },
{ path: '/acount/center/projects', component: './Account/Center/Projects' },
],
},
{
path: '/acount/settings',
component: './Account/Settings/Info',
routes: [
{ path: '/acount/settings', redirect: '/acount/settings/base' },
{ path: '/acount/center/base', component: './Account/Settings/BaseView' },
{ path: '/acount/center/security', component: './Account/Settings/SecurityView' },
{ path: '/acount/center/binding', component: './Account/Settings/BindingView' },
{
path: '/acount/center/notification',
component: './Account/Settings/NotificationView',
},
],
},
], ],
}, },
], ],
@ -135,46 +161,3 @@ export default {
}, },
}, },
}; };
// [
// {
// "path": "/Dashboard",
// "exact": true,
// "redirect": "/Dashboard/Analysis"
// },
// {
// "path": "/Forms",
// "exact": true,
// "redirect": "/Forms/BasicForm"
// },
// {
// "path": "/Forms/StepForm",
// "exact": true,
// "redirect": "/Forms/StepForm/Step1"
// },
// {
// "path": "/List",
// "exact": true,
// "redirect": "/List/TableList"
// },
// {
// "path": "/List/Search",
// "exact": true,
// "redirect": "/List/Search/Articles"
// },
// {
// "path": "/Profile",
// "exact": true,
// "redirect": "/Profile/BasicProfile"
// },
// {
// "path": "/Result",
// "exact": true,
// "redirect": "/Result/Success"
// },
// {
// "path": "/Exception",
// "exact": true,
// "redirect": "/Exception/403"
// }
// ]

154
src/pages/Account/Center/Applications.js
View File

@ -1,78 +1,86 @@
import React from 'react'; import React, { PureComponent } from 'react';
import { List, Card, Icon, Dropdown, Menu, Avatar, Tooltip } from 'antd'; import { List, Card, Icon, Dropdown, Menu, Avatar, Tooltip } from 'antd';
import numeral from 'numeral'; import numeral from 'numeral';
import { connect } from 'dva';
import { formatWan } from '../../../utils/utils'; import { formatWan } from '../../../utils/utils';
import stylesApplications from '../../List/Search/Applications.less'; import stylesApplications from '../../List/Applications.less';
export default props => { @connect(({ list }) => ({
const { list } = props; list,
const itemMenu = ( }))
<Menu> export default class Center extends PureComponent {
<Menu.Item> render() {
<a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/"> const {
1st menu item list: { list },
</a> } = this.props;
</Menu.Item> const itemMenu = (
<Menu.Item> <Menu>
<a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/"> <Menu.Item>
2nd menu item <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
</a> 1st menu item
</Menu.Item> </a>
<Menu.Item> </Menu.Item>
<a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/"> <Menu.Item>
3d menu item <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
</a> 2nd menu item
</Menu.Item> </a>
</Menu> </Menu.Item>
); <Menu.Item>
const CardInfo = ({ activeUser, newUser }) => ( <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
<div className={stylesApplications.cardInfo}> 3d menu item
<div> </a>
<p>活跃用户</p> </Menu.Item>
<p>{activeUser}</p> </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>
<div> );
<p>新增用户</p> return (
<p>{newUser}</p> <List
</div> rowKey="id"
</div> className={stylesApplications.filterCardList}
); grid={{ gutter: 24, xxl: 3, xl: 2, lg: 2, md: 2, sm: 2, xs: 1 }}
return ( dataSource={list}
<List renderItem={item => (
rowKey="id" <List.Item key={item.id}>
className={stylesApplications.filterCardList} <Card
grid={{ gutter: 24, xxl: 3, xl: 2, lg: 2, md: 2, sm: 2, xs: 1 }} hoverable
dataSource={list} bodyStyle={{ paddingBottom: 20 }}
renderItem={item => ( actions={[
<List.Item key={item.id}> <Tooltip title="下载">
<Card <Icon type="download" />
hoverable </Tooltip>,
bodyStyle={{ paddingBottom: 20 }} <Tooltip title="编辑">
actions={[ <Icon type="edit" />
<Tooltip title="下载"> </Tooltip>,
<Icon type="download" /> <Tooltip title="分享">
</Tooltip>, <Icon type="share-alt" />
<Tooltip title="编辑"> </Tooltip>,
<Icon type="edit" /> <Dropdown overlay={itemMenu}>
</Tooltip>, <Icon type="ellipsis" />
<Tooltip title="分享"> </Dropdown>,
<Icon type="share-alt" /> ]}
</Tooltip>, >
<Dropdown overlay={itemMenu}> <Card.Meta avatar={<Avatar size="small" src={item.avatar} />} title={item.title} />
<Icon type="ellipsis" /> <div className={stylesApplications.cardItemContent}>
</Dropdown>, <CardInfo
]} activeUser={formatWan(item.activeUser)}
> newUser={numeral(item.newUser).format('0,0')}
<Card.Meta avatar={<Avatar size="small" src={item.avatar} />} title={item.title} /> />
<div className={stylesApplications.cardItemContent}> </div>
<CardInfo </Card>
activeUser={formatWan(item.activeUser)} </List.Item>
newUser={numeral(item.newUser).format('0,0')} )}
/> />
</div> );
</Card> }
</List.Item> }
)}
/>
);
};

118
src/pages/Account/Center/Articles.js
View File

@ -1,60 +1,68 @@
import React from 'react'; import React, { PureComponent } from 'react';
import { List, Icon, Avatar, Tag } from 'antd'; import { List, Icon, Avatar, Tag } from 'antd';
import moment from 'moment'; 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'; import styles from './Articles.less';
export default props => { @connect(({ list }) => ({
const { list } = props; list,
const IconText = ({ type, text }) => ( }))
<span> export default class Center extends PureComponent {
<Icon type={type} style={{ marginRight: 8 }} /> render() {
{text} const {
</span> list: { list },
); } = this.props;
const ListContent = ({ data: { content, updatedAt, avatar, owner, href } }) => ( const IconText = ({ type, text }) => (
<div className={stylesArticles.listContent}> <span>
<div className={stylesArticles.description}>{content}</div> <Icon type={type} style={{ marginRight: 8 }} />
<div className={stylesArticles.extra}> {text}
<Avatar src={avatar} size="small" /> </span>
<a href={href}>{owner}</a> 发布在 <a href={href}>{href}</a> );
<em>{moment(updatedAt).format('YYYY-MM-DD HH:mm')}</em> 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>
</div> );
); return (
return ( <List
<List size="large"
size="large" className={styles.articleList}
className={styles.articleList} rowKey="id"
rowKey="id" itemLayout="vertical"
itemLayout="vertical" dataSource={list}
dataSource={list} renderItem={item => (
renderItem={item => ( <List.Item
<List.Item key={item.id}
key={item.id} actions={[
actions={[ <IconText type="star-o" text={item.star} />,
<IconText type="star-o" text={item.star} />, <IconText type="like-o" text={item.like} />,
<IconText type="like-o" text={item.like} />, <IconText type="message" text={item.message} />,
<IconText type="message" text={item.message} />, ]}
]} >
> <List.Item.Meta
<List.Item.Meta title={
title={ <a className={stylesArticles.listItemMetaTitle} href={item.href}>
<a className={stylesArticles.listItemMetaTitle} href={item.href}> {item.title}
{item.title} </a>
</a> }
} description={
description={ <span>
<span> <Tag>Ant Design</Tag>
<Tag>Ant Design</Tag> <Tag>设计语言</Tag>
<Tag>设计语言</Tag> <Tag>蚂蚁金服</Tag>
<Tag>蚂蚁金服</Tag> </span>
</span> }
} />
/> <ListContent data={item} />
<ListContent data={item} /> </List.Item>
</List.Item> )}
)} />
/> );
); }
}; }

23
src/pages/Account/Center/Center.js
View File

@ -1,13 +1,11 @@
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { connect } from 'dva'; import { connect } from 'dva';
import { Link, routerRedux, Route, Switch, Redirect } from 'dva/router'; import { Link, routerRedux } from 'dva/router';
import { Card, Row, Col, Icon, Avatar, Tag, Divider, Spin, Input } from 'antd'; import { Card, Row, Col, Icon, Avatar, Tag, Divider, Spin, Input } from 'antd';
import { getRoutes } from '../../../utils/utils';
import GridContent from '../../layouts/GridContent'; import GridContent from '../../layouts/GridContent';
import styles from './Center.less'; import styles from './Center.less';
@connect(({ list, loading, user, project }) => ({ @connect(({ loading, user, project }) => ({
list,
listLoading: loading.effects['list/fetch'], listLoading: loading.effects['list/fetch'],
currentUser: user.currentUser, currentUser: user.currentUser,
currentUserLoading: loading.effects['user/fetchCurrent'], currentUserLoading: loading.effects['user/fetchCurrent'],
@ -83,17 +81,15 @@ export default class Center extends PureComponent {
render() { render() {
const { newTags, inputVisible, inputValue } = this.state; const { newTags, inputVisible, inputValue } = this.state;
const { const {
list: { list },
listLoading, listLoading,
currentUser, currentUser,
currentUserLoading, currentUserLoading,
project: { notice }, project: { notice },
projectLoading, projectLoading,
match, match,
routerData,
location, location,
children,
} = this.props; } = this.props;
const routes = getRoutes(match.path, routerData);
const operationTabList = [ const operationTabList = [
{ {
@ -207,18 +203,7 @@ export default class Center extends PureComponent {
onTabChange={this.onTabChange} onTabChange={this.onTabChange}
loading={listLoading} loading={listLoading}
> >
<Switch> {children}
{routes.map(item => (
<Route
key={item.key}
path={item.path}
render={props => <item.component {...props} list={list} />}
exact={item.exact}
/>
))}
<Redirect exact from="/account/center" to="/account/center/articles" />
<Redirect to="/exception/404" />
</Switch>
</Card> </Card>
</Col> </Col>
</Row> </Row>

82
src/pages/Account/Center/Projects.js
View File

@ -1,42 +1,50 @@
import React from 'react'; import React, { PureComponent } from 'react';
import { List, Card } from 'antd'; import { List, Card } from 'antd';
import moment from 'moment'; import moment from 'moment';
import { connect } from 'dva';
import AvatarList from '../../../components/AvatarList'; import AvatarList from '../../../components/AvatarList';
import stylesProjects from '../../List/Search/Projects.less'; import stylesProjects from '../../List/Projects.less';
export default props => { @connect(({ list }) => ({
const { list } = props; list,
return ( }))
<List export default class Center extends PureComponent {
className={stylesProjects.coverCardList} render() {
rowKey="id" const {
grid={{ gutter: 24, xxl: 3, xl: 2, lg: 2, md: 2, sm: 2, xs: 1 }} list: { list },
dataSource={list} } = this.props;
renderItem={item => ( return (
<List.Item> <List
<Card className={stylesProjects.coverCardList}
className={stylesProjects.card} rowKey="id"
hoverable grid={{ gutter: 24, xxl: 3, xl: 2, lg: 2, md: 2, sm: 2, xs: 1 }}
cover={<img alt={item.title} src={item.cover} />} dataSource={list}
> renderItem={item => (
<Card.Meta title={<a href="#">{item.title}</a>} description={item.subDescription} /> <List.Item>
<div className={stylesProjects.cardItemContent}> <Card
<span>{moment(item.updatedAt).fromNow()}</span> className={stylesProjects.card}
<div className={stylesProjects.avatarList}> hoverable
<AvatarList size="mini"> cover={<img alt={item.title} src={item.cover} />}
{item.members.map(member => ( >
<AvatarList.Item <Card.Meta title={<a href="#">{item.title}</a>} description={item.subDescription} />
key={`${item.id}-avatar-${member.id}`} <div className={stylesProjects.cardItemContent}>
src={member.avatar} <span>{moment(item.updatedAt).fromNow()}</span>
tips={member.name} <div className={stylesProjects.avatarList}>
/> <AvatarList size="mini">
))} {item.members.map(member => (
</AvatarList> <AvatarList.Item
key={`${item.id}-avatar-${member.id}`}
src={member.avatar}
tips={member.name}
/>
))}
</AvatarList>
</div>
</div> </div>
</div> </Card>
</Card> </List.Item>
</List.Item> )}
)} />
/> );
); }
}; }

18
src/pages/Account/Settings/Info.js
View File

@ -1,9 +1,8 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { connect } from 'dva'; import { connect } from 'dva';
import { Route, routerRedux, Switch, Redirect } from 'dva/router'; import { routerRedux } from 'dva/router';
import { Menu } from 'antd'; import { Menu } from 'antd';
import styles from './Info.less'; import styles from './Info.less';
import { getRoutes } from '../../../utils/utils';
import GridContent from '../../layouts/GridContent'; import GridContent from '../../layouts/GridContent';
const { Item } = Menu; const { Item } = Menu;
@ -86,7 +85,7 @@ export default class Info extends Component {
}; };
render() { render() {
const { match, routerData, currentUser } = this.props; const { children, currentUser } = this.props;
if (!currentUser.userid) { if (!currentUser.userid) {
return ''; return '';
} }
@ -106,18 +105,7 @@ export default class Info extends Component {
</div> </div>
<div className={styles.right}> <div className={styles.right}>
<div className={styles.title}>{this.getRightTitle()}</div> <div className={styles.title}>{this.getRightTitle()}</div>
<Switch> {children}
{getRoutes(match.path, routerData).map(item => (
<Route
key={item.key}
path={item.path}
render={props => <item.component {...props} currentUser={currentUser} />}
exact={item.exact}
/>
))}
<Redirect exact from="/account/settings" to="/account/settings/base" />
<Redirect to="/exception/404" />
</Switch>
</div> </div>
</div> </div>
</GridContent> </GridContent>

Write Preview
Loading…
Cancel
Save