@antv/dumi-theme-antv 0.2.2 → 0.3.0-beta.1

package/dist/slots/CodeEditor/utils.js

@@ -0,0 +1,157 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+import path from 'path'; // @ts-ignore
+
+import { transform } from '@babel/standalone';
+import indentString from 'indent-string';
+export function replaceFetchUrl(sourceCode) {
+  var dataFileMatch = sourceCode.match(/fetch\('(.*)'\)/);
+
+  if (dataFileMatch && dataFileMatch.length > 0 && !dataFileMatch[1].startsWith('http')) {
+    return sourceCode.replace(dataFileMatch[1], path.join(location.origin || '', location.pathname || '', '..', dataFileMatch[1]));
+  }
+
+  return sourceCode;
+}
+/**
+ * 通过代码提取代码片段的 pkg 依赖
+ * @param sourceCode
+ */
+
+export function extractImportDeps(sourceCode) {
+  var requireMatches = sourceCode.match(/require\(['"](.*)['"]\)/g) || [];
+  var importMatches = sourceCode.match(/from\s+['"](.*)['"]/g) || [];
+  var deps = {};
+  [].concat(_toConsumableArray(requireMatches), _toConsumableArray(importMatches)).forEach(function (match) {
+    var requireMatch = match.match(/require\(['"](.*)['"]\)/);
+
+    if (requireMatch && requireMatch[1]) {
+      deps[requireMatch[1]] = 'latest';
+    }
+
+    var importMatch = match.match(/from\s+['"](.*)['"]/);
+
+    if (importMatch && importMatch[1]) {
+      deps[importMatch[1]] = 'latest';
+    }
+  });
+  return deps;
+}
+export function getCodeSandboxConfig(title, sourceCode, fileExtension, deps, devDependencies, playground) {
+  var _files;
+
+  return {
+    files: (_files = {
+      'package.json': {
+        content: {
+          main: "index.".concat(fileExtension),
+          dependencies: deps,
+          devDependencies: devDependencies
+        }
+      }
+    }, _defineProperty(_files, "index.".concat(fileExtension), {
+      content: replaceFetchUrl(sourceCode)
+    }), _defineProperty(_files, 'index.html', {
+      content: playground.container || '<div id="container" />'
+    }), _files)
+  };
+}
+export function getRiddleConfig(title, sourceCode, fileExtension, deps, devDependencies, playground) {
+  return {
+    title: title,
+    js: sourceCode,
+    html: playground.container || '<div id="container" />',
+    // 预填的 package.json 代码
+    json: JSON.stringify(_objectSpread({
+      dependencies: deps,
+      devDependencies: devDependencies
+    }, playground.json))
+  };
+}
+export function getStackblitzConfig(title, sourceCode, fileExtension, deps, devDependencies, playground) {
+  var _files2;
+
+  return {
+    title: title || '',
+    description: '',
+    template: 'create-react-app',
+    dependencies: deps,
+    files: (_files2 = {}, _defineProperty(_files2, "index.".concat(fileExtension.startsWith('ts') ? 'ts' : 'js'), sourceCode), _defineProperty(_files2, 'index.html', playground.container || '<div id="container" />'), _files2)
+  };
+}
+export function getHtmlCodeTemplate(title, sourceCode, fileExtension, deps, devDependencies, playground) {
+  var _playground$htmlCodeT = playground.htmlCodeTemplate,
+      htmlCodeTemplate = _playground$htmlCodeT === void 0 ? '' : _playground$htmlCodeT,
+      _playground$container = playground.container,
+      container = _playground$container === void 0 ? '' : _playground$container;
+  var insertCssMatcher = /insertCss\(`\s*(.*)\s*`\);/;
+  var code = replaceFetchUrl(sourceCode).replace(/import\s+.*\s+from\s+['"].*['"];?/g, '').replace(insertCssMatcher, '').replace(/^\s+|\s+$/g, '');
+  var result = htmlCodeTemplate.replace('{{code}}', indentString(code, 4)).replace('{{title}}', title || 'example');
+  var customStyles = sourceCode.match(insertCssMatcher);
+
+  if (customStyles && customStyles[1]) {
+    result = result.replace('</head>', "  <style>\n".concat(indentString(customStyles[1], 4), "\n    </style>\n  </head>"));
+  }
+
+  if (container) {
+    result = result.replace('<body>', "<body>\n".concat(indentString(container, 4)));
+  }
+
+  return result;
+}
+export function replaceInsertCss(str, lang) {
+  var comment = lang === 'zh' ? "// \u6211\u4EEC\u7528 insert-css \u6F14\u793A\u5F15\u5165\u81EA\u5B9A\u4E49\u6837\u5F0F\n// \u63A8\u8350\u5C06\u6837\u5F0F\u6DFB\u52A0\u5230\u81EA\u5DF1\u7684\u6837\u5F0F\u6587\u4EF6\u4E2D\n// \u82E5\u62F7\u8D1D\u5B98\u65B9\u4EE3\u7801\uFF0C\u522B\u5FD8\u4E86 npm install insert-css\ninsertCss(" : "// We use 'insert-css' to insert custom styles\n// It is recommended to add the style to your own style sheet files\n// If you want to copy the code directly, please remember to install the npm package 'insert-css\ninsertCss("; // 统一增加对 insert-css 的使用注释
+
+  return str.replace(/^insertCss\(/gm, comment);
+}
+/**
+ * 执行代码
+ * @param code 运行的代码
+ * @param playgroundScriptContainer 运行的节点
+ * @param container 代码中 container dom
+ * @param replaceId rid
+ * @param cb 回调错误
+ */
+
+export function execute(code, playgroundScriptContainer, container) {
+  var replaceId = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'container';
+  var node = document.getElementById(playgroundScriptContainer);
+  var script = document.createElement('script'); // replace container id in case of multi demos in document
+
+  var newCode = code.replace(/'container'|"container"/, "'".concat(replaceId, "'"));
+  script.innerHTML = "\n// Can only have one anonymous define call per script file\n// \u548C monaco loader \u52A0\u8F7D\u51B2\u7A81\nvar __runnerDefine = window['define'];\nwindow['define'] = null;\ntry {\n  ".concat(newCode, "\n\n  window.__reportErrorInPlayground && window.__reportErrorInPlayground(null);\n} catch(e) {\n  window.__reportErrorInPlayground && window.__reportErrorInPlayground(e);\n} finally {\n  window['define'] = __runnerDefine;\n}\n  "); // 追加图表容器
+
+  node.innerHTML = container || "<div id=".concat(replaceId, " />"); // 运行 script
+
+  node.appendChild(script);
+}
+/**
+ * 编译代码
+ */
+
+export function compile(value, relativePath) {
+  var _transform = transform(value, {
+    filename: relativePath,
+    presets: ['react', 'typescript', 'es2015', 'stage-3'],
+    plugins: ['transform-modules-umd']
+  }),
+      code = _transform.code;
+
+  return code;
+}

package/dist/slots/CodePreview/CodeHeader.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export declare type CodeHeaderProps = {
+    /**
+     * 代码的标题
+     */
+    title: string;
+    /**
+     * 代码的路径
+     */
+    relativePath: string;
+    /**
+     * GitHub 的地址，用于拼接最后 GitHub 编辑地址
+     */
+    githubUrl: string;
+};
+/**
+ * 组件的 header
+ */
+export declare const CodeHeader: React.FC<any>;

package/dist/slots/CodePreview/CodeHeader.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { PageHeader, Tooltip, Space, Divider } from 'antd';
+import { EditOutlined } from '@ant-design/icons';
+import { useT } from "../hooks";
+import { getGithubSourceUrl } from "../utils";
+import styles from "./CodeHeader.module.less";
+
+/**
+ * 组件的 header
+ */
+export var CodeHeader = function CodeHeader(_ref) {
+  var title = _ref.title,
+      relativePath = _ref.relativePath,
+      githubUrl = _ref.githubUrl;
+  return /*#__PURE__*/React.createElement(PageHeader, {
+    ghost: false,
+    title: title,
+    subTitle: /*#__PURE__*/React.createElement(Tooltip, {
+      title: useT('在 GitHub 上编辑')
+    }, /*#__PURE__*/React.createElement("a", {
+      href: getGithubSourceUrl(githubUrl, relativePath, 'examples'),
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: styles.editOnGtiHubButton
+    }, /*#__PURE__*/React.createElement(EditOutlined, null))),
+    extra: /*#__PURE__*/React.createElement(Space, {
+      split: /*#__PURE__*/React.createElement(Divider, {
+        type: "vertical"
+      })
+    })
+  });
+};

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

@@ -0,0 +1,17 @@
+import React from 'react';
+export declare type CodePreviewProps = {
+    /**
+     * 预览页面头部组件，用于显示 demo 名称，一些操作栏等
+     */
+    header?: React.ReactElement;
+    /**
+     * 需要展示的错误信息
+     */
+    error: any;
+};
+/**
+ * DEMO 预览页面的预览，主要包含有：
+ * 1. 一些 header 菜单
+ * 2. 错误预览
+ */
+export declare const CodePreview: React.FC<CodePreviewProps>;

package/dist/slots/CodePreview/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Result } from 'antd';
+import { useT } from "../hooks";
+import styles from "./index.module.less";
+
+/**
+ * DEMO 预览页面的预览，主要包含有：
+ * 1. 一些 header 菜单
+ * 2. 错误预览
+ */
+export var CodePreview = function CodePreview(_ref) {
+  var header = _ref.header,
+      error = _ref.error;
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.preview
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.header
+  }, header), /*#__PURE__*/React.createElement("div", {
+    className: styles.content
+  }, /*#__PURE__*/React.createElement("div", {
+    id: "playgroundScriptContainer",
+    className: styles.playgroundScriptContainer
+  }), error ? /*#__PURE__*/React.createElement(Result, {
+    className: styles.result,
+    status: "error",
+    title: useT('演示代码报错，请检查'),
+    subTitle: /*#__PURE__*/React.createElement("pre", null, error && error.message)
+  }) : null));
+};

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

@@ -0,0 +1,42 @@
+.preview {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  padding: 16px;
+  overflow: auto;
+
+  display: flex;
+  flex-direction: column;
+
+  .header {
+    flex: 0
+  }
+
+  .content {
+    width: 100%;
+    height: 100%;
+    position: relative;
+  
+    .playgroundScriptContainer {
+      flex: 1;
+      position: relative;
+      :global(#container) {
+        width: 100%;
+        height: 100%;
+        position: relative;
+      }
+    }
+
+    // 盖在 DEMO 运行的 container 上
+    .result {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+  
+      background: #fff;
+    }
+  }
+}

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ExamplesPage } from '../../typings';
+declare type CodeRunnerProps = {
+    topic: string;
+    example: string;
+    demo: string;
+    exampleTopics: ExamplesPage.ExampleTopic[];
+    notFound?: React.Element;
+};
+/**
+ * 代码编辑器 + 代码预览区域
+ */
+export declare const CodeRunner: React.FC<CodeRunnerProps>;
+export {};

package/dist/slots/CodeRunner/index.js

@@ -0,0 +1,76 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React, { useState } from 'react';
+import { useSiteData, useLocale } from 'dumi';
+import { noop } from 'lodash-es';
+import SplitPane from 'react-split-pane';
+import { CodeEditor } from "../CodeEditor";
+import { CodePreview } from "../CodePreview";
+import { CodeHeader } from "../CodePreview/CodeHeader";
+import { getDemoInfo } from "./utils";
+import { NotFound } from "../404";
+
+/**
+ * 代码编辑器 + 代码预览区域
+ */
+export var CodeRunner = function CodeRunner(_ref) {
+  var exampleTopics = _ref.exampleTopics,
+      topic = _ref.topic,
+      example = _ref.example,
+      demo = _ref.demo,
+      _ref$notFound = _ref.notFound,
+      notFound = _ref$notFound === void 0 ? /*#__PURE__*/React.createElement(NotFound, null) : _ref$notFound;
+  var demoInfo = getDemoInfo(exampleTopics, topic, example, demo); // 找不到，啥也别干了，404 页面
+
+  if (!demoInfo) return notFound;
+  var title = demoInfo.title,
+      source = demoInfo.source,
+      relativePath = demoInfo.relativePath;
+
+  var _useSiteData = useSiteData(),
+      themeConfig = _useSiteData.themeConfig;
+
+  var githubUrl = themeConfig.githubUrl;
+
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      error = _useState2[0],
+      setError = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isFullScreen = _useState4[0],
+      setFullscreen = _useState4[1];
+
+  var locale = useLocale();
+  var header = /*#__PURE__*/React.createElement(CodeHeader, {
+    title: title[locale.id],
+    relativePath: relativePath,
+    githubUrl: githubUrl
+  });
+  return /*#__PURE__*/React.createElement(SplitPane, {
+    split: "vertical",
+    defaultSize: "50%",
+    minSize: 100
+  }, /*#__PURE__*/React.createElement(CodePreview, {
+    error: error,
+    header: header
+  }), /*#__PURE__*/React.createElement(CodeEditor, {
+    source: source,
+    relativePath: relativePath,
+    onError: setError,
+    onFullscreen: setFullscreen,
+    onDestroy: noop,
+    onReady: noop
+  }));
+};

package/dist/slots/CodeRunner/utils.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 将数据结构转化成 map，便于后续检索的速度
+ * @param exampleTopics
+ * @returns
+ */
+export declare function getExampleTopicMap(exampleTopics: ExamplesPage.ExampleTopic[]): Map<string, ExamplesPage.Demo>;
+/**
+ * 从 Context 信息中，获取到 Example 相关的信息，用于页面渲染
+ */
+export declare function getDemoInfo(exampleTopics: ExamplesPage.ExampleTopic[], topic: string, example: string, demo: string): ExamplesPage.Demo | undefined;

package/dist/slots/CodeRunner/utils.js

@@ -0,0 +1,36 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import { map } from 'lodash-es';
+/**
+ * 将数据结构转化成 map，便于后续检索的速度
+ * @param exampleTopics
+ * @returns
+ */
+
+export function getExampleTopicMap(exampleTopics) {
+  var exampleTopicMap = new Map();
+  map(exampleTopics, function (topic) {
+    map(topic.examples, function (example) {
+      map(example.demos, function (demo) {
+        exampleTopicMap.set("".concat(topic.id, "-").concat(example.id, "-").concat(demo.id), _objectSpread(_objectSpread({}, demo), {}, {
+          relativePath: "".concat(topic.id, "/").concat(example.id, "/demo/").concat(demo.filename),
+          targetExample: example,
+          targetTopic: topic
+        }));
+      });
+    });
+  });
+  return exampleTopicMap;
+}
+/**
+ * 从 Context 信息中，获取到 Example 相关的信息，用于页面渲染
+ */
+
+export function getDemoInfo(exampleTopics, topic, example, demo) {
+  var m = getExampleTopicMap(exampleTopics);
+  return m.get("".concat(topic, "-").concat(example, "-").concat(demo));
+}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+declare type Company = {
+    name: string;
+    img: string;
+};
+interface CompaniesProps {
+    title: string;
+    companies: Company[];
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const Companies: React.FC<CompaniesProps>;
+export {};

package/dist/slots/Companies/index.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Row, Col } from 'antd';
+import cx from 'classnames';
+import styles from "./index.module.less";
+export var Companies = function Companies(_ref) {
+  var title = _ref.title,
+      _ref$companies = _ref.companies,
+      companies = _ref$companies === void 0 ? [] : _ref$companies,
+      className = _ref.className,
+      style = _ref.style;
+  return /*#__PURE__*/React.createElement("div", {
+    className: cx(styles.wrapper, className),
+    style: style
+  }, /*#__PURE__*/React.createElement("div", {
+    key: "content",
+    className: styles.content
+  }, /*#__PURE__*/React.createElement("p", {
+    key: "title",
+    className: styles.title
+  }, title), /*#__PURE__*/React.createElement("div", {
+    key: "slicer",
+    className: styles.slicer
+  }), /*#__PURE__*/React.createElement("div", {
+    key: "companies-container",
+    className: styles.companiesContainer
+  }, /*#__PURE__*/React.createElement(Row, {
+    key: "companies",
+    gutter: [{
+      xs: 77,
+      sm: 77,
+      md: 50,
+      lg: 124
+    }, 10],
+    wrap: true,
+    className: styles.companies
+  }, companies.map(function (company) {
+    return /*#__PURE__*/React.createElement(Col, {
+      key: company.name,
+      className: styles.company,
+      md: 6,
+      sm: 8,
+      xs: 12
+    }, /*#__PURE__*/React.createElement("img", {
+      className: styles.companyimg,
+      src: company.img,
+      alt: company.name
+    }));
+  })))));
+};

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

@@ -0,0 +1,82 @@
+@import '../_.less';
+
+.wrapper {
+  display: flex;
+  margin: auto;
+  position: relative;
+  flex-direction: column;
+  padding: 0;
+  height: auto;
+  overflow-x: hidden;
+
+  .content {
+    height: 100%;
+    margin-bottom: 5%;
+    position: relative;
+    .container1440;
+    padding-left: 4.5%;
+  }
+
+  .title {
+    font-size: 2.714em;
+    font-weight: 500;
+    margin: 118px 0 0 0;
+    position: relative;
+    height: min-content;
+    color: rgba(0, 0, 0, 1);
+  }
+
+  .slicer {
+    width: 32px;
+    height: 6px;
+    background: linear-gradient(145deg,
+        fade(@primary-color, 70%),
+        shade(@primary-color, 20%));
+    margin-top: 64px;
+  }
+
+  .companiesContainer {
+    position: relative;
+    margin: auto;
+    margin-top: 52px;
+
+    .company {
+      margin-bottom: 20px;
+
+      .companyimg {
+        width: 100%;
+      }
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .wrapper {
+    .title {
+      font-size: 1.9rem;
+      margin: 98px 0 0 0;
+    }
+
+    .slicer {
+      width: 25px;
+      height: 6px;
+      margin: 44px 0 44px 0;
+    }
+
+    .content {
+      margin-left: 4.27%;
+      width: 91.64%;
+      max-width: 91.64%;
+    }
+
+    .companiesContainer {
+      margin-top: 50px;
+
+      .company {
+        .companyimg {
+          width: 100%;
+        }
+      }
+    }
+  }
+}

package/dist/slots/Detail/News.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface NewsProps {
+    index?: number;
+    type: IC;
+    title: IC;
+    date: string;
+    link: string;
+}
+export declare const News: React.FC<NewsProps>;

package/{es/antv/Banner/Notification.js → dist/slots/Detail/News.js}

@@ -1,10 +1,9 @@
 import React from 'react';
-import { Link } from 'react-router-dom'; // @ts-ignore
-
-import styles from './Notification.module.less';
+import { Link } from 'dumi';
+import { ic } from "../hooks";
+import styles from "./News.module.less";
 var numberImages = ['https://gw.alipayobjects.com/zos/antfincdn/IqREAm36K7/1.png', 'https://gw.alipayobjects.com/zos/antfincdn/3fG1Iqjfnz/2.png'];
-
-var Notification = function Notification(_ref) {
+export var News = function News(_ref) {
   var _ref$index = _ref.index,
       index = _ref$index === void 0 ? 0 : _ref$index,
       type = _ref.type,
@@ -22,7 +21,7 @@ var Notification = function Notification(_ref) {
     className: styles.content
   }, /*#__PURE__*/React.createElement("p", {
     className: styles.description
-  }, type, " \u2027 ", title), /*#__PURE__*/React.createElement("p", {
+  }, ic(type), " \u2027 ", ic(title)), /*#__PURE__*/React.createElement("p", {
     className: styles.date
   }, date)));
 
@@ -31,14 +30,12 @@ var Notification = function Notification(_ref) {
       href: link,
       target: "_blank",
       rel: "noopener noreferrer",
-      className: styles.notification
+      className: styles.news
     }, children);
   }
 
   return /*#__PURE__*/React.createElement(Link, {
     to: link,
-    className: styles.notification
+    className: styles.news
   }, children);
-};
-
-export default Notification;
+};