feat: align frontend runtime and Edge TTS

2026-07-22 15:01:25 +08:00
parent d2c278f0ea
commit 699a0bced4
43 changed files with 2000 additions and 73 deletions
@@ -0,0 +1,111 @@
+import { expect, test, type Locator } from "playwright/test";
+
+test("agent header reveals the shell acrylic without nesting another filter", async ({ page }) => {
+  await page.goto("/", { waitUntil: "domcontentloaded" });
+  await page.waitForTimeout(250);
+
+  const topBar = page.locator("header.acrylic-navigation");
+  const agentPanel = page.locator('aside[aria-label="Agent 命令面板"]');
+  const agentHeader = agentPanel.locator(".agent-panel-header");
+
+  await expect(topBar).toBeVisible();
+  await expect(agentPanel).toBeVisible();
+  await expect(agentHeader).toBeVisible();
+
+  await expectAcrylicSurface(topBar);
+  await expectAcrylicSurface(agentPanel);
+  await expectTransparentAcrylicContext(agentHeader);
+  await expectLightweightContextSurfaces(agentPanel.locator(".agent-panel-conversation"));
+  await expectSolidInternalSurfaces(agentPanel.locator(".agent-panel-band"));
+});
+
+async function expectAcrylicSurface(shell: Locator) {
+  const composition = await shell.evaluate((element) => {
+    const style = getComputedStyle(element);
+    const filteredDescendants: string[] = [];
+
+    for (const descendant of element.querySelectorAll("*")) {
+      if (getComputedStyle(descendant).backdropFilter !== "none") {
+        filteredDescendants.push(descendant.className);
+      }
+    }
+
+    return {
+      backdropFilter: style.backdropFilter,
+      backgroundColor: style.backgroundColor,
+      filteredDescendants,
+      transform: style.transform,
+      willChange: style.willChange
+    };
+  });
+
+  expect(composition.backdropFilter).toContain("blur(");
+  expect(getAlpha(composition.backgroundColor)).toBeLessThan(1);
+  expect(composition.filteredDescendants).toEqual([]);
+  expect(composition.transform).toBe("none");
+  expect(composition.willChange).toBe("auto");
+}
+
+function getAlpha(color: string) {
+  const match = color.match(/^rgba\([^,]+,[^,]+,[^,]+,\s*([\d.]+)\)$/);
+
+  return match ? Number(match[1]) : 1;
+}
+
+async function expectTransparentAcrylicContext(header: Locator) {
+  const style = await header.evaluate((element) => {
+    const computedStyle = getComputedStyle(element);
+
+    return {
+      backdropFilter: computedStyle.backdropFilter,
+      backgroundColor: computedStyle.backgroundColor,
+      className: element.className,
+      webkitBackdropFilter: computedStyle.getPropertyValue("-webkit-backdrop-filter")
+    };
+  });
+
+  expect(style.backdropFilter).toBe("none");
+  expect(style.backgroundColor).toBe("rgba(0, 0, 0, 0)");
+  expect(["", "none"]).toContain(style.webkitBackdropFilter);
+  expect(String(style.className)).not.toContain("acrylic-");
+}
+
+async function expectLightweightContextSurfaces(surfaces: Locator) {
+  const surfaceStyles = await surfaces.evaluateAll((elements) =>
+    elements.map((element) => {
+      const style = getComputedStyle(element);
+
+      return {
+        backdropFilter: style.backdropFilter,
+        backgroundColor: style.backgroundColor
+      };
+    })
+  );
+
+  expect(surfaceStyles.length).toBeGreaterThan(0);
+  for (const style of surfaceStyles) {
+    expect(style.backdropFilter).toBe("none");
+    expect(getAlpha(style.backgroundColor)).toBeLessThanOrEqual(0.12);
+  }
+}
+
+async function expectSolidInternalSurfaces(surfaces: Locator) {
+  const surfaceStyles = await surfaces.evaluateAll((elements) =>
+    elements.map((element) => {
+      const style = getComputedStyle(element);
+
+      return {
+        backdropFilter: style.backdropFilter,
+        className: element.className,
+        webkitBackdropFilter: style.getPropertyValue("-webkit-backdrop-filter")
+      };
+    })
+  );
+
+  expect(surfaceStyles.length).toBeGreaterThan(0);
+  for (const style of surfaceStyles) {
+    expect(style.backdropFilter).toBe("none");
+    expect(["", "none"]).toContain(style.webkitBackdropFilter);
+    expect(String(style.className)).not.toContain("acrylic-");
+  }
+}