@antv/dumi-theme-antv 0.8.0-beta.1 → 0.8.0-beta.11

package/dist/slots/CodeEditor/index.js

@@ -13,9 +13,9 @@ 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 MonacoEditor, { loader } from '@monaco-editor/react';
-import { Drawer, Switch } from 'antd';
+import { Button, Drawer, Switch, Tooltip } from 'antd';
 import { autoType as d3AutoType, dsvFormat } from 'd3-dsv';
-import { useLocale, useSiteData } from 'dumi';
+import { useIntl, useLocale, useLocation, useSiteData } from 'dumi';
 import { debounce, noop } from 'lodash-es';
 import { format } from 'prettier';
 import parserBabel from 'prettier/parser-babel';
@@ -26,6 +26,7 @@ import styles from "./index.module.less";
 import { EDITOR_TABS, Toolbar } from "./Toolbar";
 import { compile, execute, replaceInsertCss } from "./utils";
 import MsgBox from "../../pages/AIPlayground/components/MsgBox";
+import { ClearOutlined } from '@ant-design/icons';
 loader.config({
   'vs/nls': {
     availableLanguages: {
@@ -57,10 +58,14 @@ var CodeEditor = function CodeEditor(_ref) {
     _ref$onError = _ref.onError,
     onError = _ref$onError === void 0 ? noop : _ref$onError,
     _ref$onFullscreen = _ref.onFullscreen,
-    onFullscreen = _ref$onFullscreen === void 0 ? noop : _ref$onFullscreen;
+    onFullscreen = _ref$onFullscreen === void 0 ? noop : _ref$onFullscreen,
+    _ref$showAI = _ref.showAI,
+    showAI = _ref$showAI === void 0 ? true : _ref$showAI;
+  var umiLocation = useLocation();
   var locale = useLocale();
   var _useSiteData = useSiteData(),
     themeConfig = _useSiteData.themeConfig;
+  var intl = useIntl();
   var _themeConfig$es = themeConfig.es5,
     es5 = _themeConfig$es === void 0 ? true : _themeConfig$es,
     _themeConfig$showSpec = themeConfig.showSpecTab,
@@ -103,8 +108,12 @@ var CodeEditor = function CodeEditor(_ref) {
     setCurrentEditorTab = _useState12[1];
   var _useState13 = useState(false),
     _useState14 = _slicedToArray(_useState13, 2),
-    showAI = _useState14[0],
-    setShowAI = _useState14[1];
+    showAIDrawer = _useState14[0],
+    setShowAIDrawer = _useState14[1];
+  var _useState15 = useState("_"),
+    _useState16 = _slicedToArray(_useState15, 2),
+    msgBoxKey = _useState16[0],
+    setMsgBoxKey = _useState16[1];
   var containerId = "playgroundScriptContainer_".concat(exampleId);
 
   // 出发 auto resize
@@ -280,7 +289,7 @@ var CodeEditor = function CodeEditor(_ref) {
   // 用于更新当前 example 的 spec 和 data
   useEffect(function () {
     setCurrentEditorTab(EDITOR_TABS.JAVASCRIPT);
-    setShowAI(false);
+    setShowAIDrawer(false);
   }, [exampleId]);
 
   // hook 用户的数据
@@ -384,7 +393,7 @@ var CodeEditor = function CodeEditor(_ref) {
     }
   };
   var onClickAI = function onClickAI() {
-    setShowAI(true);
+    setShowAIDrawer(true);
   };
   var onReload = function onReload() {
     setCode(source);
@@ -406,6 +415,7 @@ var CodeEditor = function CodeEditor(_ref) {
     onEditorTabChange: onTabChange,
     onToggleFullscreen: onFullscreen,
     onClickAI: onClickAI,
+    showAI: showAI,
     onReload: onReload,
     slots: {
       Spec: /*#__PURE__*/React.createElement("span", {
@@ -459,21 +469,34 @@ var CodeEditor = function CodeEditor(_ref) {
         monacoRef.current = editor;
       }
     }), /*#__PURE__*/React.createElement(Drawer, {
-      placement: "right",
       closable: true,
-      open: showAI,
+      open: showAIDrawer,
       getContainer: false,
       onClose: function onClose() {
-        return setShowAI(false);
+        return setShowAIDrawer(false);
       },
       rootClassName: styles.drawer,
-      width: '90%'
+      width: '80%',
+      key: "".concat(umiLocation.hash, "_").concat(umiLocation.key),
+      extra: /*#__PURE__*/React.createElement(Tooltip, {
+        title: intl.formatMessage({
+          id: 'ai.toolbar.clear.conversation'
+        })
+      }, /*#__PURE__*/React.createElement(Button, {
+        type: "link",
+        onClick: function onClick() {
+          return setMsgBoxKey(crypto.randomUUID());
+        }
+      }, /*#__PURE__*/React.createElement(ClearOutlined, null)))
     }, /*#__PURE__*/React.createElement(MsgBox, {
+      key: "".concat(umiLocation.hash, "_").concat(umiLocation.key, "_").concat(msgBoxKey),
       simple: true,
       messages: [{
         id: crypto.randomUUID(),
         role: 'assistant',
-        content: "\u6211\u662FAntV AI\u52A9\u624B\u3002\u60A8\u53EF\u4EE5\u968F\u65F6\u5411\u6211\u63D0\u95EE\uFF0C\u8BA9\u6211\u4E3A\u60A8\uFF1A\n              \n1\u3001\u89E3\u8BFB\u5F53\u524D\u56FE\u8868\u7684\u4EE3\u7801\u914D\u7F6E\u3002\n              \n2\u3001\u901A\u8FC7\u81EA\u7136\u8BED\u8A00\u5BF9\u8BDD\uFF0C\u57FA\u4E8E\u5F53\u524D\u6848\u4F8B\u751F\u6210\u65B0\u4EE3\u7801\u4EE5\u5B9A\u5236\u56FE\u8868\u3002",
+        content: intl.formatMessage({
+          id: 'ai.assistant.editor.intro'
+        }),
         createdAt: Date.now()
       }],
       context: valueOf(tab),

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

@@ -12,18 +12,20 @@
 
 .drawer{
   margin-top: 36px;
+
   :global {
     .ant-drawer-content {
       background: #f8f9fc;
+
       div.ant-drawer-header {
         padding-bottom: unset;
         border-bottom: unset;
-        flex-direction: row-reverse;
 
         .ant-drawer-header-title {
           flex: unset;
         }
       }
+
       .ant-drawer-body{
         display: flex;
         flex-direction: column;

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

@@ -2,10 +2,8 @@
   width: 100%;
   height: 100%;
   position: relative;
-
   padding: 24px;
   overflow: auto;
-
   display: flex;
   flex-direction: column;
 
@@ -46,7 +44,6 @@
       position: absolute;
       top: 0;
       left: 0;
-
       background: #fff;
     }
   }

package/dist/slots/CodeRunner/index.js

@@ -32,7 +32,9 @@ var CodeRunner = function CodeRunner(_ref) {
     replaceId = _ref.replaceId,
     isPlayground = _ref.isPlayground,
     _ref$notFound = _ref.notFound,
-    notFound = _ref$notFound === void 0 ? /*#__PURE__*/React.createElement(NotFound, null) : _ref$notFound;
+    notFound = _ref$notFound === void 0 ? /*#__PURE__*/React.createElement(NotFound, null) : _ref$notFound,
+    _ref$showAI = _ref.showAI,
+    showAI = _ref$showAI === void 0 ? true : _ref$showAI;
   var demoInfo = getDemoInfo(exampleTopics, topic, example, demo);
 
   // 找不到，啥也别干了，404 页面
@@ -80,7 +82,8 @@ var CodeRunner = function CodeRunner(_ref) {
     onDestroy: noop,
     onReady: noop,
     playground: playground,
-    title: ic(title)
+    title: ic(title),
+    showAI: showAI
   }))));
 };
 export default CodeRunner;

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

@@ -1,8 +1,9 @@
 :global {
   ul.dumi-default-toc {
     > li {
-      margin-left: 0px !important;
+      margin-left: 0 !important;
     }
+
     .active {
       color: #873bf4 !important;
       border-left: 3px solid #873bf4 !important;

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

@@ -1,9 +1,9 @@
 .news {
   width: 50%;
   margin-right: 2%;
-  background-color: #ffffff;
+  background-color: #fff;
   border: 1px solid #e5e8ef;
-  box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.05);
+  box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 5%);
   border-radius: 16px;
   height: 100%;
   font-size: 14px;
@@ -91,13 +91,13 @@
 @keyframes showAndHide0 {
   0% {
     opacity: 1;
-    top: 0px;
+    top: 0;
     z-index: 1;
   }
 
   33.3% {
     opacity: 0;
-    top: 0px;
+    top: 0;
     z-index: 0;
   }
 
@@ -109,7 +109,7 @@
 
   100% {
     opacity: 1;
-    top: 0px;
+    top: 0;
     z-index: 1;
   }
 }
@@ -123,13 +123,13 @@
 
   33.3% {
     opacity: 1;
-    top: 0px;
+    top: 0;
     z-index: 1;
   }
 
   66.6% {
     opacity: 0;
-    top: 0px;
+    top: 0;
     z-index: 0;
   }
 
@@ -155,13 +155,13 @@
 
   66.6% {
     opacity: 1;
-    top: 0px;
+    top: 0;
     z-index: 1;
   }
 
   100% {
     opacity: 0;
-    top: 0px;
+    top: 0;
     z-index: 0;
   }
 }

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

@@ -3,13 +3,14 @@
 .wrapper {
   min-height: 1000px;
   max-height: 1150px;
-  background: linear-gradient(225deg, #ffffff, #f0f5ff);
+  background: linear-gradient(225deg, #fff, #f0f5ff);
   height: calc(94vh);
   position: relative;
   overflow: hidden;
 
   .content {
     .container1440();
+
     height: 100%;
     position: relative;
   }
@@ -28,7 +29,7 @@
 
     .title {
       font-size: 3.4em; //2.875em;
-      color: rgba(0, 0, 0, 1);
+      color: rgba(0, 0, 0, 100%);
       position: relative;
       font-family: AlibabaPuHuiTiRHeavy;
 
@@ -39,8 +40,7 @@
 
     .description {
       margin-top: 0.83%; //12px;
-      margin-bottom: 0px;
-      color: rgba(106, 123, 140, 1);
+      margin-bottom: 0;
       font-weight: 200;
       position: relative;
       width: 40%;
@@ -52,7 +52,7 @@
       overflow: hidden;
       text-overflow: ellipsis;
       -webkit-line-clamp: 4;
-      display: -webkit-box;
+      display: box;
       -webkit-box-orient: vertical;
     }
 
@@ -64,7 +64,6 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        cursor: pointer;
         border-radius: 12px;
         z-index: 10;
         position: relative;
@@ -73,13 +72,12 @@
         height: 54px;
         min-width: 166px;
         padding: 0 10px;
-        box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.1);
         background-color: #691eff;
         font-size: 18px;
         cursor: pointer;
         box-shadow: 0 8px 28px 0 #f2f2f2;
         margin-right: 20px;
-        color: #ffffff;
+        color: #fff;
         overflow: hidden;
 
         .icon {
@@ -94,8 +92,7 @@
         }
 
         &.primary {
-          color: #fff;
-          background-color: #ffffff;
+          background-color: #fff;
           color: #000;
           border: 1px solid #e8e8e8;
 
@@ -123,8 +120,8 @@
             display: flex;
             height: 54px;
             cursor: pointer;
-            box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.05);
-            background-color: #ffffff;
+            box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 5%);
+            background-color: #fff;
             border: 1px solid #e8e8e8;
             justify-content: center;
             align-items: center;
@@ -146,6 +143,7 @@
 
             .gh-btn {
               padding: 16px;
+
               .gh-ico {
                 display: block;
                 width: 20px;
@@ -172,7 +170,7 @@
               margin-left: -8px;
               color: #1d2129;
               letter-spacing: 0;
-              font-family: AlibabaSans102-Medium;
+              font-family: "AlibabaSans102-Medium";
             }
           }
         }
@@ -195,7 +193,6 @@
     display: flex;
     position: absolute;
     right: 0;
-    margin-top: -300px;
     width: 32%;
     max-width: 598px;
     height: 324px;

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

@@ -11,7 +11,7 @@
     z-index: 1;
     top: 0;
     height: 100%;
-    box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0);
+    box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0%);
     width: 1px;
     transition: all 0.3s;
   }
@@ -45,7 +45,7 @@
   user-select: none;
   background-color: #fff;
 
-  &:after {
+  &::after {
     transition: all 0.3s;
     background-color: transparent;
     border: 1px solid transparent;
@@ -60,7 +60,7 @@
   &:hover {
     border-color: var(--primary-color);
 
-    &:before {
+    &::before {
       transition: all 0.3s;
       content: '';
       position: absolute;
@@ -127,7 +127,6 @@
     display: inline-block;
     width: 100%;
     vertical-align: bottom;
-
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;

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

@@ -36,7 +36,7 @@
     display: flex;
     justify-content: center;
     font-size: 14px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
+    border-bottom: 1px solid rgba(255, 255, 255, 25%);
     margin-bottom: 16px;
     box-sizing: border-box;
     padding-bottom: 16px;
@@ -72,7 +72,7 @@
     :global(.anticon),
     a {
       margin-right: 8px;
-      color: rgba(255, 255, 255, 0.6);
+      color: rgba(255, 255, 255, 60%);
     }
 
     &.light {

package/dist/slots/Header/Products/Product.module.less

@@ -57,7 +57,7 @@
   ul {
     list-style: none;
     padding: 0;
-    margin: 0 0 20px 0;
+    margin: 0 0 20px;
 
     &:last-child {
       margin-bottom: 32px;
@@ -87,7 +87,7 @@
         margin-bottom: 4px;
         font-size: 14px;
         line-height: 22px;
-        color: rgba(0, 0, 0, 0.85);
+        color: rgba(0, 0, 0, 85%);
         transition: all 0.3s;
 
         &:hover {

package/dist/slots/Header/Search/SearchResult.js

@@ -3,6 +3,8 @@ import React from 'react';
 import styles from "./SearchResult.module.less";
 import classnames from "classnames";
 import { createNewSession } from "../../../model/AIChat";
+import { authStore, showLoginModal } from "../../../model/auth";
+import { useSnapshot } from "valtio";
 var getHighlightInfo = function getHighlightInfo(textSegments) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, textSegments.map(function (segment) {
     return /*#__PURE__*/React.createElement("span", {
@@ -21,6 +23,16 @@ export var SearchResult = function SearchResult(_ref) {
   var _useSiteData = useSiteData(),
     themeConfig = _useSiteData.themeConfig;
   var intl = useIntl();
+  var authSnap = useSnapshot(authStore);
+  function pureSearch() {
+    createNewSession({
+      promptText: keywords,
+      mode: 'solve',
+      lib: !themeConfig.isAntVSite ? themeConfig.title : undefined,
+      jump: true,
+      lang: intl.locale === 'zh' ? 'zh' : 'en'
+    });
+  }
   return /*#__PURE__*/React.createElement("div", {
     className: styles.searchResult
   }, /*#__PURE__*/React.createElement("div", {
@@ -35,20 +47,23 @@ export var SearchResult = function SearchResult(_ref) {
   }), /*#__PURE__*/React.createElement("a", {
     className: styles.result,
     onClick: function onClick() {
-      createNewSession({
-        promptText: keywords,
-        mode: "solve",
-        lib: !themeConfig.isAntVSite ? themeConfig.title : undefined,
-        jump: true
-      });
+      if (!authSnap.isAuthenticated) {
+        showLoginModal(pureSearch);
+        return;
+      }
+      pureSearch();
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: classnames(styles.title, styles.highlighted)
   }, keywords), /*#__PURE__*/React.createElement("div", {
     className: styles.description
-  }, "\u8BD5\u8BD5\xA0", /*#__PURE__*/React.createElement("span", {
+  }, intl.formatMessage({
+    id: 'ai.search.try'
+  }), "\xA0", /*#__PURE__*/React.createElement("span", {
     className: styles.highlighted
-  }, "AI"), "\xA0\u53EF\u89C6\u5316\u7B54\u7591"))), results !== null && results !== void 0 && results.length ? results.map(function (r, index) {
+  }, "AI"), "\xA0", intl.formatMessage({
+    id: 'ai.search.visualization'
+  })))), results !== null && results !== void 0 && results.length ? results.map(function (r, index) {
     return /*#__PURE__*/React.createElement("div", {
       className: styles.item,
       key: index

package/dist/slots/Header/Search/SearchResult.module.less

@@ -51,6 +51,7 @@
         color: rgb(160, 161, 167);
         max-height: 55px;
         overflow: hidden;
+
         .segment {
           padding-left: 1px;
           padding-right: 1px;

package/dist/slots/Header/index.js

@@ -13,10 +13,10 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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(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 { CaretDownFilled, DownOutlined, GithubOutlined, LinkOutlined, MenuOutlined, WechatOutlined } from '@ant-design/icons';
+import { CaretDownFilled, DownOutlined, GithubOutlined, LinkOutlined, LogoutOutlined, MenuOutlined, MessageOutlined, UserDeleteOutlined, WechatOutlined } from '@ant-design/icons';
 import { Alert, Button, Dropdown, Menu, Modal, Popover } from 'antd';
 import cx from 'classnames';
-import { FormattedMessage, Link, useLocale, useSiteData } from 'dumi';
+import { FormattedMessage, Link, useLocale, useSiteData, useIntl, history } from 'dumi';
 import { get, map, size } from 'lodash-es';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useMedia } from 'react-use';
@@ -26,11 +26,15 @@ import { Navs } from "./Navs";
 import { Products } from "./Products";
 import { Search } from "./Search";
 import { findVersion } from "./utils";
+import { ReactComponent as UserIcon } from "../../static/user.svg";
 import { Assistant } from '@petercatai/assistant';
 import '@petercatai/assistant/style';
 import { useLocation } from 'react-router-dom';
 import { determineUserType } from "../../utils/user";
 import styles from "./index.module.less";
+import { useSnapshot } from "valtio";
+import { authStore, logout } from "../../model/auth";
+import { clearAllChatData } from "../../model/AIChat";
 function redirectChinaMirror(chinaMirrorOrigin) {
   window.location.href = window.location.href.replace(window.location.origin, chinaMirrorOrigin);
 }
@@ -76,11 +80,12 @@ var HeaderComponent = function HeaderComponent(_ref) {
     ecosystems = _ref.ecosystems,
     announcement = _ref.announcement;
   var isAntVHome = isAntVSite && isHomePage; // 是否为AntV官网首页
-
+  var authSnap = useSnapshot(authStore);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     bannerVisible = _useState2[0],
     setBannerVisible = _useState2[1];
+  var intl = useIntl();
   var showChinaMirror = !!internalSite;
   var chinaMirrorUrl = get(internalSite, 'url');
   var _useState3 = useState(false),
@@ -195,7 +200,9 @@ var HeaderComponent = function HeaderComponent(_ref) {
       href: href,
       target: "_blank",
       rel: "noreferrer"
-    }, "AI\u751F\u7801"));
+    }, /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "header.ai.code"
+    })));
   }, [isInternalUser, showWeavefox]);
   var menu = /*#__PURE__*/React.createElement("ul", {
     className: cx(styles.menu, _defineProperty(_defineProperty({}, styles.popup, !isWide), styles.popupHidden, !popupMenuVisible))
@@ -235,7 +242,9 @@ var HeaderComponent = function HeaderComponent(_ref) {
       style: {
         marginRight: '8px'
       }
-    }, "\uD83C\uDDE8\uD83C\uDDF3"), "AntV \u7CFB\u5217\u7F51\u7AD9\u90E8\u7F72\u5728 gh-pages \u4E0A\uFF0C\u82E5\u8BBF\u95EE\u901F\u5EA6\u4E0D\u4F73\uFF0C\u53EF\u4EE5\u524D\u5F80\u56FD\u5185\u955C\u50CF\u7AD9\u70B9\u3002"), /*#__PURE__*/React.createElement("div", {
+    }, "\uD83C\uDDE8\uD83C\uDDF3"), /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "header.china.mirror.title"
+    })), /*#__PURE__*/React.createElement("div", {
       style: {
         marginTop: 16,
         textAlign: 'right'
@@ -248,14 +257,18 @@ var HeaderComponent = function HeaderComponent(_ref) {
       style: {
         marginRight: 8
       }
-    }, "\u6682\u65F6\u5173\u95ED"), /*#__PURE__*/React.createElement(Button, {
+    }, /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "header.china.mirror.temp.close"
+    })), /*#__PURE__*/React.createElement(Button, {
       type: "primary",
       size: "small",
       onClick: function onClick() {
         localStorage.setItem('china-mirror-no-more-hint', Date.now().toString());
         updateChinaMirrorHintVisible(false);
       }
-    }, "\u4E0D\u518D\u63D0\u9192"))),
+    }, /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "header.china.mirror.no.more"
+    })))),
     open: chinaMirrorHintVisible,
     placement: "bottomRight",
     align: {
@@ -273,8 +286,12 @@ var HeaderComponent = function HeaderComponent(_ref) {
     }
   })))) : null, showChinaMirror && !isWide && /*#__PURE__*/React.createElement(Modal, {
     open: chinaMirrorHintVisible,
-    cancelText: "\u4E0D\u518D\u63D0\u9192",
-    okText: "\u7ACB\u5373\u524D\u5F80",
+    cancelText: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "header.china.mirror.no.more"
+    }),
+    okText: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "header.china.mirror.temp.close"
+    }),
     onCancel: function onCancel() {
       updateChinaMirrorHintVisible(false);
     },
@@ -292,7 +309,9 @@ var HeaderComponent = function HeaderComponent(_ref) {
   }, /*#__PURE__*/React.createElement("span", {
     role: "img",
     "aria-labelledby": "\u4E2D\u56FD"
-  }, "\uD83C\uDDE8\uD83C\uDDF3"), "AntV \u7CFB\u5217\u7F51\u7AD9\u90E8\u7F72\u5728 gh-pages \u4E0A\uFF0C\u82E5\u8BBF\u95EE\u901F\u5EA6\u4E0D\u4F73\uFF0C\u53EF\u4EE5\u524D\u5F80", /*#__PURE__*/React.createElement("a", {
+  }, "\uD83C\uDDE8\uD83C\uDDF3"), /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "header.china.mirror.title"
+  }), /*#__PURE__*/React.createElement("a", {
     href: chinaMirrorUrl,
     onClick: function onClick(e) {
       e.preventDefault();
@@ -370,7 +389,9 @@ var HeaderComponent = function HeaderComponent(_ref) {
       src: "https://gw.alipayobjects.com/zos/antfincdn/ZKlx96dsfs/qrcode_for_gh_f52d8b6aa591_258.jpg",
       alt: "wx-qrcode"
     }),
-    title: "\u5FAE\u4FE1\u626B\u4E00\u626B\u5173\u6CE8",
+    title: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "header.wx.qrcode.title"
+    }),
     styles: {
       body: {
         padding: 2
@@ -387,7 +408,46 @@ var HeaderComponent = function HeaderComponent(_ref) {
     href: githubUrl,
     target: "_blank",
     rel: "noreferrer"
-  }, /*#__PURE__*/React.createElement(GithubOutlined, null))));
+  }, /*#__PURE__*/React.createElement(GithubOutlined, null))), authSnap.isAuthenticated && /*#__PURE__*/React.createElement("li", {
+    className: cx(styles.navIcon, styles.githubCorner)
+  }, /*#__PURE__*/React.createElement(Dropdown, {
+    menu: {
+      items: [{
+        key: 'history',
+        label: /*#__PURE__*/React.createElement("a", {
+          onClick: function onClick() {
+            return history.push("/".concat(lang || 'zh', "/ai-playground"));
+          }
+        }, intl.formatMessage({
+          id: 'header.user.history'
+        })),
+        icon: /*#__PURE__*/React.createElement(MessageOutlined, null)
+      }, {
+        key: 'logout',
+        label: /*#__PURE__*/React.createElement("a", {
+          onClick: function onClick() {
+            return logout();
+          }
+        }, intl.formatMessage({
+          id: 'header.user.logout'
+        })),
+        icon: /*#__PURE__*/React.createElement(LogoutOutlined, null)
+      }, {
+        key: 'deleteAccount',
+        label: /*#__PURE__*/React.createElement("a", {
+          onClick: function onClick() {
+            logout();
+            clearAllChatData();
+          }
+        }, intl.formatMessage({
+          id: 'header.user.deleteAccount'
+        })),
+        icon: /*#__PURE__*/React.createElement(UserDeleteOutlined, null)
+      }]
+    }
+  }, /*#__PURE__*/React.createElement("a", null, /*#__PURE__*/React.createElement(UserIcon, {
+    className: styles.userIcon
+  })))));
   return /*#__PURE__*/React.createElement("header", {
     className: cx(styles.header, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.transparent, !!transparent && !productMenuVisible), styles.isHomePage, !!isHomePage && !isAntVHome), styles.lightTheme, !!isAntVHome && !productMenuVisible && isWide), styles.isAntVHome, !!isAntVHome), styles.fixed, popupMenuVisible))
   }, bannerVisible && announcementTitle && /*#__PURE__*/React.createElement(Alert, {