初始化 antd-pro

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

@@ -0,0 +1,52 @@
+import React, { PureComponent } from 'react';
+import Link from 'umi/link';
+import RightContent from '../GlobalHeader/RightContent';
+import BaseMenu from '../SiderMenu/BaseMenu';
+import { getFlatMenuKeys } from '../SiderMenu/SiderMenuUtils';
+import styles from './index.less';
+import { title } from '../../defaultSettings';
+
+export default class TopNavHeader extends PureComponent {
+  state = {
+    maxWidth: undefined,
+  };
+
+  static getDerivedStateFromProps(props) {
+    return {
+      maxWidth: (props.contentWidth === 'Fixed' ? 1200 : window.innerWidth) - 280 - 165 - 40,
+    };
+  }
+
+  render() {
+    const { theme, contentWidth, menuData, logo } = this.props;
+    const { maxWidth } = this.state;
+    const flatMenuKeys = getFlatMenuKeys(menuData);
+    return (
+      <div className={`${styles.head} ${theme === 'light' ? styles.light : ''}`}>
+        <div
+          ref={ref => {
+            this.maim = ref;
+          }}
+          className={`${styles.main} ${contentWidth === 'Fixed' ? styles.wide : ''}`}
+        >
+          <div className={styles.left}>
+            <div className={styles.logo} key="logo" id="logo">
+              <Link to="/">
+                <img src={logo} alt="logo" />
+                <h1>{title}</h1>
+              </Link>
+            </div>
+            <div
+              style={{
+                maxWidth,
+              }}
+            >
+              <BaseMenu {...this.props} flatMenuKeys={flatMenuKeys} className={styles.menu} />
+            </div>
+          </div>
+          <RightContent {...this.props} />
+        </div>
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,72 @@
+@import '~antd/lib/style/themes/default.less';
+
+.head {
+  position: relative;
+  width: 100%;
+  height: @layout-header-height;
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+  transition: background 0.3s, width 0.2s;
+  :global {
+    .ant-menu-submenu.ant-menu-submenu-horizontal {
+      height: 100%;
+      line-height: @layout-header-height;
+      .ant-menu-submenu-title {
+        height: 100%;
+      }
+    }
+  }
+  &.light {
+    background-color: #fff;
+  }
+  .main {
+    display: flex;
+    height: @layout-header-height;
+    padding-left: 24px;
+    &.wide {
+      max-width: 1200px;
+      margin: auto;
+      padding-left: 0;
+    }
+    .left {
+      display: flex;
+      flex: 1;
+    }
+    .right {
+      width: 324px;
+    }
+  }
+}
+
+.logo {
+  position: relative;
+  width: 165px;
+  height: @layout-header-height;
+  overflow: hidden;
+  line-height: @layout-header-height;
+  transition: all 0.3s;
+  img {
+    display: inline-block;
+    height: 32px;
+    vertical-align: middle;
+  }
+  h1 {
+    display: inline-block;
+    margin: 0 0 0 12px;
+    color: #fff;
+    font-weight: 400;
+    font-size: 16px;
+    vertical-align: top;
+  }
+}
+
+.light {
+  h1 {
+    color: #002140;
+  }
+}
+
+.menu {
+  height: @layout-header-height;
+  line-height: @layout-header-height;
+  border: none;
+}