style(FileTree): 继承字体族以保持视觉一致性

修改 FileTree 组件的样式，使其字体族继承自父元素，确保与应用程序其他部分的视觉风格统一。

index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=Fira+Code:wght@400;500&family=Noto+Serif+SC:wght@400;700&family=ZCOOL+KuaiLe&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=Fira+Code:wght@400;500&family=Noto+Serif+SC:wght@400;700&family=M+PLUS+Rounded+1c:wght@400;500&family=Zen+Maru+Gothic:wght@400;500&family=JetBrains+Mono:wght@400;500&family=Roboto+Mono:wght@400;500&family=Source+Code+Pro:wght@400;500&display=swap" rel="stylesheet">
     <!-- 引入霞鹜文楷 -->
     <link rel="stylesheet" href="https://npm.elemecdn.com/lxgw-wenkai-screen-web/style.css" media="print" onload="this.media='all'">
   </head>

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 用于保存
           <div class="settings-label">应用字体</div>
           <a-select :value="fontFamily" style="width: 100%" @change="setFontFamily">
             <a-select-option value="default">系统默认</a-select-option>
-            <a-select-option value="lxgw">霞鹜文楷 (LXGW WenKai)</a-select-option>
+            <a-select-option value="sans">思源黑体 (Noto Sans)</a-select-option>
             <a-select-option value="serif">思源宋体 (Noto Serif)</a-select-option>
-            <a-select-option value="zcool">站酷快乐体 (演示用)</a-select-option>
+            <a-select-option value="lxgw">霞鹜文楷 (LXGW WenKai)</a-select-option>
+            <a-select-option value="rounded">圆体 (M PLUS Rounded)</a-select-option>
+            <a-select-option value="zen">丸黑 (Zen Maru Gothic)</a-select-option>
           </a-select>
         </div>
         <div class="settings-item">
@@ -296,6 +305,9 @@ const { state } = useFileTree(); // 需要获取 rootPath 用于保存
           <a-select :value="codeFontFamily" style="width: 100%" @change="setCodeFontFamily">
             <a-select-option value="default">系统默认 (Monospace)</a-select-option>
             <a-select-option value="fira">Fira Code</a-select-option>
+            <a-select-option value="jetbrains">JetBrains Mono</a-select-option>
+            <a-select-option value="roboto">Roboto Mono</a-select-option>
+            <a-select-option value="source">Source Code Pro</a-select-option>
           </a-select>
         </div>
       </a-modal>

src/components/FileTree.vue

@@ -410,6 +410,7 @@ const handleModalOk = async () => {
 :deep(.ant-tree) {
   background: transparent;
   color: inherit;
+  font-family: inherit;
 }
 
 :deep(.ant-tree-treenode) {

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();
   };
 

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 {