pro 1.x 里使用

蚂蚁金服用户同学可直接查看 Bigfish 的新增页面

Ant Design pro 是 Ant Design 推出的一个开箱即用的中台前端/设计解决方案。

基本配置请查看 开始使用;

文件路径

Ant Design pro 使用的为 dva 脚手架，文件目录同样为 src/routes, 首先我们需要将下载的 Home 文件包直接复制到 routes 文件夹下。

修改路由

我们提供了两种方案： 1. 直接新增页面。 2. 更改 pro 的主路由。详细请查看下方；

直接新增页面

复制完成后，首页我们在顶部引入 Home, 命名为 IndexPage。

import IndexPage from './routes/Home';

然后在 pro 的路由上添加 Route, 由于 pro 占了 / 主路由，我们将 path 设为 /home 即可。

function RouterConfig({ history, app }) {
  const routerData = getRouterData(app);
  const UserLayout = routerData['/user'].component;
  const BasicLayout = routerData['/'].component;
  return (
    <LocaleProvider locale={zhCN}>
      <ConnectedRouter history={history}>
        <Switch>
+         <Route path="/home" component={IndexPage} />  {/* 增加在此处 */} 
          <Route path="/user" component={UserLayout} />
          <AuthorizedRoute
            path="/"
            render={props => <BasicLayout {...props} />}
            authority={['admin', 'user']}
            redirectPath="/user/login"
          />
        </Switch>
      </ConnectedRouter>
    </LocaleProvider>
  );
}

更换 pro 的主路由

由于 pro 里没有自定义变量来管理路由，所以需手动修改，首先更改 routerConfig 的路径， 参照以下步骤；

router.js

文件地址： src/common/router.js;

首先需要修改 router.js 里的除 user 相关的地址以外的路径，增加个前辍，如 /dashboards;

  const routerConfig = {
+   '/dashboards': {
-   '/': {
      component: dynamicWrapper(app, ['user', 'login'], () => import('../layouts/BasicLayout')),
    },
+   '/dashboards/dashboard/analysis': {
-   '/dashboard/analysis': {
      component: dynamicWrapper(app, ['chart'], () => import('../routes/Dashboard/Analysis')),
    },
    ...

menu.js

文件地址： src/common/menu.js;

将里面的 path 除 user 相关的地址以外同样前面加上 dashboards/;

const menuData = [
  {
    name: 'dashboard',
    icon: 'dashboard',
+   path: 'dashboards/dashboard',
-   path: 'dashboard',
    children: [
      {
  ...

BasicLaout.js

文件地址： src/layout/BasicLaout.js;

将 getBashRedirect 的路径改为 '/dashboards', 再将 redirct 的 from 改为 /dashboards

  ...
+ item => check(routerData[item].authority, item) && item !== '/dashboards'
- item => check(routerData[item].authority, item) && item !== '/'
  ...
+ <Redirect exact from="/dashboards" to={bashRedirect} />
- <Redirect exact from="/" to={bashRedirect} />
  ...

login.js

文件地址： src/models/login.js;

只需将登录或注册完成后改成 /dashboards 即可；

  ...
    *login({ payload }, { call, put }) {
      const response = yield call(fakeAccountLogin, payload);
      yield put({
        type: 'changeLoginStatus',
        payload: response,
      });
      // Login successfully
      if (response.status === 'ok') {
        reloadAuthorized();
+       yield put(routerRedux.push('/dashboards'));
-       yield put(routerRedux.push('/'));
      }
    },
  ...

在 layouts 下增加自已网站的 layout 文件

文件地址： src/layout/PageLayout.js 新增;

命名为: PageLayout.jsx; 然后在 router.js 上加上 <Route path="/" component={PageLayout} /> layout 上就可以增加网站的内容了。

PageLayout.jsx

import React from 'react';
import Home from '../routes/Home';
export default class LandingLayout extends React.Component {
  render(){
    return (<Home />);
  }
} 

router.js

文件地址： src/router.js;

将 AuthorizedRoute 的 path 改为 /dashboards, 新增 / 的 Route 到自已的 layout 文件, 顺便再新增个 404 路由；

  ...
+ import NotFound from './routes/Exception/404';
+ import PageLayout from './layouts/PageLayout';
  ...
+ const BasicLayout = routerData['/dashboards'].component;
- const BasicLayout = routerData['/'].component;  
  ...
+     <Route exact path="/" component={PageLayout} />
      <Route path="/user" component={UserLayout} />
      <AuthorizedRoute
+       path="/dashboards"
-       path="/"
        render={props => <BasicLayout {...props} />}
        authority={['admin', 'user']}
        redirectPath="/user/login"
      />
+     <Route render={NotFound} /> {/*增加 404*/}
  ...

CSS Modules

具体参考 开如使用里的 global;