ant design pro plus

Ant Design Pro Plus

Offizielle Anweisungen finden Sie unter /master/README.zh-CN

Routingbasierte Seitenbeschriftungsanzeige

Kompatibilität: ^[email protected] | ^[email protected]

• Unterstützt verschachteltes Routing-Rendering von Seiten
• Es stehen zwei Registerkartenmodi zur Verfügung
  • Basierend auf dem Routing stellt jede Route nur eine Registerkarte dar
  • Basierend auf den Routing-Parametern wird der Hash-Wert aller Parameter jeder Route berechnet. Unterschiedliche Hash-Werte rendern unterschiedliche Registerkarten.
• Tab-Leiste korrigiert
• Schnelle Bedienung
  • Tabs aktualisieren - window.tabsAction.reloadTab()
  • Tab schließen - window.tabsAction.closeTab()
  • Zurück zur vorherigen Registerkarte - window.tabsAction.goBackTab()
  • Schließen und zur vorherigen Registerkarte zurückkehren – window.tabsAction.closeAndGoBackTab()
  • Rufen Sie den tabKey ab, der dem Speicherort entspricht. Wenn keine Parameter eingegeben werden, geben Sie den aktuell aktivierten tabKey zurück - window.tabsAction.getTabKey()
  • Auf ActiveKey-Änderungsereignisse warten – window.tabsAction.listenActiveChange()
• reloadable unterstützt das Aktualisieren der aktuellen Registerkarte in der Kopfzeilen-Bedienleiste
• follow , eine neue Konfiguration in der Routing-Definition, besteht darin, sie am Ende aller Tabs hinzuzufügen. Sie können dieses Attribut so konfigurieren, dass ein Tab hinter dem follow angegebenen Tab geöffnet wird (siehe Demo auf der Abfrageseite).
• persistent , unterstützt die Wiederherstellung des letzten Tab-Status nach der Seitenaktualisierung

Beachten:

• Beim Zurückkehren zur Standardeinstellung wird nur die letzte Route zurückgegeben. Wenn die letzte Route also nicht geschlossen ist, wird wiederholt zwischen den beiden Routen gewechselt. Wenn die zuletzt geöffnete Registerkarte gelöscht und die Rückgabemethode erneut aufgerufen wird, wird nur eine Warnung ausgegeben .
• Wenn Sie die Tab-Kopfzeile korrigieren und die Fußzeile rendern müssen, verwenden Sie bitte die FooterRender-Konfiguration von SwitchTabsLayout anstelle des von ProLayout bereitgestellten FooterRender, um sicherzustellen, dass die Komponente die Tab-Kopfzeile ordnungsgemäß reparieren kann.

Codestruktur

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

???

Das Paket „use-switch-tabs“ wurde veröffentlicht und durch use-switch-tabs überarbeitet. —— 19.06.2021

Filialbeschreibung

v4-legacy

Basierend auf dem Feature-Zweig der ant design pro V4-Version.

v2-legacy

Der ursprüngliche Warehouse-Name lautet ant design pro v2 plus und der Code wird in diesen Zweig verschoben. Nach der Umbenennung in ant design pro plus folgen Sie den Aktualisierungen in ant design pro im master .

umi/v2.x

Funktionsimplementierung basierend auf umi@​2.x.

Fragen und Antworten

Die Registerkartenfunktion wurde von Ant Design Pro V4 auf V5 migriert

Die Architektur von Pro V5 wurde umfassend umgestaltet und weitere Implementierungsdetails werden durch den Plug-in-Mechanismus von Umi geschützt. Da die Kernfunktionen der Tab-Seite jedoch auf use-switch-tabs ausgelagert wurden, gibt es hier nicht viel zu tun. Es ist jedoch zu beachten, dass die Version von @umijs/plugin-layout nicht niedriger als 0.18.0 sein darf. Weitere Informationen finden Sie in dieser Diskussion. Daher darf die Version von @umijs/preset-react nicht niedriger sein als 1.8.28 Einzelheiten finden Sie in diesem Update.

Schließlich wurde der Implementierungseingang in app.ts geändert. Über diesen Eingang können Sie die spezifischen Implementierungen anzeigen. Die relevanten UI-Komponenten sind im Vergleich zu V4 grundsätzlich unverändert.

---

Ergänzender Hinweis: Da V5 mit der Verwendung von Flat Routing begonnen hat und die aktuellen use-switch-tabs an die Umleitung angepasst wurden, achten Sie bei Verwendung der Seiten-Tagging-Funktion darauf, originalRoutes ordnungsgemäß gehandhabt werden müssen, um abnormale isSwitchTab -Beurteilungen zu vermeiden .

Probleme beim Upgrade der children Tab-Funktion von umi@​2.x auf umi@​3.x

Eine entsprechende Diskussion und Analyse finden Sie unter umijs/umi#4425. Die endgültige Analyse hat die Ursache für die vorübergehende Unfähigkeit, ein Upgrade durchzuführen, gefunden. PR umijs/umi#6101 hat das Problem behoben, Sie müssen jedoch umi@​3.3.8 verwenden oder höher.

Leistungsprobleme

Mit der Funktion withSwitchTab können Sie Seitenkomponenten umbrechen, um ein wiederholtes Rendern der Seite zu vermeiden. Es ist zu beachten, dass eine Optimierung nicht möglich ist, wenn bestimmte Sonderzustände auf der Seite verwendet werden, z. B. Hooks wie useLocation . Wenn Sie es verwenden müssen, können Sie useMemo Optimierung selbst verwenden.

Problem mit dem Flackern des Etiketts

Das Etikett blinkt beim Umschalten Nr. 5. Ich habe es zunächst nicht bemerkt, aber später habe ich den Grund herausgefunden. Bitte beziehen Sie sich auf ant-design/ant-design#25343.

Die Vorschauseite kann kein dynamisches Routing verwenden

Da es auf Github Pages bereitgestellt wird und exportStatic konfiguriert ist, kann dynamisches Routing in der Form /result/:id nicht verwendet werden. Es verwendet auch die Variable isProductionEnv um Anmeldelogik und andere Probleme zu vermeiden. Wenn ein Schnittstellenfehler vorliegt, kann dieser ignoriert werden. Der Schwerpunkt liegt auf der Funktionsimplementierung_(:з　∠)_.