add acount center

config/config.js

@@ -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

@@ -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>
+        )}
+      />
+    );
+  }
+}

src/pages/Account/Center/Articles.js

@@ -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>
+        )}
+      />
+    );
+  }
+}

src/pages/Account/Center/Center.js

@@ -1,13 +1,11 @@
 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

@@ -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>
+        )}
+      />
+    );
+  }
+}

src/pages/Account/Settings/Info.js

@@ -1,9 +1,8 @@
 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>