@antv/dumi-theme-antv 0.3.0-beta.2 → 0.3.0-beta.21

package/dist/slots/Banner/index.module.less

@@ -0,0 +1,449 @@
+@import '../_.less';
+
+.wrapper {
+  min-height: 650px;
+  max-height: 803px;
+  background: linear-gradient(225deg, #ffffff, #f0f5ff);
+  height: calc(94vh);
+  position: relative;
+  overflow: hidden;
+
+  .content {
+    .container1440;
+    height: 100%;
+    position: relative;
+  }
+
+  .text {
+    position: relative;
+    top: 26%;
+    z-index: 1;
+    margin-left: 4.5%;
+
+    .title {
+      font-size: 3.4em; //2.875em;
+      font-weight: 800;
+      color: rgba(0, 0, 0, 1);
+      position: relative;
+    }
+
+    .description {
+      margin-top: 0.83%; //12px;
+      margin-bottom: 0px;
+      color: rgba(106, 123, 140, 1);
+      font-size: 1.14em;
+      font-weight: 200;
+      position: relative;
+      width: 40%;
+      max-width: 700px;
+    }
+
+    .buttons {
+      display: flex;
+      margin-top: 5.56%;
+
+      .buttonLink+.buttonLink {
+        margin-left: 16px;
+      }
+
+      .buttonLink {
+        cursor: pointer;
+        border-radius: 50px;
+        min-width: 134px;
+        padding-left: 15px;
+        padding-right: 15px;
+        height: 40px;
+        z-index: 10;
+        position: relative;
+        transition: all 0.3s;
+        border: 1px solid @primary-color;
+        color: @primary-color;
+        background: transparent;
+        text-align: center;
+        font-size: 1.14em;
+        line-height: 40px;
+
+        &:hover {
+          color: tint(@primary-color, 25%);
+          border: 1px solid tint(@primary-color, 25%);
+          background-color: fade(@primary-color, 3%);
+        }
+
+        &.primary {
+          border: none;
+          outline: none;
+          color: #fff;
+          background: linear-gradient(60deg,
+              fade(@primary-color, 70%),
+              shade(@primary-color, 20%));
+          opacity: 0.8;
+          box-shadow: 0 8px 10px fade(@primary-color, 20%);
+
+          &:hover {
+            opacity: 1;
+          }
+        }
+      }
+
+      .videoButtonWrapper {
+        margin-left: 16px;
+        width: fit-content;
+        height: fit-content;
+
+        .videoButton {
+          width: 40px;
+          height: 40px;
+          background-size: contain;
+          border: 1px solid @primary-color;
+          border-radius: 20px;
+          transition: all 0.15s;
+          display: flex;
+          cursor: pointer;
+          overflow: hidden;
+
+          .videoButtonIcon {
+            margin-left: 12px;
+            font-size: 16px;
+            color: @primary-color;
+            line-height: 44px;
+          }
+
+          .videoButtonText {
+            line-height: 40px;
+            margin-left: 10px;
+            color: @primary-color;
+          }
+
+          &:hover {
+            width: 134px;
+          }
+        }
+      }
+
+      .githubWrapper {
+        margin-left: 16px;
+        display: flex;
+
+        :global {
+          .gh-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 20px;
+            padding: 9px;
+            border: 1px solid #ced4d9;
+            background: transparent;
+            text-decoration: none;
+            white-space: nowrap;
+            display: flex;
+            cursor: pointer;
+            float: left;
+            transition: all 0.15s;
+
+            &:hover {
+              background: #f2f4f5;
+            }
+
+            .gh-ico {
+              width: 16px;
+              height: 16px;
+              margin-left: 2px;
+              margin-top: 2px;
+              background-image: url(https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Nk9mQ48ZoZMAAAAAAAAAAABkARQnAQ);
+              background-size: 100% 100%;
+              background-repeat: no-repeat;
+              box-sizing: border-box;
+              cursor: pointer;
+              color: #333;
+            }
+
+            .gh-text {
+              display: none;
+            }
+          }
+
+          .gh-count {
+            position: relative;
+            display: none;
+            /* hidden to start */
+            margin-left: 52px;
+            margin-top: 7px;
+            border: 1px solid #d4d4d4;
+            padding: 2px 10px;
+            font-weight: 700;
+            height: 65%;
+            border-radius: 5px;
+            color: rgb(49, 70, 89);
+
+            &:hover {
+              background: #f2f4f5;
+              transition: all 0.15s;
+            }
+          }
+
+          .gh-count:hover,
+          .gh-count:focus {
+            color: #4183c4;
+          }
+
+          .gh-count:before,
+          .gh-count:after {
+            content: '';
+            position: absolute;
+            display: inline-block;
+            width: 0;
+            height: 0;
+            border-color: transparent;
+            border-style: solid;
+          }
+
+          .gh-count:before {
+            top: 50%;
+            left: -3px;
+            margin-top: -5px;
+            border-width: 4px 4px 4px 0;
+            border-right-color: #fafafa;
+          }
+
+          .gh-count:after {
+            top: 50%;
+            border-width: 5px 5px 5px 0;
+            border-right-color: #d4d4d4;
+            left: -5px;
+            z-index: -1;
+            margin-top: -6px;
+          }
+        }
+      }
+    }
+  }
+
+  .notifications {
+    width: 80%;
+    display: flex;
+    bottom: 40px;
+    position: absolute;
+    z-index: 3;
+    margin-left: 4.5%;
+  }
+
+  .teaser {
+    display: flex;
+    position: absolute;
+    right: 0;
+    margin-top: -300px;
+    width: 52%;
+    max-width: 598px;
+    height: 324px;
+    margin: auto;
+    margin-top: 0;
+    top: 0;
+    bottom: 0;
+
+    .teaserimg {
+      width: 100%;
+      height: auto;
+      position: relative;
+    }
+  }
+
+  .backLeftBottom {
+    position: absolute;
+    left: -8%;
+    bottom: -20px;
+  }
+}
+
+.videoModal {
+  :global {
+    .video-react-big-play-button {
+      display: none !important;
+    }
+
+    .video-react-control-bar {
+      border-radius: 0 0 4px 4px;
+    }
+
+    .video-react {
+      border-radius: 4px;
+
+      .video-react-video {
+        border-radius: 4px;
+      }
+    }
+
+    .ant-modal-close {
+      right: -50px;
+      top: -12px;
+      color: #fff;
+    }
+
+    .anticon-info-circle {
+      display: none !important;
+    }
+
+    .ant-modal-confirm-btns {
+      display: none !important;
+    }
+
+    .ant-modal-confirm-title {
+      display: none !important;
+    }
+
+    .ant-modal-close {
+      display: block !important;
+    }
+
+    .ant-modal-body {
+      padding: 0 !important;
+
+      .ant-modal-confirm-content {
+        margin: 0 !important;
+      }
+    }
+  }
+}
+
+@media (max-width: 1144px) {
+  .wrapper {
+    .teaser {
+      transition: 0.3s all;
+      margin: auto;
+      margin-top: 0;
+      top: 0;
+      bottom: 0;
+    }
+  }
+}
+
+@media (max-width: 900px) {
+  .wrapper {
+    .content {
+      width: 91.46%;
+      margin-left: 4.27%;
+      margin-bottom: 5%;
+      position: relative;
+    }
+
+    .text {
+      top: 16.7%;
+      text-align: center;
+      margin-left: 0;
+
+      .title {
+        font-size: 2.857em;
+        margin-left: 0;
+      }
+
+      .description {
+        width: 100%;
+        max-width: 100%;
+        margin-left: 0;
+        font-size: 1em;
+      }
+
+      .buttons {
+        display: inline-flex;
+
+        .more {
+          font-size: 1em;
+        }
+
+        .githubIframe {
+          height: 40px;
+        }
+
+        .videoButtonWrapper {
+          width: fit-content;
+          height: fit-content;
+        }
+      }
+    }
+
+    .notifications {
+      width: 100%;
+      display: block;
+      bottom: 20px;
+      height: 48px;
+      overflow: hidden;
+    }
+
+    .teaser {
+      width: 100%;
+      max-width: 1200px;
+      margin-top: auto;
+      margin-left: unset;
+      margin-right: unset;
+      right: unset;
+      top: 30%;
+      display: flex;
+      justify-content: center;
+
+      .teaserimg {
+        width: 40%;
+        margin-left: unset;
+        margin-right: unset;
+      }
+    }
+  }
+}
+
+@media (max-width: 786px) {
+  .wrapper {
+    .text {
+      .buttons {
+        .videoButtonWrapper {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 510px) {
+  .wrapper {
+    .text {
+      .buttons {
+        margin-top: 70%;
+
+        .githubWrapper {
+          display: none;
+        }
+      }
+    }
+
+    .teaser {
+      width: 100%;
+      top: 5%;
+
+      .teaserimg {
+        width: 100%;
+      }
+    }
+
+    .backLeftBottom {
+      display: none;
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .wrapper {
+    .text {
+      height: 70%;
+
+      .buttons {
+        bottom: 10px;
+        margin-top: unset;
+        z-index: 1;
+        position: absolute;
+        left: 0;
+        width: 100%;
+        justify-content: center;
+      }
+    }
+
+    .teaser {
+      top: 14%;
+    }
+  }
+}

package/dist/slots/Cases/index.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { IC } from '../../types';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
 interface Case {

package/dist/slots/Cases/index.js

@@ -2,12 +2,13 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 import React from 'react';
 import { ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons';
-import { Link } from 'dumi';
+import { Link, FormattedMessage } from 'dumi';
 import Slider from 'react-slick';
 import cx from 'classnames';
+import { useLocale } from 'dumi';
+import { ic } from "../hooks";
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
-import { useT, ic } from "../hooks";
 import styles from "./index.module.less";
 export var Cases = function Cases(_ref) {
   var _ref$cases = _ref.cases,
@@ -15,6 +16,7 @@ export var Cases = function Cases(_ref) {
       _ref$style = _ref.style,
       style = _ref$style === void 0 ? {} : _ref$style,
       className = _ref.className;
+  var lang = useLocale().id;
   var slider = React.useRef(null);
 
   var clickPrevious = function clickPrevious() {
@@ -68,15 +70,19 @@ export var Cases = function Cases(_ref) {
         href: app.link,
         target: "_blank",
         rel: "noopener noreferrer"
-      }, useT('查看详情')) : /*#__PURE__*/React.createElement(Link, {
+      }, /*#__PURE__*/React.createElement(FormattedMessage, {
+        id: "\u67E5\u770B\u8BE6\u60C5"
+      })) : /*#__PURE__*/React.createElement(Link, {
         className: styles.detail,
-        to: app.link ? app.link : ''
-      }, useT('查看详情')));
+        to: app.link[lang] ? app.link[lang] : app.link
+      }, /*#__PURE__*/React.createElement(FormattedMessage, {
+        id: "\u67E5\u770B\u8BE6\u60C5"
+      })));
       return /*#__PURE__*/React.createElement("div", {
         className: styles.appWrapper,
         key: ic(app.title)
       }, /*#__PURE__*/React.createElement("img", {
-        className: styles.appTeaser,
+        className: cx(styles.appTeaser, 'index-cases-image'),
         src: app.image,
         alt: ic(app.title)
       }), /*#__PURE__*/React.createElement("div", {
@@ -84,7 +90,7 @@ export var Cases = function Cases(_ref) {
       }, /*#__PURE__*/React.createElement("div", {
         className: styles.appContent
       }, /*#__PURE__*/React.createElement("img", {
-        className: styles.appLogo,
+        className: cx(styles.appLogo, 'index-case-logo'),
         src: app.logo,
         alt: "logo",
         style: {

package/dist/slots/Cases/index.module.less

@@ -18,7 +18,8 @@
     width: 83.88%;
     height: 100%;
     overflow-y: hidden;
-    display: flex;
+    display: flex !important;
+    align-items: center;
 
     .appLeft {
       margin-left: 3.06%;

package/dist/slots/CodeEditor/Toolbar.js

@@ -19,14 +19,13 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 import React, { useEffect, useState } from 'react';
-import { CodeSandboxOutlined, PlayCircleOutlined, ThunderboltOutlined, FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
+import { CodeSandboxOutlined, PlayCircleOutlined, ThunderboltOutlined } from '@ant-design/icons';
 import { Typography, Tooltip } from 'antd';
-import { useLocale } from 'dumi';
+import { useLocale, FormattedMessage } from 'dumi';
 import { getParameters } from 'codesandbox/lib/api/define';
 import stackblitzSdk from '@stackblitz/sdk';
 import { ping } from "../utils";
 import { extractImportDeps, getCodeSandboxConfig, getStackblitzConfig, getRiddleConfig } from "./utils";
-import { useT } from "../hooks";
 import styles from "./Toolbar.module.less";
 var Paragraph = Typography.Paragraph;
 export var EDITOR_TABS;
@@ -68,8 +67,8 @@ export var Toolbar = function Toolbar(_ref) {
       updateRiddleVisible = _useState2[1];
 
   useEffect(function () {
-    ping(function (status) {
-      updateRiddleVisible(status === 'responded');
+    ping().then(function (status) {
+      return updateRiddleVisible(status === 'responded');
     });
   }, []);
   return /*#__PURE__*/React.createElement("div", {
@@ -93,20 +92,26 @@ export var Toolbar = function Toolbar(_ref) {
     name: "data",
     value: JSON.stringify(riddlePrefillConfig)
   }), /*#__PURE__*/React.createElement(Tooltip, {
-    title: useT('在 Riddle 中打开')
+    title: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "\u5728 Riddle \u4E2D\u6253\u5F00"
+    })
   }, /*#__PURE__*/React.createElement("input", {
     type: "submit",
     value: "Create New Riddle with Prefilled Data",
     className: styles.riddle
   }))) : null, /*#__PURE__*/React.createElement(Tooltip, {
-    title: useT('在 StackBlitz 中打开')
+    title: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "\u5728 StackBlitz \u4E2D\u6253\u5F00"
+    })
   }, /*#__PURE__*/React.createElement(ThunderboltOutlined, {
     className: styles.stackblitz,
     onClick: function onClick() {
       stackblitzSdk.openProject(stackblitzPrefillConfig);
     }
   })), /*#__PURE__*/React.createElement(Tooltip, {
-    title: useT('在 CodeSandbox 中打开')
+    title: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "\u5728 CodeSandbox \u4E2D\u6253\u5F00"
+    })
   }, /*#__PURE__*/React.createElement("form", {
     action: "https://codesandbox.io/api/v1/sandboxes/define",
     method: "POST",
@@ -129,20 +134,10 @@ export var Toolbar = function Toolbar(_ref) {
     style: {
       marginLeft: 6
     }
-  }), onToggleFullscreen ? /*#__PURE__*/React.createElement(Tooltip, {
-    title: isFullScreen ? useT('离开全屏') : useT('进入全屏')
-  }, isFullScreen ? /*#__PURE__*/React.createElement(FullscreenExitOutlined, {
-    onClick: onToggleFullscreen,
-    style: {
-      marginLeft: 12
-    }
-  }) : /*#__PURE__*/React.createElement(FullscreenOutlined, {
-    onClick: onToggleFullscreen,
-    style: {
-      marginLeft: 12
-    }
-  })) : null, /*#__PURE__*/React.createElement(Tooltip, {
-    title: useT('执行代码')
+  }), /*#__PURE__*/React.createElement(Tooltip, {
+    title: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "\u6267\u884C\u4EE3\u7801"
+    })
   }, /*#__PURE__*/React.createElement(PlayCircleOutlined, {
     onClick: onExecuteCode,
     style: {

package/dist/slots/CodeEditor/index.d.ts

@@ -4,6 +4,10 @@ export declare type CodeEditorProps = {
      * 标题
      */
     title?: string;
+    /**
+     * 示例的 id
+     */
+    exampleId: string;
     /**
      * 输入的源码
      */