Release

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kne-components/components-admin",
-  "version": "1.1.32",
+  "version": "1.1.33",
   "description": "用于实现一个后台管理系统的必要组件",
   "scripts": {
     "init": "husky",
@@ -66,7 +66,6 @@
   "devDependencies": {
     "@kne/modules-dev": "^2.2.1",
     "@kne/react-fetch": "^1.4.3",
-    "@kne/react-form-antd": "^4.0.2",
     "@kne/react-scripts": "^5.1.5",
     "@kne/remote-loader": "^1.2.3",
     "@testing-library/jest-dom": "^6.4.2",
@@ -86,7 +85,6 @@
   "dependencies": {
     "@ant-design/icons": "^6.0.0",
     "@kne/app-children-router": "^0.1.7",
-    "@kne/captcha-button": "^1.0.1",
     "@kne/count-down": "^0.2.2",
     "@kne/is-empty": "^1.0.1",
     "@kne/json-view": "^0.1.1",

src/components/Account/Register/index.js

@@ -1,7 +1,6 @@
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 import { Button, Col, Row, Space } from 'antd';
 import { createWithRemoteLoader } from '@kne/remote-loader';
-import CaptchaButton from '@kne/captcha-button';
 import classnames from 'classnames';
 import get from 'lodash/get';
 import commonStyle from '../style.module.scss';
@@ -11,6 +10,40 @@ import style from './style.module.scss';
 import { useIntl } from '@kne/react-intl';
 import withLocale from '../withLocale';
 
+const CaptchaButton = createWithRemoteLoader({
+  modules: ['components-core:FormInfo', 'components-core:LoadingButton']
+})(({ remoteModules, children, target, onClick, duration = 60, ...props }) => {
+  const [FormInfo, LoadingButton] = remoteModules;
+  const { useFormContext, formUtils } = FormInfo;
+  const { formState } = useFormContext();
+
+  const targetField = formUtils.findField(formState, target);
+  const [time, setTime] = useState(0);
+  const setCountdown = time => {
+    setTime(time);
+    const timer = setInterval(() => {
+      setTime(time => {
+        if (time - 1 === 0) {
+          clearInterval(timer);
+        }
+        return time - 1;
+      });
+    }, 1000);
+  };
+
+  return (
+    <LoadingButton
+      {...props}
+      disabled={get(targetField, 'validate.status') !== 'PASS' || time > 0}
+      onClick={async () => {
+        const res = onClick && (await onClick());
+        res !== false && setCountdown(duration);
+      }}>
+      {time === 0 ? children : `${time}s`}
+    </LoadingButton>
+  );
+});
+
 const RegisterInner = createWithRemoteLoader({
   modules: ['components-core:FormInfo']
 })(({ remoteModules, ...p }) => {
@@ -55,7 +88,16 @@ const RegisterInner = createWithRemoteLoader({
           <Space className={classnames(commonStyle['form-inner'])} size={38} direction="vertical">
             <div className={commonStyle['title']}>{title}</div>
             <div>
-              {type === 'phone' && <PhoneNumber name="phone" label={formatMessage({ id: 'PhoneCode' })} rule="REQ" codeType="code" realtime interceptor="phone-number-string" />}
+              {type === 'phone' && (
+                <PhoneNumber
+                  name="phone"
+                  label={formatMessage({ id: 'PhoneCode' })}
+                  rule="REQ"
+                  codeType="code"
+                  realtime
+                  interceptor="phone-number-string"
+                />
+              )}
               {type === 'email' && <Input name="email" label={formatMessage({ id: 'Email' })} rule="REQ EMAIL" realtime />}
               <Row align={'bottom'} justify={'space-between'}>
                 <Col className={style['code-field']}>

src/components/Account/Register/style.module.scss

@@ -1,6 +1,8 @@
 .code-field {
   flex: 1;
 }
+
 .get-code {
   vertical-align: 30px;
+  min-width: 105px;
 }