feat: 大门v5封存翻转舱——编号模块默认一枚封存徽舱悬在湖面,轻点翻转900ms翻开才见输入格,翻开后半程自动聚焦(冰朔20260816谕:人主动点击模块转一下再输入编号)

This commit is contained in:
冰朔 2026-08-16 01:54:57 +08:00
commit d016182c14
2 changed files with 30 additions and 2 deletions

View file

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