From a8b6c09920717246be460371e103dd02e56f1eac Mon Sep 17 00:00:00 2001
From: Xin Wang <your-email@example.com>
Date: Tue, 9 Jun 2026 12:53:03 +0800
Subject: [PATCH] Refactor API key handling in AssistantPage and
 ComponentsModelsPage

- Update AssistantPage to use a stored value mask for API keys, improving security and user experience.
- Modify ComponentsModelsPage to display the current API key contextually, enhancing clarity for users.
- Adjust related components to ensure consistent handling of API key visibility and management.
---
 .../src/components/pages/AssistantPage.tsx    | 28 +++++++++++++------
 .../components/pages/ComponentsModelsPage.tsx | 10 ++++++-
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/pages/AssistantPage.tsx b/frontend/src/components/pages/AssistantPage.tsx
index 3ae5572..21f278e 100644
--- a/frontend/src/components/pages/AssistantPage.tsx
+++ b/frontend/src/components/pages/AssistantPage.tsx
@@ -584,9 +584,10 @@ export function AssistantPage() {
     type: typeToLabel[a.type],
     updatedAt: formatTimestamp(a.updatedAt),
   }));
-  const hasStoredApiKey = Boolean(
-    editingId && assistants.find((assistant) => assistant.id === editingId)?.apiKey,
-  );
+  const storedApiKeyMask =
+    (editingId &&
+      assistants.find((assistant) => assistant.id === editingId)?.apiKey) ||
+    "";
 
   const filteredAssistants = listItems.filter((assistant) => {
     if (typeFilter !== "全部" && assistant.type !== typeFilter) {
@@ -1135,7 +1136,7 @@ export function AssistantPage() {
                 value={difyForm.apiKey}
                 onChange={(value) => updateDifyForm("apiKey", value)}
                 placeholder="请输入 Dify API Key"
-                hasStoredValue={hasStoredApiKey}
+                storedValueMask={storedApiKeyMask}
               />
             </SectionCard>
 
@@ -1239,7 +1240,7 @@ export function AssistantPage() {
                 value={fastGptForm.apiKey}
                 onChange={(value) => updateFastGptForm("apiKey", value)}
                 placeholder="请输入 FastGPT API Key"
-                hasStoredValue={hasStoredApiKey}
+                storedValueMask={storedApiKeyMask}
               />
             </SectionCard>
 
@@ -1324,7 +1325,7 @@ export function AssistantPage() {
                 value={openCodeForm.apiKey}
                 onChange={(value) => updateOpenCodeForm("apiKey", value)}
                 placeholder="请输入 OpenCode API Key"
-                hasStoredValue={false}
+                storedValueMask=""
               />
             </SectionCard>
 
@@ -1908,22 +1909,31 @@ function SecretInputField({
   label,
   value,
   placeholder,
-  hasStoredValue,
+  storedValueMask,
   onChange,
 }: {
   label?: string;
   value: string;
   placeholder?: string;
-  hasStoredValue: boolean;
+  storedValueMask: string;
   onChange: (value: string) => void;
 }) {
   const [showValue, setShowValue] = useState(false);
+  const hasStoredValue = Boolean(storedValueMask);
 
   return (
     <label className="block">
       {label && (
         <div className="mb-2 text-sm font-medium text-foreground">{label}</div>
       )}
+      {hasStoredValue && (
+        <div className="mb-2 flex items-center gap-2 text-xs text-muted-foreground">
+          <span>当前密钥</span>
+          <code className="rounded-md bg-surface-strong px-2 py-1 font-mono text-foreground">
+            {storedValueMask}
+          </code>
+        </div>
+      )}
       <div className="relative">
         <Input
           value={value}
@@ -1951,7 +1961,7 @@ function SecretInputField({
       </div>
       {hasStoredValue && (
         <p className="mt-2 text-xs leading-5 text-muted-foreground">
-          已有密钥不会返回浏览器。留空可保持原密钥，输入新值将覆盖原密钥。
+          仅显示当前密钥首尾用于识别。留空可保持原密钥，输入新值将覆盖原密钥。
         </p>
       )}
     </label>
diff --git a/frontend/src/components/pages/ComponentsModelsPage.tsx b/frontend/src/components/pages/ComponentsModelsPage.tsx
index 4ca1480..9deda1d 100644
--- a/frontend/src/components/pages/ComponentsModelsPage.tsx
+++ b/frontend/src/components/pages/ComponentsModelsPage.tsx
@@ -696,6 +696,14 @@ export function ComponentsModelsPage() {
               >
                 API Key
               </FieldLabel>
+              {hasStoredApiKey && (
+                <div className="mb-2 flex items-center gap-2 text-xs text-muted-foreground">
+                  <span>当前密钥</span>
+                  <code className="rounded-md bg-surface-strong px-2 py-1 font-mono text-foreground">
+                    {editingModel?.apiKey}
+                  </code>
+                </div>
+              )}
               <div className="relative">
                 <Input
                   id="model-api-key"
@@ -722,7 +730,7 @@ export function ComponentsModelsPage() {
               </div>
               {hasStoredApiKey && (
                 <p className="mt-2 text-xs leading-5 text-muted-foreground">
-                  已有密钥不会返回浏览器。留空可保持原密钥，输入新值将覆盖原密钥。
+                  仅显示当前密钥首尾用于识别。留空可保持原密钥，输入新值将覆盖原密钥。
                 </p>
               )}
             </div>