feat: 全新的主题和字体设置

package.json

@@ -59,6 +59,7 @@
     "@milkdown/utils": "^7.15.3",
     "@milkdown/vue": "^7.15.3",
     "@vue/runtime-dom": "^3.5.19",
+    "@vueuse/core": "^14.0.0",
     "autotoast.js": "^3.0.3",
     "docx": "^9.5.1",
     "font-list": "^1.5.1",

src/config/fonts.ts

@@ -1,11 +1,22 @@
-import type { FontConfig, FontConfigItem, FontType } from '@/types/font'
+import type { FontConfig, FontConfigItem, FontSizeConfig, FontSizeType, FontType } from '@/types/font'
 
 // 默认字体配置
 export const defaultFontConfig: FontConfig = {
   'editor-font': { label: '编辑器默认字体', value: '-apple-system, BlinkMacSystemFont, \'Segoe UI\', Helvetica, Arial, sans-serif' },
   'code-font': { label: '代码默认字体', value: '\'SFMono-Regular\', Consolas, \'Liberation Mono\', Menlo, monospace;' },
 }
 
+export const defaultFontSizeConfig: FontSizeConfig = {
+  'editor-font-size': '16px',
+  'code-font-size': '16px',
+  'editor-font-size-h1': '24px',
+  'editor-font-size-h2': '20px',
+  'editor-font-size-h3': '18px',
+  'editor-font-size-h4': '16px',
+  'editor-font-size-h5': '14px',
+  'editor-font-size-h6': '12px',
+}
+
 // 字体配置项
 export const fontConfig: Record<FontType, FontConfigItem> = {
   'editor-font': {
@@ -20,8 +31,78 @@ export const fontConfig: Record<FontType, FontConfigItem> = {
   },
 }
 
+// 字体尺寸配置项
+export const fontSizeConfig: Record<FontSizeType, FontConfigItem> = {
+  'editor-font-size': {
+    label: '编辑器字体大小',
+    desc: '文本编辑器的字体大小',
+    value: 'editor-font-size',
+  },
+  'code-font-size': {
+    label: '代码字体大小',
+    desc: '代码显示的字体大小',
+    value: 'code-font-size',
+  },
+  'editor-font-size-h1': {
+    label: '一级标题',
+    desc: '一级标题的字体大小',
+    value: 'editor-font-size-h1',
+  },
+  'editor-font-size-h2': {
+    label: '二级标题',
+    desc: '二级标题的字体大小',
+    value: 'editor-font-size-h2',
+  },
+  'editor-font-size-h3': {
+    label: '三级标题',
+    desc: '三级标题的字体大小',
+    value: 'editor-font-size-h3',
+  },
+  'editor-font-size-h4': {
+    label: '四级标题',
+    desc: '四级标题的字体大小',
+    value: 'editor-font-size-h4',
+  },
+  'editor-font-size-h5': {
+    label: '五级标题',
+    desc: '五级标题的字体大小',
+    value: 'editor-font-size-h5',
+  },
+  'editor-font-size-h6': {
+    label: '六级标题',
+    desc: '六级标题的字体大小',
+    value: 'editor-font-size-h6',
+  },
+}
+
 // CSS字体变量配置项
 export const fontCssVariables = {
   'editor-font': '--milkup-font-default',
   'code-font': '--milkup-font-code',
+
+}
+
+export const fontSizeCssVariables = {
+  'editor-font-size': '--milkup-font-size-default',
+  'code-font-size': '--milkup-font-size-code',
+  'editor-font-size-h1': '--milkup-font-size-h1',
+  'editor-font-size-h2': '--milkup-font-size-h2',
+  'editor-font-size-h3': '--milkup-font-size-h3',
+  'editor-font-size-h4': '--milkup-font-size-h4',
+  'editor-font-size-h5': '--milkup-font-size-h5',
+  'editor-font-size-h6': '--milkup-font-size-h6',
 }
+
+// 字体尺寸选项
+export const fontSizeOptions = [
+  { label: '12px', value: '12px' },
+  { label: '13px', value: '13px' },
+  { label: '14px', value: '14px' },
+  { label: '15px', value: '15px' },
+  { label: '16px', value: '16px' },
+  { label: '17px', value: '17px' },
+  { label: '18px', value: '18px' },
+  { label: '20px', value: '20px' },
+  { label: '22px', value: '22px' },
+  { label: '24px', value: '24px' },
+]

src/hooks/useConfig.ts

@@ -0,0 +1,57 @@
+import type { FontConfig, FontSizeConfig } from '@/types/font'
+import { useStorage } from '@vueuse/core'
+import { readonly, watch } from 'vue'
+
+import { defaultFontConfig, defaultFontSizeConfig } from '@/config/fonts'
+import { setNestedProperty } from '@/utils/tool'
+
+interface AppConfig extends Record<string, any> {
+  font: {
+    family: FontConfig
+    size: FontSizeConfig
+  }
+
+}
+
+const defaultConfig: AppConfig = {
+  font: {
+    family: defaultFontConfig,
+    size: defaultFontSizeConfig,
+  },
+
+  // ...后续接入其他配置
+}
+
+const config = useStorage<AppConfig>('milkup-config', defaultConfig, localStorage, {
+  serializer: {
+    read: (value: string) => {
+      try {
+        return { ...defaultConfig, ...JSON.parse(value) }
+      } catch {
+        return defaultConfig
+      }
+    },
+    write: (value: AppConfig) => JSON.stringify(value),
+  },
+})
+
+export function useConfig() {
+  return {
+    config,
+
+    getConf: <K extends keyof AppConfig>(key: K) => readonly(config.value[key]),
+
+    setConf: <K extends keyof AppConfig>(key: K, value: AppConfig[K] | string, pathValue?: any) => {
+      if (typeof value === 'string' && pathValue !== undefined) {
+        config.value = { ...config.value, [key]: setNestedProperty(config.value[key], value, pathValue) }
+      } else {
+        config.value = { ...config.value, [key]: value as AppConfig[K] }
+      }
+    },
+
+    watchConf: <K extends keyof AppConfig>(key: K, callback: (value: AppConfig[K]) => void) => {
+      return watch(() => config.value[key], callback, { deep: true })
+    },
+
+  }
+}

src/hooks/useFont.ts

@@ -1,62 +1,92 @@
-import type { Font, FontConfig, FontList, FontType } from '@/types/font'
-import { ref } from 'vue'
-import { defaultFontConfig, fontCssVariables } from '@/config/fonts'
-import fontManager from '@/utils/fontManager'
+import type { Font, FontConfig, FontList, FontSizeConfig, FontSizeType, FontType } from '@/types/font'
+import { computed, ref } from 'vue'
+import { fontCssVariables, fontSizeCssVariables, fontSizeOptions } from '@/config/fonts'
+import { useConfig } from './useConfig'
 
 // 系统字体列表
 const fontList = ref<FontList>([])
 
-// 当前字体
-const currentFont = ref<FontConfig | null>(null)
+// 获取配置管理实例
+const { getConf, setConf } = useConfig()
 
-async function init() {
-  const fonts = await fontManager.loadFonts()
-  currentFont.value = fonts
+// 当前字体配置
+const currentFont = computed(() => getConf('font').family)
+
+// 当前字体尺寸配置
+const currentFontSize = computed(() => getConf('font').size)
 
+async function init() {
   // 获取系统字体列表
   try {
     const systemFonts = await window.electronAPI.getSystemFonts()
-    // 将字符串数组转换为 Font 对象数组
+    // Font 对象数组
     fontList.value = systemFonts.map(fontName => ({
       label: fontName,
       value: fontName,
     }))
 
-    // 将默认字体配置添加到字体列表
-    fontList.value.unshift(...Object.values(defaultFontConfig))
+    // 应用当前字体配置到 DOM
+    const fontConfig = getConf('font').family
+    const fontSizeConfig = getConf('font').size
 
-    setFont('editor-font', currentFont.value!['editor-font'] as Font)
-    setFont('code-font', currentFont.value!['code-font'] as Font)
+    // 设置字体
+    applyFont(fontConfig)
+    // 设置字体尺寸
+    applyFontSize(fontSizeConfig)
   } catch (error) {
     console.error('获取系统字体列表失败:', error)
   }
 }
 
 function setFont(type: FontType, font: Font) {
-  fontManager.setFont(type, font)
-  currentFont.value![type] = font
+  setConf('font', `family.${type}`, font)
+  applyFont(getConf('font').family)
+}
+
+function setFontSize(type: FontSizeType, fontSize: string) {
+  setConf('font', `size.${type}`, fontSize)
+  applyFontSize(getConf('font').size)
+}
 
-  const cssVariables = fontCssVariables[type]
-  if (cssVariables && font) {
-    // 同时应用到 milkdown 编辑器
+// 应用字体配置到 DOM 元素
+function applyFont(fontConfig: FontConfig) {
+  const milkdownElement = document.querySelector('.milkdown') as HTMLElement
+  if (!milkdownElement)
+    return
 
-    const milkdownElement = document.querySelector('#fontRoot')
-    if (milkdownElement) {
-      (milkdownElement as HTMLElement).style.setProperty(cssVariables, font as any, 'important')
+  // 设置字体样式
+  Object.entries(fontConfig).forEach(([type, font]) => {
+    const cssVar = fontCssVariables[type as FontType]
+    if (cssVar && font) {
+      milkdownElement.style.setProperty(cssVar, font.value, 'important')
     }
-  }
+  })
 }
 
-function getFontList() {
-  return fontList
+function applyFontSize(fontSizeConfig: FontSizeConfig) {
+  const milkdownElement = document.querySelector('.milkdown') as HTMLElement
+  if (!milkdownElement)
+    return
+
+  Object.entries(fontSizeConfig).forEach(([type, fontSize]) => {
+    const cssVar = fontSizeCssVariables[type as FontSizeType]
+    if (cssVar && fontSize) {
+      milkdownElement.style.setProperty(cssVar, fontSize, 'important')
+
+      // get
+      // const fontSize = window.getComputedStyle(document.documentElement).getPropertyValue(cssVar)
+    }
+  })
 }
 
 export default function useFont() {
   return {
     fontList,
     currentFont,
+    currentFontSize,
+    fontSizeOptions,
     init,
     setFont,
-    getFontList,
+    setFontSize,
   }
 }

src/renderer/components/AppearancePage.vue

@@ -6,18 +6,17 @@ import ThemePage from './ThemePage.vue'
 <template>
   <div class="appearance">
     <div class="appearance-item">
-      <h2>字体</h2>
+      <h2>主题</h2>
 
       <div class="appearance-item-content">
-        <FontPage />
+        <ThemePage />
       </div>
     </div>
-
     <div class="appearance-item">
-      <h2>主题</h2>
+      <h2>字体</h2>
 
       <div class="appearance-item-content">
-        <ThemePage />
+        <FontPage />
       </div>
     </div>
   </div>
@@ -31,6 +30,8 @@ import ThemePage from './ThemePage.vue'
     padding: 0 10px;
     box-sizing: border-box;
     gap: 10px;
+    padding-bottom: 200px;
+    max-width: 800px;
 
     .appearance-item {
         display: flex;