message-verify 0.0.29-beta.0 → 0.0.31-beta.0

package/dist/index.d.ts

@@ -1,14 +1,7 @@
-interface Props {
-    data: {
-        mobile: string;
-        verifyCodeKey: string;
-        sendSuccess: boolean;
-    };
-    refresh: () => void;
-    isShow: boolean;
-}
-declare function createMessageVerify(props: Props): {
-    destroy: () => void;
+export type ModalConfig = {
+    content: React.ReactNode;
+    title?: string;
+    width?: number;
+    onClose?: () => void;
 };
-export { createMessageVerify };
-export default createMessageVerify;
+export declare const showModal: (config: ModalConfig) => void;

package/dist/index.js

@@ -1,21 +1,56 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import App from './app.js';
-import { createRoot } from 'react-dom/client';
-function createMessageVerify(props) {
-    // 创建一个挂载点
+// import App from './app.js';
+// import { createRoot } from 'react-dom/client';
+// interface Props {
+//     data: {
+//         mobile: string;
+//         verifyCodeKey: string;
+//         sendSuccess: boolean;
+//     };
+//     refresh: () => void;
+//     isShow: boolean;
+// }
+// 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);
+//         }
+//     };
+// }
+// export { createMessageVerify };
+// export default createMessageVerify;
+// src/modal.tsx
+// src/modal.tsx
+import { Modal } from 'antd';
+import ReactDOM from 'react-dom/client';
+let modalRoot = null;
+const AntdModal = ({ config }) => (_jsx(Modal, { open: true, title: config.title || '提示', width: config.width || 600, onCancel: config.onClose, footer: null, children: config.content }));
+export const showModal = (config) => {
     const container = document.createElement('div');
+    container.id = 'antd-modal-container';
     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);
-        }
-    };
-}
-export { createMessageVerify };
-export default createMessageVerify;
+    modalRoot = ReactDOM.createRoot(container);
+    modalRoot.render(_jsx(AntdModal, { config: {
+            ...config,
+            onClose: () => {
+                config.onClose?.();
+                destroyModal();
+            }
+        } }));
+};
+const destroyModal = () => {
+    if (modalRoot) {
+        modalRoot.unmount();
+        document.getElementById('antd-modal-container')?.remove();
+        modalRoot = null;
+    }
+};

package/dist/main.js

@@ -1,8 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createRoot } from 'react-dom/client';
-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('刷新'); }, isShow: true }));
+import { showModal } from './index.js'; // 或 './index'
+createRoot(document.getElementById('root')).render(_jsx("button", { onClick: () => showModal({ content: 'React Content' }), children: "Show Modal" }));

package/package.json

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

package/src/index.tsx

@@ -1,34 +1,86 @@
-import App from './app.js';
-import { createRoot } from 'react-dom/client';
-
-interface Props {
-    data: {
-        mobile: string;
-        verifyCodeKey: string;
-        sendSuccess: boolean;
-    };
-    refresh: () => void;
-    isShow: boolean;
+// import App from './app.js';
+// import { createRoot } from 'react-dom/client';
+
+// interface Props {
+//     data: {
+//         mobile: string;
+//         verifyCodeKey: string;
+//         sendSuccess: boolean;
+//     };
+//     refresh: () => void;
+//     isShow: boolean;
+// }
+
+// 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);
+//         }
+//     };
+// }
+
+// export { createMessageVerify };
+// export default createMessageVerify;
+// src/modal.tsx
+// src/modal.tsx
+import { Modal } from 'antd'
+import ReactDOM from 'react-dom/client'
+
+export type ModalConfig = {
+  content: React.ReactNode
+  title?: string
+  width?: number
+  onClose?: () => void
 }
 
-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);
+let modalRoot: ReactDOM.Root | null = null
+
+const AntdModal = ({ config }: { config: ModalConfig }) => (
+  <Modal
+    open={true}
+    title={config.title || '提示'}
+    width={config.width || 600}
+    onCancel={config.onClose}
+    footer={null}
+  >
+    {config.content}
+  </Modal>
+)
+
+export const showModal = (config: ModalConfig) => {
+  const container = document.createElement('div')
+  container.id = 'antd-modal-container'
+  document.body.appendChild(container)
+
+  modalRoot = ReactDOM.createRoot(container)
+  modalRoot.render(
+    <AntdModal
+      config={{
+        ...config,
+        onClose: () => {
+          config.onClose?.()
+          destroyModal()
         }
-    };
+      }}
+    />
+  )
 }
 
-export { createMessageVerify };
-export default createMessageVerify;
+const destroyModal = () => {
+  if (modalRoot) {
+    modalRoot.unmount()
+    document.getElementById('antd-modal-container')?.remove()
+    modalRoot = null
+  }
+}

package/src/main.tsx

@@ -1,13 +1,7 @@
 import { createRoot } from 'react-dom/client';
-import App from './app.js'; // 或 './index'
+import { showModal } from './index.js'; // 或 './index'
 
 createRoot(document.getElementById('root')!).render(
-    <App
-        data={{
-            mobile: '185****7760',
-            verifyCodeKey: 'e381c5f9-c7f4-4bf1-a948-744334fb0203',
-            sendSuccess: true
-        }}
-        refresh={() => {console.log('刷新')}}
-        isShow={true}
-    />);
+    <button onClick={() => showModal({ content: 'React Content' })}>
+      Show Modal
+    </button>);