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

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

@@ -9,45 +9,87 @@ 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 { Spin } from 'antd';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Card } from "./Card";
 import styles from "./index.module.less";
 import { ReloadOutlined } from "@ant-design/icons";
 import RecommendJson from "./recommend.json";
 import classnames from "classnames";
-import { FormattedMessage } from 'dumi';
+import { FormattedMessage, useSiteData } from 'dumi';
+import { sample, sampleSize } from "lodash-es";
+import { AIChatStore } from "../../../../model/AIChat";
+import { useAntVConfig } from "../../../../hooks/useProducts";
+import { getBaseSiteDataUrl } from "../../../../utils/env";
 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],
     setList = _useState4[1];
-  var fetchList = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-    var data;
-    return _regeneratorRuntime().wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          try {
+  var _useAntVConfig = useAntVConfig(),
+    _useAntVConfig$data = _useAntVConfig.data,
+    _useAntVConfig$data2 = _useAntVConfig$data === void 0 ? {
+      library: []
+    } : _useAntVConfig$data,
+    _useAntVConfig$data2$ = _useAntVConfig$data2.library,
+    library = _useAntVConfig$data2$ === void 0 ? [] : _useAntVConfig$data2$;
+  var fetchList = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+      var _themeConfig$ai, data, url;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
             setLoading(true);
+            data = [];
+            url = themeConfig.isAntVSite && library.length ? "".concat(getBaseSiteDataUrl(), "/").concat(sample(library).toLowerCase(), "/recommend.json") : (themeConfig === null || themeConfig === void 0 || (_themeConfig$ai = themeConfig.ai) === null || _themeConfig$ai === void 0 ? void 0 : _themeConfig$ai.recommend) || "".concat(getBaseSiteDataUrl(), "/").concat(themeConfig.title, "/recommend.json");
+            if (!url) {
+              _context.next = 10;
+              break;
+            }
+            _context.next = 7;
+            return fetch(url).then(function (res) {
+              return res.json();
+            });
+          case 7:
+            data = _context.sent;
+            _context.next = 11;
+            break;
+          case 10:
             data = RecommendJson;
-            setList(data.slice(0, 4));
-          } catch (err) {
-            console.log(err);
-          } finally {
+          case 11:
+            setList(sampleSize(data, 4));
+            _context.next = 18;
+            break;
+          case 14:
+            _context.prev = 14;
+            _context.t0 = _context["catch"](0);
+            setList(RecommendJson);
+            console.log(_context.t0);
+          case 18:
+            _context.prev = 18;
             setLoading(false);
-          }
-        case 1:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee);
-  })), [list]);
+            return _context.finish(18);
+          case 21:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[0, 14, 18, 21]]);
+    }));
+    return function fetchList() {
+      return _ref.apply(this, arguments);
+    };
+  }();
   useEffect(function () {
-    fetchList();
-  }, []);
+    if (library.length) {
+      fetchList();
+    }
+  }, [themeConfig.isAntVSite, library.length]);
   if (!list.length) {
     return null;
   }
@@ -59,14 +101,14 @@ export var RecommendCase = function RecommendCase(props) {
     className: styles.quickStart
   }, /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "ai.recommend.title"
-  })), /*#__PURE__*/React.createElement("span", {
+  })), (list === null || list === void 0 ? void 0 : list.length) > 4 ? /*#__PURE__*/React.createElement("span", {
     className: styles.refresh,
     onClick: function onClick() {
       return fetchList();
     }
   }, /*#__PURE__*/React.createElement(ReloadOutlined, null), /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "ai.recommend.refresh"
-  }))), /*#__PURE__*/React.createElement(Spin, {
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null)), /*#__PURE__*/React.createElement(Spin, {
     spinning: loading,
     wrapperClassName: classnames(styles.listContainer, props.className)
   }, /*#__PURE__*/React.createElement("div", {
@@ -75,7 +117,14 @@ 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);
+        if (item.tag) {
+          AIChatStore.mode = item.tag;
+        }
+      }
     });
   }))));
 };

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

@@ -1,7 +1,9 @@
 .container {
+  position: relative;
   margin-top: 32px;
   margin-left: auto;
   margin-right: auto;
+  z-index: 10;
 }
 
 .title {
@@ -27,15 +29,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/RecommendCase/recommend.json

@@ -2,41 +2,65 @@
   {
     "caseId": "1",
     "tag": "implement",
-    "query": "一个城市过去五年来的年度降雨量分别是：2016年800毫米，2017年900毫米，2018年700毫米，2019年1000毫米，2020年1100毫米。使用折线图描绘这些数据。",
-    "description": "自然语言描述需求，生成可视化代码",
+    "query": {
+      "zh": "你有一份公司多产品线销售数据：data = [ {month: '1月', productA: 12000, productB: 8500, productC: 15200}, {month: '2月', productA: 13500, productB: 9200, productC: 14800}, {month: '3月', productA: 15200, productB: 10800, productC: 16500}, {month: '4月', productA: 14800, productB: 11500, productC: 17200}, {month: '5月', productA: 16500, productB: 12200, productC: 18800}, {month: '6月', productA: 18200, productB: 13800, productC: 19500}, {month: '7月', productA: 19800, productB: 14500, productC: 20200}, {month: '8月', productA: 21500, productB: 15200, productC: 21800}, {month: '9月', productA: 20200, productB: 16800, productC: 22500}, {month: '10月', productA: 22800, productB: 17500, productC: 23200}, {month: '11月', productA: 24500, productB: 18200, productC: 24800}, {month: '12月', productA: 26200, productB: 19800, productC: 25500} ]， 请绘制一个多折线图展示三条产品线的销售趋势变化，通过不同线型和颜色清晰区分各产品表现。 同时在最高点进行数据标注。",
+      "en": "You have multi-product line sales data for a company: data = [ {month: 'January', productA: 12000, productB: 8500, productC: 15200}, {month: 'February', productA: 13500, productB: 9200, productC: 14800}, {month: 'March', productA: 15200, productB: 10800, productC: 16500}, {month: 'April', productA: 14800, productB: 11500, productC: 17200}, {month: 'May', productA: 16500, productB: 12200, productC: 18800}, {month: 'June', productA: 18200, productB: 13800, productC: 19500}, {month: 'July', productA: 19800, productB: 14500, productC: 20200}, {month: 'August', productA: 21500, productB: 15200, productC: 21800}, {month: 'September', productA: 20200, productB: 16800, productC: 22500}, {month: 'October', productA: 22800, productB: 17500, productC: 23200}, {month: 'November', productA: 24500, productB: 18200, productC: 24800}, {month: 'December', productA: 26200, productB: 19800, productC: 25500} ]. Please draw a multi-line chart to show the sales trend changes of the three product lines, clearly distinguishing each product's performance through different line styles and colors. Also add data annotations at the highest points."
+    },
+    "description": {
+      "zh": "自然语言描述需求，生成可视化代码",
+      "en": "Natural language description of requirements, generate visualization code"
+    },
     "imageUrls": [
-      "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*K5iUTrYme5QAAAAAQpAAAAgAemJ7AQ/original",
-      "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*K5iUTrYme5QAAAAAQpAAAAgAemJ7AQ/original"
+      "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*zUKtR4U75fcAAAAAROAAAAgAemJ7AQ/original",
+      "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*zUKtR4U75fcAAAAAROAAAAgAemJ7AQ/original"
     ]
   },
   {
     "caseId": "2",
     "tag": "implement",
-    "query": "使用文件中的数据，生成柱状图",
-    "description": "多种数据源引入，专业图表生成，有数据就能生成图表。",
+    "query": {
+      "zh": "一家咖啡店的饮品销售比例为：咖啡 60%，茶 25%，果汁 15%。请用环图可视化这些饮品销售数据，并将色板调整为橙色系。",
+      "en": "A coffee shop's beverage sales ratio is: Coffee 60%, Tea 25%, Juice 15%. Please visualize these beverage sales data with a donut chart and adjust the color palette to orange tones."
+    },
+    "description": {
+      "zh": "自然语言描述需求，生成可视化代码",
+      "en": "Natural language description of requirements, generate visualization code"
+    },
     "imageUrls": [
-      "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*K5iUTrYme5QAAAAAQpAAAAgAemJ7AQ/original",
-      "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*K5iUTrYme5QAAAAAQpAAAAgAemJ7AQ/original"
+      "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*oMezTK-Yf2EAAAAAQmAAAAgAemJ7AQ/original",
+      "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*oMezTK-Yf2EAAAAAQmAAAAgAemJ7AQ/original"
     ]
   },
   {
     "caseId": "3",
-    "tag": "implement",
-    "query": "基于设计稿生成图表代码，还原视觉细节",
-    "description": "基于设计稿生成图表代码，还原视觉细节",
+    "tag": "solve",
+    "query": {
+      "zh": "为什么配置了 state 没有生效？",
+      "en": "Why is the configured state not taking effect?"
+    },
+    "description": {
+      "zh": "精准定位并提供针对渲染异常、性能瓶颈及数据不匹配等问题的解决方案。",
+      "en": "Precisely locate and provide solutions for rendering anomalies, performance bottlenecks, and data mismatches."
+    },
     "imageUrls": [
-      "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*K5iUTrYme5QAAAAAQpAAAAgAemJ7AQ/original",
-      "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*K5iUTrYme5QAAAAAQpAAAAgAemJ7AQ/original"
+      "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*15mgQ4lA5CUAAAAASzAAAAgAemJ7AQ/original",
+      "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*15mgQ4lA5CUAAAAASzAAAAgAemJ7AQ/original"
     ]
   },
   {
     "caseId": "4",
     "tag": "solve",
-    "query": "怎么配置堆叠面积图的描边为不同的颜色",
-    "description": "精准定位并提供针对渲染异常、性能瓶颈及数据不匹配等问题的解决方案。",
+    "query": {
+      "zh": "数据标签互相遮挡了怎么办？",
+      "en": "What to do when data labels overlap each other?"
+    },
+    "description": {
+      "zh": "精准定位并提供针对渲染异常、性能瓶颈及数据不匹配等问题的解决方案。",
+      "en": "Precisely locate and provide solutions for rendering anomalies, performance bottlenecks, and data mismatches."
+    },
     "imageUrls": [
-      "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*K5iUTrYme5QAAAAAQpAAAAgAemJ7AQ/original",
-      "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*K5iUTrYme5QAAAAAQpAAAAgAemJ7AQ/original"
+      "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*thpQQIB3LG4AAAAASMAAAAgAemJ7AQ/original",
+      "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*thpQQIB3LG4AAAAASMAAAAgAemJ7AQ/original"
     ]
   }
 ]

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

@@ -10,65 +10,53 @@ import { AntVBanner } from "./AntVBanner";
 import { PromptTextarea } from "./PromptTextarea";
 import { RecommendCase } from "./RecommendCase";
 import { ModeSelector } from "./ModeSelector";
-import { useLocalStorageState } from 'ahooks';
-import { AIMode } from "../constant";
 import classnames from 'classnames';
-import { useSiteData, useLocale } from 'dumi';
-import { createNewSession } from "../../../model/AIChat";
+import { useLocale } from 'dumi';
+import { AIChatStore, createNewSession } from "../../../model/AIChat";
+import { useSnapshot } from "valtio";
 export function HomeDialog(props) {
   var locale = useLocale();
-  var _useSiteData = useSiteData(),
-    themeConfig = _useSiteData.themeConfig;
-  var _useState = useState(!themeConfig.isAntVSite ? themeConfig.title : undefined),
+  var lang = locale.id === 'zh' ? 'zh' : 'en';
+  var snap = useSnapshot(AIChatStore);
+  var _useState = useState(''),
     _useState2 = _slicedToArray(_useState, 2),
-    lib = _useState2[0],
-    setLib = _useState2[1];
-  var _useLocalStorageState = useLocalStorageState('use-local-storage-ai-mode-type', {
-      defaultValue: AIMode.implement
-    }),
-    _useLocalStorageState2 = _slicedToArray(_useLocalStorageState, 2),
-    mode = _useLocalStorageState2[0],
-    setMode = _useLocalStorageState2[1];
+    promptText = _useState2[0],
+    setPromptText = _useState2[1];
   var _useState3 = useState(''),
     _useState4 = _slicedToArray(_useState3, 2),
-    promptText = _useState4[0],
-    setPromptText = _useState4[1];
-  var _useState5 = useState(''),
-    _useState6 = _slicedToArray(_useState5, 2),
-    fileSummary = _useState6[0],
-    setFileSummary = _useState6[1];
+    fileSummary = _useState4[0],
+    setFileSummary = _useState4[1];
   return /*#__PURE__*/React.createElement("div", {
     className: classnames(styles.content, props.className),
     style: props.style
   }, /*#__PURE__*/React.createElement(AntVBanner, null), /*#__PURE__*/React.createElement(ModeSelector, {
     onChange: function onChange(v) {
-      setMode(v);
-      // todo  埋点
+      AIChatStore.mode = v;
     },
-    value: mode
+    value: snap.mode
   }), /*#__PURE__*/React.createElement(PromptTextarea, {
-    mode: mode,
     value: promptText,
-    lib: lib,
-    onLibChange: function onLibChange(v) {
-      setLib(v);
-    },
     onChange: function onChange(val) {
       setPromptText(val);
     },
     onConfirm: function onConfirm() {
       createNewSession({
         promptText: promptText,
-        mode: mode,
-        lib: lib,
+        mode: snap.mode,
         jump: true,
         context: fileSummary,
-        lang: locale.id
+        lang: locale.id,
+        entry_point: 'home'
       });
     },
     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[lang]);
+      }
+    }
   }));
 }

package/dist/components/AI/constant.js

@@ -7,11 +7,13 @@ export var AIMode = {
 export var AIModeMeta = {
   implement: {
     name: 'ai.mode.implement',
-    icon: /*#__PURE__*/React.createElement(BarChartOutlined, null)
+    icon: /*#__PURE__*/React.createElement(BarChartOutlined, null),
+    shortName: 'ai.mode.implement.short'
   },
   solve: {
     name: 'ai.mode.solve',
-    icon: /*#__PURE__*/React.createElement(QuestionCircleOutlined, null)
+    icon: /*#__PURE__*/React.createElement(QuestionCircleOutlined, null),
+    shortName: 'ai.mode.solve.short'
   }
 };
 

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;

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

@@ -0,0 +1,91 @@
+@primary-color: #873bf4;
+@yuque-color-bg-primary-hover-light: #f5f5f5;
+@yuque-color-bg-primary: #ffffff;
+@yuque-grey-5: #bfbfbf;
+@yuque-color-text-body: #595959;
+@white: #ffffff;
+@yuque-color-function-warning: #faad14;
+@yuque-color-function-error: #ff4d4f;
+
+.captcha {
+  margin-bottom: 16px;
+
+  .nc-lang-cnt {
+    color: #4c4c4c;
+  }
+
+  .nc-container {
+    border-radius: 4px;
+    overflow: hidden;
+
+    .nc_wrapper,
+    #nc_1_wrapper {
+      width: 100%;
+
+      .nc_scale {
+        height: 40px;
+        background: @yuque-color-bg-primary-hover-light;
+        width: auto;
+
+        .nc_bg {
+          width: 0;
+          background-color: @yuque-color-bg-primary;
+          border: 1px solid @yuque-grey-5;
+          border-right-width: 0;
+          border-radius: 4px 0 0 4px;
+        }
+
+        .scale_text {
+          color: @yuque-color-text-body;
+          font-size: 16px;
+        }
+
+        .scale_text2 {
+          color: @white;
+          font-size: 16px;
+        }
+
+        span {
+          border: none;
+          height: 40px;
+          line-height: 40px;
+          border-radius: 4px;
+          font-size: 14px;
+
+          &.btn_slide {
+            border: 1px solid @yuque-grey-5;
+          }
+
+          &.btn_ok {
+            border: 1px solid @yuque-grey-5;
+            border-radius: 0 4px 4px 0;
+            color: #4c4c4c;
+          }
+        }
+      }
+    }
+
+    .errloading {
+      width: 100%;
+      height: 40px;
+      line-height: 22px;
+      border-radius: 4px;
+      border: 1px solid @yuque-color-function-warning;
+
+      .nc_iconfont {
+        color: @yuque-color-function-error;
+      }
+
+      span {
+        color: @yuque-color-function-warning;
+        font-size: 14px;
+      }
+    }
+  }
+
+  .captcha-tip {
+    .ant-form-item-control-input {
+      min-height: auto;
+    }
+  }
+}