style: show spread threshold units

src/content/market/plugin-toolbar.ts

@@ -308,40 +308,34 @@ function createSpreadThresholdInputs(
   return {
     averageCommentCount: createSpreadThresholdInput(
       document,
-      "averageCommentCount",
-      "评论>="
+      "averageCommentCount"
     ),
     averageDuration: createSpreadThresholdInput(
       document,
-      "averageDuration",
-      "时长>="
+      "averageDuration"
     ),
     averageLikeCount: createSpreadThresholdInput(
       document,
-      "averageLikeCount",
-      "点赞>="
+      "averageLikeCount"
     ),
     averageShareCount: createSpreadThresholdInput(
       document,
-      "averageShareCount",
-      "转发>="
+      "averageShareCount"
     ),
-    finishRate: createSpreadThresholdInput(document, "finishRate", "完播率>="),
-    interactionRate: createSpreadThresholdInput(document, "interactionRate", "互动率>="),
-    playMedian: createSpreadThresholdInput(document, "playMedian", "播放中位数>=")
+    finishRate: createSpreadThresholdInput(document, "finishRate"),
+    interactionRate: createSpreadThresholdInput(document, "interactionRate"),
+    playMedian: createSpreadThresholdInput(document, "playMedian")
   };
 }
 
 function createSpreadThresholdInput(
   document: Document,
-  key: keyof SpreadThresholdFilter["thresholds"],
-  placeholder: string
+  key: keyof SpreadThresholdFilter["thresholds"]
 ): HTMLInputElement {
   const input = document.createElement("input");
   input.type = "number";
   input.min = "0";
   input.step = "0.01";
-  input.placeholder = placeholder;
   input.dataset.pluginSpreadThreshold = key;
   return input;
 }
@@ -351,17 +345,17 @@ function createSpreadThresholdControls(
   inputs: Record<keyof SpreadThresholdFilter["thresholds"], HTMLInputElement>
 ): HTMLElement[] {
   const controls: HTMLElement[] = [];
-  const entries: Array<[string, HTMLInputElement]> = [
-    ["评论", inputs.averageCommentCount],
-    ["时长", inputs.averageDuration],
-    ["点赞", inputs.averageLikeCount],
-    ["转发", inputs.averageShareCount],
-    ["完播率", inputs.finishRate],
-    ["互动率", inputs.interactionRate],
-    ["播放中位数", inputs.playMedian]
+  const entries: Array<[string, string, HTMLInputElement]> = [
+    ["评论", "条", inputs.averageCommentCount],
+    ["时长", "秒", inputs.averageDuration],
+    ["点赞", "次", inputs.averageLikeCount],
+    ["转发", "次", inputs.averageShareCount],
+    ["完播率", "%", inputs.finishRate],
+    ["互动率", "%", inputs.interactionRate],
+    ["播放中位数", "次", inputs.playMedian]
   ];
 
-  entries.forEach(([label, input], index) => {
+  entries.forEach(([label, unit, input], index) => {
     if (index > 0) {
       controls.push(createSpreadThresholdConjunction(document));
     }
@@ -377,7 +371,11 @@ function createSpreadThresholdControls(
     operator.dataset.pluginSpreadThresholdOperator = "gte";
     operator.textContent = "≥";
 
-    wrapper.append(labelText, operator, input);
+    const unitText = document.createElement("span");
+    unitText.dataset.pluginSpreadThresholdUnit = input.dataset.pluginSpreadThreshold;
+    unitText.textContent = unit;
+
+    wrapper.append(labelText, operator, input, unitText);
     controls.push(wrapper);
   });
 
@@ -968,7 +966,7 @@ function applyPrimaryButtonStyles(
 
 function applySpreadThresholdControlStyles(control: HTMLElement): void {
   control.style.display = "grid";
-  control.style.gridTemplateColumns = "auto auto 1fr";
+  control.style.gridTemplateColumns = "auto auto 1fr auto";
   control.style.alignItems = "center";
   control.style.gap = "6px";
   control.style.height = "32px";

tests/market-content-entry.test.ts

@@ -436,6 +436,12 @@ describe("market-content-entry", () => {
     const conjunctions = Array.from(
       document.querySelectorAll("[data-plugin-spread-threshold-conjunction]")
     ).map((element) => element.textContent);
+    const thresholdControls = Array.from(
+      document.querySelectorAll("[data-plugin-spread-threshold-control]")
+    );
+    const thresholdInputs = Array.from(
+      document.querySelectorAll("[data-plugin-spread-threshold]")
+    ) as HTMLInputElement[];
 
     expect(toolbar?.style.flexWrap).toBe("nowrap");
     expect(panel?.style.flexDirection).toBe("column");
@@ -465,6 +471,24 @@ describe("market-content-entry", () => {
     ).toContain("每项取值 >= 输入值");
     expect(operators).toEqual(["≥", "≥", "≥", "≥", "≥", "≥", "≥"]);
     expect(conjunctions).toEqual(["且", "且", "且", "且", "且", "且"]);
+    expect(thresholdInputs.map((input) => input.placeholder)).toEqual([
+      "",
+      "",
+      "",
+      "",
+      "",
+      "",
+      ""
+    ]);
+    expect(thresholdControls.map((control) => control.textContent)).toEqual([
+      "评论≥条",
+      "时长≥秒",
+      "点赞≥次",
+      "转发≥次",
+      "完播率≥%",
+      "互动率≥%",
+      "播放中位数≥次"
+    ]);
     expect(buttons.map((button) => button.style.backgroundColor)).toEqual([
       "rgb(127, 29, 45)",
       "rgb(127, 29, 45)",
@@ -1294,7 +1318,7 @@ describe("market-content-entry", () => {
     expect(assignSelect?.disabled).toBe(true);
     expect(flowTypeSelect?.value).toBe("0");
     expect(flowTypeSelect?.disabled).toBe(true);
-    expect(finishRateInput?.placeholder).toBe("完播率>=");
+    expect(finishRateInput?.placeholder).toBe("");
 
     setSelectValue('[data-plugin-spread-filter="type"]', "2");
     dispatchChange('[data-plugin-spread-filter="type"]');