├── config              // 項(xiàng)目構(gòu)建配置
├── public              // 不參與構(gòu)建的靜態(tài)文件
├── scripts             // 構(gòu)建腳本
├── src
│   ├── assets          // 全項(xiàng)目通用圖片文件等
│   ├── commons         // 全項(xiàng)目通用js，業(yè)務(wù)相關(guān)
│   ├── components      // 全項(xiàng)目通用組件，業(yè)務(wù)相關(guān)
│   ├── config          // 項(xiàng)目構(gòu)建補(bǔ)充配置
│   ├── layouts         // 頁面框架布局組件+
│   ├── mock            // 模擬數(shù)據(jù)
│   ├── models          // 模塊封裝，基于redux，提供各組件共享數(shù)據(jù)、共享邏輯
│   ├── pages           // 主項(xiàng)目頁面目錄
│   ├── ├── Project                 // 子項(xiàng)目頂級目錄
│   ├── ├── ├── nft                 // NFT--PC版本項(xiàng)目目錄
│   ├── ├── ├── ├── assets               // NFT--PC版本公共圖片文件
│   ├── ├── ├── ├── components           // NFT--PC版本公共組件庫
│   ├── ├── ├── ├── pages                // NFT--PC版本頁面目錄
│   ├── ├── ├── mobile              // 移動端項(xiàng)目目錄
│   ├── ├── ├── ├── nft-mobile           // NFT--微信版本項(xiàng)目目錄
│   ├── ├── ├── ├── ├── assets              //  NFT--微信版本公共圖片文件
│   ├── ├── ├── ├── ├── components          //  NFT--微信版本公共組件庫
│   ├── ├── ├── ├── ├── pages               //  NFT--微信版本頁面目錄
│   ├── router              // 路由
│   ├── ant.less            // 主體配置
│   ├── App.js              // 根組件
│   ├── index.css           // 全局樣式 慎用
│   ├── index.dark.css       // 全局樣式 慎用
│   ├── index.js            // 項(xiàng)目入口
│   ├── menus.js            // 菜單配置
│   ├── setupProxy.js       // 后端聯(lián)調(diào)代理配置
│   └── theme.less          // 主題變量
├── package.json
├── README.md
└── yarn.lock

$ yarn

$ yarn start

#指定端口
$ PORT=8080 yarn start

# HTTPS方式啟動
$ HTTPS=true yarn start

$ yarn build

// 構(gòu)建輸入到指定目錄
$ BUILD_PATH=../dist yarn build

// 開發(fā)啟動
$ BASE_NAME=/synext-admin yarn start

// 開發(fā)訪問
'http://localhost:XXXX/synext-admin/'

//生產(chǎn)環(huán)境 同上
$ BASE_NAME=/synext-admin yarn start
// 訪問
'http://xxx.com/synext-admin'

//在/src/menus.js文件中配置菜單數(shù)據(jù)，前端硬編碼或異步加載菜單數(shù)據(jù)。
// 菜單支持頭部、左側(cè)、頭部+左側(cè)三種布局方式,默認(rèn)左側(cè)菜單。如需放開設(shè)置，請到'src/layouts/index.jsx'放開注釋
//菜單字段說明。
字段	必須	說明
key	    是	//需要唯一
parentKey	否	//用于關(guān)聯(lián)父級
path	是	//菜單對應(yīng)的路由地址
text	是	//菜單標(biāo)題
icon	否	//菜單圖標(biāo)配置
url	    否	//菜單對應(yīng)會打開url對應(yīng)的iframe頁面，如果配置了url，path將無效
target	否	//配合url使用，菜單將為a標(biāo)簽 <a href={url} target={target}>{text}</a>
order	否	//菜單排序，數(shù)值越大越靠前顯示
type	否	//如果菜單數(shù)據(jù)中攜帶功能權(quán)限配置，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(...)
    }
    ...
}

//頁面保持
//頁面渲染一次之后會保持狀態(tài)，再次跳轉(zhuǎn)到此頁面不會重新創(chuàng)建或重新渲染
開啟方式：
1.  /src/models/system.js initState.keepAlive 屬性修改默認(rèn)值
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: "彈框標(biāo)題",
    },
})((props) => {
    const { onOk, onCancel } = props;

    return (
        <ModalContent onOk={onOk} onCancel={onCancel}>
            彈框內(nèi)容
        </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 => {

    // 每次都返回一個新對象，導(dǎo)致re-render
    return {name: state.name, age: state.age};
})

最好多次調(diào)用useSelector，單獨(dú)返回?cái)?shù)據(jù)，或者返回非引用類型數(shù)據(jù)
const name = useSelector(state => state.firstName + state.lastName);
const age = useSelector(state => state.age);

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

// 獲取數(shù)據(jù)
const state = store.getState();

// 修改數(shù)據(jù)
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,

    // 配置部分存數(shù)據(jù)儲到localStorage中
    syncStorage: {
        titel: true,
        user: { // 支持對象指定字段，任意層次
            name: true,
            address: {
                city: true,
            },
        },
        job: true,
        users: [{name: true, age: true}], // 支持?jǐn)?shù)組
    },
}

export default {
    initialState: {
        title: '',
        ...
    },

    arDemo: {
        // 如果是函數(shù)返回值將作為action.payload 傳遞給reducer，如果非函數(shù)，直接將payload的值，作為action.payload;
        payload(options) {...},

        // 如果是函數(shù)返回值將作為action.meta 傳遞給reducer，如果非函數(shù)，直接將meta的值，作為action.meta;
        meta(options) {...},
        reducer(state, action) {
            returtn {...newState}; // 可以直接返回要修改的數(shù)據(jù)，內(nèi)部封裝會與原state合并`{...state, ...newState}`;
        },
    },
};

export default {
    initialState: {
        title: '',
        ...
    },
    fetchUser: {
        // 異步action payload 返回promise
        payload: ({params, options}) => axios.get('/mock/users', params, options),

        // 異步action 默認(rèn)使用通用異步meta配置 commonAsyncMeta，對successTip errorTip onResolve onReject onComplete 進(jìn)行了合理的默認(rèn)值處理，需要action以對象形式傳參調(diào)用
        // 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: '',
        ...
    },

    // 單獨(dú)action定義，需要使用actionType與reducer進(jìn)行關(guān)聯(lián)
    actions: {
        getMenuStatus: createAction(types.GET_MENU_STATUS),
    },

    // 單獨(dú)reducer定義，使用了actionType，不僅可以處理當(dāng)前model中的action
    // 也可以處理其他任意action（只要actionType能對應(yīng)）
    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, // 是否驗(yàn)證證書
            ws: true, // 啟用websocket
        })
    );
};

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

# 后端服務(wù)地址
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; # 前端靜態(tài)文件目錄
    location / {
      index index.html;
      try_files $uri $uri/ /index.html; #react-router 防止頁面刷新出現(xiàn)404
    }

    # 靜態(tài)文件緩存，啟用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; # 如果后端接口不是統(tǒng)一以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/synext-admin
│   ├── build   // 主項(xiàng)目 靜態(tài)文件目錄
│   │   ├── static
│   │   ├── index.html
│   │   └── favicon.ico
│   ├── project1   // 子項(xiàng)目靜態(tài)目錄 名稱與 location /project1 location ~ ^/project1/static/.*  配置對應(yīng)
│   │   ├── 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;

    # 主項(xiàng)目配置，訪問地址 http://www.xxxx.com
    location / {
        root /home/ubuntu/synext-admin/build;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
    # 靜態(tài)文件緩存，啟用Cache-Control: max-age、Expires
    location ~ ^/static/.* {
        root /home/ubuntu/synext-admin/build;
        expires 20y;
        access_log off;
        add_header Cache-Control "public";
    }
    # 代理ajax請求 前端ajax請求以/api開頭
    location ^~/api {
       rewrite ^/api/(.*)$ /$1 break; # 如果后端接口不是統(tǒng)一以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;
    }

    # 子項(xiàng)目配置 訪問地址 http://www.xxxx.com/project1
    location /project1 {
        root /home/ubuntu/synext-admin;
        index index.html;
        try_files $uri $uri/ /project1/index.html;
    }
    # 靜態(tài)文件緩存，啟用Cache-Control: max-age、Expires
    location ~ ^/project1/static/.* {
        root /home/ubuntu/synext-admin;
        expires 10y;
        access_log off;
        add_header Cache-Control "public";
    }
    # 代理ajax請求 前端ajax請求以 /project1_api 開頭
    location ^~/project1_api {
       rewrite ^/api/(.*)$ /$1 break; # 如果后端接口不是統(tǒng)一以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'