修改： 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>();

app/constant.ts

@@ -121,8 +121,8 @@ export enum ServiceProvider {
   Stability = "Stability",
   Iflytek = "Iflytek",
   XAI = "XAI",
-  Bedrock = "Bedrock",
   ChatGLM = "ChatGLM",
+  Bedrock = "Bedrock",
 }
 
 // Google API safety settings, see https://ai.google.dev/gemini-api/docs/safety-settings
@@ -136,7 +136,6 @@ export enum GoogleSafetySettingsThreshold {
 
 export enum ModelProvider {
   Stability = "Stability",
-  Bedrock = "Bedrock",
   GPT = "GPT",
   GeminiPro = "GeminiPro",
   Claude = "Claude",
@@ -148,6 +147,7 @@ export enum ModelProvider {
   Iflytek = "Iflytek",
   XAI = "XAI",
   ChatGLM = "ChatGLM",
+  Bedrock = "Bedrock",
 }
 
 export const Stability = {

app/utils/encryption.ts

@@ -8,6 +8,7 @@ if (!SECRET_KEY || SECRET_KEY.length < 32) {
     "ENCRYPTION_KEY environment variable must be set with at least 32 characters",
   );
 }
+
 export function encrypt(data: string): string {
   try {
     return AES.encrypt(data, SECRET_KEY).toString();
@@ -26,3 +27,9 @@ export function decrypt(encryptedData: string): string {
     return encryptedData; // Fallback to the original data if decryption fails
   }
 }
+
+export function maskSensitiveValue(value: string): string {
+  if (!value) return "";
+  if (value.length <= 4) return value;
+  return "*".repeat(value.length - 4) + value.slice(-4);
+}