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 {
{ path: '/exception/403', component: './Exception/403' },
{ path: '/exception/404', component: './Exception/404' },
{ 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"
// }
// ]
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 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>
)}
/>
);
}
}
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 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>
)}
/>
);
}
}
src/pages/Account/Center/Center.js
View file @ 931e27fb
import React, { PureComponent } from 'react';
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 { getRoutes } from '../../../utils/utils';
import GridContent from '../../layouts/GridContent';
import styles from './Center.less';
@connect(({ list, loading, user, project }) => ({
list,
@connect(({ loading, user, project }) => ({
listLoading: loading.effects['list/fetch'],
currentUser: user.currentUser,
currentUserLoading: loading.effects['user/fetchCurrent'],
......@@ -83,17 +81,15 @@ export default class Center extends PureComponent {
render() {
const { newTags, inputVisible, inputValue } = this.state;
const {
list: { list },
listLoading,
currentUser,
currentUserLoading,
project: { notice },
projectLoading,
match,
routerData,
location,
children,
} = this.props;
const routes = getRoutes(match.path, routerData);
const operationTabList = [
{
......@@ -207,18 +203,7 @@ export default class Center extends PureComponent {
onTabChange={this.onTabChange}
loading={listLoading}
>
<Switch>
{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>
{children}
</Card>
</Col>
</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 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>
)}
/>
);
}
}
src/pages/Account/Settings/Info.js
View file @ 931e27fb
import React, { Component } from 'react';
import { connect } from 'dva';
import { Route, routerRedux, Switch, Redirect } from 'dva/router';
import { routerRedux } from 'dva/router';
import { Menu } from 'antd';
import styles from './Info.less';
import { getRoutes } from '../../../utils/utils';
import GridContent from '../../layouts/GridContent';
const { Item } = Menu;
......@@ -86,7 +85,7 @@ export default class Info extends Component {
};
render() {
const { match, routerData, currentUser } = this.props;
const { children, currentUser } = this.props;
if (!currentUser.userid) {
return '';
}
......@@ -106,18 +105,7 @@ export default class Info extends Component {
</div>
<div className={styles.right}>
<div className={styles.title}>{this.getRightTitle()}</div>
<Switch>
{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>
{children}
</div>
</div>
</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