@ozo/react-jazz/src/layouts/UserLayout/index.js

React 桌面端开发脚手架，基于CRA3，通用、开箱即用。

import React, { Component } from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
import { Grid } from '@alifd/next';
import Footer from './components/Footer';
import Intro from './components/Intro';
import routerData from '@/routerConfig';
// import { loginBg } from '@/assets';
import { getAuthority } from '@/utils';
const { Row, Col } = Grid;

const styles = {
    container: {
        position: 'relative',
        width: '100wh',
        minWidth: '1200px',
        height: '100vh',
        // backgroundImage: `url(${loginBg})`,
        backgroundSize: 'cover',
        display: 'flex',
        flexDirection: 'column',
    },
    mask: {
        position: 'absolute',
        left: '0',
        right: '0',
        top: '0',
        bottom: '0',
        background: '#000',
        opacity: '0.4',
    },
    row: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        flex: '1',
    },
    form: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
    },
};

export default class UserLayout extends Component {
    render() {
        return (
            <div style={styles.container}>
                <div style={styles.mask} />
                <Row wrap style={styles.row}>
                    <Col l="12">
                        <Intro />
                    </Col>
                    <Col l="12">
                        <div style={styles.form}>
                            <Switch>
                                {routerData.map((item) => {
                                    const { path, component, exact, authority } = item;
                                    const authorized = authority && getAuthority();
                                    let tComponent = null;

                                    if (authorized && path.indexOf('/user/login') !== -1) {
                                        tComponent = (
                                            <Redirect
                                                key={path}
                                                to={{
                                                    pathname: '/',
                                                }}
                                            />
                                        );
                                    } else if (component) {
                                        tComponent = (
                                            <Route key={path} path={path} exact={exact} component={component} />
                                        );
                                    }

                                    return tComponent;
                                })}
                            </Switch>
                        </div>
                    </Col>
                </Row>
                <Footer />
            </div>
        );
    }
}