@antv/dumi-theme-antv 0.4.5 → 0.4.6

package/dist/locales/en.json

@@ -88,12 +88,18 @@
   "标准版基础产品": "Standard basic products",
   "标准版扩展产品": "Standard extended products",
   "移动定制（F版）产品": "Mobile (F series) products",
-  "感谢信赖":"WE ARE TRUSTED BY",
-  "更多产品":"More Productions",
-  "上一篇":"Previous",
-  "下一篇":"Next",
+  "感谢信赖": "WE ARE TRUSTED BY",
+  "更多产品": "More Productions",
+  "上一篇": "Previous",
+  "下一篇": "Next",
   "演示代码报错，请检查": "演示代码报错，请检查",
-  "阅读时间约":"Reading needs",
-  "分钟":"minutes",
-  "没有找到查询结果":"No query result found"
+  "阅读时间约": "Reading needs",
+  "分钟": "minutes",
+  "没有找到查询结果": "No query result found",
+  "企业级 UI 设计语言": "Enterprise UI design language",
+  "知识创作与分享工具": "Knowledge creation and Sharing tool",
+  "语雀": "Yuque",
+  "企业级 Node 开发框架": "Enterprise-class Node development framework",
+  "Sketch 工具集": "Sketch Tool set",
+  "蚂蚁体验科技": "Liven Experience technology"
 }

package/dist/locales/zh.json

@@ -93,7 +93,13 @@
   "上一篇": "上一篇",
   "下一篇": "下一篇",
   "演示代码报错，请检查": "演示代码报错，请检查",
-  "阅读时间约":"阅读时间约",
-  "分钟":"分钟",
-  "没有找到查询结果":"没有找到查询结果"
+  "阅读时间约": "阅读时间约",
+  "分钟": "分钟",
+  "没有找到查询结果": "没有找到查询结果",
+  "企业级 UI 设计语言": "企业级 UI 设计语言",
+  "知识创作与分享工具": "知识创作与分享工具",
+  "语雀": "语雀",
+  "企业级 Node 开发框架": "企业级 Node 开发框架",
+  "Sketch 工具集": "Sketch 工具集",
+  "蚂蚁体验科技": "蚂蚁体验科技"
 }

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

@@ -6,5 +6,7 @@ export interface NewsProps {
     title: IC;
     date: string;
     link: string;
+    subTitle?: string;
+    img?: string;
 }
 export declare const News: React.FC<NewsProps>;

package/dist/slots/Detail/News.js

@@ -9,6 +9,8 @@ export var News = function News(_ref) {
     type = _ref.type,
     title = _ref.title,
     date = _ref.date,
+    subTitle = _ref.subTitle,
+    img = _ref.img,
     _ref$link = _ref.link,
     link = _ref$link === void 0 ? '' : _ref$link;
   var lang = useLocale().id;
@@ -18,9 +20,14 @@ export var News = function News(_ref) {
     className: styles.content
   }, /*#__PURE__*/React.createElement("p", {
     className: styles.description
-  }, ic(type), " \u2027 ", ic(title)), /*#__PURE__*/React.createElement("p", {
+  }, img && /*#__PURE__*/React.createElement("img", {
+    src: img,
+    alt: "message_title"
+  }), type ? "".concat(ic(type), " \u2027 ") : '', ic(title)), date && /*#__PURE__*/React.createElement("p", {
     className: styles.date
-  }, date)));
+  }, date), subTitle && /*#__PURE__*/React.createElement("p", {
+    className: styles.subTitle
+  }, ic(subTitle))));
   if (link.startsWith('http')) {
     return /*#__PURE__*/React.createElement("a", {
       href: link,

package/dist/slots/Detail/News.module.less

@@ -32,14 +32,24 @@
         font-weight: 500;
         font-size: 20px;
         text-align: center;
+        position: relative;
+
+        >img {
+          width: 24px;
+          height: 24px;
+          position: relative;
+          top: -2px;
+          left: -4px;
+        }
       }
 
-      .date {
+      .date,.subTitle {
         color: #424E66;
         bottom: 0;
         font-size: 1em;
         margin-top: 4px;
         margin-bottom: 0;
+        text-align: center;
       }
     }
   }
@@ -55,12 +65,17 @@
     width: 100%;
 
     &:nth-child(1) {
-      animation: showAndHide0 6s infinite;
+      animation: showAndHide0 9s infinite;
     }
 
     &:nth-child(2) {
       top: 44px;
-      animation: showAndHide1 6s infinite;
+      animation: showAndHide1 9s infinite;
+    }
+
+    &:nth-child(3) {
+      top: 44px;
+      animation: showAndHide2 9s infinite;
     }
   }
 }
@@ -79,18 +94,12 @@
   }
 
   33.3% {
-    opacity: 1;
-    top: 0px;
-    z-index: 1;
-  }
-
-  50% {
     opacity: 0;
-    top: -30px;
+    top: 0px;
     z-index: 0;
   }
 
-  83.3% {
+  66.6% {
     opacity: 0;
     top: 30px;
     z-index: 0;
@@ -103,7 +112,6 @@
   }
 }
 
-/* Standard syntax */
 @keyframes showAndHide1 {
   0% {
     opacity: 0;
@@ -112,18 +120,38 @@
   }
 
   33.3% {
+    opacity: 1;
+    top: 0px;
+    z-index: 1;
+  }
+
+  66.6% {
+    opacity: 0;
+    top: 0px;
+    z-index: 0;
+  }
+
+  100% {
     opacity: 0;
     top: 30px;
     z-index: 0;
   }
+}
 
-  50% {
-    opacity: 1;
-    top: 0px;
-    z-index: 1;
+@keyframes showAndHide2 {
+  0% {
+    opacity: 0;
+    top: 30px;
+    z-index: 0;
   }
 
-  83.3% {
+  33.3% {
+    opacity: 0;
+    top: 30px;
+    z-index: 0;
+  }
+
+  66.6% {
     opacity: 1;
     top: 0px;
     z-index: 1;
@@ -131,7 +159,8 @@
 
   100% {
     opacity: 0;
-    top: -30px;
+    top: 0px;
     z-index: 0;
   }
 }
+

package/dist/slots/Detail/index.js

@@ -22,8 +22,6 @@ import { useLocale } from 'dumi/dist/client/theme-api';
 import { ic } from "../hooks";
 import { News } from "./News";
 import styles from "./index.module.less";
-var AssetsNewsURL = 'https://assets.antv.antgroup.com/antv/news.json';
-
 /**
  * Index.技术栈的描述区域！
  * 各自配置
@@ -49,7 +47,7 @@ export var Detail = function Detail(_ref) {
     setRemoteNews = _useState2[1];
   var lang = useLocale().id;
   useEffect(function () {
-    fetch(AssetsNewsURL).then(function (res) {
+    fetch('https://site-data-pre.alipay.com/antv/banner-messages.json').then(function (res) {
       return res.json();
     }).then(function (data) {
       setRemoteNews(data);
@@ -107,7 +105,7 @@ export var Detail = function Detail(_ref) {
     repo: githubObj.name
   })))), /*#__PURE__*/React.createElement("div", {
     className: cx(styles.news, 'news')
-  }, (news || remoteNews).slice(0, 2).map(function (n, i) {
+  }, (news || remoteNews).slice(0, 3).map(function (n, i) {
     return /*#__PURE__*/React.createElement(News, _extends({
       key: i,
       index: i

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

@@ -66,11 +66,17 @@
       font-family: AlibabaPuHuiTiR;
       font-size: 18px;
       color: #424E66;
+      max-height: 145px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      -webkit-line-clamp: 4;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
     }
 
     .buttons {
       display: flex;
-      margin-top: 5.56%;
+      margin-top: max(3%, 40px);
 
       .buttonLink {
         display: flex;
@@ -83,7 +89,8 @@
         transition: all 0.3s;
         text-align: center;
         height: 54px;
-        width: 166px;
+        min-width: 166px;
+        padding: 0 10px;
         box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.10);
         background-color: #691EFF;
         font-size: 18px;
@@ -194,10 +201,10 @@
   .news {
     width: 100%;
     display: flex;
-    bottom: 40px;
+    bottom: 30px;
     position: absolute;
     z-index: 3;
-    height: 108px;
+    height: 128px;
     box-sizing: border-box;
     padding: 0 4.5%;
   }

package/dist/slots/Footer/index.js

@@ -123,7 +123,9 @@ export var Footer = function Footer(props) {
         src: "https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg",
         alt: "more products"
       }),
-      title: '更多产品',
+      title: /*#__PURE__*/React.createElement(FormattedMessage, {
+        id: "\u66F4\u591A\u4EA7\u54C1"
+      }),
       items: [{
         icon: /*#__PURE__*/React.createElement("img", {
           src: "https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg",
@@ -131,16 +133,22 @@ export var Footer = function Footer(props) {
         }),
         title: 'Ant Design',
         url: 'https://ant.design',
-        description: '企业级 UI 设计语言',
+        description: /*#__PURE__*/React.createElement(FormattedMessage, {
+          id: "\u4F01\u4E1A\u7EA7 UI \u8BBE\u8BA1\u8BED\u8A00"
+        }),
         openExternal: true
       }, {
         icon: /*#__PURE__*/React.createElement("img", {
           src: "https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg",
           alt: "yuque"
         }),
-        title: '语雀',
+        title: /*#__PURE__*/React.createElement(FormattedMessage, {
+          id: "\u8BED\u96C0"
+        }),
         url: 'https://yuque.com',
-        description: '知识创作与分享工具',
+        description: /*#__PURE__*/React.createElement(FormattedMessage, {
+          id: "\u77E5\u8BC6\u521B\u4F5C\u4E0E\u5206\u4EAB\u5DE5\u5177"
+        }),
         openExternal: true
       }, {
         icon: /*#__PURE__*/React.createElement("img", {
@@ -149,7 +157,9 @@ export var Footer = function Footer(props) {
         }),
         title: 'Egg',
         url: 'https://eggjs.org',
-        description: '企业级 Node 开发框架',
+        description: /*#__PURE__*/React.createElement(FormattedMessage, {
+          id: "\u4F01\u4E1A\u7EA7 Node \u5F00\u53D1\u6846\u67B6"
+        }),
         openExternal: true
       }, {
         icon: /*#__PURE__*/React.createElement("img", {
@@ -157,7 +167,9 @@ export var Footer = function Footer(props) {
           alt: "kitchen"
         }),
         title: 'Kitchen',
-        description: 'Sketch 工具集',
+        description: /*#__PURE__*/React.createElement(FormattedMessage, {
+          id: "Sketch \u5DE5\u5177\u96C6"
+        }),
         url: 'https://kitchen.alipay.com',
         openExternal: true
       }, {
@@ -165,7 +177,9 @@ export var Footer = function Footer(props) {
           src: "https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg",
           alt: "xtech"
         }),
-        title: '蚂蚁体验科技',
+        title: /*#__PURE__*/React.createElement(FormattedMessage, {
+          id: "\u8682\u8681\u4F53\u9A8C\u79D1\u6280"
+        }),
         url: 'https://xtech.antfin.com/',
         openExternal: true
       }]

package/dist/slots/Header/Navs.js

@@ -52,7 +52,11 @@ export var Navs = function Navs(_ref) {
           to: url
         }, displayName));
       }))
-    }, /*#__PURE__*/React.createElement("span", null, title, /*#__PURE__*/React.createElement(DownOutlined, null)))) : /*#__PURE__*/React.createElement("li", {
+    }, /*#__PURE__*/React.createElement("span", null, title, /*#__PURE__*/React.createElement(DownOutlined, {
+      style: {
+        marginLeft: '6px'
+      }
+    })))) : /*#__PURE__*/React.createElement("li", {
       key: title,
       className: className
     }, nav.target === '_blank' || href.startsWith('http') ? /*#__PURE__*/React.createElement("a", {

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { INav } from './Navs';
+import type { IC } from '../../types';
 export type HeaderProps = {
     pathPrefix?: string;
     /** 子标题 */
@@ -71,5 +72,13 @@ export type HeaderProps = {
             appId: string;
         };
     };
+    announcement?: {
+        title: IC;
+        icon: string;
+        link: {
+            url: string;
+            text: IC;
+        };
+    };
 };
 export declare const Header: React.FC<Partial<HeaderProps>>;

package/dist/slots/Header/index.js

@@ -11,13 +11,13 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 // import { navigate } from 'gatsby';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { useMedia } from 'react-use';
 import { useNavigate } from "react-router-dom";
 import cx from 'classnames';
 import { useSiteData, useLocale, FormattedMessage } from 'dumi';
 import { GithubOutlined, MenuOutlined, CaretDownFilled, DownOutlined, WechatOutlined, LinkOutlined, CheckOutlined } from '@ant-design/icons';
-import { Modal, Button, Popover, Menu, Dropdown, Select } from 'antd';
+import { Alert, Modal, Button, Popover, Menu, Dropdown, Select } from 'antd';
 import { get, map, size } from 'lodash-es';
 import { Search } from "./Search";
 import { Products } from "./Products";
@@ -28,13 +28,7 @@ import styles from "./index.module.less";
 function redirectChinaMirror(chinaMirrorOrigin) {
   window.location.href = window.location.href.replace(window.location.origin, chinaMirrorOrigin);
 }
-function fetchBanner() {
-  return fetch('https://assets.antv.antgroup.com/antv/banner.json' // 生产环境
-  // 'https://site-data-pre.alipay.com/antv/banner.json', // 预发测试
-  ).then(function (res) {
-    return res.json();
-  });
-}
+var ANNOUNCEMENT_LOCALSTORAGE_ID = 'ANNOUNCEMENT_LOCALSTORAGE_ID';
 
 /**
  * 头部菜单
@@ -43,15 +37,10 @@ var HeaderComponent = function HeaderComponent(_ref) {
   var _cx, _cx4;
   var _ref$subTitle = _ref.subTitle,
     subTitle = _ref$subTitle === void 0 ? '' : _ref$subTitle,
-    subTitleHref = _ref.subTitleHref,
-    _ref$pathPrefix = _ref.pathPrefix,
-    pathPrefix = _ref$pathPrefix === void 0 ? '' : _ref$pathPrefix,
     _ref$navs = _ref.navs,
     navs = _ref$navs === void 0 ? [] : _ref$navs,
     _ref$showSearch = _ref.showSearch,
     showSearch = _ref$showSearch === void 0 ? true : _ref$showSearch,
-    _ref$showGithubStar = _ref.showGithubStar,
-    showGithubStar = _ref$showGithubStar === void 0 ? false : _ref$showGithubStar,
     _ref$showGithubCorner = _ref.showGithubCorner,
     showGithubCorner = _ref$showGithubCorner === void 0 ? true : _ref$showGithubCorner,
     _ref$showAntVProducts = _ref.showAntVProductsCard,
@@ -66,8 +55,6 @@ var HeaderComponent = function HeaderComponent(_ref) {
     _ref$githubUrl = _ref.githubUrl,
     githubUrl = _ref$githubUrl === void 0 ? 'https://github.com/antvis' : _ref$githubUrl,
     defaultLanguage = _ref.defaultLanguage,
-    _ref$Link = _ref.Link,
-    Link = _ref$Link === void 0 ? 'a' : _ref$Link,
     transparent = _ref.transparent,
     isHomePage = _ref.isHomePage,
     _ref$isAntVSite = _ref.isAntVSite,
@@ -78,43 +65,26 @@ var HeaderComponent = function HeaderComponent(_ref) {
     versions = _ref.versions,
     internalSite = _ref.internalSite,
     ecosystems = _ref.ecosystems,
-    searchOptions = _ref.searchOptions;
+    announcement = _ref.announcement;
   var isAntVHome = isAntVSite && isHomePage; // 是否为AntV官网首页
 
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     bannerVisible = _useState2[0],
     setBannerVisible = _useState2[1];
-  var _useState3 = useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    banner = _useState4[0],
-    setBanner = _useState4[1];
   useEffect(function () {
-    fetchBanner().then(function (_ref2) {
-      var id = _ref2.id,
-        html = _ref2.html;
-      if (id && html) {
-        setBanner({
-          id: id,
-          html: html
-        });
-        setBannerVisible(localStorage.getItem(id) !== 'x');
-      }
-    }).catch(function () {
-      setBanner(null);
-      setBannerVisible(false);
-    });
-  }, []);
+    setBannerVisible(localStorage.getItem(ANNOUNCEMENT_LOCALSTORAGE_ID) !== 'true');
+  }, [announcement]);
   function onBannerClose() {
-    localStorage.setItem(banner.id, 'x');
+    localStorage.setItem(ANNOUNCEMENT_LOCALSTORAGE_ID, 'true');
     setBannerVisible(false);
   }
   var showChinaMirror = !!internalSite;
   var chinaMirrorUrl = get(internalSite, 'url');
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    chinaMirrorHintVisible = _useState6[0],
-    updateChinaMirrorHintVisible = _useState6[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    chinaMirrorHintVisible = _useState4[0],
+    updateChinaMirrorHintVisible = _useState4[1];
   useEffect(function () {
     var timeout = setTimeout(function () {
       if (showChinaMirror && lang === 'zh' && !localStorage.getItem('china-mirror-no-more-hint') && window.location.host.includes('antv.vision')) {
@@ -127,14 +97,14 @@ var HeaderComponent = function HeaderComponent(_ref) {
   });
   var locale = useLocale();
   var nav = useNavigate();
-  var _useState7 = useState(locale.id),
+  var _useState5 = useState(locale.id),
+    _useState6 = _slicedToArray(_useState5, 2),
+    lang = _useState6[0],
+    setLang = _useState6[1];
+  var _useState7 = useState(false),
     _useState8 = _slicedToArray(_useState7, 2),
-    lang = _useState8[0],
-    setLang = _useState8[1];
-  var _useState9 = useState(false),
-    _useState10 = _slicedToArray(_useState9, 2),
-    productMenuVisible = _useState10[0],
-    setProductMenuVisible = _useState10[1];
+    productMenuVisible = _useState8[0],
+    setProductMenuVisible = _useState8[1];
   var productMenuHovering = false;
   var onProductMouseEnter = function onProductMouseEnter(e) {
     productMenuHovering = true;
@@ -158,10 +128,10 @@ var HeaderComponent = function HeaderComponent(_ref) {
   var onToggleProductMenuVisible = function onToggleProductMenuVisible() {
     setProductMenuVisible(!productMenuVisible);
   };
-  var _useState11 = useState(false),
-    _useState12 = _slicedToArray(_useState11, 2),
-    popupMenuVisible = _useState12[0],
-    setPopupMenuVisible = _useState12[1];
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    popupMenuVisible = _useState10[0],
+    setPopupMenuVisible = _useState10[1];
   var onTogglePopupMenuVisible = function onTogglePopupMenuVisible() {
     setPopupMenuVisible(!popupMenuVisible);
   };
@@ -212,9 +182,9 @@ var HeaderComponent = function HeaderComponent(_ref) {
   }) : null, /** 生态产品 */
   size(ecosystems) ? /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Dropdown, {
     className: styles.ecoSystems,
-    overlay: /*#__PURE__*/React.createElement(Menu, null, map(ecosystems, function (_ref3) {
-      var url = _ref3.url,
-        ecosystemName = _ref3.name;
+    overlay: /*#__PURE__*/React.createElement(Menu, null, map(ecosystems, function (_ref2) {
+      var url = _ref2.url,
+        ecosystemName = _ref2.name;
       return /*#__PURE__*/React.createElement(Menu.Item, {
         key: ecosystemName === null || ecosystemName === void 0 ? void 0 : ecosystemName[lang]
       }, /*#__PURE__*/React.createElement("a", {
@@ -273,7 +243,11 @@ var HeaderComponent = function HeaderComponent(_ref) {
       e.preventDefault();
       redirectChinaMirror(chinaMirrorUrl);
     }
-  }, ic(get(internalSite, 'name')), !isAntVHome && /*#__PURE__*/React.createElement(LinkOutlined, null)))) : null, showChinaMirror && !isWide && /*#__PURE__*/React.createElement(Modal, {
+  }, ic(get(internalSite, 'name')), !isAntVHome && /*#__PURE__*/React.createElement(LinkOutlined, {
+    style: {
+      marginLeft: '6px'
+    }
+  })))) : null, showChinaMirror && !isWide && /*#__PURE__*/React.createElement(Modal, {
     visible: chinaMirrorHintVisible,
     cancelText: "\u4E0D\u518D\u63D0\u9192",
     okText: "\u7ACB\u5373\u524D\u5F80",
@@ -301,13 +275,20 @@ var HeaderComponent = function HeaderComponent(_ref) {
       window.location.href = chinaMirrorUrl;
     },
     className: styles.remindHref
-  }, ic(get(internalSite, 'name')), /*#__PURE__*/React.createElement(LinkOutlined, null)), /*#__PURE__*/React.createElement("span", null, " \u7AD9\u70B9\u3002"))), /** 产品列表 */
+  }, ic(get(internalSite, 'name')), /*#__PURE__*/React.createElement(LinkOutlined, {
+    style: {
+      marginLeft: '6px'
+    }
+  })), /*#__PURE__*/React.createElement("span", null, " \u7AD9\u70B9\u3002"))), /** 产品列表 */
   showAntVProductsCard && /*#__PURE__*/React.createElement("li", productItemProps, /*#__PURE__*/React.createElement("a", null, /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "\u6240\u6709\u4EA7\u54C1"
   }), !isAntVHome ? /*#__PURE__*/React.createElement("img", {
     src: "https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png",
     alt: "antv logo arrow",
-    className: cx(styles.arrow, _defineProperty({}, styles.open, productMenuVisible))
+    className: cx(styles.arrow, _defineProperty({}, styles.open, productMenuVisible)),
+    style: {
+      marginLeft: '6px'
+    }
   }) : /*#__PURE__*/React.createElement(CaretDownFilled, {
     style: {
       top: '1px',
@@ -345,8 +326,8 @@ var HeaderComponent = function HeaderComponent(_ref) {
     overlay: /*#__PURE__*/React.createElement(Menu, {
       defaultSelectedKeys: [lang],
       selectable: true,
-      onSelect: function onSelect(_ref4) {
-        var key = _ref4.key;
+      onSelect: function onSelect(_ref3) {
+        var key = _ref3.key;
         if (key === lang) {
           return;
         }
@@ -414,9 +395,29 @@ var HeaderComponent = function HeaderComponent(_ref) {
     target: "_blank",
     rel: "noreferrer"
   }, /*#__PURE__*/React.createElement(GithubOutlined, null))));
+  var announcementTitle = useMemo(function () {
+    return get(announcement, ['title', lang]);
+  }, [announcement, lang]);
+  var announcementLinkTitle = useMemo(function () {
+    return get(announcement, ['link', 'text', lang]);
+  }, [announcement, lang]);
   return /*#__PURE__*/React.createElement("header", {
     className: cx(styles.header, (_cx4 = {}, _defineProperty(_cx4, styles.transparent, !!transparent && !productMenuVisible), _defineProperty(_cx4, styles.isHomePage, !!isHomePage && !isAntVHome), _defineProperty(_cx4, styles.lightTheme, !!isAntVHome && !productMenuVisible && isWide), _defineProperty(_cx4, styles.isAntVHome, !!isAntVHome), _defineProperty(_cx4, styles.fixed, popupMenuVisible), _cx4))
-  }, /*#__PURE__*/React.createElement("div", {
+  }, bannerVisible && announcementTitle && /*#__PURE__*/React.createElement(Alert, {
+    className: styles.banner,
+    message: /*#__PURE__*/React.createElement("div", {
+      className: styles.topAlert
+    }, announcement.icon && /*#__PURE__*/React.createElement("img", {
+      src: announcement.icon
+    }), /*#__PURE__*/React.createElement("div", null, announcementTitle), announcementLinkTitle && /*#__PURE__*/React.createElement("a", {
+      href: announcement.link.url
+    }, announcementLinkTitle)),
+    type: "info",
+    banner: true,
+    closable: true,
+    showIcon: false,
+    onClose: onBannerClose
+  }), /*#__PURE__*/React.createElement("div", {
     className: styles.container
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.left
@@ -452,7 +453,8 @@ export var Header = function Header(props) {
     versions = themeConfig.versions,
     ecosystems = themeConfig.ecosystems,
     navs = themeConfig.navs,
-    docsearchOptions = themeConfig.docsearchOptions;
+    docsearchOptions = themeConfig.docsearchOptions,
+    announcement = themeConfig.announcement;
   var searchOptions = {
     docsearchOptions: docsearchOptions
   };
@@ -479,7 +481,8 @@ export var Header = function Header(props) {
     navs: navs,
     searchOptions: searchOptions,
     isHomePage: isHomePage,
-    transparent: isHomePage && isAntVSite
+    transparent: isHomePage && isAntVSite,
+    announcement: announcement
   };
   return /*#__PURE__*/React.createElement(HeaderComponent, Object.assign({}, headerProps, props));
 };

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

@@ -382,6 +382,23 @@
       }
     }
   }
+
+  .topAlert {
+    display: flex;
+    height: 22px;
+    justify-content: center;
+    align-items: center;
+
+    > img {
+      width: 16px;
+      height: 16px;
+      margin-right: 8px;
+    }
+
+    > a {
+      margin-left: 8px;
+    }
+  }
 }
 
 .remindHref {

package/dist/slots/ManualContent/index.js

@@ -12,6 +12,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { MenuFoldOutlined, MenuUnfoldOutlined, VerticalAlignTopOutlined } from '@ant-design/icons';
+import { get } from 'lodash';
 import { Affix, BackTop, Layout, Menu } from 'antd';
 import { useFullSidebarData, useLocale, useRouteMeta, useSiteData } from 'dumi';
 import Drawer from 'rc-drawer';
@@ -100,8 +101,13 @@ export var ManualContent = function ManualContent(_ref) {
           funllSidebarData[item.key] && ((_funllSidebarData$ite = funllSidebarData[item.key][0].children) === null || _funllSidebarData$ite === void 0 ? void 0 : _funllSidebarData$ite.forEach(function (itemChild) {
             var label = itemChild.title;
             var key = itemChild.link;
+            var tag = get(itemChild, ['frontmatter', 'tag']);
             item.children.push(_objectSpread(_objectSpread({}, itemChild), {}, {
-              label: label,
+              label: tag ? /*#__PURE__*/React.createElement("div", {
+                className: styles.memuLabel
+              }, label, /*#__PURE__*/React.createElement("div", {
+                className: styles.tag
+              }, tag)) : label,
               key: key
             }));
           }));
@@ -299,7 +305,7 @@ export var ManualContent = function ManualContent(_ref) {
   }, /*#__PURE__*/React.createElement(VerticalAlignTopOutlined, null))))))), is991Wide ? /*#__PURE__*/React.createElement(Layout.Sider, {
     theme: "light",
     width: 260
-  }, /*#__PURE__*/React.createElement(Affix, {
+  }, /*#__PURE__*/React.createElement("div", {
     className: styles.toc
   }, /*#__PURE__*/React.createElement(ContentTable, null))) : /*#__PURE__*/React.createElement("div", null)));
 };

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

@@ -76,7 +76,7 @@
     margin: 0.6em 0;
   }
 
-  pre > code[class*='language-'] {
+  pre>code[class*='language-'] {
     line-height: 1.8;
   }
 
@@ -125,7 +125,7 @@
     padding: 0;
   }
 
-  ul:not(:global(.ant-skeleton-paragraph)) > li {
+  ul:not(:global(.ant-skeleton-paragraph))>li {
     margin-left: 20px;
     padding-left: 4px;
     list-style-type: circle;
@@ -135,14 +135,14 @@
     }
   }
 
-  ol > li {
+  ol>li {
     margin-left: 20px;
     padding-left: 4px;
     list-style-type: decimal;
   }
 
-  ul > li > p,
-  ol > li > p {
+  ul>li>p,
+  ol>li>p {
     margin: 0.2em 0;
   }
 
@@ -201,8 +201,8 @@
     margin: 0;
   }
 
-  > br,
-  > p > br {
+  >br,
+  >p>br {
     clear: both;
   }
 
@@ -228,14 +228,14 @@
   .contentReset() {
     min-height: 400px;
 
-    > img,
-    > p > img {
+    >img,
+    >p>img {
       max-width: 100%;
       margin: 0.5em 0;
     }
 
-    > br,
-    > p > br {
+    >br,
+    >p>br {
       clear: both;
     }
   }
@@ -274,6 +274,7 @@
     }
   }
 }
+
 .contentTitle {
   margin-top: 8px;
   margin-bottom: 20px;
@@ -282,6 +283,7 @@
   font-family: Avenir, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   line-height: 38px;
 }
+
 .sider {
   width: 280px !important;
   height: inherit;
@@ -299,9 +301,27 @@
 }
 
 .affix {
-  & > div {
+  &>div {
     height: 100%;
   }
+
+  .memuLabel {
+    display: flex;
+    align-items: center;
+
+    .tag {
+      position: absolute;
+      right: 20px;
+      background: #f9f0ff;
+      color: #873bf4;
+      border: 1px solid #873bf4;
+      border-radius: 8px;
+      height: 22px;
+      font-size: 12px !important;
+      padding: 0 8px;
+      line-height: 20px;
+    }
+  }
 }
 
 .menuIcon {
@@ -384,7 +404,7 @@
       transition: all 0.3s;
       margin: 12px;
 
-      > div {
+      >div {
         border: 1px solid @border-color-split;
         border-radius: 6px;
         overflow: hidden;
@@ -403,7 +423,7 @@
         }
       }
 
-      &:hover > div {
+      &:hover>div {
         transform: translateY(-4px);
         border-color: transparent;
         box-shadow: 0 6px 16px rgba(107, 147, 224, 0.14);
@@ -492,10 +512,11 @@
       padding-right: 32px;
     }
   }
+
   .tocSiderbar {
-      display: none;
+    display: none;
   }
- 
+
   .gallery {
     .galleryCard {
       width: 50%;
@@ -604,7 +625,7 @@
   color: #868484;
   background-color: #fff;
   box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
-  0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
   transition: color 0.3s;
   width: 44px;
   height: 44px;
@@ -672,4 +693,4 @@
   transition: all .3s;
   background-color: #fff;
   font-family: Avenir, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
-}
+}

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@antv/dumi-theme-antv",
-  "version": "0.4.5",
+  "version": "0.4.6",
   "description": "AntV website theme based on dumi2.",
   "types": "dist/types.d.ts",
   "scripts": {
+    "start": "cd example && npm run start",
     "dev": "father dev",
-    "dev:example-site": "cd example && npm run start",
     "build": "npm run prepare && father build",
     "prepare": "father link-dev-theme",
     "lint": "npm run lint:es && npm run lint:css",