ant design pro plus

แอนท์ ดีไซน์ โปร พลัส

สำหรับคำแนะนำอย่างเป็นทางการ โปรดดูที่ /master/README.zh-CN

การแสดงป้ายกำกับหน้าตามเส้นทาง

ความเข้ากันได้: ^[email protected] | ^[email protected]

• รองรับการเรนเดอร์การกำหนดเส้นทางแบบซ้อนของเพจ
• มีสองโหมดหน้าแท็บให้เลือก
  • ขึ้นอยู่กับการกำหนดเส้นทาง แต่ละเส้นทางจะแสดงเพียงหน้าแท็บเดียวเท่านั้น
  • ขึ้นอยู่กับพารามิเตอร์การกำหนดเส้นทาง ค่าแฮชของพารามิเตอร์ทั้งหมดของแต่ละเส้นทางจะถูกคำนวณ
• แถบแท็บคงที่
• การดำเนินการที่รวดเร็ว
  • รีเฟรชแท็บ - window.tabsAction.reloadTab()
  • ปิดแท็บ - window.tabsAction.closeTab()
  • กลับไปที่แท็บก่อนหน้า - window.tabsAction.goBackTab()
  • ปิดและกลับสู่แท็บก่อนหน้า - window.tabsAction.closeAndGoBackTab()
  • รับ tabKey ที่สอดคล้องกับตำแหน่ง หากไม่ได้ป้อนพารามิเตอร์ ให้ส่งคืน tabKey ที่เปิดใช้งานอยู่ในปัจจุบัน - window.tabsAction.getTabKey()
  • ฟังเหตุการณ์การเปลี่ยนแปลง activeKey - window.tabsAction.listenActiveChange()
• reloadable รองรับการรีเฟรชหน้าแท็บปัจจุบันในแถบการทำงานของส่วนหัว
• follow ซึ่งเป็นการกำหนดค่าใหม่ในการกำหนดเส้นทาง วิธีการเปิดเริ่มต้นคือการเพิ่มไปที่ส่วนท้ายของแท็บทั้งหมด คุณสามารถกำหนดค่าคุณลักษณะนี้เพื่อให้แท็บเปิดอยู่ด้านหลังแท็บที่ระบุ follow (โปรดดูที่หน้าแบบสอบถาม การสาธิต)
• persistent รองรับการกู้คืนสถานะแท็บสุดท้ายหลังจากการรีเฟรชหน้า

สังเกต:

• การกลับไปสู่ค่าเริ่มต้นจะส่งคืนเส้นทางสุดท้ายเท่านั้น ดังนั้นหากเส้นทางสุดท้ายไม่ได้ปิดอยู่ มันจะข้ามซ้ำไปมาระหว่างสองเส้นทาง เมื่อแท็บที่เปิดล่าสุดถูกลบและเรียกวิธีการส่งคืนอีกครั้ง คำเตือนจะถูกพิมพ์เท่านั้น .
• เมื่อคุณต้องการแก้ไขส่วนหัวของแท็บและเรนเดอร์ Footer โปรดใช้การกำหนดค่า footerRender ของ SwitchTabsLayout แทน footerRender ที่ ProLayout จัดเตรียมไว้ให้ เพื่อให้แน่ใจว่าส่วนประกอบสามารถแก้ไขส่วนหัวของแท็บได้อย่างเหมาะสม

โครงสร้างรหัส

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

-

แพ็คเกจ use-switch-tab ได้รับการเผยแพร่และปรับโครงสร้างใหม่ผ่าน use-switch-tabs —— 2021.06.19

คำอธิบายสาขา

v4-legacy

อิงตามสาขาฟีเจอร์ของเวอร์ชัน ant design pro V4

v2-legacy

ชื่อโกดังเดิมคือ ant design pro v2 plus และโค้ดถูกย้ายไปที่สาขานี้ หลังจากเปลี่ยนชื่อเป็น ant design pro plus ให้ติดตามการอัปเดตใน ant design pro บนสาขา master

umi/v2.x

การใช้งานฟังก์ชันตาม umi@​2.x

ถามตอบ

ฟังก์ชันหน้าแท็บถูกย้ายจาก ant design pro V4 ไปเป็น V5

Pro V5 ได้รับการบูรณะครั้งใหญ่ในสถาปัตยกรรม และรายละเอียดการใช้งานเพิ่มเติมได้รับการปกป้องผ่านกลไกปลั๊กอินของ Umi อย่างไรก็ตาม เนื่องจากฟังก์ชันหลักของหน้าแท็บได้รับการว่าจ้างจากภายนอกให้ใช้งานแท็บสลับ จึงยังมีงานที่ต้องทำไม่มากนัก อย่างไรก็ตาม เป็นที่น่าสังเกตว่าเวอร์ชันของ @umijs/plugin-layout ต้องไม่ต่ำกว่า 0.18.0 ดูการสนทนานี้สำหรับรายละเอียด ดังนั้น เวอร์ชันของ @umijs/preset-react ต้องไม่ต่ำกว่า 1.8.28 ดูการอัปเดตนี้เพื่อดูรายละเอียด

ในที่สุด ทางเข้าการใช้งานก็เปลี่ยนเป็น app.ts คุณสามารถดูการใช้งานเฉพาะได้ โดยพื้นฐานแล้วไม่มีการเปลี่ยนแปลงเมื่อเทียบกับ V4

---

หมายเหตุเพิ่มเติม: เนื่องจาก V5 ได้เริ่มใช้การกำหนดเส้นทางแบบเรียบ และ use-switch-tabs ปัจจุบันได้รับการปรับให้เปลี่ยนเส้นทาง เมื่อใช้ฟังก์ชันการแท็กหน้า ให้ใส่ใจกับข้อเท็จจริง originalRoutes จำเป็นต้องได้รับการจัดการอย่างเหมาะสมเพื่อหลีกเลี่ยงการตัดสิน isSwitchTab ที่ผิดปกติ .

ปัญหาในการอัพเกรดฟังก์ชันแท็บแบบอิง children จาก umi@​2.x เป็น umi@​3.x

สำหรับการสนทนาและการวิเคราะห์ที่เกี่ยวข้อง โปรดดูที่ umijs/umi#4425 การวิเคราะห์ขั้นสุดท้ายพบสาเหตุของการไม่สามารถอัปเกรดได้ชั่วคราว PR umijs/umi#6101 แก้ไขปัญหา แต่คุณจำเป็นต้องใช้ umi@​3.3.8 หรือสูงกว่า

ปัญหาด้านประสิทธิภาพ

คุณสามารถใช้ฟังก์ชัน withSwitchTab เพื่อรวมองค์ประกอบของหน้าเพื่อหลีกเลี่ยงการแสดงผลซ้ำของหน้า เป็นที่น่าสังเกตว่าหากใช้สถานะพิเศษบางอย่างในเพจ เช่น hooks เช่น useLocation การปรับให้เหมาะสมจะไม่สามารถทำได้ หากจำเป็นต้องใช้ก็สามารถใช้การเพิ่มประสิทธิภาพ useMemo ได้ด้วยตัวเอง

ปัญหาฉลากกะพริบ

ป้ายกำกับจะกะพริบเมื่อเปลี่ยน #5 ตอนแรกฉันไม่ได้สังเกต แต่ต่อมาฉันพบเหตุผล โปรดดูที่ ant-design/ant-design#25343

หน้าแสดงตัวอย่างไม่สามารถใช้การกำหนดเส้นทางแบบไดนามิกได้

เนื่องจากมีการใช้งานกับ Github Pages และมีการกำหนด exportStatic จึงไม่สามารถใช้การกำหนดเส้นทางไดนามิกในรูปแบบของ /result/:id ได้ นอกจากนี้ยังใช้ตัวแปร isProductionEnv เพื่อหลีกเลี่ยงตรรกะการเข้าสู่ระบบและปัญหาอื่นๆ หากมีข้อผิดพลาดของอินเทอร์เฟซ ก็สามารถละเว้นได้ โดยจะเน้นที่การใช้งานฟังก์ชัน_(:з　∠)_