message-verify 0.0.37-beta.0 → 0.0.39-beta.0

package/dist/compoments/button.js

@@ -8,12 +8,13 @@ const Button = ({ disabled, onClick, children, style }) => {
         }
     };
     return (_jsx("button", { disabled: disabled, onClick: handleClick, style: {
-            padding: '6px 16px',
-            borderRadius: 4,
+            padding: '6px 6px',
+            borderRadius: 5,
             border: '1px solid #d9d9d9',
-            background: disabled ? '#f5f5f5' : '#1677ff',
-            color: disabled ? '#aaa' : '#fff',
+            background: disabled ? '#f5f5f5' : '#fff',
+            color: disabled ? '#aaa' : '#333',
             cursor: disabled ? 'not-allowed' : 'pointer',
+            whiteSpace: 'nowrap',
             ...style,
         }, children: children }));
 };

package/dist/compoments/index.d.ts

@@ -1,4 +1,5 @@
 import Modal from "./modal.js";
 import Input from "./input.js";
 import Button from "./button.js";
-export { Modal, Input, Button };
+import { message } from "./message.js";
+export { Modal, Input, Button, message };

package/dist/compoments/index.js

@@ -1,4 +1,5 @@
 import Modal from "./modal.js";
 import Input from "./input.js";
 import Button from "./button.js";
-export { Modal, Input, Button };
+import { message } from "./message.js";
+export { Modal, Input, Button, message };

package/dist/compoments/input.d.ts

@@ -4,6 +4,7 @@ interface CustomInputProps {
     onChange?: (val: string) => void;
     placeholder?: string;
     type?: string;
+    style?: React.CSSProperties;
 }
 declare const Input: React.FC<CustomInputProps>;
 export default Input;

package/dist/compoments/input.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-const Input = ({ value, onChange, placeholder, type = 'text' }) => {
+const Input = ({ value, onChange, placeholder, type = 'text', style }) => {
     return (_jsx("input", { type: type, value: value, placeholder: placeholder, onChange: e => onChange?.(e.target.value), style: {
             padding: '6px 12px',
             border: '1px solid #d9d9d9',
@@ -7,7 +7,9 @@ const Input = ({ value, onChange, placeholder, type = 'text' }) => {
             outline: 'none',
             fontSize: 14,
             width: '100%',
-            boxSizing: 'border-box'
+            boxSizing: 'border-box',
+            height: 36,
+            ...style,
         } }));
 };
 export default Input;

package/dist/compoments/message.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export declare const message: {
+    success(content: ReactNode): void;
+    error(content: ReactNode): void;
+    info(content: ReactNode): void;
+};

package/dist/compoments/message.js

@@ -0,0 +1,53 @@
+let messageContainer = null;
+function createContainer() {
+    if (!messageContainer) {
+        messageContainer = document.createElement('div');
+        messageContainer.style.position = 'fixed';
+        messageContainer.style.top = '24px';
+        messageContainer.style.left = '50%';
+        messageContainer.style.transform = 'translateX(-50%)';
+        messageContainer.style.zIndex = '9999';
+        document.body.appendChild(messageContainer);
+    }
+}
+function showMessage(content, type) {
+    createContainer();
+    const msgDiv = document.createElement('div');
+    msgDiv.style.marginTop = '8px';
+    msgDiv.style.padding = '10px 24px';
+    msgDiv.style.borderRadius = '4px';
+    msgDiv.style.boxShadow = '0 2px 8px rgba(0,0,0,0.08)';
+    msgDiv.style.fontSize = '16px';
+    if (type === 'success') {
+        msgDiv.style.background = '#f6ffed';
+        msgDiv.style.color = '#52c41a';
+    }
+    else if (type === 'error') {
+        msgDiv.style.background = '#fff2f0';
+        msgDiv.style.color = '#ff4d4f';
+    }
+    else if (type === 'info') {
+        msgDiv.style.background = '#e6f4ff';
+        msgDiv.style.color = '#1677ff';
+    }
+    msgDiv.innerText = String(content);
+    messageContainer.appendChild(msgDiv);
+    setTimeout(() => {
+        msgDiv.remove();
+        if (messageContainer && messageContainer.childElementCount === 0) {
+            messageContainer.remove();
+            messageContainer = null;
+        }
+    }, 2000);
+}
+export const message = {
+    success(content) {
+        showMessage(content, 'success');
+    },
+    error(content) {
+        showMessage(content, 'error');
+    },
+    info(content) {
+        showMessage(content, 'info');
+    }
+};

package/dist/index.js

@@ -1,66 +1,13 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Modal, Input, Button } from './compoments/index.js';
+import { jsx as _jsx } from "react/jsx-runtime";
 import ReactDOM from 'react-dom/client';
-import { useEffect, useState } from 'react';
-import Api from './resource.js';
+import VerifyModal from './verify-modal.js';
 let modalRoot = null;
-const ModalDom = ({ config }) => {
-    const [visible, setVisible] = useState(true);
-    const [countdown, setCountdown] = useState(60);
-    const [captchaImage, setCaptchaImage] = useState('');
-    const [captchCode, setCaptchCode] = useState('');
-    const [captchaKey, setCaptchaKey] = useState('');
-    const { data } = config || {};
-    const { mobile } = data || {};
-    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(() => {
-        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]);
-    useEffect(() => {
-        console.log('mobile', mobile);
-    }, []);
-    const handleResend = async () => {
-        setCountdown(60);
-        const res = await Api.reSendCode({ captchaKey, captcha: captchCode });
-        console.log('handleResend=>res', res);
-        // message.success('发送成功');
-    };
-    return (_jsxs(Modal, { visible: visible, onClose: () => {
-            setVisible(false);
-            config.onClose?.();
-        }, 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);
-                        } }), 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, { onChange: (val) => { console.log('change', val); } }), _jsx(Button, { disabled: countdown > 0 || !captchCode, onClick: handleResend, children: countdown > 0 ? `${countdown}秒` : '重新发送' })] })] }));
-};
-// ... existing code ...
 export const createMessageVerifyModal = (config) => {
     const container = document.createElement('div');
     container.id = 'antd-modal-container';
     document.body.appendChild(container);
     modalRoot = ReactDOM.createRoot(container);
-    modalRoot.render(_jsx(ModalDom, { config: {
+    modalRoot.render(_jsx(VerifyModal, { config: {
             ...config,
             onClose: () => {
                 config.onClose?.();

package/dist/resource.js

@@ -1,5 +1,5 @@
 import { assign, axios as instance, customPost } from '@yqg/resource';
-// import { message } from 'antd';
+import { message } from './compoments/index.js';
 import { YQG_SUCCESS } from './utils/status.js';
 const urlPrefix = '/admin/';
 // axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
@@ -14,7 +14,7 @@ instance.interceptors.response.use((res) => {
             reader.readAsText(res.data, 'utf-8');
             reader.onload = () => {
                 const parsedObj = JSON.parse(reader.result);
-                // message.info(parsedObj?.status?.detail);
+                message.info(parsedObj?.status?.detail);
             };
             return Promise.reject();
         }
@@ -29,13 +29,13 @@ instance.interceptors.response.use((res) => {
         case YQG_SUCCESS:
             return Promise.resolve(res);
         default: {
-            // message.error(detail);
+            message.error(detail);
             return Promise.reject(res);
         }
     }
 }, (err) => {
     const detail = err?.data?.status?.detail || 'Unknown error';
-    // message.error(detail);
+    message.error(detail);
     return Promise.reject(err);
 });
 const api = {

package/dist/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/app.tsx","../src/index.tsx","../src/main.tsx","../src/resource.ts","../src/vite-env.d.ts","../src/compoments/button.tsx","../src/compoments/index.ts","../src/compoments/input.tsx","../src/compoments/modal.tsx","../src/utils/getfingerprint.ts","../src/utils/index.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/utils/getfingerprint.ts","../src/utils/index.ts","../src/utils/status.ts"],"version":"5.7.3"}

package/dist/verify-modal.d.ts

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

package/dist/verify-modal.js

@@ -0,0 +1,55 @@
+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 [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 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(() => {
+        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]);
+    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('发送成功');
+    };
+    return (_jsxs(Modal, { visible: visible, onClose: () => {
+            setVisible(false);
+            config.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}秒` : '重新发送' })] })] }));
+};
+export default ModalDom;

package/package.json

@@ -1,10 +1,9 @@
 {
   "name": "message-verify",
-  "version": "0.0.37-beta.0",
+  "version": "0.0.39-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",
     "react": "^19.0.0",

package/src/compoments/button.tsx

@@ -21,12 +21,13 @@ const Button: React.FC<CustomButtonProps> = ({ disabled, onClick, children, styl
             disabled={disabled}
             onClick={handleClick}
             style={{
-                padding: '6px 16px',
-                borderRadius: 4,
+                padding: '6px 6px',
+                borderRadius: 5,
                 border: '1px solid #d9d9d9',
-                background: disabled ? '#f5f5f5' : '#1677ff',
-                color: disabled ? '#aaa' : '#fff',
+                background: disabled ? '#f5f5f5' : '#fff',
+                color: disabled ? '#aaa' : '#333',
                 cursor: disabled ? 'not-allowed' : 'pointer',
+                whiteSpace: 'nowrap',
                 ...style,
             }}
         >

package/src/compoments/index.ts

@@ -1,5 +1,6 @@
 import Modal from "./modal.js";
 import Input from "./input.js";
 import Button from "./button.js";
+import { message } from "./message.js";
 
-export { Modal, Input, Button };
+export { Modal, Input, Button, message };

package/src/compoments/input.tsx

@@ -5,9 +5,10 @@ interface CustomInputProps {
     onChange?: (val: string) => void;
     placeholder?: string;
     type?: string;
+    style?: React.CSSProperties;
 }
 
-const Input: React.FC<CustomInputProps> = ({ value, onChange, placeholder, type = 'text' }) => {
+const Input: React.FC<CustomInputProps> = ({ value, onChange, placeholder, type = 'text', style }) => {
     return (
         <input
             type={type}
@@ -21,7 +22,9 @@ const Input: React.FC<CustomInputProps> = ({ value, onChange, placeholder, type
                 outline: 'none',
                 fontSize: 14,
                 width: '100%',
-                boxSizing: 'border-box'
+                boxSizing: 'border-box',
+                height: 36,
+                ...style,
             }}
         />
     );

package/src/compoments/message.tsx

@@ -0,0 +1,60 @@
+import { ReactNode } from 'react';
+
+let messageContainer: HTMLDivElement | null = null;
+
+function createContainer() {
+    if (!messageContainer) {
+        messageContainer = document.createElement('div');
+        messageContainer.style.position = 'fixed';
+        messageContainer.style.top = '24px';
+        messageContainer.style.left = '50%';
+        messageContainer.style.transform = 'translateX(-50%)';
+        messageContainer.style.zIndex = '9999';
+        document.body.appendChild(messageContainer);
+    }
+}
+
+function showMessage(content: ReactNode, type: 'success' | 'error' | 'info') {
+    createContainer();
+    const msgDiv = document.createElement('div');
+    msgDiv.style.marginTop = '8px';
+    msgDiv.style.padding = '10px 24px';
+    msgDiv.style.borderRadius = '4px';
+    msgDiv.style.boxShadow = '0 2px 8px rgba(0,0,0,0.08)';
+    msgDiv.style.fontSize = '16px';
+
+    if (type === 'success') {
+        msgDiv.style.background = '#f6ffed';
+        msgDiv.style.color = '#52c41a';
+    } else if (type === 'error') {
+        msgDiv.style.background = '#fff2f0';
+        msgDiv.style.color = '#ff4d4f';
+    } else if (type === 'info') {
+        msgDiv.style.background = '#e6f4ff';
+        msgDiv.style.color = '#1677ff';
+    }
+
+    msgDiv.innerText = String(content);
+
+    messageContainer!.appendChild(msgDiv);
+
+    setTimeout(() => {
+        msgDiv.remove();
+        if (messageContainer && messageContainer.childElementCount === 0) {
+            messageContainer.remove();
+            messageContainer = null;
+        }
+    }, 2000);
+}
+
+export const message = {
+    success(content: ReactNode) {
+        showMessage(content, 'success');
+    },
+    error(content: ReactNode) {
+        showMessage(content, 'error');
+    },
+    info(content: ReactNode) {
+        showMessage(content, 'info');
+    }
+};

package/src/index.tsx

@@ -1,7 +1,5 @@
-import { Modal, Input, Button } from './compoments/index.js'
 import ReactDOM from 'react-dom/client'
-import { useEffect, useState } from'react'
-import Api from './resource.js'
+import VerifyModal from './verify-modal.js'
 
 export type ModalConfig = {
     data: {
@@ -14,87 +12,6 @@ export type ModalConfig = {
 
 let modalRoot: ReactDOM.Root | null = null
 
-const ModalDom = ({ config }: { config: ModalConfig }) => {
-    const [visible, setVisible] = useState(true);
-    const [countdown, setCountdown] = useState(60);
-    const [captchaImage, setCaptchaImage] = useState<string>('');
-    const [captchCode, setCaptchCode] = useState<string>('');
-    const [captchaKey, setCaptchaKey] = useState<string>('');
-    const { data } = config || {};
-    const { mobile } = data || {};
-
-
-    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(() => {
-        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]);
-
-    useEffect(() => {
-        console.log('mobile', mobile);
-    }, [])
-
-    const handleResend = async() => {
-        setCountdown(60);
-        const res = await Api.reSendCode({captchaKey, captcha: captchCode});
-        console.log('handleResend=>res', res);
-        // message.success('发送成功');
-    }
-  
-    return (
-      <Modal
-        visible={visible}
-        onClose={() => {
-          setVisible(false);
-          config.onClose?.();
-        }}
-      >
-        <div>已发送短信至您的手机：{mobile}</div>
-        {countdown > 0 ? null : <div style={{ marginTop: 8, display: 'flex', alignItems: 'center', width: 300 }}>
-            <Input onChange={(e) => {
-                setCaptchCode(e 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
-                onChange={(val) => {console.log('change', val)}}
-            />
-            <Button
-                disabled={countdown > 0 || !captchCode}
-                onClick={handleResend}
-            >
-                {countdown > 0 ? `${countdown}秒` : '重新发送'}
-            </Button>
-        </div>
-      </Modal>
-    );
-  };
-  // ... existing code ...
-
 export const createMessageVerifyModal = (config: ModalConfig) => {
   const container = document.createElement('div')
   container.id = 'antd-modal-container'
@@ -102,7 +19,7 @@ export const createMessageVerifyModal = (config: ModalConfig) => {
 
   modalRoot = ReactDOM.createRoot(container)
   modalRoot.render(
-    <ModalDom
+    <VerifyModal
       config={{
         ...config,
         onClose: () => {

package/src/resource.ts

@@ -1,5 +1,5 @@
 import { assign, axios as instance, customPost } from '@yqg/resource';
-// import { message } from 'antd';
+import { message } from './compoments/index.js';
 import { YQG_SUCCESS } from './utils/status.js';
 
 const urlPrefix = '/admin/';
@@ -16,7 +16,7 @@ instance.interceptors.response.use(
                 reader.readAsText(res.data, 'utf-8');
                 reader.onload = () => {
                     const parsedObj = JSON.parse(reader.result as string);
-                    // message.info(parsedObj?.status?.detail);
+                    message.info(parsedObj?.status?.detail);
                 };
 
                 return Promise.reject();
@@ -33,14 +33,14 @@ instance.interceptors.response.use(
             case YQG_SUCCESS:
                 return Promise.resolve(res);
             default: {
-                // message.error(detail);
+                message.error(detail);
                 return Promise.reject(res);
             }
         }
     },
     (err: {data: {status: {detail: string}}}) => {
         const detail = err?.data?.status?.detail || 'Unknown error';
-        // message.error(detail);
+        message.error(detail);
 
         return Promise.reject(err);
     },

package/src/verify-modal.tsx

@@ -0,0 +1,97 @@
+import { useEffect, useState } from 'react'
+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
+}
+const ModalDom = ({ config }: { config: 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 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(() => {
+        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]);
+
+    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('发送成功');
+    }
+  
+    return (
+      <Modal
+        visible={visible}
+        onClose={() => {
+          setVisible(false);
+          config.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
+                placeholder="请输入验证码"
+                onChange={(val) => {console.log('change', val)}}
+            />
+            <Button
+                disabled={countdown > 0 || !captchCode}
+                onClick={handleResend}
+            >
+                {countdown > 0 ? `${countdown}秒` : '重新发送'}
+            </Button>
+        </div>
+      </Modal>
+    );
+  };
+
+export default ModalDom;

package/src/app.tsx

@@ -1,107 +0,0 @@
-// 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> = () => {
-    // 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;
-    return <div>111</div>
-}
-
-export default App;