message-verify 0.0.24-beta.0 → 0.0.26-beta.0

package/dist/app.d.ts

@@ -0,0 +1,12 @@
+import '@ant-design/v5-patch-for-react-19';
+interface Props {
+    data: {
+        mobile: string;
+        verifyCodeKey: string;
+        sendSuccess: boolean;
+    };
+    refresh: () => void;
+    isShow: boolean;
+}
+declare const App: React.FC<Props>;
+export default App;

package/dist/app.js

@@ -0,0 +1,58 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { Input, Button, Modal, message } from 'antd';
+import Api from './resource.js';
+import '@ant-design/v5-patch-for-react-19';
+const App = ({ data, isShow }) => {
+    const { mobile } = data || {};
+    const [countdown, setCountdown] = useState(3);
+    const [visible, setVisible] = useState(isShow || false);
+    const [captchaImage, setCaptchaImage] = useState('');
+    const [captchCode, setCaptchCode] = useState('');
+    const [captchaKey, setCaptchaKey] = useState('');
+    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(() => {
+        setVisible(true);
+    }, []);
+    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 () => {
+        setCountdown(60);
+        const res = await Api.reSendCode({ captchaKey, captcha: captchCode });
+        console.log('handleResend=>res', res);
+        message.success('发送成功');
+    };
+    const renderModal = (_jsxs(Modal, { open: visible, onClose: () => setVisible(false), width: 400, footer: _jsx(Button, { onClick: () => { }, children: "\u63D0\u4EA4" }), 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.target.value);
+                        } }), 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.OTP, { disabled: !captchCode, length: 6, onChange: (val) => { console.log('change', val); } }), _jsx(Button, { disabled: countdown > 0 || !captchCode, onClick: handleResend, children: countdown > 0 ? `${countdown}秒` : '重新发送' })] })] }));
+    console.log('captchCode', captchCode);
+    if (isShow) {
+        return createPortal(renderModal, document.body);
+    }
+    return null;
+};
+export default App;

package/dist/index.d.ts

@@ -5,6 +5,9 @@ interface Props {
         sendSuccess: boolean;
     };
     refresh: () => void;
+    isShow: boolean;
 }
-declare const App: React.FC<Props>;
-export default App;
+declare function createMessageVerify(props: Props): {
+    destroy: () => void;
+};
+export { createMessageVerify };

package/dist/index.js

@@ -1,48 +1,20 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { Input, Button, Modal } from 'antd';
-import Api from './resource.js';
-const App = ({ data }) => {
-    const { mobile } = data || {};
-    const [countdown, setCountdown] = useState(60);
-    const [visible, setVisible] = useState(false);
-    const [captchaImage, setCaptchaImage] = useState('');
-    const getKey = async () => {
-        const res = await Api.getCaptchaKey();
-        console.log('res', res);
-        const image = await Api.getCaptchaImage({ captchaKey: res.data.key });
-        console.log('image', image);
-        setCaptchaImage(image);
-    };
-    // const retryModal = async(config, http) =>{
-    //     console.log('retryModal=>config', config);
-    //     config.headers['sms-code'] = 'new-value';
-    //     // 3. 重新发起请求
-    //     await http(config);
-    //     // console.log('response', response);
-    // };
-    useEffect(() => {
-        setVisible(true);
-    }, []);
-    useEffect(() => {
-        let timer = null;
-        if (visible && countdown > 0) {
-            timer = setInterval(() => {
-                setCountdown((prev) => prev - 1);
-            }, 1000);
-        }
-        if (countdown === 0) {
-            getKey();
+import { jsx as _jsx } from "react/jsx-runtime";
+import App from './app';
+import { createRoot } from 'react-dom/client';
+function createMessageVerify(props) {
+    // 创建一个挂载点
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    // 渲染弹窗
+    const root = createRoot(container);
+    // 这里 isShow 直接传 true，弹窗立即显示
+    root.render(_jsx(App, { ...props, isShow: true }));
+    // 可选：返回关闭方法
+    return {
+        destroy: () => {
+            root.unmount();
+            document.body.removeChild(container);
         }
-        return () => {
-            if (timer)
-                clearInterval(timer);
-        };
-    }, [visible, countdown]);
-    const handleResend = async () => {
-        setCountdown(60);
-        // retryModal()
     };
-    return (_jsx(_Fragment, { children: _jsxs(Modal, { open: visible, onClose: () => setVisible(false), okText: '提交', cancelText: false, children: [_jsxs("div", { children: ["\u5DF2\u53D1\u9001\u77ED\u4FE1\u81F3\u60A8\u7684\u624B\u673A\uFF1A", mobile] }), _jsxs("div", { style: { marginTop: 8, display: 'flex', alignItems: 'center', width: 300 }, children: [_jsx(Input, { disabled: countdown > 0 }), _jsx("img", { src: captchaImage, alt: "\u9A8C\u8BC1\u7801", style: { width: 100, height: 30, marginLeft: 8 }, onClick: getKey })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8, marginTop: 8 }, children: [_jsx(Input.OTP, { length: 6, onChange: (val) => { console.log('change', val); } }), _jsx(Button, { disabled: countdown > 0, onClick: handleResend, style: countdown > 0 ? { marginLeft: 8 } : { marginLeft: 8, backgroundColor: '#1677ff', color: '#fff' }, children: countdown > 0 ? `${countdown}秒` : '重新发送' })] })] }) }));
-};
-export default App;
+}
+export { createMessageVerify };

package/dist/main.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createRoot } from 'react-dom/client';
-import App from './index.js'; // 或 './index'
+import App from './app.js'; // 或 './index'
 createRoot(document.getElementById('root')).render(_jsx(App, { data: {
         mobile: '185****7760',
         verifyCodeKey: 'e381c5f9-c7f4-4bf1-a948-744334fb0203',
         sendSuccess: true
-    }, refresh: () => { console.log('刷新'); } }));
+    }, refresh: () => { console.log('刷新'); }, isShow: true }));

package/dist/resource.js

@@ -1,9 +1,47 @@
-import { assign, customGet, customPost } from '@yqg/resource';
+import { assign, axios as instance, customPost } from '@yqg/resource';
 const urlPrefix = '/admin/';
+import { message } from 'antd';
+import { YQG_SUCCESS } from './utils/status';
+// 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);
+});
 const api = {
     urlPrefix,
     getCaptchaKey: customPost('captcha/key'),
     reSendCode: customPost('sms/send'),
-    getCaptchaImgUrl: customGet('captcha/image/:captchaKey'),
+    getCaptchaImgUrl: (captchaKey) => { return `/admin/captcha/image/${captchaKey}`; },
 };
 export default assign(api);

package/dist/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/index.tsx","../src/main.tsx","../src/resource.ts","../src/vite-env.d.ts","../src/components/input.tsx","../src/components/modal.tsx","../src/utils/getfingerprint.ts","../src/utils/index.ts"],"version":"5.7.3"}
+{"root":["../src/app.tsx","../src/index.tsx","../src/main.tsx","../src/resource.ts","../src/vite-env.d.ts","../src/utils/getfingerprint.ts","../src/utils/index.ts","../src/utils/status.ts"],"version":"5.7.3"}

package/dist/utils/status.d.ts

@@ -0,0 +1,2 @@
+export declare const YQG_SUCCESS = 0;
+export declare const YQG_REVERIFY = 200031;

package/dist/utils/status.js

@@ -0,0 +1,2 @@
+export const YQG_SUCCESS = 0;
+export const YQG_REVERIFY = 200031;

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "message-verify",
-  "version": "0.0.24-beta.0",
+  "version": "0.0.26-beta.0",
   "type": "module",
   "main": "dist/index.js",
   "dependencies": {
+    "@ant-design/v5-patch-for-react-19": "^1.0.3",
     "@fingerprintjs/fingerprintjs": "^4.6.2",
     "@yqg/resource": "^1.3.8",
     "antd": "^5.24.8",

package/src/app.tsx

@@ -0,0 +1,104 @@
+import { useEffect, useState } from 'react'
+import { createPortal } from 'react-dom';
+import { Input, Button, Modal, message } from 'antd';
+import Api from './resource.js'
+import '@ant-design/v5-patch-for-react-19';
+
+interface Props {
+    data: {
+        mobile: string;
+        verifyCodeKey: string;
+        sendSuccess: boolean;
+    };
+    refresh: () => void;
+    isShow: boolean;
+}
+const App: React.FC<Props> = ({ data, isShow }) => {
+    const { mobile } = data || {};
+    const [countdown, setCountdown] = useState(3);
+    const [visible, setVisible] = useState(isShow || false);
+    const [captchaImage, setCaptchaImage] = useState<string>('');
+    const [captchCode, setCaptchCode] = useState<string>('');
+    const [captchaKey, setCaptchaKey] = useState<string>('');
+
+    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(() => {
+        setVisible(true);
+    }, [])
+
+    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]);
+
+    const handleResend = async() => {
+        setCountdown(60);
+        const res = await Api.reSendCode({captchaKey, captcha: captchCode});
+        console.log('handleResend=>res', res);
+        message.success('发送成功');
+    }
+
+    const renderModal = (<Modal
+            open={visible}
+            onClose={() => setVisible(false)} 
+            width={400}
+            footer={
+                <Button onClick={() => {/* 提交逻辑 */}}>
+                    提交
+                </Button>
+            }
+        >
+            <div>已发送短信至您的手机：{mobile}</div>
+            {countdown > 0 ? null : <div style={{ marginTop: 8, display: 'flex', alignItems: 'center', width: 300 }}>
+                <Input onChange={(e) => {
+                    setCaptchCode(e.target.value 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.OTP 
+                    disabled={!captchCode} 
+                    length={6} 
+                    onChange={(val) => {console.log('change', val)}}
+                />
+                <Button
+                    disabled={countdown > 0 || !captchCode}
+                    onClick={handleResend}
+                >
+                    {countdown > 0 ? `${countdown}秒` : '重新发送'}
+                </Button>
+            </div>
+        </Modal>
+    )
+
+    console.log('captchCode', captchCode);
+    if(isShow) {
+        return createPortal(renderModal, document.body);
+    }
+    return null;
+}
+
+export default App;

package/src/index.tsx

@@ -1,6 +1,6 @@
-import { useEffect, useState } from 'react'
-import { Input, Button, Modal } from 'antd';
-import Api from './resource.js'
+import App from './app';
+import { createRoot } from 'react-dom/client';
+
 interface Props {
     data: {
         mobile: string;
@@ -8,80 +8,26 @@ interface Props {
         sendSuccess: boolean;
     };
     refresh: () => void;
-    // axios: any;
+    isShow: boolean;
 }
-const App: React.FC<Props> = ({ data }) => {
-    const { mobile } = data || {};
-    const [countdown, setCountdown] = useState(60);
-    const [visible, setVisible] = useState(false);
-    const [captchaImage, setCaptchaImage] = useState('');
-
-    const getKey = async () => {
-        const res = await Api.getCaptchaKey();
-        console.log('res', res);
-        const image = await Api.getCaptchaImage({ captchaKey: res.data.key });
-        console.log('image', image);
-        setCaptchaImage(image);
-    }
-
-    // const retryModal = async(config, http) =>{
-    //     console.log('retryModal=>config', config);
-    //     config.headers['sms-code'] = 'new-value';
-
-    //     // 3. 重新发起请求
-    //     await http(config);
-    //     // console.log('response', response);
-    // };
-
-    useEffect(() => {
-        setVisible(true);
-    }, [])
 
-    useEffect(() => {
-        let timer: number | null = null;
-        if (visible && countdown > 0) {
-            timer = setInterval(() => {
-                setCountdown((prev) => prev - 1);
-            }, 1000);
+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);
         }
-        if (countdown === 0) {
-            getKey();
-        }
-        return () => {
-            if (timer) clearInterval(timer);
-        };
-    }, [visible, countdown]);
-
-    const handleResend = async() => {
-        setCountdown(60);
-        // retryModal()
-    }
-
-    return (
-        <>
-            <Modal
-                open={visible}
-                onClose={() => setVisible(false)} 
-                okText={'提交'}
-                cancelText={false}
-            >
-                <div>已发送短信至您的手机：{mobile}</div>
-                 <div style={{ marginTop: 8, display: 'flex', alignItems: 'center', width: 300 }}>
-                    <Input disabled={countdown > 0} />
-                    <img src={captchaImage} alt="验证码" style={{ width: 100, height: 30, marginLeft: 8 }} onClick={getKey} />
-                </div>
-                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 8 }}>
-                    <Input.OTP length={6} onChange={(val) => {console.log('change', val)}} />
-                    <Button
-                        disabled={countdown > 0}
-                        onClick={handleResend}
-                        style={countdown > 0 ? { marginLeft: 8 } : { marginLeft: 8, backgroundColor: '#1677ff', color: '#fff' }}
-                        // btnText={countdown > 0 ? `${countdown}秒` : '重新发送'}
-                    >{countdown > 0 ? `${countdown}秒` : '重新发送'}</Button>
-                </div>
-            </Modal>
-        </>
-    )
+    };
 }
 
-export default App; 
+export { createMessageVerify };

package/src/main.tsx

@@ -1,5 +1,5 @@
 import { createRoot } from 'react-dom/client';
-import App from './index.js'; // 或 './index'
+import App from './app.js'; // 或 './index'
 
 createRoot(document.getElementById('root')!).render(
     <App
@@ -9,4 +9,5 @@ createRoot(document.getElementById('root')!).render(
             sendSuccess: true
         }}
         refresh={() => {console.log('刷新')}}
+        isShow={true}
     />);

package/src/resource.ts

@@ -1,12 +1,56 @@
-import { assign, customGet, customPost } from '@yqg/resource';
+import { assign, axios as instance, customPost } from '@yqg/resource';
 const urlPrefix = '/admin/';
+import { message } from 'antd';
+import { YQG_SUCCESS } from './utils/status';
 
+// 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);
+                };
+
+                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'),
     reSendCode: customPost('sms/send'),
-    getCaptchaImgUrl: customGet('captcha/image/:captchaKey'),
+    getCaptchaImgUrl: (captchaKey: string) => {return `/admin/captcha/image/${captchaKey}`},
 };
 
 export default assign(api);

package/src/utils/status.ts

@@ -0,0 +1,2 @@
+export const YQG_SUCCESS = 0;
+export const YQG_REVERIFY = 200031;

package/vite.config.ts

@@ -11,7 +11,11 @@ export default defineConfig({
       '/admin': {
         target: 'https://chidori-admin-test.yangqianguan.com',
         changeOrigin: true,
-        secure: false,
+        headers: {
+          host: 'chidori-admin-test.yangqianguan.com', // 和转发url一样 host不带协议头 origin带上
+          origin: 'http://chidori-admin-test.yangqianguan.com'
+        },
+
       },
     },
   },

package/src/components/input.tsx

@@ -1,35 +0,0 @@
-import React from 'react';
-
-interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-    placeholder?: string;
-}
-
-const inputStyle: React.CSSProperties = {
-    padding: '8px 12px',
-    border: '1px solid #ccc',
-    borderRadius: 4,
-    fontSize: 16,
-    outline: 'none',
-    transition: 'border-color 0.2s',
-};
-
-const Input: React.FC<InputProps> = (props) => {
-    const { placeholder = '请输入' } = props;
-    return (
-        <input
-            style={inputStyle}
-            placeholder={placeholder}
-            {...props}
-            onFocus={e => {
-                props.onFocus?.(e);
-                (e.target as HTMLInputElement).style.borderColor = '#1677ff';
-            }}
-            onBlur={e => {
-                props.onBlur?.(e);
-                (e.target as HTMLInputElement).style.borderColor = '#ccc';
-            }}
-        />
-    );
-};
-
-export default Input;

package/src/components/modal.tsx

@@ -1,60 +0,0 @@
-import React from 'react';
-
-interface ModalProps {
-    visible: boolean;
-    onClose: () => void;
-    children: React.ReactNode;
-}
-
-const modalStyle: React.CSSProperties = {
-    position: 'fixed',
-    top: 0,
-    left: 0,
-    width: '100vw',
-    height: '100vh',
-    background: 'rgba(0,0,0,0.3)',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    zIndex: 1000,
-};
-
-const contentStyle: React.CSSProperties = {
-    position: 'relative',
-    background: '#fff',
-    borderRadius: 8,
-    padding: 24,
-    minWidth: 320,
-    minHeight: 120,
-    boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
-};
-
-const closeBtnStyle: React.CSSProperties = {
-    position: 'absolute',
-    top: 12,
-    right: 12,
-    width: 24,
-    height: 24,
-    border: 'none',
-    background: 'transparent',
-    fontSize: 20,
-    cursor: 'pointer',
-    lineHeight: 1,
-};
-
-const Modal: React.FC<ModalProps> = ({ visible, onClose, children }) => {
-    if (!visible) return null;
-
-    return (
-        <div style={modalStyle}>
-            <div style={contentStyle}>
-                <button style={closeBtnStyle} onClick={onClose} aria-label="关闭">
-                    ×
-                </button>
-                {children}
-            </div>
-        </div>
-    );
-};
-
-export default Modal;