修改： app/components/settings.tsx

修改：     app/components/ui-lib.tsx
	修改：     app/constant.ts
	修改：     app/utils/encryption.ts

app/components/settings.tsx

@@ -997,6 +997,7 @@ export function Settings() {
               (access) => (access.awsAccessKey = e.currentTarget.value),
             );
           }}
+          maskWhenShow={true}
         />
       </ListItem>
       <ListItem
@@ -1013,6 +1014,7 @@ export function Settings() {
               (access) => (access.awsSecretKey = e.currentTarget.value),
             );
           }}
+          maskWhenShow={true}
         />
       </ListItem>
       <ListItem
@@ -1029,6 +1031,7 @@ export function Settings() {
               (access) => (access.awsSessionToken = e.currentTarget.value),
             );
           }}
+          maskWhenShow={true}
         />
       </ListItem>
     </>

app/components/ui-lib.tsx

@@ -11,6 +11,7 @@ import MaxIcon from "../icons/max.svg";
 import MinIcon from "../icons/min.svg";
 
 import Locale from "../locales";
+import { maskSensitiveValue } from "../utils/encryption";
 
 import { createRoot } from "react-dom/client";
 import React, {
@@ -266,13 +267,32 @@ export function Input(props: InputProps) {
 }
 
 export function PasswordInput(
-  props: HTMLProps<HTMLInputElement> & { aria?: string },
+  props: HTMLProps<HTMLInputElement> & {
+    aria?: string;
+    maskWhenShow?: boolean; // New prop to control masking behavior
+  },
 ) {
   const [visible, setVisible] = useState(false);
+  const [displayValue, setDisplayValue] = useState(props.value as string);
+
+  useEffect(() => {
+    if (props.maskWhenShow && visible && props.value) {
+      setDisplayValue(maskSensitiveValue(props.value as string));
+    } else {
+      setDisplayValue(props.value as string);
+    }
+  }, [visible, props.value, props.maskWhenShow]);
+
   function changeVisibility() {
     setVisible(!visible);
   }
 
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (props.onChange) {
+      props.onChange(e);
+    }
+  };
+
   return (
     <div className={"password-input-container"}>
       <IconButton
@@ -283,6 +303,8 @@ export function PasswordInput(
       />
       <input
         {...props}
+        value={displayValue}
+        onChange={handleChange}
         type={visible ? "text" : "password"}
         className={"password-input"}
       />
@@ -543,6 +565,7 @@ export function Selector<T>(props: {
     </div>
   );
 }
+
 export function FullScreen(props: any) {
   const { children, right = 10, top = 10, ...rest } = props;
   const ref = useRef<HTMLDivElement>();