message-verify 1.0.1-beta.43 → 1.0.1-beta.44

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 import { VerifyModalConfig, LoginModalConfig } from './utils/type.js';
 export declare const initFingerprint: () => Promise<string>;
 export declare const createReLoginModal: (modalProps: LoginModalConfig) => void;
-export declare const VerifyHandler: (modalProps: VerifyModalConfig) => Promise<any>;
+export declare const VerifyHandler: ({ data, config, http, verifyPromise, sendApi }: VerifyModalConfig) => Promise<any>;

package/dist/index.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import ReactDOM from 'react-dom/client';
-import VerifyModal from './verify-modal.js';
+import VerifyModal from './modal/verify-modal.js';
 import Fingerprint2 from 'fingerprintjs2';
-import ReLoginModal from './relogin-modal.js';
+import ReLoginModal from './modal/relogin-modal.js';
 let fingerprintPromise = null; // 用 Promise 本身作为缓存
+let modalRoot = null;
 export const initFingerprint = async () => {
     console.log('fingerprintPromise:', fingerprintPromise);
     if (!fingerprintPromise) {
@@ -24,38 +25,36 @@ export const initFingerprint = async () => {
     }
     return fingerprintPromise;
 };
-let modalRoot = null;
-const createMessageVerifyModal = (modalProps) => {
+const destroyModal = (modalId) => {
+    if (modalRoot) {
+        modalRoot.unmount();
+        document.getElementById(modalId)?.remove();
+        modalRoot = null;
+    }
+};
+const creatModal = (modalProps, modalId, ModalDom) => {
+    destroyModal(modalId);
     const container = document.createElement('div');
+    container.id = modalId;
     document.body.appendChild(container);
     modalRoot = ReactDOM.createRoot(container);
-    modalRoot.render(_jsx(VerifyModal, { props: {
+    modalRoot.render(_jsx(ModalDom, { props: {
             ...modalProps,
             onClose: () => {
-                modalProps.onClose?.();
-                destroyModal();
+                destroyModal(modalId);
             }
         } }));
 };
+const createMessageVerifyModal = (modalProps) => {
+    const verifyModalId = 'verify-modal-container';
+    creatModal(modalProps, verifyModalId, VerifyModal);
+};
 // 新增 relogin 弹窗创建方法
 export const createReLoginModal = (modalProps) => {
-    const container = document.createElement('div');
-    container.id = 'antd-modal-container';
-    document.body.appendChild(container);
-    modalRoot = ReactDOM.createRoot(container);
-    modalRoot.render(_jsx(ReLoginModal, { props: {
-            ...modalProps,
-        } }));
-};
-const destroyModal = () => {
-    if (modalRoot) {
-        modalRoot.unmount();
-        document.getElementById('antd-modal-container')?.remove();
-        modalRoot = null;
-    }
+    const reLoginModalId = 'relogin-modal-container';
+    creatModal(modalProps, reLoginModalId, ReLoginModal);
 };
-export const VerifyHandler = (modalProps) => {
-    const { data, config, http, verifyPromise, sendApi } = modalProps || {};
+export const VerifyHandler = ({ data, config, http, verifyPromise, sendApi }) => {
     const toEmpty = () => {
         verifyPromise.current = null;
     };

package/dist/modal/relogin-modal.d.ts

@@ -0,0 +1,5 @@
+import { LoginModalConfig } from '../utils/type.js';
+declare const ReLoginModal: ({ props }: {
+    props: LoginModalConfig;
+}) => import("react/jsx-runtime.js").JSX.Element;
+export default ReLoginModal;

package/dist/modal/relogin-modal.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Modal, Button } from '../compoments/index.js';
+import t from '../utils/i18n.js';
+const ReLoginModal = ({ props }) => {
+    const { goLogin, lang, onClose: destroyModal } = props || {};
+    const [visible, setVisible] = useState(true);
+    const onClose = () => {
+        setVisible(false);
+        goLogin();
+        destroyModal?.();
+    };
+    return (_jsxs(Modal, { visible: visible, onClose: onClose, width: 420, children: [_jsx("div", { style: { fontWeight: 500, fontSize: 20, marginBottom: 24 }, children: t('accountAlert', lang) }), _jsx("div", { style: { color: '#222', fontSize: 16, marginBottom: 40, lineHeight: '24px' }, children: t('alertContent', lang) }), _jsx("div", { style: { display: 'flex', justifyContent: 'center' }, children: _jsx(Button, { style: {
+                        background: '#1677ff',
+                        color: '#fff',
+                        border: 'none',
+                        width: 80,
+                        height: 36,
+                        fontSize: 14,
+                        borderRadius: 8,
+                        boxShadow: '0 2px 8px rgba(22,119,255,0.08)',
+                    }, onClick: onClose, children: t('ok', lang) }) })] }));
+};
+export default ReLoginModal;

package/dist/modal/verify-modal.d.ts

@@ -0,0 +1,5 @@
+import { VerifyModalConfig } from '../utils/type.js';
+declare const CreateMessageVerifyModal: ({ props }: {
+    props: VerifyModalConfig;
+}) => import("react/jsx-runtime.js").JSX.Element;
+export default CreateMessageVerifyModal;

package/dist/modal/verify-modal.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Modal, Input, Button, message } from '../compoments/index.js';
+import Api from '../utils/resource.js';
+import t from '../utils/i18n.js';
+import { axios } from '@yqg/resource';
+const CreateMessageVerifyModal = ({ props }) => {
+    const [visible, setVisible] = useState(true);
+    const [countdown, setCountdown] = useState(60);
+    const [otp, setOtp] = useState('');
+    const [captchaImage, setCaptchaImage] = useState('');
+    const [captchCode, setCaptchCode] = useState('');
+    const [captchaKey, setCaptchaKey] = useState('');
+    const { data, http, lang, sendApi = '/admin/sms/send', config, apiResolve, apiPromiseToEmpty, onClose } = props || {};
+    const dataObj = JSON.parse(data || '{}');
+    const { mobile, verifyCodeKey } = dataObj || {};
+    const getKey = async () => {
+        try {
+            const res = await Api.getCaptchaKey();
+            const { body: key } = res.data || {};
+            setCaptchaKey(key);
+            if (key) {
+                const image = Api.getCaptchaImgUrl(key);
+                setCaptchaImage(image);
+            }
+        }
+        catch (err) {
+            const msg = typeof err === 'object' && err !== null && 'message' in err
+                ? err.message
+                : String(err);
+            message.error(msg);
+        }
+    };
+    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]);
+    const handleResend = async () => {
+        const formData = new FormData();
+        formData.append('captchaKey', captchaKey);
+        formData.append('captcha', captchCode);
+        // 重新发送验证码
+        const res = await axios.post(sendApi, formData);
+        const { code, detail } = res.data?.status || {};
+        if (code !== 0) {
+            message.error(detail || t('sendFailed', lang));
+            return;
+        }
+        message.success(t('sendSuccess', lang));
+        // 重置倒计时、验证码
+        setCountdown(60);
+        setOtp('');
+    };
+    return (_jsxs(Modal, { width: 420, visible: visible, onClose: () => {
+            setVisible(false);
+            apiPromiseToEmpty?.();
+            onClose?.();
+        }, children: [_jsx("div", { style: { fontSize: 14, color: '#666' }, children: t('alreadySend', lang, { phone: mobile }) }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8, marginTop: 12 }, children: [_jsx(Input.OTP, { length: 6, value: otp, onChange: async (val) => {
+                            setOtp(val);
+                            if (val.length === 6) {
+                                try {
+                                    const res = await Promise.race([
+                                        new Promise((resolve, reject) => {
+                                            setTimeout(() => {
+                                                reject(new Error('Timeout'));
+                                            }, 1000);
+                                        }),
+                                        new Promise((resolve, reject) => {
+                                            http({
+                                                ...config,
+                                                headers: {
+                                                    ...http.defaults.headers.common,
+                                                    'sms-code': val,
+                                                    'sms-code-key': verifyCodeKey,
+                                                    'Content-Type': config.headers['Content-Type'],
+                                                }
+                                            }).then(res => {
+                                                resolve(res);
+                                            }).catch(err => {
+                                                reject(err);
+                                            });
+                                        })
+                                    ]);
+                                    if (res?.data?.status?.code === 0) {
+                                        apiResolve(res);
+                                        setVisible(false);
+                                    }
+                                    else {
+                                        message.error('验证失败');
+                                        setOtp('');
+                                    }
+                                }
+                                catch (error) {
+                                    console.warn('catch', error);
+                                    message.error('验证失败');
+                                    setOtp('');
+                                }
+                            }
+                        } }), _jsx(Button, { disabled: countdown > 0 || !captchCode, onClick: handleResend, style: { padding: '8px' }, children: countdown > 0 ? t('countDownSecound', lang, { countdown }) : t('reSend', lang) })] }), countdown > 0 ? null :
+                _jsxs("div", { style: { marginTop: 12, display: 'flex', alignItems: 'center' }, children: [_jsx(Input, { placeholder: t('pleaseEnterPicVerifyCode', lang), onChange: (e) => {
+                                setCaptchCode(e);
+                            }, style: { width: 300 } }), captchaImage && _jsx("img", { src: captchaImage, alt: t('verifyCode', lang), style: { width: 100, height: 30, marginLeft: 8 }, onClick: getKey })] }), (countdown > 0 || captchCode) ? null : _jsx("div", { style: { fontSize: 14, color: 'red' }, children: t('pleaseEnterAndSend', lang) }), _jsx("div", { style: { fontSize: 14, color: '#666', marginTop: 12 }, children: t('chidoriOpenPro', lang) })] }));
+};
+export default CreateMessageVerifyModal;

package/dist/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/index.tsx","../src/main.tsx","../src/relogin-modal.tsx","../src/resource.ts","../src/verify-modal.tsx","../src/vite-env.d.ts","../src/compoments/button.tsx","../src/compoments/index.ts","../src/compoments/input.tsx","../src/compoments/message.tsx","../src/compoments/modal.tsx","../src/locales/en.ts","../src/locales/id.ts","../src/locales/zh.ts","../src/utils/i18n.ts","../src/utils/status.ts","../src/utils/type.ts"],"version":"5.7.3"}
+{"root":["../src/index.tsx","../src/main.tsx","../src/vite-env.d.ts","../src/compoments/button.tsx","../src/compoments/index.ts","../src/compoments/input.tsx","../src/compoments/message.tsx","../src/compoments/modal.tsx","../src/locales/en.ts","../src/locales/id.ts","../src/locales/zh.ts","../src/modal/relogin-modal.tsx","../src/modal/verify-modal.tsx","../src/utils/i18n.ts","../src/utils/resource.ts","../src/utils/status.ts","../src/utils/type.ts"],"version":"5.7.3"}

package/dist/utils/resource.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("@yqg/resource").default & Record<"getCaptchaKey" | "reSendCode" | "getCaptchaImgUrl", import("@yqg/resource").CustomMethod>;
+export default _default;

package/dist/utils/resource.js

@@ -0,0 +1,7 @@
+import { assign, customPost } from '@yqg/resource';
+const api = {
+    getCaptchaKey: customPost('/messageVerify/admin/captcha/key'),
+    reSendCode: customPost('/admin/sms/send'),
+    getCaptchaImgUrl: (captchaKey) => { return `/messageVerify/admin/captcha/image/${captchaKey}`; },
+};
+export default assign(api);

package/dist/utils/type.d.ts

@@ -28,5 +28,6 @@ export type VerifyModalConfig = {
 };
 export type LoginModalConfig = {
     goLogin: () => void;
+    onClose?: () => void;
     lang?: 'zh' | 'en' | 'id';
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "message-verify",
-  "version": "1.0.1-beta.43",
+  "version": "1.0.1-beta.44",
   "type": "module",
   "main": "dist/index.js",
   "dependencies": {

package/src/index.tsx

@@ -1,11 +1,11 @@
 import ReactDOM from 'react-dom/client'
-import VerifyModal from './verify-modal.js'
+import VerifyModal from './modal/verify-modal.js'
 import Fingerprint2 from 'fingerprintjs2';
-import ReLoginModal from './relogin-modal.js';
+import ReLoginModal from './modal/relogin-modal.js';
 import { VerifyModalConfig, LoginModalConfig } from './utils/type.js';
 
 let fingerprintPromise: Promise<string> | null = null; // 用 Promise 本身作为缓存
-
+let modalRoot: ReactDOM.Root | null = null
 export const initFingerprint = async (): Promise<string> => {
     console.log('fingerprintPromise:', fingerprintPromise);
     if (!fingerprintPromise) {
@@ -27,52 +27,44 @@ export const initFingerprint = async (): Promise<string> => {
     return fingerprintPromise;
 };
 
-let modalRoot: ReactDOM.Root | null = null
+const destroyModal = (modalId: string) => {
+    if (modalRoot) {
+        modalRoot.unmount()
+        document.getElementById(modalId)?.remove()
+        modalRoot = null
+    }
+}
 
-const createMessageVerifyModal = (modalProps: VerifyModalConfig) => {
+const creatModal = (modalProps: VerifyModalConfig | LoginModalConfig, modalId: string, ModalDom:any) => {
+    destroyModal(modalId);
     const container = document.createElement('div')
+    container.id = modalId
     document.body.appendChild(container)
 
     modalRoot = ReactDOM.createRoot(container)
     modalRoot.render(
-        <VerifyModal
+        <ModalDom
             props={{
                 ...modalProps,
                 onClose: () => {
-                    modalProps.onClose?.()
-                    destroyModal()
+                    destroyModal(modalId);
                 }
             }}
         />
     )
 }
 
+const createMessageVerifyModal = (modalProps: VerifyModalConfig) => {
+    const verifyModalId = 'verify-modal-container';
+    creatModal(modalProps, verifyModalId, VerifyModal);
+}
 // 新增 relogin 弹窗创建方法
 export const createReLoginModal = (modalProps: LoginModalConfig) => {
-    const container = document.createElement('div')
-    container.id = 'antd-modal-container'
-    document.body.appendChild(container)
-
-    modalRoot = ReactDOM.createRoot(container)
-    modalRoot.render(
-        <ReLoginModal
-            props={{
-                ...modalProps,
-            }}
-        />
-    )
-}
-
-const destroyModal = () => {
-    if (modalRoot) {
-        modalRoot.unmount()
-        document.getElementById('antd-modal-container')?.remove()
-        modalRoot = null
-    }
+    const reLoginModalId = 'relogin-modal-container';
+    creatModal(modalProps, reLoginModalId, ReLoginModal);
 }
 
-export const VerifyHandler = (modalProps: VerifyModalConfig): Promise<any> => {
-    const {data, config, http, verifyPromise, sendApi} = modalProps || {};
+export const VerifyHandler = ({data, config, http, verifyPromise, sendApi}: VerifyModalConfig): Promise<any> => {
     const toEmpty = () => {
       verifyPromise.current = null;
     };
@@ -86,7 +78,7 @@ export const VerifyHandler = (modalProps: VerifyModalConfig): Promise<any> => {
           apiReject: reject,
           apiPromiseToEmpty: toEmpty,
           sendApi
-        } as any);
+        } as VerifyModalConfig);
       }).finally(toEmpty);
     }
     return verifyPromise.current;

package/src/{relogin-modal.tsx → modal/relogin-modal.tsx}

@@ -1,14 +1,15 @@
 import { useState } from 'react'
-import { Modal, Button } from './compoments/index.js'
-import { LoginModalConfig } from './utils/type.js';
-import t from './utils/i18n.js'
+import { Modal, Button } from '../compoments/index.js'
+import { LoginModalConfig } from '../utils/type.js';
+import t from '../utils/i18n.js'
 
 const ReLoginModal = ({ props }: { props: LoginModalConfig }) => {
-    const { goLogin, lang } = props || {};
+    const { goLogin, lang, onClose: destroyModal } = props || {};
     const [visible, setVisible] = useState(true);
     const onClose = () => {
         setVisible(false);
         goLogin();
+        destroyModal?.();
     };
     return (
         <Modal visible={visible} onClose={onClose} width={420}>

package/src/{verify-modal.tsx → modal/verify-modal.tsx}

@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react'
-import { Modal, Input, Button, message } from './compoments/index.js'
-import Api from './resource.js'
-import t from './utils/i18n.js'
-import { VerifyModalConfig } from './utils/type.js';
+import { Modal, Input, Button, message } from '../compoments/index.js'
+import Api from '../utils/resource.js'
+import t from '../utils/i18n.js'
+import { VerifyModalConfig } from '../utils/type.js';
 import { axios } from '@yqg/resource';
 
 const CreateMessageVerifyModal = ({ props }: { props: VerifyModalConfig }) => {
@@ -12,7 +12,7 @@ const CreateMessageVerifyModal = ({ props }: { props: VerifyModalConfig }) => {
     const [captchaImage, setCaptchaImage] = useState<string>('');
     const [captchCode, setCaptchCode] = useState<string>('');
     const [captchaKey, setCaptchaKey] = useState<string>('');
-    const { data, http, lang, sendApi = '/admin/sms/send', config, apiResolve, apiPromiseToEmpty } = props || {};
+    const { data, http, lang, sendApi = '/admin/sms/send', config, apiResolve, apiPromiseToEmpty, onClose } = props || {};
     const dataObj = JSON.parse(data || '{}');
     const { mobile, verifyCodeKey } = dataObj || {};
 
@@ -73,7 +73,7 @@ const CreateMessageVerifyModal = ({ props }: { props: VerifyModalConfig }) => {
             onClose={() => {
                 setVisible(false);
                 apiPromiseToEmpty?.();
-                props.onClose?.();
+                onClose?.();
             }}
         >
             <div style={{ fontSize: 14, color: '#666' }}>{t('alreadySend', lang, { phone: mobile })}</div>

package/src/utils/type.ts

@@ -28,5 +28,6 @@ export type VerifyModalConfig = {
 
 export type LoginModalConfig = {
     goLogin: () => void;
+    onClose?: () => void
     lang?: 'zh' | 'en' | 'id';
 }