feat: standardize LoRA Manager frontend with CSS classes and improved styles

- Replace inline styles with CSS classes for better maintainability
- Update class names to use consistent 'lm-' prefix across components
- Add comprehensive CSS stylesheet with tooltip system and responsive layouts
- Improve accessibility with proper focus states and keyboard navigation
- Implement hover and active state transitions for enhanced UX
- Refactor expand button to use CSS classes instead of inline styles
- Update test files to reflect new class naming convention
This commit is contained in:
Will Miao
2025-10-21 17:42:32 +08:00
parent 49b9b7a5ea
commit f4eb916914
8 changed files with 584 additions and 569 deletions

View File

@@ -0,0 +1,37 @@
const STYLE_ID = "lm-lora-shared-styles";
let stylePromise = null;
function injectStyles(cssText) {
let styleEl = document.getElementById(STYLE_ID);
if (!styleEl) {
styleEl = document.createElement("style");
styleEl.id = STYLE_ID;
document.head.appendChild(styleEl);
}
styleEl.textContent = cssText;
}
async function loadCssText() {
const cssUrl = new URL("./lm_styles.css", import.meta.url);
const response = await fetch(cssUrl);
if (!response.ok) {
throw new Error(`Failed to load ${cssUrl}`);
}
return await response.text();
}
export function ensureLmStyles() {
if (!stylePromise) {
stylePromise = loadCssText()
.then((cssText) => {
injectStyles(cssText);
return true;
})
.catch((error) => {
console.warn("Failed to load LoRA Manager styles", error);
stylePromise = null;
return false;
});
}
return stylePromise;
}