diff --git a/frontend/src/components/ConnectionModal.tsx b/frontend/src/components/ConnectionModal.tsx index 0f0dec8..9fd7df8 100644 --- a/frontend/src/components/ConnectionModal.tsx +++ b/frontend/src/components/ConnectionModal.tsx @@ -19,6 +19,20 @@ const CONNECTION_MODAL_WIDTH = 960; const CONNECTION_MODAL_BODY_HEIGHT = 620; const STEP1_SIDEBAR_DIVIDER_DARK = 'rgba(255, 255, 255, 0.16)'; const STEP1_SIDEBAR_DIVIDER_LIGHT = 'rgba(0, 0, 0, 0.08)'; +const noAutoCapInputProps = { + autoCapitalize: 'none' as const, + autoCorrect: 'off' as const, + spellCheck: false, +}; + +const applyNoAutoCapAttributes = (element: Element) => { + if (!(element instanceof HTMLInputElement) && !(element instanceof HTMLTextAreaElement)) { + return; + } + element.setAttribute('autocapitalize', 'none'); + element.setAttribute('autocorrect', 'off'); + element.setAttribute('spellcheck', 'false'); +}; type ConnectionSecretKey = | 'primaryPassword' @@ -197,6 +211,23 @@ const ConnectionModal: React.FC<{ border: darkMode ? '1px solid rgba(255, 255, 255, 0.16)' : '1px solid rgba(0, 0, 0, 0.06)', }; + useEffect(() => { + if (!open) return; + const applyForConnectionModal = () => { + document + .querySelectorAll('.connection-modal-wrap input, .connection-modal-wrap textarea') + .forEach(applyNoAutoCapAttributes); + }; + applyForConnectionModal(); + const observer = new MutationObserver(() => { + applyForConnectionModal(); + }); + observer.observe(document.body, { childList: true, subtree: true }); + return () => { + observer.disconnect(); + }; + }, [open]); + const modalShellStyle = useMemo(() => ({ background: overlayTheme.shellBg, @@ -2072,7 +2103,7 @@ const ConnectionModal: React.FC<{
常用参数集中在左侧,优先完成连接建立所需的最小输入。
- + {!isCustom && ( @@ -2082,7 +2113,7 @@ const ConnectionModal: React.FC<{ label="连接 URI(可复制粘贴)" help="支持从参数生成、复制到剪贴板,或粘贴后一键解析回填参数" > - + @@ -2112,10 +2143,10 @@ const ConnectionModal: React.FC<{ {isCustom ? ( <> - + - + {renderStoredSecretControls({ fieldName: 'dsn', @@ -2135,6 +2166,7 @@ const ConnectionModal: React.FC<{ style={{ marginBottom: 0 }} > @@ -2162,7 +2194,7 @@ const ConnectionModal: React.FC<{ label="默认连接数据库(可选)" help="留空会自动尝试 postgres、template1、与当前用户名同名数据库" > - + )} @@ -2173,7 +2205,7 @@ const ConnectionModal: React.FC<{ rules={[createUriAwareRequiredRule('请输入 Oracle 服务名(例如 ORCLPDB1)')]} help="请填写监听器注册的 SERVICE_NAME(不是用户名)。例如:ORCLPDB1" > - + )} @@ -2198,10 +2230,10 @@ const ConnectionModal: React.FC<{
- + - +
{renderStoredSecretControls({ @@ -2244,14 +2276,14 @@ const ConnectionModal: React.FC<{
- + - +
- + {renderStoredSecretControls({ fieldName: 'mongoReplicaPassword', @@ -2295,7 +2327,7 @@ const ConnectionModal: React.FC<{ )}
- + + - + {dbType === 'mongodb' && ( @@ -2449,10 +2481,10 @@ const ConnectionModal: React.FC<{ {dbType === 'dameng' && ( <> - + - + )} @@ -2475,7 +2507,7 @@ const ConnectionModal: React.FC<{
- + @@ -2483,16 +2515,16 @@ const ConnectionModal: React.FC<{
- + - +
- +