refactor(admin): 接入 PasswordInput,删除分类改用 Modal 确认

- 登录弹窗与系统改密统一用 @stash/ui 的 PasswordInput(改密页补上显隐切换)
- 删除分类不再用 window.confirm,改用 Modal + 危险按钮(组件库推荐的组合)
- 删除页面私有的 PasswordInput 组件与 .password-field 样式
This commit is contained in:
2026-10-29 20:46:11 +08:00
parent 5de1382262
commit fe9d1b2659
4 changed files with 61 additions and 77 deletions
+11 -6
View File
@@ -1,7 +1,6 @@
import { Button, FormField, Icon, Modal, Notice, Space, Text } from '@stash/ui'
import { Button, FormField, Icon, Modal, Notice, PasswordInput, Space, Text } from '@stash/ui'
import { useEffect, useState } from 'react'
import { login, setup, type SessionState } from '../../auth'
import { PasswordInput } from './PasswordInput'
/**
* 登录弹窗:首次使用显示「设置密码 + 确认」,之后只显示密码。
@@ -88,10 +87,13 @@ export function LoginDialog({ open, hasAdmin, onClose, onSuccess }: LoginDialogP
<PasswordInput
id="login-password"
placeholder="输入密码"
autoComplete={isSetup ? 'new-password' : 'current-password'}
value={password}
autoFocus
onChange={setPassword}
onEnter={() => void submit()}
onChange={(event) => setPassword(event.target.value)}
onKeyDown={(event) => {
if (event.key === 'Enter') void submit()
}}
/>
</FormField>
@@ -100,9 +102,12 @@ export function LoginDialog({ open, hasAdmin, onClose, onSuccess }: LoginDialogP
<PasswordInput
id="login-confirm"
placeholder="再输入一次"
autoComplete="new-password"
value={confirm}
onChange={setConfirm}
onEnter={() => void submit()}
onChange={(event) => setConfirm(event.target.value)}
onKeyDown={(event) => {
if (event.key === 'Enter') void submit()
}}
/>
</FormField>
)}
@@ -1,48 +0,0 @@
import { Icon, IconButton, Input } from '@stash/ui'
import { useState } from 'react'
/**
* 语言无关的密码可见切换:右侧一个眼睛按钮,切换 input type。
* 错误提示后再点仍然有效(状态在组件里,不会被错误重置)。
*/
type PasswordInputProps = {
id: string
value: string
placeholder?: string
autoFocus?: boolean
onChange: (value: string) => void
onEnter?: () => void
}
export function PasswordInput({
id,
value,
placeholder,
autoFocus = false,
onChange,
onEnter,
}: PasswordInputProps) {
const [visible, setVisible] = useState(false)
return (
<div className="password-field">
<Input
id={id}
type={visible ? 'text' : 'password'}
icon="lock_line"
placeholder={placeholder}
value={value}
autoFocus={autoFocus}
onChange={(event) => onChange(event.target.value)}
onKeyDown={(event) => {
if (event.key === 'Enter') onEnter?.()
}}
/>
<IconButton
label={visible ? '隐藏密码' : '显示密码'}
icon={<Icon name={visible ? 'eye_close_line' : 'eye_line'} />}
onClick={() => setVisible((current) => !current)}
/>
</div>
)
}