初始化 antd-pro

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

@@ -0,0 +1,37 @@
+---
+order: 0
+title: 演示
+iframe: 400
+---
+
+基本页脚。
+
+````jsx
+import GlobalFooter from 'ant-design-pro/lib/GlobalFooter';
+import { Icon } from 'antd';
+
+const links = [{
+  key: '帮助',
+  title: '帮助',
+  href: '',
+}, {
+  key: 'github',
+  title: <Icon type="github" />,
+  href: 'https://github.com/ant-design/ant-design-pro',
+  blankTarget: true,
+}, {
+  key: '条款',
+  title: '条款',
+  href: '',
+  blankTarget: true,
+}];
+
+const copyright = <div>Copyright <Icon type="copyright" /> 2017 蚂蚁金服体验技术部出品</div>;
+
+ReactDOM.render(
+  <div style={{ background: '#f5f5f5', overflow: 'hidden' }}>
+    <div style={{ height: 280 }} />
+    <GlobalFooter links={links} copyright={copyright} />
+  </div>
+, mountNode);
+````

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface IGlobalFooterProps {
+  links?: Array<{
+    key?: string;
+    title: React.ReactNode;
+    href: string;
+    blankTarget?: boolean;
+  }>;
+  copyright?: React.ReactNode;
+  style?: React.CSSProperties;
+}
+
+export default class GlobalFooter extends React.Component<IGlobalFooterProps, any> {}

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import classNames from 'classnames';
+import styles from './index.less';
+
+const GlobalFooter = ({ className, links, copyright }) => {
+  const clsString = classNames(styles.globalFooter, className);
+  return (
+    <footer className={clsString}>
+      {links && (
+        <div className={styles.links}>
+          {links.map(link => (
+            <a
+              key={link.key}
+              title={link.key}
+              target={link.blankTarget ? '_blank' : '_self'}
+              href={link.href}
+            >
+              {link.title}
+            </a>
+          ))}
+        </div>
+      )}
+      {copyright && <div className={styles.copyright}>{copyright}</div>}
+    </footer>
+  );
+};
+
+export default GlobalFooter;

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

@@ -0,0 +1,29 @@
+@import '~antd/lib/style/themes/default.less';
+
+.globalFooter {
+  margin: 48px 0 24px 0;
+  padding: 0 16px;
+  text-align: center;
+
+  .links {
+    margin-bottom: 8px;
+
+    a {
+      color: @text-color-secondary;
+      transition: all 0.3s;
+
+      &:not(:last-child) {
+        margin-right: 40px;
+      }
+
+      &:hover {
+        color: @text-color;
+      }
+    }
+  }
+
+  .copyright {
+    color: @text-color-secondary;
+    font-size: @font-size-base;
+  }
+}

admin-web/src/components/GlobalFooter/index.md

@@ -0,0 +1,15 @@
+---
+title: GlobalFooter
+subtitle: 全局页脚
+cols: 1
+order: 7
+---
+
+页脚属于全局导航的一部分，作为对顶部导航的补充，通过传递数据控制展示内容。
+
+## API
+
+参数 | 说明 | 类型 | 默认值
+----|------|-----|------
+links | 链接数据 | array<{ title: ReactNode, href: string, blankTarget?: boolean }> | -
+copyright | 版权信息 | ReactNode | -