remove models/index.js

config/config.js

@@ -5,10 +5,21 @@
 const path = require('path');
 
 export default {
-  plugins: ['umi-plugin-dva'],
+  // add for transfer to umi
+  plugins: [
+    'umi-plugin-dva',
+    [
+      'umi-plugin-routes',
+      {
+        exclude: [/\.test\.js/],
+      },
+    ],
+  ],
+  disableServiceWorker: true,
 
-  // TODO remove
-  // entry: 'src/index.js',
+  // copy from old webpackrc.js
+
+  // entry: 'src/index.js', // TODO remove
   extraBabelPlugins: [['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }]],
   env: {
     development: {
@@ -21,7 +32,7 @@ export default {
     rollbar: 'rollbar',
   },
   alias: {
-    components: path.resolve(__dirname, 'src/components/'),
+    components: path.resolve(__dirname, '../src/components/'),
   },
   ignoreMomentLocale: true,
   theme: './src/theme.js',

package.json

@@ -45,6 +45,7 @@
     "rollup-plugin-json": "^3.0.0",
     "setprototypeof": "^1.1.0",
     "umi": "^1.3.13",
+    "umi-plugin-routes": "^0.1.5",
     "url-polyfill": "^1.0.10"
   },
   "devDependencies": {

src/common/router.js

@@ -75,142 +75,140 @@ export const getRouterData = app => {
       ),
     },
     '/dashboard/analysis': {
-      component: dynamicWrapper(app, ['chart'], () => import('../routes/Dashboard/Analysis')),
+      component: dynamicWrapper(app, ['chart'], () => import('../pages/Dashboard/Analysis')),
     },
     '/dashboard/monitor': {
-      component: dynamicWrapper(app, ['monitor'], () => import('../routes/Dashboard/Monitor')),
+      component: dynamicWrapper(app, ['monitor'], () => import('../pages/Dashboard/Monitor')),
     },
     '/dashboard/workplace': {
       component: dynamicWrapper(app, ['user', 'project', 'activities', 'chart'], () =>
-        import('../routes/Dashboard/Workplace')
+        import('../pages/Dashboard/Workplace')
       ),
       // hideInBreadcrumb: true,
       // name: '工作台',
       // authority: 'admin',
     },
     '/form/basic-form': {
-      component: dynamicWrapper(app, ['form'], () => import('../routes/Forms/BasicForm')),
+      component: dynamicWrapper(app, ['form'], () => import('../pages/Forms/BasicForm')),
     },
     '/form/step-form': {
-      component: dynamicWrapper(app, ['form'], () => import('../routes/Forms/StepForm')),
+      component: dynamicWrapper(app, ['form'], () => import('../pages/Forms/StepForm')),
     },
     '/form/step-form/info': {
       name: '分步表单（填写转账信息）',
-      component: dynamicWrapper(app, ['form'], () => import('../routes/Forms/StepForm/Step1')),
+      component: dynamicWrapper(app, ['form'], () => import('../pages/Forms/StepForm/Step1')),
     },
     '/form/step-form/confirm': {
       name: '分步表单（确认转账信息）',
-      component: dynamicWrapper(app, ['form'], () => import('../routes/Forms/StepForm/Step2')),
+      component: dynamicWrapper(app, ['form'], () => import('../pages/Forms/StepForm/Step2')),
     },
     '/form/step-form/result': {
       name: '分步表单（完成）',
-      component: dynamicWrapper(app, ['form'], () => import('../routes/Forms/StepForm/Step3')),
+      component: dynamicWrapper(app, ['form'], () => import('../pages/Forms/StepForm/Step3')),
     },
     '/form/advanced-form': {
-      component: dynamicWrapper(app, ['form'], () => import('../routes/Forms/AdvancedForm')),
+      component: dynamicWrapper(app, ['form'], () => import('../pages/Forms/AdvancedForm')),
     },
     '/list/table-list': {
-      component: dynamicWrapper(app, ['rule'], () => import('../routes/List/TableList')),
+      component: dynamicWrapper(app, ['rule'], () => import('../pages/List/TableList')),
     },
     '/list/basic-list': {
-      component: dynamicWrapper(app, ['list'], () => import('../routes/List/BasicList')),
+      component: dynamicWrapper(app, ['list'], () => import('../pages/List/BasicList')),
     },
     '/list/card-list': {
-      component: dynamicWrapper(app, ['list'], () => import('../routes/List/CardList')),
+      component: dynamicWrapper(app, ['list'], () => import('../pages/List/CardList')),
     },
     '/list/search': {
-      component: dynamicWrapper(app, ['list'], () => import('../routes/List/List')),
+      component: dynamicWrapper(app, ['list'], () => import('../pages/List/List')),
     },
     '/list/search/projects': {
-      component: dynamicWrapper(app, ['list'], () => import('../routes/List/Projects')),
+      component: dynamicWrapper(app, ['list'], () => import('../pages/List/Projects')),
     },
     '/list/search/applications': {
-      component: dynamicWrapper(app, ['list'], () => import('../routes/List/Applications')),
+      component: dynamicWrapper(app, ['list'], () => import('../pages/List/Applications')),
     },
     '/list/search/articles': {
-      component: dynamicWrapper(app, ['list'], () => import('../routes/List/Articles')),
+      component: dynamicWrapper(app, ['list'], () => import('../pages/List/Articles')),
     },
     '/profile/basic': {
-      component: dynamicWrapper(app, ['profile'], () => import('../routes/Profile/BasicProfile')),
+      component: dynamicWrapper(app, ['profile'], () => import('../pages/Profile/BasicProfile')),
     },
     '/profile/advanced': {
-      component: dynamicWrapper(app, ['profile'], () =>
-        import('../routes/Profile/AdvancedProfile')
-      ),
+      component: dynamicWrapper(app, ['profile'], () => import('../pages/Profile/AdvancedProfile')),
     },
     '/result/success': {
-      component: dynamicWrapper(app, [], () => import('../routes/Result/Success')),
+      component: dynamicWrapper(app, [], () => import('../pages/Result/Success')),
     },
     '/result/fail': {
-      component: dynamicWrapper(app, [], () => import('../routes/Result/Error')),
+      component: dynamicWrapper(app, [], () => import('../pages/Result/Error')),
     },
     '/exception/403': {
-      component: dynamicWrapper(app, [], () => import('../routes/Exception/403')),
+      component: dynamicWrapper(app, [], () => import('../pages/Exception/403')),
     },
     '/exception/404': {
-      component: dynamicWrapper(app, [], () => import('../routes/Exception/404')),
+      component: dynamicWrapper(app, [], () => import('../pages/Exception/404')),
     },
     '/exception/500': {
-      component: dynamicWrapper(app, [], () => import('../routes/Exception/500')),
+      component: dynamicWrapper(app, [], () => import('../pages/Exception/500')),
     },
     '/exception/trigger': {
       component: dynamicWrapper(app, ['error'], () =>
-        import('../routes/Exception/triggerException')
+        import('../pages/Exception/triggerException')
       ),
     },
     '/user': {
       component: dynamicWrapper(app, [], () => import('../layouts/UserLayout')),
     },
     '/user/login': {
-      component: dynamicWrapper(app, ['login'], () => import('../routes/User/Login')),
+      component: dynamicWrapper(app, ['login'], () => import('../pages/User/Login')),
     },
     '/user/register': {
-      component: dynamicWrapper(app, ['register'], () => import('../routes/User/Register')),
+      component: dynamicWrapper(app, ['register'], () => import('../pages/User/Register')),
     },
     '/user/register-result': {
-      component: dynamicWrapper(app, [], () => import('../routes/User/RegisterResult')),
+      component: dynamicWrapper(app, [], () => import('../pages/User/RegisterResult')),
     },
     '/account/center': {
       component: dynamicWrapper(app, ['list', 'user', 'project'], () =>
-        import('../routes/Account/Center/Center')
+        import('../pages/Account/Center/Center')
       ),
     },
     '/account/center/articles': {
-      component: dynamicWrapper(app, [], () => import('../routes/Account/Center/Articles')),
+      component: dynamicWrapper(app, [], () => import('../pages/Account/Center/Articles')),
     },
     '/account/center/applications': {
-      component: dynamicWrapper(app, [], () => import('../routes/Account/Center/Applications')),
+      component: dynamicWrapper(app, [], () => import('../pages/Account/Center/Applications')),
     },
     '/account/center/projects': {
-      component: dynamicWrapper(app, [], () => import('../routes/Account/Center/Projects')),
+      component: dynamicWrapper(app, [], () => import('../pages/Account/Center/Projects')),
     },
     '/account/settings': {
       component: dynamicWrapper(app, ['geographic'], () =>
-        import('../routes/Account/Settings/Info')
+        import('../pages/Account/Settings/Info')
       ),
     },
     '/account/settings/base': {
       component: dynamicWrapper(app, ['geographic'], () =>
-        import('../routes/Account/Settings/BaseView')
+        import('../pages/Account/Settings/BaseView')
       ),
     },
     '/account/settings/security': {
       component: dynamicWrapper(app, ['geographic'], () =>
-        import('../routes/Account/Settings/SecurityView')
+        import('../pages/Account/Settings/SecurityView')
       ),
     },
     '/account/settings/binding': {
       component: dynamicWrapper(app, ['geographic'], () =>
-        import('../routes/Account/Settings/BindingView')
+        import('../pages/Account/Settings/BindingView')
       ),
     },
     '/account/settings/notification': {
       component: dynamicWrapper(app, ['geographic'], () =>
-        import('../routes/Account/Settings/NotificationView')
+        import('../pages/Account/Settings/NotificationView')
       ),
     },
     // '/user/:id': {
-    //   component: dynamicWrapper(app, [], () => import('../routes/User/SomeComponent')),
+    //   component: dynamicWrapper(app, [], () => import('../pages/User/SomeComponent')),
     // },
   };
   // Get name from ./menu.js or just set it in the router data.

src/layouts/BasicLayout.js

@@ -7,7 +7,7 @@ import { ContainerQuery } from 'react-container-query';
 import classNames from 'classnames';
 import pathToRegexp from 'path-to-regexp';
 import SiderMenu from '../components/SiderMenu';
-import NotFound from '../routes/Exception/404';
+import NotFound from '../pages/Exception/404';
 import { getRoutes } from '../utils/utils';
 import Authorized from '../utils/Authorized';
 import SettingDarwer from '../components/SettingDarwer';

src/models/index.js

-// 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));

src/pages/Account/Center.js

-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>
-    );
-  }
-}