Refactor theme font handling and preview logic

Moved font configuration to be managed via theme.css, eliminating the need for separate font initialization and caching. Updated backend to generate @font-face rules and font variables in theme.css. Frontend now uses a dedicated style tag for real-time font preview in the theme config page, and removes legacy font cache logic for improved consistency.
2026-01-10 22:19:06 +08:00 · 2026-01-04 18:48:16 +08:00 · 2026-01-04 18:48:16 +08:00 · c6ec2126e0
commit c6ec2126e0
parent f1756c4d1c
3 changed files with 72 additions and 49 deletions
--- a/packages/napcat-webui-backend/index.ts
+++ b/packages/napcat-webui-backend/index.ts
@ -182,16 +182,56 @@ export async function InitWebUi (logger: ILogWrapper, pathWrapper: NapCatPathWra

  // 如果是自定义色彩，构建一个css文件
  app.use('/files/theme.css', async (_req, res) => {
-    const colors = await WebUiConfig.GetTheme();
+    const theme = await WebUiConfig.GetTheme();
+    const fontMode = theme.fontMode || 'system';

-    let css = ':root, .light, [data-theme="light"] {';
-    for (const key in colors.light) {
-      css += `${key}: ${colors.light[key]};`;
+    let css = '';
+
+    // 生成字体 @font-face
+    if (fontMode === 'aacute') {
+      css += `
+@font-face {
+  font-family: 'Aa偷吃可爱长大的';
+  src: url('/webui/fonts/AaCute.woff') format('woff');
+  font-display: swap;
+}
+`;
+    } else if (fontMode === 'custom') {
+      css += `
+@font-face {
+  font-family: 'CustomFont';
+  src: url('/webui/fonts/CustomFont.woff') format('woff');
+  font-display: swap;
+}
+`;
+    }
+
+    // 生成颜色主题和字体变量
+    css += ':root, .light, [data-theme="light"] {';
+    for (const key in theme.light) {
+      css += `${key}: ${theme.light[key]};`;
+    }
+    // 添加字体变量
+    if (fontMode === 'aacute') {
+      css += "--font-family-base: 'Aa偷吃可爱长大的', var(--font-family-fallbacks) !important;";
+    } else if (fontMode === 'custom') {
+      css += "--font-family-base: 'CustomFont', var(--font-family-fallbacks) !important;";
+    } else {
+      css += '--font-family-base: var(--font-family-fallbacks) !important;';
    }
    css += '}';
+
    css += '.dark, [data-theme="dark"] {';
-    for (const key in colors.dark) {
-      css += `${key}: ${colors.dark[key]};`;
+    for (const key in theme.dark) {
+      css += `${key}: ${theme.dark[key]};`;
+    }
+    // 添加字体变量
+    if (fontMode === 'aacute') {
+      css += "--font-family-base: 'Aa偷吃可爱长大的', var(--font-family-fallbacks) !important;";
+    } else if (fontMode === 'custom') {
+      css += "--font-family-base: 'CustomFont', var(--font-family-fallbacks) !important;";
+    } else {
+      css += '--font-family-base: var(--font-family-fallbacks) !important;';
    }
    css += '}';

--- a/packages/napcat-webui-frontend/src/pages/dashboard/config/theme.tsx
+++ b/packages/napcat-webui-frontend/src/pages/dashboard/config/theme.tsx
@ -268,15 +268,17 @@ const ThemeConfigCard = () => {

  // 找到已保存的主题名称
  const savedThemeName = useMemo(() => {
-    if (!originalDataRef.current) return null;
-    return themes.find(t => isThemeColorsEqual(t.theme, originalDataRef.current!))?.name || '自定义';
-  }, [dataLoaded, hasUnsavedChanges]);
+    const savedData = originalDataRef.current || data;
+    if (!savedData) return null;
+    return themes.find(t => isThemeColorsEqual(t.theme, savedData))?.name || '自定义';
+  }, [data, dataLoaded, hasUnsavedChanges]);

  // 已保存的字体模式显示名称
  const savedFontModeDisplayName = useMemo(() => {
-    const mode = originalDataRef.current?.fontMode || 'aacute';
+    const savedData = originalDataRef.current || data;
+    const mode = savedData?.fontMode || 'aacute';
    return fontModeNames[mode] || mode;
-  }, [dataLoaded, hasUnsavedChanges]);
+  }, [data, dataLoaded, hasUnsavedChanges]);

  if (loading) return <PageLoading loading />;

--- a/packages/napcat-webui-frontend/src/utils/theme.ts
+++ b/packages/napcat-webui-frontend/src/utils/theme.ts
@ -3,24 +3,27 @@ import { request } from './request';
 const style = document.createElement('style');
 document.head.appendChild(style);

-// 字体样式标签
-const fontStyle = document.createElement('style');
-fontStyle.id = 'dynamic-font-style';
-document.head.appendChild(fontStyle);
+// 用于主题配置页面实时预览字体的临时样式标签
+const fontPreviewStyle = document.createElement('style');
+fontPreviewStyle.id = 'font-preview-style';
+document.head.appendChild(fontPreviewStyle);

 export function loadTheme () {
  request('/files/theme.css?_t=' + Date.now())
    .then((res) => res.data)
    .then((css) => {
      style.innerHTML = css;
+      // 清除预览样式，使用 theme.css 中的正式配置
+      fontPreviewStyle.innerHTML = '';
+      document.documentElement.style.removeProperty('--font-family-base');
    })
    .catch(() => {
      console.error('Failed to load theme.css');
    });
 }

-// 动态加载字体 CSS
-const loadFontCSS = (mode: string) => {
+// 动态加载字体 CSS（用于预览）
+const loadFontCSSForPreview = (mode: string) => {
  let css = '';

  if (mode === 'aacute') {
@ -39,7 +42,7 @@ const loadFontCSS = (mode: string) => {
 }`;
  }

-  fontStyle.innerHTML = css;
+  fontPreviewStyle.innerHTML = css;
 };

 export const colorKeys = [
@ -168,11 +171,12 @@ export const generateTheme = (theme: ThemeConfig, validField?: string) => {
  return css;
 };

+// 用于主题配置页面实时预览字体
 export const applyFont = (mode: string) => {
  const root = document.documentElement;

-  // 先加载字体 CSS
-  loadFontCSS(mode);
+  // 加载字体 CSS 用于预览
+  loadFontCSSForPreview(mode);

  if (mode === 'aacute') {
    root.style.setProperty('--font-family-base', "'Aa偷吃可爱长大的', var(--font-family-fallbacks)", 'important');
@ -184,36 +188,13 @@ export const applyFont = (mode: string) => {
  }
 };

-const FONT_MODE_CACHE_KEY = 'webui-font-mode-cache';
-
+// 字体配置已通过 theme.css 加载，此函数仅用于兼容性保留
 export const initFont = () => {
-  // 先从缓存读取，立即应用
-  const cached = localStorage.getItem(FONT_MODE_CACHE_KEY);
-  if (cached) {
-    applyFont(cached);
-  } else {
-    // 默认使用系统字体
-    applyFont('system');
-  }
-
-  // 后台拉取最新配置并更新缓存
-  request('/api/base/Theme')
-    .then((res) => {
-      const data = res.data as { data: ThemeConfig; };
-      const fontMode = data?.data?.fontMode || 'system';
-      // 更新缓存
-      localStorage.setItem(FONT_MODE_CACHE_KEY, fontMode);
-      // 如果与当前不同，则应用新字体
-      if (fontMode !== cached) {
-        applyFont(fontMode);
-      }
-    })
-    .catch((e) => {
-      console.error('Failed to fetch font config', e);
-    });
+  // 字体现在由 theme.css 统一管理，无需单独初始化
 };

-// 保存时更新缓存
-export const updateFontCache = (fontMode: string) => {
-  localStorage.setItem(FONT_MODE_CACHE_KEY, fontMode);
+// 保存主题后调用 loadTheme 会使用 theme.css 中的正式配置
+// 此函数保留用于兼容性
+export const updateFontCache = (_fontMode: string) => {
+  // 不再需要缓存，字体配置已在 theme.css 中
 };