Антд Админ

Демонстрационный адрес http://antd-admin.zuiidea.com

Основные характеристики

• Основан на react, ant-design, dva, Mock — лучшие практики для создания корпоративных систем управления.
• Использует Antd UI язык дизайна, предоставляя стандартные сценарии использования для систем управления.
• Использует dva для динамической загрузки Model и маршрутов, загружая только необходимые компоненты.
• Использует roadhog для локальной отладки и сборки, включая функцию Mock для разработки без необходимости подключения к серверу.
• Легковесный адаптивный дизайн.

История обновлений

4.3.9

2017-12-27

• Обновлено antd до 3.0.3, а также другие основные библиотеки, и решены проблемы совместимости, возникшие при обновлении.
• Сохранено соответствие antd дизайну.### 4.3.7

2017-10-30

• Обновлены chart, добавлены ECharts, Highcharts, Recharts демонстрации.

4.3.5

2017-09-04

• Обновлено dva до 2.0.1, спасибо @yangbin1994 за PR.

4.3.4

2017-09-04

• Обновлено roadhog до 1.2.1, исправлена проблема с белым экраном.
• Исправлено отсутствие сжатия CSS при сборке #529, отсутствие хеширования классов #477.
• Обновлено использование роутера для перенаправления после успешного входа #479.

4.3.0

2017-07-30

• Обновлено roadhog до 1.0.0-beta.7, благодаря webpack@3.4 скорость компиляции не уменьшилась.
• Внедрен плагин dll для roadhog, что позволило сократить время компиляции в два раза во время разработки.
• Добавлена возможность создания файловых директорий по версии проекта при сборке. #449
• Обновлен eslint, а также внесены соответствующие изменения в .eslintrc.

Подробнее о изменениях

Разработка и сборка

Структура директорий```bash

├── /dist/ # директория выходных файлов проекта ├── /src/ # директория исходного кода проекта │ ├── /public/ # публичные файлы, копируются в директорию dist при сборке │ ├── /components/ # UI-компоненты и методы, связанные с ними │ │ ├── skin.less # глобальные стили │ │ └── vars.less # глобальные переменные стилей │ ├── /routes/ # компоненты маршрутов │ │ └── app.js # точка входа маршрутов │ ├── /models/ # модели данных │ ├── /services/ # интерфейсы данных │ ├── /themes/ # стили проекта │ ├── /mock/ # mock-данные │ ├── /utils/ # утилиты │ │ ├── config.js # конфигурация проекта │ │ ├── menu.js # конфигурация меню и хлебных крошек │ │ ├── request.js # асинхронные запросы │ │ └── theme.js # переменные стилей, используемые в js │ ├── route.js # конфигурация маршрутов │ ├── index.js # точка входа │ └── index.html
├── package.json # конфигурация проекта ├── .eslintrc # конфигурация eslint └── .roadhogrc.js # конфигурация roadhog

- components: компоненты (методы) сохраняются в отдельных директориях, названия директорий начинаются с заглавной буквы (например, `DataTable`), названия методов начинаются с маленькой буквы (например, `layer`). Основной файл директории имеет такое же имя, как и директория, а дополнительные файлы экспортируются через `index.js` (например, `./src/components/Layout`).
- routes: страницы сохраняются в отдельных директориях, названия директорий начинаются с маленькой буквы (исключения есть, например, `UIElement`), основной файл директории экспортируется через `index.js`, а дополнительные файлы могут быть сохранены в директории `components` (например, `./src/routes/dashboard`). Если есть подмаршруты, они создаются в соответствии с уровнем маршрута (например, `./src/routes/UIElement`).

### Быстрый старт

Клонируем проект:

```bash
git clone https://github.com/zuiidea/antd-admin.git

Переходим в директорию и устанавливаем зависимости:

# Перед началом убедитесь, что roadhog и webpack не установлены глобально в NPM
npm i или yarn install

Разработка:

npm run build:dll # При первом запуске npm run dev выполните эту команду, чтобы ускорить компиляцию во время разработки
npm run dev
Откройте http://localhost:8000

Сборка: Подробнее

npm run build

Сборка будет выполнена в директории dist/{version} # Поле version в package.json
```npm run build:new

Сборка будет выполнена в директории dist/{версия + 1} # Поле version в package.json

Проверка кода:

npm run lint

Часто задаваемые вопросы

• Как развернуть проект после сборки? #269

• Как управлять правами доступа? #384

• Как использовать mock.js для имитации API и как использовать онлайн-интерфейсы? #348

• Как использовать Iconfont и как использовать локальные svg-иконки? #270

• Как собирать проект по версиям, чтобы не нарушить работу пользователей? #449

• Как обрабатывать CRLF в Windows? См.

  git config --global core.autocrlf false

Ссылки

Список пользователей: https://github.com/dvajs/dva/tree/master/examples/user-dashboard

Проект дизайна панели управления: https://dribbble.com/shots/3108122-Dashboard-Admin (согласован с автором)

Скриншоты

Веб-версия

Мобильная версия