init pro block serach list layout

+/yarn.lock
+/package-lock.json
+/dist
+/node_modules
+
+.umi
+.umi-production

+export default {
+  plugins: [
+    ['umi-plugin-block-dev', {}],
+    ['umi-plugin-react', {
+      dva: true,
+      locale: true,
+      antd: true,
+    }]
+  ],
+}

+import React, { PureComponent } from 'react';
+import { connect } from 'dva';
+import styles from './GridContent.less';
+
+class GridContent extends PureComponent {
+  render() {
+    const { contentWidth, children } = this.props;
+    let className = `${styles.main}`;
+    if (contentWidth === 'Fixed') {
+      className = `${styles.main} ${styles.wide}`;
+    }
+    return <div className={className}>{children}</div>;
+  }
+}
+
+export default connect(({ setting }) => ({
+  contentWidth: setting.contentWidth,
+}))(GridContent);

+.main {
+  width: 100%;
+  height: 100%;
+  min-height: 100%;
+  transition: 0.3s;
+  &.wide {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+}

+import React from 'react';
+import { FormattedMessage } from 'umi/locale';
+import Link from 'umi/link';
+import PageHeader from 'ant-design-pro/lib/PageHeader';
+import { connect } from 'dva';
+import GridContent from './GridContent';
+import styles from './index.less';
+import MenuContext from '@/layouts/MenuContext';
+
+const PageHeaderWrapper = ({ children, contentWidth, wrapperClassName, top, ...restProps }) => (
+  <div style={{ margin: '-24px -24px 0' }} className={wrapperClassName}>
+    {top}
+    <MenuContext.Consumer>
+      {value => (
+        <PageHeader
+          wide={contentWidth === 'Fixed'}
+          home={<FormattedMessage id="menu.home" defaultMessage="Home" />}
+          {...value}
+          key="pageheader"
+          {...restProps}
+          linkElement={Link}
+          itemRender={item => {
+            if (item.locale) {
+              return <FormattedMessage id={item.locale} defaultMessage={item.title} />;
+            }
+            return item.title;
+          }}
+        />
+      )}
+    </MenuContext.Consumer>
+    {children ? (
+      <div className={styles.content}>
+        <GridContent>{children}</GridContent>
+      </div>
+    ) : null}
+  </div>
+);
+
+export default connect(({ setting }) => ({
+  contentWidth: setting.contentWidth,
+}))(PageHeaderWrapper);

+@import '~antd/lib/style/themes/default.less';
+
+.content {
+  margin: 24px 24px 0;
+}
+
+@media screen and (max-width: @screen-sm) {
+  .content {
+    margin: 24px 0 0;
+  }
+}

+import { createContext } from 'react';
+
+export default createContext();

+# @umi-material/searchlist
+
+SearchList
+
+## Usage
+
+```sh
+umi block https://github.com/umijs/umi-blocks/tree/master/searchlist
+```
+
+## LICENSE
+
+MIT

+{
+  "name": "@umi-block/searchlist",
+  "version": "0.0.1",
+  "description": "SearchList",
+  "main": "src/index.js",
+  "scripts": {
+    "dev": "umi dev"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/umijs/umi-blocks/searchlist"
+  },
+  "dependencies": {
+    "react": "^16.6.3",
+    "dva": "^2.4.0",
+    "antd": "^3.10.9",
+    "ant-design-pro": "^2.1.1"
+  },
+  "devDependencies": {
+    "umi": "^2.3.0-beta.1",
+    "umi-plugin-react": "^1.3.0-beta.1",
+    "umi-plugin-block-dev": "^1.0.0"
+  },
+  "license": "ISC"
+}

+module.exports = {
+  navTheme: 'dark', // theme for nav menu
+  primaryColor: '#1890FF', // primary color of ant design
+  layout: 'sidemenu', // nav menu position: sidemenu or topmenu
+  contentWidth: 'Fluid', // layout of content: Fluid or Fixed, only works when layout is topmenu
+  fixedHeader: false, // sticky header
+  autoHideHeader: false, // auto hide header
+  fixSiderbar: false, // sticky siderbar
+};

+import React, { Component } from 'react';
+import router from 'umi/router';
+import { connect } from 'dva';
+import { Input } from 'antd';
+import PageHeaderWrapper from '@/components/PageHeaderWrapper';
+
+@connect()
+class SearchList extends Component {
+  handleTabChange = key => {
+    const { match } = this.props;
+    switch (key) {
+      case 'articles':
+        router.push(`${match.url}/articles`);
+        break;
+      case 'applications':
+        router.push(`${match.url}/applications`);
+        break;
+      case 'projects':
+        router.push(`${match.url}/projects`);
+        break;
+      default:
+        break;
+    }
+  };
+
+  handleFormSubmit = value => {
+    // eslint-disable-next-line
+    console.log(value);
+  };
+
+  render() {
+    const tabList = [
+      {
+        key: 'articles',
+        tab: '文章',
+      },
+      {
+        key: 'projects',
+        tab: '项目',
+      },
+      {
+        key: 'applications',
+        tab: '应用',
+      },
+    ];
+
+    const mainSearch = (
+      <div style={{ textAlign: 'center' }}>
+        <Input.Search
+          placeholder="请输入"
+          enterButton="搜索"
+          size="large"
+          onSearch={this.handleFormSubmit}
+          style={{ width: 522 }}
+        />
+      </div>
+    );
+
+    const { match, children, location } = this.props;
+
+    return (
+      <PageHeaderWrapper
+        title="搜索列表"
+        content={mainSearch}
+        tabList={tabList}
+        tabActiveKey={location.pathname.replace(`${match.path}/`, '')}
+        onTabChange={this.handleTabChange}
+      >
+        {children}
+        {/* <Switch>
+          {routes.map(item => (
+            <Route key={item.key} path={item.path} component={item.component} exact={item.exact} />
+          ))}
+        </Switch> */}
+      </PageHeaderWrapper>
+    );
+  }
+}
+
+export default SearchList;

+import { message } from 'antd';
+import defaultSettings from '../defaultSettings';
+
+let lessNodesAppended;
+const updateTheme = primaryColor => {
+  // Don't compile less in production!
+  if (APP_TYPE !== 'site') {
+    return;
+  }
+  // Determine if the component is remounted
+  if (!primaryColor) {
+    return;
+  }
+  const hideMessage = message.loading('正在编译主题！', 0);
+  function buildIt() {
+    if (!window.less) {
+      return;
+    }
+    setTimeout(() => {
+      window.less
+        .modifyVars({
+          '@primary-color': primaryColor,
+        })
+        .then(() => {
+          hideMessage();
+        })
+        .catch(() => {
+          message.error('Failed to update theme');
+          hideMessage();
+        });
+    }, 200);
+  }
+  if (!lessNodesAppended) {
+    // insert less.js and color.less
+    const lessStyleNode = document.createElement('link');
+    const lessConfigNode = document.createElement('script');
+    const lessScriptNode = document.createElement('script');
+    lessStyleNode.setAttribute('rel', 'stylesheet/less');
+    lessStyleNode.setAttribute('href', '/color.less');
+    lessConfigNode.innerHTML = `
+      window.less = {
+        async: true,
+        env: 'production',
+        javascriptEnabled: true
+      };
+    `;
+    lessScriptNode.src = 'https://gw.alipayobjects.com/os/lib/less.js/3.8.1/less.min.js';
+    lessScriptNode.async = true;
+    lessScriptNode.onload = () => {
+      buildIt();
+      lessScriptNode.onload = null;
+    };
+    document.body.appendChild(lessStyleNode);
+    document.body.appendChild(lessConfigNode);
+    document.body.appendChild(lessScriptNode);
+    lessNodesAppended = true;
+  } else {
+    buildIt();
+  }
+};
+
+const updateColorWeak = colorWeak => {
+  document.body.className = colorWeak ? 'colorWeak' : '';
+};
+
+export default {
+  namespace: 'setting',
+  state: defaultSettings,
+  reducers: {
+    getSetting(state) {
+      const setting = {};
+      const urlParams = new URL(window.location.href);
+      Object.keys(state).forEach(key => {
+        if (urlParams.searchParams.has(key)) {
+          const value = urlParams.searchParams.get(key);
+          setting[key] = value === '1' ? true : value;
+        }
+      });
+      const { primaryColor, colorWeak } = setting;
+      if (state.primaryColor !== primaryColor) {
+        updateTheme(primaryColor);
+      }
+      updateColorWeak(colorWeak);
+      return {
+        ...state,
+        ...setting,
+      };
+    },
+    changeSetting(state, { payload }) {
+      const urlParams = new URL(window.location.href);
+      Object.keys(defaultSettings).forEach(key => {
+        if (urlParams.searchParams.has(key)) {
+          urlParams.searchParams.delete(key);
+        }
+      });
+      Object.keys(payload).forEach(key => {
+        if (key === 'collapse') {
+          return;
+        }
+        let value = payload[key];
+        if (value === true) {
+          value = 1;
+        }
+        if (defaultSettings[key] !== value) {
+          urlParams.searchParams.set(key, value);
+        }
+      });
+      const { primaryColor, colorWeak, contentWidth } = payload;
+      if (state.primaryColor !== primaryColor) {
+        updateTheme(primaryColor);
+      }
+      if (state.contentWidth !== contentWidth && window.dispatchEvent) {
+        window.dispatchEvent(new Event('resize'));
+      }
+      updateColorWeak(colorWeak);
+      window.history.replaceState(null, 'setting', urlParams.href);
+      return {
+        ...state,
+        ...payload,
+      };
+    },
+  },
+};