xiaoqu/dsh-worktable
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix(console): 视频交接拉长(最长2.0s)且备轨就绪后才开始淡入(防白闪)；白色主题网格适配——纯色隐藏网格线、流光反灰(灰色var)、深色不变

Browse Source
This commit is contained in:
Aisland
2026-09-02 00:32:26 +08:00
parent dc9c6a86ec
commit cfa86abfca
3 changed files with 40 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
01_content/src/client/split.tsx
+14 -8
View File
@@ -1376,16 +1376,22 @@ function ConsoleVideo(props: { src: string; style?: CSSProperties }) {
if (m && s && !m.paused && m.readyState >= 2 && !firedRef.current) {
const d = m.duration
if (Number.isFinite(d) && d > 0) {
const fade = Math.min(1.2, d * 0.15)
const fade = Math.min(2.0, Math.max(1.2, d * 0.18))
if (m.currentTime >= Math.max(0, d - fade)) {
firedRef.current = true
try {
try { m.getAnimations().forEach((an) => an.cancel()) } catch {}
try { s.getAnimations().forEach((an) => an.cancel()) } catch {}
s.currentTime = 0
s.play().catch(() => {})
s.animate([{ opacity: 0 }, { opacity: 1 }], { duration: fade * 1000, easing: 'linear', fill: 'forwards' })
m.animate([{ opacity: 1 }, { opacity: 0 }], { duration: fade * 1000, easing: 'linear', fill: 'forwards' })
try { s.currentTime = 0 } catch {}
const startFade = () => {
try {
try { m.getAnimations().forEach((an) => an.cancel()) } catch {}
try { s.getAnimations().forEach((an) => an.cancel()) } catch {}
s.play().catch(() => {})
s.animate([{ opacity: 0 }, { opacity: 1 }], { duration: fade * 1000, easing: 'linear', fill: 'forwards' })
m.animate([{ opacity: 1 }, { opacity: 0 }], { duration: fade * 1000, easing: 'linear', fill: 'forwards' })
} catch {}
}
if (s.readyState >= 2) startFade()
else s.addEventListener('canplay', startFade, { once: true })
} catch {}
}
}
@@ -1741,7 +1747,7 @@ function ConsolePane() {
{ mode: 'system', key: 'console.themeSystem' },
]
return (
<div className="dsh-wt_console" data-wt-theme={resolvedTheme} data-wt-shape={shape} data-wt-bg={bg} data-wt-grid={bg === 'photo' && !photoGrid ? 'off' : 'on'} style={{ ...(bg === 'plain' ? { ['--wt-bg' as any]: 'hsl(' + plainHsl.h + ', ' + plainHsl.s + '%, ' + plainHsl.l + '%)', ['--wt-gridPlain' as any]: 'rgba(255,255,255,' + (plainGrid / 100) + ')' } : {}), ...(bg === 'glow' ? { ['--wt-gridGlow' as any]: 'rgba(255,255,255,' + (glowGrid / 100) + ')' } : {}), ...(bg === 'photo' ? { ['--wt-gridPhoto' as any]: 'rgba(255,255,255,' + (gridOpacity / 100) + ')' } : {}), ['--wt-cardBlur' as any]: (bg === 'plain' ? plainBlur : bg === 'glow' ? glowBlur : cardBlur) + 'px' }}>
<div className="dsh-wt_console" data-wt-theme={resolvedTheme} data-wt-shape={shape} data-wt-bg={bg} data-wt-grid={bg === 'photo' && !photoGrid ? 'off' : 'on'} style={{ ...(bg === 'plain' ? { ['--wt-bg' as any]: 'hsl(' + plainHsl.h + ', ' + plainHsl.s + '%, ' + plainHsl.l + '%)', ['--wt-gridPlain' as any]: 'rgba(255,255,255,' + (plainGrid / 100) + ')' } : {}), ...(bg === 'glow' ? { ['--wt-gridGlow' as any]: 'rgba(255,255,255,' + (glowGrid / 100) + ')', ['--wt-gridGlowLight' as any]: 'rgba(27,31,36,' + (glowGrid / 100) + ')' } : {}), ...(bg === 'photo' ? { ['--wt-gridPhoto' as any]: 'rgba(255,255,255,' + (gridOpacity / 100) + ')' } : {}), ['--wt-cardBlur' as any]: (bg === 'plain' ? plainBlur : bg === 'glow' ? glowBlur : cardBlur) + 'px' }}>
<span className="dsh-wt_consoleBg" aria-hidden style={bg === 'glow' && (glowHsl.h !== 0 || glowHsl.s !== 100 || glowHsl.l !== 100) ? { filter: 'hue-rotate(' + glowHsl.h + 'deg) saturate(' + glowHsl.s + '%) brightness(' + glowHsl.l + '%)' } : undefined}>
{bg === 'photo' && (bgVideo
? <ConsoleVideo src={bgVideo} style={photoHsl.h !== 0 || photoHsl.s !== 100 || photoHsl.l !== 100 ? { filter: 'hue-rotate(' + photoHsl.h + 'deg) saturate(' + photoHsl.s + '%) brightness(' + photoHsl.l + '%)' } : undefined} />
01_content/src/client/styles.ts
+2
View File
@@ -479,6 +479,8 @@ export const css = xtermCss + '\n' + [
'.dsh-wt_console[data-wt-bg=plain][data-wt-grid=on] .dsh-wt_consoleBg::after{background-image:linear-gradient(var(--wt-gridPlain,rgba(255,255,255,.045)) 1px,transparent 1px),linear-gradient(90deg,var(--wt-gridPlain,rgba(255,255,255,.045)) 1px,transparent 1px);background-size:30px 30px}',
'.dsh-wt_console[data-wt-bg=glow][data-wt-grid=on] .dsh-wt_consoleBg::after{background-image:linear-gradient(var(--wt-gridGlow,rgba(255,255,255,.045)) 1px,transparent 1px),linear-gradient(90deg,var(--wt-gridGlow,rgba(255,255,255,.045)) 1px,transparent 1px);background-size:30px 30px}',
'.dsh-wt_console[data-wt-bg=photo][data-wt-grid=on] .dsh-wt_consoleBg::after{background-image:linear-gradient(var(--wt-gridPhoto,rgba(255,255,255,.08)) 1px,transparent 1px),linear-gradient(90deg,var(--wt-gridPhoto,rgba(255,255,255,.08)) 1px,transparent 1px);background-size:30px 30px}',
'.dsh-wt_console[data-wt-theme=light][data-wt-bg=plain] .dsh-wt_consoleBg::after{display:none}',
'.dsh-wt_console[data-wt-theme=light][data-wt-bg=glow][data-wt-grid=on] .dsh-wt_consoleBg::after{background-image:linear-gradient(var(--wt-gridGlowLight,rgba(27,31,36,.14)) 1px,transparent 1px),linear-gradient(90deg,var(--wt-gridGlowLight,rgba(27,31,36,.14)) 1px,transparent 1px);background-size:30px 30px}',
'.dsh-wt_console[data-wt-bg=photo][data-wt-grid=off] .dsh-wt_consoleBg::after{display:none}',
'.dsh-wt_hslHead{display:flex;align-items:center;gap:4px;padding:2px 4px 4px}',
'.dsh-wt_hslBack{flex:none;width:20px;height:20px;padding:0;border:none;border-radius:6px;background:transparent;color:var(--wt-text3);cursor:pointer;font-size:14px;line-height:1;display:inline-flex;align-items:center;justify-content:center}',