字体、字号设置完毕

app/app.vue

@@ -6,6 +6,25 @@ const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSe
   server: false
 })
 
+// 获取主题系统
+const { selectedTheme, selectedFont, selectedFontSize } = useTheme()
+
+// 计算根元素的 CSS 类
+const rootClasses = computed(() => {
+  const classes = []
+  
+  // 添加主题类
+  classes.push(`theme-${selectedTheme.value}`)
+  
+  // 添加字体类
+  classes.push(`font-${selectedFont.value}`)
+  
+  // 移除字号类，让它在具体组件中处理
+  // classes.push(`text-${selectedFontSize.value}`)
+  
+  return classes.join(' ')
+})
+
 useHead({
   meta: [
     { name: 'viewport', content: 'width=device-width, initial-scale=1' }
@@ -14,7 +33,8 @@ useHead({
     { rel: 'icon', href: '/favicon.ico' }
   ],
   htmlAttrs: {
-    lang: 'en'
+    lang: 'en',
+    class: rootClasses
   }
 })
 
@@ -31,16 +51,12 @@ provide('navigation', navigation)
   <UApp>
     <NuxtLoadingIndicator />
 
-
-
     <UMain>
       <NuxtLayout>
         <NuxtPage />
       </NuxtLayout>
     </UMain>
 
-
-
     <ClientOnly>
       <LazyUContentSearch
         :files="files"
@@ -50,3 +66,4 @@ provide('navigation', navigation)
     </ClientOnly>
   </UApp>
 </template>
+

app/assets/css/main.css

@@ -18,3 +18,108 @@
   --color-green-900: #0A5331;
   --color-green-950: #052E16;
 }
+
+/* 主题字体样式 */
+.font-sans-serif {
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+}
+
+.font-serif {
+  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+}
+
+.font-monospace {
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
+}
+
+/* 字号样式 - 针对文档页面 */
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.text-xs .prose {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.text-sm .prose {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.text-base .prose {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+.text-lg .prose {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+.text-xl .prose {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+/* 主题样式 */
+.theme-classic {
+  /* 经典主题样式 */
+  --theme-background: #ffffff;
+  --theme-text: #1f2937;
+  --theme-border: #e5e7eb;
+}
+
+.theme-elegant {
+  /* 优雅主题样式 */
+  --theme-background: #fafafa;
+  --theme-text: #374151;
+  --theme-border: #d1d5db;
+}
+
+.theme-minimal {
+  /* 简洁主题样式 */
+  --theme-background: #ffffff;
+  --theme-text: #111827;
+  --theme-border: #f3f4f6;
+}
+
+/* 深色模式支持 */
+.dark .theme-classic {
+  --theme-background: #1f2937;
+  --theme-text: #f9fafb;
+  --theme-border: #374151;
+}
+
+.dark .theme-elegant {
+  --theme-background: #111827;
+  --theme-text: #f3f4f6;
+  --theme-border: #4b5563;
+}
+
+.dark .theme-minimal {
+  --theme-background: #000000;
+  --theme-text: #ffffff;
+  --theme-border: #1f2937;
+}

app/pages/[...slug].vue

@@ -10,6 +10,14 @@ const route = useRoute()
 const appConfig = useAppConfig()
 const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
 
+// 获取主题系统的字号设置
+const { selectedFontSize } = useTheme()
+
+// 计算页面内容的字号类
+const pageFontSizeClass = computed(() => {
+  return `text-${selectedFontSize.value}`
+})
+
 const { data: page } = await useAsyncData(route.path, () => queryCollection('docs').path(route.path).first())
 if (!page.value) {
   throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
@@ -68,7 +76,7 @@ const links = computed(() => {
 </script>
 
 <template>
-  <UPage v-if="page">
+  <UPage v-if="page" :class="pageFontSizeClass">
     <UPageHeader
       :title="page.title"
       :description="page.description"