style: match market actions to native primary buttons

This commit is contained in:
admin123 2026-04-23 17:00:38 +08:00
parent bee8cb0207
commit fb45f0cea8
2 changed files with 51 additions and 0 deletions

View File

@ -416,7 +416,11 @@ function applyNativeControlStyles(
exportRangeSelect: HTMLSelectElement; exportRangeSelect: HTMLSelectElement;
} }
): void { ): void {
const primaryButton =
findButtonContainingText(document, "发布任务") ??
findButtonContainingText(document, "+发布任务");
const nativeButton = const nativeButton =
primaryButton ??
findNativeActionButton(document, "自定义指标") ?? findNativeActionButton(document, "自定义指标") ??
findNativeActionButton(document, "导出"); findNativeActionButton(document, "导出");
@ -426,6 +430,7 @@ function applyNativeControlStyles(
} }
[controls.exportButton, controls.batchSubmitButton].forEach((button) => { [controls.exportButton, controls.batchSubmitButton].forEach((button) => {
applyPrimaryButtonStyles(button, Boolean(primaryButton));
button.style.whiteSpace = "nowrap"; button.style.whiteSpace = "nowrap";
}); });
@ -443,6 +448,24 @@ function applyNativeControlStyles(
controls.exportCustomPagesInput.style.width = "72px"; controls.exportCustomPagesInput.style.width = "72px";
} }
function applyPrimaryButtonStyles(
button: HTMLButtonElement,
isUsingNativePrimaryButtonClass: boolean
): void {
if (!isUsingNativePrimaryButtonClass) {
button.style.backgroundColor = "#fe346e";
button.style.border = "1px solid #fe346e";
button.style.borderRadius = "8px";
button.style.color = "#ffffff";
button.style.height = "32px";
button.style.padding = "0 15px";
} else {
button.style.color = "#ffffff";
}
button.style.boxSizing = "border-box";
}
function applyStatusStyles(statusText: HTMLElement): void { function applyStatusStyles(statusText: HTMLElement): void {
statusText.style.color = "#64748b"; statusText.style.color = "#64748b";
statusText.style.fontSize = "12px"; statusText.style.fontSize = "12px";
@ -455,6 +478,23 @@ function normalizeText(value: string | null | undefined): string {
return value?.replace(/\s+/g, " ").trim() ?? ""; return value?.replace(/\s+/g, " ").trim() ?? "";
} }
function findButtonContainingText(
root: ParentNode,
text: string
): HTMLElement | null {
const document = root instanceof Document ? root : root.ownerDocument;
if (!document) {
return null;
}
const candidates = Array.from(root.querySelectorAll("button")).filter(
(element): element is HTMLElement =>
element instanceof document.defaultView!.HTMLElement
);
return candidates.find((element) => normalizeText(element.textContent).includes(text)) ?? null;
}
function findDirectChildAnchor( function findDirectChildAnchor(
ancestor: HTMLElement, ancestor: HTMLElement,
descendant: HTMLElement descendant: HTMLElement

View File

@ -245,6 +245,17 @@ describe("market-content-entry", () => {
expect(document.querySelector('[data-plugin-export="button"]')).not.toBeNull(); expect(document.querySelector('[data-plugin-export="button"]')).not.toBeNull();
expect(document.querySelector('[data-plugin-batch-submit="button"]')).not.toBeNull(); expect(document.querySelector('[data-plugin-batch-submit="button"]')).not.toBeNull();
expect(document.querySelector('[data-plugin-export-status="text"]')).not.toBeNull(); expect(document.querySelector('[data-plugin-export-status="text"]')).not.toBeNull();
const exportButton = document.querySelector(
'[data-plugin-export="button"]'
) as HTMLButtonElement | null;
const batchSubmitButton = document.querySelector(
'[data-plugin-batch-submit="button"]'
) as HTMLButtonElement | null;
expect(exportButton?.style.backgroundColor).toBe("rgb(254, 52, 110)");
expect(batchSubmitButton?.style.backgroundColor).toBe("rgb(254, 52, 110)");
expect(exportButton?.style.color).toBe("rgb(255, 255, 255)");
expect(batchSubmitButton?.style.color).toBe("rgb(255, 255, 255)");
}); });
test("remounts the plugin action bar when the native market action row appears later", async () => { test("remounts the plugin action bar when the native market action row appears later", async () => {