Style plugin actions and clean local artifacts

This commit is contained in:
2026-04-29 13:49:02 +08:00
parent b1f2db8552
commit 4f1f80b79b
4 changed files with 103 additions and 16 deletions
+56 -14
View File
@@ -17,6 +17,8 @@ export interface PluginToolbarDom {
root: HTMLElement;
}
const PLUGIN_ACTION_BUTTON_STYLE_ID = "sces-plugin-action-button-style";
export function isPluginToolbarMounted(
root: HTMLElement,
document: Document
@@ -29,6 +31,8 @@ export function ensurePluginToolbar(
document: Document,
handlers: PluginToolbarHandlers
): PluginToolbarDom {
ensurePluginActionButtonTheme(document);
const existingRoot = document.querySelector(
"[data-plugin-toolbar='root']"
) as HTMLElement | null;
@@ -430,7 +434,7 @@ function applyNativeControlStyles(
}
[controls.exportButton, controls.batchSubmitButton].forEach((button) => {
applyPrimaryButtonStyles(button, Boolean(primaryButton));
applyPrimaryButtonStyles(button);
button.style.whiteSpace = "nowrap";
});
@@ -449,21 +453,18 @@ function applyNativeControlStyles(
}
function applyPrimaryButtonStyles(
button: HTMLButtonElement,
isUsingNativePrimaryButtonClass: boolean
button: HTMLButtonElement
): 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.backgroundColor = "#7f1d2d";
button.style.border = "1px solid #7f1d2d";
button.style.borderRadius = "8px";
button.style.color = "#ffffff";
button.style.height = "32px";
button.style.padding = "0 15px";
button.style.boxSizing = "border-box";
button.style.fontWeight = "600";
button.style.transition =
"background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease";
}
function applyStatusStyles(statusText: HTMLElement): void {
@@ -474,6 +475,47 @@ function applyStatusStyles(statusText: HTMLElement): void {
statusText.style.whiteSpace = "nowrap";
}
function ensurePluginActionButtonTheme(document: Document): void {
if (document.getElementById(PLUGIN_ACTION_BUTTON_STYLE_ID)) {
return;
}
const style = document.createElement("style");
style.id = PLUGIN_ACTION_BUTTON_STYLE_ID;
style.textContent = `
[data-plugin-export="button"]:hover:not(:disabled),
[data-plugin-batch-submit="button"]:hover:not(:disabled) {
background-color: #6d1627 !important;
border-color: #6d1627 !important;
}
[data-plugin-export="button"]:active:not(:disabled),
[data-plugin-batch-submit="button"]:active:not(:disabled) {
background-color: #58111f !important;
border-color: #58111f !important;
transform: translateY(1px);
}
[data-plugin-export="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;
}
[data-plugin-export="button"]:disabled,
[data-plugin-batch-submit="button"]:disabled {
background-color: #c89ca4 !important;
border-color: #c89ca4 !important;
color: rgba(255, 255, 255, 0.95) !important;
cursor: not-allowed !important;
opacity: 1 !important;
transform: none !important;
box-shadow: none !important;
}
`;
document.head.appendChild(style);
}
function normalizeText(value: string | null | undefined): string {
return value?.replace(/\s+/g, " ").trim() ?? "";
}