message-verify 0.0.18-beta.0 → 0.0.20-beta.0

package/dist/resource.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("@yqg/resource").default & Record<"urlPrefix" | "getCaptchaKey" | "reSendCode" | "getCaptchaImgUrl", import("@yqg/resource").CustomMethod>;
+export default _default;

package/dist/resource.js

@@ -0,0 +1,9 @@
+import { assign, customGet, customPost } from '@yqg/resource';
+const urlPrefix = '/admin/';
+const api = {
+    urlPrefix,
+    getCaptchaKey: customPost('captcha/key'),
+    reSendCode: customPost('sms/send'),
+    getCaptchaImgUrl: customGet('captcha/image/:captchaKey'),
+};
+export default assign(api);

package/dist/tsconfig.tsbuildinfo

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

package/dist/utils/getFingerprint.d.ts

@@ -0,0 +1 @@
+export declare const getEnvironmentFingerprint: () => Promise<string>;

package/dist/utils/getFingerprint.js

@@ -0,0 +1,13 @@
+import FingerprintJS from '@fingerprintjs/fingerprintjs';
+export const getEnvironmentFingerprint = async () => {
+    try {
+        const fp = await FingerprintJS.load();
+        const result = await fp.get();
+        console.log('环境指纹', result.visitorId);
+        return result.visitorId;
+    }
+    catch (error) {
+        console.error('Failed to get fingerprint:', error);
+        throw new Error('FINGERPRINT_GET_FAILED');
+    }
+};

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+import { getEnvironmentFingerprint } from './getFingerprint';
+export { getEnvironmentFingerprint };

package/dist/utils/index.js

@@ -0,0 +1,2 @@
+import { getEnvironmentFingerprint } from './getFingerprint';
+export { getEnvironmentFingerprint };

package/package.json

@@ -1,9 +1,11 @@
 {
   "name": "message-verify",
-  "version": "0.0.18-beta.0",
+  "version": "0.0.20-beta.0",
   "type": "module",
   "main": "dist/index.js",
   "dependencies": {
+    "@fingerprintjs/fingerprintjs": "^4.6.2",
+    "@yqg/resource": "^1.3.8",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
@@ -16,6 +18,7 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^16.0.0",
+    "rollup-plugin-visualizer": "^5.14.0",
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.26.1",
     "vite": "^6.3.1"
@@ -23,6 +26,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -b",
+    "analyze": "vite build",
     "lint": "eslint .",
     "preview": "vite preview"
   }

package/src/index.tsx

@@ -1,6 +1,17 @@
 import { useEffect, useState } from 'react'
 import Modal from './components/modal'
 import Input from './components/input'
+import Api from './resource'
+import { getEnvironmentFingerprint } from './utils'
+// import Button from './components/button'
+
+// const buttonStyle: React.CSSProperties = {
+//     padding: '8px 16px',
+//     border: 'none',
+//     borderRadius: 4,
+//     fontSize: 14,
+//     cursor: 'pointer',
+// };
 
 interface Props {
     data: {
@@ -8,15 +19,26 @@ interface Props {
         verifyCodeKey: string;
         sendSuccess: boolean;
     };
+    refresh: () => void;
 }
 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);
+    }
 
     useEffect(() => {
         setVisible(true);
     }, [])
+
     useEffect(() => {
         let timer: number | null = null;
         if (visible && countdown > 0) {
@@ -24,33 +46,43 @@ const App: React.FC<Props> = ({ data }) => {
                 setCountdown((prev) => prev - 1);
             }, 1000);
         }
+        if (countdown === 0) {
+            getKey();
+        }
         return () => {
             if (timer) clearInterval(timer);
         };
     }, [visible, countdown]);
 
-    const handleResend = () => {
-        setCountdown(60);
-        // 这里可以加上重新发送验证码的逻辑
-    };
+    // const handleResend = async() => {
+    //     setCountdown(60);
+    //     await Api.greSendCode({ });
+    //     // 这里可以加上重新发送验证码的逻辑
+    // };
 
     return (
         <>
-            <Modal visible={visible} onClose={() => setVisible(false)}>
+            <Modal visible={visible} onClose={() => setVisible(false)} 
+                // onOk={() => refresh()}
+            >
                 <div>已发送短信至您的手机：{mobile}</div>
-                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                {countdown > 0 ? null : <div style={{ marginTop: 8 }}>
+                    <Input />
+                    <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 placeholder="请输入验证码" />
-                    <button
+                    {/* <Button
                         disabled={countdown > 0}
                         onClick={handleResend}
                         style={countdown > 0 ? { marginLeft: 8 } : { marginLeft: 8, backgroundColor: '#1677ff', color: '#fff' }}
-                    >
-                        {countdown > 0 ? `${countdown}秒` : '重新发送'}
-                    </button>
+                        btnText={countdown > 0 ? `${countdown}秒` : '重新发送'}
+                    /> */}
                 </div>
             </Modal>
         </>
     )
 }
 
-export default App
+export default App; 
+export { getEnvironmentFingerprint };

package/src/main.tsx

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

package/src/resource.ts

@@ -0,0 +1,12 @@
+import { assign, customGet, customPost } from '@yqg/resource';
+const urlPrefix = '/admin/';
+
+const api = {
+    urlPrefix,
+
+    getCaptchaKey: customPost('captcha/key'),
+    reSendCode: customPost('sms/send'),
+    getCaptchaImgUrl: customGet('captcha/image/:captchaKey'),
+};
+
+export default assign(api);

package/src/utils/getFingerprint.ts

@@ -0,0 +1,12 @@
+import FingerprintJS from '@fingerprintjs/fingerprintjs';
+export const getEnvironmentFingerprint = async(): Promise<string> =>{
+    try {
+      const fp = await FingerprintJS.load();
+      const result = await fp.get();
+      console.log('环境指纹', result.visitorId);
+      return result.visitorId;
+    } catch (error) {
+      console.error('Failed to get fingerprint:', error);
+      throw new Error('FINGERPRINT_GET_FAILED');
+    }
+  };

package/src/utils/index.ts

@@ -0,0 +1,2 @@
+import { getEnvironmentFingerprint } from './getFingerprint';
+export { getEnvironmentFingerprint };