├── config              // проектная конфигурация сборки
├── public              // статические файлы, не участвующие в сборке
├── scripts             // скрипты сборки
└── src
    ├── assets          // общие изображения для всего проекта
    ├── commons         // общие js для всего проекта, связанные с бизнесом
    ├── components      // общие компоненты для всего проекта, связанные с бизнесом
    ├── config          // дополнительная конфигурация сборки проекта
    ├── layouts         // компоненты структуры страницы +
    ├── mock            // данные моделирования
    ├── models          // модули упаковки, основанные на redux, предоставляют общие данные и логику компонентов
    ├── pages           // каталог основных страниц проекта
    │   ├── Project                 // каталог верхнего уровня подпроекта
    │   │   ├── nft                 // NFT — каталог версии ПК
    │   │   │   ├── assets               // общедоступные файлы изображений NFT — версия ПК
    │   │   │   ├── components           // общедоступная библиотека компонентов NFT — версия ПК
    │   │   │   └── pages                // каталог страниц NFT — версия ПК
    │   │   └── mobile              // каталог мобильных проектов
    │   │       ├── nft-mobile           // NFT — каталог версий WeChat
    │   │       │   ├── assets              // общедоступные файлы изображений NFT — версия WeChat
    │   │       │   ├── components          // общедоступная библиотека компонентов NFT — версия WeChat
    │   │       │   └── pages               // каталог страниц NFT — версия WeChat
    ├── 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

// Разработка и запуск
$ BASE_NAME=/synext-admin yarn start
// Доступ к разработке
'http://localhost:XXXX/synext-admin/'
// Производственная среда такая же, как и выше
$ BASE_NAME=/synext-admin yarn start
// доступ
'http://xxx.com/synext-admin'

// Файл /src/menus.js используется для настройки данных меню, а меню загружается спереди или асинхронно.
// Меню поддерживает три макета: заголовок, левая сторона и заголовок + левая сторона. По умолчанию используется левое меню. Если вы хотите настроить его, перейдите в 'src/layouts/index.jsx' и снимите комментарий.
// Описание полей меню.
Поле  Обязательно  Описание
key    Да           // Должен быть уникальным
parentKey Нет        // Используется для связывания родительского уровня
path    Да           // Маршрут, соответствующий меню
text    Да           // Заголовок меню
icon    Нет        // Настройка значка меню
url     Нет        // Меню соответствует открытому URL-адресу iframe страницы, если настроено url, путь недействителен
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: 'Заголовок страницы',
    ajax: true,
    ...
})
export default class SomePage extend Component {
    componentDidMount() {
        this.props.ajax
            .get(...)
            .then(...)
    }
    ...
}

@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>
    );
});

// Родительская страница
@config({
    path: '/parent/path'
})
export default class Parent extends React.Component {
    ...
}

// Дочерняя страница
@config({
    path: '/parent/path/_/child/path'
})
export default class Child extends React.Component {
    ...
}

})
export default class SomePage extends Component {
    componentDidMount() {
        this.props.ajax
            .get(...)
            .then(...)
    }
    ...
}
// Второй вид ajax-декоратора
import React, {Component} from 'react';
import {ajaxHoc} from 'src/commpons/ajax';

@ajaxHoc()
export default class SomePage extends Component {
    componentDidMount() {
        this.props.ajax
            .get(...)
            .then(...)
    }
    ...
}
// Третий вид — прямое введение ajax-объекта
import React, {Component} from 'react';
import {sxAjax} from 'src/commpons/ajax';

export default class SomePage extends 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 />;
};

// Каждый раз возвращается новый объект, что приводит к повторному отображению
return {name: state.name, age: 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: {
        // Если возвращаемое значение является функцией, оно будет передано в reducer как payload action. Если это не функция, значение payload будет напрямую передано как payload action;
        payload(options) {...},

        // Если возвращаемое значение является функцией, оно будет передано в reducer как meta action. Если это не функция, мета-значение будет напрямую передано как meta action;
        meta(options) {...},
        reducer(state, action) {
            returtn {...newState}; // Можно напрямую вернуть данные для модификации, внутренняя реализация объединит их с исходными данными `{...state, ...newState}`;
        },
    },
};

export default {
    initialState: {
        title: '',
        ...
    },
    fetchUser: {
        // Асинхронный payload действия возвращает обещание
        payload: ({params, options}) => axios.get('/mock/users', params, options),

        // По умолчанию асинхронные действия используют общую асинхронную конфигурацию meta commonAsyncMeta, которая разумно обрабатывает значения successTip errorTip onResolve onReject onComplete, и действие должно вызываться в форме объекта для передачи параметров
        // 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,
});

**Параметры соглашения в качестве объекта, свойства которого описаны ниже:**
| Параметр | Описание |
|----------|----------|
| 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: '',
        ...
    },

    // Отдельное определение действия, требующее использования actionType и reducer для связи
    actions: {
        getMenuStatus: createAction(types.GET_MENU_STATUS),
    },

    // Отдельный редуктор, использующий actionType, может обрабатывать не только текущее состояние модели, но и другие произвольные действия (при условии, что actionType может соответствовать)
    reducers: {
        [types.GET_MENU_STATUS](state) {
            ...
            return {
                ...
            };
        }
    },
}

# Контроль доступа

Системные меню и конкретные функции могут быть ограничены.

## Меню контроля доступа

Меню предоставляется бэкэндом, и бэкэнд возвращает меню пользователя после входа в систему; страница отображает только полученное меню.

Система предоставляет базовую страницу меню и управления правами доступа, которая требует поддержки со стороны бэкэнда для хранения данных.

## Контроль доступа к функциям

Компонент «src/components/permission» можно использовать для управления доступом к функциям.

```js
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, запросы переднего конца начинаются с /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/synext-admin
│   ├── 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/synext-admin/build;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
    # настройка кэширования статических файлов, включение Cache-Control: max-age, Expires
    location ~ ^/static/.* {
        root /home/ubuntu/synext-admin/build;
        expires 20y;
        access_log off;
        add_header Cache-Control "public";
    }
    # проксирование запросов ajax, запросы фронтенда начинаются с /api
    location ^~/api {
       rewrite ^/api/(.*)$ /$1 break; # если интерфейс не использует унифицированный префикс 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/synext-admin;
        index index.html;
        try_files $uri $uri/ /project1/index.html;
    }
    # настройка кэширования статических файлов, включение Cache-Control: max-age, Expires
    location ~ ^/project1/static/.* {
        root /home/ubuntu/synext-admin;
        expires 10y;
        access_log off;
        add_header Cache-Control "public";
    }
    # проксирование запросов ajax, запросы фронтенда начинаются с /project1_api
    location ^~/project1_api {
       rewrite ^/api/(.*)$ /$1 break; # если интерфейс не использует унифицированный префикс 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'