style: simplify spread threshold controls

This commit is contained in:
wxs
2026-06-30 18:07:40 +08:00
parent 4c66262211
commit b4440e2ca3
2 changed files with 18 additions and 51 deletions
+8 -45
View File
@@ -187,10 +187,8 @@ export function ensurePluginToolbar(
);
const thresholdTitle = createToolbarGroupTitle(document, "传播指标筛选");
const thresholdRule = createSpreadThresholdRule(document);
firstRow.append(dataGroup, videoGroup, exportStatusText);
secondRow.append(thresholdTitle, thresholdRule, thresholdGroup);
secondRow.append(thresholdTitle, thresholdGroup);
panel.append(firstRow, secondRow);
root.append(
@@ -335,11 +333,17 @@ function createSpreadThresholdInput(
const input = document.createElement("input");
input.type = "number";
input.min = "0";
input.step = "0.01";
input.step = getSpreadThresholdStep(key);
input.dataset.pluginSpreadThreshold = key;
return input;
}
function getSpreadThresholdStep(
key: keyof SpreadThresholdFilter["thresholds"]
): string {
return key === "finishRate" || key === "interactionRate" ? "0.1" : "1";
}
function createSpreadThresholdControls(
document: Document,
inputs: Record<keyof SpreadThresholdFilter["thresholds"], HTMLInputElement>
@@ -390,21 +394,6 @@ function createSpreadThresholdConjunction(document: Document): HTMLElement {
return conjunction;
}
function createSpreadThresholdRule(document: Document): HTMLElement {
const rule = document.createElement("span");
rule.dataset.pluginSpreadThresholdRule = "and-gte";
applySpreadThresholdRuleStyles(rule);
const emphasis = document.createElement("strong");
emphasis.textContent = "AND";
const detail = document.createElement("small");
detail.textContent = "每项取值 >= 输入值";
rule.append("全部满足", emphasis, detail);
return rule;
}
function readSpreadThresholdInputs(
root: HTMLElement
): Record<keyof SpreadThresholdFilter["thresholds"], HTMLInputElement> {
@@ -985,32 +974,6 @@ function applySpreadThresholdConjunctionStyles(conjunction: HTMLElement): void {
conjunction.style.flex = "0 0 auto";
}
function applySpreadThresholdRuleStyles(rule: HTMLElement): void {
rule.style.display = "flex";
rule.style.alignItems = "center";
rule.style.height = "32px";
rule.style.padding = "0 10px";
rule.style.border = "1px solid #d9efe7";
rule.style.borderRadius = "8px";
rule.style.background = "#f0fbf6";
rule.style.color = "#0f8a5f";
rule.style.fontSize = "12px";
rule.style.fontWeight = "900";
rule.style.whiteSpace = "nowrap";
rule.style.flex = "0 0 auto";
Array.from(rule.children).forEach((child) => {
if (child instanceof rule.ownerDocument.defaultView!.HTMLElement) {
child.style.marginLeft = child.tagName === "SMALL" ? "6px" : "3px";
if (child.tagName === "SMALL") {
child.style.color = "#64748b";
child.style.fontSize = "12px";
child.style.fontWeight = "700";
}
}
});
}
function applyStatusStyles(statusText: HTMLElement): void {
statusText.style.color = "#64748b";
statusText.style.fontSize = "12px";