chore: bump notify on second time (#38665)

* chore: bump notify on second time

* docs: adjust notify

.dumi/theme/slots/Footer/AdditionalInfo.tsx

@@ -0,0 +1,194 @@
+import * as React from 'react';
+import { Modal, Button, Typography, Row, Col, Tour } from 'antd';
+import { SmileOutlined } from '@ant-design/icons';
+import { isLocalStorageNameSupported, ping } from '../../utils';
+import useLocale from '../../../hooks/useLocale';
+import useSiteToken from '../../../hooks/useSiteToken';
+
+const locales = {
+  cn: {
+    title: '🎉🎉🎉 Ant Design 5.0 发布！ 🎉🎉🎉',
+    ok: '知道了',
+  },
+  en: {
+    title: '🎉🎉🎉 Ant Design 5.0 is released! 🎉🎉🎉',
+    ok: 'Got it',
+  },
+};
+
+const V5_NOTIFICATION = 'antd@4.0.0-notification-sent';
+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);
+}
+
+export default function InfoNewVersion() {
+  return null;
+
+  const [locale, lang] = useLocale(locales);
+  const [notify, setNotify] = React.useState<null | boolean>(null);
+
+  const { token } = useSiteToken();
+
+  function onClose() {
+    setNotify(false);
+    localStorage.setItem(V5_NOTIFICATION, 'true');
+  }
+
+  React.useEffect(() => {
+    if (isLocalStorageNameSupported()) {
+      // 大版本发布后全局弹窗提示
+      //   1. 点击『知道了』之后不再提示
+      //   2. 超过截止日期后不再提示
+      if (
+        localStorage.getItem(V5_NOTIFICATION) !== 'true' &&
+        Date.now() < new Date('2022/12/31').getTime()
+      ) {
+        setNotify(true);
+        return;
+      }
+    }
+
+    setNotify(false);
+  }, []);
+
+  React.useEffect(() => {
+    const timeout = ping((status) => {
+      if (status !== 'timeout' && status !== 'error') {
+        if (
+          // process.env.NODE_ENV === 'production' &&
+          notify === false &&
+          window.location.host !== 'ant-design.antgroup.com' &&
+          shouldOpenAntdMirrorModal()
+        ) {
+          Modal.confirm({
+            title: '提示',
+            content: '内网用户推荐访问国内镜像以获得极速体验～',
+            okText: '🚀 立刻前往',
+            cancelText: '不再弹出',
+            closable: true,
+            onOk() {
+              window.open('https://ant-design.antgroup.com', '_self');
+              disableAntdMirrorModal();
+            },
+            onCancel() {
+              disableAntdMirrorModal();
+            },
+          });
+        }
+      }
+    });
+
+    return clearTimeout(timeout);
+  }, [notify]);
+
+  return (
+    <>
+      <Tour
+        open={!!notify}
+        mask={false}
+        steps={[
+          {
+            title: locale.title,
+            target: () => document.querySelector('#versionSelector')!,
+            description: (
+              <Typography style={{ marginTop: token.marginXS }}>
+                {lang === 'cn' ? (
+                  <>
+                    <p>
+                      点击{' '}
+                      <Typography.Link href="/changelog-cn" onClick={onClose}>
+                        此处查看
+                      </Typography.Link>{' '}
+                      完整更新日志。
+                    </p>
+                    <p>
+                      如果你需要访问 v4 版本的文档，请点击{' '}
+                      <Typography.Link href="https://4x.ant.design/" onClick={onClose}>
+                        此处查看
+                      </Typography.Link>
+                      。
+                    </p>
+                  </>
+                ) : (
+                  <>
+                    <p>
+                      Click{' '}
+                      <Typography.Link href="/changelog" onClick={onClose}>
+                        here
+                      </Typography.Link>{' '}
+                      to view full changelog.
+                    </p>
+                    <p>
+                      If you want to check v4 documentation, please click{' '}
+                      <Typography.Link href="https://4x.ant.design/" onClick={onClose}>
+                        here
+                      </Typography.Link>
+                      .
+                    </p>
+                  </>
+                )}
+              </Typography>
+            ),
+          },
+        ]}
+      />
+      {/* <Modal
+        open={!!notify}
+        title={locale.title}
+        closable={false}
+        footer={<Button onClick={onClose}>{locale.ok}</Button>}
+      >
+        <Row gutter={16}>
+          <Col flex="none">
+            <SmileOutlined style={{ fontSize: 72, color: token.colorSuccess }} />
+          </Col>
+          <Col flex="auto">
+            <Typography style={{ marginTop: token.marginXS }}>
+              {lang === 'cn' ? (
+                <>
+                  <p>
+                    点击{' '}
+                    <Typography.Link href="/changelog-cn" onClick={onClose}>
+                      此处查看
+                    </Typography.Link>{' '}
+                    完整更新日志。
+                  </p>
+                  <p>
+                    如果你需要访问 v4 版本的文档，请点击{' '}
+                    <Typography.Link href="https://4x.ant.design/" onClick={onClose}>
+                      此处查看
+                    </Typography.Link>
+                    。
+                  </p>
+                </>
+              ) : (
+                <>
+                  <p>
+                    Click{' '}
+                    <Typography.Link href="/changelog" onClick={onClose}>
+                      here
+                    </Typography.Link>{' '}
+                    to view full changelog.
+                  </p>
+                  <p>
+                    If you want to check v4 documentation, please click{' '}
+                    <Typography.Link href="https://4x.ant.design/" onClick={onClose}>
+                      here
+                    </Typography.Link>
+                    .
+                  </p>
+                </>
+              )}
+            </Typography>
+          </Col>
+        </Row>
+      </Modal> */}
+    </>
+  );
+}

.dumi/theme/slots/Footer/InfoNewVersion.tsx

@@ -1,99 +0,0 @@
-import * as React from 'react';
-import { Modal, Button, Typography, Row, Col } from 'antd';
-import { SmileOutlined } from '@ant-design/icons';
-import { isLocalStorageNameSupported } from '../../../theme/utils';
-import useLocale from '../../../hooks/useLocale';
-import useSiteToken from '../../../hooks/useSiteToken';
-
-const locales = {
-  cn: {
-    title: '🎉🎉🎉 Ant Design 5.0 发布！ 🎉🎉🎉',
-    ok: '知道了',
-  },
-  en: {
-    title: '🎉🎉🎉 Ant Design 5.0 is released! 🎉🎉🎉',
-    ok: 'Got it',
-  },
-};
-
-export default function InfoNewVersion() {
-  const [locale, lang] = useLocale(locales);
-  const [notify, setNotify] = React.useState(false);
-
-  const { token } = useSiteToken();
-
-  function onClose() {
-    setNotify(false);
-    localStorage.setItem('antd@4.0.0-notification-sent', 'true');
-  }
-
-  React.useEffect(() => {
-    if (!isLocalStorageNameSupported()) {
-      return;
-    }
-
-    // 大版本发布后全局弹窗提示
-    //   1. 点击『知道了』之后不再提示
-    //   2. 超过截止日期后不再提示
-    if (
-      localStorage.getItem('antd@4.0.0-notification-sent') !== 'true' &&
-      Date.now() < new Date('2022/12/31').getTime()
-    ) {
-      setNotify(true);
-    }
-  }, []);
-
-  return (
-    <Modal
-      open={notify}
-      title={locale.title}
-      closable={false}
-      footer={<Button onClick={onClose}>{locale.ok}</Button>}
-    >
-      <Row gutter={16}>
-        {/* <Col flex="none">
-          <SmileOutlined style={{ fontSize: 72, color: token.colorSuccess }} />
-        </Col> */}
-        <Col flex="auto">
-          <Typography style={{ marginTop: token.marginXS }}>
-            {lang === 'cn' ? (
-              <>
-                <p>
-                  点击{' '}
-                  <Typography.Link href="/changelog-cn" onClick={onClose}>
-                    此处查看
-                  </Typography.Link>{' '}
-                  完整更新日志。
-                </p>
-                <p>
-                  如果你需要访问 v4 版本的文档，请点击{' '}
-                  <Typography.Link href="https://4x.ant.design/" onClick={onClose}>
-                    此处查看
-                  </Typography.Link>
-                  。
-                </p>
-              </>
-            ) : (
-              <>
-                <p>
-                  Click{' '}
-                  <Typography.Link href="/changelog" onClick={onClose}>
-                    here
-                  </Typography.Link>{' '}
-                  to view full changelog.
-                </p>
-                <p>
-                  If you want to check v4 documentation, please click{' '}
-                  <Typography.Link href="https://4x.ant.design/" onClick={onClose}>
-                    here
-                  </Typography.Link>
-                  .
-                </p>
-              </>
-            )}
-          </Typography>
-        </Col>
-      </Row>
-    </Modal>
-  );
-}

.dumi/theme/slots/Footer/index.tsx

@@ -23,7 +23,7 @@ import useLocale from '../../../hooks/useLocale';
 import useSiteToken from '../../../hooks/useSiteToken';
 import { TinyColor } from '@ctrl/tinycolor';
 import getAlphaColor from 'antd/es/theme/util/getAlphaColor';
-import InfoNewVersion from './InfoNewVersion';
+import AdditionalInfo from './AdditionalInfo';
 
 const locales = {
   cn: {
@@ -369,7 +369,7 @@ const Footer = () => {
           </>
         }
       />
-      <InfoNewVersion />
+      <AdditionalInfo />
     </>
   );
 };

.dumi/theme/slots/Header/index.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useContext, useEffect, useMemo, useRef, useState }
 import { FormattedMessage, useIntl } from 'dumi';
 import DumiSearchBar from 'dumi/theme-default/slots/SearchBar';
 import classNames from 'classnames';
-import { Button, Col, Modal, Popover, Row, Select } from 'antd';
+import { Button, Col, Modal, Popover, Row, Select, Typography } from 'antd';
 import { MenuOutlined } from '@ant-design/icons';
 import canUseDom from 'rc-util/lib/Dom/canUseDom';
 import type { DirectionType } from 'antd/es/config-provider';
@@ -27,6 +27,17 @@ const { Option } = Select;
 
 const antdVersion: string = packageJson.version;
 
+const locales = {
+  cn: {
+    title: '🎉🎉🎉 Ant Design 5.0 发布！ 🎉🎉🎉',
+    ok: '知道了',
+  },
+  en: {
+    title: '🎉🎉🎉 Ant Design 5.0 is released! 🎉🎉🎉',
+    ok: 'Got it',
+  },
+};
+
 const useStyle = () => {
   const { token } = useSiteToken();
   const searchIconColor = '#ced4d9';
@@ -44,7 +55,7 @@ const useStyle = () => {
       }
 
       .dumi-default-search-bar {
-        border-inline-start: 1px solid rgba(0,0,0,.06);
+        border-inline-start: 1px solid rgba(0, 0, 0, 0.06);
 
         > svg {
           width: 14px;
@@ -135,6 +146,7 @@ const triggerDocSearchImport = () => {
   });
 };
 
+const V5_NOTIFICATION = 'antd@4.0.0-notification-sent';
 const SHOULD_OPEN_ANT_DESIGN_MIRROR_MODAL = 'ANT_DESIGN_DO_NOT_OPEN_MIRROR_MODAL';
 
 function disableAntdMirrorModal() {
@@ -152,11 +164,38 @@ interface HeaderState {
   showTechUIButton: boolean;
 }
 
+// ================================= Header =================================
 const Header: React.FC<HeaderProps> = (props) => {
   const intl = useIntl();
   const { changeDirection } = props;
-  const [, lang] = useLocale();
   const [isClient, setIsClient] = React.useState(false);
+  const [locale, lang] = useLocale(locales);
+  const { token } = useSiteToken();
+  const [notify, setNotify] = React.useState<null | boolean>(null);
+
+  // ========================= 发布通知 开始 =========================
+  React.useEffect(() => {
+    if (utils.isLocalStorageNameSupported()) {
+      // 大版本发布后全局弹窗提示
+      //   1. 点击『知道了』之后不再提示
+      //   2. 超过截止日期后不再提示
+      if (
+        localStorage.getItem(V5_NOTIFICATION) !== 'true' &&
+        Date.now() < new Date('2022/12/31').getTime()
+      ) {
+        setNotify(true);
+        return;
+      }
+    }
+
+    setNotify(false);
+  }, []);
+
+  function onClose() {
+    setNotify(false);
+    localStorage.setItem(V5_NOTIFICATION, 'true');
+  }
+  // ========================= 发布通知 结束 =========================
 
   const themeConfig = getThemeConfig();
   const [headerState, setHeaderState] = useState<HeaderState>({
@@ -204,7 +243,7 @@ const Header: React.FC<HeaderProps> = (props) => {
       if (status !== 'timeout' && status !== 'error') {
         setHeaderState((prev) => ({ ...prev, showTechUIButton: true }));
         if (
-          process.env.NODE_ENV === 'production' &&
+          // process.env.NODE_ENV === 'production' &&
           window.location.host !== 'ant-design.antgroup.com' &&
           shouldOpenAntdMirrorModal()
         ) {
@@ -214,6 +253,7 @@ const Header: React.FC<HeaderProps> = (props) => {
             okText: '🚀 立刻前往',
             cancelText: '不再弹出',
             closable: true,
+            zIndex: 99999,
             onOk() {
               window.open('https://ant-design.antgroup.com', '_self');
               disableAntdMirrorModal();
@@ -320,17 +360,56 @@ const Header: React.FC<HeaderProps> = (props) => {
 
   let menu: (React.ReactElement | null)[] = [
     navigationNode,
-    <Select
+    <Popover
-      key="version"
+      open={!!notify}
-      className="version"
+      title={locale.title}
-      size="small"
+      content={
-      defaultValue={antdVersion}
+        <Typography style={{ marginTop: token.marginXS }}>
-      onChange={handleVersionChange}
+          {lang === 'cn' ? (
-      dropdownStyle={getDropdownStyle}
+            <>
-      getPopupContainer={(trigger) => trigger.parentNode}
+              <div>
+                如果你发现任何新官网的问题，欢迎到{' '}
+                <Typography.Link
+                  target="_blank"
+                  href="https://github.com/ant-design/ant-design/issues/38463"
+                >
+                  Github Issue
+                </Typography.Link>{' '}
+                反馈。
+              </div>
+              <div>如果你需要查看 v4 文档，请点击上侧切换。</div>
+            </>
+          ) : (
+            <>
+              <div>
+                If you find any official site problem. Please feel free to report on{' '}
+                <Typography.Link
+                  target="_blank"
+                  href="https://github.com/ant-design/ant-design/issues/38463"
+                >
+                  Github Issue
+                </Typography.Link>
+                .
+              </div>
+              <p>Click above Select to switch to v4 docs.</p>
+            </>
+          )}
+        </Typography>
+      }
     >
-      {versionOptions}
+      <Select
-    </Select>,
+        key="version"
+        className="version"
+        size="small"
+        defaultValue={antdVersion}
+        onChange={handleVersionChange}
+        dropdownStyle={getDropdownStyle}
+        getPopupContainer={(trigger) => trigger.parentNode}
+        onClick={onClose}
+      >
+        {versionOptions}
+      </Select>
+    </Popover>,
     <Button size="small" onClick={onLangChange} css={style.headerButton} key="lang-button">
       <FormattedMessage id="app.header.lang" />
     </Button>,