message-verify 1.0.0-beta.1 → 1.0.0-beta.10

package/README.md

@@ -9,4 +9,29 @@
 ### 1. 引入组件
 
 ```typescript
-import {createMessageVerifyModal} from 'message-verify';
+import {createMessageVerifyModal} from 'message-verify';
+```
+
+### 2. 参数说明
+
+```typescript
+- data ：字符串，包含手机号、验证码 key 等信息（JSON 字符串）。
+- config ：对象，必须包含 headers 字段（可为空对象），用于 http 请求配置。
+- lang ：组件使用语言，支持 'zh' （中文）、 'en' （英文）、 'id' （印尼语）。
+- http ：http 客户端实例（如 axios）。
+- onClose ：弹窗关闭回调（可选）。
+```
+
+### 3. 示例
+
+```typescript
+createMessageVerifyModal({
+  data,
+  config: { headers: {} }, // 必须包含 headers 字段
+  lang: 'zh', // 支持 'zh' | 'en' | 'id'
+  http: axios,
+  onClose: () => {
+    // 可选，弹窗关闭回调
+  }
+});
+```

package/dist/index.d.ts

@@ -1,18 +1,3 @@
+import { ModalConfig } from './utils/type.js';
 export declare const initFingerprint: () => Promise<string>;
-export type ModalConfig = {
-    data: string;
-    onClose?: () => void;
-    config: object;
-    lang: 'zh' | 'en' | 'id';
-    http: {
-        (params: object): Promise<unknown>;
-        defaults: {
-            headers: {
-                common: {
-                    [key: string]: unknown;
-                };
-            };
-        };
-    };
-};
 export declare const createMessageVerifyModal: (modalProps: ModalConfig) => void;

package/dist/index.js

@@ -2,7 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import ReactDOM from 'react-dom/client';
 import VerifyModal from './verify-modal.js';
 import Fingerprint2 from 'fingerprintjs2';
-export const initFingerprint = () => {
+let cachedFingerprint = null;
+export const initFingerprint = async () => {
+    if (cachedFingerprint) {
+        // 已有缓存，直接返回 Promise
+        return Promise.resolve(cachedFingerprint);
+    }
+    // 首次异步获取并缓存
     return new Promise((resolve) => {
         Fingerprint2.get(function (components) {
             const includeKeys = ['userAgent', 'deviceMemory', 'cpuClass', 'hardwareConcurrency', 'platform'];
@@ -11,6 +17,7 @@ export const initFingerprint = () => {
                 .map(component => component.value)
                 .join('###');
             const fingerprint = Fingerprint2.x64hash128(values, 31);
+            cachedFingerprint = fingerprint;
             resolve(fingerprint);
         });
     });

package/dist/locales/en.d.ts

@@ -4,6 +4,7 @@ declare const _default: {
     verifyCode: string;
     pleaseEnterAndSend: string;
     sendSuccess: string;
+    sendFailed: string;
     reSend: string;
     countDownSecound: string;
 };

package/dist/locales/en.js

@@ -4,6 +4,7 @@ export default {
     verifyCode: 'Verification Code',
     pleaseEnterAndSend: 'Please enter the image verification code first, then resend the code',
     sendSuccess: 'Successfully sent',
+    sendFailed: 'Send failed',
     reSend: 'Resend',
     countDownSecound: '{countdown} seconds'
 };

package/dist/locales/id.d.ts

@@ -4,6 +4,7 @@ declare const _default: {
     verifyCode: string;
     pleaseEnterAndSend: string;
     sendSuccess: string;
+    sendFailed: string;
     reSend: string;
     countDownSecound: string;
 };

package/dist/locales/id.js

@@ -4,6 +4,7 @@ export default {
     verifyCode: 'Kode Verifikasi',
     pleaseEnterAndSend: 'Harap masukkan kode verifikasi gambar terlebih dahulu, lalu kirim ulang kode',
     sendSuccess: 'Berhasil dikirim',
+    sendFailed: 'Gagal mengirim',
     reSend: 'Kirim Ulang',
     countDownSecound: '{countdown} detik'
 };

package/dist/locales/zh.d.ts

@@ -4,6 +4,7 @@ declare const _default: {
     verifyCode: string;
     pleaseEnterAndSend: string;
     sendSuccess: string;
+    sendFailed: string;
     reSend: string;
     countDownSecound: string;
 };

package/dist/locales/zh.js

@@ -4,6 +4,7 @@ export default {
     verifyCode: '验证码',
     pleaseEnterAndSend: '请输入图形验证码后，重新发送验证码',
     sendSuccess: '发送成功',
+    sendFailed: '发送失败',
     reSend: '重新发送',
     countDownSecound: '{countdown}秒'
 };

package/dist/main.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createRoot } from 'react-dom/client';
-import { createMessageVerifyModal } from './index.js'; // 或 './index'
+import { createMessageVerifyModal, initFingerprint } from './index.js'; // 或 './index'
 import { axios } from '@yqg/resource';
 const data = "{\"mobile\":\"188****4035\",\"verifyCodeKey\":\"3f025b33-988e-47c0-950d-6beb776d043f\",\"needValid\":true,\"step\":2,\"message\":\"需要填写验证码\"}";
+const fp = await initFingerprint();
+console.log(fp);
 createRoot(document.getElementById('root')).render(_jsx("button", { onClick: () => createMessageVerifyModal({
         data,
-        config: {},
+        config: { headers: {} },
         lang: 'en',
         http: axios,
     }), children: "Show Modal" }));

package/dist/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/index.tsx","../src/main.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"],"version":"5.7.3"}
+{"root":["../src/index.tsx","../src/main.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"}

package/dist/utils/type.d.ts

@@ -0,0 +1,22 @@
+export type ModalConfig = {
+    data: string;
+    onClose?: () => void;
+    config: {
+        headers: {
+            [key: string]: string | undefined;
+        };
+        [key: string]: unknown;
+    };
+    lang: 'zh' | 'en' | 'id';
+    http: {
+        (params: object): Promise<unknown>;
+        defaults: {
+            headers: {
+                common: {
+                    [key: string]: unknown;
+                };
+            };
+        };
+    };
+    api?: string;
+};

package/dist/utils/type.js

@@ -0,0 +1 @@
+export {};

package/dist/verify-modal.d.ts

@@ -1,19 +1,4 @@
-type ModalConfig = {
-    data: string;
-    onClose?: () => void;
-    config: object;
-    lang: 'zh' | 'en' | 'id';
-    http: {
-        (params: object): Promise<unknown>;
-        defaults: {
-            headers: {
-                common: {
-                    [key: string]: unknown;
-                };
-            };
-        };
-    };
-};
+import { ModalConfig } from './utils/type.js';
 declare const CreateMessageVerifyModal: ({ props }: {
     props: ModalConfig;
 }) => import("react/jsx-runtime.js").JSX.Element;

package/dist/verify-modal.js

@@ -3,14 +3,15 @@ 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 { axios } from '@yqg/resource';
 const CreateMessageVerifyModal = ({ props }) => {
     const [visible, setVisible] = useState(true);
-    const [countdown, setCountdown] = useState(3);
+    const [countdown, setCountdown] = useState(60);
     const [otp, setOtp] = useState('');
     const [captchaImage, setCaptchaImage] = useState('');
     const [captchCode, setCaptchCode] = useState('');
     const [captchaKey, setCaptchaKey] = useState('');
-    const { data, config, http, lang } = props || {};
+    const { data, config, http, lang, api = '/admin/sms/send' } = props || {};
     const dataObj = JSON.parse(data || '{}');
     const { mobile, verifyCodeKey } = dataObj || {};
     const getKey = async () => {
@@ -46,27 +47,33 @@ const CreateMessageVerifyModal = ({ props }) => {
         };
     }, [visible, countdown]);
     const handleResend = async () => {
-        setCountdown(60);
         const formData = new FormData();
         formData.append('captchaKey', captchaKey);
         formData.append('captcha', captchCode);
-        const res = await Api.reSendCode(formData);
-        console.log('handleResend=>res', res);
+        // 重新发送验证码
+        const res = await axios.post(api, formData);
+        const { code, detail } = res.data?.status || {};
+        if (code !== 0) {
+            message.error(detail || t('sendFailed', lang));
+            return;
+        }
         message.success(t('sendSuccess', lang));
+        setCountdown(60);
     };
     return (_jsxs(Modal, { width: 420, visible: visible, onClose: () => {
             setVisible(false);
             props.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: (val) => {
                             setOtp(val);
+                            console.log('打印Content-Type', config.headers['Content-Type']);
                             if (val.length === 6) {
-                                console.log('otp', val);
                                 http({
                                     ...config,
                                     headers: {
                                         ...http.defaults.headers.common,
                                         'sms-code': val,
                                         'sms-code-key': verifyCodeKey,
+                                        'Content-Type': config.headers['Content-Type'],
                                     }
                                 });
                                 setVisible(false);

package/package.json

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

package/src/index.tsx

@@ -1,8 +1,15 @@
 import ReactDOM from 'react-dom/client'
 import VerifyModal from './verify-modal.js'
 import Fingerprint2 from 'fingerprintjs2';
+import { ModalConfig } from './utils/type.js';
 
-export const initFingerprint = (): Promise<string> => {
+let cachedFingerprint: string | null = null;
+export const initFingerprint = async (): Promise<string> => {
+    if (cachedFingerprint) {
+        // 已有缓存，直接返回 Promise
+        return Promise.resolve(cachedFingerprint);
+    }
+    // 首次异步获取并缓存
     return new Promise((resolve) => {
         Fingerprint2.get(function (components) {
             const includeKeys = ['userAgent', 'deviceMemory', 'cpuClass', 'hardwareConcurrency', 'platform'];
@@ -11,28 +18,12 @@ export const initFingerprint = (): Promise<string> => {
                 .map(component => component.value)
                 .join('###');
             const fingerprint = Fingerprint2.x64hash128(values, 31);
+            cachedFingerprint = fingerprint;
             resolve(fingerprint);
         });
     });
 };
 
-export type ModalConfig = {
-    data: string;
-    onClose?: () => void
-    config: object;
-    lang: 'zh' | 'en' | 'id';
-    http: {
-        (params: object): Promise<unknown>;
-        defaults: {
-            headers: {
-                common: {
-                    [key: string]: unknown;
-                }
-            }
-        }
-    };
-}
-
 let modalRoot: ReactDOM.Root | null = null
 
 export const createMessageVerifyModal = (modalProps: ModalConfig) => {

package/src/locales/en.ts

@@ -4,6 +4,7 @@ export default {
     verifyCode: 'Verification Code',
     pleaseEnterAndSend: 'Please enter the image verification code first, then resend the code',
     sendSuccess: 'Successfully sent',
+    sendFailed: 'Send failed',
     reSend: 'Resend',
     countDownSecound: '{countdown} seconds'
 };

package/src/locales/id.ts

@@ -4,6 +4,7 @@ export default {
     verifyCode: 'Kode Verifikasi',
     pleaseEnterAndSend: 'Harap masukkan kode verifikasi gambar terlebih dahulu, lalu kirim ulang kode',
     sendSuccess: 'Berhasil dikirim',
+    sendFailed: 'Gagal mengirim',
     reSend: 'Kirim Ulang',
     countDownSecound: '{countdown} detik'
 };

package/src/locales/zh.ts

@@ -4,6 +4,7 @@ export default {
     verifyCode: '验证码',
     pleaseEnterAndSend: '请输入图形验证码后，重新发送验证码',
     sendSuccess: '发送成功',
+    sendFailed: '发送失败',
     reSend: '重新发送',
     countDownSecound: '{countdown}秒'
 };

package/src/main.tsx

@@ -1,13 +1,16 @@
 import { createRoot } from 'react-dom/client';
-import { createMessageVerifyModal } from './index.js'; // 或 './index'
+import { createMessageVerifyModal, initFingerprint } from './index.js'; // 或 './index'
 import { axios } from '@yqg/resource';
 
 const data = "{\"mobile\":\"188****4035\",\"verifyCodeKey\":\"3f025b33-988e-47c0-950d-6beb776d043f\",\"needValid\":true,\"step\":2,\"message\":\"需要填写验证码\"}";
 
+const fp = await initFingerprint();
+console.log(fp);
+
 createRoot(document.getElementById('root')!).render(
     <button onClick={() => createMessageVerifyModal({ 
         data,
-        config: {},
+        config: {headers: {}},
         lang: 'en',
         http: axios,
     })}>

package/src/utils/type.ts

@@ -0,0 +1,23 @@
+
+export type ModalConfig = {
+    data: string;
+    onClose?: () => void
+    config: {
+        headers: {
+            [key: string]: string | undefined;
+        };
+        [key: string]: unknown;
+    };
+    lang: 'zh' | 'en' | 'id';
+    http: {
+        (params: object): Promise<unknown>;
+        defaults: {
+            headers: {
+                common: {
+                    [key: string]: unknown;
+                }
+            }
+        }
+    };
+    api?: string;
+}

package/src/verify-modal.tsx

@@ -2,31 +2,17 @@ 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 { ModalConfig } from './utils/type.js';
+import { axios } from '@yqg/resource';
 
-type ModalConfig = {
-    data: string;
-    onClose?: () => void;
-    config: object;
-    lang: 'zh' | 'en' | 'id';
-    http: {
-        (params: object): Promise<unknown>;
-        defaults: {
-            headers: {
-                common: {
-                    [key: string]: unknown;
-                }
-            }
-        }
-    };
-}
 const CreateMessageVerifyModal = ({ props }: { props: ModalConfig }) => {
     const [visible, setVisible] = useState(true);
-    const [countdown, setCountdown] = useState(3);
+    const [countdown, setCountdown] = useState(60);
     const [otp, setOtp] = useState('');
     const [captchaImage, setCaptchaImage] = useState<string>('');
     const [captchCode, setCaptchCode] = useState<string>('');
     const [captchaKey, setCaptchaKey] = useState<string>('');
-    const { data, config, http, lang } = props || {};
+    const { data, config, http, lang, api='/admin/sms/send' } = props || {};
     const dataObj = JSON.parse(data || '{}');
     const { mobile, verifyCodeKey } = dataObj || {};
 
@@ -63,13 +49,18 @@ const CreateMessageVerifyModal = ({ props }: { props: ModalConfig }) => {
     }, [visible, countdown]);
 
     const handleResend = async () => {
-        setCountdown(60);
         const formData = new FormData();
         formData.append('captchaKey', captchaKey);
         formData.append('captcha', captchCode);
-        const res = await Api.reSendCode(formData);
-        console.log('handleResend=>res', res);
+        // 重新发送验证码
+        const res = await axios.post(api, formData);
+        const { code, detail } = res.data?.status || {};
+        if (code !== 0) {
+            message.error(detail || t('sendFailed', lang));
+            return;
+        }
         message.success(t('sendSuccess', lang));
+        setCountdown(60);
     }
 
     return (
@@ -89,14 +80,15 @@ const CreateMessageVerifyModal = ({ props }: { props: ModalConfig }) => {
                     value={otp}
                     onChange={(val) => {
                         setOtp(val);
+                        console.log('打印Content-Type', config.headers['Content-Type'])
                         if (val.length === 6) {
-                            console.log('otp', val);
                             http({
                                 ...config,
                                 headers: {
                                     ...http.defaults.headers.common,
                                     'sms-code': val,
                                     'sms-code-key': verifyCodeKey,
+                                    'Content-Type': config.headers['Content-Type'],
                                 }
                             });
                             setVisible(false);