message-verify 0.0.5-beta.0 → 0.0.8-beta.0

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "message-verify",
-  "version": "0.0.5-beta.0",
+  "version": "0.0.8-beta.0",
   "type": "module",
-  "main": "src/index.ts",
+  "main": "src/main.tsx",
   "dependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

package/src/App.tsx

@@ -1,25 +1,57 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import './App.css'
+import Modal from './components/modal'
+import Input from './components/input'
 
-function App() {
-  const [count, setCount] = useState(0);
+interface Props {
+    data: {
+        mobile: string;
+        verifyCodeKey: string;
+        sendSuccess: boolean;
+    };
+}
+const App: React.FC<Props> = ({ data }) => {
+    const { mobile } = data || {};
+    const [countdown, setCountdown] = useState(60);
+    const [visible, setVisible] = useState(false);
+
+    useEffect(() => {
+        setVisible(true);
+    }, [])
+    useEffect(() => {
+        let timer: number | null = null;
+        if (visible && countdown > 0) {
+            timer = setInterval(() => {
+                setCountdown((prev) => prev - 1);
+            }, 1000);
+        }
+        return () => {
+            if (timer) clearInterval(timer);
+        };
+    }, [visible, countdown]);
+
+    const handleResend = () => {
+        setCountdown(60);
+        // 这里可以加上重新发送验证码的逻辑
+    };
 
-  return (
-    <>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
-  )
+    return (
+        <>
+            <Modal visible={visible} onClose={() => setVisible(false)}>
+                <div>已发送短信至您的手机：{mobile}</div>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                    <Input placeholder="请输入验证码" />
+                    <button
+                        disabled={countdown > 0}
+                        onClick={handleResend}
+                        style={countdown > 0 ? { marginLeft: 8 } : { marginLeft: 8, backgroundColor: '#1677ff', color: '#fff' }}
+                    >
+                        {countdown > 0 ? `${countdown}秒` : '重新发送'}
+                    </button>
+                </div>
+            </Modal>
+        </>
+    )
 }
 
 export default App

package/src/components/input.tsx

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,60 @@
+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;

package/src/index.ts

@@ -1,3 +1,3 @@
 import App from './App'
 
-export default { App };
+export default { messageVerifyModal: App };

package/src/main.tsx

@@ -3,8 +3,18 @@ import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.tsx'
 
+const data = {
+  mobile: '185****7760',
+  verifyCodeKey: 'e381c5f9-c7f4-4bf1-a948-744334fb0203',
+  sendSuccess: true
+};
+
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <App data={data} />
   </StrictMode>,
-)
+)
+
+export default {
+  messageVerifyModal: App
+}