message-verify 0.0.34-beta.0 → 0.0.36-beta.0

package/dist/compoments/button.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface CustomButtonProps {
+    disabled?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+}
+declare const Button: React.FC<CustomButtonProps>;
+export default Button;

package/dist/compoments/button.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const Button = ({ disabled, onClick, children, style }) => {
+    const handleClick = (e) => {
+        if (!disabled) {
+            onClick?.(e);
+            // 这里可以记录点击事件
+            console.log('按钮被点击');
+        }
+    };
+    return (_jsx("button", { disabled: disabled, onClick: handleClick, style: {
+            padding: '6px 16px',
+            borderRadius: 4,
+            border: '1px solid #d9d9d9',
+            background: disabled ? '#f5f5f5' : '#1677ff',
+            color: disabled ? '#aaa' : '#fff',
+            cursor: disabled ? 'not-allowed' : 'pointer',
+            ...style,
+        }, children: children }));
+};
+export default Button;

package/dist/compoments/index.d.ts

@@ -0,0 +1,4 @@
+import Modal from "./modal.js";
+import Input from "./input.js";
+import Button from "./button.js";
+export { Modal, Input, Button };

package/dist/compoments/index.js

@@ -0,0 +1,4 @@
+import Modal from "./modal.js";
+import Input from "./input.js";
+import Button from "./button.js";
+export { Modal, Input, Button };

package/dist/compoments/input.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface CustomInputProps {
+    value?: string;
+    onChange?: (val: string) => void;
+    placeholder?: string;
+    type?: string;
+}
+declare const Input: React.FC<CustomInputProps>;
+export default Input;

package/dist/compoments/input.js

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

package/dist/index.js

@@ -1,19 +1,58 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import Modal from './compoments/modal.js';
+import { Modal, Input, Button } from './compoments/index.js';
 import ReactDOM from 'react-dom/client';
 import { useEffect, useState } from 'react';
+import Api from './resource.js';
 let modalRoot = null;
 const ModalDom = ({ config }) => {
     const [visible, setVisible] = useState(true);
+    const [countdown, setCountdown] = useState(60);
+    const [captchaImage, setCaptchaImage] = useState('');
+    const [captchCode, setCaptchCode] = useState('');
+    const [captchaKey, setCaptchaKey] = useState('');
     const { data } = config || {};
     const { mobile } = data || {};
+    const getKey = async () => {
+        const res = await Api.getCaptchaKey();
+        const { body: key } = res.data || {};
+        setCaptchaKey(key);
+        if (key) {
+            console.log('res=>key', key);
+            const image = Api.getCaptchaImgUrl(key);
+            console.log('image', image);
+            setCaptchaImage(image);
+        }
+    };
+    useEffect(() => {
+        let timer = null;
+        if (visible && countdown > 0) {
+            timer = setInterval(() => {
+                setCountdown((prev) => prev - 1);
+            }, 1000);
+        }
+        if (countdown === 0) {
+            getKey();
+        }
+        return () => {
+            if (timer)
+                clearInterval(timer);
+        };
+    }, [visible, countdown]);
     useEffect(() => {
         console.log('mobile', mobile);
     }, []);
-    return (_jsx(Modal, { visible: visible, onClose: () => {
+    const handleResend = async () => {
+        setCountdown(60);
+        const res = await Api.reSendCode({ captchaKey, captcha: captchCode });
+        console.log('handleResend=>res', res);
+        // message.success('发送成功');
+    };
+    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] }) }));
+        }, 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) => {
+                            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}秒` : '重新发送' })] })] }));
 };
 // ... existing code ...
 export const createMessageVerifyModal = (config) => {

package/dist/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/app.tsx","../src/index.tsx","../src/main.tsx","../src/resource.ts","../src/vite-env.d.ts","../src/compoments/modal.tsx","../src/utils/getfingerprint.ts","../src/utils/index.ts","../src/utils/status.ts"],"version":"5.7.3"}
+{"root":["../src/app.tsx","../src/index.tsx","../src/main.tsx","../src/resource.ts","../src/vite-env.d.ts","../src/compoments/button.tsx","../src/compoments/index.ts","../src/compoments/input.tsx","../src/compoments/modal.tsx","../src/utils/getfingerprint.ts","../src/utils/index.ts","../src/utils/status.ts"],"version":"5.7.3"}

package/package.json

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

package/src/compoments/button.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+interface CustomButtonProps {
+    disabled?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+}
+
+const Button: React.FC<CustomButtonProps> = ({ disabled, onClick, children, style }) => {
+    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+        if (!disabled) {
+            onClick?.(e);
+            // 这里可以记录点击事件
+            console.log('按钮被点击');
+        }
+    };
+
+    return (
+        <button
+            disabled={disabled}
+            onClick={handleClick}
+            style={{
+                padding: '6px 16px',
+                borderRadius: 4,
+                border: '1px solid #d9d9d9',
+                background: disabled ? '#f5f5f5' : '#1677ff',
+                color: disabled ? '#aaa' : '#fff',
+                cursor: disabled ? 'not-allowed' : 'pointer',
+                ...style,
+            }}
+        >
+            {children}
+        </button>
+    );
+};
+
+export default Button;

package/src/compoments/index.ts

@@ -0,0 +1,5 @@
+import Modal from "./modal.js";
+import Input from "./input.js";
+import Button from "./button.js";
+
+export { Modal, Input, Button };

package/src/compoments/input.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+interface CustomInputProps {
+    value?: string;
+    onChange?: (val: string) => void;
+    placeholder?: string;
+    type?: string;
+}
+
+const Input: React.FC<CustomInputProps> = ({ value, onChange, placeholder, type = 'text' }) => {
+    return (
+        <input
+            type={type}
+            value={value}
+            placeholder={placeholder}
+            onChange={e => onChange?.(e.target.value)}
+            style={{
+                padding: '6px 12px',
+                border: '1px solid #d9d9d9',
+                borderRadius: 4,
+                outline: 'none',
+                fontSize: 14,
+                width: '100%',
+                boxSizing: 'border-box'
+            }}
+        />
+    );
+};
+
+export default Input;

package/src/index.tsx

@@ -1,6 +1,7 @@
-import Modal from './compoments/modal.js'
+import { Modal, Input, Button } from './compoments/index.js'
 import ReactDOM from 'react-dom/client'
 import { useEffect, useState } from'react'
+import Api from './resource.js'
 
 export type ModalConfig = {
     data: {
@@ -15,12 +16,51 @@ let modalRoot: ReactDOM.Root | null = null
 
 const ModalDom = ({ config }: { config: ModalConfig }) => {
     const [visible, setVisible] = useState(true);
+    const [countdown, setCountdown] = useState(60);
+    const [captchaImage, setCaptchaImage] = useState<string>('');
+    const [captchCode, setCaptchCode] = useState<string>('');
+    const [captchaKey, setCaptchaKey] = useState<string>('');
     const { data } = config || {};
     const { mobile } = data || {};
 
+
+    const getKey = async () => {
+        const res = await Api.getCaptchaKey();
+        const { body: key } = res.data || {};
+        setCaptchaKey(key);
+        if(key) {
+            console.log('res=>key', key);
+            const image = Api.getCaptchaImgUrl(key) as unknown;
+            console.log('image', image);
+            setCaptchaImage(image as string);
+        }
+    }
+
+    useEffect(() => {
+        let timer: number | null = null;
+        if (visible && countdown > 0) {
+            timer = setInterval(() => {
+                setCountdown((prev) => prev - 1);
+            }, 1000);
+        }
+        if (countdown === 0) {
+            getKey();
+        }
+        return () => {
+            if (timer) clearInterval(timer);
+        };
+    }, [visible, countdown]);
+
     useEffect(() => {
         console.log('mobile', mobile);
     }, [])
+
+    const handleResend = async() => {
+        setCountdown(60);
+        const res = await Api.reSendCode({captchaKey, captcha: captchCode});
+        console.log('handleResend=>res', res);
+        // message.success('发送成功');
+    }
   
     return (
       <Modal
@@ -31,6 +71,25 @@ const ModalDom = ({ config }: { config: ModalConfig }) => {
         }}
       >
         <div>已发送短信至您的手机：{mobile}</div>
+        {countdown > 0 ? null : <div style={{ marginTop: 8, display: 'flex', alignItems: 'center', width: 300 }}>
+            <Input 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>}
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 8 }}>
+            <Input
+                onChange={(val) => {console.log('change', val)}}
+            />
+            <Button
+                disabled={countdown > 0 || !captchCode}
+                onClick={handleResend}
+            >
+                {countdown > 0 ? `${countdown}秒` : '重新发送'}
+            </Button>
+        </div>
       </Modal>
     );
   };