style: compact spread filter toolbar layout

2026-06-29 17:18:31 +08:00
parent 0122e63872
commit ccfb8f14fe
2 changed files with 82 additions and 12 deletions
@@ -384,6 +384,63 @@ describe("market-content-entry", () => {
    expect(audienceProfileByIdExportButton?.style.color).toBe("rgb(255, 255, 255)");
  });

+  test("keeps plugin filters in two compact aligned rows", async () => {
+    document.body.innerHTML = buildMarketFixture();
+
+    const { createMarketController } = await import("../src/content/market/index");
+    const controller = trackController(createMarketController({
+      document,
+      loadAuthorMetrics: async () => ({
+        success: false,
+        reason: "request-failed"
+      }),
+      window
+    }));
+
+    await controller.ready;
+
+    const toolbar = document.querySelector(
+      '[data-plugin-toolbar="root"]'
+    ) as HTMLElement | null;
+    const panel = document.querySelector(
+      '[data-plugin-toolbar-panel="root"]'
+    ) as HTMLElement | null;
+    const rows = document.querySelectorAll("[data-plugin-toolbar-row]");
+    const primaryRow = document.querySelector(
+      '[data-plugin-toolbar-row="primary"]'
+    ) as HTMLElement | null;
+    const thresholdRow = document.querySelector(
+      '[data-plugin-toolbar-row="thresholds"]'
+    ) as HTMLElement | null;
+    const dataGroup = document.querySelector(
+      '[data-plugin-toolbar-group="data"]'
+    ) as HTMLElement | null;
+    const videoGroup = document.querySelector(
+      '[data-plugin-toolbar-group="video"]'
+    ) as HTMLElement | null;
+    const thresholdGroup = document.querySelector(
+      '[data-plugin-toolbar-group="thresholds"]'
+    ) as HTMLElement | null;
+    const titles = Array.from(document.querySelectorAll("[data-plugin-toolbar-title]"))
+      .map((element) => element.textContent);
+
+    expect(toolbar?.style.flexWrap).toBe("nowrap");
+    expect(panel?.style.flexDirection).toBe("column");
+    expect(panel?.style.alignItems).toBe("stretch");
+    expect(panel?.style.padding).toBe("2px 0px");
+    expect(panel?.style.overflowX).toBe("visible");
+    expect(rows).toHaveLength(2);
+    expect(primaryRow?.style.flexWrap).toBe("nowrap");
+    expect(thresholdRow?.style.flexWrap).toBe("nowrap");
+    expect(dataGroup?.parentElement).toBe(primaryRow);
+    expect(videoGroup?.parentElement).toBe(primaryRow);
+    expect(thresholdGroup?.parentElement).toBe(thresholdRow);
+    expect(thresholdGroup?.style.flexWrap).toBe("nowrap");
+    expect(primaryRow?.style.justifyContent).toBe("flex-start");
+    expect(thresholdRow?.style.justifyContent).toBe("flex-start");
+    expect(titles).toEqual(["达人数据", "视频口径", "传播指标"]);
+  });
+
  test("remounts the plugin action bar when the native market action row appears later", async () => {
    document.body.innerHTML = buildMarketTableOnlyFixture();
    const observer = createMutationObserverFactory();