From 23b32b332eaef5a90568f7e09dd7dc02fecb317d Mon Sep 17 00:00:00 2001 From: zuiidea Date: Sun, 16 Oct 2016 23:05:18 +0800 Subject: [PATCH] error page --- src/components/Layout/Header.jsx | 24 ++-- src/components/layout/footer.jsx | 14 +-- src/router.js | 4 +- src/routes/NotFound.jsx | 14 --- src/routes/NotFound.less | 25 ---- src/routes/Users.jsx | 5 +- src/routes/Users.less | 4 - src/routes/error.jsx | 10 ++ src/{view/common => routes}/error.less | 10 +- src/view/common/error.js | 16 --- src/view/data/list.js | 140 --------------------- src/view/data/list.less | 9 -- src/view/index.js | 92 -------------- src/view/index.less | 165 ------------------------- src/view/user/dashboard.js | 15 --- src/view/user/dashboard.less | 0 src/view/user/signIn.js | 88 ------------- src/view/user/signIn.less | 36 ------ 18 files changed, 30 insertions(+), 641 deletions(-) delete mode 100644 src/routes/NotFound.jsx delete mode 100644 src/routes/NotFound.less create mode 100644 src/routes/error.jsx rename src/{view/common => routes}/error.less (60%) delete mode 100644 src/view/common/error.js delete mode 100644 src/view/data/list.js delete mode 100644 src/view/data/list.less delete mode 100644 src/view/index.js delete mode 100644 src/view/index.less delete mode 100644 src/view/user/dashboard.js delete mode 100644 src/view/user/dashboard.less delete mode 100644 src/view/user/signIn.js delete mode 100644 src/view/user/signIn.less diff --git a/src/components/Layout/Header.jsx b/src/components/Layout/Header.jsx index c8d2a70..76492cd 100644 --- a/src/components/Layout/Header.jsx +++ b/src/components/Layout/Header.jsx @@ -1,25 +1,17 @@ -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 = '' - try { - key = pathname.match(/\/([^\/]*)/i)[1] - /* eslint no-empty:0 */ - } catch (e) {} - return key -} - -function Header({ location }) { - console.log(getMenuKeyFromUrl(location.pathname),location.pathname); +function Header({location}) { return (
- 吴彦祖}> + 吴彦祖 < /span>}> 注销 @@ -30,7 +22,7 @@ function Header({ location }) { } Header.propTypes = { - location: PropTypes.object, + location: PropTypes.object } export default Header diff --git a/src/components/layout/footer.jsx b/src/components/layout/footer.jsx index fd8dbfe..3d63d6d 100644 --- a/src/components/layout/footer.jsx +++ b/src/components/layout/footer.jsx @@ -2,16 +2,8 @@ import React, {PropTypes} from 'react' import styles from './main.less' import {config} from '../../utils' -function Footer({location}) { - return ( -
- {config.footerText} -
- ) -} - -Footer.propTypes = { - location: PropTypes.object -} +const Footer = () =>
+ {config.footerText} +
export default Footer diff --git a/src/router.js b/src/router.js index 2c9e393..3faee7b 100644 --- a/src/router.js +++ b/src/router.js @@ -1,7 +1,7 @@ import React from 'react' import { Router, Route , IndexRedirect , hashHistory} from 'dva/router' import App from './components/layout/main' -import NotFound from './routes/NotFound' +import Error from './routes/error' import Dashboard from './routes/dashboard' import Users from './routes/users' @@ -12,7 +12,7 @@ export default function ({ history }) { - + ) diff --git a/src/routes/NotFound.jsx b/src/routes/NotFound.jsx deleted file mode 100644 index d136b79..0000000 --- a/src/routes/NotFound.jsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import { Button } from 'antd'; -import styles from './NotFound.less'; - -const NotFound = () => -
-
-

404

-

未找到该页面

- -
-
; - -export default NotFound; diff --git a/src/routes/NotFound.less b/src/routes/NotFound.less deleted file mode 100644 index fd8d23b..0000000 --- a/src/routes/NotFound.less +++ /dev/null @@ -1,25 +0,0 @@ -.normal { - width: 100%; - height: 100%; - min-height: 100vh; - padding-top: 120px; -} - -.container { - padding: 0; - margin: 0 auto; - width: 620px; - height: 300px; - text-align: center; -} - -.title { - font-size: 80px; - color: #666; - margin-top: 20px; - margin-bottom: 10px; -} - -.desc { - font-size: 14px; -} diff --git a/src/routes/Users.jsx b/src/routes/Users.jsx index d04bdee..735dfcf 100644 --- a/src/routes/Users.jsx +++ b/src/routes/Users.jsx @@ -79,14 +79,11 @@ function Users({ location, dispatch, users }) { }, } - // 解决 Form.create initialValue 的问题 - // 每次创建一个全新的组件, 而不做diff - // 如果你使用了redux, 请移步 http://react-component.github.io/form/examples/redux.html const UserModalGen = () => return ( -
+
diff --git a/src/routes/Users.less b/src/routes/Users.less index 8803a93..e69de29 100644 --- a/src/routes/Users.less +++ b/src/routes/Users.less @@ -1,4 +0,0 @@ -.normal { - width: 800px; - margin: 20px auto; -} diff --git a/src/routes/error.jsx b/src/routes/error.jsx new file mode 100644 index 0000000..4f2a6d5 --- /dev/null +++ b/src/routes/error.jsx @@ -0,0 +1,10 @@ +import React from 'react' +import {Icon} from 'antd' +import styles from './error.less' + +const Error = () =>
+ +

404 Not Found

+
+ +export default Error diff --git a/src/view/common/error.less b/src/routes/error.less similarity index 60% rename from src/view/common/error.less rename to src/routes/error.less index cac8bd0..b02f9aa 100644 --- a/src/view/common/error.less +++ b/src/routes/error.less @@ -1,4 +1,4 @@ -.not-found { +.error { color: black; text-align: center; position: absolute; @@ -7,9 +7,11 @@ left: 50%; margin-left: -100px; width: 200px; - height: 100px; - + :global .anticon{ + font-size: 48px; + margin-bottom: 16px; + } h1 { - font-family: "PingFang SC",; + font-family: cursive; } } diff --git a/src/view/common/error.js b/src/view/common/error.js deleted file mode 100644 index bab6ea4..0000000 --- a/src/view/common/error.js +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react' -import { Icon } from 'antd' -import './error.less' - -const Error = React.createClass({ - render() { - return ( -
-
-

{this.props.errorMsg || '404 Not Found'}

-
- ); - } -}) - -module.exports = Error diff --git a/src/view/data/list.js b/src/view/data/list.js deleted file mode 100644 index bc890c1..0000000 --- a/src/view/data/list.js +++ /dev/null @@ -1,140 +0,0 @@ -import React from 'react' -import ReactDOM from 'react-dom' -import { ajax, config, Logger } from '../../utils/lib' -import { Icon, message, Table, Button, Row, Col, Dropdown, Menu } from 'antd' -import './list.less' - -const logger = Logger.getLogger('List') - -let List = React.createClass({ - getInitialState() { - logger.info() - const tableName = this.props.routes.pop().tableName - return { - tableName, - pager:{ - showSizeChanger: true, - showQuickJumper: true, - showTotal: total => `共 ${total} 条` - }, - data:[], - params:{}, - loading: false, - }; - }, - componentDidMount() { - this.fetch() - }, - handleTableChange(pagination, filters, sorter) { - let pager = this.state.pager - pager.current = pagination.current - this.state.pager = pager - this.state.params = { - results: pagination.pageSize, - page: pagination.current, - sortField: sorter.field, - sortOrder: sorter.order, - ...filters - } - this.fetch() - }, - fetch() { - const _this = this - this.setState({loading: true}) - ajax({ - url: 'https://randomuser.me/api/', - data: { - results:10, - ..._this.state.params - }, - success: function (result) { - const pager = _this.state.pager - const params = _this.state.params - pager.total = 200 - _this.setState({ - loading: false, - data: result.results, - pager, - params}) - } - }) - }, - render() { - const columns = [ - { - title: '头像', - dataIndex: 'picture', - width:64, - className:'avatar-col', - render: text => , - },{ - title: '姓名', - dataIndex: 'name', - sorter: true, - render: text => `${text.first} ${text.last}`, - }, { - title: '性别', - dataIndex: 'gender', - filters: [ - { text: 'Male', value: 'male' }, - { text: 'Female', value: 'female' }, - ], - }, { - title: '座机', - dataIndex: 'cell', - }, { - title: '国家', - dataIndex: 'nat', - }, { - title: '城市', - dataIndex: 'location', - render: text => text.city, - },{ - title: '手机', - dataIndex: 'phone', - },{ - title: '邮箱', - dataIndex: 'email', - },{ - title: '时间', - dataIndex: 'dob', - render: text => new Date(text).format("yyyy-MM-dd hh:mm:ss"), - },{ - title: '操作', - dataIndex: 'login', - render: (text,it) => { - const menu = ( - - - 编辑 - - - 删除 - - - ) - return - - 操作 - - - }, - }] - return ( -
- record.registered} - dataSource={this.state.data} - pagination={this.state.pager} - loading={this.state.loading} - onChange={this.handleTableChange} - className="list-table" - size="small" /> - - ) - }, -}) - -module.exports = List diff --git a/src/view/data/list.less b/src/view/data/list.less deleted file mode 100644 index 0839526..0000000 --- a/src/view/data/list.less +++ /dev/null @@ -1,9 +0,0 @@ - -.list-table{ - .avatar-col{ - line-height: 1; - } - td{ - height: 39px; - } -} diff --git a/src/view/index.js b/src/view/index.js deleted file mode 100644 index 87a0863..0000000 --- a/src/view/index.js +++ /dev/null @@ -1,92 +0,0 @@ -import React from 'react' -import ReactDOM from 'react-dom' -import Header from '../components/Header' -import Footer from '../components/Footer' -import Sidebar from '../components/Sidebar' -import SignIn from './user/SignIn' -import Breadcrumb from '../components/Breadcrumb' -import './index.less' -import { ajax, config, Logger } from '../utils/lib.js' -import { Spin, message, Icon } from 'antd' - -const logger = Logger.getLogger('App') - -const App = React.createClass({ - getInitialState() { - let loading=false, - login=true - if (config.needLogin){ - loading=true - login=false - } - return { - loading, - login, - userName: '未登录', - collapse: false, - } - }, - componentDidMount() { - const _this = this - if(localStorage.getItem("username")&&localStorage.getItem("username")=="guest"&& - localStorage.getItem("password")&&localStorage.getItem("password")=='guest'){ - _this.loginSuccess("guest") - return - } - if (!this.state.login) { - const loading = message.loading('正在获取用户信息...', 0) - ajax({ - url: config.user.info, - success: function (result) { - if (result.isSuccess) { - loading() - _this.loginSuccess(result.userName) - } else { - loading() - _this.setState({loading: false}) - } - } - }) - } - }, - loginSuccess(name) { - logger.debug('callback logingSuccess, name = %s', name) - this.setState({ - loading: false, - login: true, - userName: name, - }) - }, - render() { - if (this.state.loading) { - return ( - - ) - } else if (!this.state.login) { - return - } - const collapse = this.state.collapse - return ( -
- -
-
- -
-
- {this.props.children} -
-
-
-
-
- ) - }, -}) - -module.exports = App diff --git a/src/view/index.less b/src/view/index.less deleted file mode 100644 index 03e6aad..0000000 --- a/src/view/index.less +++ /dev/null @@ -1,165 +0,0 @@ -body { - height: 100%; - overflow-y: hidden; - background-color: #f8f8f8; -} - -.ant-layout-aside { - position: relative; - min-height: 100%; - - .ant-layout-header { - .ant-menu { - line-height: 47px; - } - - .ant-menu-horizontal { - border: none; - } - box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); - } - - .ant-layout-sider { - width: 224px; - background: #404040; - position: absolute; - overflow: visible; - padding-bottom: 24px; - height: 100%; - transition: all 0.3s ease; - - & > .ant-menu { - margin-bottom: 20px; - - & > .anticon { - transition: font-size 0.3s; - } - - & > .ant-menu-item { - margin: 16px 0; - - &.nav-text { - vertical-align: baseline; - display: inline-block; - } - } - } - - .ant-layout-logo { - text-align: center; - height: 40px; - line-height: 40px; - cursor: pointer; - - img { - width: 40px; - margin-right: 8px; - } - - span { - vertical-align: text-bottom; - font-size: 16px; - text-transform: uppercase; - display: inline-block; - } - } - } - - .ant-layout-breadcrumb { - height: 48px; - line-height: 48px; - padding: 0 16px; - margin-bottom: -24px; - } - - .ant-layout-main { - margin-left: 224px; - transition: all 0.3s ease; - } - - .ant-aside-action { - height: 42px; - width: 224px; - position: fixed; - bottom: 0; - background: #474747; - color: #fff; - text-align: center; - line-height: 42px; - cursor: pointer; - transition: all 0.3s ease; - } - - .ant-layout-container { - margin: 24px 16px; - - .ant-layout-content { - background: #fff; - padding: 24px; - min-height: e("calc(100vh - 168px)"); - position: relative; - } - } - - .ant-layout-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%; - } - - &.ant-layout-aside-collapse { - .ant-aside-action { - width: 64px; - transition: all 0.3s ease; - } - - .ant-layout-main { - margin-left: 64px; - transition: all 0.3s ease; - } - - .ant-layout-sider { - width: 64px; - transition: all 0.3s ease; - - & > .ant-menu { - & > .ant-menu-item { - transition: all 0s ease; - - &:hover { - background: #2db7f5; - color: #fff; - transition: all 0s ease; - - .nav-text { - display: inline-block; - vertical-align: top; - background: #2db7f5; - color: #fff; - padding-right: 16px; - border-radius: 0 5px 5px 0; - } - } - - .nav-text { - display: none; - } - - & > .anticon { - font-size: 16px; - display: inline-block; - } - } - } - } - } -} -.ant-layout-main{ - height: 100vh; - overflow-y:auto; -} diff --git a/src/view/user/dashboard.js b/src/view/user/dashboard.js deleted file mode 100644 index c3e350c..0000000 --- a/src/view/user/dashboard.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react' -import { ajax, config, Logger } from '../../utils/lib' -import { Icon, message, Button, Row, Col, Form, Input, Select } from 'antd' -import './dashboard.less' -const logger = Logger.getLogger('Dashboard') - -const Dashboard = React.createClass({ - render(){ - return( -
hello
- ) - } -}) - -module.exports = Dashboard diff --git a/src/view/user/dashboard.less b/src/view/user/dashboard.less deleted file mode 100644 index e69de29..0000000 diff --git a/src/view/user/signIn.js b/src/view/user/signIn.js deleted file mode 100644 index 4ffe779..0000000 --- a/src/view/user/signIn.js +++ /dev/null @@ -1,88 +0,0 @@ -import React from 'react' -import ReactDOM from 'react-dom' -import { ajax, config, Logger } from '../../utils/lib' -import { Icon, message, Button, Row, Col, Form, Input, Select } from 'antd' -import './signIn.less' - -const FormItem = Form.Item -const logger = Logger.getLogger('SignIn') - -let SignIn = React.createClass({ - getInitialState() { - return { - loading: false, - } - }, - handleSubmit(e) { - const _this = this - e.preventDefault() - this.props.form.validateFieldsAndScroll((errors, values) => { - if (!!errors) { - return - } - _this.setState({ loading: true }) - ajax({ - url:config.user.signIn, - data:values, - success:function(result){ - if(result.isSuccess){ - _this.props.loginSuccess(result.userName, true) - }else { - message.error(`登录失败: ${result.message}, 请联系管理员`) - } - }, - complete:function(){ - _this.setState({ loading: false }) - } - }) - }) - }, - render() { - const { getFieldProps } = this.props.form - const username = getFieldProps('username', { - rules: [ - { - required: true, - message: '不能为空', - }, - ], - }) - const password = getFieldProps('password', { - rules: [ - { - required: true, - message: '不能为空', - }, - ], - }) - return ( -
-
- - Ant Design -
-
- - - - - - - - - -

- 账号：guest - 密码：guest -

- -
- ) - }, -}) - -SignIn = Form.create()(SignIn) - -module.exports = SignIn diff --git a/src/view/user/signIn.less b/src/view/user/signIn.less deleted file mode 100644 index cdf36dc..0000000 --- a/src/view/user/signIn.less +++ /dev/null @@ -1,36 +0,0 @@ -.signIn-from { - position: absolute; - top: 50%; - left: 50%; - margin: -160px 0 0 -160px; - width: 320px; - height: 320px; - padding: 36px; - box-shadow: 0 0 100px rgba(0,0,0,.08); - - button { - width: 100%; - } -} - -.logo { - text-align: center; - height: 40px; - line-height: 40px; - cursor: pointer; - - img { - width: 40px; - margin-right: 8px; - } - - span { - vertical-align: text-bottom; - font-size: 16px; - text-transform: uppercase; - display: inline-block; - } -} -.ant-spin-container,.ant-spin-nested-loading{ - height: 100%; -}