message-verify 0.0.44-beta.0 → 0.0.46-beta.0

package/README.md

@@ -1,54 +1,12 @@
-# React + TypeScript + Vite
+# MessageVerify 验证码弹窗组件接入说明
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+## 组件简介
 
-Currently, two official plugins are available:
+`CreateMessageVerifyModal` 是一个用于短信验证码校验的弹窗组件，支持国际化，适用于敏感接口需要二次验证的场景。
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+## 快速接入
 
-## Expanding the ESLint configuration
+### 1. 引入组件
 
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default tseslint.config({
-  extends: [
-    // Remove ...tseslint.configs.recommended and replace with this
-    ...tseslint.configs.recommendedTypeChecked,
-    // Alternatively, use this for stricter rules
-    ...tseslint.configs.strictTypeChecked,
-    // Optionally, add this for stylistic rules
-    ...tseslint.configs.stylisticTypeChecked,
-  ],
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
-```
-
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default tseslint.config({
-  plugins: {
-    // Add the react-x and react-dom plugins
-    'react-x': reactX,
-    'react-dom': reactDom,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended typescript rules
-    ...reactX.configs['recommended-typescript'].rules,
-    ...reactDom.configs.recommended.rules,
-  },
-})
-```
+```typescript
+import {createMessageVerifyModal} from 'message-verify';

package/dist/compoments/modal.d.ts

@@ -3,6 +3,7 @@ interface ModalProps {
     visible: boolean;
     onClose: () => void;
     children: React.ReactNode;
+    width?: number | string;
 }
 declare const Modal: React.FC<ModalProps>;
 export default Modal;

package/dist/compoments/modal.js

@@ -32,9 +32,12 @@ const closeBtnStyle = {
     cursor: 'pointer',
     lineHeight: 1,
 };
-const Modal = ({ visible, onClose, children }) => {
+const Modal = ({ visible, onClose, children, width }) => {
     if (!visible)
         return null;
-    return (_jsx("div", { style: modalStyle, children: _jsxs("div", { style: contentStyle, children: [_jsx("button", { style: closeBtnStyle, onClick: onClose, "aria-label": "\u5173\u95ED", children: "\u00D7" }), children] }) }));
+    return (_jsx("div", { style: modalStyle, children: _jsxs("div", { style: {
+                ...contentStyle,
+                width: width ? (typeof width === 'number' ? `${width}px` : width) : undefined, // 应用width
+            }, children: [_jsx("button", { style: closeBtnStyle, onClick: onClose, "aria-label": "\u5173\u95ED", children: "\u00D7" }), children] }) }));
 };
 export default Modal;

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export type ModalConfig = {
     data: string;
     onClose?: () => void;
     config: object;
+    lang: 'zh' | 'en' | 'id';
     http: {
         (params: object): Promise<unknown>;
         defaults: {

package/dist/locales/en.d.ts

@@ -0,0 +1,10 @@
+declare const _default: {
+    pleaseEnterPicVerifyCode: string;
+    alreadySend: string;
+    verifyCode: string;
+    pleaseEnterAndSend: string;
+    sendSuccess: string;
+    reSend: string;
+    countDownSecound: string;
+};
+export default _default;

package/dist/locales/en.js

@@ -0,0 +1,9 @@
+export default {
+    pleaseEnterPicVerifyCode: 'Please enter the image verification code',
+    alreadySend: 'A verification SMS has been sent to your phone: {phone}',
+    verifyCode: 'Verification Code',
+    pleaseEnterAndSend: 'Please enter the image verification code first, then resend the code',
+    sendSuccess: 'Successfully sent',
+    reSend: 'Resend',
+    countDownSecound: '{countdown} seconds'
+};

package/dist/locales/id.d.ts

@@ -0,0 +1,10 @@
+declare const _default: {
+    pleaseEnterPicVerifyCode: string;
+    alreadySend: string;
+    verifyCode: string;
+    pleaseEnterAndSend: string;
+    sendSuccess: string;
+    reSend: string;
+    countDownSecound: string;
+};
+export default _default;

package/dist/locales/id.js

@@ -0,0 +1,9 @@
+export default {
+    pleaseEnterPicVerifyCode: 'Silakan masukkan kode verifikasi gambar',
+    alreadySend: 'SMS verifikasi telah dikirim ke nomor ponsel Anda: {phone}',
+    verifyCode: 'Kode Verifikasi',
+    pleaseEnterAndSend: 'Harap masukkan kode verifikasi gambar terlebih dahulu, lalu kirim ulang kode',
+    sendSuccess: 'Berhasil dikirim',
+    reSend: 'Kirim Ulang',
+    countDownSecound: '{countdown} detik'
+};

package/dist/locales/zh.d.ts

@@ -0,0 +1,10 @@
+declare const _default: {
+    pleaseEnterPicVerifyCode: string;
+    alreadySend: string;
+    verifyCode: string;
+    pleaseEnterAndSend: string;
+    sendSuccess: string;
+    reSend: string;
+    countDownSecound: string;
+};
+export default _default;

package/dist/locales/zh.js

@@ -0,0 +1,9 @@
+export default {
+    pleaseEnterPicVerifyCode: '请输入图形验证码',
+    alreadySend: '已发送短信至您的手机：{phone}',
+    verifyCode: '验证码',
+    pleaseEnterAndSend: '请输入图形验证码后，重新发送验证码',
+    sendSuccess: '发送成功',
+    reSend: '重新发送',
+    countDownSecound: '{countdown}秒'
+};

package/dist/main.js

@@ -5,6 +5,7 @@ const data = "{\"mobile\":\"188****4035\",\"verifyCodeKey\":\"3f025b33-988e-47c0
 createRoot(document.getElementById('root')).render(_jsx("button", { onClick: () => createMessageVerifyModal({
         data,
         config: {},
+        lang: 'en',
         http: Object.assign(() => Promise.resolve({}), {
             defaults: {
                 headers: {

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/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"],"version":"5.7.3"}

package/dist/utils/i18n.d.ts

@@ -0,0 +1,3 @@
+type LocaleType = 'zh' | 'en' | 'id';
+declare function t(key: string, language?: LocaleType, params?: Record<string, string | number>): string;
+export default t;

package/dist/utils/i18n.js

@@ -0,0 +1,20 @@
+import zh from '../locales/zh.js';
+import en from '../locales/en.js';
+import id from '../locales/id.js';
+const locales = {
+    zh,
+    en,
+    id
+};
+function t(key, language = 'zh', params) {
+    const messages = locales[language] || locales.zh;
+    let template = messages[key] || '';
+    if (params) {
+        Object.keys(params).forEach(paramKey => {
+            const reg = new RegExp(`{${paramKey}}`, 'g');
+            template = template.replace(reg, String(params[paramKey]));
+        });
+    }
+    return template;
+}
+export default t;

package/dist/verify-modal.d.ts

@@ -2,6 +2,7 @@ type ModalConfig = {
     data: string;
     onClose?: () => void;
     config: object;
+    lang: 'zh' | 'en' | 'id';
     http: {
         (params: object): Promise<unknown>;
         defaults: {
@@ -13,7 +14,7 @@ type ModalConfig = {
         };
     };
 };
-declare const ModalDom: ({ props }: {
+declare const CreateMessageVerifyModal: ({ props }: {
     props: ModalConfig;
 }) => import("react/jsx-runtime.js").JSX.Element;
-export default ModalDom;
+export default CreateMessageVerifyModal;

package/dist/verify-modal.js

@@ -1,15 +1,16 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+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 './resource.js';
-const ModalDom = ({ props }) => {
+import t from './utils/i18n.js';
+const CreateMessageVerifyModal = ({ props }) => {
     const [visible, setVisible] = useState(true);
     const [countdown, setCountdown] = useState(3);
     const [otp, setOtp] = useState('');
     const [captchaImage, setCaptchaImage] = useState('');
     const [captchCode, setCaptchCode] = useState('');
     const [captchaKey, setCaptchaKey] = useState('');
-    const { data, config, http } = props || {};
+    const { data, config, http, lang } = props || {};
     const dataObj = JSON.parse(data || '{}');
     const { mobile, verifyCodeKey } = dataObj || {};
     const getKey = async () => {
@@ -17,9 +18,7 @@ const ModalDom = ({ props }) => {
         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);
         }
     };
@@ -38,21 +37,19 @@ const ModalDom = ({ props }) => {
                 clearInterval(timer);
         };
     }, [visible, countdown]);
-    useEffect(() => {
-        console.log('mobile', mobile);
-    }, [mobile]);
+    // useEffect(() => {
+    //     console.log('mobile', mobile);
+    // }, [mobile])
     const handleResend = async () => {
         setCountdown(60);
         const res = await Api.reSendCode({ captchaKey, captcha: captchCode });
         console.log('handleResend=>res', res);
-        message.success('发送成功');
+        message.success(t('sendSuccess', lang));
     };
-    return (_jsxs(Modal, { visible: visible, onClose: () => {
+    return (_jsxs(Modal, { width: 420, visible: visible, onClose: () => {
             setVisible(false);
             props.onClose?.();
-        }, 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 || 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.OTP, { length: 6, value: otp, onChange: (val) => {
+        }, 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);
                             if (val.length === 6) {
                                 http.defaults.headers.common['sms-code'] = val;
@@ -60,6 +57,9 @@ const ModalDom = ({ props }) => {
                                 http(config);
                                 setVisible(false);
                             }
-                        } }), _jsx(Button, { disabled: countdown > 0 || !captchCode, onClick: handleResend, children: countdown > 0 ? `${countdown}秒` : '重新发送' })] })] }));
+                        } }), _jsx(Button, { disabled: countdown > 0 || !captchCode, onClick: handleResend, style: { padding: '10px' }, 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) })] }));
 };
-export default ModalDom;
+export default CreateMessageVerifyModal;

package/package.json

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

package/src/compoments/modal.tsx

@@ -4,6 +4,7 @@ interface ModalProps {
     visible: boolean;
     onClose: () => void;
     children: React.ReactNode;
+    width?: number | string;
 }
 
 const modalStyle: React.CSSProperties = {
@@ -42,12 +43,15 @@ const closeBtnStyle: React.CSSProperties = {
     lineHeight: 1,
 };
 
-const Modal: React.FC<ModalProps> = ({ visible, onClose, children }) => {
+const Modal: React.FC<ModalProps> = ({ visible, onClose, children, width }) => {
     if (!visible) return null;
 
     return (
         <div style={modalStyle}>
-            <div style={contentStyle}>
+            <div style={{
+                    ...contentStyle,
+                    width: width ? (typeof width === 'number' ? `${width}px` : width) : undefined, // 应用width
+                }}>
                 <button style={closeBtnStyle} onClick={onClose} aria-label="关闭">
                     ×
                 </button>

package/src/index.tsx

@@ -5,6 +5,7 @@ export type ModalConfig = {
     data: string;
     onClose?: () => void
     config: object;
+    lang: 'zh' | 'en' | 'id';
     http: {
         (params: object): Promise<unknown>;
         defaults: {

package/src/locales/en.ts

@@ -0,0 +1,9 @@
+export default {
+    pleaseEnterPicVerifyCode: 'Please enter the image verification code',
+    alreadySend: 'A verification SMS has been sent to your phone: {phone}',
+    verifyCode: 'Verification Code',
+    pleaseEnterAndSend: 'Please enter the image verification code first, then resend the code',
+    sendSuccess: 'Successfully sent',
+    reSend: 'Resend',
+    countDownSecound: '{countdown} seconds'
+};

package/src/locales/id.ts

@@ -0,0 +1,9 @@
+export default {
+    pleaseEnterPicVerifyCode: 'Silakan masukkan kode verifikasi gambar',
+    alreadySend: 'SMS verifikasi telah dikirim ke nomor ponsel Anda: {phone}',
+    verifyCode: 'Kode Verifikasi',
+    pleaseEnterAndSend: 'Harap masukkan kode verifikasi gambar terlebih dahulu, lalu kirim ulang kode',
+    sendSuccess: 'Berhasil dikirim',
+    reSend: 'Kirim Ulang',
+    countDownSecound: '{countdown} detik'
+};

package/src/locales/zh.ts

@@ -0,0 +1,9 @@
+export default {
+    pleaseEnterPicVerifyCode: '请输入图形验证码',
+    alreadySend:'已发送短信至您的手机：{phone}',
+    verifyCode: '验证码',
+    pleaseEnterAndSend: '请输入图形验证码后，重新发送验证码',
+    sendSuccess: '发送成功',
+    reSend: '重新发送',
+    countDownSecound: '{countdown}秒'
+};

package/src/main.tsx

@@ -7,6 +7,7 @@ createRoot(document.getElementById('root')!).render(
     <button onClick={() => createMessageVerifyModal({ 
         data,
         config: {},
+        lang: 'en',
         http: Object.assign(
             () => Promise.resolve({}),
             {

package/src/utils/i18n.ts

@@ -0,0 +1,30 @@
+import zh from '../locales/zh.js';
+import en from '../locales/en.js';
+import id from '../locales/id.js';
+
+type LocaleType = 'zh' | 'en' | 'id';
+type LocaleMessages = Record<string, string>;
+
+const locales: Record<LocaleType, LocaleMessages> = {
+  zh,
+  en,
+  id
+};
+
+function t(
+  key: string,
+  language: LocaleType = 'zh',
+  params?: Record<string, string | number>,
+): string {
+  const messages = locales[language] || locales.zh;
+  let template = messages[key] || '';
+  if (params) {
+    Object.keys(params).forEach(paramKey => {
+      const reg = new RegExp(`{${paramKey}}`, 'g');
+      template = template.replace(reg, String(params[paramKey]));
+    });
+  }
+  return template;
+}
+
+export default t;

package/src/verify-modal.tsx

@@ -1,11 +1,13 @@
 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'
 
 type ModalConfig = {
     data: string;
     onClose?: () => void;
     config: object;
+    lang: 'zh' | 'en' | 'id';
     http: {
         (params: object): Promise<unknown>;
         defaults: {
@@ -17,26 +19,23 @@ type ModalConfig = {
         }
     };
 }
-const ModalDom = ({ props }: { props: ModalConfig }) => {
+const CreateMessageVerifyModal = ({ props }: { props: ModalConfig }) => {
     const [visible, setVisible] = useState(true);
     const [countdown, setCountdown] = useState(3);
     const [otp, setOtp] = useState('');
     const [captchaImage, setCaptchaImage] = useState<string>('');
     const [captchCode, setCaptchCode] = useState<string>('');
     const [captchaKey, setCaptchaKey] = useState<string>('');
-    const { data, config, http } = props || {};
+    const { data, config, http, lang } = props || {};
     const dataObj = JSON.parse(data || '{}');
     const { mobile, verifyCodeKey } = dataObj || {};
 
-
     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);
         }
     }
@@ -56,58 +55,64 @@ const ModalDom = ({ props }: { props: ModalConfig }) => {
         };
     }, [visible, countdown]);
 
-    useEffect(() => {
-        console.log('mobile', mobile);
-    }, [mobile])
+    // useEffect(() => {
+    //     console.log('mobile', mobile);
+    // }, [mobile])
 
     const handleResend = async() => {
         setCountdown(60);
         const res = await Api.reSendCode({captchaKey, captcha: captchCode});
         console.log('handleResend=>res', res);
-        message.success('发送成功');
+        message.success(t('sendSuccess', lang));
     }
   
     return (
       <Modal
+        width={420}
         visible={visible}
         onClose={() => {
           setVisible(false);
           props.onClose?.();
         }}
       >
-        <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 || captchCode) ? null : <div style={{ fontSize: 14, color: 'red' }}>请输入图形验证码后，重新发送验证码</div>}
-        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 8 }}>
-            <Input.OTP length={6} 
-            value={otp}
-            onChange={(val) => {
-                setOtp(val);
-                if(val.length === 6) {
-                http.defaults.headers.common['sms-code'] = val as string;
-                http.defaults.headers.common['sms-code-key'] = verifyCodeKey as string;
-                http(config);
-                setVisible(false);
-            }
-            }} />
+        <div style={{ fontSize: 14, color: '#666' }}>{t('alreadySend', lang, {  phone: mobile})}</div>
+        
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 12 }}>
+            <Input.OTP 
+                length={6} 
+                value={otp}
+                onChange={(val) => {
+                    setOtp(val);
+                    if(val.length === 6) {
+                        http.defaults.headers.common['sms-code'] = val as string;
+                        http.defaults.headers.common['sms-code-key'] = verifyCodeKey as string;
+                        http(config);
+                        setVisible(false);
+                    }
+                }} />
             <Button
                 disabled={countdown > 0 || !captchCode}
                 onClick={handleResend}
+                style={{ padding: '10px' }}
             >
-                {countdown > 0 ? `${countdown}秒` : '重新发送'}
+                {countdown > 0 ? t('countDownSecound', lang, { countdown }) : t('reSend', lang)}
             </Button>
         </div>
+        {countdown > 0 ? null : 
+            <div style={{ marginTop: 12, display: 'flex', alignItems: 'center' }}>
+                <Input 
+                    placeholder={t('pleaseEnterPicVerifyCode', lang)}
+                    onChange={(e) => {
+                        setCaptchCode(e as string)
+                    }}
+                    style={{ width: 300 }}
+                />
+                
+                {captchaImage && <img src={captchaImage} alt={t('verifyCode', lang)} style={{ width: 100, height: 30, marginLeft: 8 }} onClick={getKey} />}
+            </div>}
+        {(countdown > 0 || captchCode) ? null : <div style={{ fontSize: 14, color: 'red' }}>{t('pleaseEnterAndSend', lang)}</div>}
       </Modal>
     );
   };
 
-export default ModalDom;
+export default CreateMessageVerifyModal;