feat: export audience profiles by author ids

src/content/market/plugin-toolbar.ts

@@ -6,10 +6,12 @@ import type {
 export interface PluginToolbarHandlers {
   onExport(): Promise<void> | void;
   onExportAudienceProfile(): Promise<void> | void;
+  onExportAudienceProfileByIds(): Promise<void> | void;
   onSubmitBatch(): Promise<void> | void;
 }
 
 export interface PluginToolbarDom {
+  audienceProfileByIdExportButton: HTMLButtonElement;
   audienceProfileExportButton: HTMLButtonElement;
   batchSubmitButton: HTMLButtonElement;
   exportButton: HTMLButtonElement;
@@ -39,8 +41,16 @@ export function ensurePluginToolbar(
     "[data-plugin-toolbar='root']"
   ) as HTMLElement | null;
   if (existingRoot) {
-    ensureToolbarMounted(existingRoot, document);
-    return readToolbarDom(existingRoot);
+    if (
+      existingRoot.querySelector(
+        '[data-plugin-export-audience-profile-by-id="button"]'
+      )
+    ) {
+      ensureToolbarMounted(existingRoot, document);
+      return readToolbarDom(existingRoot);
+    }
+
+    existingRoot.remove();
   }
 
   const root = document.createElement("section");
@@ -74,6 +84,11 @@ export function ensurePluginToolbar(
   audienceProfileExportButton.dataset.pluginExportAudienceProfile = "button";
   audienceProfileExportButton.textContent = "导出画像CSV";
 
+  const audienceProfileByIdExportButton = document.createElement("button");
+  audienceProfileByIdExportButton.type = "button";
+  audienceProfileByIdExportButton.dataset.pluginExportAudienceProfileById = "button";
+  audienceProfileByIdExportButton.textContent = "按ID导出画像CSV";
+
   const batchSubmitButton = document.createElement("button");
   batchSubmitButton.type = "button";
   batchSubmitButton.dataset.pluginBatchSubmit = "button";
@@ -88,6 +103,7 @@ export function ensurePluginToolbar(
     exportCustomPagesInput,
     exportButton,
     audienceProfileExportButton,
+    audienceProfileByIdExportButton,
     batchSubmitButton,
     exportStatusText
   );
@@ -95,6 +111,7 @@ export function ensurePluginToolbar(
   document.body.appendChild(root);
   applyNativeControlStyles(document, {
     audienceProfileExportButton,
+    audienceProfileByIdExportButton,
     batchSubmitButton,
     exportButton,
     exportCustomPagesInput,
@@ -108,12 +125,16 @@ export function ensurePluginToolbar(
   audienceProfileExportButton.addEventListener("click", () => {
     void handlers.onExportAudienceProfile();
   });
+  audienceProfileByIdExportButton.addEventListener("click", () => {
+    void handlers.onExportAudienceProfileByIds();
+  });
   batchSubmitButton.addEventListener("click", () => {
     void handlers.onSubmitBatch();
   });
   exportRangeSelect.addEventListener("change", () => {
     syncCustomPagesInputVisibility({
       batchSubmitButton,
+      audienceProfileByIdExportButton,
       audienceProfileExportButton,
       exportButton,
       exportCustomPagesInput,
@@ -125,6 +146,7 @@ export function ensurePluginToolbar(
 
   const toolbarDom = {
     audienceProfileExportButton,
+    audienceProfileByIdExportButton,
     batchSubmitButton,
     exportButton,
     exportCustomPagesInput,
@@ -150,6 +172,9 @@ function appendOption(
 
 function readToolbarDom(root: HTMLElement): PluginToolbarDom {
   const toolbarDom = {
+    audienceProfileByIdExportButton: root.querySelector(
+      '[data-plugin-export-audience-profile-by-id="button"]'
+    ) as HTMLButtonElement,
     audienceProfileExportButton: root.querySelector(
       '[data-plugin-export-audience-profile="button"]'
     ) as HTMLButtonElement,
@@ -235,6 +260,7 @@ export function setToolbarBusyState(
 ): void {
   [
     toolbar.batchSubmitButton,
+    toolbar.audienceProfileByIdExportButton,
     toolbar.audienceProfileExportButton,
     toolbar.exportButton,
     toolbar.exportRangeSelect,
@@ -433,6 +459,7 @@ function applyNativeControlStyles(
   document: Document,
   controls: {
     audienceProfileExportButton: HTMLButtonElement;
+    audienceProfileByIdExportButton: HTMLButtonElement;
     batchSubmitButton: HTMLButtonElement;
     exportButton: HTMLButtonElement;
     exportCustomPagesInput: HTMLInputElement;
@@ -450,12 +477,14 @@ function applyNativeControlStyles(
   if (nativeButton) {
     controls.exportButton.className = nativeButton.className;
     controls.audienceProfileExportButton.className = nativeButton.className;
+    controls.audienceProfileByIdExportButton.className = nativeButton.className;
     controls.batchSubmitButton.className = nativeButton.className;
   }
 
   [
     controls.exportButton,
     controls.audienceProfileExportButton,
+    controls.audienceProfileByIdExportButton,
     controls.batchSubmitButton
   ].forEach((button) => {
     applyPrimaryButtonStyles(button);
@@ -509,6 +538,7 @@ function ensurePluginActionButtonTheme(document: Document): void {
   style.textContent = `
     [data-plugin-export="button"]:hover:not(:disabled),
     [data-plugin-export-audience-profile="button"]:hover:not(:disabled),
+    [data-plugin-export-audience-profile-by-id="button"]:hover:not(:disabled),
     [data-plugin-batch-submit="button"]:hover:not(:disabled) {
       background-color: #6d1627 !important;
       border-color: #6d1627 !important;
@@ -516,6 +546,7 @@ function ensurePluginActionButtonTheme(document: Document): void {
 
     [data-plugin-export="button"]:active:not(:disabled),
     [data-plugin-export-audience-profile="button"]:active:not(:disabled),
+    [data-plugin-export-audience-profile-by-id="button"]:active:not(:disabled),
     [data-plugin-batch-submit="button"]:active:not(:disabled) {
       background-color: #58111f !important;
       border-color: #58111f !important;
@@ -524,6 +555,7 @@ function ensurePluginActionButtonTheme(document: Document): void {
 
     [data-plugin-export="button"]:focus-visible,
     [data-plugin-export-audience-profile="button"]:focus-visible,
+    [data-plugin-export-audience-profile-by-id="button"]:focus-visible,
     [data-plugin-batch-submit="button"]:focus-visible {
       outline: none !important;
       box-shadow: 0 0 0 3px rgba(127, 29, 45, 0.2) !important;
@@ -531,6 +563,7 @@ function ensurePluginActionButtonTheme(document: Document): void {
 
     [data-plugin-export="button"]:disabled,
     [data-plugin-export-audience-profile="button"]:disabled,
+    [data-plugin-export-audience-profile-by-id="button"]:disabled,
     [data-plugin-batch-submit="button"]:disabled {
       background-color: #c89ca4 !important;
       border-color: #c89ca4 !important;