[pull] master from ant-design:master

.dumi/hooks/useDark.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const DarkContext = React.createContext(false);
+
+export default function useDark() {
+  return React.useContext(DarkContext);
+}

.dumi/mirror-modal.js

@@ -0,0 +1,172 @@
+(function createMirrorModal() {
+  if (
+    (navigator.languages.includes('zh') || navigator.languages.includes('zh-CN')) &&
+    /-cn\/?$/.test(window.location.pathname) &&
+    !['ant-design.gitee.io', 'ant-design.antgroup.com'].includes(window.location.hostname)
+  ) {
+    const ANTD_DOT_NOT_SHOW_MIRROR_MODAL = 'ANT_DESIGN_DO_NOT_OPEN_MIRROR_MODAL';
+
+    const lastShowTime = window.localStorage.getItem(ANTD_DOT_NOT_SHOW_MIRROR_MODAL);
+    if (
+      lastShowTime &&
+      lastShowTime !== 'true' &&
+      Date.now() - new Date(lastShowTime).getTime() < 7 * 24 * 60 * 60 * 1000
+    ) {
+      return;
+    }
+
+    const style = document.createElement('style');
+    style.innerHTML = `
+  @keyframes mirror-fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes mirror-zoom-in {
+    from {
+      transform: scale(0.8);
+    }
+    to {
+      transform: scale(1);
+    }
+  }
+
+  .mirror-modal-mask {
+    position: fixed;
+    inset: 0;
+    height: '100vh';
+    width: '100vw';
+    background: rgba(0, 0, 0, 0.3);
+    z-index: 9999;
+    animation: mirror-fade-in 0.3s forwards;
+  }
+
+  .mirror-modal-dialog {
+    position: fixed;
+    inset: 0;
+    top: 120px;
+    margin-left: auto;
+    margin-right: auto;
+    width: 400px;
+    height: 120px;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    border-radius: 8px;
+    border: 1px solid #eee;
+    background: #fff;
+    padding: 20px 24px;
+    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+    animation: mirror-zoom-in 0.3s forwards;
+  }
+
+  .mirror-modal-title {
+    font-size: 16px;
+    font-weight: 500;
+    align-self: flex-start;
+    margin-bottom: 8px;
+  }
+
+  .mirror-modal-content {
+    font-size: 14px;
+    align-self: flex-start;
+    margin-bottom: 16px;
+  }
+
+  .mirror-modal-btns {
+    align-self: flex-end;
+    margin-top: auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .mirror-modal-btn {
+    border-radius: 6px;
+    cursor: pointer;
+    height: 32px;
+    box-sizing: border-box;
+    font-size: 14px;
+    padding: 4px 16px;
+    display: inline-flex;
+    align-items: center;
+    text-decoration: none;
+    transition: all 0.2s;
+  }
+
+  .mirror-modal-confirm-btn {
+    background: #1677ff;
+    color: #fff;
+  }
+
+  .mirror-modal-confirm-btn:hover {
+    background: #4096ff;
+  }
+
+  .mirror-modal-confirm-btn:active {
+    background: #0958d9;
+  }
+
+  .mirror-modal-cancel-btn {
+    border: 1px solid #eee;
+    color: #000;
+    margin-right: 8px;
+  }
+
+  .mirror-modal-cancel-btn:hover {
+    border-color: #4096ff;
+    color: #4096ff
+  }
+
+  .mirror-modal-cancel-btn:active {
+    border-color: #0958d9;
+    color: #0958d9;
+  }
+    `;
+    document.head.append(style);
+
+    const modal = document.createElement('div');
+    modal.className = 'mirror-modal-mask';
+
+    const dialog = document.createElement('div');
+    dialog.className = 'mirror-modal-dialog';
+    modal.append(dialog);
+
+    const title = document.createElement('div');
+    title.className = 'mirror-modal-title';
+    title.innerText = '提示';
+    dialog.append(title);
+
+    const content = document.createElement('div');
+    content.className = 'mirror-modal-content';
+    content.innerText = '国内用户推荐访问国内镜像以获得极速体验～';
+    dialog.append(content);
+
+    const btnWrapper = document.createElement('div');
+    btnWrapper.className = 'mirror-modal-btns';
+    dialog.append(btnWrapper);
+
+    const cancelBtn = document.createElement('a');
+    cancelBtn.className = 'mirror-modal-cancel-btn mirror-modal-btn';
+    cancelBtn.innerText = '7 天内不再显示';
+    btnWrapper.append(cancelBtn);
+    cancelBtn.addEventListener('click', () => {
+      window.localStorage.setItem(ANTD_DOT_NOT_SHOW_MIRROR_MODAL, new Date().toISOString());
+      document.body.removeChild(modal);
+      document.head.removeChild(style);
+      document.body.style.overflow = '';
+    });
+
+    const confirmBtn = document.createElement('a');
+    confirmBtn.className = 'mirror-modal-confirm-btn mirror-modal-btn';
+    confirmBtn.href = window.location.href.replace(window.location.host, 'ant-design.antgroup.com');
+    confirmBtn.innerText = '🚀 立刻前往';
+    btnWrapper.append(confirmBtn);
+
+    document.body.append(modal);
+    document.body.style.overflow = 'hidden';
+  }
+})();

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

@@ -1,21 +1,23 @@
 /* eslint-disable react/jsx-pascal-case */
 import React, { useContext } from 'react';
-import dayjs from 'dayjs';
 import { CustomerServiceOutlined, QuestionCircleOutlined, SyncOutlined } from '@ant-design/icons';
-import { createStyles, css, useTheme } from 'antd-style';
-import classNames from 'classnames';
 import {
-  Space,
-  Typography,
-  Tour,
-  Tag,
-  DatePicker,
   Alert,
-  Modal,
+  Carousel,
+  DatePicker,
   FloatButton,
+  Modal,
   Progress,
-  Carousel,
+  Space,
+  Tag,
+  Tour,
+  Typography,
 } from 'antd';
+import { createStyles, css, useTheme } from 'antd-style';
+import classNames from 'classnames';
+import dayjs from 'dayjs';
+
+import useDark from '../../../hooks/useDark';
 import useLocale from '../../../hooks/useLocale';
 import SiteContext from '../../../theme/slots/SiteContext';
 import { getCarouselStyle } from './util';
@@ -55,40 +57,45 @@ const locales = {
   },
 };
 
-const useStyle = createStyles(({ token }) => {
-  const { carousel } = getCarouselStyle();
+const useStyle = () => {
+  const isRootDark = useDark();
 
-  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;
+  return createStyles(({ token }) => {
+    const { carousel } = getCarouselStyle();
 
-      > * {
+    return {
+      card: css`
+        border-radius: ${token.borderRadius}px;
+        border: 1px solid ${isRootDark ? token.colorBorder : 'transparent'};
+        background: ${isRootDark ? token.colorBgContainer : '#f5f8ff'};
+        padding: ${token.paddingXL}px;
         flex: none;
-      }
-    `,
-    cardCircle: css`
-      position: absolute;
-      width: 120px;
-      height: 120px;
-      background: #1677ff;
-      border-radius: 50%;
-      filter: blur(40px);
-      opacity: 0.1;
-    `,
-    mobileCard: css`
-      height: 395px;
-    `,
-    carousel,
-  };
-});
+        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;
+      `,
+      mobileCard: css`
+        height: 395px;
+      `,
+      carousel,
+    };
+  })();
+};
 
 const ComponentItem: React.FC<ComponentItemProps> = ({ title, node, type, index }) => {
   const tagColor = type === 'new' ? 'processing' : 'warning';

.dumi/pages/index/components/DesignFramework.tsx

@@ -1,10 +1,12 @@
 import React, { useContext } from 'react';
+import { Col, Row, Typography } from 'antd';
 import { createStyles, useTheme } from 'antd-style';
 import { Link, useLocation } from 'dumi';
-import { Col, Row, Typography } from 'antd';
+
+import useDark from '../../../hooks/useDark';
 import useLocale from '../../../hooks/useLocale';
-import * as utils from '../../../theme/utils';
 import SiteContext from '../../../theme/slots/SiteContext';
+import * as utils from '../../../theme/utils';
 
 const SECONDARY_LIST = [
   {
@@ -60,12 +62,17 @@ const locales = {
   },
 };
 
-const useStyle = createStyles(({ token, css }) => ({
-  card: css`
+const useStyle = () => {
+  const isRootDark = useDark();
+
+  return createStyles(({ token, css }) => ({
+    card: css`
       padding: ${token.paddingSM}px;
       border-radius: ${token.borderRadius * 2}px;
-      background: #fff;
-      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02),
+      background: ${isRootDark ? 'rgba(0,0,0,0.45)' : token.colorBgElevated};
+      box-shadow:
+        0 1px 2px rgba(0, 0, 0, 0.03),
+        0 1px 6px -1px rgba(0, 0, 0, 0.02),
         0 2px 4px rgba(0, 0, 0, 0.02);
 
       img {
@@ -75,18 +82,19 @@ const useStyle = createStyles(({ token, css }) => ({
       }
     `,
 
-  cardMini: css`
+    cardMini: css`
       display: block;
       border-radius: ${token.borderRadius * 2}px;
       padding: ${token.paddingMD}px ${token.paddingLG}px;
-      background: rgba(0, 0, 0, 0.02);
-      border: 1px solid rgba(0, 0, 0, 0.06);
+      background: ${isRootDark ? 'rgba(0,0,0,0.25)' : 'rgba(0, 0, 0, 0.02)'};
+      border: 1px solid ${isRootDark ? 'rgba(255,255,255, 0.45)' : 'rgba(0, 0, 0, 0.06)'};
 
       img {
         height: 48px;
       }
     `,
-}));
+  }))();
+};
 
 export default function DesignFramework() {
   const [locale] = useLocale(locales);