From d016182c140ddc4f9d4ede75105277ba30506ec5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=86=B0=E6=9C=94?= <565183519@qq.com> Date: Sun, 16 Aug 2026 01:54:57 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A4=A7=E9=97=A8v5=E5=B0=81=E5=AD=98?= =?UTF-8?q?=E7=BF=BB=E8=BD=AC=E8=88=B1=E2=80=94=E2=80=94=E7=BC=96=E5=8F=B7?= =?UTF-8?q?=E6=A8=A1=E5=9D=97=E9=BB=98=E8=AE=A4=E4=B8=80=E6=9E=9A=E5=B0=81?= =?UTF-8?q?=E5=AD=98=E5=BE=BD=E8=88=B1=E6=82=AC=E5=9C=A8=E6=B9=96=E9=9D=A2?= =?UTF-8?q?=EF=BC=8C=E8=BD=BB=E7=82=B9=E7=BF=BB=E8=BD=AC900ms=E7=BF=BB?= =?UTF-8?q?=E5=BC=80=E6=89=8D=E8=A7=81=E8=BE=93=E5=85=A5=E6=A0=BC=EF=BC=8C?= =?UTF-8?q?=E7=BF=BB=E5=BC=80=E5=90=8E=E5=8D=8A=E7=A8=8B=E8=87=AA=E5=8A=A8?= =?UTF-8?q?=E8=81=9A=E7=84=A6=EF=BC=88=E5=86=B0=E6=9C=9420260816=E8=B0=95?= =?UTF-8?q?=EF=BC=9A=E4=BA=BA=E4=B8=BB=E5=8A=A8=E7=82=B9=E5=87=BB=E6=A8=A1?= =?UTF-8?q?=E5=9D=97=E8=BD=AC=E4=B8=80=E4=B8=8B=E5=86=8D=E8=BE=93=E5=85=A5?= =?UTF-8?q?=E7=BC=96=E5=8F=B7=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../hololake-native-desktop/src/main.tsx | 19 +++++++++++++++++-- .../hololake-native-desktop/src/styles.css | 13 +++++++++++++ 2 files changed, 30 insertions(+), 2 deletions(-) diff --git a/product-source/hololake-native-desktop/src/main.tsx b/product-source/hololake-native-desktop/src/main.tsx index 37ca8a6f1..8996d2685 100644 --- a/product-source/hololake-native-desktop/src/main.tsx +++ b/product-source/hololake-native-desktop/src/main.tsx @@ -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(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() {

欢迎回来 · {gateNumber}

) : gateStage === 'number' ? ( -
+
setGateOpen(true)} onKeyDown={gateOpen ? undefined : (event) => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); setGateOpen(true) } }}> +
+ + 编号校验 + 轻点翻启 +
+
- onGateInput(event.target.value)} onKeyDown={(event) => { if (event.key === 'Enter' && gateNumber) { event.preventDefault(); void gateVerifyNumber() } }}/> + onGateInput(event.target.value)} onKeyDown={(event) => { if (event.key === 'Enter' && gateNumber) { event.preventDefault(); void gateVerifyNumber() } }}/>
{gateMessage &&

{gateMessage}

} +
) : (
diff --git a/product-source/hololake-native-desktop/src/styles.css b/product-source/hololake-native-desktop/src/styles.css index 4f1757c7f..bbf55f0f2 100644 --- a/product-source/hololake-native-desktop/src/styles.css +++ b/product-source/hololake-native-desktop/src/styles.css @@ -455,6 +455,19 @@ svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-lineca .gate-pod { position: relative; z-index: 3; width: min(400px, 88vw); padding: 26px 30px 28px; text-align: center; border: 1px solid color-mix(in srgb, var(--accent-light) 22%, transparent); border-radius: 24px; background: color-mix(in srgb, var(--panel-bg) 62%, transparent); backdrop-filter: blur(26px) saturate(1.15); box-shadow: 0 34px 90px rgba(0, 0, 0, .5), 0 0 70px color-mix(in srgb, var(--primitive-warm-glow) 9%, transparent), inset 0 1px 0 rgba(255, 255, 255, .07); animation: pod-float 6.5s ease-in-out infinite; transition: opacity .7s ease, transform .7s ease; } .gate-pod.fade-out { opacity: 0; transform: translateY(18px) scale(.985); } @keyframes pod-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } } + +/* 封存翻转舱：湖面上一枚封存徽舱，轻点一下翻转翻开表单面 */ +.gate-flip { display: grid; transform-style: preserve-3d; transition: transform .95s cubic-bezier(.32, .72, .3, 1); cursor: pointer; } +.gate-flip.open { transform: rotateY(180deg); cursor: default; } +.pod-face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; } +.pod-form { transform: rotateY(180deg); } +.pod-sealed { display: grid; justify-items: center; align-content: center; gap: 11px; padding: 20px 6px 14px; } +.sealed-emblem { width: 86px; height: 86px; margin-bottom: 4px; } +.sealed-emblem::before { box-shadow: 0 0 30px color-mix(in srgb, var(--primitive-warm-glow) 16%, transparent); } +.sealed-title { color: var(--content-primary); font-size: 16px; font-weight: 600; letter-spacing: .44em; text-indent: .44em; } +.sealed-sub { color: var(--content-faint); font-size: 11px; letter-spacing: .32em; text-indent: .32em; } +.gate-flip:not(.open):hover .sealed-emblem::before { border-color: color-mix(in srgb, var(--primitive-warm-glow) 46%, transparent); box-shadow: 0 0 40px color-mix(in srgb, var(--primitive-warm-glow) 32%, transparent); } +.gate-flip:not(.open):hover .sealed-sub { color: var(--content-muted); } .gate-hero { position: relative; z-index: 2; display: grid; justify-items: center; gap: 10px; text-align: center; padding: 0 24px; transition: opacity 1.1s ease, transform 1.1s ease, filter 1.1s ease; } .gate-hero.veil { opacity: 0; transform: translateY(-14px) scale(1.03); filter: blur(4px); pointer-events: none; } .gate-hero > * { animation: hero-in 1.1s ease both; }