From cfa86abfcaae576082428e9e58af7c5f4598781f Mon Sep 17 00:00:00 2001 From: Aisland Date: Wed, 2 Sep 2026 00:32:26 +0800 Subject: [PATCH] =?UTF-8?q?fix(console):=20=E8=A7=86=E9=A2=91=E4=BA=A4?= =?UTF-8?q?=E6=8E=A5=E6=8B=89=E9=95=BF(=E6=9C=80=E9=95=BF2.0s)=E4=B8=94?= =?UTF-8?q?=E5=A4=87=E8=BD=A8=E5=B0=B1=E7=BB=AA=E5=90=8E=E6=89=8D=E5=BC=80?= =?UTF-8?q?=E5=A7=8B=E6=B7=A1=E5=85=A5(=E9=98=B2=E7=99=BD=E9=97=AA)?= =?UTF-8?q?=EF=BC=9B=E7=99=BD=E8=89=B2=E4=B8=BB=E9=A2=98=E7=BD=91=E6=A0=BC?= =?UTF-8?q?=E9=80=82=E9=85=8D=E2=80=94=E2=80=94=E7=BA=AF=E8=89=B2=E9=9A=90?= =?UTF-8?q?=E8=97=8F=E7=BD=91=E6=A0=BC=E7=BA=BF=E3=80=81=E6=B5=81=E5=85=89?= =?UTF-8?q?=E5=8F=8D=E7=81=B0(=E7=81=B0=E8=89=B2var)=E3=80=81=E6=B7=B1?= =?UTF-8?q?=E8=89=B2=E4=B8=8D=E5=8F=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 01_content/lib/client.js | 36 ++++++++++++++++++++++----------- 01_content/src/client/split.tsx | 22 ++++++++++++-------- 01_content/src/client/styles.ts | 2 ++ 3 files changed, 40 insertions(+), 20 deletions(-) diff --git a/01_content/lib/client.js b/01_content/lib/client.js index d90bd2b..e2273a1 100644 --- a/01_content/lib/client.js +++ b/01_content/lib/client.js @@ -8230,6 +8230,8 @@ var css = xterm_default + "\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}", @@ -17847,23 +17849,33 @@ function ConsoleVideo(props) { 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, 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()); + s.currentTime = 0; } catch { } - try { - s.getAnimations().forEach((an) => an.cancel()); - } catch { - } - s.currentTime = 0; - s.play().catch(() => { - }); - s.animate([{ opacity: 0 }, { opacity: 1 }], { duration: fade * 1e3, easing: "linear", fill: "forwards" }); - m.animate([{ opacity: 1 }, { opacity: 0 }], { duration: fade * 1e3, easing: "linear", fill: "forwards" }); + 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 * 1e3, easing: "linear", fill: "forwards" }); + m.animate([{ opacity: 1 }, { opacity: 0 }], { duration: fade * 1e3, easing: "linear", fill: "forwards" }); + } catch { + } + }; + if (s.readyState >= 2) startFade(); + else s.addEventListener("canplay", startFade, { once: true }); } catch { } } @@ -18287,7 +18299,7 @@ function ConsolePane() { { mode: "light", key: "console.themeLight" }, { mode: "system", key: "console.themeSystem" } ]; - return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("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"]: "hsl(" + plainHsl.h + ", " + plainHsl.s + "%, " + plainHsl.l + "%)", ["--wt-gridPlain"]: "rgba(255,255,255," + plainGrid / 100 + ")" } : {}, ...bg === "glow" ? { ["--wt-gridGlow"]: "rgba(255,255,255," + glowGrid / 100 + ")" } : {}, ...bg === "photo" ? { ["--wt-gridPhoto"]: "rgba(255,255,255," + gridOpacity / 100 + ")" } : {}, ["--wt-cardBlur"]: (bg === "plain" ? plainBlur : bg === "glow" ? glowBlur : cardBlur) + "px" }, children: [ + return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("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"]: "hsl(" + plainHsl.h + ", " + plainHsl.s + "%, " + plainHsl.l + "%)", ["--wt-gridPlain"]: "rgba(255,255,255," + plainGrid / 100 + ")" } : {}, ...bg === "glow" ? { ["--wt-gridGlow"]: "rgba(255,255,255," + glowGrid / 100 + ")", ["--wt-gridGlowLight"]: "rgba(27,31,36," + glowGrid / 100 + ")" } : {}, ...bg === "photo" ? { ["--wt-gridPhoto"]: "rgba(255,255,255," + gridOpacity / 100 + ")" } : {}, ["--wt-cardBlur"]: (bg === "plain" ? plainBlur : bg === "glow" ? glowBlur : cardBlur) + "px" }, children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "dsh-wt_consoleBg", "aria-hidden": true, style: bg === "glow" && (glowHsl.h !== 0 || glowHsl.s !== 100 || glowHsl.l !== 100) ? { filter: "hue-rotate(" + glowHsl.h + "deg) saturate(" + glowHsl.s + "%) brightness(" + glowHsl.l + "%)" } : void 0, children: [ bg === "photo" && (bgVideo ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(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 + "%)" } : void 0 }) : bgPhoto ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { className: "dsh-wt_consoleMedia", src: bgPhoto, alt: "", style: photoHsl.h !== 0 || photoHsl.s !== 100 || photoHsl.l !== 100 ? { filter: "hue-rotate(" + photoHsl.h + "deg) saturate(" + photoHsl.s + "%) brightness(" + photoHsl.l + "%)" } : void 0 }) : null), bg === "glow" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [ diff --git a/01_content/src/client/split.tsx b/01_content/src/client/split.tsx index 0b63a46..f91eeaf 100644 --- a/01_content/src/client/split.tsx +++ b/01_content/src/client/split.tsx @@ -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 ( -
+
{bg === 'photo' && (bgVideo ? diff --git a/01_content/src/client/styles.ts b/01_content/src/client/styles.ts index a558de1..81f02eb 100644 --- a/01_content/src/client/styles.ts +++ b/01_content/src/client/styles.ts @@ -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}',