jiangxy · ywzhaiqi · Jun 23, 2017 · Jun 28, 2017
diff --git a/index.html.template b/index.html.template
@@ -4,16 +4,30 @@
   <!-- ejs语法 -->
   <title><%= htmlWebpackPlugin.options.title %></title>
   <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
   <!-- 设置favicon -->
   <% if (htmlWebpackPlugin.options.favIcon && htmlWebpackPlugin.options.favIcon.length > 0) { %>
     <link rel="shorticon icon" type="image/x-icon" href="<%= htmlWebpackPlugin.options.favIcon %>">
   <% } %>
+
+  <link href="https://cdn.bootcss.com/antd/2.12.0-beta1/antd.min.css" rel="stylesheet">
 </head>
 
 <body>
   <div id="root"></div>
+
+  <script src="https://cdn.bootcss.com/react/15.6.1/react.min.js"></script>
+  <script src="https://cdn.bootcss.com/react/15.6.1/react-dom.min.js"></script>
+  <script src="https://cdn.bootcss.com/react-router/3.0.5/ReactRouter.min.js"></script>
+  <script src="https://cdn.bootcss.com/redux/3.7.1/redux.min.js"></script>
+  <script src="https://cdn.bootcss.com/react-redux/5.0.5/react-redux.min.js"></script>
+  <script src="https://cdn.bootcss.com/superagent/3.5.3-beta.2/superagent.min.js"></script>
+  <script src="https://cdn.bootcss.com/moment.js/2.18.0/moment.min.js"></script>
+  <script src="https://cdn.bootcss.com/babel-polyfill/7.0.0-alpha.12/polyfill.js"></script>
+
+  <script src="https://cdn.bootcss.com/antd/2.12.0-beta1/antd.min.js"></script>
 </body>
 
 <!-- 是否是开发环境? -->

diff --git a/package.json b/package.json
@@ -19,16 +19,13 @@
     "frontend"
   ],
   "devDependencies": {
-    "antd": "2.7.1",
     "babel-core": "^6.21.0",
     "babel-eslint": "6.0.0",
     "babel-loader": "^6.2.10",
     "babel-plugin-import": "1.1.0",
-    "babel-polyfill": "^6.20.0",
     "babel-preset-latest": "^6.16.0",
     "babel-preset-react": "^6.16.0",
     "babel-preset-stage-0": "^6.16.0",
-    "compression-webpack-plugin": "0.3.2",
     "cross-env": "3.1.4",
     "css-loader": "0.23.1",
     "eslint": "2.7.0",
@@ -40,12 +37,7 @@
     "less": "2.7.1",
     "less-loader": "2.2.3",
     "lesshint": "2.0.2",
-    "react": "15.3.0",
-    "react-dom": "15.3.0",
     "react-hot-loader": "1.3.0",
-    "react-redux": "4.4.0",
-    "react-router": "3.0.0",
-    "redux": "3.6.0",
     "redux-logger": "2.7.4",
     "redux-thunk": "2.1.0",
     "rimraf": "2.5.4",
@@ -58,7 +50,8 @@
     "webpack-dev-server": "1.16.2"
   },
   "dependencies": {
-    "superagent": "2.3.0"
+    "react": "15.3.0",
+    "react-dom": "15.3.0"
   },
   "scripts": {
     "build": "webpack --progress --colors --display-error-details",

diff --git a/src/components/App/index.js b/src/components/App/index.js
@@ -15,6 +15,7 @@ import ajax from '../../utils/ajax';
 import Logger from '../../utils/Logger';
 import sidebarMenu, {headerMenu} from '../../menu.js';
 import {loginSuccessCreator} from '../../redux/Login.js';
+import { checkIsNavbar } from './isNavbar'
 
 const TabPane = Tabs.TabPane;
 const logger = Logger.getLogger('App');
@@ -38,6 +39,8 @@ class App extends React.Component {
     // tab模式相关的状态
     currentTabKey: '',  // 当前激活的是哪个tab
     tabPanes: [],  // 当前总共有哪些tab
+
+    isNavbar: checkIsNavbar(),
   };
 
   /**
@@ -102,6 +105,8 @@ class App extends React.Component {
         this.handleLoginError(`网络请求出错: ${e.message}`);
       }
     }
+
+    this.startResize()
   }
 
   handleLoginError(errorMsg) {
@@ -119,7 +124,17 @@ class App extends React.Component {
     }
   }
 
-
+  startResize() {
+    let tid;
+    window.onresize = () => {
+      clearTimeout(tid)
+      tid = setTimeout(() => {
+        let isNavbar = checkIsNavbar()
+        if (isNavbar != this.state.isNavbar)
+          this.setState({ isNavbar })
+      }, 300)
+    }
+  }
   // 下面开始是tab相关逻辑
 
 
@@ -293,14 +308,18 @@ class App extends React.Component {
       return <Login />;
     }
 
+    const { isNavbar } = this.state
+    let style = isNavbar ? { marginLeft: 0 } : null
+
     // 正常显示
     return (
       <div className="ant-layout-base">
         {/*整个页面被一个ant-layout-base的div包围, 分为sidebar/header/footer/content等几部分*/}
-        <Sidebar />
+        {!isNavbar && <Sidebar/>}
 
-        <div id="main-content-div" className={this.props.collapse ? 'ant-layout-main-collapse' : 'ant-layout-main'}>
-          <Header userName={this.props.userName}/>
+        <div id="main-content-div" className={this.props.collapse ? 'ant-layout-main-collapse' : 'ant-layout-main'}
+            style={style}>
+          <Header userName={this.props.userName} isNavbar={isNavbar}/>
           {this.renderBody()}
           <Footer />
         </div>

diff --git a/src/components/App/index.less b/src/components/App/index.less
@@ -31,6 +31,13 @@
   padding: 24px;
 }
 
+@media (max-width: 767px) {
+  .ant-layout-base .ant-layout-container {
+    margin: 12px;
+    padding: 16px 0;
+  }
+}
+
 .ant-layout-base .ant-layout-tab { // tab模式时的样式
   margin: 8px 8px;
   background: #fff;

diff --git a/src/components/App/isNavbar.js b/src/components/App/isNavbar.js
@@ -0,0 +1,6 @@
+
+
+export function checkIsNavbar() {
+  const isNavbar = document.body.clientWidth < 769
+  return isNavbar;
+}
diff --git a/src/components/DBTable/InnerForm.js b/src/components/DBTable/InnerForm.js
@@ -199,7 +199,7 @@ class InnerForm extends React.PureComponent {
         {/*这个渲染组件的方法很有意思, 另外注意这里的ref*/}
         <FormComponent ref={(input) => { this.formComponent = input; }}/>
         <Row>
-          <Col span={12} offset={12} style={{ textAlign: 'right' }}>
+          <Col lg={{ span: 12, offset: 12 }} md={{ span: 24, offset: 8 }} style={{ textAlign: 'right' }}>
             <Button type="primary" onClick={this.handleSubmit}><Icon type="search"/>查询</Button>
             <Button onClick={this.handleReset}><Icon type="cross"/>清除条件</Button>
             {tableConfig.showExport ?

diff --git a/src/components/DBTable/InnerTable.js b/src/components/DBTable/InnerTable.js
@@ -720,7 +720,8 @@ class InnerTable extends React.PureComponent {
                            record={this.updateComponentRecord}/>}
         </Modal>
 
-        <Table rowSelection={rowSelection} columns={this.tableSchema} dataSource={this.state.data} pagination={false}
+        <Table className="DBTable-innerTable"
+               rowSelection={rowSelection} columns={this.tableSchema} dataSource={this.state.data} pagination={false}
                loading={tableLoading}/>
       </div>
     );

diff --git a/src/components/DBTable/index.less b/src/components/DBTable/index.less
@@ -30,3 +30,7 @@
 .ant-upload {
   margin-left: 4px;
 }
+
+.DBTable-innerTable {
+  min-width: 1100px;
+}
diff --git a/src/components/Footer/index.less b/src/components/Footer/index.less
@@ -8,3 +8,10 @@
   border-top: 1px solid #e9e9e9;
   width: 100%;
 }
+
+@media (max-width: 767px) {
+  .ant-back-top {
+    right: 10px !important;
+    bottom: 10px !important;
+  }
+}
diff --git a/src/components/Header/index.js b/src/components/Header/index.js
@@ -1,10 +1,11 @@
 import React from 'react';
 import {Link} from 'react-router';
-import {Icon, Menu} from 'antd';
+import {Icon, Menu, Popover} from 'antd';
 import Logger from '../../utils/Logger';
 import globalConfig from 'config';
 import './index.less';
 import {headerMenu} from 'menu';
+import Sidebar from '../Sidebar';
 
 const SubMenu = Menu.SubMenu;  // 为了使用方便
 const MenuItem = Menu.Item;
@@ -16,6 +17,9 @@ const logger = Logger.getLogger('Header');
  * 定义Header组件, 包括登录/注销的链接, 以及一些自定义链接
  */
 class Header extends React.PureComponent {
+  state = {
+    popoverVisible: false
+  }
 
   // parse菜单的过程和sidebar组件差不多, copy&paste
 
@@ -115,11 +119,36 @@ class Header extends React.PureComponent {
   // FIXME: 这里其实有个bug, 如果菜单名称很长可能会导致overflow, 出现滚动条
   // 暂时无法解决..., 怎么调css都不对
 
+  switchMenuPopover = () => {
+    this.setState({
+      popoverVisible: !this.state.popoverVisible
+    })
+  }
+  handleVisibleChange = (popoverVisible) => {
+    this.setState({ popoverVisible });
+  }
+
   render() {
+    const { isNavbar } = this.props
+
     return (
       <div className="ant-layout-header">
         {/*定义header中的菜单, 从右向左依次是注销/用户菜单/其他自定义菜单*/}
         <Menu className="header-menu" mode="horizontal">
+          {isNavbar && (
+            <Popover
+                content={<Sidebar isSimple={true} switchMenuPopover={this.switchMenuPopover} />}
+                overlayClassName="ant-layout-popovermenu"
+                placement="bottomLeft"
+                trigger="click"
+                visible={this.state.popoverVisible}
+                onVisibleChange={this.handleVisibleChange} >
+              <span className="ant-layout-popoverbtn">
+                <Icon type="bars" />
+              </span>
+            </Popover>
+          )}
+
           {this.userMenu}
           {this.menu}
         </Menu>

diff --git a/src/components/Header/index.less b/src/components/Header/index.less
@@ -38,3 +38,16 @@
   right: 1px;
   left: auto;
 }
+
+.ant-layout-popovermenu {
+  min-width: 146px;
+
+  .ant-popover-inner-content {
+    padding: 0;
+  }
+}
+
+.ant-layout-popoverbtn {
+    font-size: 18px;
+    padding: 0 .5em;
+  }
diff --git a/src/components/Sidebar/index.js b/src/components/Sidebar/index.js
@@ -193,16 +193,32 @@ class Sidebar extends React.PureComponent {
     }
   };
 
+  genMenus(isDark=true) {
+    const { switchMenuPopover } = this.props
+
+    return (
+      <Menu mode="inline"
+          theme={isDark ? 'dark' : 'light'}
+          onOpenChange={this.handleOpenChange}
+          onSelect={this.handleSelect}
+          openKeys={this.props.collapse ? [] : this.state.openKeys}
+          onClick={switchMenuPopover}>
+        {this.menu}
+      </Menu>
+    )
+  }
+
   render() {
+    const { switchMenuPopover } = this.props
+
+    if (this.props.isSimple) {
+      return this.genMenus(false)
+    }
+
     return (
       <aside className={this.props.collapse ? "ant-layout-sidebar-collapse" : "ant-layout-sidebar"}>
         <Logo collapse={this.props.collapse}/>
-        <Menu theme="dark" mode="inline"
-              onOpenChange={this.handleOpenChange}
-              onSelect={this.handleSelect}
-              openKeys={this.props.collapse ? [] : this.state.openKeys}>
-          {this.menu}
-        </Menu>
+        {this.genMenus(true)}
         <div className="ant-layout-sidebar-trigger" onClick={this.props.handleClickCollapse}>
           <Icon type={this.props.collapse ? "right" : "left"}/>
         </div>

diff --git a/src/components/Sidebar/index.less b/src/components/Sidebar/index.less
@@ -92,4 +92,10 @@
   display: inline-block;
 }
 
+@media (max-width: 767px) {
+  .ant-layout-popovermenu .invisible-nav-text {
+    display: none;
+  }
+}
+
 /* 定义侧边栏折叠时的样式 - end */
diff --git a/src/index.js b/src/index.js
@@ -14,16 +14,8 @@ import App from './components/App';
 import Welcome from './components/Welcome';
 import Error from './components/Error';
 import Hello from './components/Hello';
-//import DBTable from './components/DBTable';
+import DBTable from './components/DBTable';
 
-// 将DBTable组件做成动态路由, 减小bundle size
-// 注意不要再import DBTable了, 不然就没意义了
-// 一些比较大/不常用的组件, 都可以考虑做成动态路由
-const DBTableContainer = (location, cb) => {
-  require.ensure([], require => {
-    cb(null, require('./components/DBTable').default)
-  }, 'DBTable');
-};
 
 // 路由表, 只要menu.js中所有的叶子节点配置了路由就可以了
 // 我本来想根据menu.js自动生成路由表, 但那样太不灵活了, 还是自己配置好些
@@ -34,9 +26,9 @@ const routes = (
         <IndexRoute component={Welcome}/>
 
         <Route path="index">
-          <Route path="option1" tableName="test" getComponent={DBTableContainer}/>
-          <Route path="option2" tableName="testSms" getComponent={DBTableContainer}/>
-          <Route path="option3" tableName="testAction" getComponent={DBTableContainer}/>
+          <Route path="option1" tableName="test" component={DBTable}/>
+          <Route path="option2" tableName="testSms" component={DBTable}/>
+          <Route path="option3" tableName="testAction" component={DBTable}/>
         </Route>
 
         <Route path="daohang">

diff --git a/webpack.config.js b/webpack.config.js
@@ -6,7 +6,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 // 将babel-loader的配置独立出来, 因为webpack的限制: http://stackoverflow.com/questions/33117136/how-to-add-a-query-to-a-webpack-loader-with-multiple-loaders
 const babelLoaderConfig = {
   presets: ['latest', 'stage-0', 'react'],  // 开启ES6、部分ES7、react特性, preset相当于预置的插件集合
-  plugins: [['import', {libraryName: 'antd', style: true}]],  // antd模块化加载, https://github.com/ant-design/babel-plugin-import
+  // plugins: [['import', {libraryName: 'antd', style: true}]],  // antd模块化加载, https://github.com/ant-design/babel-plugin-import
   cacheDirectory: true,
 };
 
@@ -23,7 +23,7 @@ module.exports = {
   entry: [
     'webpack-dev-server/client?http://0.0.0.0:8080', // WebpackDevServer host and port
     'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
-    'babel-polyfill',  // 可以使用完整的ES6特性, 大概增加100KB
+    // 'babel-polyfill',  // 可以使用完整的ES6特性, 大概增加100KB
     './src/index.js',  // 编译的入口
   ],
 
@@ -32,6 +32,19 @@ module.exports = {
     filename: 'bundle.js',
   },
 
+  externals: {
+    'react': "React",
+    'react-dom': 'ReactDOM',
+    'react-router': 'ReactRouter',
+    'redux': 'Redux',
+    'react-redux': 'ReactRedux',
+
+    'superagent': 'superagent',
+    'moment': 'moment',
+
+    'antd': 'antd'
+  },
+
   resolve: {
     modulesDirectories: ['node_modules', './src'],  // import时到哪些地方去寻找模块
     extensions: ['', '.js', '.jsx'],  // require的时候可以直接使用require('file')，不用require('file.js')