mirror of
https://github.com/fawney19/Aether.git
synced 2026-09-02 01:10:23 +08:00
fix(frontend): 用 CSS text-security 替代 password 输入框,简化配额进度条 UI
- Input 组件 masked 模式改用 WebkitTextSecurity: disc 替代 type=password, 避免浏览器密码管理器自动填充干扰 - LoginDialog/UserFormDialog/Settings/ProxyNodes 密码字段统一迁移到 masked 属性 - PoolManagement 配额进度条布局从 grid 改为 flex,移除未使用的 getQuotaProgressDisplayClass/getQuotaProgressTooltip 函数 Close #249 Co-authored-by: AAEE86 <ppk0227@hotmail.com>
This commit is contained in:
@@ -6,6 +6,7 @@
|
||||
<input
|
||||
ref="inputRef"
|
||||
:class="inputClass"
|
||||
:style="maskStyle"
|
||||
:value="modelValue"
|
||||
:type="effectiveType"
|
||||
:autocomplete="autocompleteAttr"
|
||||
@@ -41,6 +42,7 @@
|
||||
v-else
|
||||
ref="inputRef"
|
||||
:class="inputClass"
|
||||
:style="maskStyle"
|
||||
:value="modelValue"
|
||||
:type="effectiveType"
|
||||
:autocomplete="autocompleteAttr"
|
||||
@@ -79,7 +81,7 @@ interface Props {
|
||||
size?: 'default' | 'sm'
|
||||
/**
|
||||
* 遮蔽显示内容(用于 API Key 等敏感信息)
|
||||
* 隐藏态使用真正的 password 输入框,显示态切换为 text
|
||||
* 始终使用 text 输入框,隐藏态通过样式进行遮蔽
|
||||
* 同时会显示一个小眼睛按钮用于切换显示/隐藏
|
||||
*/
|
||||
masked?: boolean
|
||||
@@ -116,11 +118,20 @@ const shouldDisableAutofill = computed(() => {
|
||||
const effectiveType = computed(() => {
|
||||
const attrType = (attrs.type as string | undefined) ?? 'text'
|
||||
if (props.masked) {
|
||||
return isVisible.value ? 'text' : 'password'
|
||||
return 'text'
|
||||
}
|
||||
return attrType
|
||||
})
|
||||
|
||||
const maskStyle = computed(() => {
|
||||
if (!props.masked || isVisible.value) {
|
||||
return undefined
|
||||
}
|
||||
return {
|
||||
WebkitTextSecurity: 'disc'
|
||||
}
|
||||
})
|
||||
|
||||
// 过滤掉 type 和 class 属性,因为我们会单独处理
|
||||
const filteredAttrs = computed(() => {
|
||||
const { type: _type, class: _class, ...rest } = attrs
|
||||
|
||||
Reference in New Issue
Block a user