From 195579c5b7af0f3a1d8c56f208c53091eddb4203 Mon Sep 17 00:00:00 2001
From: Xin Wang <your-email@example.com>
Date: Thu, 9 Jul 2026 17:32:41 +0800
Subject: [PATCH] Refactor DynamicField component to simplify password input
 handling

- Remove the showPassword state and associated logic for toggling password visibility.
- Streamline the password input to always use type "password" and directly handle value changes.
- Update placeholder text for clarity while maintaining existing functionality for stored values.
---
 .../components/pages/ComponentsModelsPage.tsx | 35 ++++---------------
 1 file changed, 7 insertions(+), 28 deletions(-)

diff --git a/frontend/src/components/pages/ComponentsModelsPage.tsx b/frontend/src/components/pages/ComponentsModelsPage.tsx
index 2db73ac..4c5c3a9 100644
--- a/frontend/src/components/pages/ComponentsModelsPage.tsx
+++ b/frontend/src/components/pages/ComponentsModelsPage.tsx
@@ -6,7 +6,6 @@ import {
   ChevronUp,
   Copy,
   Eye,
-  EyeOff,
   Loader2,
   MoreHorizontal,
   Pencil,
@@ -933,8 +932,6 @@ function DynamicField({
   storedValueMask?: string;
   onChange: (value: unknown) => void;
 }) {
-  const [showPassword, setShowPassword] = useState(false);
-
   if (field.type === "boolean") {
     return (
       <div className="flex items-center justify-between rounded-xl border border-hairline p-4">
@@ -984,31 +981,13 @@ function DynamicField({
             </code>
           </div>
         )}
-        <div className="relative">
-          <Input
-            type={showPassword ? "text" : "password"}
-            value={inputValue}
-            onChange={(event) => {
-              const nextValue = event.target.value;
-              if (!nextValue) setShowPassword(false);
-              onChange(nextValue);
-            }}
-            placeholder={
-              hasStoredValue ? "已配置，留空则保持不变" : undefined
-            }
-            autoComplete="new-password"
-            className="pr-10"
-          />
-          <button
-            type="button"
-            disabled={!inputValue}
-            onClick={() => setShowPassword((current) => !current)}
-            className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-soft transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-40"
-            aria-label={showPassword ? "隐藏密钥" : "显示密钥"}
-          >
-            {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
-          </button>
-        </div>
+        <Input
+          type="password"
+          value={inputValue}
+          onChange={(event) => onChange(event.target.value)}
+          placeholder={hasStoredValue ? "已配置，留空则保持不变" : undefined}
+          autoComplete="new-password"
+        />
         {hasStoredValue && (
           <p className="text-xs leading-5 text-muted-foreground">
             仅显示当前密钥首尾用于识别。留空可保持原密钥，输入新值将覆盖原密钥。