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

package/dist/index.d.ts

@@ -1,14 +1,5 @@
-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;
+    onClose?: () => void;
 };
-export { createMessageVerify };
-export default createMessageVerify;
+export declare const showModal: (config: ModalConfig) => void;

package/dist/index.js

@@ -1,21 +1,53 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import App from './app.js';
-import { createRoot } from 'react-dom/client';
-function createMessageVerify(props) {
-    // 创建一个挂载点
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// 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
+import ReactDOM from 'react-dom/client';
+let modalRoot = null;
+const Modal = ({ content, onClose }) => (_jsx("div", { className: "modal-overlay", children: _jsxs("div", { className: "modal-content", children: [content, _jsx("button", { onClick: onClose, children: "Close" })] }) }));
+export const showModal = (config) => {
+    // 创建容器
     const container = document.createElement('div');
+    container.id = 'global-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(Modal, { ...config, onClose: () => {
+            config.onClose?.();
+            destroyModal();
+        } }));
+};
+const destroyModal = () => {
+    if (modalRoot) {
+        modalRoot.unmount();
+        document.getElementById('global-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.30-beta.0",
   "type": "module",
   "main": "dist/index.js",
   "dependencies": {

package/src/index.tsx

@@ -1,34 +1,79 @@
-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
+import ReactDOM from 'react-dom/client'
+
+export type ModalConfig = {
+  content: React.ReactNode
+  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 Modal = ({ content, onClose }: ModalConfig) => (
+  <div className="modal-overlay">
+    <div className="modal-content">
+      {content}
+      <button onClick={onClose}>Close</button>
+    </div>
+  </div>
+)
+
+export const showModal = (config: ModalConfig) => {
+  // 创建容器
+  const container = document.createElement('div')
+  container.id = 'global-modal-container'
+  document.body.appendChild(container)
+
+  // 渲染弹窗
+  modalRoot = ReactDOM.createRoot(container)
+  modalRoot.render(
+    <Modal
+      {...config}
+      onClose={() => {
+        config.onClose?.()
+        destroyModal()
+      }}
+    />
+  )
 }
 
-export { createMessageVerify };
-export default createMessageVerify;
+const destroyModal = () => {
+  if (modalRoot) {
+    modalRoot.unmount()
+    document.getElementById('global-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>);