From 0119dfdc2a58b4a10d5601e81c2e32319d052114 Mon Sep 17 00:00:00 2001 From: zuiidea Date: Fri, 14 Oct 2016 00:02:33 +0800 Subject: [PATCH] layout --- package.json | 3 +- src/components/Layout/Header.jsx | 49 ++++++------ src/components/Layout/MainLayout.jsx | 23 ------ src/components/Layout/MainLayout.less | 16 ---- src/components/layout/bread.jsx | 26 +++++++ src/components/layout/common.less | 34 ++++++++ src/components/layout/footer.jsx | 16 ++++ src/components/layout/main.jsx | 35 +++++++++ src/components/layout/main.less | 77 +++++++++++++++++++ src/components/layout/sider.jsx | 49 ++++++++++++ .../{Users/UserList.jsx => users/list.jsx} | 0 .../{Users/UserModal.jsx => users/modal.jsx} | 0 .../UserSearch.jsx => users/search.jsx} | 2 +- .../UserSearch.less => users/search.less} | 0 src/index.js | 14 ++-- src/router.js | 6 +- src/routes/IndexPage.js | 22 ------ src/routes/IndexPage.less | 8 -- src/routes/Users.jsx | 58 +++++++------- src/routes/{HomePage.jsx => index.jsx} | 12 +-- src/routes/{HomePage.less => index.less} | 0 21 files changed, 307 insertions(+), 143 deletions(-) delete mode 100644 src/components/Layout/MainLayout.jsx delete mode 100644 src/components/Layout/MainLayout.less create mode 100644 src/components/layout/bread.jsx create mode 100644 src/components/layout/common.less create mode 100644 src/components/layout/footer.jsx create mode 100644 src/components/layout/main.jsx create mode 100644 src/components/layout/main.less create mode 100644 src/components/layout/sider.jsx rename src/components/{Users/UserList.jsx => users/list.jsx} (100%) rename src/components/{Users/UserModal.jsx => users/modal.jsx} (100%) rename src/components/{Users/UserSearch.jsx => users/search.jsx} (97%) rename src/components/{Users/UserSearch.less => users/search.less} (100%) delete mode 100644 src/routes/IndexPage.js delete mode 100644 src/routes/IndexPage.less rename src/routes/{HomePage.jsx => index.jsx} (65%) rename src/routes/{HomePage.less => index.less} (100%) diff --git a/package.json b/package.json index af6e8b1..4c10c1a 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ }, "dependencies": { "antd": "^2.0.1", + "classnames": "^2.2.5", "dva": "1.0.0", "qs": "^6.2.0", "react": "^15.1.0", @@ -35,4 +36,4 @@ "lint": "eslint --fix --ext .js,.jsx .", "build": "atool-build" } -} +} \ No newline at end of file diff --git a/src/components/Layout/Header.jsx b/src/components/Layout/Header.jsx index 3f0b89e..d5c8d5a 100644 --- a/src/components/Layout/Header.jsx +++ b/src/components/Layout/Header.jsx @@ -1,41 +1,36 @@ -import React, { PropTypes } from 'react'; -import { Menu, Icon } from 'antd'; -import { Link } from 'dva/router'; +import React, { PropTypes } from 'react' +import { Menu, Icon } from 'antd' +import { Link } from 'dva/router' +import styles from './main.less' + +const SubMenu = Menu.SubMenu function getMenuKeyFromUrl(pathname) { - let key = ''; + let key = '' try { - key = pathname.match(/\/([^\/]*)/i)[1]; + key = pathname.match(/\/([^\/]*)/i)[1] /* eslint no-empty:0 */ } catch (e) {} - return key; + return key } function Header({ location }) { + console.log(getMenuKeyFromUrl(location.pathname),location.pathname); return ( - - - Users - - - Home - - - 404 - - - dva - - - ); +
+ + 吴彦祖}> + + 注销 + + + +
+ ) } Header.propTypes = { location: PropTypes.object, -}; +} -export default Header; +export default Header diff --git a/src/components/Layout/MainLayout.jsx b/src/components/Layout/MainLayout.jsx deleted file mode 100644 index f50f9b4..0000000 --- a/src/components/Layout/MainLayout.jsx +++ /dev/null @@ -1,23 +0,0 @@ -import React, { PropTypes } from 'react'; -import styles from './MainLayout.less'; -import Header from './Header'; - -function MainLayout({ children, location }) { - return ( -
-
-
-
- {children} -
-
-
- ); -} - -MainLayout.propTypes = { - children: PropTypes.element.isRequired, - location: PropTypes.object, -}; - -export default MainLayout; diff --git a/src/components/Layout/MainLayout.less b/src/components/Layout/MainLayout.less deleted file mode 100644 index 24e81e9..0000000 --- a/src/components/Layout/MainLayout.less +++ /dev/null @@ -1,16 +0,0 @@ - -.normal { - display: flex; - flex-direction: column; - height: 100%; -} - -.content { - flex: 1; - display: flex; -} - -.main { - padding: 0 8px; - flex: 1 0 auto; -} diff --git a/src/components/layout/bread.jsx b/src/components/layout/bread.jsx new file mode 100644 index 0000000..bee73fb --- /dev/null +++ b/src/components/layout/bread.jsx @@ -0,0 +1,26 @@ +import React, {PropTypes} from 'react' +import {Breadcrumb, Icon} from 'antd' +import styles from './main.less' + +function Bread({location}) { + return ( +
+ + Home + + Application Center + + + Application List + + An Application + +
+ ) +} + +Bread.propTypes = { + location: PropTypes.object +} + +export default Bread diff --git a/src/components/layout/common.less b/src/components/layout/common.less new file mode 100644 index 0000000..5822f27 --- /dev/null +++ b/src/components/layout/common.less @@ -0,0 +1,34 @@ +body { + height: 100%; + overflow-y: hidden; + background-color: #f8f8f8; +} +// scrollbar +::-webkit-scrollbar-corner { + background-color: transparent; +} + +::-webkit-scrollbar-button { + width: 0; + height: 0; + display: none; +} + +::-webkit-scrollbar-thumb { + width: 7px; + background-color: #b4babf; + border-radius: 7px; +} + +::-webkit-scrollbar { + width: 7px; + height: 7px; +} + +::-webkit-scrollbar-track { + width: 15px; +} + +::-webkit-scrollbar:hover { + background-color: transparent; +} diff --git a/src/components/layout/footer.jsx b/src/components/layout/footer.jsx new file mode 100644 index 0000000..0999137 --- /dev/null +++ b/src/components/layout/footer.jsx @@ -0,0 +1,16 @@ +import React, {PropTypes} from 'react' +import styles from './main.less' + +function Footer({location}) { + return ( +
+ 底部 +
+ ) +} + +Footer.propTypes = { + location: PropTypes.object +} + +export default Footer diff --git a/src/components/layout/main.jsx b/src/components/layout/main.jsx new file mode 100644 index 0000000..e605cbb --- /dev/null +++ b/src/components/layout/main.jsx @@ -0,0 +1,35 @@ +import React, { PropTypes } from 'react' +import styles from './main.less' +import classnames from 'classnames' +import Header from './header' +import Bread from './bread' +import Footer from './footer' +import Sider from './sider' +import './common.less' + +function Main({ children, location }) { + return ( +
+ +
+
+ +
+
+ { children } +
+
+
+
+
+ ) +} + +Main.propTypes = { + children: PropTypes.element.isRequired, + location: PropTypes.object, +} + +export default Main diff --git a/src/components/layout/main.less b/src/components/layout/main.less new file mode 100644 index 0000000..d27695a --- /dev/null +++ b/src/components/layout/main.less @@ -0,0 +1,77 @@ +.layout { + position: relative; + height: 100vh; + + .sider { + width: 224px; + background: #404040; + position: absolute; + overflow: visible; + padding-bottom: 24px; + height: 100vh; + transition: all 0.3s ease; + + .logo { + text-align: center; + height: 40px; + line-height: 40px; + cursor: pointer; + margin: 16px 0; + + img { + width: 40px; + margin-right: 8px; + } + + span { + vertical-align: text-bottom; + font-size: 16px; + text-transform: uppercase; + display: inline-block; + } + } + } + + .header { + :global(.ant-menu-horizontal) { + border: none; + } + box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); + } + + .bread { + height: 48px; + line-height: 48px; + padding: 0 16px; + margin-bottom: -24px; + } + + .main { + margin-left: 224px; + transition: all 0.3s ease; + overflow: auto; + height: 100vh; + + .container { + margin: 24px 16px; + + .content { + background: #fff; + padding: 24px; + min-height: e("calc(100vh - 168px)"); + position: relative; + } + } + } + + .footer { + height: 48px; + line-height: 48px; + text-align: center; + font-size: 12px; + color: #999; + background: #fff; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); + width: 100%; + } +} diff --git a/src/components/layout/sider.jsx b/src/components/layout/sider.jsx new file mode 100644 index 0000000..e4a218e --- /dev/null +++ b/src/components/layout/sider.jsx @@ -0,0 +1,49 @@ +import React, { PropTypes } from 'react' +import { Menu, Icon } from 'antd' +import styles from './main.less' + +const SubMenu = Menu.SubMenu; +const MenuItemGroup = Menu.ItemGroup; + +function Sider({ location }) { + return ( +
+
+ + Ant Design +
+ + Navigation One}> + + Option 1 + Option 2 + + + Option 3 + Option 4 + + + Navigation Two}> + Option 5 + Option 6 + + Option 7 + Option 8 + + + Navigation Three}> + Option 9 + Option 10 + Option 11 + Option 12 + + +
+ ) +} + +Sider.propTypes = { + location: PropTypes.object, +} + +export default Sider diff --git a/src/components/Users/UserList.jsx b/src/components/users/list.jsx similarity index 100% rename from src/components/Users/UserList.jsx rename to src/components/users/list.jsx diff --git a/src/components/Users/UserModal.jsx b/src/components/users/modal.jsx similarity index 100% rename from src/components/Users/UserModal.jsx rename to src/components/users/modal.jsx diff --git a/src/components/Users/UserSearch.jsx b/src/components/users/search.jsx similarity index 97% rename from src/components/Users/UserSearch.jsx rename to src/components/users/search.jsx index 503ac73..861d08d 100644 --- a/src/components/Users/UserSearch.jsx +++ b/src/components/users/search.jsx @@ -1,6 +1,6 @@ import React, {PropTypes} from 'react' import {Form, Input, Button, Select} from 'antd' -import styles from './UserSearch.less' +import styles from './search.less' const UserSearch = ({ field, diff --git a/src/components/Users/UserSearch.less b/src/components/users/search.less similarity index 100% rename from src/components/Users/UserSearch.less rename to src/components/users/search.less diff --git a/src/index.js b/src/index.js index 6ccdb2b..b2fb758 100644 --- a/src/index.js +++ b/src/index.js @@ -1,15 +1,15 @@ -import './index.html'; -import './index.less'; -import dva from 'dva'; +import './index.html' +import './index.less' +import dva from 'dva' // 1. Initialize -const app = dva(); +const app = dva() // 2. Model -app.model(require('./models/users')); +app.model(require('./models/users')) // 3. Router -app.router(require('./router')); +app.router(require('./router')) // 4. Start -app.start('#root'); +app.start('#root') diff --git a/src/router.js b/src/router.js index 5a8f4fc..8679040 100644 --- a/src/router.js +++ b/src/router.js @@ -1,13 +1,13 @@ import React from 'react' import { Router, Route } from 'dva/router' -import HomePage from './routes/HomePage' +import Index from './routes/index' import NotFound from './routes/NotFound' -import Users from './routes/Users' +import Users from './routes/users' export default function ({ history }) { return ( - + diff --git a/src/routes/IndexPage.js b/src/routes/IndexPage.js deleted file mode 100644 index 3214e8c..0000000 --- a/src/routes/IndexPage.js +++ /dev/null @@ -1,22 +0,0 @@ -import React, { Component, PropTypes } from 'react'; -import { connect } from 'dva'; -import { Link } from 'dva/router'; -import styles from './IndexPage.less'; - -function IndexPage() { - return ( -
-

Welcome to dva!

-
- -
- ); -} - -IndexPage.propTypes = { -}; - -export default connect()(IndexPage); diff --git a/src/routes/IndexPage.less b/src/routes/IndexPage.less deleted file mode 100644 index cc48bd6..0000000 --- a/src/routes/IndexPage.less +++ /dev/null @@ -1,8 +0,0 @@ - -.normal { - margin: 100px; -} - -.list { - margin-top: 20px; -} diff --git a/src/routes/Users.jsx b/src/routes/Users.jsx index 3d5db93..0cc7124 100644 --- a/src/routes/Users.jsx +++ b/src/routes/Users.jsx @@ -1,19 +1,19 @@ -import React, { PropTypes } from 'react'; -import { routerRedux } from 'dva/router'; -import { connect } from 'dva'; -import MainLayout from '../components/Layout/MainLayout'; -import styles from './Users.less'; -import UserList from '../components/Users/UserList'; -import UserSearch from '../components/Users/UserSearch'; -import UserModal from '../components/Users/UserModal'; +import React, { PropTypes } from 'react' +import { routerRedux } from 'dva/router' +import { connect } from 'dva' +import Main from '../components/layout/main' +import styles from './users.less' +import UserList from '../components/users/list' +import UserSearch from '../components/users/search' +import UserModal from '../components/users/modal' function Users({ location, dispatch, users }) { const { loading, list, total, current, currentItem, modalVisible, modalType, - } = users; + } = users - const { field, keyword } = location.query; + const { field, keyword } = location.query const userModalProps = { item: modalType === 'create' ? {} : currentItem, @@ -23,14 +23,14 @@ function Users({ location, dispatch, users }) { dispatch({ type: `users/${modalType}`, payload: data, - }); + }) }, onCancel() { dispatch({ type: 'users/hideModal', - }); + }) }, - }; + } const userListProps = { dataSource: list, @@ -41,13 +41,13 @@ function Users({ location, dispatch, users }) { dispatch(routerRedux.push({ pathname: '/users', query: { page }, - })); + })) }, onDeleteItem(id) { dispatch({ type: 'users/delete', payload: id, - }); + }) }, onEditItem(item) { dispatch({ @@ -56,9 +56,9 @@ function Users({ location, dispatch, users }) { modalType: 'update', currentItem: item, }, - }); + }) }, - }; + } const userSearchProps = { field, @@ -67,7 +67,7 @@ function Users({ location, dispatch, users }) { dispatch({ type: 'users/query', payload: fieldsValue, - }); + }) }, onAdd() { dispatch({ @@ -75,35 +75,35 @@ function Users({ location, dispatch, users }) { payload: { modalType: 'create', }, - }); + }) }, - }; + } // 解决 Form.create initialValue 的问题 // 每次创建一个全新的组件, 而不做diff // 如果你使用了redux, 请移步 http://react-component.github.io/form/examples/redux.html const UserModalGen = () => - ; + return ( - +
- - ); +
+ ) } Users.propTypes = { users: PropTypes.object, location: PropTypes.object, dispatch: PropTypes.func, -}; - -function mapStateToProps({ users }) { - return { users }; } -export default connect(mapStateToProps)(Users); +function mapStateToProps({ users }) { + return { users } +} + +export default connect(mapStateToProps)(Users) diff --git a/src/routes/HomePage.jsx b/src/routes/index.jsx similarity index 65% rename from src/routes/HomePage.jsx rename to src/routes/index.jsx index 3931281..9b34713 100644 --- a/src/routes/HomePage.jsx +++ b/src/routes/index.jsx @@ -1,6 +1,6 @@ -import React from 'react'; -import { Link } from 'dva/router'; -import styles from './HomePage.less'; +import React from 'react' +import { Link } from 'dva/router' +import styles from './Index.less' function HomePage() { return ( @@ -11,10 +11,10 @@ function HomePage() {
  • You can go to /users
    • - ); + ) } HomePage.propTypes = { -}; +} -export default HomePage; +export default HomePage diff --git a/src/routes/HomePage.less b/src/routes/index.less similarity index 100% rename from src/routes/HomePage.less rename to src/routes/index.less