feat: wire market plugin controls

2026-04-20 20:17:48 +08:00
parent f6b2bdc862
commit 9b3c6756bb
4 changed files with 608 additions and 1 deletions
@@ -0,0 +1,137 @@
+export interface PluginToolbarHandlers {
+  onApplyFilter(): Promise<void> | void;
+  onApplySort(): Promise<void> | void;
+  onExport(): Promise<void> | void;
+}
+
+export interface PluginToolbarDom {
+  exportButton: HTMLButtonElement;
+  filterApplyButton: HTMLButtonElement;
+  personalFilterInput: HTMLInputElement;
+  root: HTMLElement;
+  singleFilterInput: HTMLInputElement;
+  sortApplyButton: HTMLButtonElement;
+  sortDirectionSelect: HTMLSelectElement;
+  sortFieldSelect: HTMLSelectElement;
+}
+
+export function ensurePluginToolbar(
+  document: Document,
+  handlers: PluginToolbarHandlers
+): PluginToolbarDom {
+  const existingRoot = document.querySelector(
+    "[data-plugin-toolbar='root']"
+  ) as HTMLElement | null;
+  if (existingRoot) {
+    return readToolbarDom(existingRoot);
+  }
+
+  const root = document.createElement("section");
+  root.dataset.pluginToolbar = "root";
+
+  const singleFilterInput = document.createElement("input");
+  singleFilterInput.type = "number";
+  singleFilterInput.step = "0.01";
+  singleFilterInput.dataset.pluginFilterSingle = "input";
+
+  const personalFilterInput = document.createElement("input");
+  personalFilterInput.type = "number";
+  personalFilterInput.step = "0.01";
+  personalFilterInput.dataset.pluginFilterPersonal = "input";
+
+  const filterApplyButton = document.createElement("button");
+  filterApplyButton.type = "button";
+  filterApplyButton.dataset.pluginFilterApply = "button";
+  filterApplyButton.textContent = "应用筛选";
+
+  const sortFieldSelect = document.createElement("select");
+  sortFieldSelect.dataset.pluginSortField = "select";
+  appendOption(sortFieldSelect, "", "不排序");
+  appendOption(sortFieldSelect, "singleVideoAfterSearchRate", "单视频看后搜率");
+  appendOption(sortFieldSelect, "personalVideoAfterSearchRate", "个人视频看后搜率");
+
+  const sortDirectionSelect = document.createElement("select");
+  sortDirectionSelect.dataset.pluginSortDirection = "select";
+  appendOption(sortDirectionSelect, "desc", "降序");
+  appendOption(sortDirectionSelect, "asc", "升序");
+
+  const sortApplyButton = document.createElement("button");
+  sortApplyButton.type = "button";
+  sortApplyButton.dataset.pluginSortApply = "button";
+  sortApplyButton.textContent = "应用排序";
+
+  const exportButton = document.createElement("button");
+  exportButton.type = "button";
+  exportButton.dataset.pluginExport = "button";
+  exportButton.textContent = "导出CSV";
+
+  root.append(
+    singleFilterInput,
+    personalFilterInput,
+    filterApplyButton,
+    sortFieldSelect,
+    sortDirectionSelect,
+    sortApplyButton,
+    exportButton
+  );
+  document.body.prepend(root);
+
+  filterApplyButton.addEventListener("click", () => {
+    void handlers.onApplyFilter();
+  });
+  sortApplyButton.addEventListener("click", () => {
+    void handlers.onApplySort();
+  });
+  exportButton.addEventListener("click", () => {
+    void handlers.onExport();
+  });
+
+  return {
+    exportButton,
+    filterApplyButton,
+    personalFilterInput,
+    root,
+    singleFilterInput,
+    sortApplyButton,
+    sortDirectionSelect,
+    sortFieldSelect
+  };
+}
+
+function appendOption(
+  select: HTMLSelectElement,
+  value: string,
+  label: string
+): void {
+  const option = select.ownerDocument.createElement("option");
+  option.value = value;
+  option.textContent = label;
+  select.appendChild(option);
+}
+
+function readToolbarDom(root: HTMLElement): PluginToolbarDom {
+  return {
+    exportButton: root.querySelector(
+      '[data-plugin-export="button"]'
+    ) as HTMLButtonElement,
+    filterApplyButton: root.querySelector(
+      '[data-plugin-filter-apply="button"]'
+    ) as HTMLButtonElement,
+    personalFilterInput: root.querySelector(
+      '[data-plugin-filter-personal="input"]'
+    ) as HTMLInputElement,
+    root,
+    singleFilterInput: root.querySelector(
+      '[data-plugin-filter-single="input"]'
+    ) as HTMLInputElement,
+    sortApplyButton: root.querySelector(
+      '[data-plugin-sort-apply="button"]'
+    ) as HTMLButtonElement,
+    sortDirectionSelect: root.querySelector(
+      '[data-plugin-sort-direction="select"]'
+    ) as HTMLSelectElement,
+    sortFieldSelect: root.querySelector(
+      '[data-plugin-sort-field="select"]'
+    ) as HTMLSelectElement
+  };
+}