├── config              // 项目构建配置
├── public              // 不参与构建的静态文件
├── scripts             // 构建脚本
├── src                 
│   ├── assets          // 全项目通用图片文件等
│   ├── commons         // 全项目通用js，业务相关
│   ├── components      // 全项目通用组件，业务相关
│   ├── config          // 项目构建补充配置
│   ├── layouts         // 页面框架布局组件+
│   ├── mock            // 模拟数据
│   ├── models          // 模块封装，基于redux，提供各组件共享数据、共享逻辑
│   ├── pages           // 主项目页面组件
│   ├── ├── components              // 主项目页面公共组件
│   ├── ├── ├── Header              // 主项目页面公共组件
│   ├── ├── ├── ├── index.jsx               // 主项目页面公共组件入口
│   ├── ├── ├── ├── style.less             // 主项目页面公共组件样式
│   ├── ├── style.less              // 主项目页面样式文件
│   ├── ├── index.jsx               // 主项目页面入口文件
│   ├── ├── Project                 // 子项目顶级目录
│   ├── ├── ├── demo                        // 子项目一目录
│   ├── ├── ├── ├── assets                       // 子项目一公共图片文件
│   ├── ├── ├── ├── components                   // 子项目一公共组件库
│   ├── ├── ├── ├── pages                        // 子项目一页面目录
│   ├── ├── ├── ├── ├── bussinessadmin           // 子项目一页面模块
│   ├── ├── ├── ├── ├── ├── components           // 子项目一页面模块公共组件，components里面目录结构同上
│   ├── ├── ├── ├── ├── ├── index.jsx           // 子项目一页面模块入口
│   ├── ├── ├── ├── ├── ├── style.less           // 子项目一页面模块样式
│   ├── ├── ├── ├── style                        // 子项目一样式目录
│   ├── ├── ├── ├── index.jsx                    // 子项目一入口文件
│   ├── router              // 路由
│   ├── ant.less            // 主体配置
│   ├── App.js              // 根组件
│   ├── index.css           // 全局样式 慎用
│   ├── index.dark.css       // 全局样式 慎用
│   ├── index.js            // 项目入口
│   ├── menus.js            // 菜单配置
│   ├── setupProxy.js       // 后端联调代理配置
│   └── theme.less          // 主题变量
├── package.json
├── README.md
└── yarn.lock

$ yarn

$ yarn start

#指定端口
$ PORT=8080 yarn start

# HTTPS方式启动
$ HTTPS=true yarn start

$ yarn build

// 构建输入到指定目录
$ BUILD_PATH=../dist yarn build

// 开发启动
$ src/commons/PRE_ROUTER.js更改前缀 yarn start

// 开发访问
'http://localhost:XXXX/前缀/'

//生产环境 同上
$ src/commons/PRE_ROUTER.js更改前缀 yarn start
// 访问
'http://xxx.com/前缀'

// 代理
$ '生产环境代理前缀请根据实际项目情况进行配置'

//路由
$ '根据目前路由router下新建路由文件，并在主路由文件引入，单独打包目录下项目直接注释引入即可（没有的路由不会进行打包），登录可直接覆盖，前提为已修改前缀等信息'

//在/src/menus.js文件中配置菜单数据，前端硬编码或异步加载菜单数据。
// 菜单支持头部、左侧、头部+左侧三种布局方式,默认左侧菜单。如需放开设置，请到'src/layouts/index.jsx'放开注释
//菜单字段说明。
字段	必须	说明
key	    是	//需要唯一
parentKey	否	//用于关联父级
path	是	//菜单对应的路由地址
text	是	//菜单标题
icon	否	//菜单图标配置
url	    否	//菜单对应会打开url对应的iframe页面，如果配置了url，path将无效
target	否	//配合url使用，菜单将为a标签 <a href={url} target={target}>{text}</a>
order	否	//菜单排序，数值越大越靠前显示
type	否	//如果菜单数据中携带功能权限配置，type==='1' 为菜单，type==='2'为功能
code	否	//功能码，如果是type==='2'，会用到此字段

//配置组件
import React, {Component} from 'react';
import config from 'src/commons/config-hoc';

@config({
    title: '页面title',
    ajax: true,
    ...
})
export default class SomePage extend Component {
    componentDidMount() {
        this.props.ajax
            .get(...)
            .then(...)
    }
    ...
}

//页面保持
//页面渲染一次之后会保持状态，再次跳转到此页面不会重新创建或重新渲染
开启方式：
1.  /src/models/system.js initState.keepAlive 属性修改默认值
2.  config装饰器 keepAlive属性

@config({
    ...
})
export default class SomePage extends React.Component {
    constructor(...props) {
        super(...props);

        this.props.onComponentWillShow(() => {
            // do some thing 
        });
        
        this.props.onComponentWillHide(() => {
            // do some thing 
        });
    }
    ...
}

<PageContent footer={false}>
    ...
</PageContent>

import React from 'react';
import config from 'src/commons/config-hoc';
import { ModalContent } from 'src/commons/ra-lib';

export default config({
    modal: {
        title: '弹框标题',
    },
})(props => {
    const {onOk, onCancel} = props;

    return (
        <ModalContent
            onOk={onOk}
            onCancel={onCancel}
        >
            弹框内容
        </ModalContent>
    );
});

// parent page 
@config({
    path: '/parent/path'
})
export default class Parent extends React.Component {
    ...
}

// child page
@config({
    path: '/parent/path/_/child/path'
})
export default class Parent extends React.Component {
    ...
}

//第一种  config装饰器ajax属性（推荐）
 import React, {Component} from 'react';
    import config from 'src/commons/config-hoc';
    
    @config({
        ajax: true,
        ...
    })
    export default class SomePage extend Component {
        componentDidMount() {
            this.props.ajax
                .get(...)
                .then(...)
        }
        ...
    }
//第二种 ajax装饰器
 import React, {Component} from 'react';
    import {ajaxHoc} from 'src/commpons/ajax';

    @ajaxHoc()
    export default class SomePage extend Component {
        componentDidMount() {
            this.props.ajax
                .get(...)
                .then(...)
        }
        ...
    } 
//第三种 直接引入ajax对象    
import React, {Component} from 'react';
import {sxAjax} from 'src/commpons/ajax';
    
    export default class SomePage extend Component {
        componentDidMount() {
            sxAjax.post(...).then(...);
        
            // 组件卸载或者其他什么情况，需要打算ajax请求，可以用如下方式
            const ajax = sxAjax.get(...);
            ajax.then(...).finally(...);
            ajax.cancel();
        }
        ...
    } 

this.props.ajax.del('/user/1', null, {successTip: '删除成功！', errorTip: '删除失败！', noEmpty: true});

this.setState({loading: true});
this.props.ajax
    .get('/url')
    .then(...)
    .finally(() => this.setState({loading: false}));

import {getUsersByPageSize} from './mockdata/user';

export default {
    'post /mock/login': (config) => {
        const {
            userName,
            password,
        } = JSON.parse(config.data);
        return new Promise((resolve, reject) => {
            if (userName !== 'test' || password !== '111') {
                setTimeout(() => {
                    reject({
                        code: 1001,
                        message: '用户名或密码错误',
                    });
                }, 1000);
            } else {
                setTimeout(() => {
                    resolve([200, {
                        id: '1234567890abcde',
                        name: 'MOCK 用户',
                        loginName: 'MOCK 登录名',
                    }]);
                }, 1000);
            }
        });
    },
    'post /mock/logout': {},

    'get /mock/user-center': (config) => {
        const {
            pageSize,
            pageNum,
        } = config.params;


        return new Promise((resolve) => {
            setTimeout(() => {
                resolve([200, {
                    pageNum,
                    pageSize,
                    total: 888,
                    list: getUsersByPageSize(pageSize),
                }]);
            }, 1000);
        });
    },
    'get re:/mock/user-center/.+': {id: 1, name: '熊大', age: 22, job: '前端'},
    'post /mock/user-center': true,
    'put /mock/user-center': true,
    'delete re:/mock/user-center/.+': 'id',
}

this.props.ajax.get('/mock/users').then(...);

.root{
    width: 100%;
    height: 100%;
}

import '/path/to/style.less';

export default class Some extends React.Component {
    render() {
        return (
            <div styleName="root"></div>            
        );
    }
}

import config from 'src/commons/config-hoc';

@config({
    connect: true,
})
export default class SomeComponent extends React.Component {
    componentDidMount() {
        this.props.action.system.closeTab('/some/path');
    }
    ...
}

/path/to/models/user-center.js --> userCenter;
/path/to/models/user.js --> user;

/path/to/pages/users/model.js --> users;
/path/to/pages/users/job.model.js --> job;
/path/to/pages/users/user-center.model.js --> userCenter;
/path/to/pages/users/user.center.model.js --> userCenter;

import {connect} from 'path/to/models';

@connect(state => {
    return {
        ...
    }
})
class Demo extends Component{
    ...
}

import {connectComponent} from 'path/to/models';

class Demo extends Component {
   ... 
}
function mapStateToProps(state) {
    return {
        ...
    };
}

export default connectComponent({LayoutComponent: Demo, mapStateToProps});

import {useSelector} from 'react-redux';
import {useAction} from 'src/models';

export default () => {
    const action = useAction();
    const show = useSelector(state => state.side.show);
    
    console.log(show);

    useEffect(() =>{
        action.side.hide()    

    }, []);

    return <div/>
}

最好不要这样使用:
const someData = useSelector(state => {

    // 每次都返回一个新对象，导致re-render
    return {name: state.name, age: state.age};
})

最好多次调用useSelector，单独返回数据，或者返回非引用类型数据
const name = useSelector(state => state.firstName + state.lastName);
const age = useSelector(state => state.age);

import {action, store} from 'src/models';

// 获取数据 
const state = store.getState();

// 修改数据
action.side.hide();

// page.model.js
export default {
    initialState: {
        title: void 0,
        name: void 0,
        user: {},
        toggle: true,
    },
    
    setTitle: title => ({title}),
    setName: (name, state, action) => {
        const {name: prevName} = state;
        if(name !== prevName) return {name: 'Different Name'};
    },
    setUser: ({name, age} = {}) => ({user: {name, age}}),
    setToggle: (arg, state) => ({toggle: !state.toggle}),
}

// 使用
this.props.action.page.setTitle('my title');

export default {
    initialState: {
        title: '',
        show: true,
        user: {},
        users: [], 
        job: {},
        total: 0,
        loading: false,
        ...
    },
    
    // initialState会全部同步到localStorage中
    // syncStorage: true,
     
    // 配置部分存数据储到localStorage中 
    syncStorage: { 
        titel: true,
        user: { // 支持对象指定字段，任意层次
            name: true,
            address: {
                city: true,
            },
        },
        job: true,
        users: [{name: true, age: true}], // 支持数组
    },
}

export default {
    initialState: {
        title: '',
        ...
    },
    
    arDemo: {
        // 如果是函数返回值将作为action.payload 传递给reducer，如果非函数，直接将payload的值，作为action.payload;
        payload(options) {...},
        
        // 如果是函数返回值将作为action.meta 传递给reducer，如果非函数，直接将meta的值，作为action.meta;
        meta(options) {...},
        reducer(state, action) {
            returtn {...newState}; // 可以直接返回要修改的数据，内部封装会与原state合并`{...state, ...newState}`;
        },
    },
};

export default {
    initialState: {
        title: '',
        ...
    },
    fetchUser: {
        // 异步action payload 返回promise     
        payload: ({params, options}) => axios.get('/mock/users', params, options),
        
        // 异步action 默认使用通用异步meta配置 commonAsyncMeta，对successTip errorTip onResolve onReject onComplete 进行了合理的默认值处理，需要action以对象形式传参调用
        // meta: commonAsyncMeta, 
        // meta: {
        //     successTip: '查询成功！欧耶~',
        //     errorTip: '自定义errorTip！马丹~',
        // },
        // meta: () => {
        //    return {...};
        // },
        
        // 基于promise 异步reducer写法；
        reducer: {
            pending: (state, action) => ({loading: true}),
            resolve(state, {payload = {}}) {
                const {total = 0, list = []} = payload;
                return {
                    users: list,
                    total,
                }
            },
            complete: (state, action) => ({loading: false}),
        }
    },
};

this.props.action.user
    .fetchUser({
        params, 
        options, 
        successTip, 
        errorTip,
        onResolve, 
        onReject, 
        onComplete
    });

import {createAction} from 'redux-actions';

export const types = {
    GET_MENU_STATUS: 'MENU:GET_MENU_STATUS', // 防止各个模块冲突，最好模块名开头
};

export default {
    initialState: {
        title: '',
        ...
    },
    
    // 单独action定义，需要使用actionType与reducer进行关联
    actions: {
        getMenuStatus: createAction(types.GET_MENU_STATUS),
    },
    
    // 单独reducer定义，使用了actionType，不仅可以处理当前model中的action
    // 也可以处理其他任意action（只要actionType能对应）
    reducers: {
        [types.GET_MENU_STATUS](state) {
            ...
            return {
                ...
            };
        }
    },
}    

import React, {Component} from 'react';
import Permission from 'src/components/permission';

export default class SomePage extends Component {

    render() {
        return (
            <div>
                <Permission code="USER_ADD">
                    <Button>添加用户</Button>
                </Permission>
            </div>
        );
    }
}

const proxy = require('http-proxy-middleware');

const prefix = process.env.AJAX_PREFIX || '/api';

module.exports = function (app) {
    app.use(proxy(prefix,
        {
            target: 'http://localhost:3000/',
            pathRewrite: {
                ['^' + prefix]: '', // 如果后端接口无前缀，可以通过这种方式去掉
            },
            changeOrigin: true,
            secure: false, // 是否验证证书
            ws: true, // 启用websocket
        },
    ));
};

.
├── /usr/local/nginx/html                 
│   ├── static
│   ├── index.html
│   └── favicon.ico

# 后端服务地址
upstream api_service {
  server xxx.xxx.xxx.xxx:xxxx;
  keepalive 2000;
}

server {
    listen      80;
    server_name www.xxxx.com xxxx.com; # 域名地址
    root        /usr/local/nginx/html; # 前端静态文件目录
    location / {
      index index.html;
      try_files $uri $uri/ /index.html; #react-router 防止页面刷新出现404
    }

    # 静态文件缓存，启用Cache-Control: max-age、Expires
    location ~ ^/static/(css|js|media)/ {
      expires 10y;
      access_log off;
      add_header Cache-Control "public";
    }

     # 代理ajax请求 前端ajax请求以 /api 开头
    location ^~/api {
       rewrite ^/api/(.*)$ /$1 break; # 如果后端接口不是统一以api开头，去掉api前缀
       proxy_pass http://api_service/;
       proxy_set_header Host  $http_host;
       proxy_set_header Connection close;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Forwarded-Server $host;
    }
}

BASE_NAME=/project1 PUBLIC_URL=/project1 yarn build

.
├── /home/ubuntu/front-springrain                 
│   ├── build   // 主项目 静态文件目录
│   │   ├── static
│   │   ├── index.html
│   │   └── favicon.ico
│   ├── project1   // 子项目静态目录 名称与 location /project1 location ~ ^/project1/static/.*  配置对应
│   │   ├── static
│   │   ├── index.html
│   │   └── favicon.ico

upstream api_service {
  server xxx.xxx.xxx.xxx:xxxx;
  keepalive 2000;
}

upstream api_service_project1 {
  server xxx.xxx.xxx.xxx:xxxx;
  keepalive 2000;
}
server {
    listen 80;
    server_name www.xxxx.com xxxx.com; # 域名地址
    # Allow file uploads
    client_max_body_size 100M;

    # 主项目配置，访问地址 http://www.xxxx.com
    location / {
        root /home/ubuntu/front-springrain/build;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
    # 静态文件缓存，启用Cache-Control: max-age、Expires
    location ~ ^/static/.* {
        root /home/ubuntu/front-springrain/build;
        expires 20y;
        access_log off;
        add_header Cache-Control "public";
    }
    # 代理ajax请求 前端ajax请求以/api开头
    location ^~/api {
       rewrite ^/api/(.*)$ /$1 break; # 如果后端接口不是统一以api开头，去掉api前缀
       proxy_pass http://api_service/;
       proxy_set_header Host  $http_host;
       proxy_set_header Connection close;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Forwarded-Server $host;
    }

    # 子项目配置 访问地址 http://www.xxxx.com/project1
    location /project1 {
        root /home/ubuntu/front-springrain;
        index index.html;
        try_files $uri $uri/ /project1/index.html;
    }
    # 静态文件缓存，启用Cache-Control: max-age、Expires
    location ~ ^/project1/static/.* {
        root /home/ubuntu/front-springrain;
        expires 10y;
        access_log off;
        add_header Cache-Control "public";
    }
    # 代理ajax请求 前端ajax请求以 /project1_api 开头
    location ^~/project1_api {
       rewrite ^/api/(.*)$ /$1 break; # 如果后端接口不是统一以api开头，去掉api前缀
       proxy_pass http://api_service_project1/;
       proxy_set_header Host  $http_host;
       proxy_set_header Connection close;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Forwarded-Server $host;
    }
}

"lint-staged": {
    "gitDir": "../",
    "linters": {
        "**/*.{js,jsx}": "lint-staged:js",
        "**/*.less": "stylelint --syntax less"
    }
},

const name = res?.data?.user?.name || '匿名';

'input', 'hidden', 'number', 'textarea', 'password', 'mobile', 'email', 'select', 'select-tree', 'checkbox', 'checkbox-group', 'radio', 'radio-button', 'radio-group', 'switch', 'date', 'time', 'date-time', 'date-range', 'cascader', 'transfer', 'icon-picker'