message-verify 0.0.40-beta.0 → 0.0.42-beta.0

package/dist/index.d.ts

@@ -1,9 +1,7 @@
 export type ModalConfig = {
-    data: {
-        mobile: string;
-        verifyCodeKey: string;
-        sendSuccess: boolean;
-    };
+    data: string;
     onClose?: () => void;
+    config: object;
+    http: (params: object) => Promise<unknown>;
 };
-export declare const createMessageVerifyModal: (config: ModalConfig) => void;
+export declare const createMessageVerifyModal: (modalProps: ModalConfig) => void;

package/dist/index.js

@@ -2,15 +2,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import ReactDOM from 'react-dom/client';
 import VerifyModal from './verify-modal.js';
 let modalRoot = null;
-export const createMessageVerifyModal = (config) => {
+export const createMessageVerifyModal = (modalProps) => {
     const container = document.createElement('div');
     container.id = 'antd-modal-container';
     document.body.appendChild(container);
     modalRoot = ReactDOM.createRoot(container);
-    modalRoot.render(_jsx(VerifyModal, { config: {
-            ...config,
+    modalRoot.render(_jsx(VerifyModal, { props: {
+            ...modalProps,
             onClose: () => {
-                config.onClose?.();
+                modalProps.onClose?.();
                 destroyModal();
             }
         } }));

package/dist/main.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createRoot } from 'react-dom/client';
 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" }));
+const data = "{\"mobile\":\"188****4035\",\"verifyCodeKey\":\"3f025b33-988e-47c0-950d-6beb776d043f\",\"needValid\":true,\"step\":2,\"message\":\"需要填写验证码\"}";
+createRoot(document.getElementById('root')).render(_jsx("button", { onClick: () => createMessageVerifyModal({
+        data,
+        config: {},
+        http: () => Promise.resolve({}),
+    }), children: "Show Modal" }));

package/dist/resource.js

@@ -1,43 +1,46 @@
-import { assign, axios as instance, customPost } from '@yqg/resource';
-import { message } from './compoments/index.js';
-import { YQG_SUCCESS } from './utils/status.js';
+import { assign, customPost } from '@yqg/resource';
+// import { assign, axios as instance, customPost } from '@yqg/resource';
+// import { message } from './compoments/index.js';
+// import { YQG_SUCCESS } from './utils/status.js';
 const urlPrefix = '/admin/';
 // axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
-instance.interceptors.response.use((res) => {
-    const { status } = res?.data || {};
-    const { code, detail } = status || {};
-    if (res?.config?.responseType === 'blob') {
-        if (res?.data?.type === 'application/json') {
-            // 没有拿到文件时，将拿到的 blob 流转为 js 对象，进而拿到错误信息(detail)并返回 reject 状态
-            // 不处理将默认下载一个 json 文件
-            const reader = new FileReader();
-            reader.readAsText(res.data, 'utf-8');
-            reader.onload = () => {
-                const parsedObj = JSON.parse(reader.result);
-                message.info(parsedObj?.status?.detail);
-            };
-            return Promise.reject();
-        }
-        else {
-            return res;
-        }
-    }
-    if (res.headers && res.headers['content-type'] === 'image/jpeg') {
-        return res;
-    }
-    switch (code) {
-        case YQG_SUCCESS:
-            return Promise.resolve(res);
-        default: {
-            message.error(detail);
-            return Promise.reject(res);
-        }
-    }
-}, (err) => {
-    const detail = err?.data?.status?.detail || 'Unknown error';
-    message.error(detail);
-    return Promise.reject(err);
-});
+// instance.interceptors.response.use(
+//     (res) => {
+//         const { status } = res?.data || {};
+//         const { code, detail } = status || {};
+//         if (res?.config?.responseType === 'blob') {
+//             if (res?.data?.type === 'application/json') {
+//                 // 没有拿到文件时，将拿到的 blob 流转为 js 对象，进而拿到错误信息(detail)并返回 reject 状态
+//                 // 不处理将默认下载一个 json 文件
+//                 const reader = new FileReader();
+//                 reader.readAsText(res.data, 'utf-8');
+//                 reader.onload = () => {
+//                     const parsedObj = JSON.parse(reader.result as string);
+//                     message.info(parsedObj?.status?.detail);
+//                 };
+//                 return Promise.reject();
+//             } else {
+//                 return res;
+//             }
+//         }
+//         if (res.headers && res.headers['content-type'] === 'image/jpeg') {
+//             return res;
+//         }
+//         switch (code) {
+//             case YQG_SUCCESS:
+//                 return Promise.resolve(res);
+//             default: {
+//                 message.error(detail);
+//                 return Promise.reject(res);
+//             }
+//         }
+//     },
+//     (err: {data: {status: {detail: string}}}) => {
+//         const detail = err?.data?.status?.detail || 'Unknown error';
+//         message.error(detail);
+//         return Promise.reject(err);
+//     },
+// );
 const api = {
     urlPrefix,
     getCaptchaKey: customPost('captcha/key'),

package/dist/verify-modal.d.ts

@@ -1,12 +1,10 @@
 type ModalConfig = {
-    data: {
-        mobile: string;
-        verifyCodeKey: string;
-        sendSuccess: boolean;
-    };
+    data: string;
     onClose?: () => void;
+    config: object;
+    http: (params: object) => Promise<unknown>;
 };
-declare const ModalDom: ({ config }: {
-    config: ModalConfig;
+declare const ModalDom: ({ props }: {
+    props: ModalConfig;
 }) => import("react/jsx-runtime.js").JSX.Element;
 export default ModalDom;

package/dist/verify-modal.js

@@ -2,14 +2,15 @@ import { jsxs as _jsxs, jsx as _jsx } 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 = ({ config }) => {
+const ModalDom = ({ props }) => {
     const [visible, setVisible] = useState(true);
     const [countdown, setCountdown] = useState(3);
     const [captchaImage, setCaptchaImage] = useState('');
     const [captchCode, setCaptchCode] = useState('');
     const [captchaKey, setCaptchaKey] = useState('');
-    const { data } = config || {};
-    const { mobile } = data || {};
+    const { data, config, http } = props || {};
+    const dataObj = JSON.parse(data || '{}');
+    const { mobile } = dataObj || {};
     const getKey = async () => {
         const res = await Api.getCaptchaKey();
         const { body: key } = res.data || {};
@@ -47,9 +48,14 @@ const ModalDom = ({ config }) => {
     };
     return (_jsxs(Modal, { visible: visible, onClose: () => {
             setVisible(false);
-            config.onClose?.();
+            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, { placeholder: "\u8BF7\u8F93\u5165\u9A8C\u8BC1\u7801", onChange: (val) => { console.log('change', val); } }), _jsx(Button, { disabled: countdown > 0 || !captchCode, onClick: handleResend, children: countdown > 0 ? `${countdown}秒` : '重新发送' })] })] }));
+                        } }), 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, { placeholder: "\u8BF7\u8F93\u5165\u9A8C\u8BC1\u7801", onChange: (val) => {
+                            if (val.length === 6) {
+                                console.log('change', val.length);
+                                http(config);
+                            }
+                        } }), _jsx(Button, { disabled: countdown > 0 || !captchCode, onClick: handleResend, children: countdown > 0 ? `${countdown}秒` : '重新发送' })] })] }));
 };
 export default ModalDom;

package/package.json

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

package/src/index.tsx

@@ -2,17 +2,15 @@ import ReactDOM from 'react-dom/client'
 import VerifyModal from './verify-modal.js'
 
 export type ModalConfig = {
-    data: {
-        mobile: string;
-        verifyCodeKey: string;
-        sendSuccess: boolean;
-    };
-  onClose?: () => void
+    data: string;
+    onClose?: () => void
+    config: object;
+    http: (params: object) => Promise<unknown>;
 }
 
 let modalRoot: ReactDOM.Root | null = null
 
-export const createMessageVerifyModal = (config: ModalConfig) => {
+export const createMessageVerifyModal = (modalProps: ModalConfig) => {
   const container = document.createElement('div')
   container.id = 'antd-modal-container'
   document.body.appendChild(container)
@@ -20,10 +18,10 @@ export const createMessageVerifyModal = (config: ModalConfig) => {
   modalRoot = ReactDOM.createRoot(container)
   modalRoot.render(
     <VerifyModal
-      config={{
-        ...config,
+      props={{
+        ...modalProps,
         onClose: () => {
-          config.onClose?.()
+          modalProps.onClose?.()
           destroyModal()
         }
       }}

package/src/main.tsx

@@ -1,13 +1,13 @@
 import { createRoot } from 'react-dom/client';
 import { createMessageVerifyModal } from './index.js'; // 或 './index'
 
-const data = {
-    mobile: '185****7760',
-    verifyCodeKey: 'e381c5f9-c7f4-4bf1-a948-744334fb0203',
-    sendSuccess: true
-}
+const data = "{\"mobile\":\"188****4035\",\"verifyCodeKey\":\"3f025b33-988e-47c0-950d-6beb776d043f\",\"needValid\":true,\"step\":2,\"message\":\"需要填写验证码\"}";
 
 createRoot(document.getElementById('root')!).render(
-    <button onClick={() => createMessageVerifyModal({ data })}>
+    <button onClick={() => createMessageVerifyModal({ 
+        data,
+        config: {},
+        http: () => Promise.resolve({}),
+    })}>
       Show Modal
     </button>);

package/src/resource.ts

@@ -1,50 +1,51 @@
-import { assign, axios as instance, customPost } from '@yqg/resource';
-import { message } from './compoments/index.js';
-import { YQG_SUCCESS } from './utils/status.js';
+import { assign, customPost } from '@yqg/resource';
+// import { assign, axios as instance, customPost } from '@yqg/resource';
+// import { message } from './compoments/index.js';
+// import { YQG_SUCCESS } from './utils/status.js';
 
 const urlPrefix = '/admin/';
 // axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
-instance.interceptors.response.use(
-    (res) => {
-        const { status } = res?.data || {};
-        const { code, detail } = status || {};
-        if (res?.config?.responseType === 'blob') {
-            if (res?.data?.type === 'application/json') {
-                // 没有拿到文件时，将拿到的 blob 流转为 js 对象，进而拿到错误信息(detail)并返回 reject 状态
-                // 不处理将默认下载一个 json 文件
-                const reader = new FileReader();
-                reader.readAsText(res.data, 'utf-8');
-                reader.onload = () => {
-                    const parsedObj = JSON.parse(reader.result as string);
-                    message.info(parsedObj?.status?.detail);
-                };
+// instance.interceptors.response.use(
+//     (res) => {
+//         const { status } = res?.data || {};
+//         const { code, detail } = status || {};
+//         if (res?.config?.responseType === 'blob') {
+//             if (res?.data?.type === 'application/json') {
+//                 // 没有拿到文件时，将拿到的 blob 流转为 js 对象，进而拿到错误信息(detail)并返回 reject 状态
+//                 // 不处理将默认下载一个 json 文件
+//                 const reader = new FileReader();
+//                 reader.readAsText(res.data, 'utf-8');
+//                 reader.onload = () => {
+//                     const parsedObj = JSON.parse(reader.result as string);
+//                     message.info(parsedObj?.status?.detail);
+//                 };
 
-                return Promise.reject();
-            } else {
-                return res;
-            }
-        }
+//                 return Promise.reject();
+//             } else {
+//                 return res;
+//             }
+//         }
 
-        if (res.headers && res.headers['content-type'] === 'image/jpeg') {
-            return res;
-        }
+//         if (res.headers && res.headers['content-type'] === 'image/jpeg') {
+//             return res;
+//         }
 
-        switch (code) {
-            case YQG_SUCCESS:
-                return Promise.resolve(res);
-            default: {
-                message.error(detail);
-                return Promise.reject(res);
-            }
-        }
-    },
-    (err: {data: {status: {detail: string}}}) => {
-        const detail = err?.data?.status?.detail || 'Unknown error';
-        message.error(detail);
+//         switch (code) {
+//             case YQG_SUCCESS:
+//                 return Promise.resolve(res);
+//             default: {
+//                 message.error(detail);
+//                 return Promise.reject(res);
+//             }
+//         }
+//     },
+//     (err: {data: {status: {detail: string}}}) => {
+//         const detail = err?.data?.status?.detail || 'Unknown error';
+//         message.error(detail);
 
-        return Promise.reject(err);
-    },
-);
+//         return Promise.reject(err);
+//     },
+// );
 const api = {
     urlPrefix,
 

package/src/verify-modal.tsx

@@ -3,21 +3,20 @@ import { Modal, Input, Button, message } from './compoments/index.js'
 import Api from './resource.js'
 
 type ModalConfig = {
-    data: {
-        mobile: string;
-        verifyCodeKey: string;
-        sendSuccess: boolean;
-    };
-  onClose?: () => void
+    data: string;
+    onClose?: () => void;
+    config: object;
+    http: (params: object) => Promise<unknown>;
 }
-const ModalDom = ({ config }: { config: ModalConfig }) => {
+const ModalDom = ({ props }: { props: ModalConfig }) => {
     const [visible, setVisible] = useState(true);
     const [countdown, setCountdown] = useState(3);
     const [captchaImage, setCaptchaImage] = useState<string>('');
     const [captchCode, setCaptchCode] = useState<string>('');
     const [captchaKey, setCaptchaKey] = useState<string>('');
-    const { data } = config || {};
-    const { mobile } = data || {};
+    const { data, config, http } = props || {};
+    const dataObj = JSON.parse(data || '{}');
+    const { mobile } = dataObj || {};
 
 
     const getKey = async () => {
@@ -63,7 +62,7 @@ const ModalDom = ({ config }: { config: ModalConfig }) => {
         visible={visible}
         onClose={() => {
           setVisible(false);
-          config.onClose?.();
+          props.onClose?.();
         }}
       >
         <div style={{ fontSize: 14, color: '#666' }}>已发送短信至您的手机：{mobile}</div>
@@ -81,7 +80,12 @@ const ModalDom = ({ config }: { config: ModalConfig }) => {
         <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 8 }}>
             <Input
                 placeholder="请输入验证码"
-                onChange={(val) => {console.log('change', val)}}
+                onChange={(val) => {
+                    if(val.length === 6) {
+                        console.log('change', val.length)
+                        http(config);
+                    }
+                }}
             />
             <Button
                 disabled={countdown > 0 || !captchCode}