feat: 前端界面优化

2026-07-20 21:03:52 +08:00
parent a0e69417db
commit 0c5e3d2c39
6 changed files with 213 additions and 85 deletions
@@ -112,4 +112,45 @@ describe("platform web shared theme CSS", () => {
    expect(mobileRule).toContain(".app-nav-copy strong");
    expect(mobileRule).toContain("display: block");
  });
+
+  it("keeps desktop sidebar controls pinned inside the viewport", () => {
+    const themeCss = readFileSync(new URL("./base.css", import.meta.url), "utf8");
+    const shellRule = themeCss.slice(themeCss.indexOf(".app-shell {"), themeCss.indexOf(".workspace-background-layer"));
+    const sidebarRule = themeCss.slice(themeCss.indexOf(".app-sidebar {"), themeCss.indexOf(".app-brand {"));
+
+    expect(shellRule).toContain("min-height: 100dvh");
+    expect(sidebarRule).toContain("position: sticky");
+    expect(sidebarRule).toContain("height: 100dvh");
+    expect(sidebarRule).toContain("overflow-y: auto");
+    expect(sidebarRule).toContain("overscroll-behavior: contain");
+  });
+
+  it("keeps dialogs and drawers internally scrollable on short viewports", () => {
+    const themeCss = readFileSync(new URL("./base.css", import.meta.url), "utf8");
+    const dialogRule = themeCss.slice(themeCss.indexOf("/* ---- drawer ---- */"), themeCss.indexOf(".plugin-detail-actions"));
+    const confirmStart = themeCss.indexOf("/* ---- confirm dialog ---- */");
+    const confirmRule = themeCss.slice(confirmStart, themeCss.indexOf(".confirm-actions {", confirmStart));
+    const mobileRule = themeCss.slice(themeCss.indexOf("/* ---- narrow screens ---- */"), themeCss.indexOf("/* A state view inside an already framed surface"));
+
+    expect(dialogRule).toContain(".dialog-panel-header");
+    expect(dialogRule).toContain(".drawer-panel > .panel-header");
+    expect(dialogRule).toContain("position: sticky");
+    expect(dialogRule).toContain("overflow-y: auto");
+    expect(dialogRule).toContain("overscroll-behavior: contain");
+    expect(confirmRule).toContain("max-height: calc(100dvh - 32px)");
+    expect(confirmRule).toContain("overflow-y: auto");
+    expect(mobileRule).toContain("max-height: calc(100dvh - 20px)");
+  });
+
+  it("keeps magical card decoration from becoming square background patches", () => {
+    const themeCss = readFileSync(new URL("./base.css", import.meta.url), "utf8");
+    const magicalSurfaceRule = themeCss.slice(
+      themeCss.indexOf(':root[data-theme-palette="magical-girl"] .metric-card'),
+      themeCss.indexOf(':root[data-theme-palette="magical-girl"] :where(')
+    );
+
+    expect(magicalSurfaceRule).toContain("background: var(--panel-material)");
+    expect(magicalSurfaceRule).not.toContain("background-size: 56px 56px");
+    expect(magicalSurfaceRule).not.toContain("background-image: var(--corner-sparkle), var(--panel-material)");
+  });
 });