feat: 大门v5封存翻转舱——编号模块默认一枚封存徽舱悬在湖面,轻点翻转900ms翻开才见输入格,翻开后半程自动聚焦(冰朔20260816谕:人主动点击模块转一下再输入编号)
This commit is contained in:
parent
33578f9fe1
commit
d016182c14
2 changed files with 30 additions and 2 deletions
|
|
@ -288,6 +288,14 @@ function HoloLakeApp() {
|
|||
const [gateRaw, setGateRaw] = useState('')
|
||||
const [gateInf, setGateInf] = useState(false)
|
||||
const gateNumber = formatGateNumber(gateRaw) + (gateInf ? '∞' : '')
|
||||
const [gateOpen, setGateOpen] = useState(false)
|
||||
const gateInputRef = useRef<HTMLInputElement>(null)
|
||||
// 封存舱点开翻转后半程再把光标送进输入格,免得翻到一半抢焦点
|
||||
useEffect(() => {
|
||||
if (!gateOpen || gateStage !== 'number') return
|
||||
const timer = window.setTimeout(() => gateInputRef.current?.focus(), 640)
|
||||
return () => window.clearTimeout(timer)
|
||||
}, [gateOpen, gateStage])
|
||||
const [gateBusy, setGateBusy] = useState(false)
|
||||
const [gateMessage, setGateMessage] = useState('')
|
||||
const [gateRising, setGateRising] = useState(false)
|
||||
|
|
@ -960,13 +968,20 @@ function HoloLakeApp() {
|
|||
<p>欢迎回来 · {gateNumber}</p>
|
||||
</section>
|
||||
) : gateStage === 'number' ? (
|
||||
<section className={`gate-pod${loginRising ? ' fade-out' : ''}`} role="dialog">
|
||||
<section className={`gate-pod gate-flip${gateOpen ? ' open' : ''}${loginRising ? ' fade-out' : ''}`} role={gateOpen ? 'dialog' : 'button'} tabIndex={gateOpen ? undefined : 0} aria-expanded={gateOpen} onClick={gateOpen ? undefined : () => setGateOpen(true)} onKeyDown={gateOpen ? undefined : (event) => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); setGateOpen(true) } }}>
|
||||
<div className="pod-face pod-sealed" aria-hidden={gateOpen}>
|
||||
<span className="gate-emblem sealed-emblem" aria-hidden="true"><i/></span>
|
||||
<b className="sealed-title">编号校验</b>
|
||||
<small className="sealed-sub">轻点翻启</small>
|
||||
</div>
|
||||
<div className="pod-face pod-form">
|
||||
<div className="gate-pod-row">
|
||||
<input id="gate-number" aria-label="编号" autoFocus maxLength={48} value={gateNumber} placeholder="如 ICE-GL∞" onChange={(event) => onGateInput(event.target.value)} onKeyDown={(event) => { if (event.key === 'Enter' && gateNumber) { event.preventDefault(); void gateVerifyNumber() } }}/>
|
||||
<input id="gate-number" ref={gateInputRef} aria-label="编号" maxLength={48} value={gateNumber} placeholder="如 ICE-GL∞" onChange={(event) => onGateInput(event.target.value)} onKeyDown={(event) => { if (event.key === 'Enter' && gateNumber) { event.preventDefault(); void gateVerifyNumber() } }}/>
|
||||
<button type="button" className={`gate-inf${gateInf ? ' on' : ''}`} title="编号里带无限符号就点一下点亮" aria-pressed={gateInf} onClick={() => setGateInf((v) => !v)}>∞</button>
|
||||
</div>
|
||||
<button className="gate-submit" disabled={gateBusy || !gateNumber} onClick={() => void gateVerifyNumber()}>{gateBusy ? '查验中…' : '提交'}</button>
|
||||
{gateMessage && <p className="gate-hint">{gateMessage}</p>}
|
||||
</div>
|
||||
</section>
|
||||
) : (
|
||||
<section className={`gate-pod gate-pod-key${loginRising ? ' fade-out' : ''}`} role="dialog">
|
||||
|
|
|
|||
Loading…
Reference in a new issue