ant design pro plus

Муравей Дизайн Про Плюс

Официальные инструкции можно найти на странице /master/README.zh-CN.

Отображение меток страниц на основе маршрутизации

Совместимость: ^[email protected] | ^[email protected]

• Поддерживает рендеринг страниц с вложенной маршрутизацией.
• Доступны два режима вкладок.
  • В зависимости от маршрутизации каждый маршрут отображает только одну вкладку.
  • На основе параметров маршрутизации рассчитывается хэш-значение всех параметров каждого маршрута. Разные значения хеш-функции отображают разные вкладки.
• Исправлена ​​панель вкладок
• Быстрая работа
  • Обновить вкладки — window.tabsAction.reloadTab()
  • Закрыть вкладку - window.tabsAction.closeTab()
  • Вернитесь на предыдущую вкладку — window.tabsAction.goBackTab()
  • Закройте и вернитесь на предыдущую вкладку — window.tabsAction.closeAndGoBackTab()
  • Получите tabKey, соответствующий местоположению. Если параметры не указаны, верните текущий активированный tabKey — window.tabsAction.getTabKey()
  • Прослушивать события изменения activeKey — window.tabsAction.listenActiveChange()
• reloadable , поддерживает обновление текущей вкладки в панели операций заголовка
• follow , новая конфигурация в определении маршрутизации. Метод открытия по умолчанию — добавить его в конец всех вкладок. Вы можете настроить этот атрибут, чтобы вкладка открывалась за вкладкой, указанной follow (см. демонстрационную страницу запроса).
• persistent , поддерживает восстановление последнего состояния вкладки после обновления страницы.

Уведомление:

• Возврат к значениям по умолчанию вернет только последний маршрут, поэтому, если последний маршрут не закрыт, он будет неоднократно переходить между двумя маршрутами. Когда последняя открытая вкладка будет удалена и метод возврата будет вызван снова, будет только напечатано предупреждение. .
• Если вам нужно исправить заголовок вкладки и визуализировать нижний колонтитул, используйте конфигурацию footerRender SwitchTabsLayout вместо footerRender, предоставленную ProLayout, чтобы гарантировать, что компонент может правильно исправить заголовок вкладки.

Структура кода

 ├── config
│   └── defaultSettings.ts    # 系统风格配置，新增关于 SwitchTabs 的配置
├── src
│   └── layouts
│       └── SwitchTabsLayout  # 路由加载
│   └── pages
│       └── SwitchTabsDemo    # 标签页功能展示

???

Пакет use-switch-tabs был выпущен и переработан с помощью use-switch-tabs. —— 2021.06.19

Описание филиала

v4-legacy

На основе функциональной ветки версии ant design pro V4.

v2-legacy

Исходное имя хранилища — ant design pro v2 plus , и код перенесен в эту ветку. После переименования его в ant design pro plus следите за обновлениями ant design pro в master ветке.

umi/v2.x

Реализация функции на основе umi@​2.x.

Вопросы и ответы

Функция вкладки перенесена из ant design pro V4 в V5.

Архитектура Pro V5 претерпела серьезную реконструкцию, и дополнительные детали реализации скрыты благодаря механизму подключаемых модулей Umi. Однако, благодаря тому, что основные функции страницы вкладок были переданы на аутсорсинг use-switch-tabs, работы предстоит не так много. Однако стоит отметить, что версия @umijs/plugin-layout не может быть ниже 0.18.0 . Подробности см. в этом обсуждении. Поэтому версия @umijs/preset-react не может быть ниже 1.8.28 . подробности см. в этом обновлении.

Наконец, вход реализации был изменен на app.ts. С помощью этого входа вы можете просмотреть конкретную реализацию. Соответствующие компоненты пользовательского интерфейса практически не изменились по сравнению с версией V4.

---

Дополнительное примечание: поскольку V5 начал использовать плоскую маршрутизацию, а текущие use-switch-tabs были адаптированы для перенаправления, при использовании функции маркировки страниц обратите внимание на тот факт originalRoutes необходимо обрабатывать правильно, чтобы избежать ненормальных решений isSwitchTab .

Проблемы при обновлении функции вкладок на основе children с umi@​2.x до umi@​3.x

Для обсуждения и анализа см. umijs/umi#4425. Окончательный анализ выявил основную причину временной невозможности обновления. PR umijs/umi#6101 устранил проблему, но вам нужно использовать umi@​3.3.8. или выше.

Проблемы с производительностью

Вы можете использовать функцию withSwitchTab для переноса компонентов страницы, чтобы избежать повторного рендеринга страницы. Стоит отметить, что если на странице используются какие-то специальные состояния, например хуки типа useLocation , оптимизация будет невозможна. Если вам необходимо его использовать, вы можете использовать оптимизацию useMemo самостоятельно.

Проблема с мерцанием этикетки

Ярлык будет мигать при переключении #5. Сначала я этого не заметил, но позже выяснил причину. См. ant-design/ant-design#25343.

На странице предварительного просмотра нельзя использовать динамическую маршрутизацию.

Поскольку он развернут на страницах Github и настроен exportStatic , динамическую маршрутизацию в форме /result/:id использовать нельзя. Он также использует переменную isProductionEnv чтобы избежать логики входа и других проблем. Если возникает ошибка интерфейса, ее можно игнорировать.