Ant-design-pro: 🧐[问题]请问一下pro是基于什么考虑不使用tabs多标签模式？

[birdycn]

搜索issue得知跟内部使用设计规范相违背，因为最近参考了很多erp产品，大部分是有支持tabs多标签模式的，但蚂蚁经验肯定更加丰富，但还是希望能够解惑一下，使用tabs模式的优劣之处？

@chenshuai2144

[afc163]

个人的理解 tabs 模式无法（不适合）进行 url 的分享，目前使用这种交互的成熟的 web 产品形态主要是网页版 IM、邮件系统等，更像是针对桌面端产品的设计模式而非 web 产品。我们自己内部产品主要是金融科技的中后台和云产品，没有这样的需求。而且浏览器本身有 tabs，做到网站内部显得很重。

https://github.com/ant-design/ant-design-pro/issues/220

[Lzw2016]

我实现了一个

<TopSideMenuLayout
  {...otherProps}
  // 自定义样式扩展
  headerClassName={styles.header}
  globalHeaderMenuClassName={styles.globalHeaderMenu}
  globalHeaderMenuProps={{
    theme: "light",
  }}
  siderMenuTheme="light"
  pageContentMultiTabNavClassName={styles.pageContentMultiTabNav}
  pageContentLeftClassName={styles.pageContentLeft}
  pageContentRightClassName={styles.pageContentRight}

  // 全局配置
  htmlTitleSuffix="Ant-Layout"
  hideGlobalFooter={false}
  headerHeight={64}
  siderMenuWidth={200}
  enableLocale={false}
  defaultOpen={true}
  menuIconScriptUrl="//at.alicdn.com/t/xxxxxx.js"
  breadcrumbRoutesInterceptor={(layoutMenuData, routes) => (routes || []).filter((value, index) => index >= 1)}

  // 头部区域
  globalHeaderLogo={<img src={logo} alt="logo" style={{ width: 32 }} />}
  globalHeaderTitle={<div className={styles.globalHeaderTitle}>Ant-Layout</div>}
  // globalHeaderOnlogoClick={() => { }}

  // 侧边栏
  siderMenuEnableSearchMenu={false}
  siderMenuBeautifyScrollbar={true}
  siderMenuAutoHideScrollbar={true}

  // 内容区域
  pageContentPageHeaderModel="AntPageHeader"
  pageContentEnablePageHeader={false}
  pageContentShowHomeButton={true}
  pageContentShowMoreButton={true}
  pageContentBeautifyScrollbar={true}
  pageContentAutoHideScrollbar={false}

  // 页脚区域
  globalFooterLinks={[]}
  globalFooterCopyright={<>Copyright <CopyrightCircleOutlined /> 2019 武汉XX科技有限公司 鄂ICP备19029XXX号</>}
>
  {children}
</TopSideMenuLayout>

[hegphegp]

@Lzw2016 你实现的多tabs页功能对ant-design-pro项目原来的布局改动大吗？

[Fengly0503]

公司项目也有多标签功能的需求，看了各位的实现感觉还是不太满足自己的需求，就自己写了一个基于Ant design pro 4 + 路由拦截的方案，解决了一些标签切换、关闭、路由关联、相同类型不同数据详情页、url直接访问指定标签等问题，有兴趣的兄弟可以瞅瞅 多标签实现地址