From 3b11b262b9da874c5b89123e94e53fff6a1a53f9 Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Fri, 1 Mar 2024 16:35:49 +0800 Subject: [PATCH 1/2] Fix modal can not focus second input bug --- src/pages/Sign/SignIn.tsx | 24 ++++++---- src/pages/System/Settings/Mail.tsx | 22 ++++++--- src/pages/System/Tools/Base.tsx | 50 +++++++++++++------ src/pages/System/Tools/Template.tsx | 44 +++++++++++------ src/pages/System/Tools/index.tsx | 6 +++ src/pages/System/User.tsx | 18 ++++--- src/pages/Tools/index.tsx | 25 ++++++---- src/pages/User/index.tsx | 74 +++++++++++++++++++---------- 8 files changed, 178 insertions(+), 85 deletions(-) diff --git a/src/pages/Sign/SignIn.tsx b/src/pages/Sign/SignIn.tsx index 5e7dfa3..31da7b3 100644 --- a/src/pages/Sign/SignIn.tsx +++ b/src/pages/Sign/SignIn.tsx @@ -105,24 +105,30 @@ const SignIn = () => { twoFactorForm.resetFields() void modal.confirm({ title: '双因素验证', - getContainer: false, centered: true, + footer: (_, { OkBtn, CancelBtn }) => ( + <> + + + + ), content: ( <> - + { + setTimeout(() => { + ref?.getFieldInstance('twoFactorCode').focus() + }, 50) + }} + > - { - input?.focus() - }} - /> + diff --git a/src/pages/System/Settings/Mail.tsx b/src/pages/System/Settings/Mail.tsx index f2bd212..898581e 100644 --- a/src/pages/System/Settings/Mail.tsx +++ b/src/pages/System/Settings/Mail.tsx @@ -17,23 +17,31 @@ const Mail = () => { const handleOnTest = () => { void modal.confirm({ title: '发送测试邮件', - getContainer: false, centered: true, maskClosable: true, + footer: (_, { OkBtn, CancelBtn }) => ( + <> + + + + ), content: ( <> - + { + setTimeout(() => { + ref?.getFieldInstance('to').focus() + }, 50) + }} + > - { - input?.focus() - }} - /> + diff --git a/src/pages/System/Tools/Base.tsx b/src/pages/System/Tools/Base.tsx index 6e7a566..ac97229 100644 --- a/src/pages/System/Tools/Base.tsx +++ b/src/pages/System/Tools/Base.tsx @@ -234,6 +234,12 @@ const Base = () => { title: '编译', centered: true, maskClosable: true, + footer: (_, { OkBtn, CancelBtn }) => ( + <> + + + + ), content: ( <> @@ -538,11 +544,23 @@ const Base = () => { const handleOnAddFile = () => { void modal.confirm({ title: '新建文件', - getContainer: false, centered: true, maskClosable: true, + footer: (_, { OkBtn, CancelBtn }) => ( + <> + + + + ), content: ( - + { + setTimeout(() => { + ref?.getFieldInstance('fileName').focus() + }, 50) + }} + > { }) ]} > - { - input?.focus() - }} - /> + ), @@ -721,11 +735,23 @@ const Base = () => { renameFileForm.setFieldValue('fileName', fileName) void modal.confirm({ title: '重命名文件', - getContainer: false, centered: true, maskClosable: true, + footer: (_, { OkBtn, CancelBtn }) => ( + <> + + + + ), content: ( - + { + setTimeout(() => { + ref?.getFieldInstance('fileName').focus() + }, 50) + }} + > { }) ]} > - { - input?.focus() - }} - /> + ), diff --git a/src/pages/System/Tools/Template.tsx b/src/pages/System/Tools/Template.tsx index 330f9a8..c7c5e55 100644 --- a/src/pages/System/Tools/Template.tsx +++ b/src/pages/System/Tools/Template.tsx @@ -399,11 +399,23 @@ const Template = () => { const handleOnAddFile = () => { void modal.confirm({ title: '新建文件', - getContainer: false, centered: true, maskClosable: true, + footer: (_, { OkBtn, CancelBtn }) => ( + <> + + + + ), content: ( - + { + setTimeout(() => { + ref?.getFieldInstance('fileName').focus() + }, 50) + }} + > { }) ]} > - { - input?.focus() - }} - /> + ), @@ -585,11 +593,23 @@ const Template = () => { renameFileForm.setFieldValue('fileName', fileName) void modal.confirm({ title: '重命名文件', - getContainer: false, centered: true, maskClosable: true, + footer: (_, { OkBtn, CancelBtn }) => ( + <> + + + + ), content: ( - + { + setTimeout(() => { + ref?.getFieldInstance('fileName').focus() + }, 50) + }} + > { }) ]} > - { - input?.focus() - }} - /> + ), diff --git a/src/pages/System/Tools/index.tsx b/src/pages/System/Tools/index.tsx index 8eef2d1..40d5004 100644 --- a/src/pages/System/Tools/index.tsx +++ b/src/pages/System/Tools/index.tsx @@ -197,6 +197,12 @@ const Tools = () => { title: '审核', centered: true, maskClosable: true, + footer: (_, { OkBtn, CancelBtn }) => ( + <> + + + + ), content: ( { 修改用户 {value.username} 的密码 ), - getContainer: false, centered: true, maskClosable: true, + footer: (_, { OkBtn, CancelBtn }) => ( + <> + + + + ), content: ( { + setTimeout(() => { + ref?.getFieldInstance('password').focus() + }, 50) + }} > @@ -358,11 +368,7 @@ const User = () => { } ]} > - { - input?.focus() - }} - /> + { const handleOnUpgradeTool = (tool: ToolVo) => { void modal.confirm({ title: '更新工具', - getContainer: false, centered: true, maskClosable: true, + footer: (_, { OkBtn, CancelBtn }) => ( + <> + + + + ), content: ( <> - + { + setTimeout(() => { + ref?.getFieldInstance('toolId').focus() + }, 50) + }} + > { } ]} > - { - input?.focus() - }} - /> + diff --git a/src/pages/User/index.tsx b/src/pages/User/index.tsx index 61ae9c6..249247f 100644 --- a/src/pages/User/index.tsx +++ b/src/pages/User/index.tsx @@ -99,15 +99,25 @@ const User = () => { 修改密码 ), - getContainer: false, centered: true, maskClosable: true, + footer: (_, { OkBtn, CancelBtn }) => ( + <> + + + + ), content: ( { + setTimeout(() => { + ref?.getFieldInstance('originalPassword').focus() + }, 50) + }} > { labelAlign={'right'} rules={[{ required: true, message: '请输入原密码' }]} > - { - input?.focus() - }} - /> + { title: '双因素', centered: true, maskClosable: true, + focusTriggerAfterClose: false, + footer: (_, { OkBtn, CancelBtn }) => ( + <> + + + + ), content: '确定解除双因素？', onOk: () => { void modal.confirm({ title: '解除双因素', - getContainer: false, centered: true, maskClosable: true, + footer: (_, { OkBtn, CancelBtn }) => ( + <> + + + + ), content: ( <> - + { + setTimeout(() => { + ref?.getFieldInstance('twoFactorCode').focus() + }, 50) + }} + > - { - input?.focus() - }} - /> + @@ -289,9 +307,14 @@ const User = () => { if (response.success) { void modal.confirm({ title: '绑定双因素', - getContainer: false, centered: true, maskClosable: true, + footer: (_, { OkBtn, CancelBtn }) => ( + <> + + + + ), content: ( <> { alt={'Two-factor'} preview={false} /> - + { + setTimeout(() => { + ref?.getFieldInstance('twoFactorCode').focus() + }, 50) + }} + > - { - input?.focus() - }} - /> + -- 2.49.1 From c67b7b911a4ae3f2b907f0532b7ecce2fe0e8a14 Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Fri, 1 Mar 2024 17:50:34 +0800 Subject: [PATCH 2/2] Optimize Turnstile load --- package-lock.json | 8 +++--- package.json | 2 +- src/assets/css/pages/sign.scss | 5 ++++ .../Playground/Output/Transform/index.tsx | 2 +- src/pages/Sign/Forget.tsx | 25 +++++++++++++++++-- src/pages/Sign/SignIn.tsx | 13 +++++++++- src/pages/Sign/SignUp.tsx | 13 +++++++++- 7 files changed, 58 insertions(+), 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4a95697..0b2e579 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "0.0.0", "dependencies": { "@ant-design/icons": "^5.2.6", - "@marsidev/react-turnstile": "^0.4.1", + "@marsidev/react-turnstile": "^0.5.3", "@monaco-editor/react": "^4.6.0", "@typescript/ata": "^0.9.4", "antd": "^5.13.2", @@ -1240,9 +1240,9 @@ } }, "node_modules/@marsidev/react-turnstile": { - "version": "0.4.1", - "resolved": "https://registry.npmmirror.com/@marsidev/react-turnstile/-/react-turnstile-0.4.1.tgz", - "integrity": "sha512-uZusUW9mPr0csWpls8bApe5iuRK0YK7H1PCKqfM4djW3OA9GB9rU68irjk7xRO8qlHyj0aDTeVu9tTLPExBO4Q==", + "version": "0.5.3", + "resolved": "https://registry.npmjs.org/@marsidev/react-turnstile/-/react-turnstile-0.5.3.tgz", + "integrity": "sha512-lx3p2/56esPt8Ksr37K8uhPt/K4Mg8xaIfCV8MPKmE/1X4aHesRqZok1+L1ySQwsdWoEe5+KJOhBXka8lFBwNg==", "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" diff --git a/package.json b/package.json index c96b4e2..510e405 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ }, "dependencies": { "@ant-design/icons": "^5.2.6", - "@marsidev/react-turnstile": "^0.4.1", + "@marsidev/react-turnstile": "^0.5.3", "@monaco-editor/react": "^4.6.0", "@typescript/ata": "^0.9.4", "antd": "^5.13.2", diff --git a/src/assets/css/pages/sign.scss b/src/assets/css/pages/sign.scss index ad54058..96ffe38 100644 --- a/src/assets/css/pages/sign.scss +++ b/src/assets/css/pages/sign.scss @@ -85,6 +85,11 @@ } .sign-up, .sign-in, .forget { + .loading-turnstile { + display: flex; + justify-content: center; + } + .footer { a { font-weight: bolder; diff --git a/src/components/Playground/Output/Transform/index.tsx b/src/components/Playground/Output/Transform/index.tsx index 51cd0f5..849a44a 100644 --- a/src/components/Playground/Output/Transform/index.tsx +++ b/src/components/Playground/Output/Transform/index.tsx @@ -53,7 +53,7 @@ const Transform = ({ file, theme }: OutputProps) => { setCompiledCode(code) } } catch (e) { - console.log(e) + console.error(e) setCompiledCode('') } } else { diff --git a/src/pages/Sign/Forget.tsx b/src/pages/Sign/Forget.tsx index 06a0b58..63d7121 100644 --- a/src/pages/Sign/Forget.tsx +++ b/src/pages/Sign/Forget.tsx @@ -6,6 +6,7 @@ import { PERMISSION_RETRIEVE_CODE_ERROR_OR_EXPIRED, PERMISSION_RETRIEVE_SUCCESS, PERMISSION_USER_NOT_FOUND, + SIZE_ICON_MD, SYSTEM_INVALID_CAPTCHA_CODE } from '@/constants/common.constants' import { r_auth_forget, r_auth_retrieve } from '@/services/auth' @@ -160,11 +161,21 @@ const Forget = () => { /> + {!turnstileRef.current && ( +
+ +
+ )} @@ -232,11 +243,21 @@ const Forget = () => { /> + {!turnstileRef.current && ( +
+ +
+ )} diff --git a/src/pages/Sign/SignIn.tsx b/src/pages/Sign/SignIn.tsx index 31da7b3..854886e 100644 --- a/src/pages/Sign/SignIn.tsx +++ b/src/pages/Sign/SignIn.tsx @@ -8,6 +8,7 @@ import { PERMISSION_TWO_FACTOR_VERIFICATION_CODE_ERROR, PERMISSION_USER_DISABLE, PERMISSION_USERNAME_NOT_FOUND, + SIZE_ICON_MD, SYSTEM_INVALID_CAPTCHA_CODE } from '@/constants/common.constants' import { getUserInfo, setToken } from '@/util/auth' @@ -226,11 +227,21 @@ const SignIn = () => { /> + {!turnstileRef.current && ( +
+ +
+ )} diff --git a/src/pages/Sign/SignUp.tsx b/src/pages/Sign/SignUp.tsx index 9827d1e..23ce21b 100644 --- a/src/pages/Sign/SignUp.tsx +++ b/src/pages/Sign/SignUp.tsx @@ -4,6 +4,7 @@ import { DATABASE_DUPLICATE_KEY, H_CAPTCHA_SITE_KEY, PERMISSION_REGISTER_SUCCESS, + SIZE_ICON_MD, SYSTEM_INVALID_CAPTCHA_CODE, SYSTEM_MATCH_SENSITIVE_WORD } from '@/constants/common.constants' @@ -200,11 +201,21 @@ const SignUp = () => { /> + {!turnstileRef.current && ( +
+ +
+ )} -- 2.49.1