From fa7e7a162f2258af90e36cafa129a1246e7d7a4c Mon Sep 17 00:00:00 2001
From: yyhhyyyyyy <yyhhyyyyyy8@gmail.com>
Date: Sun, 17 Aug 2025 22:10:12 +0800
Subject: [PATCH] feat: add password visibility toggle for API key inputs

---
 .../AnthropicProviderSettingsDetail.vue       | 31 ++++++++++++-----
 .../settings/OllamaProviderSettingsDetail.vue | 31 ++++++++++++-----
 .../components/settings/ProviderApiConfig.vue | 33 ++++++++++++++-----
 src/renderer/src/views/WelcomeView.vue        | 27 +++++++++++----
 4 files changed, 91 insertions(+), 31 deletions(-)

diff --git a/src/renderer/src/components/settings/AnthropicProviderSettingsDetail.vue b/src/renderer/src/components/settings/AnthropicProviderSettingsDetail.vue
index bdf60f38f..304a596ba 100644
--- a/src/renderer/src/components/settings/AnthropicProviderSettingsDetail.vue
+++ b/src/renderer/src/components/settings/AnthropicProviderSettingsDetail.vue
@@ -53,14 +53,28 @@
         <Label :for="`${provider.id}-apikey`" class="flex-1 cursor-pointer">{{
           t('settings.provider.apiKeyLabel')
         }}</Label>
-        <Input
-          :id="`${provider.id}-apikey`"
-          v-model="apiKey"
-          type="password"
-          :placeholder="t('settings.provider.keyPlaceholder')"
-          @blur="handleApiKeyChange(String($event.target.value))"
-          @keyup.enter="handleApiKeyEnter(apiKey)"
-        />
+        <div class="relative w-full">
+          <Input
+            :id="`${provider.id}-apikey`"
+            v-model="apiKey"
+            :type="showApiKey ? 'text' : 'password'"
+            :placeholder="t('settings.provider.keyPlaceholder')"
+            style="padding-right: 2.5rem !important"
+            @blur="handleApiKeyChange(String($event.target.value))"
+            @keyup.enter="handleApiKeyEnter(apiKey)"
+          />
+          <Button
+            variant="ghost"
+            size="sm"
+            class="absolute right-2 top-1/2 transform -translate-y-1/2 h-7 w-7 p-0 hover:bg-transparent"
+            @click="showApiKey = !showApiKey"
+          >
+            <Icon
+              :icon="showApiKey ? 'lucide:eye-off' : 'lucide:eye'"
+              class="w-4 h-4 text-muted-foreground hover:text-foreground"
+            />
+          </Button>
+        </div>
         <div class="flex flex-row gap-2">
           <Button
             variant="outline"
@@ -357,6 +371,7 @@ const oauthPresenter = usePresenter('oauthPresenter')
 const authMethod = ref<'apikey' | 'oauth'>('apikey')
 const apiHost = ref(props.provider.baseUrl || '')
 const apiKey = ref(props.provider.apiKey || '')
+const showApiKey = ref(false)
 const showCheckModelDialog = ref(false)
 const showModelListDialog = ref(false)
 const checkResult = ref<boolean>(false)
diff --git a/src/renderer/src/components/settings/OllamaProviderSettingsDetail.vue b/src/renderer/src/components/settings/OllamaProviderSettingsDetail.vue
index f5c51f2cf..bdcb18078 100644
--- a/src/renderer/src/components/settings/OllamaProviderSettingsDetail.vue
+++ b/src/renderer/src/components/settings/OllamaProviderSettingsDetail.vue
@@ -23,14 +23,28 @@
 
       <div class="flex flex-col items-start p-2 gap-2">
         <Label :for="`${provider.id}-apikey`" class="flex-1 cursor-pointer">API Key</Label>
-        <Input
-          :id="`${provider.id}-apikey`"
-          v-model="apiKey"
-          type="password"
-          :placeholder="t('settings.provider.keyPlaceholder')"
-          @blur="handleApiKeyChange(String($event.target.value))"
-          @keyup.enter="handleApiKeyEnter(apiKey)"
-        />
+        <div class="relative w-full">
+          <Input
+            :id="`${provider.id}-apikey`"
+            v-model="apiKey"
+            :type="showApiKey ? 'text' : 'password'"
+            :placeholder="t('settings.provider.keyPlaceholder')"
+            style="padding-right: 2.5rem !important"
+            @blur="handleApiKeyChange(String($event.target.value))"
+            @keyup.enter="handleApiKeyEnter(apiKey)"
+          />
+          <Button
+            variant="ghost"
+            size="sm"
+            class="absolute right-2 top-1/2 transform -translate-y-1/2 h-7 w-7 p-0 hover:bg-transparent"
+            @click="showApiKey = !showApiKey"
+          >
+            <Icon
+              :icon="showApiKey ? 'lucide:eye-off' : 'lucide:eye'"
+              class="w-4 h-4 text-muted-foreground hover:text-foreground"
+            />
+          </Button>
+        </div>
         <div class="flex flex-row gap-2">
           <Button
             variant="outline"
@@ -281,6 +295,7 @@ const settingsStore = useSettingsStore()
 const modelCheckStore = useModelCheckStore()
 const apiHost = ref(props.provider.baseUrl || '')
 const apiKey = ref(props.provider.apiKey || '')
+const showApiKey = ref(false)
 const showPullModelDialog = ref(false)
 const showDeleteModelDialog = ref(false)
 const modelToDelete = ref('')
diff --git a/src/renderer/src/components/settings/ProviderApiConfig.vue b/src/renderer/src/components/settings/ProviderApiConfig.vue
index 839932735..67f46dc54 100644
--- a/src/renderer/src/components/settings/ProviderApiConfig.vue
+++ b/src/renderer/src/components/settings/ProviderApiConfig.vue
@@ -42,15 +42,29 @@
     <!-- API Key 配置 (GitHub Copilot 时隐藏手动输入) -->
     <div v-if="provider.id !== 'github-copilot'" class="flex flex-col items-start gap-2">
       <Label :for="`${provider.id}-apikey`" class="flex-1 cursor-pointer">API Key</Label>
-      <Input
-        :id="`${provider.id}-apikey`"
-        :model-value="apiKey"
-        type="password"
-        :placeholder="t('settings.provider.keyPlaceholder')"
-        @blur="handleApiKeyChange($event.target.value)"
-        @keyup.enter="$emit('validate-key', apiKey)"
-        @update:model-value="apiKey = String($event)"
-      />
+      <div class="relative w-full">
+        <Input
+          :id="`${provider.id}-apikey`"
+          :model-value="apiKey"
+          :type="showApiKey ? 'text' : 'password'"
+          :placeholder="t('settings.provider.keyPlaceholder')"
+          style="padding-right: 2.5rem !important"
+          @blur="handleApiKeyChange($event.target.value)"
+          @keyup.enter="$emit('validate-key', apiKey)"
+          @update:model-value="apiKey = String($event)"
+        />
+        <Button
+          variant="ghost"
+          size="sm"
+          class="absolute right-2 top-1/2 transform -translate-y-1/2 h-7 w-7 p-0 hover:bg-transparent"
+          @click="showApiKey = !showApiKey"
+        >
+          <Icon
+            :icon="showApiKey ? 'lucide:eye-off' : 'lucide:eye'"
+            class="w-4 h-4 text-muted-foreground hover:text-foreground"
+          />
+        </Button>
+      </div>
       <div class="flex flex-row gap-2">
         <Button
           variant="outline"
@@ -153,6 +167,7 @@ const apiKey = ref(props.provider.apiKey || '')
 const apiHost = ref(props.provider.baseUrl || '')
 const keyStatus = ref<KeyStatus | null>(null)
 const isRefreshing = ref(false)
+const showApiKey = ref(false)
 
 watch(
   () => props.provider,
diff --git a/src/renderer/src/views/WelcomeView.vue b/src/renderer/src/views/WelcomeView.vue
index a790242ba..4732832a7 100644
--- a/src/renderer/src/views/WelcomeView.vue
+++ b/src/renderer/src/views/WelcomeView.vue
@@ -112,6 +112,7 @@ const currentStep = ref(0)
 const selectedProvider = ref<string>('openai')
 const apiKey = ref('')
 const baseUrl = ref('')
+const showApiKey = ref(false)
 
 const providerModels = computed(() => {
   return (
@@ -293,12 +294,26 @@ const isFirstStep = computed(() => currentStep.value === 0)
 
                 <div v-show="selectedProvider !== 'ollama'" class="flex flex-col gap-2">
                   <Label for="api-key">{{ t('welcome.provider.apiKey') }}</Label>
-                  <Input
-                    id="api-key"
-                    v-model="apiKey"
-                    type="password"
-                    placeholder="Enter API Key"
-                  />
+                  <div class="relative w-full">
+                    <Input
+                      id="api-key"
+                      v-model="apiKey"
+                      :type="showApiKey ? 'text' : 'password'"
+                      placeholder="Enter API Key"
+                      style="padding-right: 2.5rem !important"
+                    />
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      class="absolute right-2 top-1/2 transform -translate-y-1/2 h-7 w-7 p-0 hover:bg-transparent"
+                      @click="showApiKey = !showApiKey"
+                    >
+                      <Icon
+                        :icon="showApiKey ? 'lucide:eye-off' : 'lucide:eye'"
+                        class="w-4 h-4 text-muted-foreground hover:text-foreground"
+                      />
+                    </Button>
+                  </div>
                   <div class="text-xs text-muted-foreground">
                     {{ t('settings.provider.getKeyTip') }}
                     <a