fix: 优化设置页检索数据源展示

l0o0 · l0o0 · commit ad82eea515e2 · 2026-04-08T23:07:19.000+08:00
diff --git a/addon/chrome/content/preferences-main.xhtml b/addon/chrome/content/preferences-main.xhtml
@@ -65,33 +65,39 @@
       preference="metadataSource"
       disabled="true"
     ></html:input>
-    <html:div>
-      <button
-        id="zotero-prefpane-__addonRef__-metadata-source-button"
-        data-l10n-id="label-choose-source"
-      ></button>
-      <html:div id="metadata-source-dropdown" class="dropdown-content">
-        <checkbox
-          disabled="true"
-          native="true"
-          class="metadata-drop-item"
-          value="CNKI"
-          data-l10n-id="label-metadata-source-cnki"
-        />
-        <checkbox
-          class="metadata-drop-item"
-          native="true"
-          value="WanFangData"
-          data-l10n-id="label-metadata-source-wanfangdata"
-        />
-        <checkbox
-          class="metadata-drop-item"
-          native="true"
-          value="Yiigle"
-          data-l10n-id="label-metadata-source-yiigle"
-        />
-      </html:div>
-    </html:div>
+    <button
+      id="zotero-prefpane-__addonRef__-metadata-source-button"
+      type="menu"
+      data-l10n-id="label-choose-source"
+    >
+      <panel
+        id="metadata-source-panel"
+        position="after_start"
+        noautohide="false"
+      >
+        <vbox style="padding: 8px;">
+          <checkbox
+            disabled="true"
+            native="true"
+            class="metadata-drop-item"
+            value="CNKI"
+            data-l10n-id="label-metadata-source-cnki"
+          />
+          <checkbox
+            class="metadata-drop-item"
+            native="true"
+            value="WanFangData"
+            data-l10n-id="label-metadata-source-wanfangdata"
+          />
+          <checkbox
+            class="metadata-drop-item"
+            native="true"
+            value="Yiigle"
+            data-l10n-id="label-metadata-source-yiigle"
+          />
+        </vbox>
+      </panel>
+    </button>
     <image
       class="help-icon"
       src="chrome://jasminum/content/icons/help.svg"
diff --git a/addon/chrome/content/prefpanel.css b/addon/chrome/content/prefpanel.css
@@ -12,28 +12,6 @@
     --dropdown-shadow-color: rgba(255, 255, 255, 0.2);
   }
 }
-.dropdown-content {
-  display: none;
-  position: absolute;
-  background-color: var(--dropdown-bg-color);
-  border: 1px solid var(--dropdown-border-color);
-  box-shadow: 0px 8px 16px var(--dropdown-shadow-color);
-  z-index: 1;
-  padding: 8px 16px;
-  font-size: 12px;
-  cursor: pointer;
-  border-radius: 4px;
-  color: var(--dropdown-text-color);
-}
-.dropdown-content label {
-  display: block;
-  margin: 5px 0;
-  cursor: pointer;
-  color: var(--dropdown-text-color);
-}
-.show {
-  display: block;
-}
 
 .hidden {
   display: none;
diff --git a/src/modules/preferences/main.ts b/src/modules/preferences/main.ts
@@ -214,37 +214,39 @@ function bindPrefEvents(doc: Document) {
       }
     });
 
-  // metadata source dropdown
-  doc
-    .querySelector(`#zotero-prefpane-${config.addonRef}-metadata-source-button`)
-    ?.addEventListener("click", (e) => {
-      e.stopPropagation(); // 阻止事件冒泡
-      const pvalues = (getPref("metadataSource") as string).split(", ");
-      doc.querySelectorAll("checkbox.metadata-drop-item")!.forEach((e: any) => {
-        e.checked = pvalues.includes(e.getAttribute("value")!);
-      });
-      doc.querySelector("#metadata-source-dropdown")?.classList.toggle("show");
+  // metadata source panel
+  const metadataButton = doc.querySelector(
+    `#zotero-prefpane-${config.addonRef}-metadata-source-button`,
+  );
+  const metadataPanel = doc.querySelector("#metadata-source-panel");
+
+  // Update checkbox states when panel opens
+  metadataPanel?.addEventListener("popupshowing", () => {
+    const pvalues = (getPref("metadataSource") as string).split(", ");
+    doc.querySelectorAll("checkbox.metadata-drop-item")!.forEach((e: any) => {
+      e.checked = pvalues.includes(e.getAttribute("value")!);
     });
+  });
 
-  doc
-    .querySelector("#metadata-source-dropdown")
-    ?.addEventListener("click", (e) => {
-      const checkbox = (e.target as HTMLElement).closest(
-        ".metadata-drop-item",
-      )!;
-      let pvalues = getPref("metadataSource").split(", ") || ["CNKI"];
-      if (checkbox.getAttribute("checked") == "true") {
-        const checkedSource = checkbox.getAttribute("value")!;
-        if (!pvalues.includes(checkedSource)) {
-          pvalues.push(checkedSource);
-        }
-      } else {
-        pvalues = pvalues.filter(
-          (option) => option !== checkbox.getAttribute("value")!,
-        );
+  // Handle checkbox changes
+  metadataPanel?.addEventListener("command", (e) => {
+    const checkbox = (e.target as HTMLElement).closest(
+      ".metadata-drop-item",
+    ) as any;
+    if (!checkbox) return;
+
+    let pvalues = getPref("metadataSource").split(", ") || ["CNKI"];
+    const value = checkbox.getAttribute("value")!;
+
+    if (checkbox.checked) {
+      if (!pvalues.includes(value)) {
+        pvalues.push(value);
       }
-      setPref("metadataSource", pvalues.join(", "));
-    });
+    } else {
+      pvalues = pvalues.filter((option) => option !== value);
+    }
+    setPref("metadataSource", pvalues.join(", "));
+  });
 
   doc
     .querySelector(
