Skip to content

GitLab

A
ant-design-pro
Commit 931e27fb authored by 愚道's avatar 愚道
Browse files
Options

add acount center

parent dc5b0f67
Hide whitespace changes
Inline Side-by-side
Showing with 222 additions and 242 deletions
config/config.js
View file @ 931e27fb
...@@ -76,6 +76,32 @@ export default { ...@@ -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 { ...@@ -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"
// }
// ]
src/pages/Account/Center/Applications.js
View file @ 931e27fb
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> }
)}
/>
);
};
src/pages/Account/Center/Articles.js
View file @ 931e27fb
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> )}
)} />
/> );
); }
}; }
src/pages/Account/Center/Center.js
View file @ 931e27fb
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 { ...@@ -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 { ...@@ -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>
......
src/pages/Account/Center/Projects.js
View file @ 931e27fb
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> )}
)} />
/> );
); }
}; }
src/pages/Account/Settings/Info.js
View file @ 931e27fb
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 { ...@@ -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 { ...@@ -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>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment