diff --git a/platform_web/components/AppShell.test.tsx b/platform_web/components/AppShell.test.tsx index c049ac6..5dfb39e 100644 --- a/platform_web/components/AppShell.test.tsx +++ b/platform_web/components/AppShell.test.tsx @@ -37,6 +37,21 @@ describe("AppShell mobile navigation", () => { expect(html).toContain("关闭导航菜单"); }); + it("renders the animation layer above the workspace background", () => { + const html = renderToStaticMarkup( + undefined}> +

页面内容

+
+ ); + + expect(html.indexOf("workspace-background-layer")).toBeLessThan(html.indexOf("global-particle-layer")); + expect(html).toContain("global-orbital-construct"); + expect(html).toContain("global-particle-lightfall"); + expect(html).toContain("global-particle-side-ray"); + expect(html).not.toContain("global-particle-orbit"); + expect(html).not.toContain("global-particle-frame"); + }); + it("uses bounded edge-swipe thresholds and accessible dismissal", () => { expect(appShellSource).toContain("start.x <= 28 && deltaX >= 56"); expect(appShellSource).toContain("deltaX <= -56"); diff --git a/platform_web/components/MagicalParticleLayer.tsx b/platform_web/components/MagicalParticleLayer.tsx index 9776235..9f4e4ee 100644 --- a/platform_web/components/MagicalParticleLayer.tsx +++ b/platform_web/components/MagicalParticleLayer.tsx @@ -11,23 +11,53 @@ const particleSlots = [ { x: "92%", y: "86%" } ]; +const orbitalConstructSlots = [ + { x: "76%", y: "82%", size: "min(54vw, 680px)", drift: "-6deg" }, + { x: "14%", y: "58%", size: "min(34vw, 420px)", drift: "18deg" }, + { x: "94%", y: "22%", size: "min(24vw, 300px)", drift: "-26deg" } +]; + type ParticleStyle = CSSProperties & { "--particle-index": string; "--particle-x": string; "--particle-y": string; }; +type OrbitalConstructStyle = CSSProperties & { + "--construct-index": string; + "--construct-x": string; + "--construct-y": string; + "--construct-size": string; + "--construct-drift": string; +}; + export function MagicalParticleLayer() { return ( <>