message-verify 1.0.1-beta.7 → 1.0.1-beta.71

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/.arcconfig CHANGED
@@ -1,4 +1,5 @@
1
1
  {
2
+ "project.name": "message-verify",
2
3
  "phabricator.uri": "https://code.yangqianguan.com/",
3
4
  "lint.engine": "YqgWebDiffLintEngine"
4
5
  }
package/dist/index.d.ts CHANGED
@@ -1,3 +1,8 @@
1
- import { ModalConfig } from './utils/type.js';
1
+ import { VerifyModalConfig, LoginModalConfig } from './utils/type.js';
2
2
  export declare const initFingerprint: () => Promise<string>;
3
- export declare const createMessageVerifyModal: (modalProps: ModalConfig) => void;
3
+ export declare const createReLoginModal: (modalProps: LoginModalConfig) => void;
4
+ export declare const VerifyHandler: {
5
+ _currentUrl: string;
6
+ createModal: ({ data, config, http, verifyPromise, sendApi }: VerifyModalConfig) => Promise<any>;
7
+ getResponse: (response: any) => any;
8
+ };
package/dist/index.js CHANGED
@@ -1,46 +1,86 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import ReactDOM from 'react-dom/client';
3
- import VerifyModal from './verify-modal.js';
3
+ import VerifyModal from './modal/verify-modal.js';
4
4
  import Fingerprint2 from 'fingerprintjs2';
5
- let cachedFingerprint = null;
5
+ import ReLoginModal from './modal/relogin-modal.js';
6
+ import eventEmitter from './utils/eventEmitter';
7
+ let fingerprintPromise = null; // 用 Promise 本身作为缓存
8
+ let modalRoot = null;
6
9
  export const initFingerprint = async () => {
7
- if (cachedFingerprint) {
8
- // 已有缓存,直接返回 Promise
9
- return Promise.resolve(cachedFingerprint);
10
- }
11
- // 首次异步获取并缓存
12
- return new Promise((resolve) => {
13
- Fingerprint2.get(function (components) {
14
- console.log('components', components);
15
- const includeKeys = ['userAgent', 'deviceMemory', 'cpuClass', 'hardwareConcurrency', 'platform'];
16
- const values = components
17
- .filter(component => includeKeys.includes(component.key))
18
- .map(component => component.value)
19
- .join('###');
20
- const fingerprint = Fingerprint2.x64hash128(values, 31);
21
- cachedFingerprint = fingerprint;
22
- resolve(fingerprint);
10
+ console.log('fingerprintPromise:', fingerprintPromise);
11
+ if (!fingerprintPromise) {
12
+ fingerprintPromise = new Promise((resolve) => {
13
+ Fingerprint2.get(components => {
14
+ const includeKeys = ['userAgent', 'cpuClass', 'hardwareConcurrency', 'platform'];
15
+ console.log('components:', components);
16
+ const values = components
17
+ .filter(c => includeKeys.includes(c.key))
18
+ .map(c => c.value)
19
+ .join('###');
20
+ console.log('values:', values);
21
+ const fingerprint = Fingerprint2.x64hash128(values, 31);
22
+ console.log('fingerprint:', fingerprint);
23
+ resolve(fingerprint);
24
+ });
23
25
  });
24
- });
26
+ }
27
+ return fingerprintPromise;
25
28
  };
26
- let modalRoot = null;
27
- export const createMessageVerifyModal = (modalProps) => {
29
+ const destroyModal = (modalId) => {
30
+ if (modalRoot) {
31
+ modalRoot.unmount();
32
+ document.getElementById(modalId)?.remove();
33
+ modalRoot = null;
34
+ }
35
+ };
36
+ const creatModal = (modalProps, modalId, ModalDom) => {
37
+ destroyModal(modalId);
28
38
  const container = document.createElement('div');
29
- container.id = 'antd-modal-container';
39
+ container.id = modalId;
30
40
  document.body.appendChild(container);
31
41
  modalRoot = ReactDOM.createRoot(container);
32
- modalRoot.render(_jsx(VerifyModal, { props: {
42
+ modalRoot.render(_jsx(ModalDom, { props: {
33
43
  ...modalProps,
34
44
  onClose: () => {
35
- modalProps.onClose?.();
36
- destroyModal();
45
+ destroyModal(modalId);
37
46
  }
38
47
  } }));
39
48
  };
40
- const destroyModal = () => {
41
- if (modalRoot) {
42
- modalRoot.unmount();
43
- document.getElementById('antd-modal-container')?.remove();
44
- modalRoot = null;
49
+ const createMessageVerifyModal = (modalProps) => {
50
+ const verifyModalId = 'verify-modal-container';
51
+ creatModal(modalProps, verifyModalId, VerifyModal);
52
+ };
53
+ // 新增 relogin 弹窗创建方法
54
+ export const createReLoginModal = (modalProps) => {
55
+ const reLoginModalId = 'relogin-modal-container';
56
+ creatModal(modalProps, reLoginModalId, ReLoginModal);
57
+ };
58
+ export const VerifyHandler = {
59
+ _currentUrl: '',
60
+ createModal: ({ data, config, http, verifyPromise, sendApi }) => {
61
+ VerifyHandler._currentUrl = config?.url || '';
62
+ const toEmpty = () => {
63
+ verifyPromise.current = null;
64
+ };
65
+ if (!verifyPromise.current) {
66
+ verifyPromise.current = new Promise((resolve, reject) => {
67
+ createMessageVerifyModal({
68
+ data,
69
+ config,
70
+ http,
71
+ apiResolve: resolve,
72
+ apiReject: reject,
73
+ apiPromiseToEmpty: toEmpty,
74
+ sendApi
75
+ });
76
+ }).finally(toEmpty);
77
+ }
78
+ return verifyPromise.current;
79
+ },
80
+ getResponse: (response) => {
81
+ if (VerifyHandler._currentUrl === response?.config?.url) {
82
+ eventEmitter.emit('response', response?.data?.status?.code ?? -1);
83
+ }
84
+ return response;
45
85
  }
46
86
  };
@@ -7,5 +7,10 @@ declare const _default: {
7
7
  sendFailed: string;
8
8
  reSend: string;
9
9
  countDownSecound: string;
10
+ accountAlert: string;
11
+ alertContent: string;
12
+ ok: string;
13
+ chidoriOpenPro: string;
14
+ verifyFail: string;
10
15
  };
11
16
  export default _default;
@@ -6,5 +6,10 @@ export default {
6
6
  sendSuccess: 'Successfully sent',
7
7
  sendFailed: 'Send failed',
8
8
  reSend: 'Resend',
9
- countDownSecound: '{countdown} seconds'
9
+ countDownSecound: '{countdown} seconds',
10
+ accountAlert: 'Account Security Alert',
11
+ alertContent: 'Changes have been detected in your login environment or network information.To ensure account security, please log in again to verify your identity.',
12
+ ok: 'OK',
13
+ chidoriOpenPro: 'Chidori has activated security protection for you',
14
+ verifyFail: 'Validation failed'
10
15
  };
@@ -7,5 +7,10 @@ declare const _default: {
7
7
  sendFailed: string;
8
8
  reSend: string;
9
9
  countDownSecound: string;
10
+ accountAlert: string;
11
+ alertContent: string;
12
+ ok: string;
13
+ chidoriOpenPro: string;
14
+ verifyFail: string;
10
15
  };
11
16
  export default _default;
@@ -6,5 +6,10 @@ export default {
6
6
  sendSuccess: 'Berhasil dikirim',
7
7
  sendFailed: 'Gagal mengirim',
8
8
  reSend: 'Kirim Ulang',
9
- countDownSecound: '{countdown} detik'
9
+ countDownSecound: '{countdown} detik',
10
+ accountAlert: 'Peringatan Keamanan Akun',
11
+ alertContent: 'Terdeteksi perubahan pada lingkungan login atau informasi jaringan Anda.Untuk menjaga keamanan akun, silakan login kembali untuk memverifikasi identitas Anda.',
12
+ ok: 'Baiklah',
13
+ chidoriOpenPro: 'chidori telah mengaktifkan keamanan untuk Anda',
14
+ verifyFail: 'Autentikasi gagal'
10
15
  };
@@ -7,5 +7,10 @@ declare const _default: {
7
7
  sendFailed: string;
8
8
  reSend: string;
9
9
  countDownSecound: string;
10
+ accountAlert: string;
11
+ alertContent: string;
12
+ ok: string;
13
+ chidoriOpenPro: string;
14
+ verifyFail: string;
10
15
  };
11
16
  export default _default;
@@ -6,5 +6,10 @@ export default {
6
6
  sendSuccess: '发送成功',
7
7
  sendFailed: '发送失败',
8
8
  reSend: '重新发送',
9
- countDownSecound: '{countdown}秒'
9
+ countDownSecound: '{countdown}秒',
10
+ accountAlert: '账号安全提醒',
11
+ alertContent: '检测到您的登录环境或网络信息有变动,为保障账户安全,请重新登录验证身份',
12
+ ok: '好的',
13
+ chidoriOpenPro: 'chidori已为您开启安全防护',
14
+ verifyFail: '验证失败'
10
15
  };
package/dist/main.js CHANGED
@@ -1,22 +1,17 @@
1
- import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
1
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { createRoot } from 'react-dom/client';
3
- import { createMessageVerifyModal, initFingerprint } from './index.js'; // 或 './index'
3
+ import { initFingerprint, createReLoginModal, VerifyHandler } from './index.js'; // 或 './index'
4
4
  import { axios } from '@yqg/resource';
5
5
  const data = "{\"mobile\":\"188****4035\",\"verifyCodeKey\":\"3f025b33-988e-47c0-950d-6beb776d043f\",\"needValid\":true,\"step\":2,\"message\":\"需要填写验证码\"}";
6
6
  const fp = await initFingerprint();
7
- console.log(fp);
7
+ const fp2 = await initFingerprint();
8
+ console.log(fp, fp2);
8
9
  const config = {
9
10
  "transitional": {
10
11
  "silentJSONParsing": true,
11
12
  "forcedJSONParsing": true,
12
13
  "clarifyTimeoutError": false
13
14
  },
14
- "transformRequest": [
15
- null
16
- ],
17
- "transformResponse": [
18
- null
19
- ],
20
15
  "timeout": 0,
21
16
  "xsrfCookieName": "XSRF-TOKEN",
22
17
  "xsrfHeaderName": "X-XSRF-TOKEN",
@@ -24,10 +19,8 @@ const config = {
24
19
  "maxBodyLength": -1,
25
20
  "headers": {
26
21
  "Accept": "application/json, text/plain, */*",
27
- "X-Device-Fingerprint": "185fcce88c629725321adf29daa5e444",
28
- "Content-Type": "application/json",
29
- "sms-code": "121212",
30
- "sms-code-key": "212190c7-2f5e-4cc1-82ec-a242c2ab5425"
22
+ "X-Device-Fingerprint": "531f14c7176b16ebeb18e2b23d6bd124",
23
+ "Content-Type": "application/json"
31
24
  },
32
25
  "url": "/classification/admin/level/edit",
33
26
  "method": "post",
@@ -43,12 +36,12 @@ const config = {
43
36
  "data": "{\"id\":1,\"classificationName\":\"个人基本概况信息\",\"classificationLevel\":2}",
44
37
  "baseURL": "http://localhost:62888"
45
38
  };
46
- createRoot(document.getElementById('root')).render(_jsx(_Fragment, { children: _jsx("button", { onClick: () => createMessageVerifyModal({
47
- data,
48
- config,
49
- response: {
50
- config
51
- },
52
- lang: 'en',
53
- http: axios,
54
- }), children: "Show verify Modal" }) }));
39
+ const promise = { current: null };
40
+ createRoot(document.getElementById('root')).render(_jsxs(_Fragment, { children: [_jsx("button", { onClick: () => {
41
+ return VerifyHandler.createModal({ data, config, http: axios, verifyPromise: promise });
42
+ }, children: "Show verify Modal" }), _jsx("button", { onClick: () => createReLoginModal({
43
+ goLogin: () => {
44
+ console.log('goLogin');
45
+ },
46
+ lang: 'zh',
47
+ }), children: "Show login Modal" })] }));
@@ -0,0 +1,5 @@
1
+ import { LoginModalConfig } from '../utils/type.js';
2
+ declare const ReLoginModal: ({ props }: {
3
+ props: LoginModalConfig;
4
+ }) => import("react/jsx-runtime.js").JSX.Element;
5
+ export default ReLoginModal;
@@ -0,0 +1,24 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { useState } from 'react';
3
+ import { Modal, Button } from '../compoments/index.js';
4
+ import t from '../utils/i18n.js';
5
+ const ReLoginModal = ({ props }) => {
6
+ const { goLogin, lang, onClose: destroyModal } = props || {};
7
+ const [visible, setVisible] = useState(true);
8
+ const onClose = () => {
9
+ setVisible(false);
10
+ goLogin();
11
+ destroyModal?.();
12
+ };
13
+ return (_jsxs(Modal, { visible: visible, onClose: onClose, width: 420, children: [_jsx("div", { style: { fontWeight: 500, fontSize: 20, marginBottom: 24 }, children: t('accountAlert', lang) }), _jsx("div", { style: { color: '#222', fontSize: 16, marginBottom: 40, lineHeight: '24px' }, children: t('alertContent', lang) }), _jsx("div", { style: { display: 'flex', justifyContent: 'center' }, children: _jsx(Button, { style: {
14
+ background: '#1677ff',
15
+ color: '#fff',
16
+ border: 'none',
17
+ width: 80,
18
+ height: 36,
19
+ fontSize: 14,
20
+ borderRadius: 8,
21
+ boxShadow: '0 2px 8px rgba(22,119,255,0.08)',
22
+ }, onClick: onClose, children: t('ok', lang) }) })] }));
23
+ };
24
+ export default ReLoginModal;
@@ -0,0 +1,5 @@
1
+ import { VerifyModalConfig } from '../utils/type.js';
2
+ declare const CreateMessageVerifyModal: ({ props }: {
3
+ props: VerifyModalConfig;
4
+ }) => import("react/jsx-runtime.js").JSX.Element;
5
+ export default CreateMessageVerifyModal;
@@ -0,0 +1,129 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { useRef, useEffect, useState } from 'react';
3
+ import { Modal, Input, Button, message } from '../compoments/index.js';
4
+ import Api from '../utils/resource.js';
5
+ import t from '../utils/i18n.js';
6
+ import { axios } from '@yqg/resource';
7
+ import eventEmitter from '../utils/eventEmitter';
8
+ const CreateMessageVerifyModal = ({ props }) => {
9
+ const [visible, setVisible] = useState(true);
10
+ const [countdown, setCountdown] = useState(60);
11
+ const [otp, setOtp] = useState('');
12
+ const [captchaImage, setCaptchaImage] = useState('');
13
+ const [captchCode, setCaptchCode] = useState('');
14
+ const [captchaKey, setCaptchaKey] = useState('');
15
+ const { data, http, lang, sendApi = '/admin/sms/send', config, apiResolve, apiPromiseToEmpty, onClose } = props || {};
16
+ const dataObj = JSON.parse(data || '{}');
17
+ const { mobile, verifyCodeKey } = dataObj || {};
18
+ const resolveRef = useRef(null);
19
+ const rejectRef = useRef(null);
20
+ const getKey = async () => {
21
+ try {
22
+ const res = await Api.getCaptchaKey();
23
+ const { body: key } = res.data || {};
24
+ setCaptchaKey(key);
25
+ if (key) {
26
+ const image = Api.getCaptchaImgUrl(key);
27
+ setCaptchaImage(image);
28
+ }
29
+ }
30
+ catch (err) {
31
+ const msg = typeof err === 'object' && err !== null && 'message' in err
32
+ ? err.message
33
+ : String(err);
34
+ message.error(msg);
35
+ }
36
+ };
37
+ useEffect(() => {
38
+ let timer = null;
39
+ if (visible && countdown > 0) {
40
+ timer = setInterval(() => {
41
+ setCountdown((prev) => prev - 1);
42
+ }, 1000);
43
+ }
44
+ if (countdown === 0) {
45
+ getKey();
46
+ }
47
+ return () => {
48
+ if (timer)
49
+ clearInterval(timer);
50
+ };
51
+ }, [visible, countdown]);
52
+ useEffect(() => {
53
+ const handler = (data) => {
54
+ // 这里处理收到的数据
55
+ console.log('收到 response 事件:', data);
56
+ if (data === 0) {
57
+ resolveRef.current({
58
+ code: data,
59
+ });
60
+ }
61
+ else {
62
+ rejectRef.current({
63
+ code: data,
64
+ });
65
+ }
66
+ };
67
+ eventEmitter.on('response', handler);
68
+ return () => {
69
+ eventEmitter.off('response', handler);
70
+ };
71
+ }, []);
72
+ const handleResend = async () => {
73
+ const formData = new FormData();
74
+ formData.append('captchaKey', captchaKey);
75
+ formData.append('captcha', captchCode);
76
+ // 重新发送验证码
77
+ const res = await axios.post(sendApi, formData);
78
+ const { code, detail } = res.data?.status || {};
79
+ if (code !== 0) {
80
+ message.error(detail || t('sendFailed', lang));
81
+ return;
82
+ }
83
+ message.success(t('sendSuccess', lang));
84
+ // 重置倒计时、验证码
85
+ setCountdown(60);
86
+ setOtp('');
87
+ };
88
+ return (_jsxs(Modal, { width: 420, visible: visible, onClose: () => {
89
+ setVisible(false);
90
+ apiPromiseToEmpty?.();
91
+ onClose?.();
92
+ }, children: [_jsx("div", { style: { fontSize: 14, color: '#666' }, children: t('alreadySend', lang, { phone: mobile }) }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8, marginTop: 12 }, children: [_jsx(Input.OTP, { length: 6, value: otp, onChange: async (val) => {
93
+ setOtp(val);
94
+ if (val.length === 6) {
95
+ try {
96
+ const res = await new Promise((resolve, reject) => {
97
+ resolveRef.current = resolve;
98
+ rejectRef.current = reject;
99
+ http({
100
+ ...config,
101
+ headers: {
102
+ ...http.defaults.headers.common,
103
+ 'sms-code': val,
104
+ 'sms-code-key': verifyCodeKey,
105
+ 'Content-Type': config.headers['Content-Type'],
106
+ }
107
+ });
108
+ });
109
+ if (res?.code === 0 || res?.data?.status?.code === 0) {
110
+ apiResolve(res);
111
+ setVisible(false);
112
+ }
113
+ else {
114
+ message.error(t('verifyFail', lang));
115
+ setOtp('');
116
+ }
117
+ }
118
+ catch (error) {
119
+ console.warn('catch=>error', error);
120
+ message.error(t('verifyFail', lang));
121
+ setOtp('');
122
+ }
123
+ }
124
+ } }), _jsx(Button, { disabled: countdown > 0 || !captchCode, onClick: handleResend, style: { padding: '8px' }, children: countdown > 0 ? t('countDownSecound', lang, { countdown }) : t('reSend', lang) })] }), countdown > 0 ? null :
125
+ _jsxs("div", { style: { marginTop: 12, display: 'flex', alignItems: 'center' }, children: [_jsx(Input, { placeholder: t('pleaseEnterPicVerifyCode', lang), onChange: (e) => {
126
+ setCaptchCode(e);
127
+ }, style: { width: 300 } }), captchaImage && _jsx("img", { src: captchaImage, alt: t('verifyCode', lang), style: { width: 100, height: 30, marginLeft: 8 }, onClick: getKey })] }), (countdown > 0 || captchCode) ? null : _jsx("div", { style: { fontSize: 14, color: 'red' }, children: t('pleaseEnterAndSend', lang) }), _jsx("div", { style: { fontSize: 14, color: '#666', marginTop: 12 }, children: t('chidoriOpenPro', lang) })] }));
128
+ };
129
+ export default CreateMessageVerifyModal;
@@ -1,5 +1,5 @@
1
- import { ModalConfig } from './utils/type.js';
1
+ import { LoginModalConfig } from './utils/type.js';
2
2
  declare const ReLoginModal: ({ props }: {
3
- props: ModalConfig;
3
+ props: LoginModalConfig;
4
4
  }) => import("react/jsx-runtime.js").JSX.Element;
5
5
  export default ReLoginModal;
@@ -1,22 +1,23 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { useState } from 'react';
3
3
  import { Modal, Button } from './compoments/index.js';
4
+ import t from './utils/i18n.js';
4
5
  const ReLoginModal = ({ props }) => {
5
- console.log('props', props);
6
+ const { goLogin, lang } = props || {};
6
7
  const [visible, setVisible] = useState(true);
7
8
  const onClose = () => {
8
9
  setVisible(false);
10
+ goLogin();
9
11
  };
10
- return (_jsxs(Modal, { visible: visible, onClose: onClose, width: 420, children: [_jsx("div", { style: { fontWeight: 500, fontSize: 20, marginBottom: 24 }, children: "\u8D26\u53F7\u5B89\u5168\u63D0\u9192" }), _jsx("div", { style: { color: '#222', fontSize: 16, marginBottom: 40, lineHeight: '24px' }, children: "\u68C0\u6D4B\u5230\u60A8\u7684\u767B\u5F55\u73AF\u5883\u6216\u7F51\u7EDC\u4FE1\u606F\u6709\u53D8\u52A8\uFF0C\u4E3A\u4FDD\u969C\u8D26\u6237\u5B89\u5168\uFF0C\u8BF7\u91CD\u65B0\u767B\u5F55\u9A8C\u8BC1\u8EAB\u4EFD" }), _jsx("div", { style: { display: 'flex', justifyContent: 'center' }, children: _jsx(Button, { style: {
12
+ return (_jsxs(Modal, { visible: visible, onClose: onClose, width: 420, children: [_jsx("div", { style: { fontWeight: 500, fontSize: 20, marginBottom: 24 }, children: t('accountAlert', lang) }), _jsx("div", { style: { color: '#222', fontSize: 16, marginBottom: 40, lineHeight: '24px' }, children: t('alertContent', lang) }), _jsx("div", { style: { display: 'flex', justifyContent: 'center' }, children: _jsx(Button, { style: {
11
13
  background: '#1677ff',
12
14
  color: '#fff',
13
15
  border: 'none',
14
- width: 160,
15
- height: 44,
16
- fontSize: 18,
17
- fontWeight: 500,
16
+ width: 80,
17
+ height: 36,
18
+ fontSize: 14,
18
19
  borderRadius: 8,
19
20
  boxShadow: '0 2px 8px rgba(22,119,255,0.08)',
20
- }, onClick: onClose, children: "\u597D\u7684" }) })] }));
21
+ }, onClick: onClose, children: t('ok', lang) }) })] }));
21
22
  };
22
23
  export default ReLoginModal;
@@ -1 +1 @@
1
- {"root":["../src/index.tsx","../src/main.tsx","../src/relogin-modal.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/locales/en.ts","../src/locales/id.ts","../src/locales/zh.ts","../src/utils/i18n.ts","../src/utils/status.ts","../src/utils/type.ts"],"version":"5.7.3"}
1
+ {"root":["../src/index.tsx","../src/main.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/locales/en.ts","../src/locales/id.ts","../src/locales/zh.ts","../src/modal/relogin-modal.tsx","../src/modal/verify-modal.tsx","../src/utils/eventemitter.ts","../src/utils/i18n.ts","../src/utils/resource.ts","../src/utils/status.ts","../src/utils/type.ts"],"version":"5.7.3"}
@@ -0,0 +1,10 @@
1
+ type Listener = (...args: any[]) => void;
2
+ declare class EventEmitter {
3
+ private events;
4
+ on(event: string, listener: Listener): void;
5
+ off(event: string, listener: Listener): void;
6
+ emit(event: string, ...args: any[]): void;
7
+ once(event: string, listener: Listener): void;
8
+ }
9
+ declare const eventEmitter: EventEmitter;
10
+ export default eventEmitter;
@@ -0,0 +1,28 @@
1
+ class EventEmitter {
2
+ events = {};
3
+ on(event, listener) {
4
+ if (!this.events[event]) {
5
+ this.events[event] = [];
6
+ }
7
+ this.events[event].push(listener);
8
+ }
9
+ off(event, listener) {
10
+ if (!this.events[event])
11
+ return;
12
+ this.events[event] = this.events[event].filter(l => l !== listener);
13
+ }
14
+ emit(event, ...args) {
15
+ if (!this.events[event])
16
+ return;
17
+ this.events[event].forEach(listener => listener(...args));
18
+ }
19
+ once(event, listener) {
20
+ const onceListener = (...args) => {
21
+ listener(...args);
22
+ this.off(event, onceListener);
23
+ };
24
+ this.on(event, onceListener);
25
+ }
26
+ }
27
+ const eventEmitter = new EventEmitter();
28
+ export default eventEmitter;
@@ -0,0 +1,2 @@
1
+ declare const _default: import("@yqg/resource").default & Record<"getCaptchaKey" | "reSendCode" | "getCaptchaImgUrl", import("@yqg/resource").CustomMethod>;
2
+ export default _default;
@@ -0,0 +1,7 @@
1
+ import { assign, customPost } from '@yqg/resource';
2
+ const api = {
3
+ getCaptchaKey: customPost('/messageVerify/admin/captcha/key'),
4
+ reSendCode: customPost('/admin/sms/send'),
5
+ getCaptchaImgUrl: (captchaKey) => { return `/messageVerify/admin/captcha/image/${captchaKey}`; },
6
+ };
7
+ export default assign(api);
@@ -1,4 +1,4 @@
1
- export type ModalConfig = {
1
+ export type VerifyModalConfig = {
2
2
  data: string;
3
3
  onClose?: () => void;
4
4
  config: {
@@ -7,7 +7,7 @@ export type ModalConfig = {
7
7
  };
8
8
  [key: string]: unknown;
9
9
  };
10
- lang: 'zh' | 'en' | 'id';
10
+ lang?: 'zh' | 'en' | 'id';
11
11
  http: {
12
12
  (params: object): Promise<unknown>;
13
13
  defaults: {
@@ -18,6 +18,16 @@ export type ModalConfig = {
18
18
  };
19
19
  };
20
20
  };
21
- api?: string;
22
- response: any;
21
+ sendApi?: string;
22
+ apiReject?: any;
23
+ apiResolve?: any;
24
+ apiPromiseToEmpty?: () => void;
25
+ verifyPromise: {
26
+ current: Promise<any> | null;
27
+ };
28
+ };
29
+ export type LoginModalConfig = {
30
+ goLogin: () => void;
31
+ onClose?: () => void;
32
+ lang?: 'zh' | 'en' | 'id';
23
33
  };
@@ -1,5 +1,5 @@
1
- import { ModalConfig } from './utils/type.js';
1
+ import { VerifyModalConfig } from './utils/type.js';
2
2
  declare const CreateMessageVerifyModal: ({ props }: {
3
- props: ModalConfig;
3
+ props: VerifyModalConfig;
4
4
  }) => import("react/jsx-runtime.js").JSX.Element;
5
5
  export default CreateMessageVerifyModal;
@@ -11,10 +11,9 @@ const CreateMessageVerifyModal = ({ props }) => {
11
11
  const [captchaImage, setCaptchaImage] = useState('');
12
12
  const [captchCode, setCaptchCode] = useState('');
13
13
  const [captchaKey, setCaptchaKey] = useState('');
14
- const { data, http, lang, api = '/admin/sms/send', response } = props || {};
14
+ const { data, http, lang, sendApi = '/admin/sms/send', config, apiResolve, apiPromiseToEmpty } = props || {};
15
15
  const dataObj = JSON.parse(data || '{}');
16
16
  const { mobile, verifyCodeKey } = dataObj || {};
17
- console.log('response===>', response);
18
17
  const getKey = async () => {
19
18
  try {
20
19
  const res = await Api.getCaptchaKey();
@@ -52,46 +51,65 @@ const CreateMessageVerifyModal = ({ props }) => {
52
51
  formData.append('captchaKey', captchaKey);
53
52
  formData.append('captcha', captchCode);
54
53
  // 重新发送验证码
55
- const res = await axios.post(api, formData);
54
+ const res = await axios.post(sendApi, formData);
56
55
  const { code, detail } = res.data?.status || {};
57
56
  if (code !== 0) {
58
57
  message.error(detail || t('sendFailed', lang));
59
58
  return;
60
59
  }
61
60
  message.success(t('sendSuccess', lang));
61
+ // 重置倒计时、验证码
62
62
  setCountdown(60);
63
+ setOtp('');
63
64
  };
64
65
  return (_jsxs(Modal, { width: 420, visible: visible, onClose: () => {
65
66
  setVisible(false);
67
+ apiPromiseToEmpty?.();
66
68
  props.onClose?.();
67
69
  }, children: [_jsx("div", { style: { fontSize: 14, color: '#666' }, children: t('alreadySend', lang, { phone: mobile }) }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8, marginTop: 12 }, children: [_jsx(Input.OTP, { length: 6, value: otp, onChange: async (val) => {
68
70
  setOtp(val);
69
71
  if (val.length === 6) {
70
- const { data: { status: { code, detail } = {} } } = response || {};
71
- http({
72
- ...response?.config,
73
- headers: {
74
- ...http.defaults.headers.common,
75
- 'sms-code': val,
76
- 'sms-code-key': verifyCodeKey,
77
- 'Content-Type': response?.config.headers['Content-Type'],
72
+ try {
73
+ const res = await Promise.race([
74
+ new Promise((resolve, reject) => {
75
+ setTimeout(() => {
76
+ reject(new Error('Timeout'));
77
+ }, 1000);
78
+ }),
79
+ new Promise((resolve, reject) => {
80
+ http({
81
+ ...config,
82
+ headers: {
83
+ ...http.defaults.headers.common,
84
+ 'sms-code': val,
85
+ 'sms-code-key': verifyCodeKey,
86
+ 'Content-Type': config.headers['Content-Type'],
87
+ }
88
+ }).then(res => {
89
+ resolve(res);
90
+ }).catch(err => {
91
+ reject(err);
92
+ });
93
+ })
94
+ ]);
95
+ if (res?.data?.status?.code === 0) {
96
+ apiResolve(res);
97
+ setVisible(false);
98
+ }
99
+ else {
100
+ message.error('验证失败');
101
+ setOtp('');
78
102
  }
79
- });
80
- console.log(response, code, 'config');
81
- if (code !== 0) {
82
- const detailObj = JSON.parse(detail || '{}');
83
- message.error(detailObj?.message || t('verifyFailed', lang));
84
- return;
85
103
  }
86
- else {
87
- message.success(t('verifySuccess', lang));
88
- // setVisible(false);
104
+ catch (error) {
105
+ console.warn('catch', error);
106
+ message.error('验证失败');
107
+ setOtp('');
89
108
  }
90
- setVisible(false);
91
109
  }
92
110
  } }), _jsx(Button, { disabled: countdown > 0 || !captchCode, onClick: handleResend, style: { padding: '8px' }, children: countdown > 0 ? t('countDownSecound', lang, { countdown }) : t('reSend', lang) })] }), countdown > 0 ? null :
93
111
  _jsxs("div", { style: { marginTop: 12, display: 'flex', alignItems: 'center' }, children: [_jsx(Input, { placeholder: t('pleaseEnterPicVerifyCode', lang), onChange: (e) => {
94
112
  setCaptchCode(e);
95
- }, style: { width: 300 } }), captchaImage && _jsx("img", { src: captchaImage, alt: t('verifyCode', lang), style: { width: 100, height: 30, marginLeft: 8 }, onClick: getKey })] }), (countdown > 0 || captchCode) ? null : _jsx("div", { style: { fontSize: 14, color: 'red' }, children: t('pleaseEnterAndSend', lang) })] }));
113
+ }, style: { width: 300 } }), captchaImage && _jsx("img", { src: captchaImage, alt: t('verifyCode', lang), style: { width: 100, height: 30, marginLeft: 8 }, onClick: getKey })] }), (countdown > 0 || captchCode) ? null : _jsx("div", { style: { fontSize: 14, color: 'red' }, children: t('pleaseEnterAndSend', lang) }), _jsx("div", { style: { fontSize: 14, color: '#666', marginTop: 12 }, children: t('chidoriOpenPro', lang) })] }));
96
114
  };
97
115
  export default CreateMessageVerifyModal;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "message-verify",
3
- "version": "1.0.1-beta.7",
3
+ "version": "1.0.1-beta.71",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "dependencies": {
@@ -29,6 +29,7 @@
29
29
  "build": "tsc -b",
30
30
  "analyze": "vite build",
31
31
  "lint": "eslint .",
32
- "preview": "vite preview"
32
+ "preview": "vite preview",
33
+ "release:beta": "pnpm version prerelease --preid=beta && pnpm run build && pnpm publish"
33
34
  }
34
35
  }
package/src/index.tsx CHANGED
@@ -1,55 +1,96 @@
1
1
  import ReactDOM from 'react-dom/client'
2
- import VerifyModal from './verify-modal.js'
2
+ import VerifyModal from './modal/verify-modal.js'
3
3
  import Fingerprint2 from 'fingerprintjs2';
4
- import { ModalConfig } from './utils/type.js';
4
+ import ReLoginModal from './modal/relogin-modal.js';
5
+ import { VerifyModalConfig, LoginModalConfig } from './utils/type.js';
6
+ import eventEmitter from './utils/eventEmitter';
5
7
 
6
- let cachedFingerprint: string | null = null;
8
+ let fingerprintPromise: Promise<string> | null = null; // 用 Promise 本身作为缓存
9
+ let modalRoot: ReactDOM.Root | null = null
7
10
  export const initFingerprint = async (): Promise<string> => {
8
- if (cachedFingerprint) {
9
- // 已有缓存,直接返回 Promise
10
- return Promise.resolve(cachedFingerprint);
11
- }
12
- // 首次异步获取并缓存
13
- return new Promise((resolve) => {
14
- Fingerprint2.get(function (components) {
15
- console.log('components', components);
16
- const includeKeys = ['userAgent', 'deviceMemory', 'cpuClass', 'hardwareConcurrency', 'platform'];
17
- const values = components
18
- .filter(component => includeKeys.includes(component.key))
19
- .map(component => component.value)
20
- .join('###');
21
- const fingerprint = Fingerprint2.x64hash128(values, 31);
22
- cachedFingerprint = fingerprint;
23
- resolve(fingerprint);
11
+ console.log('fingerprintPromise:', fingerprintPromise);
12
+ if (!fingerprintPromise) {
13
+ fingerprintPromise = new Promise((resolve) => {
14
+ Fingerprint2.get(components => {
15
+ const includeKeys = ['userAgent', 'cpuClass', 'hardwareConcurrency', 'platform'];
16
+ console.log('components:', components);
17
+ const values = components
18
+ .filter(c => includeKeys.includes(c.key))
19
+ .map(c => c.value)
20
+ .join('###');
21
+ console.log('values:', values);
22
+ const fingerprint = Fingerprint2.x64hash128(values, 31);
23
+ console.log('fingerprint:', fingerprint);
24
+ resolve(fingerprint);
25
+ });
24
26
  });
25
- });
27
+ }
28
+ return fingerprintPromise;
26
29
  };
27
30
 
28
- let modalRoot: ReactDOM.Root | null = null
31
+ const destroyModal = (modalId: string) => {
32
+ if (modalRoot) {
33
+ modalRoot.unmount()
34
+ document.getElementById(modalId)?.remove()
35
+ modalRoot = null
36
+ }
37
+ }
29
38
 
30
- export const createMessageVerifyModal = (modalProps: ModalConfig) => {
31
- const container = document.createElement('div')
32
- container.id = 'antd-modal-container'
33
- document.body.appendChild(container)
39
+ const creatModal = (modalProps: VerifyModalConfig | LoginModalConfig, modalId: string, ModalDom: any) => {
40
+ destroyModal(modalId);
41
+ const container = document.createElement('div')
42
+ container.id = modalId
43
+ document.body.appendChild(container)
34
44
 
35
- modalRoot = ReactDOM.createRoot(container)
36
- modalRoot.render(
37
- <VerifyModal
38
- props={{
39
- ...modalProps,
40
- onClose: () => {
41
- modalProps.onClose?.()
42
- destroyModal()
43
- }
44
- }}
45
- />
46
- )
45
+ modalRoot = ReactDOM.createRoot(container)
46
+ modalRoot.render(
47
+ <ModalDom
48
+ props={{
49
+ ...modalProps,
50
+ onClose: () => {
51
+ destroyModal(modalId);
52
+ }
53
+ }}
54
+ />
55
+ )
47
56
  }
48
57
 
49
- const destroyModal = () => {
50
- if (modalRoot) {
51
- modalRoot.unmount()
52
- document.getElementById('antd-modal-container')?.remove()
53
- modalRoot = null
54
- }
55
- }
58
+ const createMessageVerifyModal = (modalProps: VerifyModalConfig) => {
59
+ const verifyModalId = 'verify-modal-container';
60
+ creatModal(modalProps, verifyModalId, VerifyModal);
61
+ }
62
+ // 新增 relogin 弹窗创建方法
63
+ export const createReLoginModal = (modalProps: LoginModalConfig) => {
64
+ const reLoginModalId = 'relogin-modal-container';
65
+ creatModal(modalProps, reLoginModalId, ReLoginModal);
66
+ }
67
+
68
+ export const VerifyHandler = {
69
+ _currentUrl: '',
70
+ createModal: ({ data, config, http, verifyPromise, sendApi }: VerifyModalConfig) => {
71
+ VerifyHandler._currentUrl = config?.url as string || '';
72
+ const toEmpty = () => {
73
+ verifyPromise.current = null;
74
+ };
75
+ if (!verifyPromise.current) {
76
+ verifyPromise.current = new Promise((resolve, reject) => {
77
+ createMessageVerifyModal({
78
+ data,
79
+ config,
80
+ http,
81
+ apiResolve: resolve,
82
+ apiReject: reject,
83
+ apiPromiseToEmpty: toEmpty,
84
+ sendApi
85
+ } as VerifyModalConfig);
86
+ }).finally(toEmpty);
87
+ }
88
+ return verifyPromise.current;
89
+ },
90
+ getResponse: (response: any) => {
91
+ if (VerifyHandler._currentUrl === response?.config?.url) {
92
+ eventEmitter.emit('response', response?.data?.status?.code ?? -1);
93
+ }
94
+ return response;
95
+ }
96
+ };
package/src/locales/en.ts CHANGED
@@ -6,5 +6,10 @@ export default {
6
6
  sendSuccess: 'Successfully sent',
7
7
  sendFailed: 'Send failed',
8
8
  reSend: 'Resend',
9
- countDownSecound: '{countdown} seconds'
9
+ countDownSecound: '{countdown} seconds',
10
+ accountAlert: 'Account Security Alert',
11
+ alertContent: 'Changes have been detected in your login environment or network information.To ensure account security, please log in again to verify your identity.',
12
+ ok: 'OK',
13
+ chidoriOpenPro: 'Chidori has activated security protection for you',
14
+ verifyFail: 'Validation failed'
10
15
  };
package/src/locales/id.ts CHANGED
@@ -6,5 +6,10 @@ export default {
6
6
  sendSuccess: 'Berhasil dikirim',
7
7
  sendFailed: 'Gagal mengirim',
8
8
  reSend: 'Kirim Ulang',
9
- countDownSecound: '{countdown} detik'
9
+ countDownSecound: '{countdown} detik',
10
+ accountAlert: 'Peringatan Keamanan Akun',
11
+ alertContent: 'Terdeteksi perubahan pada lingkungan login atau informasi jaringan Anda.Untuk menjaga keamanan akun, silakan login kembali untuk memverifikasi identitas Anda.',
12
+ ok: 'Baiklah',
13
+ chidoriOpenPro: 'chidori telah mengaktifkan keamanan untuk Anda',
14
+ verifyFail: 'Autentikasi gagal'
10
15
  };
package/src/locales/zh.ts CHANGED
@@ -6,5 +6,10 @@ export default {
6
6
  sendSuccess: '发送成功',
7
7
  sendFailed: '发送失败',
8
8
  reSend: '重新发送',
9
- countDownSecound: '{countdown}秒'
9
+ countDownSecound: '{countdown}秒',
10
+ accountAlert: '账号安全提醒',
11
+ alertContent: '检测到您的登录环境或网络信息有变动,为保障账户安全,请重新登录验证身份',
12
+ ok: '好的',
13
+ chidoriOpenPro: 'chidori已为您开启安全防护',
14
+ verifyFail: '验证失败'
10
15
  };
package/src/main.tsx CHANGED
@@ -1,11 +1,12 @@
1
1
  import { createRoot } from 'react-dom/client';
2
- import { createMessageVerifyModal, initFingerprint } from './index.js'; // 或 './index'
2
+ import { initFingerprint, createReLoginModal, VerifyHandler } from './index.js'; // 或 './index'
3
3
  import { axios } from '@yqg/resource';
4
4
 
5
5
  const data = "{\"mobile\":\"188****4035\",\"verifyCodeKey\":\"3f025b33-988e-47c0-950d-6beb776d043f\",\"needValid\":true,\"step\":2,\"message\":\"需要填写验证码\"}";
6
6
 
7
7
  const fp = await initFingerprint();
8
- console.log(fp);
8
+ const fp2 = await initFingerprint();
9
+ console.log(fp, fp2);
9
10
 
10
11
  const config = {
11
12
  "transitional": {
@@ -13,12 +14,6 @@ const config = {
13
14
  "forcedJSONParsing": true,
14
15
  "clarifyTimeoutError": false
15
16
  },
16
- "transformRequest": [
17
- null
18
- ],
19
- "transformResponse": [
20
- null
21
- ],
22
17
  "timeout": 0,
23
18
  "xsrfCookieName": "XSRF-TOKEN",
24
19
  "xsrfHeaderName": "X-XSRF-TOKEN",
@@ -26,10 +21,8 @@ const config = {
26
21
  "maxBodyLength": -1,
27
22
  "headers": {
28
23
  "Accept": "application/json, text/plain, */*",
29
- "X-Device-Fingerprint": "185fcce88c629725321adf29daa5e444",
30
- "Content-Type": "application/json",
31
- "sms-code": "121212",
32
- "sms-code-key": "212190c7-2f5e-4cc1-82ec-a242c2ab5425"
24
+ "X-Device-Fingerprint": "531f14c7176b16ebeb18e2b23d6bd124",
25
+ "Content-Type": "application/json"
33
26
  },
34
27
  "url": "/classification/admin/level/edit",
35
28
  "method": "post",
@@ -44,18 +37,22 @@ const config = {
44
37
  "formInstance": {},
45
38
  "data": "{\"id\":1,\"classificationName\":\"个人基本概况信息\",\"classificationLevel\":2}",
46
39
  "baseURL": "http://localhost:62888"
47
- };
40
+ }
41
+
42
+ const promise = {current: null};
48
43
  createRoot(document.getElementById('root')!).render(
49
44
  <>
50
- <button onClick={() => createMessageVerifyModal({
51
- data,
52
- config,
53
- response: {
54
- config
45
+ <button onClick={() => {
46
+ return VerifyHandler.createModal({data, config, http: axios, verifyPromise: promise});
47
+ }}>
48
+ Show verify Modal
49
+ </button>
50
+ <button onClick={() => createReLoginModal({
51
+ goLogin: () => {
52
+ console.log('goLogin');
55
53
  },
56
- lang: 'en',
57
- http: axios,
54
+ lang: 'zh',
58
55
  })}>
59
- Show verify Modal
56
+ Show login Modal
60
57
  </button>
61
58
  </>);
@@ -1,20 +1,23 @@
1
1
  import { useState } from 'react'
2
- import { Modal, Button } from './compoments/index.js'
3
- import { ModalConfig } from './utils/type.js';
2
+ import { Modal, Button } from '../compoments/index.js'
3
+ import { LoginModalConfig } from '../utils/type.js';
4
+ import t from '../utils/i18n.js'
4
5
 
5
- const ReLoginModal = ({ props }: { props: ModalConfig }) => {
6
- console.log('props', props);
6
+ const ReLoginModal = ({ props }: { props: LoginModalConfig }) => {
7
+ const { goLogin, lang, onClose: destroyModal } = props || {};
7
8
  const [visible, setVisible] = useState(true);
8
9
  const onClose = () => {
9
10
  setVisible(false);
11
+ goLogin();
12
+ destroyModal?.();
10
13
  };
11
14
  return (
12
15
  <Modal visible={visible} onClose={onClose} width={420}>
13
16
  <div style={{ fontWeight: 500, fontSize: 20, marginBottom: 24 }}>
14
- 账号安全提醒
17
+ {t('accountAlert', lang)}
15
18
  </div>
16
19
  <div style={{ color: '#222', fontSize: 16, marginBottom: 40, lineHeight: '24px' }}>
17
- 检测到您的登录环境或网络信息有变动,为保障账户安全,请重新登录验证身份
20
+ {t('alertContent', lang)}
18
21
  </div>
19
22
  <div style={{ display: 'flex', justifyContent: 'center' }}>
20
23
  <Button
@@ -22,16 +25,15 @@ const ReLoginModal = ({ props }: { props: ModalConfig }) => {
22
25
  background: '#1677ff',
23
26
  color: '#fff',
24
27
  border: 'none',
25
- width: 160,
26
- height: 44,
27
- fontSize: 18,
28
- fontWeight: 500,
28
+ width: 80,
29
+ height: 36,
30
+ fontSize: 14,
29
31
  borderRadius: 8,
30
32
  boxShadow: '0 2px 8px rgba(22,119,255,0.08)',
31
33
  }}
32
34
  onClick={onClose}
33
35
  >
34
- 好的
36
+ {t('ok', lang)}
35
37
  </Button>
36
38
  </div>
37
39
  </Modal>
@@ -1,21 +1,23 @@
1
- import { useEffect, useState } from 'react'
2
- import { Modal, Input, Button, message } from './compoments/index.js'
3
- import Api from './resource.js'
4
- import t from './utils/i18n.js'
5
- import { ModalConfig } from './utils/type.js';
1
+ import { useRef, useEffect, useState } from 'react'
2
+ import { Modal, Input, Button, message } from '../compoments/index.js'
3
+ import Api from '../utils/resource.js'
4
+ import t from '../utils/i18n.js'
5
+ import { VerifyModalConfig } from '../utils/type.js';
6
6
  import { axios } from '@yqg/resource';
7
+ import eventEmitter from '../utils/eventEmitter';
7
8
 
8
- const CreateMessageVerifyModal = ({ props }: { props: ModalConfig }) => {
9
+ const CreateMessageVerifyModal = ({ props }: { props: VerifyModalConfig }) => {
9
10
  const [visible, setVisible] = useState(true);
10
11
  const [countdown, setCountdown] = useState(60);
11
12
  const [otp, setOtp] = useState('');
12
13
  const [captchaImage, setCaptchaImage] = useState<string>('');
13
14
  const [captchCode, setCaptchCode] = useState<string>('');
14
15
  const [captchaKey, setCaptchaKey] = useState<string>('');
15
- const { data, http, lang, api='/admin/sms/send', response } = props || {};
16
+ const { data, http, lang, sendApi = '/admin/sms/send', config, apiResolve, apiPromiseToEmpty, onClose } = props || {};
16
17
  const dataObj = JSON.parse(data || '{}');
17
18
  const { mobile, verifyCodeKey } = dataObj || {};
18
- console.log('response===>', response);
19
+ const resolveRef = useRef<any>(null);
20
+ const rejectRef = useRef<any>(null);
19
21
 
20
22
  const getKey = async () => {
21
23
  try {
@@ -26,10 +28,11 @@ const CreateMessageVerifyModal = ({ props }: { props: ModalConfig }) => {
26
28
  const image = Api.getCaptchaImgUrl(key) as unknown;
27
29
  setCaptchaImage(image as string);
28
30
  }
29
- } catch (err) {const msg =
30
- typeof err === 'object' && err !== null && 'message' in err
31
- ? (err as {message: string}).message
32
- : String(err);
31
+ } catch (err) {
32
+ const msg =
33
+ typeof err === 'object' && err !== null && 'message' in err
34
+ ? (err as { message: string }).message
35
+ : String(err);
33
36
  message.error(msg as React.ReactNode);
34
37
  }
35
38
  }
@@ -49,19 +52,42 @@ const CreateMessageVerifyModal = ({ props }: { props: ModalConfig }) => {
49
52
  };
50
53
  }, [visible, countdown]);
51
54
 
55
+
56
+ useEffect(() => {
57
+ const handler = (data: any) => {
58
+ // 这里处理收到的数据
59
+ console.log('收到 response 事件:', data);
60
+ if (data === 0) {
61
+ resolveRef.current({
62
+ code: data,
63
+ });
64
+ } else {
65
+ rejectRef.current({
66
+ code: data,
67
+ });
68
+ }
69
+ };
70
+ eventEmitter.on('response', handler);
71
+ return () => {
72
+ eventEmitter.off('response', handler);
73
+ };
74
+ }, []);
75
+
52
76
  const handleResend = async () => {
53
77
  const formData = new FormData();
54
78
  formData.append('captchaKey', captchaKey);
55
79
  formData.append('captcha', captchCode);
56
80
  // 重新发送验证码
57
- const res = await axios.post(api, formData);
81
+ const res = await axios.post(sendApi, formData);
58
82
  const { code, detail } = res.data?.status || {};
59
83
  if (code !== 0) {
60
84
  message.error(detail || t('sendFailed', lang));
61
85
  return;
62
86
  }
63
87
  message.success(t('sendSuccess', lang));
88
+ // 重置倒计时、验证码
64
89
  setCountdown(60);
90
+ setOtp('');
65
91
  }
66
92
 
67
93
  return (
@@ -70,7 +96,8 @@ const CreateMessageVerifyModal = ({ props }: { props: ModalConfig }) => {
70
96
  visible={visible}
71
97
  onClose={() => {
72
98
  setVisible(false);
73
- props.onClose?.();
99
+ apiPromiseToEmpty?.();
100
+ onClose?.();
74
101
  }}
75
102
  >
76
103
  <div style={{ fontSize: 14, color: '#666' }}>{t('alreadySend', lang, { phone: mobile })}</div>
@@ -82,26 +109,32 @@ const CreateMessageVerifyModal = ({ props }: { props: ModalConfig }) => {
82
109
  onChange={async (val) => {
83
110
  setOtp(val);
84
111
  if (val.length === 6) {
85
- const {data: {status: {code, detail} = {}}} = response || {};
86
- http({
87
- ...response?.config,
88
- headers: {
89
- ...http.defaults.headers.common,
90
- 'sms-code': val,
91
- 'sms-code-key': verifyCodeKey,
92
- 'Content-Type': response?.config.headers['Content-Type'],
112
+ try {
113
+ const res = await new Promise((resolve, reject) => {
114
+ resolveRef.current = resolve;
115
+ rejectRef.current = reject;
116
+ http({
117
+ ...config,
118
+ headers: {
119
+ ...http.defaults.headers.common,
120
+ 'sms-code': val,
121
+ 'sms-code-key': verifyCodeKey,
122
+ 'Content-Type': config.headers['Content-Type'],
123
+ }
124
+ });
125
+ }) as any;
126
+ if (res?.code === 0 || res?.data?.status?.code === 0) {
127
+ apiResolve(res);
128
+ setVisible(false);
129
+ } else {
130
+ message.error(t('verifyFail', lang));
131
+ setOtp('');
93
132
  }
94
- }) as any;
95
- console.log(response, code, 'config');
96
- if(code !== 0) {
97
- const detailObj = JSON.parse(detail || '{}');
98
- message.error(detailObj?.message || t('verifyFailed', lang));
99
- return;
100
- } else {
101
- message.success(t('verifySuccess', lang));
102
- // setVisible(false);
133
+ } catch (error) {
134
+ console.warn('catch=>error', error);
135
+ message.error(t('verifyFail', lang));
136
+ setOtp('');
103
137
  }
104
- setVisible(false);
105
138
  }
106
139
  }} />
107
140
  <Button
@@ -125,6 +158,7 @@ const CreateMessageVerifyModal = ({ props }: { props: ModalConfig }) => {
125
158
  {captchaImage && <img src={captchaImage} alt={t('verifyCode', lang)} style={{ width: 100, height: 30, marginLeft: 8 }} onClick={getKey} />}
126
159
  </div>}
127
160
  {(countdown > 0 || captchCode) ? null : <div style={{ fontSize: 14, color: 'red' }}>{t('pleaseEnterAndSend', lang)}</div>}
161
+ <div style={{ fontSize: 14, color: '#666', marginTop: 12 }}>{t('chidoriOpenPro', lang)}</div>
128
162
  </Modal>
129
163
  );
130
164
  };
@@ -0,0 +1,33 @@
1
+ type Listener = (...args: any[]) => void;
2
+
3
+ class EventEmitter {
4
+ private events: Record<string, Listener[]> = {};
5
+
6
+ on(event: string, listener: Listener) {
7
+ if (!this.events[event]) {
8
+ this.events[event] = [];
9
+ }
10
+ this.events[event].push(listener);
11
+ }
12
+
13
+ off(event: string, listener: Listener) {
14
+ if (!this.events[event]) return;
15
+ this.events[event] = this.events[event].filter(l => l !== listener);
16
+ }
17
+
18
+ emit(event: string, ...args: any[]) {
19
+ if (!this.events[event]) return;
20
+ this.events[event].forEach(listener => listener(...args));
21
+ }
22
+
23
+ once(event: string, listener: Listener) {
24
+ const onceListener: Listener = (...args) => {
25
+ listener(...args);
26
+ this.off(event, onceListener);
27
+ };
28
+ this.on(event, onceListener);
29
+ }
30
+ }
31
+
32
+ const eventEmitter = new EventEmitter();
33
+ export default eventEmitter;
package/src/utils/type.ts CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- export type ModalConfig = {
2
+ export type VerifyModalConfig = {
3
3
  data: string;
4
4
  onClose?: () => void
5
5
  config: {
@@ -8,7 +8,7 @@ export type ModalConfig = {
8
8
  };
9
9
  [key: string]: unknown;
10
10
  };
11
- lang: 'zh' | 'en' | 'id';
11
+ lang?: 'zh' | 'en' | 'id';
12
12
  http: {
13
13
  (params: object): Promise<unknown>;
14
14
  defaults: {
@@ -19,6 +19,15 @@ export type ModalConfig = {
19
19
  }
20
20
  }
21
21
  };
22
- api?: string;
23
- response: any;
22
+ sendApi?: string;
23
+ apiReject?: any;
24
+ apiResolve?: any;
25
+ apiPromiseToEmpty?: () => void;
26
+ verifyPromise: {current: Promise<any> | null}
27
+ }
28
+
29
+ export type LoginModalConfig = {
30
+ goLogin: () => void;
31
+ onClose?: () => void
32
+ lang?: 'zh' | 'en' | 'id';
24
33
  }
File without changes