style: refine market toolbar layout

tests/batch-submit-client.test.ts

@@ -5,7 +5,7 @@ import { createBatchSubmitClient } from "../src/shared/batch-submit-client";
 
 describe("batch-submit-client", () => {
   test("exports the default batch submit base url", () => {
-    expect(DEFAULT_BATCH_SUBMIT_BASE_URL).toBe("http://192.168.31.21:8083");
+    expect(DEFAULT_BATCH_SUBMIT_BASE_URL).toBe("http://localhost:8083");
   });
 
   test("posts the batch payload with a Bearer token", async () => {

tests/manifest.test.ts

@@ -43,7 +43,7 @@ describe("manifest", () => {
       "https://*.xingtu.cn/ad/creator/market*",
       "https://login-api.intelligrow.cn/*",
       "https://talent-search.intelligrow.cn/*",
-      "http://192.168.31.21:8083/*",
+      "http://localhost:8083/*",
       "https://*/*"
     ]);
     expect(releaseManifest.host_permissions).not.toEqual(

tests/market-content-entry.test.ts

@@ -9,11 +9,12 @@ const disposers: Array<() => void> = [];
 
 describe("market-content-entry", () => {
   beforeEach(() => {
+    installUsableLocalStorage();
     document.body.innerHTML = "";
     document.documentElement.removeAttribute("data-sces-market-rows");
     document.documentElement.removeAttribute("data-sces-market-request-snapshot");
     document.documentElement.removeAttribute("data-test-page-index");
-    window.localStorage.clear();
+    clearLocalStorage();
     window.history.replaceState({}, "", "/");
   });
 
@@ -384,7 +385,7 @@ describe("market-content-entry", () => {
     expect(audienceProfileByIdExportButton?.style.color).toBe("rgb(255, 255, 255)");
   });
 
-  test("keeps plugin filters in two compact aligned rows", async () => {
+  test("renders the approved compact toolbar layout from the preview", async () => {
     document.body.innerHTML = buildMarketFixture();
 
     const { createMarketController } = await import("../src/content/market/index");
@@ -405,7 +406,6 @@ describe("market-content-entry", () => {
     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;
@@ -421,24 +421,56 @@ describe("market-content-entry", () => {
     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);
+    const statusText = document.querySelector(
+      '[data-plugin-export-status="text"]'
+    ) as HTMLElement | null;
+    const titles = Array.from(
+      document.querySelectorAll("[data-plugin-toolbar-title]")
+    ) as HTMLElement[];
+    const buttons = Array.from(
+      document.querySelectorAll("[data-plugin-toolbar-group='data'] button")
+    ) as HTMLButtonElement[];
+    const operators = Array.from(
+      document.querySelectorAll("[data-plugin-spread-threshold-operator]")
+    ).map((element) => element.textContent);
+    const conjunctions = Array.from(
+      document.querySelectorAll("[data-plugin-spread-threshold-conjunction]")
+    ).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(panel?.style.alignItems).toBe("center");
     expect(primaryRow?.style.flexWrap).toBe("nowrap");
     expect(thresholdRow?.style.flexWrap).toBe("nowrap");
+    expect(thresholdRow?.style.alignItems).toBe("center");
     expect(dataGroup?.parentElement).toBe(primaryRow);
     expect(videoGroup?.parentElement).toBe(primaryRow);
+    expect(statusText?.parentElement).toBe(primaryRow);
     expect(thresholdGroup?.parentElement).toBe(thresholdRow);
     expect(thresholdGroup?.style.flexWrap).toBe("nowrap");
+    expect(thresholdGroup?.style.overflowX).toBe("auto");
     expect(primaryRow?.style.justifyContent).toBe("flex-start");
     expect(thresholdRow?.style.justifyContent).toBe("flex-start");
-    expect(titles).toEqual(["达人数据", "视频口径", "传播指标"]);
+    expect(titles.map((element) => element.textContent)).toEqual([
+      "视频口径",
+      "传播指标筛选"
+    ]);
+    expect(titles[0]?.style.background).toBe("rgb(238, 245, 255)");
+    expect(titles[1]?.style.background).toBe("rgb(238, 245, 255)");
+    expect(
+      document.querySelector("[data-plugin-spread-threshold-rule]")?.textContent
+    ).toContain("全部满足AND");
+    expect(
+      document.querySelector("[data-plugin-spread-threshold-rule]")?.textContent
+    ).toContain("每项取值 >= 输入值");
+    expect(operators).toEqual(["≥", "≥", "≥", "≥", "≥", "≥", "≥"]);
+    expect(conjunctions).toEqual(["且", "且", "且", "且", "且", "且"]);
+    expect(buttons.map((button) => button.style.backgroundColor)).toEqual([
+      "rgb(127, 29, 45)",
+      "rgb(127, 29, 45)",
+      "rgb(127, 29, 45)",
+      "rgb(127, 29, 45)"
+    ]);
   });
 
   test("remounts the plugin action bar when the native market action row appears later", async () => {
@@ -3833,6 +3865,58 @@ describe("market-content-entry", () => {
   });
 });
 
+function clearLocalStorage(): void {
+  if (typeof window.localStorage.clear === "function") {
+    window.localStorage.clear();
+    return;
+  }
+
+  for (let index = window.localStorage.length - 1; index >= 0; index -= 1) {
+    const key = window.localStorage.key(index);
+    if (key) {
+      window.localStorage.removeItem(key);
+    }
+  }
+}
+
+function installUsableLocalStorage(): void {
+  if (
+    typeof window.localStorage.getItem === "function" &&
+    typeof window.localStorage.setItem === "function" &&
+    typeof window.localStorage.removeItem === "function" &&
+    typeof window.localStorage.clear === "function"
+  ) {
+    return;
+  }
+
+  const values = new Map<string, string>();
+  const storage: Storage = {
+    get length() {
+      return values.size;
+    },
+    clear() {
+      values.clear();
+    },
+    getItem(key: string) {
+      return values.get(key) ?? null;
+    },
+    key(index: number) {
+      return Array.from(values.keys())[index] ?? null;
+    },
+    removeItem(key: string) {
+      values.delete(key);
+    },
+    setItem(key: string, value: string) {
+      values.set(key, String(value));
+    }
+  };
+
+  Object.defineProperty(window, "localStorage", {
+    configurable: true,
+    value: storage
+  });
+}
+
 function buildMarketFixture() {
   return buildMarketPageShell(buildMarketTableOnlyFixture());
 }