feat: add independent spread metric filters

src/content/market/index.ts

@@ -31,7 +31,13 @@ import { createMarketApiClient } from "./api-client";
 import { createExportRangeController } from "./export-range-controller";
 import { ensurePluginToolbar, isPluginToolbarMounted } from "./plugin-toolbar";
 import { createSilentExportController } from "./silent-export-controller";
-import { createSpreadInfoClient, matchesSpreadThresholds } from "./spread-info";
+import {
+  buildSpreadInfoConfigKey,
+  createSpreadInfoClient,
+  matchesSpreadMetricRule,
+  normalizeSpreadInfoConfig,
+  type MappedSpreadInfoResponse
+} from "./spread-info";
 import {
   readToolbarExportTarget,
   readToolbarSpreadFilter,
@@ -57,6 +63,8 @@ import type {
   MarketRecord,
   MarketRowSnapshot,
   MarketSortState,
+  SpreadInfoConfig,
+  SpreadMetricFilterRule,
   SpreadThresholdFilter
 } from "./types";
 
@@ -84,8 +92,8 @@ export interface CreateMarketControllerOptions {
   loadAuthorMetrics?: (authorId: string) => Promise<MarketApiResult>;
   loadSpreadFilterMetrics?: (
     spreadAuthorId: string,
-    config: SpreadThresholdFilter["config"]
-  ) => Promise<Record<string, string | undefined>>;
+    config: SpreadInfoConfig
+  ) => Promise<MappedSpreadInfoResponse>;
   loadSpreadMetrics?: (spreadAuthorId: string) => Promise<Record<string, string>>;
   searchBackendMetrics?: (starIds: string[]) => Promise<
     Array<BackendMetrics & { starId: string }>
@@ -802,10 +810,19 @@ export function createMarketController(options: CreateMarketControllerOptions) {
     records: MarketRecord[],
     filter: SpreadThresholdFilter | undefined
   ): Promise<MarketRecord[]> {
-    if (!filter) {
+    if (!filter || filter.rules.length === 0) {
       return records;
     }
 
+    const normalizedRules = filter.rules.map((rule) => ({
+      ...rule,
+      config: normalizeSpreadInfoConfig(rule.config)
+    }));
+    const configsByKey = new Map<string, SpreadInfoConfig>();
+    normalizedRules.forEach((rule) => {
+      configsByKey.set(buildSpreadInfoConfigKey(rule.config), rule.config);
+    });
+
     const matchedAuthorIds = new Set<string>();
     await Promise.all(
       records.map(async (record) => {
@@ -814,21 +831,41 @@ export function createMarketController(options: CreateMarketControllerOptions) {
           return;
         }
 
-        try {
-          const metrics = await loadSpreadFilterMetrics(
-            spreadAuthorId,
-            filter.config
-          );
-          if (matchesSpreadThresholds(metrics, filter.thresholds)) {
-            matchedAuthorIds.add(record.authorId);
-          }
-        } catch {}
+        const snapshots = new Map<string, MappedSpreadInfoResponse>();
+        await Promise.all(
+          Array.from(configsByKey.entries()).map(async ([key, config]) => {
+            try {
+              snapshots.set(
+                key,
+                await loadSpreadFilterMetrics(spreadAuthorId, config)
+              );
+            } catch {
+              snapshots.set(key, {});
+            }
+          })
+        );
+
+        if (matchesAllSpreadMetricRules(normalizedRules, snapshots)) {
+          matchedAuthorIds.add(record.authorId);
+        }
       })
     );
 
     return records.filter((record) => matchedAuthorIds.has(record.authorId));
   }
 
+  function matchesAllSpreadMetricRules(
+    rules: SpreadMetricFilterRule[],
+    snapshots: Map<string, MappedSpreadInfoResponse>
+  ): boolean {
+    return rules.every((rule) =>
+      matchesSpreadMetricRule(
+        snapshots.get(buildSpreadInfoConfigKey(rule.config)) ?? {},
+        rule
+      )
+    );
+  }
+
   function filterRecordsBySelectionStrict(records: MarketRecord[]): MarketRecord[] {
     if (selectedAuthorIds.size === 0) {
       return [];

src/content/market/plugin-toolbar.ts

@@ -1,6 +1,9 @@
 import type {
   MarketExportScope,
   MarketExportTarget,
+  SpreadFilterMetric,
+  SpreadInfoConfig,
+  SpreadMetricFilterRule,
   SpreadThresholdFilter
 } from "./types";
 
@@ -12,12 +15,25 @@ export interface PluginToolbarHandlers {
   onSubmitBatch(): Promise<void> | void;
 }
 
-type VisibleSpreadThresholdKey = Extract<
-  keyof SpreadThresholdFilter["thresholds"],
-  "finishRate" | "interactionRate"
->;
+interface SpreadMetricRuleDom {
+  enabledInput: HTMLInputElement;
+  flowTypeSelect: HTMLSelectElement;
+  onlyAssignSelect: HTMLSelectElement;
+  rangeSelect: HTMLSelectElement;
+  root: HTMLElement;
+  thresholdInput: HTMLInputElement;
+  typeSelect: HTMLSelectElement;
+}
 
-type SpreadThresholdInputMap = Record<VisibleSpreadThresholdKey, HTMLInputElement>;
+type SpreadMetricRuleDomMap = Record<SpreadFilterMetric, SpreadMetricRuleDom>;
+
+const SPREAD_FILTER_DEFINITIONS: ReadonlyArray<{
+  label: string;
+  metric: SpreadFilterMetric;
+}> = [
+  { label: "完播率", metric: "finishRate" },
+  { label: "互动率", metric: "interactionRate" }
+];
 
 export interface PluginToolbarDom {
   audienceProfileByIdExportButton: HTMLButtonElement;
@@ -28,11 +44,7 @@ export interface PluginToolbarDom {
   exportCustomPagesInput: HTMLInputElement;
   exportRangeSelect: HTMLSelectElement;
   exportStatusText: HTMLElement;
-  spreadFilterFlowTypeSelect: HTMLSelectElement;
-  spreadFilterOnlyAssignSelect: HTMLSelectElement;
-  spreadFilterRangeSelect: HTMLSelectElement;
-  spreadFilterTypeSelect: HTMLSelectElement;
-  spreadThresholdInputs: SpreadThresholdInputMap;
+  spreadMetricRules: SpreadMetricRuleDomMap;
   root: HTMLElement;
 }
 
@@ -59,7 +71,8 @@ export function ensurePluginToolbar(
     if (
       existingRoot.querySelector(
         '[data-plugin-export-audience-profile-by-id="button"]'
-      )
+      ) &&
+      existingRoot.querySelector('[data-plugin-spread-metric="finishRate"]')
     ) {
       ensureToolbarMounted(existingRoot, document);
       return readToolbarDom(existingRoot);
@@ -126,31 +139,7 @@ export function ensurePluginToolbar(
   exportStatusText.dataset.pluginExportStatus = "text";
   applyStatusStyles(exportStatusText);
 
-  const spreadFilterTypeSelect = document.createElement("select");
-  spreadFilterTypeSelect.dataset.pluginSpreadFilter = "type";
-  appendOption(spreadFilterTypeSelect, "1", "个人视频");
-  appendOption(spreadFilterTypeSelect, "2", "星图视频");
-  spreadFilterTypeSelect.value = "1";
-
-  const spreadFilterOnlyAssignSelect = document.createElement("select");
-  spreadFilterOnlyAssignSelect.dataset.pluginSpreadFilter = "onlyAssign";
-  appendOption(spreadFilterOnlyAssignSelect, "false", "不限指派");
-  appendOption(spreadFilterOnlyAssignSelect, "true", "只看指派");
-  spreadFilterOnlyAssignSelect.value = "false";
-
-  const spreadFilterFlowTypeSelect = document.createElement("select");
-  spreadFilterFlowTypeSelect.dataset.pluginSpreadFilter = "flowType";
-  appendOption(spreadFilterFlowTypeSelect, "0", "不排除营销");
-  appendOption(spreadFilterFlowTypeSelect, "1", "排除营销");
-  spreadFilterFlowTypeSelect.value = "0";
-
-  const spreadFilterRangeSelect = document.createElement("select");
-  spreadFilterRangeSelect.dataset.pluginSpreadFilter = "range";
-  appendOption(spreadFilterRangeSelect, "2", "近30天");
-  appendOption(spreadFilterRangeSelect, "3", "近90天");
-  spreadFilterRangeSelect.value = "2";
-
-  const spreadThresholdInputs = createSpreadThresholdInputs(document);
+  const spreadMetricRules = createSpreadMetricRuleDoms(document);
 
   const panel = document.createElement("div");
   panel.dataset.pluginToolbarPanel = "root";
@@ -177,27 +166,20 @@ export function ensurePluginToolbar(
     batchSubmitButton
   );
 
-  const videoGroup = document.createElement("div");
-  videoGroup.dataset.pluginToolbarGroup = "video";
-  applyToolbarGroupStyles(videoGroup);
-  videoGroup.append(
-    createToolbarGroupTitle(document, "视频口径"),
-    spreadFilterTypeSelect,
-    spreadFilterOnlyAssignSelect,
-    spreadFilterFlowTypeSelect,
-    spreadFilterRangeSelect
-  );
-
-  const thresholdGroup = document.createElement("div");
-  thresholdGroup.dataset.pluginToolbarGroup = "thresholds";
-  applyThresholdGroupStyles(thresholdGroup);
-  thresholdGroup.append(
-    ...createSpreadThresholdControls(document, spreadThresholdInputs)
-  );
-
   const thresholdTitle = createToolbarGroupTitle(document, "传播指标筛选");
-  firstRow.append(dataGroup, videoGroup, exportStatusText);
-  secondRow.append(thresholdTitle, thresholdGroup);
+  const metricSelector = createSpreadMetricSelector(document, spreadMetricRules);
+  const rulesGroup = document.createElement("div");
+  rulesGroup.dataset.pluginSpreadRules = "root";
+  applySpreadRulesGroupStyles(rulesGroup);
+  rulesGroup.append(
+    ...SPREAD_FILTER_DEFINITIONS.map(
+      ({ metric }) => spreadMetricRules[metric].root
+    )
+  );
+  const filterNote = createSpreadFilterNote(document);
+
+  firstRow.append(dataGroup, exportStatusText);
+  secondRow.append(thresholdTitle, metricSelector, rulesGroup, filterNote);
   panel.append(firstRow, secondRow);
 
   root.append(panel);
@@ -211,11 +193,7 @@ export function ensurePluginToolbar(
     exportButton,
     exportCustomPagesInput,
     exportRangeSelect,
-    spreadFilterFlowTypeSelect,
-    spreadFilterOnlyAssignSelect,
-    spreadFilterRangeSelect,
-    spreadFilterTypeSelect,
-    ...spreadThresholdInputs
+    spreadMetricRules
   });
   ensureToolbarMounted(root, document);
 
@@ -234,42 +212,6 @@ export function ensurePluginToolbar(
   batchSubmitButton.addEventListener("click", () => {
     void handlers.onSubmitBatch();
   });
-  exportRangeSelect.addEventListener("change", () => {
-    syncCustomPagesInputVisibility({
-      batchSubmitButton,
-      audienceProfileFieldButton,
-      audienceProfileByIdExportButton,
-      audienceProfileExportButton,
-      exportButton,
-      exportCustomPagesInput,
-      exportRangeSelect,
-      exportStatusText,
-      root,
-      spreadFilterFlowTypeSelect,
-      spreadFilterOnlyAssignSelect,
-      spreadFilterRangeSelect,
-      spreadFilterTypeSelect,
-      spreadThresholdInputs
-    });
-  });
-  spreadFilterTypeSelect.addEventListener("change", () => {
-    syncSpreadFilterControlState({
-      audienceProfileByIdExportButton,
-      audienceProfileExportButton,
-      audienceProfileFieldButton,
-      batchSubmitButton,
-      exportButton,
-      exportCustomPagesInput,
-      exportRangeSelect,
-      exportStatusText,
-      root,
-      spreadFilterFlowTypeSelect,
-      spreadFilterOnlyAssignSelect,
-      spreadFilterRangeSelect,
-      spreadFilterTypeSelect,
-      spreadThresholdInputs
-    });
-  });
 
   const toolbarDom = {
     audienceProfileExportButton,
@@ -280,15 +222,27 @@ export function ensurePluginToolbar(
     exportCustomPagesInput,
     exportRangeSelect,
     exportStatusText,
-    spreadFilterFlowTypeSelect,
-    spreadFilterOnlyAssignSelect,
-    spreadFilterRangeSelect,
-    spreadFilterTypeSelect,
-    spreadThresholdInputs,
+    spreadMetricRules,
     root
   } satisfies PluginToolbarDom;
+
+  exportRangeSelect.addEventListener("change", () => {
+    syncCustomPagesInputVisibility(toolbarDom);
+  });
+
+  SPREAD_FILTER_DEFINITIONS.forEach(({ metric }) => {
+    const rule = spreadMetricRules[metric];
+    rule.enabledInput.addEventListener("change", () => {
+      syncSpreadMetricRuleState(rule);
+      syncSpreadFilterNote(toolbarDom);
+    });
+    rule.typeSelect.addEventListener("change", () => {
+      syncSpreadMetricVideoConstraints(rule);
+    });
+  });
+
   syncCustomPagesInputVisibility(toolbarDom);
-  syncSpreadFilterControlState(toolbarDom);
+  syncAllSpreadMetricRules(toolbarDom);
 
   return toolbarDom;
 }
@@ -304,94 +258,161 @@ function appendOption(
   select.appendChild(option);
 }
 
-function createSpreadThresholdInputs(
+function createSpreadMetricRuleDoms(
   document: Document
-): SpreadThresholdInputMap {
+): SpreadMetricRuleDomMap {
+  return Object.fromEntries(
+    SPREAD_FILTER_DEFINITIONS.map(({ label, metric }) => [
+      metric,
+      createSpreadMetricRuleDom(document, metric, label)
+    ])
+  ) as unknown as SpreadMetricRuleDomMap;
+}
+
+function createSpreadMetricRuleDom(
+  document: Document,
+  metric: SpreadFilterMetric,
+  label: string
+): SpreadMetricRuleDom {
+  const enabledInput = document.createElement("input");
+  enabledInput.type = "checkbox";
+  enabledInput.dataset.pluginSpreadMetric = metric;
+  enabledInput.setAttribute("aria-label", `启用${label}筛选`);
+
+  const thresholdInput = document.createElement("input");
+  thresholdInput.type = "number";
+  thresholdInput.min = "0";
+  thresholdInput.step = "0.1";
+  thresholdInput.dataset.pluginSpreadThreshold = metric;
+  thresholdInput.setAttribute("aria-label", `${label}筛选阈值`);
+
+  const typeSelect = document.createElement("select");
+  typeSelect.dataset.pluginSpreadFilter = "type";
+  appendOption(typeSelect, "1", "个人视频");
+  appendOption(typeSelect, "2", "星图视频");
+  typeSelect.value = "1";
+
+  const onlyAssignSelect = document.createElement("select");
+  onlyAssignSelect.dataset.pluginSpreadFilter = "onlyAssign";
+  appendOption(onlyAssignSelect, "false", "不限指派");
+  appendOption(onlyAssignSelect, "true", "只看指派");
+  onlyAssignSelect.value = "false";
+
+  const flowTypeSelect = document.createElement("select");
+  flowTypeSelect.dataset.pluginSpreadFilter = "flowType";
+  appendOption(flowTypeSelect, "0", "不排除营销");
+  appendOption(flowTypeSelect, "1", "排除营销");
+  flowTypeSelect.value = "0";
+
+  const rangeSelect = document.createElement("select");
+  rangeSelect.dataset.pluginSpreadFilter = "range";
+  appendOption(rangeSelect, "2", "近30天");
+  appendOption(rangeSelect, "3", "近90天");
+  rangeSelect.value = "2";
+
+  const root = document.createElement("div");
+  root.dataset.pluginSpreadRule = metric;
+  root.hidden = true;
+  applySpreadMetricRuleStyles(root);
+
+  const metricLabel = document.createElement("strong");
+  metricLabel.textContent = label;
+  applySpreadMetricRuleLabelStyles(metricLabel);
+
+  const thresholdControl = document.createElement("label");
+  thresholdControl.dataset.pluginSpreadThresholdControl = metric;
+  applySpreadThresholdControlStyles(thresholdControl);
+
+  const operator = document.createElement("b");
+  operator.dataset.pluginSpreadThresholdOperator = "gte";
+  operator.textContent = "≥";
+
+  const unitText = document.createElement("span");
+  unitText.dataset.pluginSpreadThresholdUnit = metric;
+  unitText.textContent = "%";
+  thresholdControl.append(operator, thresholdInput, unitText);
+
+  root.append(
+    metricLabel,
+    thresholdControl,
+    typeSelect,
+    onlyAssignSelect,
+    flowTypeSelect,
+    rangeSelect
+  );
+
   return {
-    finishRate: createSpreadThresholdInput(document, "finishRate"),
-    interactionRate: createSpreadThresholdInput(document, "interactionRate")
+    enabledInput,
+    flowTypeSelect,
+    onlyAssignSelect,
+    rangeSelect,
+    root,
+    thresholdInput,
+    typeSelect
   };
 }
 
-function createSpreadThresholdInput(
+function createSpreadMetricSelector(
   document: Document,
-  key: VisibleSpreadThresholdKey
-): HTMLInputElement {
-  const input = document.createElement("input");
-  input.type = "number";
-  input.min = "0";
-  input.step = getSpreadThresholdStep(key);
-  input.dataset.pluginSpreadThreshold = key;
-  return input;
-}
-
-function getSpreadThresholdStep(
-  key: VisibleSpreadThresholdKey
-): string {
-  return key === "finishRate" || key === "interactionRate" ? "0.1" : "1";
-}
-
-function createSpreadThresholdControls(
-  document: Document,
-  inputs: SpreadThresholdInputMap
-): HTMLElement[] {
-  const controls: HTMLElement[] = [];
-  const entries: Array<[string, string, HTMLInputElement]> = [
-    ["完播率", "%", inputs.finishRate],
-    ["互动率", "%", inputs.interactionRate]
-  ];
-
-  entries.forEach(([label, unit, input], index) => {
-    if (index > 0) {
-      controls.push(createSpreadThresholdConjunction(document));
-    }
-
-    const wrapper = document.createElement("label");
-    wrapper.dataset.pluginSpreadThresholdControl = input.dataset.pluginSpreadThreshold;
-    applySpreadThresholdControlStyles(wrapper);
+  rules: SpreadMetricRuleDomMap
+): HTMLElement {
+  const selector = document.createElement("div");
+  selector.dataset.pluginSpreadMetrics = "root";
+  applySpreadMetricSelectorStyles(selector);
 
+  SPREAD_FILTER_DEFINITIONS.forEach(({ label, metric }) => {
+    const option = document.createElement("label");
+    applySpreadMetricOptionStyles(option);
     const labelText = document.createElement("span");
     labelText.textContent = label;
-
-    const operator = document.createElement("b");
-    operator.dataset.pluginSpreadThresholdOperator = "gte";
-    operator.textContent = "≥";
-
-    const unitText = document.createElement("span");
-    unitText.dataset.pluginSpreadThresholdUnit = input.dataset.pluginSpreadThreshold;
-    unitText.textContent = unit;
-
-    wrapper.append(labelText, operator, input, unitText);
-    controls.push(wrapper);
+    option.append(rules[metric].enabledInput, labelText);
+    selector.appendChild(option);
   });
 
-  return controls;
+  return selector;
 }
 
-function createSpreadThresholdConjunction(document: Document): HTMLElement {
-  const conjunction = document.createElement("span");
-  conjunction.dataset.pluginSpreadThresholdConjunction = "and";
-  conjunction.textContent = "且";
-  applySpreadThresholdConjunctionStyles(conjunction);
-  return conjunction;
+function createSpreadFilterNote(document: Document): HTMLElement {
+  const note = document.createElement("span");
+  note.dataset.pluginSpreadFilterNote = "and";
+  note.textContent = "全部规则都达标才保留达人";
+  note.hidden = true;
+  applySpreadFilterNoteStyles(note);
+  return note;
 }
 
-function readSpreadThresholdInputs(
-  root: HTMLElement
-): SpreadThresholdInputMap {
-  return {
-    finishRate: readSpreadThresholdInput(root, "finishRate"),
-    interactionRate: readSpreadThresholdInput(root, "interactionRate")
-  };
-}
-
-function readSpreadThresholdInput(
-  root: HTMLElement,
-  key: VisibleSpreadThresholdKey
-): HTMLInputElement {
-  return root.querySelector(
-    `[data-plugin-spread-threshold="${key}"]`
-  ) as HTMLInputElement;
+function readSpreadMetricRuleDoms(root: HTMLElement): SpreadMetricRuleDomMap {
+  return Object.fromEntries(
+    SPREAD_FILTER_DEFINITIONS.map(({ metric }) => {
+      const ruleRoot = root.querySelector(
+        `[data-plugin-spread-rule="${metric}"]`
+      ) as HTMLElement;
+      return [
+        metric,
+        {
+          enabledInput: root.querySelector(
+            `[data-plugin-spread-metric="${metric}"]`
+          ) as HTMLInputElement,
+          flowTypeSelect: ruleRoot.querySelector(
+            '[data-plugin-spread-filter="flowType"]'
+          ) as HTMLSelectElement,
+          onlyAssignSelect: ruleRoot.querySelector(
+            '[data-plugin-spread-filter="onlyAssign"]'
+          ) as HTMLSelectElement,
+          rangeSelect: ruleRoot.querySelector(
+            '[data-plugin-spread-filter="range"]'
+          ) as HTMLSelectElement,
+          root: ruleRoot,
+          thresholdInput: ruleRoot.querySelector(
+            `[data-plugin-spread-threshold="${metric}"]`
+          ) as HTMLInputElement,
+          typeSelect: ruleRoot.querySelector(
+            '[data-plugin-spread-filter="type"]'
+          ) as HTMLSelectElement
+        } satisfies SpreadMetricRuleDom
+      ];
+    })
+  ) as unknown as SpreadMetricRuleDomMap;
 }
 
 function readToolbarDom(root: HTMLElement): PluginToolbarDom {
@@ -420,23 +441,11 @@ function readToolbarDom(root: HTMLElement): PluginToolbarDom {
     exportStatusText: root.querySelector(
       '[data-plugin-export-status="text"]'
     ) as HTMLElement,
-    spreadFilterFlowTypeSelect: root.querySelector(
-      '[data-plugin-spread-filter="flowType"]'
-    ) as HTMLSelectElement,
-    spreadFilterOnlyAssignSelect: root.querySelector(
-      '[data-plugin-spread-filter="onlyAssign"]'
-    ) as HTMLSelectElement,
-    spreadFilterRangeSelect: root.querySelector(
-      '[data-plugin-spread-filter="range"]'
-    ) as HTMLSelectElement,
-    spreadFilterTypeSelect: root.querySelector(
-      '[data-plugin-spread-filter="type"]'
-    ) as HTMLSelectElement,
-    spreadThresholdInputs: readSpreadThresholdInputs(root),
+    spreadMetricRules: readSpreadMetricRuleDoms(root),
     root
   } satisfies PluginToolbarDom;
   syncCustomPagesInputVisibility(toolbarDom);
-  syncSpreadFilterControlState(toolbarDom);
+  syncAllSpreadMetricRules(toolbarDom);
   return toolbarDom;
 }
 
@@ -498,44 +507,34 @@ export function readToolbarExportTarget(
 export function readToolbarSpreadFilter(
   toolbar: PluginToolbarDom
 ): { error?: string; filter?: SpreadThresholdFilter } {
-  const thresholds: SpreadThresholdFilter["thresholds"] = {};
+  const rules: SpreadMetricFilterRule[] = [];
 
-  for (const [key, input] of Object.entries(toolbar.spreadThresholdInputs)) {
-    const trimmedValue = input.value.trim();
-    if (!trimmedValue) {
+  for (const { label, metric } of SPREAD_FILTER_DEFINITIONS) {
+    const ruleDom = toolbar.spreadMetricRules[metric];
+    clearSpreadMetricRuleValidation(ruleDom);
+    if (!ruleDom.enabledInput.checked) {
       continue;
     }
 
-    const numericValue = Number(trimmedValue);
-    if (!Number.isFinite(numericValue) || numericValue < 0) {
+    const trimmedValue = ruleDom.thresholdInput.value.trim();
+    const threshold = Number(trimmedValue);
+    if (!trimmedValue || !Number.isFinite(threshold) || threshold < 0) {
+      markSpreadMetricRuleInvalid(ruleDom);
       return {
-        error: "请输入有效筛选阈值"
+        error: `请输入有效的${label}筛选阈值`
       };
     }
 
-    thresholds[key as keyof SpreadThresholdFilter["thresholds"]] = numericValue;
+    rules.push({
+      config: readSpreadMetricConfig(ruleDom),
+      metric,
+      threshold
+    });
   }
 
-  if (Object.keys(thresholds).length === 0) {
-    return {};
-  }
-
-  const type = Number(toolbar.spreadFilterTypeSelect.value) === 2 ? 2 : 1;
   return {
     filter: {
-      config: {
-        flowType:
-          type === 1
-            ? 0
-            : Number(toolbar.spreadFilterFlowTypeSelect.value) === 1
-              ? 1
-              : 0,
-        onlyAssign:
-          type === 1 ? false : toolbar.spreadFilterOnlyAssignSelect.value === "true",
-        range: Number(toolbar.spreadFilterRangeSelect.value) === 3 ? 3 : 2,
-        type
-      },
-      thresholds
+      rules
     }
   };
 }
@@ -552,16 +551,19 @@ export function setToolbarBusyState(
     toolbar.exportButton,
     toolbar.exportRangeSelect,
     toolbar.exportCustomPagesInput,
-    toolbar.spreadFilterTypeSelect,
-    toolbar.spreadFilterOnlyAssignSelect,
-    toolbar.spreadFilterFlowTypeSelect,
-    toolbar.spreadFilterRangeSelect,
-    ...Object.values(toolbar.spreadThresholdInputs)
+    ...Object.values(toolbar.spreadMetricRules).flatMap((rule) => [
+      rule.enabledInput,
+      rule.thresholdInput,
+      rule.typeSelect,
+      rule.onlyAssignSelect,
+      rule.flowTypeSelect,
+      rule.rangeSelect
+    ])
   ].forEach((element) => {
     element.disabled = isBusy;
   });
   if (!isBusy) {
-    syncSpreadFilterControlState(toolbar);
+    syncAllSpreadMetricRules(toolbar);
   }
 }
 
@@ -577,14 +579,68 @@ function syncCustomPagesInputVisibility(toolbar: PluginToolbarDom): void {
   toolbar.exportCustomPagesInput.hidden = toolbar.exportRangeSelect.value !== "custom";
 }
 
-function syncSpreadFilterControlState(toolbar: PluginToolbarDom): void {
-  const isPersonalVideo = toolbar.spreadFilterTypeSelect.value !== "2";
-  if (isPersonalVideo) {
-    toolbar.spreadFilterOnlyAssignSelect.value = "false";
-    toolbar.spreadFilterFlowTypeSelect.value = "0";
+function syncAllSpreadMetricRules(toolbar: PluginToolbarDom): void {
+  Object.values(toolbar.spreadMetricRules).forEach(syncSpreadMetricRuleState);
+  syncSpreadFilterNote(toolbar);
+}
+
+function syncSpreadMetricRuleState(rule: SpreadMetricRuleDom): void {
+  rule.root.hidden = !rule.enabledInput.checked;
+  if (!rule.enabledInput.checked) {
+    rule.thresholdInput.value = "";
+    rule.typeSelect.value = "1";
+    rule.onlyAssignSelect.value = "false";
+    rule.flowTypeSelect.value = "0";
+    rule.rangeSelect.value = "2";
+    clearSpreadMetricRuleValidation(rule);
   }
-  toolbar.spreadFilterOnlyAssignSelect.disabled = isPersonalVideo;
-  toolbar.spreadFilterFlowTypeSelect.disabled = isPersonalVideo;
+  syncSpreadMetricVideoConstraints(rule);
+}
+
+function syncSpreadMetricVideoConstraints(rule: SpreadMetricRuleDom): void {
+  const isPersonalVideo = rule.typeSelect.value !== "2";
+  if (isPersonalVideo) {
+    rule.onlyAssignSelect.value = "false";
+    rule.flowTypeSelect.value = "0";
+  }
+  rule.onlyAssignSelect.disabled = isPersonalVideo;
+  rule.flowTypeSelect.disabled = isPersonalVideo;
+}
+
+function syncSpreadFilterNote(toolbar: PluginToolbarDom): void {
+  const note = toolbar.root.querySelector(
+    '[data-plugin-spread-filter-note="and"]'
+  ) as HTMLElement | null;
+  if (!note) {
+    return;
+  }
+
+  const enabledCount = Object.values(toolbar.spreadMetricRules).filter(
+    (rule) => rule.enabledInput.checked
+  ).length;
+  note.hidden = enabledCount < 2;
+}
+
+function readSpreadMetricConfig(rule: SpreadMetricRuleDom): SpreadInfoConfig {
+  const type = rule.typeSelect.value === "2" ? 2 : 1;
+  return {
+    flowType:
+      type === 1 ? 0 : rule.flowTypeSelect.value === "1" ? 1 : 0,
+    onlyAssign:
+      type === 1 ? false : rule.onlyAssignSelect.value === "true",
+    range: rule.rangeSelect.value === "3" ? 3 : 2,
+    type
+  };
+}
+
+function clearSpreadMetricRuleValidation(rule: SpreadMetricRuleDom): void {
+  delete rule.root.dataset.pluginSpreadRuleInvalid;
+  rule.thresholdInput.removeAttribute("aria-invalid");
+}
+
+function markSpreadMetricRuleInvalid(rule: SpreadMetricRuleDom): void {
+  rule.root.dataset.pluginSpreadRuleInvalid = "true";
+  rule.thresholdInput.setAttribute("aria-invalid", "true");
 }
 
 function ensureToolbarMounted(root: HTMLElement, document: Document): void {
@@ -794,17 +850,61 @@ function applyToolbarGroupStyles(group: HTMLElement): void {
   group.style.flexWrap = "nowrap";
 }
 
-function applyThresholdGroupStyles(group: HTMLElement): void {
+function applySpreadMetricSelectorStyles(selector: HTMLElement): void {
+  selector.style.display = "flex";
+  selector.style.alignItems = "center";
+  selector.style.gap = "12px";
+  selector.style.flex = "0 0 auto";
+  selector.style.whiteSpace = "nowrap";
+}
+
+function applySpreadMetricOptionStyles(option: HTMLElement): void {
+  option.style.display = "inline-flex";
+  option.style.alignItems = "center";
+  option.style.gap = "5px";
+  option.style.height = "32px";
+  option.style.color = "#344054";
+  option.style.fontSize = "12px";
+  option.style.fontWeight = "700";
+  option.style.whiteSpace = "nowrap";
+}
+
+function applySpreadRulesGroupStyles(group: HTMLElement): void {
   group.style.display = "flex";
-  group.style.alignItems = "center";
-  group.style.gap = "7px";
+  group.style.flexDirection = "column";
+  group.style.alignItems = "stretch";
+  group.style.gap = "6px";
   group.style.minWidth = "0";
   group.style.flex = "1 1 auto";
-  group.style.flexWrap = "nowrap";
   group.style.overflowX = "auto";
   group.style.overflowY = "hidden";
 }
 
+function applySpreadMetricRuleStyles(rule: HTMLElement): void {
+  rule.style.display = "flex";
+  rule.style.alignItems = "center";
+  rule.style.gap = "7px";
+  rule.style.minWidth = "max-content";
+  rule.style.minHeight = "32px";
+  rule.style.whiteSpace = "nowrap";
+}
+
+function applySpreadMetricRuleLabelStyles(label: HTMLElement): void {
+  label.style.width = "48px";
+  label.style.color = "#344054";
+  label.style.fontSize = "12px";
+  label.style.fontWeight = "800";
+  label.style.flex = "0 0 auto";
+}
+
+function applySpreadFilterNoteStyles(note: HTMLElement): void {
+  note.style.color = "#0f8a5f";
+  note.style.fontSize = "12px";
+  note.style.fontWeight = "800";
+  note.style.whiteSpace = "nowrap";
+  note.style.flex = "0 0 auto";
+}
+
 function createToolbarGroupTitle(document: Document, label: string): HTMLElement {
   const title = document.createElement("span");
   title.dataset.pluginToolbarTitle = label;
@@ -834,14 +934,8 @@ function applyNativeControlStyles(
     exportButton: HTMLButtonElement;
     exportCustomPagesInput: HTMLInputElement;
     exportRangeSelect: HTMLSelectElement;
-    spreadFilterFlowTypeSelect: HTMLSelectElement;
-    spreadFilterOnlyAssignSelect: HTMLSelectElement;
-    spreadFilterRangeSelect: HTMLSelectElement;
-    spreadFilterTypeSelect: HTMLSelectElement;
-  } & Record<
-    VisibleSpreadThresholdKey,
-    HTMLInputElement
-  >
+    spreadMetricRules: SpreadMetricRuleDomMap;
+  }
 ): void {
   const primaryButton =
     findButtonContainingText(document, "发布任务") ??
@@ -870,13 +964,31 @@ function applyNativeControlStyles(
     button.style.whiteSpace = "nowrap";
   });
 
-  const nativeControls = Array.from(Object.values(controls)).filter(
-    (element): element is HTMLInputElement | HTMLSelectElement =>
-      element instanceof document.defaultView!.HTMLInputElement ||
-      element instanceof document.defaultView!.HTMLSelectElement
+  const ruleControls = Object.values(controls.spreadMetricRules).flatMap(
+    (rule) => [
+      rule.enabledInput,
+      rule.thresholdInput,
+      rule.typeSelect,
+      rule.onlyAssignSelect,
+      rule.flowTypeSelect,
+      rule.rangeSelect
+    ]
   );
+  const nativeControls = [
+    controls.exportCustomPagesInput,
+    controls.exportRangeSelect,
+    ...ruleControls
+  ];
 
   nativeControls.forEach((element) => {
+    if (element instanceof document.defaultView!.HTMLInputElement && element.type === "checkbox") {
+      element.style.width = "16px";
+      element.style.height = "16px";
+      element.style.padding = "0";
+      element.style.accentColor = "#7f1d2d";
+      element.style.flex = "0 0 auto";
+      return;
+    }
     element.style.height = "32px";
     element.style.border = "1px solid #d0d7de";
     element.style.borderRadius = "6px";
@@ -890,22 +1002,15 @@ function applyNativeControlStyles(
   controls.exportRangeSelect.style.minWidth = "104px";
   controls.exportCustomPagesInput.style.width = "72px";
 
-  [
-    controls.spreadFilterTypeSelect,
-    controls.spreadFilterOnlyAssignSelect,
-    controls.spreadFilterFlowTypeSelect,
-    controls.spreadFilterRangeSelect
-  ].forEach((select) => {
-    select.style.minWidth = "84px";
-  });
-
-  Object.values(controls).forEach((element) => {
+  ruleControls.forEach((element) => {
+    if (element instanceof document.defaultView!.HTMLSelectElement) {
+      element.style.minWidth = "84px";
+    }
     if (
       element instanceof document.defaultView!.HTMLInputElement &&
       element.dataset.pluginSpreadThreshold
     ) {
-      element.style.width =
-        element.dataset.pluginSpreadThreshold === "playMedian" ? "82px" : "58px";
+      element.style.width = "58px";
       element.style.minWidth = "0";
       element.style.height = "26px";
       element.style.border = "0";
@@ -945,14 +1050,6 @@ function applySpreadThresholdControlStyles(control: HTMLElement): void {
   control.style.flex = "0 0 auto";
 }
 
-function applySpreadThresholdConjunctionStyles(conjunction: HTMLElement): void {
-  conjunction.style.color = "#0f8a5f";
-  conjunction.style.fontSize = "12px";
-  conjunction.style.fontWeight = "900";
-  conjunction.style.whiteSpace = "nowrap";
-  conjunction.style.flex = "0 0 auto";
-}
-
 function applyStatusStyles(statusText: HTMLElement): void {
   statusText.style.color = "#64748b";
   statusText.style.fontSize = "12px";
@@ -1026,6 +1123,11 @@ function ensurePluginActionButtonTheme(document: Document): void {
       color: #0f8a5f !important;
       font-weight: 900 !important;
     }
+
+    [data-plugin-spread-rule-invalid="true"] [data-plugin-spread-threshold-control] {
+      border-color: #dc2626 !important;
+      box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.12) !important;
+    }
   `;
   document.head.appendChild(style);
 }

src/content/market/spread-info.ts

@@ -1,8 +1,7 @@
 import type {
   SpreadInfoConfig,
   SpreadInfoMetrics,
-  SpreadMetricFilterRule,
-  SpreadMetricThresholds
+  SpreadMetricFilterRule
 } from "./types";
 
 interface FetchResponseLike {
@@ -205,21 +204,6 @@ export function mapSpreadInfoResponse(
   };
 }
 
-export function matchesSpreadThresholds(
-  metrics: MappedSpreadInfoResponse,
-  thresholds: SpreadMetricThresholds
-): boolean {
-  return Object.entries(thresholds).every(([key, threshold]) => {
-    if (typeof threshold !== "number" || !Number.isFinite(threshold)) {
-      return true;
-    }
-
-    const metricValue = metrics[key as keyof SpreadMetricThresholds];
-    const numericValue = readDisplayNumber(metricValue);
-    return numericValue !== null && numericValue >= threshold;
-  });
-}
-
 export function normalizeSpreadInfoConfig(
   config: SpreadInfoConfig
 ): SpreadInfoConfig {

src/content/market/types.ts

@@ -29,19 +29,8 @@ export interface SpreadMetricFilterRule {
   threshold: number;
 }
 
-export interface SpreadMetricThresholds {
-  averageCommentCount?: number;
-  averageDuration?: number;
-  averageLikeCount?: number;
-  averageShareCount?: number;
-  finishRate?: number;
-  interactionRate?: number;
-  playMedian?: number;
-}
-
 export interface SpreadThresholdFilter {
-  config: SpreadInfoConfig;
-  thresholds: SpreadMetricThresholds;
+  rules: SpreadMetricFilterRule[];
 }
 
 export type MarketSortField =