初始化 antd-pro

admin-web/src/components/FooterToolbar/demo/basic.md

@@ -0,0 +1,44 @@
+---
+order: 0
+title:
+  zh-CN: 演示
+  en-US: demo
+iframe: 400
+---
+
+## zh-CN
+
+浮动固定页脚。
+
+## en-US
+
+Fixed to the footer.
+
+````jsx
+import FooterToolbar from 'ant-design-pro/lib/FooterToolbar';
+import { Button } from 'antd';
+
+ReactDOM.render(
+  <div style={{ background: '#f7f7f7', padding: 24 }}>
+    <p>Content Content Content Content</p>
+    <p>Content Content Content Content</p>
+    <p>Content Content Content Content</p>
+    <p>Content Content Content Content</p>
+    <p>Content Content Content Content</p>
+    <p>Content Content Content Content</p>
+    <p>Content Content Content Content</p>
+    <p>Content Content Content Content</p>
+    <p>Content Content Content Content</p>
+    <p>Content Content Content Content</p>
+    <p>Content Content Content Content</p>
+    <p>Content Content Content Content</p>
+    <p>Content Content Content Content</p>
+    <p>Content Content Content Content</p>
+    <p>Content Content Content Content</p>
+    <FooterToolbar extra="extra information">
+      <Button>Cancel</Button>
+      <Button type="primary">Submit</Button>
+    </FooterToolbar>
+  </div>
+, mountNode);
+````

admin-web/src/components/FooterToolbar/index.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface IFooterToolbarProps {
+  extra: React.ReactNode;
+  style?: React.CSSProperties;
+}
+
+export default class FooterToolbar extends React.Component<IFooterToolbarProps, any> {}

admin-web/src/components/FooterToolbar/index.en-US.md

@@ -0,0 +1,18 @@
+---
+title: FooterToolbar
+cols: 1
+order: 6
+---
+
+A toolbar fixed at the bottom.
+
+## Usage
+
+It is fixed at the bottom of the content area and does not move along with the scroll bar, which is usually used for data collection and submission for long pages.
+
+## API
+
+Property | Description | Type | Default
+---------|-------------|------|--------
+children | toolbar content, align to the right | ReactNode | -
+extra | extra information, align to the left | ReactNode | -

admin-web/src/components/FooterToolbar/index.js

@@ -0,0 +1,47 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import styles from './index.less';
+
+export default class FooterToolbar extends Component {
+  static contextTypes = {
+    isMobile: PropTypes.bool,
+  };
+
+  state = {
+    width: undefined,
+  };
+
+  componentDidMount() {
+    window.addEventListener('resize', this.resizeFooterToolbar);
+    this.resizeFooterToolbar();
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.resizeFooterToolbar);
+  }
+
+  resizeFooterToolbar = () => {
+    const sider = document.querySelector('.ant-layout-sider');
+    if (sider == null) {
+      return;
+    }
+    const { isMobile } = this.context;
+    const width = isMobile ? null : `calc(100% - ${sider.style.width})`;
+    const { width: stateWidth } = this.state;
+    if (stateWidth !== width) {
+      this.setState({ width });
+    }
+  };
+
+  render() {
+    const { children, className, extra, ...restProps } = this.props;
+    const { width } = this.state;
+    return (
+      <div className={classNames(className, styles.toolbar)} style={{ width }} {...restProps}>
+        <div className={styles.left}>{extra}</div>
+        <div className={styles.right}>{children}</div>
+      </div>
+    );
+  }
+}

admin-web/src/components/FooterToolbar/index.less

@@ -0,0 +1,33 @@
+@import '~antd/lib/style/themes/default.less';
+
+.toolbar {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  z-index: 9;
+  width: 100%;
+  height: 56px;
+  padding: 0 24px;
+  line-height: 56px;
+  background: #fff;
+  border-top: 1px solid @border-color-split;
+  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.03);
+
+  &::after {
+    display: block;
+    clear: both;
+    content: '';
+  }
+
+  .left {
+    float: left;
+  }
+
+  .right {
+    float: right;
+  }
+
+  button + button {
+    margin-left: 8px;
+  }
+}

admin-web/src/components/FooterToolbar/index.zh-CN.md

@@ -0,0 +1,19 @@
+---
+title: FooterToolbar
+subtitle: 底部工具栏
+cols: 1
+order: 6
+---
+
+固定在底部的工具栏。
+
+## 何时使用
+
+固定在内容区域的底部，不随滚动条移动，常用于长页面的数据搜集和提交工作。
+
+## API
+
+参数 | 说明 | 类型 | 默认值
+----|------|-----|------
+children | 工具栏内容，向右对齐 | ReactNode | -
+extra | 额外信息，向左对齐 | ReactNode | -