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를 렌더링해야 하는 경우 ProLayout에서 제공하는 footerRender 대신 SwitchTabsLayout의 footerRender 구성을 사용하여 컴포넌트가 탭 헤더를 올바르게 수정할 수 있는지 확인하세요.

코드 구조

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

???

use-switch-tabs 패키지가 출시되었으며 use-switch-tabs를 통해 리팩터링되었습니다. —— 2021.06.19

지점 설명

v4-legacy

ant design pro V4 버전의 기능 분기를 기반으로 합니다.

v2-legacy

원래 웨어하우스 이름은 ant design pro v2 plus 이며 코드는 이 지점으로 이동되었습니다. ant design pro plus 로 이름을 바꾼 후 master 브랜치의 ant design pro 에서 업데이트를 후속 조치하세요.

umi/v2.x

umi@​2.x를 기반으로 한 기능 구현입니다.

Q&A

탭 페이지 기능이 Ant Design Pro V4에서 V5로 마이그레이션되었습니다.

Pro V5는 아키텍처가 대대적으로 재구성되었으며 Umi의 플러그인 메커니즘을 통해 더 많은 구현 세부 사항이 보호됩니다. 하지만 탭 페이지의 핵심 기능을 use-switch-tabs에 아웃소싱했기 때문에 할 수 있는 작업은 많지 않습니다. 그러나 @umijs/plugin-layout 버전은 0.18.0 보다 낮을 수 없습니다. 따라서 자세한 내용은 이 토론을 참조하세요. 따라서 @umijs/preset-react 버전은 1.8.28 보다 낮을 수 없습니다. 자세한 내용은 이 업데이트를 참조하세요.

마지막으로 구현 입구가 app.ts로 변경되었습니다. 이 입구를 통해 관련 UI 구성 요소는 V4와 기본적으로 변경되지 않았습니다.

---

보충 참고 사항: V5에서는 플랫 라우팅을 사용하기 시작했고 현재 use-switch-tabs 리디렉션에 맞게 조정되었으므로 페이지 태그 지정 기능을 사용할 때 비정상적인 isSwitchTab 방지하려면 originalRoutes 올바르게 처리해야 한다는 사실에 주의하세요. 심판.

children 기반 탭 기능을 umi@​2.x에서 umi@​3.x로 업그레이드할 때 발생하는 문제

관련 토론 및 분석은 umijs/umi#4425를 참조하세요. 최종 분석을 통해 일시적으로 업그레이드할 수 없는 근본 원인을 찾았지만 PR umijs/umi#6101에서 문제가 해결되었지만 umi@​3.3.8을 사용해야 합니다. 또는 그 이상.

성능 문제

페이지가 반복적으로 렌더링되지 않도록 withSwitchTab 함수를 사용하여 페이지 구성 요소를 래핑할 수 있습니다. useLocation 과 같은 후크와 같은 일부 특수 상태가 페이지에서 사용되는 경우 최적화가 불가능하다는 점은 주목할 가치가 있습니다. 부득이하게 사용해야 한다면 직접 useMemo 최적화를 이용하면 됩니다.

라벨 깜박임 문제

#5를 전환하면 라벨이 깜박입니다. 처음에는 눈치채지 못했지만 나중에 그 이유를 알아냈습니다. ant-design/ant-design#25343을 참조하세요.

미리보기 페이지에서는 동적 라우팅을 사용할 수 없습니다.

Github Pages에 배포되고, exportStatic 구성되어 있으므로 /result/:id 형식의 동적 라우팅은 사용할 수 없습니다. 또한 로그인 논리 및 기타 문제를 방지하기 위해 isProductionEnv 변수를 사용합니다. 인터페이스 오류가 있는 경우 함수 구현에 중점을 둡니다_(:з　∠)_