docs: Adjust home page PurePanel & fix nav lang & popup for v5 (#38647)

* docs: add info

* docs: fix pure render

* docs: PurePanel eng

.dumi/pages/index/components/ComponentsList.tsx

@@ -1,7 +1,6 @@
 import useSiteToken from '../../../hooks/useSiteToken';
 import React from 'react';
 import {
-  Button,
   Space,
   Typography,
   Tour,
@@ -11,27 +10,96 @@ import {
   Modal,
   FloatButton,
   Progress,
+  ConfigProvider,
 } from 'antd';
 import dayjs from 'dayjs';
 import { CustomerServiceOutlined, QuestionCircleOutlined, SyncOutlined } from '@ant-design/icons';
 import { css } from '@emotion/react';
+import useLocale from '../../../hooks/useLocale';
 
-const PLACEHOLDER_WIDTH = 400;
+const SAMPLE_CONTENT_EN =
-
-const SAMPLE_CONTENT =
   'Ant Design 5.0 use CSS-in-JS technology to provide dynamic & mix theme ability. And which use component level CSS-in-JS solution get your application a better performance.';
 
+const SAMPLE_CONTENT_CN =
+  'Ant Design 5.0 使用 CSS-in-JS 技术以提供动态与混合主题的能力。与此同时，我们使用组件级别的 CSS-in-JS 解决方案，让你的应用获得更好的性能。';
+
+const locales = {
+  cn: {
+    yesterday: '昨天',
+    lastWeek: '上周',
+    lastMonth: '上月',
+    lastYear: '去年',
+    new: '新增',
+    update: '更新',
+    sampleContent: SAMPLE_CONTENT_CN,
+    inProgress: '进行中',
+    success: '成功',
+    taskFailed: '任务失败',
+    tour: '漫游导览帮助用户对新加的功能进行快速了解',
+  },
+  en: {
+    yesterday: 'Yesterday',
+    lastWeek: 'Last Week',
+    lastMonth: 'Last Month',
+    lastYear: 'Last Year',
+    new: 'New',
+    update: 'Update',
+    sampleContent: SAMPLE_CONTENT_EN,
+    inProgress: 'In Progress',
+    success: 'Success',
+    taskFailed: 'Task Failed',
+    tour: 'A quick guide for new come user about how to use app.',
+  },
+};
+
+const useStyle = () => {
+  const { token } = useSiteToken();
+
+  return {
+    card: css`
+      border-radius: ${token.borderRadius}px;
+      background: #f5f8ff;
+      padding: ${token.paddingXL}px;
+      flex: none;
+      overflow: hidden;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+
+      > * {
+        flex: none;
+      }
+    `,
+    cardCircle: css`
+      position: absolute;
+      width: 120px;
+      height: 120px;
+      background: #1677ff;
+      border-radius: 50%;
+      filter: blur(40px);
+      opacity: 0.1;
+    `,
+  };
+};
+
+export default function ComponentsList() {
+  const { token } = useSiteToken();
+  const styles = useStyle();
+  const [locale] = useLocale(locales);
+
   const COMPONENTS: {
     title: React.ReactNode;
     type: 'new' | 'update';
     node: React.ReactNode;
-}[] = [
+  }[] = React.useMemo(
+    () => [
       {
         title: 'Modal',
         type: 'update',
         node: (
           <Modal._InternalPanelDoNotUseOrYouWillBeFired title="Ant Design 5.0" width={300}>
-        {SAMPLE_CONTENT}
+            {locale.sampleContent}
           </Modal._InternalPanelDoNotUseOrYouWillBeFired>
         ),
       },
@@ -43,10 +111,10 @@ const COMPONENTS: {
           <DatePicker._InternalPanelDoNotUseOrYouWillBeFired
             showToday={false}
             presets={[
-          { label: 'Yesterday', value: dayjs().add(-1, 'd') },
+              { label: locale.yesterday, value: dayjs().add(-1, 'd') },
-          { label: 'Last Week', value: dayjs().add(-7, 'd') },
+              { label: locale.lastWeek, value: dayjs().add(-7, 'd') },
-          { label: 'Last Month', value: dayjs().add(-1, 'month') },
+              { label: locale.lastMonth, value: dayjs().add(-1, 'month') },
-          { label: 'Last Year', value: dayjs().add(-1, 'year') },
+              { label: locale.lastYear, value: dayjs().add(-1, 'year') },
             ]}
             value={dayjs('2022-11-18 14:00:00')}
           />
@@ -60,15 +128,15 @@ const COMPONENTS: {
           <Space direction="vertical">
             <Space>
               <Progress type="circle" trailColor="#e6f4ff" percent={60} width={14} />
-          In Progress
+              {locale.inProgress}
             </Space>
             <Space>
               <Progress type="circle" percent={100} width={14} />
-          Success
+              {locale.success}
             </Space>
             <Space>
               <Progress type="circle" status="exception" percent={88} width={14} />
-          Task Failed
+              {locale.taskFailed}
             </Space>
           </Space>
         ),
@@ -80,7 +148,7 @@ const COMPONENTS: {
         node: (
           <Tour._InternalPanelDoNotUseOrYouWillBeFired
             title="Ant Design 5.0"
-        description="A quick guide for new come user about how to use app."
+            description={locale.tour}
             style={{ width: 350 }}
             current={3}
             total={9}
@@ -137,54 +205,21 @@ const COMPONENTS: {
           <Alert
             style={{ width: 400 }}
             message="Ant Design 5.0"
-        description={SAMPLE_CONTENT}
+            description={locale.sampleContent}
             closable
           />
         ),
       },
-];
+    ],
-
+    [],
-const useStyle = () => {
+  );
-  const { token } = useSiteToken();
-
-  return {
-    card: css`
-      border-radius: ${token.borderRadius}px;
-      background: #f5f8ff;
-      padding: ${token.paddingXL}px;
-      flex: none;
-      overflow: hidden;
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      align-items: stretch;
-
-      > * {
-        flex: none;
-      }
-    `,
-    cardCircle: css`
-      position: absolute;
-      width: 120px;
-      height: 120px;
-      background: #1677ff;
-      border-radius: 50%;
-      filter: blur(40px);
-      opacity: 0.1;
-    `,
-  };
-};
-
-export default function ComponentsList() {
-  const { token } = useSiteToken();
-  const styles = useStyle();
 
   return (
     <div style={{ width: '100%', overflow: 'hidden', display: 'flex', justifyContent: 'center' }}>
       <div style={{ display: 'flex', alignItems: 'stretch', columnGap: token.paddingLG }}>
         {COMPONENTS.map(({ title, node, type }, index) => {
           const tagColor = type === 'new' ? 'processing' : 'warning';
-          const tagText = type === 'new' ? 'New' : 'Update';
+          const tagText = type === 'new' ? locale.new : locale.update;
 
           return (
             <div key={index} css={styles.card} style={{ pointerEvents: 'none' }}>

.dumi/pages/index/index.tsx

@@ -1,4 +1,4 @@
-import React, { type FC } from 'react';
+import React, { useEffect, useLayoutEffect, type FC } from 'react';
 import { useLocale as useDumiLocale } from 'dumi';
 import { css } from '@emotion/react';
 import useLocale from '../../hooks/useLocale';
@@ -11,6 +11,8 @@ import BannerRecommends from './components/BannerRecommends';
 import ComponentsList from './components/ComponentsList';
 import DesignFramework from './components/DesignFramework';
 import { ConfigProvider } from 'antd';
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
 
 const useStyle = () => {
   const { token } = useSiteToken();
@@ -43,7 +45,7 @@ const locales = {
 };
 
 const Homepage: FC = () => {
-  const [locale] = useLocale(locales);
+  const [locale, lang] = useLocale(locales);
   const { id: localeId } = useDumiLocale();
   const localeStr = localeId === 'zh-CN' ? 'cn' : 'en';
 
@@ -51,6 +53,14 @@ const Homepage: FC = () => {
 
   const style = useStyle();
 
+  useLayoutEffect(() => {
+    if (lang === 'cn') {
+      dayjs.locale('zh-cn');
+    } else {
+      dayjs.locale('en');
+    }
+  }, []);
+
   return (
     <ConfigProvider theme={{ algorithm: undefined }}>
       <section>

.dumi/theme/locales/en-US.json

@@ -5,6 +5,7 @@
   "app.theme.switch.compact": "Compact theme",
   "app.header.search": "Search...",
   "app.header.menu.documentation": "Docs",
+  "app.header.menu.development": "Development",
   "app.header.menu.components": "Components",
   "app.header.menu.spec": "Design",
   "app.header.menu.resource": "Resources",

.dumi/theme/locales/zh-CN.json

@@ -5,6 +5,7 @@
   "app.theme.switch.compact": "紧凑主题",
   "app.header.search": "全文本搜索...",
   "app.header.menu.documentation": "文档",
+  "app.header.menu.development": "研发",
   "app.header.menu.components": "组件",
   "app.header.menu.spec": "设计",
   "app.header.menu.resource": "资源",

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

@@ -0,0 +1,99 @@
+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

@@ -22,6 +22,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';
 
 const locales = {
   cn: {
@@ -351,6 +352,7 @@ const Footer = () => {
   }, [lang, location.search]);
 
   return (
+    <>
       <RcFooter
         columns={getColumns}
         css={style.footer}
@@ -360,6 +362,8 @@ const Footer = () => {
           </>
         }
       />
+      <InfoNewVersion />
+    </>
   );
 };