ant design pro plus

Desain Semut Pro Plus

Untuk instruksi resmi, silakan merujuk ke /master/README.zh-CN

Tampilan label halaman berbasis perutean

Kompatibilitas: ^[email protected] | ^[email protected]

• Mendukung rendering perutean halaman yang bersarang
• Tersedia dua mode halaman tab
  • Berdasarkan perutean, setiap rute hanya merender satu halaman tab
  • Berdasarkan parameter perutean, nilai hash dari semua parameter setiap rute dihitung. Nilai hash yang berbeda membuat tab berbeda.
• Memperbaiki bilah tab
• Pengoperasian cepat
  • Segarkan tab - window.tabsAction.reloadTab()
  • Tutup tab - window.tabsAction.closeTab()
  • Kembali ke tab sebelumnya - window.tabsAction.goBackTab()
  • Tutup dan kembali ke tab sebelumnya - window.tabsAction.closeAndGoBackTab()
  • Dapatkan tabKey yang sesuai dengan lokasi. Jika tidak ada parameter yang dimasukkan, kembalikan tabKey yang saat ini diaktifkan - window.tabsAction.getTabKey()
  • Dengarkan peristiwa perubahan activeKey - window.tabsAction.listenActiveChange()
• reloadable , mendukung penyegaran halaman tab saat ini di bilah operasi header
• follow , konfigurasi baru dalam definisi perutean. Metode pembukaan default adalah menambahkannya ke akhir semua tab. Anda dapat mengonfigurasi atribut ini untuk membuat tab terbuka di belakang tab yang ditentukan follow (silakan merujuk ke halaman permintaan Demo)
• persistent , mendukung pemulihan status tab terakhir setelah penyegaran halaman

Melihat:

• Mengembalikan ke default hanya akan mengembalikan rute terakhir, jadi jika rute terakhir tidak ditutup, rute tersebut akan melompat berulang kali di antara dua rute. Ketika tab yang terakhir dibuka dihapus dan metode pengembalian dipanggil lagi, hanya peringatan yang akan dicetak .
• Saat Anda perlu memperbaiki header tab dan merender Footer, harap gunakan konfigurasi footerRender dari SwitchTabsLayout alih-alih footerRender yang disediakan oleh ProLayout untuk memastikan bahwa komponen dapat memperbaiki header tab dengan benar.

Struktur kode

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

???

Paket use-switch-tabs telah dirilis dan difaktorkan ulang melalui use-switch-tabs. —— 2021.06.19

Deskripsi cabang

v4-legacy

Berdasarkan cabang fitur versi ant design pro V4.

v2-legacy

Nama gudang aslinya adalah ant design pro v2 plus , dan kodenya dipindahkan ke cabang ini. Setelah mengganti namanya menjadi ant design pro plus , ikuti pembaruan di ant design pro di cabang master .

umi/v2.x

Implementasi fungsi berdasarkan umi@​2.x.

Tanya Jawab

Fungsi halaman tab dimigrasikan dari ant design pro V4 ke V5

Pro V5 telah mengalami rekonstruksi besar-besaran dalam arsitekturnya, dan lebih banyak detail implementasi dilindungi melalui mekanisme plug-in Umi. Namun, karena fungsi inti halaman tab telah dialihdayakan ke use-switch-tabs, tidak banyak pekerjaan yang harus dilakukan. Namun, perlu dicatat bahwa versi @umijs/plugin-layout tidak boleh lebih rendah dari 0.18.0 . Oleh karena itu, versi @umijs/preset-react tidak boleh lebih rendah dari 1.8.28 lihat pembaruan ini untuk detailnya.

Terakhir, pintu masuk implementasi telah diubah menjadi app.ts. Melalui pintu masuk ini, Anda dapat melihat implementasi spesifik. Komponen UI yang relevan pada dasarnya tidak berubah dibandingkan dengan V4.

---

Catatan tambahan: Karena V5 sudah mulai menggunakan perutean datar, dan use-switch-tabs saat ini telah disesuaikan untuk pengalihan, saat menggunakan fungsi penandaan halaman, harap perhatikan fakta originalRoutes perlu ditangani dengan benar untuk menghindari isSwitchTab yang tidak normal keputusan.

Masalah dalam meningkatkan fungsi tab berbasis children dari umi@​2.x menjadi umi@​3.x

Untuk diskusi dan analisis terkait, silakan merujuk ke umijs/umi#4425. Analisis akhir menemukan akar penyebab ketidakmampuan sementara untuk melakukan upgrade. PR umijs/umi#6101 memperbaiki masalah, tetapi Anda perlu menggunakan umi@​3.3.8 atau lebih tinggi.

Masalah kinerja

Anda dapat menggunakan fungsi withSwitchTab untuk menggabungkan komponen halaman guna menghindari rendering halaman berulang kali. Perlu dicatat bahwa jika beberapa status khusus digunakan di halaman, seperti kait seperti useLocation , pengoptimalan tidak akan dapat dilakukan. Jika Anda harus menggunakannya, Anda dapat menggunakan optimasi useMemo sendiri.

Masalah label berkedip

Label akan berkedip ketika mengganti #5. Awalnya saya tidak menyadarinya, tetapi kemudian saya mengetahui alasannya.

Halaman pratinjau tidak dapat menggunakan perutean dinamis

Karena diterapkan ke Halaman Github dan exportStatic dikonfigurasi, perutean dinamis dalam bentuk /result/:id tidak dapat digunakan. Ia juga menggunakan variabel isProductionEnv untuk menghindari logika login dan masalah lainnya. Jika ada kesalahan antarmuka, fokusnya adalah pada implementasi fungsi_(:з　∠)_.