message-verify 0.0.38-beta.0 → 0.0.39-beta.0

package/dist/compoments/button.js

@@ -11,8 +11,8 @@ const Button = ({ disabled, onClick, children, style }) => {
             padding: '6px 6px',
             borderRadius: 5,
             border: '1px solid #d9d9d9',
-            background: disabled ? '#f5f5f5' : '#1677ff',
-            color: disabled ? '#aaa' : '#fff',
+            background: disabled ? '#f5f5f5' : '#fff',
+            color: disabled ? '#aaa' : '#333',
             cursor: disabled ? 'not-allowed' : 'pointer',
             whiteSpace: 'nowrap',
             ...style,

package/dist/compoments/input.d.ts

@@ -4,6 +4,7 @@ interface CustomInputProps {
     onChange?: (val: string) => void;
     placeholder?: string;
     type?: string;
+    style?: React.CSSProperties;
 }
 declare const Input: React.FC<CustomInputProps>;
 export default Input;

package/dist/compoments/input.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-const Input = ({ value, onChange, placeholder, type = 'text' }) => {
+const Input = ({ value, onChange, placeholder, type = 'text', style }) => {
     return (_jsx("input", { type: type, value: value, placeholder: placeholder, onChange: e => onChange?.(e.target.value), style: {
             padding: '6px 12px',
             border: '1px solid #d9d9d9',
@@ -7,7 +7,9 @@ const Input = ({ value, onChange, placeholder, type = 'text' }) => {
             outline: 'none',
             fontSize: 14,
             width: '100%',
-            boxSizing: 'border-box'
+            boxSizing: 'border-box',
+            height: 36,
+            ...style,
         } }));
 };
 export default Input;

package/dist/verify-modal.js

@@ -4,7 +4,7 @@ import { Modal, Input, Button, message } from './compoments/index.js';
 import Api from './resource.js';
 const ModalDom = ({ config }) => {
     const [visible, setVisible] = useState(true);
-    const [countdown, setCountdown] = useState(60);
+    const [countdown, setCountdown] = useState(3);
     const [captchaImage, setCaptchaImage] = useState('');
     const [captchCode, setCaptchCode] = useState('');
     const [captchaKey, setCaptchaKey] = useState('');
@@ -38,7 +38,7 @@ const ModalDom = ({ config }) => {
     }, [visible, countdown]);
     useEffect(() => {
         console.log('mobile', mobile);
-    }, []);
+    }, [mobile]);
     const handleResend = async () => {
         setCountdown(60);
         const res = await Api.reSendCode({ captchaKey, captcha: captchCode });
@@ -48,8 +48,8 @@ const ModalDom = ({ config }) => {
     return (_jsxs(Modal, { visible: visible, onClose: () => {
             setVisible(false);
             config.onClose?.();
-        }, children: [_jsxs("div", { children: ["\u5DF2\u53D1\u9001\u77ED\u4FE1\u81F3\u60A8\u7684\u624B\u673A\uFF1A", mobile] }), countdown > 0 ? null : _jsxs("div", { style: { marginTop: 8, display: 'flex', alignItems: 'center', width: 300 }, children: [_jsx(Input, { onChange: (e) => {
+        }, children: [_jsxs("div", { style: { fontSize: 14, color: '#666' }, children: ["\u5DF2\u53D1\u9001\u77ED\u4FE1\u81F3\u60A8\u7684\u624B\u673A\uFF1A", mobile] }), countdown > 0 ? null : _jsxs("div", { style: { marginBlock: 8, display: 'flex', alignItems: 'center', width: 300 }, children: [_jsx(Input, { placeholder: "\u8BF7\u8F93\u5165\u56FE\u5F62\u9A8C\u8BC1\u7801", onChange: (e) => {
                             setCaptchCode(e);
-                        } }), captchaImage && _jsx("img", { src: captchaImage, alt: "\u9A8C\u8BC1\u7801", style: { width: 100, height: 30, marginLeft: 8 }, onClick: getKey })] }), countdown > 0 ? null : _jsx("div", { children: "\u8BF7\u8F93\u5165\u56FE\u5F62\u9A8C\u8BC1\u7801\u540E\uFF0C\u91CD\u65B0\u53D1\u9001\u9A8C\u8BC1\u7801" }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8, marginTop: 8 }, children: [_jsx(Input, { onChange: (val) => { console.log('change', val); } }), _jsx(Button, { disabled: countdown > 0 || !captchCode, onClick: handleResend, children: countdown > 0 ? `${countdown}秒` : '重新发送' })] })] }));
+                        } }), captchaImage && _jsx("img", { src: captchaImage, alt: "\u9A8C\u8BC1\u7801", style: { width: 100, height: 30, marginLeft: 8 }, onClick: getKey })] }), (countdown > 0 || captchCode) ? null : _jsx("div", { style: { fontSize: 14, color: 'red' }, children: "\u8BF7\u8F93\u5165\u56FE\u5F62\u9A8C\u8BC1\u7801\u540E\uFF0C\u91CD\u65B0\u53D1\u9001\u9A8C\u8BC1\u7801" }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8, marginTop: 8 }, children: [_jsx(Input, { placeholder: "\u8BF7\u8F93\u5165\u9A8C\u8BC1\u7801", onChange: (val) => { console.log('change', val); } }), _jsx(Button, { disabled: countdown > 0 || !captchCode, onClick: handleResend, children: countdown > 0 ? `${countdown}秒` : '重新发送' })] })] }));
 };
 export default ModalDom;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "message-verify",
-  "version": "0.0.38-beta.0",
+  "version": "0.0.39-beta.0",
   "type": "module",
   "main": "dist/index.js",
   "dependencies": {

package/src/compoments/button.tsx

@@ -24,8 +24,8 @@ const Button: React.FC<CustomButtonProps> = ({ disabled, onClick, children, styl
                 padding: '6px 6px',
                 borderRadius: 5,
                 border: '1px solid #d9d9d9',
-                background: disabled ? '#f5f5f5' : '#1677ff',
-                color: disabled ? '#aaa' : '#fff',
+                background: disabled ? '#f5f5f5' : '#fff',
+                color: disabled ? '#aaa' : '#333',
                 cursor: disabled ? 'not-allowed' : 'pointer',
                 whiteSpace: 'nowrap',
                 ...style,

package/src/compoments/input.tsx

@@ -5,9 +5,10 @@ interface CustomInputProps {
     onChange?: (val: string) => void;
     placeholder?: string;
     type?: string;
+    style?: React.CSSProperties;
 }
 
-const Input: React.FC<CustomInputProps> = ({ value, onChange, placeholder, type = 'text' }) => {
+const Input: React.FC<CustomInputProps> = ({ value, onChange, placeholder, type = 'text', style }) => {
     return (
         <input
             type={type}
@@ -21,7 +22,9 @@ const Input: React.FC<CustomInputProps> = ({ value, onChange, placeholder, type
                 outline: 'none',
                 fontSize: 14,
                 width: '100%',
-                boxSizing: 'border-box'
+                boxSizing: 'border-box',
+                height: 36,
+                ...style,
             }}
         />
     );

package/src/verify-modal.tsx

@@ -12,7 +12,7 @@ type ModalConfig = {
 }
 const ModalDom = ({ config }: { config: ModalConfig }) => {
     const [visible, setVisible] = useState(true);
-    const [countdown, setCountdown] = useState(60);
+    const [countdown, setCountdown] = useState(3);
     const [captchaImage, setCaptchaImage] = useState<string>('');
     const [captchCode, setCaptchCode] = useState<string>('');
     const [captchaKey, setCaptchaKey] = useState<string>('');
@@ -49,7 +49,7 @@ const ModalDom = ({ config }: { config: ModalConfig }) => {
 
     useEffect(() => {
         console.log('mobile', mobile);
-    }, [])
+    }, [mobile])
 
     const handleResend = async() => {
         setCountdown(60);
@@ -66,17 +66,21 @@ const ModalDom = ({ config }: { config: ModalConfig }) => {
           config.onClose?.();
         }}
       >
-        <div>已发送短信至您的手机：{mobile}</div>
-        {countdown > 0 ? null : <div style={{ marginTop: 8, display: 'flex', alignItems: 'center', width: 300 }}>
-            <Input onChange={(e) => {
-                setCaptchCode(e as string)
-            }} />
+        <div style={{ fontSize: 14, color: '#666' }}>已发送短信至您的手机：{mobile}</div>
+        {countdown > 0 ? null : <div style={{ marginBlock: 8, display: 'flex', alignItems: 'center', width: 300 }}>
+            <Input 
+                placeholder="请输入图形验证码"
+                onChange={(e) => {
+                    setCaptchCode(e as string)
+                }}
+            />
             
             {captchaImage && <img src={captchaImage} alt="验证码" style={{ width: 100, height: 30, marginLeft: 8 }} onClick={getKey} />}
         </div>}
-        {countdown > 0 ? null : <div>请输入图形验证码后，重新发送验证码</div>}
+        {(countdown > 0 || captchCode) ? null : <div style={{ fontSize: 14, color: 'red' }}>请输入图形验证码后，重新发送验证码</div>}
         <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 8 }}>
             <Input
+                placeholder="请输入验证码"
                 onChange={(val) => {console.log('change', val)}}
             />
             <Button