MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-26 10:13:48 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor: custom fonts

Browse Source
This commit is contained in:
pa
2026-03-13 22:24:41 +09:00
parent 9ac18ac79e
commit 82122a4fab
12 changed files with 389 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/shared/utils/base/ui.js
View File

@@ -2,6 +2,8 @@ import { ref } from 'vue';
import { toast } from 'vue-sonner';
import {
APP_CJK_FONT_PACK_CONFIG,
APP_CJK_FONT_PACK_DEFAULT_KEY,
APP_FONT_CONFIG,
APP_FONT_DEFAULT_KEY,
THEME_COLORS,
@@ -19,6 +21,7 @@ const THEME_MODE_STYLE_ID = 'app-theme-mode-style';
const DEFAULT_THEME_COLOR_KEY = 'default';
const APP_FONT_LINK_ATTR = 'data-app-font';
const APP_CJK_FONT_PACK_LINK_ATTR = 'data-app-cjk-font-pack';
const themeColors = THEME_COLORS.map((theme) => ({
...theme,
@@ -166,44 +169,89 @@ function resolveAppFontFamily(fontKey) {
};
}
function ensureAppFontLinks(fontKey) {
function ensureDynamicFontStyle(attrName, styleKey, cssImport) {
const head = document.head;
if (!head) {
return;
}
document
.querySelectorAll(`style[${APP_FONT_LINK_ATTR}]`)
.forEach((styleEl) => {
if (styleEl.getAttribute(APP_FONT_LINK_ATTR) !== fontKey) {
styleEl.remove();
}
});
document.querySelectorAll(`style[${attrName}]`).forEach((styleEl) => {
if (styleEl.getAttribute(attrName) !== styleKey) {
styleEl.remove();
}
});
const config = APP_FONT_CONFIG[fontKey];
if (!config?.cssImport) {
if (!cssImport) {
return;
}
const existing = document.querySelector(
`style[${APP_FONT_LINK_ATTR}="${fontKey}"]`
);
const existing = document.querySelector(`style[${attrName}="${styleKey}"]`);
if (existing) {
return;
}
const styleEl = document.createElement('style');
styleEl.setAttribute(APP_FONT_LINK_ATTR, fontKey);
styleEl.textContent = config.cssImport;
styleEl.setAttribute(attrName, styleKey);
styleEl.textContent = cssImport;
head.appendChild(styleEl);
}
function applyAppFontFamily(fontKey) {
function resolveAppCjkFontPack(packKey) {
const normalized = String(packKey || '')
.trim()
.toLowerCase();
if (APP_CJK_FONT_PACK_CONFIG[normalized]) {
return { key: normalized, ...APP_CJK_FONT_PACK_CONFIG[normalized] };
}
return {
key: APP_CJK_FONT_PACK_DEFAULT_KEY,
...APP_CJK_FONT_PACK_CONFIG[APP_CJK_FONT_PACK_DEFAULT_KEY]
};
}
function ensureAppCjkFontPackLinks(packKey) {
const config = APP_CJK_FONT_PACK_CONFIG[packKey];
ensureDynamicFontStyle(
APP_CJK_FONT_PACK_LINK_ATTR,
packKey,
config?.cssImport
);
}
function applyAppFontFamily(fontKey, customCssName) {
if (fontKey === 'custom') {
const cssName = String(customCssName || '').trim() || 'system-ui';
const root = document.documentElement;
root.style.setProperty('--font-western-primary', cssName);
ensureDynamicFontStyle(APP_FONT_LINK_ATTR, 'custom', null);
return {
key: 'custom',
...APP_FONT_CONFIG.custom,
cssName
};
}
const resolved = resolveAppFontFamily(fontKey);
const root = document.documentElement;
root.style.setProperty('--font-western-primary', resolved.cssName);
ensureDynamicFontStyle(
APP_FONT_LINK_ATTR,
resolved.key,
resolved.cssImport
);
ensureAppFontLinks(resolved.key);
return resolved;
}
function applyAppCjkFontPack(packKey) {
const resolved = resolveAppCjkFontPack(packKey);
const root = document.documentElement;
root.style.setProperty('--font-cjk-jp-primary', resolved.cssName.jp);
root.style.setProperty('--font-cjk-sc-primary', resolved.cssName.sc);
root.style.setProperty('--font-cjk-kr-primary', resolved.cssName.kr);
root.style.setProperty('--font-cjk-tc-primary', resolved.cssName.tc);
ensureAppCjkFontPackLinks(resolved.key);
return resolved;
}
@@ -461,6 +509,7 @@ export {
refreshCustomCss,
refreshCustomScript,
applyAppFontFamily,
applyAppCjkFontPack,
HueToHex,
HSVtoRGB,
formatJsonVars,