ant design pro plus

Diseño de hormiga Pro Plus

Para obtener instrucciones oficiales, consulte /master/README.zh-CN

Visualización de etiquetas de página basadas en enrutamiento

Compatibilidad: ^[email protected] | ^[email protected]

• Admite la representación de enrutamiento anidado de páginas
• Dos modos de página de pestañas disponibles
  • Según la ruta, cada ruta solo muestra una página de pestaña
  • Según los parámetros de enrutamiento, se calcula el valor hash de todos los parámetros de cada ruta. Los diferentes valores hash representan pestañas diferentes.
• Barra de pestañas fija
• Operación rápida
  • Actualizar pestañas - window.tabsAction.reloadTab()
  • Cerrar pestaña - window.tabsAction.closeTab()
  • Volver a la pestaña anterior: window.tabsAction.goBackTab()
  • Cierre y regrese a la pestaña anterior: window.tabsAction.closeAndGoBackTab()
  • Obtenga la tabKey correspondiente a la ubicación. Si no se ingresan parámetros, devuelva la tabKey actualmente activada: window.tabsAction.getTabKey()
  • Escuche los eventos de cambio de activeKey: window.tabsAction.listenActiveChange()
• reloadable , admite la actualización de la página de la pestaña actual en la barra de operaciones del encabezado
• follow , una nueva configuración en la definición de enrutamiento. El método de apertura predeterminado es agregarlo al final de todas las pestañas. Puede configurar este atributo para que se abra una pestaña detrás de la pestaña especificada follow (consulte la página de consulta Demo).
• persistent , admite la restauración del estado de la última pestaña después de actualizar la página

Aviso:

• Volver al valor predeterminado solo devolverá la última ruta, por lo que si la última ruta no está cerrada, saltará repetidamente entre las dos rutas. Cuando se elimine la última pestaña abierta y se vuelva a llamar al método de retorno, solo se imprimirá una advertencia. .
• Cuando necesite corregir el encabezado de la pestaña y representar el pie de página, utilice la configuración footerRender de SwitchTabsLayout en lugar del footerRender proporcionado por ProLayout para asegurarse de que el componente pueda corregir correctamente el encabezado de la pestaña.

Estructura del código

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

???

El paquete use-switch-tabs ha sido lanzado y refactorizado mediante use-switch-tabs. —— 2021.06.19

Descripción de la sucursal

v4-legacy

Basado en la rama de funciones de la versión ant design pro V4.

v2-legacy

El nombre del almacén original es ant design pro v2 plus y el código se mueve a esta rama. Después de cambiarle el nombre a ant design pro plus , realice un seguimiento de las actualizaciones en ant design pro en la rama master .

umi/v2.x

Implementación de funciones basada en umi@​2.x.

Preguntas y respuestas

La función de página de pestañas se migra de ant design pro V4 a V5

Pro V5 ha experimentado una importante reconstrucción en su arquitectura y más detalles de implementación están protegidos a través del mecanismo de complemento de Umi. Sin embargo, gracias al hecho de que las funciones principales de la página de pestañas se han subcontratado para usar-cambiar-pestañas, no hay mucho trabajo por hacer. Sin embargo, vale la pena señalar que la versión de @umijs/plugin-layout no puede ser inferior a 0.18.0 . Consulte esta discusión para obtener más detalles. Por lo tanto, la versión de @umijs/preset-react no puede ser inferior a 1.8.28 . consulte esta actualización para obtener más detalles.

Finalmente, la entrada de implementación se cambió a app.ts. A través de esta entrada, puede ver la implementación específica. Los componentes relevantes de la interfaz de usuario básicamente no han cambiado en comparación con V4.

---

Nota complementaria: dado que V5 comenzó a usar enrutamiento plano y las use-switch-tabs actuales se han adaptado para redirigir, cuando use la función de etiquetado de página, preste atención al hecho originalRoutes debe manejarse adecuadamente para evitar juicios anormales isSwitchTab .

Problemas al actualizar la función de pestaña basada en children de umi@​2.x a umi@​3.x

Para discusiones y análisis relacionados, consulte umijs/umi#4425. El análisis final encontró la causa raíz de la imposibilidad temporal de actualizar. PR umijs/umi#6101 solucionó el problema, pero debe usar umi@​3.3.8. o superior.

Problemas de rendimiento

Puede utilizar la función withSwitchTab para ajustar los componentes de la página y evitar la representación repetida de la página. Vale la pena señalar que si se utilizan algunos estados especiales en la página, como enlaces como useLocation , la optimización no será posible. Si debe usarlo, puede utilizar la optimización useMemo usted mismo.

Problema de parpadeo de etiquetas

La etiqueta parpadeará al cambiar al número 5. No lo noté al principio, pero luego descubrí el motivo. Consulte ant-design/ant-design#25343.

La página de vista previa no puede utilizar enrutamiento dinámico

Dado que se implementa en Github Pages y exportStatic está configurado, no se puede utilizar el enrutamiento dinámico en el formato /result/:id . También utiliza la variable isProductionEnv para evitar la lógica de inicio de sesión y otros problemas. Si hay un error en la interfaz, se puede ignorar. La atención se centra en la implementación de la función_(:з　∠)_.