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,138 +10,47 @@ 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 COMPONENTS: {
+const SAMPLE_CONTENT_CN =
-  title: React.ReactNode;
+  'Ant Design 5.0 使用 CSS-in-JS 技术以提供动态与混合主题的能力。与此同时，我们使用组件级别的 CSS-in-JS 解决方案，让你的应用获得更好的性能。';
-  type: 'new' | 'update';
-  node: React.ReactNode;
-}[] = [
-  {
-    title: 'Modal',
-    type: 'update',
-    node: (
-      <Modal._InternalPanelDoNotUseOrYouWillBeFired title="Ant Design 5.0" width={300}>
-        {SAMPLE_CONTENT}
-      </Modal._InternalPanelDoNotUseOrYouWillBeFired>
-    ),
-  },
 
-  {
+const locales = {
-    title: 'DatePicker',
+  cn: {
-    type: 'update',
+    yesterday: '昨天',
-    node: (
+    lastWeek: '上周',
-      <DatePicker._InternalPanelDoNotUseOrYouWillBeFired
+    lastMonth: '上月',
-        showToday={false}
+    lastYear: '去年',
-        presets={[
+    new: '新增',
-          { label: 'Yesterday', value: dayjs().add(-1, 'd') },
+    update: '更新',
-          { label: 'Last Week', value: dayjs().add(-7, 'd') },
+    sampleContent: SAMPLE_CONTENT_CN,
-          { label: 'Last Month', value: dayjs().add(-1, 'month') },
+    inProgress: '进行中',
-          { label: 'Last Year', value: dayjs().add(-1, 'year') },
+    success: '成功',
-        ]}
+    taskFailed: '任务失败',
-        value={dayjs('2022-11-18 14:00:00')}
+    tour: '漫游导览帮助用户对新加的功能进行快速了解',
-      />
-    ),
   },
-
+  en: {
-  {
+    yesterday: 'Yesterday',
-    title: 'Progress',
+    lastWeek: 'Last Week',
-    type: 'update',
+    lastMonth: 'Last Month',
-    node: (
+    lastYear: 'Last Year',
-      <Space direction="vertical">
+    new: 'New',
-        <Space>
+    update: 'Update',
-          <Progress type="circle" trailColor="#e6f4ff" percent={60} width={14} />
+    sampleContent: SAMPLE_CONTENT_EN,
-          In Progress
+    inProgress: 'In Progress',
-        </Space>
+    success: 'Success',
-        <Space>
+    taskFailed: 'Task Failed',
-          <Progress type="circle" percent={100} width={14} />
+    tour: 'A quick guide for new come user about how to use app.',
-          Success
-        </Space>
-        <Space>
-          <Progress type="circle" status="exception" percent={88} width={14} />
-          Task Failed
-        </Space>
-      </Space>
-    ),
   },
-
+};
-  {
-    title: 'Tour',
-    type: 'new',
-    node: (
-      <Tour._InternalPanelDoNotUseOrYouWillBeFired
-        title="Ant Design 5.0"
-        description="A quick guide for new come user about how to use app."
-        style={{ width: 350 }}
-        current={3}
-        total={9}
-      />
-    ),
-  },
-  {
-    title: 'FloatButton',
-    type: 'new',
-    node: (
-      <Space size="large">
-        <FloatButton._InternalPanelDoNotUseOrYouWillBeFired
-          shape="square"
-          items={[
-            {
-              icon: <QuestionCircleOutlined />,
-            },
-            {
-              icon: <CustomerServiceOutlined />,
-            },
-            {
-              icon: <SyncOutlined />,
-            },
-          ]}
-        />
-        <FloatButton._InternalPanelDoNotUseOrYouWillBeFired backTop />
-        <FloatButton._InternalPanelDoNotUseOrYouWillBeFired
-          items={[
-            {
-              icon: <QuestionCircleOutlined />,
-            },
-            {
-              icon: <CustomerServiceOutlined />,
-            },
-            {
-              icon: <SyncOutlined />,
-            },
-          ]}
-        />
-      </Space>
-    ),
-  },
-
-  // {
-  //   title: 'Steps',
-  //   type: 'update',
-  //   node: <Button style={{ width: PLACEHOLDER_WIDTH }}>Placeholder</Button>,
-  // },
-
-  {
-    title: 'Alert',
-    type: 'update',
-    node: (
-      <Alert
-        style={{ width: 400 }}
-        message="Ant Design 5.0"
-        description={SAMPLE_CONTENT}
-        closable
-      />
-    ),
-  },
-];
 
 const useStyle = () => {
   const { token } = useSiteToken();
@@ -178,13 +86,140 @@ const useStyle = () => {
 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}>
+            {locale.sampleContent}
+          </Modal._InternalPanelDoNotUseOrYouWillBeFired>
+        ),
+      },
+
+      {
+        title: 'DatePicker',
+        type: 'update',
+        node: (
+          <DatePicker._InternalPanelDoNotUseOrYouWillBeFired
+            showToday={false}
+            presets={[
+              { label: locale.yesterday, value: dayjs().add(-1, 'd') },
+              { label: locale.lastWeek, value: dayjs().add(-7, 'd') },
+              { label: locale.lastMonth, value: dayjs().add(-1, 'month') },
+              { label: locale.lastYear, value: dayjs().add(-1, 'year') },
+            ]}
+            value={dayjs('2022-11-18 14:00:00')}
+          />
+        ),
+      },
+
+      {
+        title: 'Progress',
+        type: 'update',
+        node: (
+          <Space direction="vertical">
+            <Space>
+              <Progress type="circle" trailColor="#e6f4ff" percent={60} width={14} />
+              {locale.inProgress}
+            </Space>
+            <Space>
+              <Progress type="circle" percent={100} width={14} />
+              {locale.success}
+            </Space>
+            <Space>
+              <Progress type="circle" status="exception" percent={88} width={14} />
+              {locale.taskFailed}
+            </Space>
+          </Space>
+        ),
+      },
+
+      {
+        title: 'Tour',
+        type: 'new',
+        node: (
+          <Tour._InternalPanelDoNotUseOrYouWillBeFired
+            title="Ant Design 5.0"
+            description={locale.tour}
+            style={{ width: 350 }}
+            current={3}
+            total={9}
+          />
+        ),
+      },
+      {
+        title: 'FloatButton',
+        type: 'new',
+        node: (
+          <Space size="large">
+            <FloatButton._InternalPanelDoNotUseOrYouWillBeFired
+              shape="square"
+              items={[
+                {
+                  icon: <QuestionCircleOutlined />,
+                },
+                {
+                  icon: <CustomerServiceOutlined />,
+                },
+                {
+                  icon: <SyncOutlined />,
+                },
+              ]}
+            />
+            <FloatButton._InternalPanelDoNotUseOrYouWillBeFired backTop />
+            <FloatButton._InternalPanelDoNotUseOrYouWillBeFired
+              items={[
+                {
+                  icon: <QuestionCircleOutlined />,
+                },
+                {
+                  icon: <CustomerServiceOutlined />,
+                },
+                {
+                  icon: <SyncOutlined />,
+                },
+              ]}
+            />
+          </Space>
+        ),
+      },
+
+      // {
+      //   title: 'Steps',
+      //   type: 'update',
+      //   node: <Button style={{ width: PLACEHOLDER_WIDTH }}>Placeholder</Button>,
+      // },
+
+      {
+        title: 'Alert',
+        type: 'update',
+        node: (
+          <Alert
+            style={{ width: 400 }}
+            message="Ant Design 5.0"
+            description={locale.sampleContent}
+            closable
+          />
+        ),
+      },
+    ],
+    [],
+  );
 
   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",
@@ -136,4 +137,4 @@
   "app.components.overview.search": "Search in components",
   "app.implementation.community": "community",
   "app.implementation.official": "official"
-}
+}

.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": "资源",
@@ -135,4 +136,4 @@
   "app.components.overview.search": "搜索组件",
   "app.implementation.community": "社区实现",
   "app.implementation.official": "官方"
-}
+}

.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,15 +352,18 @@ const Footer = () => {
   }, [lang, location.search]);
 
   return (
-    <RcFooter
+    <>
-      columns={getColumns}
+      <RcFooter
-      css={style.footer}
+        columns={getColumns}
-      bottom={
+        css={style.footer}
-        <>
+        bottom={
-          Made with <span style={{ color: '#fff' }}>❤</span> by {locale.owner}
+          <>
-        </>
+            Made with <span style={{ color: '#fff' }}>❤</span> by {locale.owner}
-      }
+          </>
-    />
+        }
+      />
+      <InfoNewVersion />
+    </>
   );
 };