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:
fawney19
2026-03-19 20:04:56 +08:00
parent a8620e133a
commit f573110725
6 changed files with 45 additions and 69 deletions

View File

@@ -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