ant design pro plus

Formiga Design Pro Plus

Para obter instruções oficiais, consulte /master/README.zh-CN

Exibição de rótulo de página baseada em roteamento

Compatibilidade: ^[email protected] | ^[email protected]

• Suporta renderização de roteamento aninhado de páginas
• Dois modos de página de guia disponíveis
  • Com base no roteamento, cada rota renderiza apenas uma página de guia
  • Com base nos parâmetros de roteamento, o valor de hash de todos os parâmetros de cada rota é calculado. Diferentes valores de hash renderizam guias diferentes.
• Barra de guias fixa
• Operação rápida
  • Atualizar guias - window.tabsAction.reloadTab()
  • Fechar guia - window.tabsAction.closeTab()
  • Retorne à guia anterior - window.tabsAction.goBackTab()
  • Feche e retorne à aba anterior - window.tabsAction.closeAndGoBackTab()
  • Obtenha o tabKey correspondente ao local. Se nenhum parâmetro for inserido, retorne o tabKey atualmente ativado - window.tabsAction.getTabKey()
  • Ouça eventos de alteração do activeKey - window.tabsAction.listenActiveChange()
• reloadable , suporta atualização da página da guia atual na barra de operação do cabeçalho
• follow , uma nova configuração na definição de roteamento O método de abertura padrão é adicioná-lo ao final de todas as guias. Você pode configurar este atributo para abrir uma guia atrás da guia especificada follow (consulte a página de consulta Demo).
• persistent , suporta a restauração do último estado da guia após a atualização da página

Perceber:

• Voltar ao padrão retornará apenas a última rota, portanto se a última rota não for fechada, ele irá pular repetidamente entre as duas rotas. Quando a última aba aberta for excluída e o método de retorno for chamado novamente, apenas será impresso um aviso. .
• Quando você precisar corrigir o cabeçalho da guia e renderizar o rodapé, use a configuração footerRender do SwitchTabsLayout em vez do footerRender fornecido pelo ProLayout para garantir que o componente possa corrigir corretamente o cabeçalho da guia.

Estrutura de código

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

???

O pacote use-switch-tabs foi lançado e refatorado por meio de use-switch-tabs. —— 2021.06.19

Descrição da filial

v4-legacy

Baseado no ramo de recursos da versão ant design pro V4.

v2-legacy

O nome original do armazém é ant design pro v2 plus e o código é movido para esta filial. Depois de renomeá-lo para ant design pro plus , acompanhe as atualizações no ant design pro no branch master .

umi/v2.x

Implementação de função baseada em umi@​2.x.

Perguntas e respostas

A função da página da guia foi migrada do ant design pro V4 para V5

O Pro V5 passou por uma grande reconstrução em sua arquitetura, e mais detalhes de implementação são protegidos através do mecanismo de plug-in do Umi. No entanto, graças ao fato de que as funções principais da página da guia foram terceirizadas para usar as guias de troca, não há muito trabalho a ser feito. No entanto, é importante notar que a versão de @umijs/plugin-layout não pode ser inferior a 0.18.0 . Portanto, a versão de @umijs/preset-react não pode ser inferior a 1.8.28 . veja esta atualização para obter detalhes.

Finalmente, a entrada de implementação foi alterada para app.ts. Através desta entrada, você pode visualizar a implementação específica. Os componentes de UI relevantes permanecem basicamente inalterados em comparação com a V4.

---

Nota complementar: como a V5 começou a usar roteamento plano e o atual use-switch-tabs foi adaptado para redirecionar, ao usar a função de marcação de página, preste atenção ao fato originalRoutes precisa ser tratado adequadamente para evitar julgamentos anormais isSwitchTab .

Problemas na atualização da função de guia baseada em children de umi@​2.x para umi@​3.x

Para discussões e análises relacionadas, consulte umijs/umi#4425. A análise final encontrou a causa raiz da incapacidade temporária de atualização. PR umijs/umi#6101 corrigiu o problema, mas você precisa usar umi@​3.3.8. ou acima.

Problemas de desempenho

Você pode usar a função withSwitchTab para agrupar os componentes da página para evitar a renderização repetida da página. Vale ressaltar que se alguns estados especiais forem utilizados na página, como ganchos como useLocation , a otimização não será possível. Se precisar usá-lo, você mesmo pode usar a otimização useMemo .

Problema de cintilação da etiqueta

A etiqueta piscará ao mudar o número 5. Não percebi isso a princípio, mas depois descobri o motivo. Consulte ant-design/ant-design#25343.

A página de visualização não pode usar roteamento dinâmico

Como ele é implantado nas páginas do Github e exportStatic está configurado, o roteamento dinâmico na forma de /result/:id não pode ser usado. Ele também usa a variável isProductionEnv para evitar lógica de login e outros problemas. Se houver um erro de interface, ele pode ser ignorado.