message-verify 0.0.33-beta.0 → 0.0.35-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";
+import Input from "./input";
+import Button from "./button";
+export { Modal, Input, Button };

package/dist/compoments/index.js

@@ -0,0 +1,4 @@
+import Modal from "./modal";
+import Input from "./input";
+import Button from "./button";
+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.d.ts

@@ -1,7 +1,9 @@
 export type ModalConfig = {
-    content: React.ReactNode;
-    title?: string;
-    width?: number;
+    data: {
+        mobile: string;
+        verifyCodeKey: string;
+        sendSuccess: boolean;
+    };
     onClose?: () => void;
 };
-export declare const showModal: (config: ModalConfig) => void;
+export declare const createMessageVerifyModal: (config: ModalConfig) => void;

package/dist/index.js

@@ -1,54 +1,66 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-// import App from './app.js';
-// import { createRoot } from 'react-dom/client';
-// interface Props {
-//     data: {
-//         mobile: string;
-//         verifyCodeKey: string;
-//         sendSuccess: boolean;
-//     };
-//     refresh: () => void;
-//     isShow: boolean;
-// }
-// function createMessageVerify(props: Props) {
-//     // 创建一个挂载点
-//     const container = document.createElement('div');
-//     document.body.appendChild(container);
-//     // 渲染弹窗
-//     const root = createRoot(container);
-//     // 这里 isShow 直接传 true，弹窗立即显示
-//     root.render(<App {...props} isShow={true} />);
-//     // 可选：返回关闭方法
-//     return {
-//         destroy: () => {
-//             root.unmount();
-//             document.body.removeChild(container);
-//         }
-//     };
-// }
-// export { createMessageVerify };
-// export default createMessageVerify;
-// src/modal.tsx
-// src/modal.tsx
-import Modal from './compoments/modal.js';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Modal, Input, Button } from './compoments/index.js';
 import ReactDOM from 'react-dom/client';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+import Api from './resource.js';
 let modalRoot = null;
-// ... existing code ...
-const AntdModal = ({ config }) => {
+const ModalDom = ({ config }) => {
     const [visible, setVisible] = useState(true);
-    return (_jsx(Modal, { visible: visible, onClose: () => {
+    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);
+    }, []);
+    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: config.content }));
+        }, 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 showModal = (config) => {
+export const createMessageVerifyModal = (config) => {
     const container = document.createElement('div');
     container.id = 'antd-modal-container';
     document.body.appendChild(container);
     modalRoot = ReactDOM.createRoot(container);
-    modalRoot.render(_jsx(AntdModal, { config: {
+    modalRoot.render(_jsx(ModalDom, { config: {
             ...config,
             onClose: () => {
                 config.onClose?.();

package/dist/main.js

@@ -1,4 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createRoot } from 'react-dom/client';
-import { showModal } from './index.js'; // 或 './index'
-createRoot(document.getElementById('root')).render(_jsx("button", { onClick: () => showModal({ content: 'React Content' }), children: "Show Modal" }));
+import { createMessageVerifyModal } from './index.js'; // 或 './index'
+const data = {
+    mobile: '185****7760',
+    verifyCodeKey: 'e381c5f9-c7f4-4bf1-a948-744334fb0203',
+    sendSuccess: true
+};
+createRoot(document.getElementById('root')).render(_jsx("button", { onClick: () => createMessageVerifyModal({ data }), children: "Show Modal" }));

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.33-beta.0",
+  "version": "0.0.35-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";
+import Input from "./input";
+import Button from "./button";
+
+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,55 +1,66 @@
-// import App from './app.js';
-// import { createRoot } from 'react-dom/client';
-
-// interface Props {
-//     data: {
-//         mobile: string;
-//         verifyCodeKey: string;
-//         sendSuccess: boolean;
-//     };
-//     refresh: () => void;
-//     isShow: boolean;
-// }
-
-// function createMessageVerify(props: Props) {
-//     // 创建一个挂载点
-//     const container = document.createElement('div');
-//     document.body.appendChild(container);
-
-//     // 渲染弹窗
-//     const root = createRoot(container);
-//     // 这里 isShow 直接传 true，弹窗立即显示
-//     root.render(<App {...props} isShow={true} />);
-
-//     // 可选：返回关闭方法
-//     return {
-//         destroy: () => {
-//             root.unmount();
-//             document.body.removeChild(container);
-//         }
-//     };
-// }
-
-// export { createMessageVerify };
-// export default createMessageVerify;
-// src/modal.tsx
-// src/modal.tsx
-import Modal from './compoments/modal.js'
+import { Modal, Input, Button } from './compoments/index.js'
 import ReactDOM from 'react-dom/client'
-import { useState } from'react'
+import { useEffect, useState } from'react'
+import Api from './resource.js'
 
 export type ModalConfig = {
-  content: React.ReactNode
-  title?: string
-  width?: number
+    data: {
+        mobile: string;
+        verifyCodeKey: string;
+        sendSuccess: boolean;
+    };
   onClose?: () => void
 }
 
 let modalRoot: ReactDOM.Root | null = null
 
-// ... existing code ...
-const AntdModal = ({ config }: { config: ModalConfig }) => {
+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
@@ -59,20 +70,39 @@ const AntdModal = ({ config }: { config: ModalConfig }) => {
           config.onClose?.();
         }}
       >
-        {config.content}
+        <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>
     );
   };
   // ... existing code ...
 
-export const showModal = (config: ModalConfig) => {
+export const createMessageVerifyModal = (config: ModalConfig) => {
   const container = document.createElement('div')
   container.id = 'antd-modal-container'
   document.body.appendChild(container)
 
   modalRoot = ReactDOM.createRoot(container)
   modalRoot.render(
-    <AntdModal
+    <ModalDom
       config={{
         ...config,
         onClose: () => {

package/src/main.tsx

@@ -1,7 +1,13 @@
 import { createRoot } from 'react-dom/client';
-import { showModal } from './index.js'; // 或 './index'
+import { createMessageVerifyModal } from './index.js'; // 或 './index'
+
+const data = {
+    mobile: '185****7760',
+    verifyCodeKey: 'e381c5f9-c7f4-4bf1-a948-744334fb0203',
+    sendSuccess: true
+}
 
 createRoot(document.getElementById('root')!).render(
-    <button onClick={() => showModal({ content: 'React Content' })}>
+    <button onClick={() => createMessageVerifyModal({ data })}>
       Show Modal
     </button>);