diff --git a/index.html b/index.html index d304317..0684736 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ - + diff --git a/src/App.vue b/src/App.vue index 86c9489..e94754b 100644 --- a/src/App.vue +++ b/src/App.vue @@ -107,7 +107,12 @@ const loadGlobalConfig = async () => { if (data) { // 恢复主题 if (data.theme) { - setGlobalTheme(data.theme.primaryColor, data.theme.isDark); + setGlobalTheme( + data.theme.primaryColor, + data.theme.isDark, + data.theme.fontFamily, + data.theme.codeFontFamily + ); } // 恢复历史记录 @@ -146,7 +151,9 @@ const saveGlobalConfig = async () => { }, theme: { primaryColor: primaryColor.value, - isDark: isDark.value + isDark: isDark.value, + fontFamily: fontFamily.value, + codeFontFamily: codeFontFamily.value } }); } @@ -172,7 +179,7 @@ const openDirectory = async (path) => { await saveGlobalConfig(); }; -watch([primaryColor, isDark], async () => { +watch([primaryColor, isDark, fontFamily, codeFontFamily], async () => { antdTheme.value = getAntdTheme(); // 主题变化时保存 await saveGlobalConfig(); @@ -286,9 +293,11 @@ const { state } = useFileTree(); // 需要获取 rootPath 用于保存
应用字体
系统默认 - 霞鹜文楷 (LXGW WenKai) + 思源黑体 (Noto Sans) 思源宋体 (Noto Serif) - 站酷快乐体 (演示用) + 霞鹜文楷 (LXGW WenKai) + 圆体 (M PLUS Rounded) + 丸黑 (Zen Maru Gothic)
@@ -296,6 +305,9 @@ const { state } = useFileTree(); // 需要获取 rootPath 用于保存 系统默认 (Monospace) Fira Code + JetBrains Mono + Roboto Mono + Source Code Pro
diff --git a/src/composables/useTheme.js b/src/composables/useTheme.js index 1b50f1e..fca361a 100644 --- a/src/composables/useTheme.js +++ b/src/composables/useTheme.js @@ -43,12 +43,30 @@ export function useTheme() { fontValue = '"Noto Serif SC", serif'; } else if (fontFamily.value === 'zcool') { fontValue = '"ZCOOL KuaiLe", cursive'; + } else if (fontFamily.value === 'mashan') { + fontValue = '"Ma Shan Zheng", cursive'; + } else if (fontFamily.value === 'longcang') { + fontValue = '"Long Cang", cursive'; + } else if (fontFamily.value === 'zhimangxing') { + fontValue = '"Zhi Mang Xing", cursive'; + } else if (fontFamily.value === 'huangyou') { + fontValue = '"ZCOOL QingKe HuangYou", sans-serif'; + } else if (fontFamily.value === 'xiaowei') { + fontValue = '"ZCOOL XiaoWei", serif'; + } else if (fontFamily.value === 'maocao') { + fontValue = '"Liu Jian Mao Cao", cursive'; } root.style.setProperty('--app-font-family', fontValue); let codeFontValue = 'SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace'; if (codeFontFamily.value === 'fira') { codeFontValue = '"Fira Code", monospace'; + } else if (codeFontFamily.value === 'jetbrains') { + codeFontValue = '"JetBrains Mono", monospace'; + } else if (codeFontFamily.value === 'roboto') { + codeFontValue = '"Roboto Mono", monospace'; + } else if (codeFontFamily.value === 'source') { + codeFontValue = '"Source Code Pro", monospace'; } root.style.setProperty('--editor-font-family', codeFontValue); @@ -79,6 +97,20 @@ export function useTheme() { const borderColor = isDark.value ? '#303030' : '#f0f0f0'; const hoverBackground = isDark.value ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0.04)'; + // 获取当前对应的字体栈字符串 + let fontStack = '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif'; + if (fontFamily.value === 'lxgw') fontStack = '"LXGW WenKai Screen", sans-serif'; + else if (fontFamily.value === 'serif') fontStack = '"Noto Serif SC", serif'; + else if (fontFamily.value === 'sans') fontStack = '"Noto Sans SC", sans-serif'; + else if (fontFamily.value === 'rounded') fontStack = '"M PLUS Rounded 1c", sans-serif'; + else if (fontFamily.value === 'zen') fontStack = '"Zen Maru Gothic", sans-serif'; + + let codeFontStack = 'SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace'; + if (codeFontFamily.value === 'fira') codeFontStack = '"Fira Code", monospace'; + else if (codeFontFamily.value === 'jetbrains') codeFontStack = '"JetBrains Mono", monospace'; + else if (codeFontFamily.value === 'roboto') codeFontStack = '"Roboto Mono", monospace'; + else if (codeFontFamily.value === 'source') codeFontStack = '"Source Code Pro", monospace'; + return { algorithm: isDark.value ? theme.darkAlgorithm : theme.defaultAlgorithm, token: { @@ -95,9 +127,11 @@ export function useTheme() { }; }; - const setGlobalTheme = (color, dark) => { + const setGlobalTheme = (color, dark, font, codeFont) => { if (color) primaryColor.value = color; if (typeof dark === 'boolean') isDark.value = dark; + if (font) fontFamily.value = font; + if (codeFont) codeFontFamily.value = codeFont; updateCSSVariables(); }; diff --git a/src/main.css b/src/main.css index 280b584..ff66bcb 100644 --- a/src/main.css +++ b/src/main.css @@ -27,7 +27,7 @@ body { color: var(--text-color); font-size: var(--app-font-size); line-height: 1.5; - font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei UI", system-ui, -apple-system, sans-serif; + font-family: var(--app-font-family, "Noto Sans SC", "PingFang SC", "Microsoft YaHei UI", system-ui, -apple-system, sans-serif); } button {