@antv/dumi-theme-antv 0.8.0-beta.0 → 0.8.0-beta.10

package/dist/components/AI/HomeDialog/PromptTextarea/index.js

@@ -10,37 +10,46 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { DatasourceCard } from "./DatasourceCard";
 import { useEventListener } from 'ahooks';
-import { message, Tooltip, Upload } from 'antd';
 import classnames from 'classnames';
 import _ from 'lodash';
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import styles from "./index.module.less";
 import { SendButton } from "./SendButton";
-import { AIMode, FileIcons } from "../../constant";
 import { ChooseLib } from "./ChooseLib";
-import { useSiteData } from 'dumi';
+import { useSiteData, useIntl } from 'dumi';
 import { ic } from "../../../../slots/hooks";
+import { useTypewriter } from "../../../../hooks/useTypewriter";
+import { authStore, showLoginModal } from "../../../../model/auth";
+import { useSnapshot } from "valtio";
 var PLACEHOLDER = {
-  implement: '今天，你想可视化什么？',
-  solve: '今天，你想解决什么可视化问题？'
+  implement: 'ai.placeholder.implement',
+  solve: 'ai.placeholder.solve'
 };
-function PromptTextarea(props) {
+export var PromptTextarea = /*#__PURE__*/React.memo(function PromptTextareaInner(props) {
   var value = props.value,
     size = props.size,
     _onChange = props.onChange,
+    onDataSummaryChange = props.onDataSummaryChange,
     onConfirm = props.onConfirm,
     onCancel = props.onCancel,
     loading = props.loading,
-    fileMeta = props.fileMeta,
     mode = props.mode,
     lib = props.lib,
     onLibChange = props.onLibChange,
     _props$showAction = props.showAction,
     showAction = _props$showAction === void 0 ? true : _props$showAction;
-  var _useState = useState(false),
+  var authSnap = useSnapshot(authStore);
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var textareaRef = useRef(null);
+
+  // 将fileMeta状态移到组件内部管理
+  var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
-    showError = _useState2[0],
-    setShowError = _useState2[1];
+    fileMeta = _useState2[0],
+    setFileMeta = _useState2[1];
+
+  // ... 其他状态和hooks保持不变
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
     focus = _useState4[0],
@@ -48,12 +57,35 @@ function PromptTextarea(props) {
   var isCompact = size === 'compact';
   var _useSiteData = useSiteData(),
     themeConfig = _useSiteData.themeConfig;
+  var typedPlaceholder = useTypewriter({
+    texts: [formatMessage({
+      id: 'ai.placeholder.whatis'
+    }, {
+      title: themeConfig.title
+    }), ic(themeConfig.metas.description)]
+  });
+
+  // 处理DataUploader的回调
+  var handleDataAnalyzed = function handleDataAnalyzed(analyzedData) {
+    setFileMeta(analyzedData.fileMeta);
+    if (onDataSummaryChange) {
+      onDataSummaryChange(analyzedData.dataSummary);
+    }
+  };
   function renderDatasourceCard() {
     if (((fileMeta === null || fileMeta === void 0 ? void 0 : fileMeta.type) === 'FILE' || (fileMeta === null || fileMeta === void 0 ? void 0 : fileMeta.type) === 'IMAGE') && fileMeta !== null && fileMeta !== void 0 && fileMeta.fileName) {
+      // 当点击DatasourceCard的关闭按钮时，应该清空状态
+      var handleClose = function handleClose() {
+        setFileMeta(null);
+        if (onDataSummaryChange) {
+          onDataSummaryChange('');
+        }
+      };
       return /*#__PURE__*/React.createElement(DatasourceCard, {
         type: fileMeta.type,
         title: fileMeta.fileName,
-        desc: fileMeta.fileSize
+        desc: fileMeta.fileSize,
+        onDelete: handleClose
       });
     } else {
       return null;
@@ -61,14 +93,18 @@ function PromptTextarea(props) {
   }
   var datasourceNode = renderDatasourceCard();
   var promptTextValid = Boolean(value);
-  var send = function send() {
-    if (!promptTextValid) {
-      message.warning('请输入指令');
-    } else {
-      setShowError(false);
+  var pureSend = function pureSend() {
+    if (promptTextValid) {
       onConfirm === null || onConfirm === void 0 || onConfirm();
     }
   };
+  var send = function send() {
+    if (!authSnap.isAuthenticated) {
+      showLoginModal(pureSend);
+      return;
+    }
+    pureSend();
+  };
   useEventListener('keydown', function (event) {
     if (event.key === 'Enter') {
       // 不区分 textarea 是否聚焦
@@ -77,6 +113,8 @@ function PromptTextarea(props) {
         send(); // 触发自定义事件
       }
     }
+  }, {
+    target: textareaRef
   });
   return /*#__PURE__*/React.createElement("div", {
     className: classnames(styles.container, _defineProperty(_defineProperty(_defineProperty({}, styles.active, focus), styles.compact, isCompact), styles.withDatasource, Boolean(datasourceNode))),
@@ -92,7 +130,12 @@ function PromptTextarea(props) {
     },
     id: "prompt-textarea",
     className: classnames(styles.promptTextarea),
-    placeholder: !isCompact && !themeConfig.isAntVSite && ic(themeConfig.metas.description) || _.get(PLACEHOLDER, mode, '今天，你想可视化什么？'),
+    ref: textareaRef,
+    placeholder:
+    // (!isCompact && !themeConfig.isAntVSite && ic(themeConfig.metas.description)) ||
+    !isCompact && !themeConfig.isAntVSite ? typedPlaceholder : formatMessage({
+      id: _.get(PLACEHOLDER, mode, 'ai.placeholder.implement')
+    }),
     value: value,
     onChange: function onChange(evt) {
       _onChange(evt.target.value);
@@ -105,19 +148,7 @@ function PromptTextarea(props) {
     value: lib,
     onChange: onLibChange,
     size: size
-  }), mode === AIMode.implement && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
-    title: isCompact && '上传数据'
-  }, /*#__PURE__*/React.createElement(Upload, null, /*#__PURE__*/React.createElement("button", {
-    type: "button"
-  }, /*#__PURE__*/React.createElement("img", {
-    src: FileIcons.FILE
-  }), " ", !isCompact && '上传数据'))), /*#__PURE__*/React.createElement(Tooltip, {
-    title: isCompact && '上传图片'
-  }, /*#__PURE__*/React.createElement(Upload, null, /*#__PURE__*/React.createElement("button", {
-    type: "button"
-  }, /*#__PURE__*/React.createElement("img", {
-    src: FileIcons.IMAGE
-  }), " ", !isCompact && '上传图片')))))), /*#__PURE__*/React.createElement("div", {
+  }))), /*#__PURE__*/React.createElement("div", {
     className: styles.actions
   }, loading ? /*#__PURE__*/React.createElement("img", {
     className: styles.actionBtn,
@@ -126,7 +157,8 @@ function PromptTextarea(props) {
   }) : /*#__PURE__*/React.createElement(SendButton, {
     onClick: send,
     disabled: !promptTextValid,
-    tip: !promptTextValid ? "\u8BF7\u8F93\u5165\u5185\u5BB9\u540E\u53D1\u9001\u6307\u4EE4" : undefined
+    tip: !promptTextValid ? formatMessage({
+      id: 'ai.msgbox.send.tip'
+    }) : undefined
   }))));
-}
-export { PromptTextarea };
+});

package/dist/components/AI/HomeDialog/PromptTextarea/index.module.less

@@ -7,10 +7,10 @@
   padding: 16px;
   gap: 16px;
   transition: all 0.2s;
-  border: 1px solid rgba(134, 144, 156, 0.2);
+  border: 1px solid rgba(134, 144, 156, 20%);
   border-radius: 16px;
-  background: #ffffff99;
-  box-shadow: 8px 8px 20px 0px #0000000a, inset 1px -1px 0 0px #ffffffe3;
+  background: #fff9;
+  box-shadow: 8px 8px 20px 0 #0000000a, inset 1px -1px 0 0 #ffffffe3;
   z-index: 10;
   display: flex;
   flex-direction: column;
@@ -37,6 +37,7 @@
 
       :global {
         button {
+          cursor: pointer;
           display: inline-flex;
           align-items: center;
           height: 32px;
@@ -51,8 +52,8 @@
 
           &.btn-error {
             color: #ff4d4f;
-            box-shadow: inset 1px -1px 0 0 rgba(255, 255, 255, 0.89),
-              0 0 12px 0 rgba(250, 16, 16, 0.23);
+            box-shadow: inset 1px -1px 0 0 rgba(255, 255, 255, 89%),
+              0 0 12px 0 rgba(250, 16, 16, 23%);
           }
 
           .btn-icon,
@@ -74,9 +75,9 @@
   }
 
   &.active {
-    background: #ffffff99;
+    background: #fff9;
     border: 1px solid #1677ff;
-    box-shadow: 0px 8px 20px 0px #1677ff29, inset 1px -1px 0 0px #ffffffe3;
+    box-shadow: 0 8px 20px 0 #1677ff29, inset 1px -1px 0 0 #ffffffe3;
 
     .promptTextarea::placeholder {
       color: transparent;
@@ -122,6 +123,6 @@
   background: transparent;
 
   &::placeholder {
-    color: rgba(122, 132, 153, 0.85);
+    color: rgba(122, 132, 153, 85%);
   }
 }

package/dist/components/AI/HomeDialog/RecommendCase/Card.js

@@ -3,22 +3,21 @@ import React from 'react';
 import styles from "./card.module.less";
 import { BarChartOutlined, QuestionCircleOutlined } from "@ant-design/icons";
 import { AIMode, AIModeMeta, COLORS } from "../../constant";
+import { FormattedMessage } from 'dumi';
 export var Card = function Card(_ref) {
   var _AIModeMeta$tag;
   var item = _ref.item,
-    index = _ref.index;
+    index = _ref.index,
+    onClick = _ref.onClick;
   var query = item.query,
     description = item.description,
     _item$imageUrls = item.imageUrls,
     imageUrls = _item$imageUrls === void 0 ? [] : _item$imageUrls,
-    link = item.link,
     tag = item.tag;
   var style = COLORS[index];
   var handleClick = function handleClick(e) {
     e.stopPropagation();
-    var urlObj = new URL(location.href);
-    urlObj.hash = "";
-    window.open(urlObj.toString(), '_blank');
+    onClick === null || onClick === void 0 || onClick();
   };
   var popoverContent = /*#__PURE__*/React.createElement("div", {
     className: styles.popoverContent
@@ -26,13 +25,17 @@ export var Card = function Card(_ref) {
     className: styles.popoverItem
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.popoverLabel
-  }, "\u6848\u4F8B\u540D"), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "ai.recommend.card.caseName"
+  })), /*#__PURE__*/React.createElement("div", {
     className: styles.popoverValue
   }, query)), /*#__PURE__*/React.createElement("div", {
     className: styles.popoverItem
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.popoverLabel
-  }, "\u63CF\u8FF0\u4FE1\u606F"), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "ai.recommend.card.description"
+  })), /*#__PURE__*/React.createElement("div", {
     className: styles.popoverValue
   }, description)));
   return /*#__PURE__*/React.createElement(Popover, {
@@ -54,7 +57,9 @@ export var Card = function Card(_ref) {
     className: styles.typeIcon
   }), /*#__PURE__*/React.createElement("span", {
     className: styles.typeText
-  }, ((_AIModeMeta$tag = AIModeMeta[tag]) === null || _AIModeMeta$tag === void 0 ? void 0 : _AIModeMeta$tag.name) || tag)), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: ((_AIModeMeta$tag = AIModeMeta[tag]) === null || _AIModeMeta$tag === void 0 ? void 0 : _AIModeMeta$tag.name) || tag
+  }))), /*#__PURE__*/React.createElement("div", {
     className: styles.title
   }, query), /*#__PURE__*/React.createElement("div", {
     className: styles.imageContainer

package/dist/components/AI/HomeDialog/RecommendCase/card.module.less

@@ -8,7 +8,7 @@
   overflow: hidden;
   position: relative;
   aspect-ratio: 292 / 208;
-  background: rgba(22, 119, 255, 0.06);
+  background: rgba(22, 119, 255, 6%);
 
   .typeTag {
     display: flex;

package/dist/components/AI/HomeDialog/RecommendCase/index.js

@@ -12,14 +12,18 @@ import { Spin } from 'antd';
 import React, { useCallback, useEffect, useState } from 'react';
 import { Card } from "./Card";
 import styles from "./index.module.less";
-import { RedoOutlined } from "@ant-design/icons";
+import { ReloadOutlined } from "@ant-design/icons";
 import RecommendJson from "./recommend.json";
 import classnames from "classnames";
+import { FormattedMessage, useSiteData } from 'dumi';
+import { sampleSize } from "lodash-es";
 export var RecommendCase = function RecommendCase(props) {
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     loading = _useState2[0],
     setLoading = _useState2[1];
+  var _useSiteData = useSiteData(),
+    themeConfig = _useSiteData.themeConfig;
   var _useState3 = useState([]),
     _useState4 = _slicedToArray(_useState3, 2),
     list = _useState4[0],
@@ -29,20 +33,40 @@ export var RecommendCase = function RecommendCase(props) {
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          try {
-            setLoading(true);
-            data = RecommendJson;
-            setList(data.slice(0, 4));
-          } catch (err) {
-            console.log(err);
-          } finally {
-            setLoading(false);
+          _context.prev = 0;
+          setLoading(true);
+          data = [];
+          if (!(themeConfig !== null && themeConfig !== void 0 && themeConfig.recommend)) {
+            _context.next = 9;
+            break;
           }
-        case 1:
+          _context.next = 6;
+          return fetch(themeConfig.recommend).then(function (res) {
+            return res.json();
+          });
+        case 6:
+          data = _context.sent;
+          _context.next = 10;
+          break;
+        case 9:
+          data = RecommendJson;
+        case 10:
+          setList(sampleSize(data, 4));
+          _context.next = 16;
+          break;
+        case 13:
+          _context.prev = 13;
+          _context.t0 = _context["catch"](0);
+          console.log(_context.t0);
+        case 16:
+          _context.prev = 16;
+          setLoading(false);
+          return _context.finish(16);
+        case 19:
         case "end":
           return _context.stop();
       }
-    }, _callee);
+    }, _callee, null, [[0, 13, 16, 19]]);
   })), [list]);
   useEffect(function () {
     fetchList();
@@ -56,12 +80,16 @@ export var RecommendCase = function RecommendCase(props) {
     className: styles.title
   }, /*#__PURE__*/React.createElement("span", {
     className: styles.quickStart
-  }, "\u7CBE\u9009\u6848\u4F8B"), /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "ai.recommend.title"
+  })), /*#__PURE__*/React.createElement("span", {
     className: styles.refresh,
     onClick: function onClick() {
       return fetchList();
     }
-  }, /*#__PURE__*/React.createElement(RedoOutlined, null), "\u6362\u4E00\u6279")), /*#__PURE__*/React.createElement(Spin, {
+  }, /*#__PURE__*/React.createElement(ReloadOutlined, null), /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "ai.recommend.refresh"
+  }))), /*#__PURE__*/React.createElement(Spin, {
     spinning: loading,
     wrapperClassName: classnames(styles.listContainer, props.className)
   }, /*#__PURE__*/React.createElement("div", {
@@ -70,7 +98,11 @@ export var RecommendCase = function RecommendCase(props) {
     return /*#__PURE__*/React.createElement(Card, {
       key: item.caseId,
       item: item,
-      index: index
+      index: index,
+      onClick: function onClick() {
+        var _props$onClick;
+        (_props$onClick = props.onClick) === null || _props$onClick === void 0 || _props$onClick.call(props, item);
+      }
     });
   }))));
 };

package/dist/components/AI/HomeDialog/RecommendCase/index.module.less

@@ -2,6 +2,7 @@
   margin-top: 32px;
   margin-left: auto;
   margin-right: auto;
+  z-index: 10;
 }
 
 .title {
@@ -27,15 +28,15 @@
     display: flex;
     gap: 2px;
     align-items: center;
-
     font-size: 12px;
-    color: rgba(78, 89, 105, 0.6);
+    color: rgba(78, 89, 105, 60%);
   }
 }
 
 .listContainer {
   width: 100%;
 }
+
 .list {
   display: grid;
   grid-template-columns: repeat(4, 1fr);

package/dist/components/AI/HomeDialog/index.js

@@ -13,9 +13,10 @@ import { ModeSelector } from "./ModeSelector";
 import { useLocalStorageState } from 'ahooks';
 import { AIMode } from "../constant";
 import classnames from 'classnames';
-import { useSiteData } from 'dumi';
+import { useSiteData, useLocale } from 'dumi';
 import { createNewSession } from "../../../model/AIChat";
 export function HomeDialog(props) {
+  var locale = useLocale();
   var _useSiteData = useSiteData(),
     themeConfig = _useSiteData.themeConfig;
   var _useState = useState(!themeConfig.isAntVSite ? themeConfig.title : undefined),
@@ -32,6 +33,10 @@ export function HomeDialog(props) {
     _useState4 = _slicedToArray(_useState3, 2),
     promptText = _useState4[0],
     setPromptText = _useState4[1];
+  var _useState5 = useState(''),
+    _useState6 = _slicedToArray(_useState5, 2),
+    fileSummary = _useState6[0],
+    setFileSummary = _useState6[1];
   return /*#__PURE__*/React.createElement("div", {
     className: classnames(styles.content, props.className),
     style: props.style
@@ -55,11 +60,20 @@ export function HomeDialog(props) {
       createNewSession({
         promptText: promptText,
         mode: mode,
-        lib: lib
+        lib: lib,
+        jump: true,
+        context: fileSummary,
+        lang: locale.id
       });
     },
-    style: props.promptTextareaStyle
+    style: props.promptTextareaStyle,
+    onDataSummaryChange: setFileSummary
   }), /*#__PURE__*/React.createElement(RecommendCase, {
-    className: props.recommendCaseClassName
+    className: props.recommendCaseClassName,
+    onClick: function onClick(val) {
+      if (val !== null && val !== void 0 && val.query) {
+        setPromptText(val.query);
+      }
+    }
   }));
 }

package/dist/components/AI/constant.js

@@ -6,11 +6,11 @@ export var AIMode = {
 };
 export var AIModeMeta = {
   implement: {
-    name: '可视化研发',
+    name: 'ai.mode.implement',
     icon: /*#__PURE__*/React.createElement(BarChartOutlined, null)
   },
   solve: {
-    name: '可视化答疑',
+    name: 'ai.mode.solve',
     icon: /*#__PURE__*/React.createElement(QuestionCircleOutlined, null)
   }
 };

package/dist/components/Login/Captcha/index.js

@@ -0,0 +1,185 @@
+import { NC_SCENE } from "../utils";
+import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'; // 图形验证码资源文件
+
+import { Form, Input } from 'antd';
+import cls from 'classnames';
+import { useIntl } from 'dumi';
+import "./index.less";
+
+// 添加 window.noCaptcha 的类型声明
+
+// 图形验证码资源文件
+var NC_CSS_SOURCE = 'https://g.alicdn.com/sd/ncpc/nc.css?t=1514534550478';
+var NC_SCRIPT_SOURCE = 'https://g.alicdn.com/sd/ncpc/nc.js?t=1514534550478';
+var NC_NAME = 'NoCaptcha';
+var Captcha = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _ref$ncName = _ref.ncName,
+    ncName = _ref$ncName === void 0 ? NC_NAME : _ref$ncName,
+    _ref$scene = _ref.scene,
+    scene = _ref$scene === void 0 ? NC_SCENE.login : _ref$scene,
+    form = _ref.form,
+    _ref$onCallback = _ref.onCallback,
+    onCallback = _ref$onCallback === void 0 ? function () {} : _ref$onCallback,
+    className = _ref.className;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage,
+    locale = _useIntl.locale;
+  var ncInstance = useRef(null);
+  function reset() {
+    var _ncInstance$current;
+    form.setFieldsValue({
+      csessionid: '',
+      sig: '',
+      token: '',
+      scene: '',
+      captcha: null
+    });
+    (_ncInstance$current = ncInstance.current) === null || _ncInstance$current === void 0 || _ncInstance$current.reset(1);
+  }
+  function getValues() {
+    return form.getFieldsValue(['csessionid', 'sig', 'token', 'scene', 'captcha']);
+  }
+  useImperativeHandle(ref, function () {
+    return {
+      resetCaptcha: function resetCaptcha() {
+        reset();
+      },
+      getCaptchaValues: function getCaptchaValues() {
+        return getValues();
+      }
+    };
+  });
+  function loadCaptcha() {
+    var _document$getElementB, _ncInstance$current2;
+    if (!ncInstance.current) {
+      /* eslint no-undef:0 */
+      /* eslint new-cap:0 */
+      ncInstance.current = new window.noCaptcha();
+      window[ncName] = ncInstance.current;
+    }
+    var nc_appkey = 'FFFF000000000179A3AD';
+    var nc_token = [nc_appkey, new Date().getTime(), Math.random()].join(':');
+    var nc_scene = scene;
+    var nc_customWidth = ((_document$getElementB = document.getElementById("captcha_render_id_".concat(ncName))) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.offsetWidth) || 300;
+    var nc_option = {
+      renderTo: "#captcha_render_id_".concat(ncName),
+      appkey: nc_appkey,
+      scene: nc_scene,
+      token: nc_token,
+      language: locale ? 'en' : 'cn',
+      customWidth: nc_customWidth,
+      callback: function callback(data) {
+        // 校验成功回调
+        var setFieldsValue = form.setFieldsValue;
+        setFieldsValue({
+          csessionid: data.csessionid,
+          sig: data.sig,
+          token: nc_token,
+          scene: nc_scene,
+          captcha: 'true'
+        });
+        onCallback === null || onCallback === void 0 || onCallback();
+      }
+    };
+    (_ncInstance$current2 = ncInstance.current) === null || _ncInstance$current2 === void 0 || _ncInstance$current2.init(nc_option);
+    var lang = {
+      _startTEXT: formatMessage({
+        id: 'login.captcha.drag'
+      }),
+      _yesTEXT: formatMessage({
+        id: 'login.captcha.success'
+      }),
+      _Loading: formatMessage({
+        id: 'login.captcha.loading'
+      }),
+      _error300: formatMessage({
+        id: 'login.captcha.error.wrong'
+      }) + ' <a href="javascript:__nc.reset()">' + formatMessage({
+        id: 'login.captcha.error.refresh'
+      }) + '</a>',
+      _errorNetwork: formatMessage({
+        id: 'login.captcha.error.network'
+      }) + ' <a href="javascript:__nc.reset()">' + formatMessage({
+        id: 'login.captcha.error.refresh'
+      }) + '</a>'
+    };
+    if (locale) {
+      var _ncInstance$current3;
+      (_ncInstance$current3 = ncInstance.current) === null || _ncInstance$current3 === void 0 || _ncInstance$current3.upLang('en', lang);
+    } else {
+      var _ncInstance$current4;
+      (_ncInstance$current4 = ncInstance.current) === null || _ncInstance$current4 === void 0 || _ncInstance$current4.upLang('cn', lang);
+    }
+  }
+  useEffect(function () {
+    var script = document.createElement('script');
+    script.src = NC_SCRIPT_SOURCE;
+    var link = document.createElement('link');
+    script.async = true;
+    link.href = NC_CSS_SOURCE;
+    link.rel = 'stylesheet';
+    link.type = 'text/css';
+
+    // 如果资源没有加载过，则添加到head中
+    document.head.appendChild(link);
+    if (!window.noCaptcha) {
+      document.head.appendChild(script);
+      script.onload = function () {
+        loadCaptcha();
+      };
+    } else {
+      loadCaptcha();
+    }
+    return function () {
+      try {
+        script.remove();
+        link.remove();
+        if (script.parentNode === document.body) {
+          document.body.removeChild(script);
+        }
+        if (link.parentNode === document.body) {
+          document.body.removeChild(link);
+        }
+      } catch (e) {
+        // ignore error
+      }
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    className: cls('captcha', className)
+  }, /*#__PURE__*/React.createElement("div", {
+    id: "captcha_render_id_".concat(ncName)
+  }), /*#__PURE__*/React.createElement(Form.Item, {
+    name: "csessionid",
+    noStyle: true
+  }, /*#__PURE__*/React.createElement(Input, {
+    type: "hidden"
+  })), /*#__PURE__*/React.createElement(Form.Item, {
+    name: "sig",
+    noStyle: true
+  }, /*#__PURE__*/React.createElement(Input, {
+    type: "hidden"
+  })), /*#__PURE__*/React.createElement(Form.Item, {
+    name: "token",
+    noStyle: true
+  }, /*#__PURE__*/React.createElement(Input, {
+    type: "hidden"
+  })), /*#__PURE__*/React.createElement(Form.Item, {
+    name: "scene",
+    noStyle: true
+  }, /*#__PURE__*/React.createElement(Input, {
+    type: "hidden"
+  })), /*#__PURE__*/React.createElement(Form.Item, {
+    name: "captcha",
+    rules: [{
+      required: true,
+      message: formatMessage({
+        id: 'login.captcha.required'
+      })
+    }],
+    className: "captcha-tip"
+  }, /*#__PURE__*/React.createElement(Input, {
+    type: "hidden"
+  })));
+});
+export default Captcha;