ant design pro plus

Conception de fourmis Pro Plus

Pour les instructions officielles, veuillez vous référer à /master/README.zh-CN

Affichage des étiquettes de page basé sur le routage

Compatibilité : ^[email protected] | ^[email protected]

• Prend en charge le rendu de routage imbriqué des pages
• Deux modes de page à onglet disponibles
  • En fonction du routage, chaque itinéraire n'affiche qu'une seule page à onglet
  • Sur la base des paramètres de routage, la valeur de hachage de tous les paramètres de chaque itinéraire est calculée. Différentes valeurs de hachage restituent différents onglets.
• Barre d'onglets fixe
• Fonctionnement rapide
  • Actualiser les onglets - window.tabsAction.reloadTab()
  • Fermer l'onglet - window.tabsAction.closeTab()
  • Revenir à l'onglet précédent - window.tabsAction.goBackTab()
  • Fermez et revenez à l'onglet précédent - window.tabsAction.closeAndGoBackTab()
  • Récupère la tabKey correspondant à l'emplacement. Si aucun paramètre n'est saisi, renvoie la tabKey actuellement activée - window.tabsAction.getTabKey()
  • Écoutez les événements de changement activeKey - window.tabsAction.listenActiveChange()
• reloadable , prend en charge l'actualisation de la page à onglet actuelle dans la barre d'opération d'en-tête
• follow , une nouvelle configuration dans la définition de routage. La méthode d'ouverture par défaut consiste à l'ajouter à la fin de tous les onglets. Vous pouvez configurer cet attribut pour qu'un onglet s'ouvre derrière l'onglet spécifié follow (veuillez vous référer à la page de requête Démo).
• persistent , prend en charge la restauration du dernier état de l'onglet après l'actualisation de la page

Avis:

• Le retour à la valeur par défaut ne renverra que la dernière route, donc si la dernière route n'est pas fermée, elle sautera à plusieurs reprises entre les deux routes. Lorsque le dernier onglet ouvert est supprimé et que la méthode de retour est à nouveau appelée, un avertissement sera uniquement imprimé. .
• Lorsque vous devez corriger l'en-tête de l'onglet et restituer le pied de page, veuillez utiliser la configuration footerRender de SwitchTabsLayout au lieu du footerRender fourni par ProLayout pour garantir que le composant peut corriger correctement l'en-tête de l'onglet.

Structure du code

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

???

Le package use-switch-tabs a été publié et refactorisé via use-switch-tabs. —— 2021.06.19

Description de la succursale

v4-legacy

Basé sur la branche de fonctionnalités de la version ant design pro V4.

v2-legacy

Le nom de l'entrepôt d'origine est ant design pro v2 plus et le code est déplacé vers cette branche. Après l'avoir renommé ant design pro plus , suivez les mises à jour dans ant design pro sur la branche master .

umi/v2.x

Implémentation de fonctions basée sur umi@​2.x.

Questions et réponses

La fonction de page à onglet est migrée de Ant Design Pro V4 vers V5

Pro V5 a subi une reconstruction majeure dans son architecture, et davantage de détails d'implémentation sont protégés par le mécanisme de plug-in d'Umi. Cependant, grâce au fait que les fonctions principales de la page à onglet ont été externalisées vers use-switch-tabs, il n'y a pas beaucoup de travail à faire. Cependant, il convient de noter que la version de @umijs/plugin-layout ne peut pas être inférieure à 0.18.0 . Par conséquent, la version de @umijs/preset-react ne peut pas être inférieure à 1.8.28 . voir cette mise à jour pour plus de détails.

Enfin, l'entrée d'implémentation a été modifiée en app.ts. Grâce à cette entrée, vous pouvez voir l'implémentation spécifique. Les composants de l'interface utilisateur concernés sont fondamentalement inchangés par rapport à la V4.

---

Remarque complémentaire : depuis que la V5 a commencé à utiliser le routage plat et que les use-switch-tabs actuels ont été adaptés pour rediriger, lorsque vous utilisez la fonction de balisage de page, veuillez faire attention au fait originalRoutes doivent être gérées correctement pour éviter isSwitchTab anormaux. jugement.

Problèmes lors de la mise à niveau de la fonction d'onglet basée sur children de umi@​2.x vers umi@​3.x

Pour une discussion et une analyse connexes, veuillez vous référer à umijs/umi#4425. L'analyse finale a trouvé la cause première de l'incapacité temporaire de mise à niveau. PR umijs/umi#6101 a résolu le problème, mais vous devez utiliser umi@​3.3.8. ou supérieur.

Problèmes de performances

Vous pouvez utiliser la fonction withSwitchTab pour envelopper les composants de la page afin d'éviter un rendu répété de la page. Il convient de noter que si certains états spéciaux sont utilisés dans la page, tels que des hooks tels que useLocation , l'optimisation ne sera pas possible. Si vous devez l'utiliser, vous pouvez utiliser l'optimisation useMemo par vous-même.

Problème de scintillement des étiquettes

L'étiquette clignotera lors du changement de numéro 5. Je ne l'ai pas remarqué au début, mais plus tard, j'ai découvert la raison. Veuillez vous référer à ant-design/ant-design#25343.

La page d'aperçu ne peut pas utiliser le routage dynamique

Puisqu'il est déployé sur les pages Github et que exportStatic est configuré, le routage dynamique sous la forme de /result/:id ne peut pas être utilisé. Il utilise également la variable isProductionEnv pour éviter la logique de connexion et d'autres problèmes. S'il y a une erreur d'interface, elle peut être ignorée. L'accent est mis sur l'implémentation de la fonction_(:з　∠)_.