From 9793fb2babe2c429f06a64e4e55e199285c133bc Mon Sep 17 00:00:00 2001
From: Kuingsmile <96409857+Kuingsmile@users.noreply.github.com>
Date: Mon, 12 Jan 2026 22:06:43 +0800
Subject: [PATCH] :sparkles: Feature(custom): hide sensitive keys by default,
 and add eye icon to switch

---
 src/renderer/pages/PicGoSetting.vue | 70 +++++++++++++++++++++++------
 1 file changed, 57 insertions(+), 13 deletions(-)

diff --git a/src/renderer/pages/PicGoSetting.vue b/src/renderer/pages/PicGoSetting.vue
index 8d1b9ee4..a89783b2 100644
--- a/src/renderer/pages/PicGoSetting.vue
+++ b/src/renderer/pages/PicGoSetting.vue
@@ -825,13 +825,18 @@
                   <small>{{ t('pages.settings.advanced.serverEncryptionKeyDesc') }}</small>
                 </div>
               </div>
-              <input
-                v-model.trim="formOfSetting.aesPassword"
-                type="text"
-                class="form-input"
-                :placeholder="t('pages.settings.advanced.serverEncryptionKey')"
-                @change="handleAesPasswordChange(formOfSetting.aesPassword)"
-              />
+              <div class="input-with-icon">
+                <input
+                  v-model.trim="formOfSetting.aesPassword"
+                  :type="apiKeyVisible ? 'text' : 'password'"
+                  class="form-input"
+                  :placeholder="t('pages.settings.advanced.serverEncryptionKey')"
+                  @change="handleAesPasswordChange(formOfSetting.aesPassword)"
+                />
+                <div class="icon-btn" @click="apiKeyVisible = !apiKeyVisible">
+                  <component :is="apiKeyVisible ? Eye : EyeOff" :size="16" />
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -1391,12 +1396,17 @@
                 <Keyboard :size="14" />
                 {{ t('pages.settings.advanced.serverKey') }}
               </label>
-              <input
-                v-model="formOfSetting.serverKey"
-                type="text"
-                class="form-input"
-                :placeholder="t('pages.settings.advanced.serverKeyPlaceholder')"
-              />
+              <div class="input-with-icon">
+                <input
+                  v-model="formOfSetting.serverKey"
+                  :type="serverKeyVisible ? 'text' : 'password'"
+                  class="form-input"
+                  :placeholder="t('pages.settings.advanced.serverKeyPlaceholder')"
+                />
+                <div class="icon-btn" @click="serverKeyVisible = !serverKeyVisible">
+                  <component :is="serverKeyVisible ? Eye : EyeOff" :size="16" />
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -1756,6 +1766,8 @@ import {
   CloudUpload,
   Download,
   Edit,
+  Eye,
+  EyeOff,
   FileText,
   FolderOpen,
   GitBranch,
@@ -1991,6 +2003,8 @@ const logFileVisible = ref(false)
 const customLinkVisible = ref(false)
 const checkUpdateVisible = ref(false)
 const serverVisible = ref(false)
+const serverKeyVisible = ref(false)
+const apiKeyVisible = ref(false)
 const webServerVisible = ref(false)
 const syncVisible = ref(false)
 const upDownConfigVisible = ref(false)
@@ -2481,3 +2495,33 @@ export default { name: 'SettingPage' }
 </script>
 
 <style scoped src="./css/PicgoSetting.css"></style>
+
+<style scoped>
+.input-with-icon {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.input-with-icon .form-input {
+  padding-right: 2.5rem;
+}
+
+.icon-btn {
+  position: absolute;
+  right: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-secondary);
+  transition: color 0.2s ease;
+}
+
+.icon-btn:hover {
+  color: var(--color-text-primary);
+}
+</style>