Красивая и мощная панель инструментов: выпущен Ant Design Pro 2.0 и представлен Umi

После выпуска 1.0 Ant Design Pro получил широкое внимание и признание в отрасли. Число звезд на GitHub увеличилось до 11 686, и сотни Ant-приложений и приложений на базе Ant Design Pro также оказались в Ant Financial.

Разработка 2.0 велась в течение последних 8 месяцев. С помощью 38 замечательных участников мы собрали 600 коммитов, множество новых функций и общее обновление архитектуры. Теперь мы с гордостью анонсировали Ant Design Pro 2.0. В частности, мы принесли четыре новые страницы, несколько макетов, чтобы обогатить сценарии использования. Мы обновили наши леса с roadhog до umi2 и добавили классный установочный ящик. Заходите и оформите наш проект здесь:

  • Домашняя страница: http://pro.ant.design/
  • Предварительный просмотр панели мониторинга: http://preview.pro.ant.design/
  • GitHub: http://github.com/ant-design/ant-design-pro

Pages Новые страницы

Будучи самой влиятельной спецификацией веб-дизайна в XiHu District, элегантная, красивая и хорошо продуманная страница всегда была нашим главным преимуществом. В версии V2 мы также представили серию обновлений и оптимизаций страниц, в том числе:

  • Пошаговая Модальная
  • Ввод информации Модал
  • Персональный центр
  • Персональные настройки

Layout Новый макет и тема

В V2 у нас есть множество встроенных макетов. Вы можете комбинировать различные страницы в соответствии с вашими требованиями с помощью простой конфигурации. Там всегда будет тот, который вам нравится. Чтобы всем было проще видеть результаты, мы разработали классную панель настройки для переключения тем с несколькими переключателями. После подтверждения с нужными стилями, вы можете скопировать код настроек и установить их по умолчанию. Смена темы никогда не была такой простой! Что еще более важно, весь процесс находится в сети, и вам никогда не нужно перезапускать процесс создания лесов. Просто расслабьтесь и наслаждайтесь легким и немедленным переключением тем!

леса с использованием Umi

umi основан на маршрутизации, поддерживает обычную маршрутизацию в стиле next.js и различные расширенные функции маршрутизации, такие как загрузка по требованию на уровне маршрутизации. Затем с полной системой плагинов, охватывающей каждый жизненный цикл от исходного кода до сборки продукта, umi может поддерживать различные функциональные расширения и потребности бизнеса, в настоящее время umi имеет более 50+ плагинов как для сообщества, так и внутри компании.

umi является базовой интерфейсной средой Ant Financial и обслуживает сотни или тысячи приложений, прямо или косвенно, включая java, узлы, мобильное приложение, гибридное приложение, приложение с чистыми интерфейсными ресурсами, приложение CMS и многое другое. umi очень хорошо обслуживает наших внутренних пользователей и надеется, что он также сможет хорошо обслуживать внешних пользователей.

Он имеет следующие особенности:

  • Встроенный , встроенный реагирующий 、 реагирующий маршрутизатор и т. Д.
  • Next.js, как и полнофункциональные соглашения о маршрутизации, также поддерживает настроенную маршрутизацию
  • Полная система плагинов, охватывающая каждый жизненный цикл от исходного кода до производства
  • Performance Высокая производительность, поддержка PWA, разбиение кода на уровне маршрута и т. Д. С помощью плагина
  • Static Поддержка статического экспорта, адаптация к различным средам, таким как консольное приложение, мобильное приложение, яйцо, кошелек Alipay и т. Д.
  • Быстрый запуск разработки, поддержка dll и hard-source-webpack-plugin с конфигурацией
  • IE Совместимость с IE9 на основе umi-plugin-polyfills
  • Type Поддержка TypeScript, включая определение d.ts и тест umi
  • Глубокая интеграция с dva, поддержка утилитарного каталога, автоматическая загрузка модели, разбиение кода и т. Д.

Loading Поддержка загрузки по требованию

Загрузка по требованию становится очень легкой в ​​V2. Просто выполните следующую конфигурацию в babel-plugin-import:

{
    имя_библиотеки: 'ant-design-pro',
    libraryDirectory: 'lib',
    стиль: правда,
    camel2DashComponentName: false,
  }

Вы можете использовать компоненты Ant Design Pro, такие как antd, и мы настоятельно рекомендуем использовать этот метод, чтобы значительно уменьшить размер вашего пакета.

import {Result} из 'ant-design-pro';
ReactDOM.render (, mountNode);

Best Лучшие практики интернационализации

V2 предоставляет лучшие практики интернационализации на основе umi-plugin-locale. Вам нужно только поместить соответствующий файл js (например, en-US.js / zh-CN.js) в src / locales, и в коде будут доступны возможности, связанные с интернационализацией!

Импортировать {
  FormatMessage,
  Setlocale,
  GetLocale,
  FormattedMessage,
} из 'umi / locale';
экспорт по умолчанию () => {
  return 
}

’S Что дальше

В будущем мы будем уделять больше внимания производительности и простоте использования Ant Design Pro. И с помощью Umi мы попытаемся сделать некоторые исследования материализации компонентов. Более того, мы продолжим улучшать документацию, чтобы снизить стоимость использования. Лучший внешний вид и простота использования были и всегда будут нашим направлением, и мы будем продолжать бороться за это.

Особая благодарность

Спасибо всем участникам, которые регистрировали ошибки, открывали PR, отвечали на вопросы, писали документацию и многое другое! Особая благодарность следующим партнерам сообщества @ yoyo837 @xiaohuoni @zhangxiuling @kaoding и определенно всем 38 авторам, которые открыли PR для V2. Ваше участие сделало релиз Pro V2 реальностью.

Если вы столкнулись с какими-либо проблемами при использовании Ant Design Pro V2, не стесняйтесь подать новую проблему на GitHub.

Спасибо за ваше время. Возьмите и установите его, попробуйте!

наконец

Еще одна вещь, которую стоит упомянуть, наша команда работает над названием продукта Collaboration Knowledge 『语 雀』 (что означает «жаворонок»), мы также публикуем эту статью и китайскую версию, по которой вы можете пройти. Продукт все еще находится в стадии бета-тестирования и не очень подходит для английских пользователей, над которыми мы постоянно работаем над улучшением.