GithubBackup/PicList
1
0
Fork 0
mirror of https://github.com/Kuingsmile/PicList.git synced 2026-05-06 20:42:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

✨ Feature(custom): hide sensitive keys by default, and add eye icon to switch

Browse Source
This commit is contained in:
Kuingsmile
2026-01-12 22:06:43 +08:00
parent b5fc950c4a
commit 9793fb2bab
1 changed files with 57 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/renderer/pages/PicGoSetting.vue
View File

@@ -825,13 +825,18 @@
<small>{{ t('pages.settings.advanced.serverEncryptionKeyDesc') }}</small> <small>{{ t('pages.settings.advanced.serverEncryptionKeyDesc') }}</small>
</div> </div>
</div> </div>
<input <div class="input-with-icon">
v-model.trim="formOfSetting.aesPassword" <input
type="text" v-model.trim="formOfSetting.aesPassword"
class="form-input" :type="apiKeyVisible ? 'text' : 'password'"
:placeholder="t('pages.settings.advanced.serverEncryptionKey')" class="form-input"
@change="handleAesPasswordChange(formOfSetting.aesPassword)" :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> </div>
</div> </div>
@@ -1391,12 +1396,17 @@
<Keyboard :size="14" /> <Keyboard :size="14" />
{{ t('pages.settings.advanced.serverKey') }} {{ t('pages.settings.advanced.serverKey') }}
</label> </label>
<input <div class="input-with-icon">
v-model="formOfSetting.serverKey" <input
type="text" v-model="formOfSetting.serverKey"
class="form-input" :type="serverKeyVisible ? 'text' : 'password'"
:placeholder="t('pages.settings.advanced.serverKeyPlaceholder')" 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> </div>
</div> </div>
@@ -1756,6 +1766,8 @@ import {
CloudUpload, CloudUpload,
Download, Download,
Edit, Edit,
Eye,
EyeOff,
FileText, FileText,
FolderOpen, FolderOpen,
GitBranch, GitBranch,
@@ -1991,6 +2003,8 @@ const logFileVisible = ref(false)
const customLinkVisible = ref(false) const customLinkVisible = ref(false)
const checkUpdateVisible = ref(false) const checkUpdateVisible = ref(false)
const serverVisible = ref(false) const serverVisible = ref(false)
const serverKeyVisible = ref(false)
const apiKeyVisible = ref(false)
const webServerVisible = ref(false) const webServerVisible = ref(false)
const syncVisible = ref(false) const syncVisible = ref(false)
const upDownConfigVisible = ref(false) const upDownConfigVisible = ref(false)
@@ -2481,3 +2495,33 @@ export default { name: 'SettingPage' }
</script> </script>
<style scoped src="./css/PicgoSetting.css"></style> <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>