docs: update mirror link (#35424)

* docs: update mirror link * feat: add modal * feat: add icon * chore: code clean * feat: text * fix: cancel btn
ant-design · May 7, 2022 · 11e2ce6 · 11e2ce6
1 parent 9a59018
commit 11e2ce6
Show file tree

Hide file tree

Showing 3 changed files with 217 additions and 103 deletions.
diff --git a/site/theme/template/Layout/Header/More.tsx b/site/theme/template/Layout/Header/More.tsx
@@ -1,69 +1,90 @@
 import * as React from 'react';
+import type { MenuProps } from 'antd';
 import { Dropdown, Menu, Button } from 'antd';
 import { FormattedMessage } from 'react-intl';
 import { DownOutlined } from '@ant-design/icons';
 import type { SharedProps } from './interface';
 
 const smallStyle = { fontSize: 12, color: '#777', marginLeft: '0.3em' };
 
-export function getEcosystemGroup(): React.ReactNode {
+export function getEcosystemGroup(): MenuProps['items'] {
   return [
-    <Menu.Item key="charts">
-      <a
-        href="https://charts.ant.design"
-        className="header-link"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <FormattedMessage id="app.header.menu.charts" />
-      </a>
-    </Menu.Item>,
-    <Menu.Item key="pro">
-      <a
-        href="http://pro.ant.design"
-        className="header-link"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <FormattedMessage id="app.header.menu.pro.v4" />
-      </a>
-    </Menu.Item>,
-    <Menu.Item key="procomponents">
-      <a
-        href="http://procomponents.ant.design"
-        className="header-link"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <FormattedMessage id="app.header.menu.pro.components" />
-      </a>
-    </Menu.Item>,
-    <Menu.Item key="ng">
-      <a
-        href="http://ng.ant.design"
-        className="header-link"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        Ant Design of Angular
-        <span style={smallStyle}>
-          (<FormattedMessage id="app.implementation.community" />)
-        </span>
-      </a>
-    </Menu.Item>,
-    <Menu.Item key="vue">
-      <a href="http://antdv.com" className="header-link" target="_blank" rel="noopener noreferrer">
-        Ant Design of Vue
-        <span style={smallStyle}>
-          (<FormattedMessage id="app.implementation.community" />)
-        </span>
-      </a>
-    </Menu.Item>,
+    {
+      label: (
+        <a
+          href="https://charts.ant.design"
+          className="header-link"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <FormattedMessage id="app.header.menu.charts" />
+        </a>
+      ),
+      key: 'charts',
+    },
+    {
+      label: (
+        <a
+          href="http://pro.ant.design"
+          className="header-link"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <FormattedMessage id="app.header.menu.pro.v4" />
+        </a>
+      ),
+      key: 'pro',
+    },
+    {
+      label: (
+        <a
+          href="http://procomponents.ant.design"
+          className="header-link"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <FormattedMessage id="app.header.menu.pro.components" />
+        </a>
+      ),
+      key: 'procomponents',
+    },
+    {
+      label: (
+        <a
+          href="http://ng.ant.design"
+          className="header-link"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Ant Design of Angular
+          <span style={smallStyle}>
+            (<FormattedMessage id="app.implementation.community" />)
+          </span>
+        </a>
+      ),
+      key: 'ng',
+    },
+    {
+      label: (
+        <a
+          href="http://antdv.com"
+          className="header-link"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Ant Design of Vue
+          <span style={smallStyle}>
+            (<FormattedMessage id="app.implementation.community" />)
+          </span>
+        </a>
+      ),
+      key: 'vue',
+    },
   ];
 }
 
 export default (props: SharedProps) => {
-  const menu = <Menu>{getEcosystemGroup()}</Menu>;
+  const menu = <Menu items={getEcosystemGroup()} />;
   const downstyle = props.isRTL ? '-1px 2px 0 0' : '-1px 0 0 2px';
   return (
     <Dropdown overlay={menu} placement="bottomRight">

diff --git a/site/theme/template/Layout/Header/Navigation.tsx b/site/theme/template/Layout/Header/Navigation.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'bisheng/router';
+import type { MenuProps } from 'antd';
 import { MenuOutlined } from '@ant-design/icons';
 import { Menu } from 'antd';
 import { getEcosystemGroup } from './More';
@@ -43,73 +44,135 @@ export default ({
     activeMenuItem = 'docs/resources';
   }
 
-  let additional: React.ReactNode = null;
-  const additionalItems = [
-    <Menu.Item key="github">
-      <a href="https://github.com/ant-design/ant-design" target="_blank" rel="noopener noreferrer">
-        Github
-      </a>
-    </Menu.Item>,
-    <Menu.Item key="switch-lang" onClick={onLangChange}>
-      <FormattedMessage id="app.header.lang" />
-    </Menu.Item>,
-    <Menu.Item key="switch-direction" onClick={onDirectionChange}>
-      {directionText}
-    </Menu.Item>,
-    getEcosystemGroup(),
+  let additional: MenuProps['items'];
+
+  const additionalItems: MenuProps['items'] = [
+    {
+      label: (
+        <a
+          href="https://github.com/ant-design/ant-design"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Github
+        </a>
+      ),
+      key: 'github',
+    },
+    {
+      label: <FormattedMessage id="app.header.lang" />,
+      onClick: onLangChange,
+      key: 'switch-lang',
+    },
+    {
+      label: directionText,
+      onClick: onDirectionChange,
+      key: 'switch-direction',
+    },
+    ...(getEcosystemGroup() ?? []),
   ];
 
   if (isMobile) {
     additional = additionalItems;
   } else if (responsive === 'crowded') {
-    additional = (
-      <Menu.SubMenu key="additional" title={<MenuOutlined />}>
-        {additionalItems}
-      </Menu.SubMenu>
-    );
+    additional = [
+      {
+        label: <MenuOutlined />,
+        key: 'additional',
+        children: [...additionalItems],
+      },
+    ];
   }
 
-  return (
-    <Menu
-      className={classNames('menu-site')}
-      mode={menuMode}
-      selectedKeys={[activeMenuItem]}
-      id="nav"
-      disabledOverflow
-    >
-      <Menu.Item key="docs/spec">
+  const items: MenuProps['items'] = [
+    {
+      label: (
         <Link to={utils.getLocalizedPathname('/docs/spec/introduce', isZhCN, location.query)}>
           <FormattedMessage id="app.header.menu.spec" />
         </Link>
-      </Menu.Item>
-      <Menu.Item key="docs/react">
+      ),
+      key: 'docs/spec',
+    },
+    {
+      label: (
         <Link to={utils.getLocalizedPathname('/docs/react/introduce', isZhCN, location.query)}>
           <FormattedMessage id="app.header.menu.documentation" />
         </Link>
-      </Menu.Item>
-      <Menu.Item key="components">
+      ),
+      key: 'docs/react',
+    },
+    {
+      label: (
         <Link to={utils.getLocalizedPathname('/components/overview/', isZhCN, location.query)}>
           <FormattedMessage id="app.header.menu.components" />
         </Link>
-      </Menu.Item>
-      <Menu.Item key="docs/resources">
+      ),
+      key: 'components',
+    },
+    {
+      label: (
         <Link to={utils.getLocalizedPathname('/docs/resources', isZhCN, location.query)}>
           <FormattedMessage id="app.header.menu.resource" />
         </Link>
-      </Menu.Item>
-      {showTechUIButton && (
-        <Menu.Item key="tech-ui">
-          <a href="https://techui.alipay.com" target="__blank" rel="noopener noreferrer">
-            TechUI
-          </a>
-        </Menu.Item>
-      )}
-      {isZhCN && typeof window !== 'undefined' && window.location.host.indexOf('gitee') === -1 && (
-        <Menu.Item key="mirror">
-          <a href="https://ant-design.gitee.io">国内镜像</a>
-        </Menu.Item>
-      )}
-      {additional}
-    </Menu>
+      ),
+      key: 'docs/resources',
+    },
+    showTechUIButton
+      ? {
+          label: (
+            <a href="https://techui.alipay.com" target="__blank" rel="noopener noreferrer">
+              TechUI
+            </a>
+          ),
+          key: 'tech-ui',
+        }
+      : null,
+    isZhCN &&
+    typeof window !== 'undefined' &&
+    !window.location.href.includes('ant-design.antgroup.com') &&
+    !window.location.href.includes('ant-design.gitee.io')
+      ? {
+          label: '国内镜像',
+          key: 'mirror',
+          children: [
+            {
+              label: <a href="https://ant-design.antgroup.com">官方镜像</a>,
+              icon: (
+                <img
+                  alt="logo"
+                  src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
+                  width={16}
+                  style={{ verticalAlign: 'text-bottom' }}
+                />
+              ),
+              key: 'antgroup',
+            },
+            {
+              label: <a href="https://ant-design.gitee.io">Gitee 镜像</a>,
+              icon: (
+                <img
+                  alt="gitee"
+                  src="https://gw.alipayobjects.com/zos/bmw-prod/9e91e124-9bab-4113-b500-301412f6b370.svg"
+                  width={16}
+                  style={{ verticalAlign: 'text-bottom' }}
+                />
+              ),
+              key: 'gitee',
+            },
+          ],
+        }
+      : null,
+    ...(additional ?? []),
+  ];
+
+  return (
+    <Menu
+      className={classNames('menu-site')}
+      mode={menuMode}
+      selectedKeys={[activeMenuItem]}
+      id="nav"
+      disabledOverflow
+      items={items}
+    />
   );
 };
diff --git a/site/theme/template/Layout/Header/index.tsx b/site/theme/template/Layout/Header/index.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import classNames from 'classnames';
+import { Select, Row, Col, Popover, Button, Modal } from 'antd';
 import { MenuOutlined } from '@ant-design/icons';
-import { Select, Row, Col, Popover, Button } from 'antd';
 import canUseDom from 'rc-util/lib/Dom/canUseDom';
 import * as utils from '../../utils';
 import packageJson from '../../../../../package.json';
@@ -71,6 +71,16 @@ function initDocSearch({ isZhCN, router }: { isZhCN: boolean; router: any }) {
   });
 }
 
+const SHOULD_OPEN_ANT_DESIGN_MIRROR_MODAL = 'ANT_DESIGN_DO_NOT_OPEN_MIRROR_MODAL';
+
+function disableAntdMirrorModal() {
+  window.localStorage.setItem(SHOULD_OPEN_ANT_DESIGN_MIRROR_MODAL, 'true');
+}
+
+function shouldOpenAntdMirrorModal() {
+  return !window.localStorage.getItem(SHOULD_OPEN_ANT_DESIGN_MIRROR_MODAL);
+}
+
 interface HeaderState {
   menuVisible: boolean;
   windowWidth: number;
@@ -109,6 +119,26 @@ class Header extends React.Component<HeaderProps, HeaderState> {
         this.setState({
           showTechUIButton: true,
         });
+        if (
+          process.env.NODE_ENV === 'production' &&
+          !window.location.href.includes('ant-design.antgroup.com') &&
+          shouldOpenAntdMirrorModal()
+        ) {
+          Modal.confirm({
+            title: '提示',
+            content: '内网用户推荐访问国内镜像以获得极速体验～',
+            okText: '🚀 立刻前往',
+            onOk: () => {
+              window.open('https://ant-design.antgroup.com', '_self');
+              disableAntdMirrorModal();
+            },
+            cancelText: '不再弹出',
+            onCancel: () => {
+              disableAntdMirrorModal();
+            },
+            closable: true,
+          });
+        }
       }
     });
   }