修改了样式

app/app.config.ts

@@ -1,8 +1,8 @@
 export default defineAppConfig({
   ui: {
     colors: {
-      primary: 'blue',
+      primary: 'primary',
-      neutral: 'zinc'
+      neutral: 'neutral'
     },
     container: {
       base: 'w-full h-full mx-auto px-2 sm:px-6 lg:px-8'

app/app.vue

@@ -7,7 +7,7 @@ const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSe
 })
 
 // 获取主题系统
-const { selectedTheme, selectedFont } = useTheme()
+const { selectedTheme, selectedFont, selectedFontSize } = useTheme()
 
 // 计算根元素的 CSS 类
 const rootClasses = computed(() => {
@@ -19,8 +19,8 @@ const rootClasses = computed(() => {
   // 添加字体类
   classes.push(`font-${selectedFont.value}`)
 
-  // 移除字号类，让它在具体组件中处理
+  // 添加字体大小类
-  // classes.push(`text-${selectedFontSize.value}`)
+  classes.push(`text-${selectedFontSize.value}`)
 
   return classes.join(' ')
 })

app/assets/css/main.css

@@ -25,11 +25,11 @@
 
 /* 主题字体样式 - 使用Nuxt Font字体 */
 .font-sans-serif {
-  font-family: 'Roboto', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+  font-family: 'Source Han Sans SC', 'PingFang SC', 'Roboto', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
 }
 
 .font-serif {
-  font-family: 'Merriweather', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  font-family: 'Source Han Serif SC', 'Merriweather', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
 }
 
 .font-monospace {

app/components/IndexHero.vue

@@ -9,13 +9,13 @@
       class="bg-slate-200 dark:bg-slate-600 rounded-lg border border-gray-200 dark:border-gray-700 p-2 sm:p-4 shadow-sm"
     >
       <h1 class="text-xl font-bold text-gray-900 dark:text-white mb-2">
-        Hi 👋, 欢迎使用简单文档系统
+        Hi 👋, 欢迎使用简单文档系统.
       </h1>
       <!-- 编号列表 -->
       <div class="mt-2 text-base text-gray-700 dark:text-gray-300">
-        1. 登录网站！<br>
+        · Nuxt 4 全栈框架构建<br>
-        2. 创建文档，为文档添加文章！<br>
+        · 基于 Markdown 语法的文档系统！<br>
-        3. 拖拽文章标题进行排序，分享文档！
+        · 在文档内使用自定义语法的 Vue 组件!
       </div>
     </div>
   </div>

app/components/TemplateMenu.vue

@@ -14,7 +14,7 @@
     }, {
       label: 'JiWei',
       to: 'https://www.xajiwei.com/'
-    }, 
+    }
     ]"
     :ui="{ content: 'w-(--reka-dropdown-menu-trigger-width) min-w-0' }"
     size="xs"

app/components/docs/DocsAsideLeftTop.vue

@@ -7,8 +7,7 @@ const items = ref<NavigationMenuItem[][]>([
       label: '稷维科技',
       icon: 'lucide-globe',
       to: 'https://www.xajiwei.com',
-      target: '_blank',
+      target: '_blank'
-
 
     },
     {
@@ -20,7 +19,7 @@ const items = ref<NavigationMenuItem[][]>([
       label: '关于',
       icon: 'lucide-info',
       to: '/about'
-    },
+    }
 
   ]
   // [

app/components/example/ExampleAlert.vue

@@ -2,15 +2,15 @@
 const props = defineProps({
   type: {
     type: String,
-    default: () => '',
+    default: () => ''
-  },
+  }
 })
 
 const alertClass = computed(() => {
   return {
     warning: 'bg-orange-100 border-orange-200 dark:bg-orange-900 dark:border-orange-800',
     info: 'bg-blue-100 border-blue-200 dark:bg-blue-900 dark:border-blue-800',
-    success: 'bg-green-100 border-green-200 dark:bg-green-900 dark:border-green-800',
+    success: 'bg-green-100 border-green-200 dark:bg-green-900 dark:border-green-800'
 
   }[props.type]
 })

app/components/example/ExampleFulltextFusejs.vue

@@ -7,11 +7,13 @@ const { data } = await useAsyncData('search-data', () => queryCollectionSearchSe
 const fuse = new Fuse(data.value || [], {
   keys: [
     'title',
-    'description',
+    'description'
-  ],
+  ]
 })
 
-const result = computed<Array<{ item: typeof data.value[0] }>>(() => fuse.search(toValue(query)).slice(0, 10))
+const result = computed<Array<{ item: { id: string, title: string, titles: string[], level: number, content: string } }>>(() =>
+  fuse.search(toValue(query)).slice(0, 10)
+)
 </script>
 
 <template>

app/components/example/ExampleFulltextMiniSearch.vue

@@ -9,8 +9,8 @@ const miniSearch = new MiniSearch({
   storeFields: ['title', 'content'],
   searchOptions: {
     prefix: true,
-    fuzzy: 0.2,
+    fuzzy: 0.2
-  },
+  }
 })
 
 // Add data to the MiniSearch instance

app/components/example/ExampleIconCard.vue

@@ -2,16 +2,16 @@
 defineProps({
   title: {
     type: String,
-    default: 'Default title',
+    default: 'Default title'
   },
   description: {
     type: String,
-    default: 'Default description',
+    default: 'Default description'
   },
   icon: {
     type: String,
-    default: 'IconMarkdown',
+    default: 'IconMarkdown'
-  },
+  }
 })
 </script>
 

app/composables/useTheme.ts

@@ -119,25 +119,6 @@ let isInitialized = false
 export function useTheme() {
   const colorMode = useColorMode()
 
-  const initializeTheme = () => {
-    if (import.meta.client && !isInitialized) {
-      selectedTheme.value = localStorage.getItem('app-theme') || defaultSettings.theme
-      selectedFont.value = localStorage.getItem('app-font') || defaultSettings.font
-      selectedFontSize.value = localStorage.getItem('app-font-size') || defaultSettings.fontSize
-      selectedThemeColor.value = localStorage.getItem('app-theme-color') || defaultSettings.themeColor
-      selectedCodeTheme.value = localStorage.getItem('app-code-theme') || defaultSettings.codeTheme
-      selectedCaptionFormat.value = localStorage.getItem('app-caption-format') || defaultSettings.captionFormat
-
-      // 找到自定义颜色对应的主题色值
-      const initialColor = themeColors.find(c => c.value === selectedThemeColor.value)?.color || '#3B82F6'
-      customColor.value = localStorage.getItem('app-custom-color') || initialColor
-
-      applyThemeVariables()
-      isInitialized = true
-      console.log('主题已初始化')
-    }
-  }
-
   const applyThemeVariables = () => {
     if (import.meta.client) {
       const root = document.documentElement
@@ -165,6 +146,12 @@ export function useTheme() {
           if (!appConfig.ui.colors) appConfig.ui.colors = {}
           appConfig.ui.colors.primary = mappedColor
         }
+      } else {
+        // 处理自定义颜色
+        root.style.setProperty('--ui-primary', customColor.value)
+        const appConfig = useAppConfig()
+        if (!appConfig.ui.colors) appConfig.ui.colors = {}
+        appConfig.ui.colors.primary = 'blue'
       }
 
       // 字体设置保持不变
@@ -179,9 +166,6 @@ export function useTheme() {
         xs: '0.75rem', sm: '0.875rem', base: '1rem', lg: '1.125rem', xl: '1.25rem'
       }
       root.style.setProperty('--font-size-base', fontSizeMapping[selectedFontSize.value as keyof typeof fontSizeMapping])
-
-      root.classList.remove('theme-classic', 'theme-elegant', 'theme-minimal')
-      root.classList.add(`theme-${selectedTheme.value}`)
     }
   }
 
@@ -206,9 +190,54 @@ export function useTheme() {
       const appConfig = useAppConfig()
       if (!appConfig.ui.colors) appConfig.ui.colors = {}
       appConfig.ui.colors.primary = 'blue' // 使用有效的颜色名称作为基础
+
+      // 保存到localStorage
+      localStorage.setItem('app-theme-color', 'custom')
+      localStorage.setItem('app-custom-color', customColor.value)
     }
   }
 
+  const initializeTheme = () => {
+    if (import.meta.client && !isInitialized) {
+      // 从localStorage读取设置
+      selectedTheme.value = localStorage.getItem('app-theme') || defaultSettings.theme
+      selectedFont.value = localStorage.getItem('app-font') || defaultSettings.font
+      selectedFontSize.value = localStorage.getItem('app-font-size') || defaultSettings.fontSize
+      selectedThemeColor.value = localStorage.getItem('app-theme-color') || defaultSettings.themeColor
+      selectedCodeTheme.value = localStorage.getItem('app-code-theme') || defaultSettings.codeTheme
+      selectedCaptionFormat.value = localStorage.getItem('app-caption-format') || defaultSettings.captionFormat
+
+      // 找到自定义颜色对应的主题色值
+      const initialColor = themeColors.find(c => c.value === selectedThemeColor.value)?.color || '#3B82F6'
+      customColor.value = localStorage.getItem('app-custom-color') || initialColor
+
+      // 立即应用主题设置
+      applyThemeVariables()
+
+      // 如果是自定义颜色，需要特殊处理
+      if (selectedThemeColor.value === 'custom') {
+        applyCustomColor()
+      }
+
+      isInitialized = true
+      console.log('主题已初始化')
+    }
+  }
+
+  // 确保在客户端时立即初始化
+  if (import.meta.client) {
+    // 立即初始化，避免闪烁
+    initializeTheme()
+
+    // 确保在DOM准备好后再次应用
+    onMounted(() => {
+      applyThemeVariables()
+      if (selectedThemeColor.value === 'custom') {
+        applyCustomColor()
+      }
+    })
+  }
+
   const resetSettings = () => {
     selectedTheme.value = defaultSettings.theme
     selectedFont.value = defaultSettings.font

app/plugins/theme.client.ts

@@ -0,0 +1,8 @@
+export default defineNuxtPlugin(() => {
+  const { initializeTheme } = useTheme()
+
+  // 在客户端初始化主题
+  if (import.meta.client) {
+    initializeTheme()
+  }
+})

content/1.简单文档/1.index.md

@@ -38,7 +38,7 @@ navigation:
 
 :::UPageCard{icon="lucide-code" title="代码组" description="这个组件使用 自定义的 Markdown 语法,从 Markdown 中提取代码块,并展示在页面上 (而其自身亦是一个卡片组)"}
 
-::code-tree{defaultValue="nuxt.config.ts" title="Sample Nuxt App" }
+::code-tree{defaultValue="nuxt.config.ts"}
 
 ```css [app/assets/main.css]
 @import "tailwindcss" theme(static);

content/1.简单文档/5.components/1.API.md

@@ -5,3 +5,78 @@ navigation:
   icon: lucide-component
 ---
 
+
+
+:::code-group
+  ```mdc [index.md]
+        ::callout
+        ---
+        icon: simple-icons-visualstudiocode
+        to: https://marketplace.visualstudio.com/items?itemName=Nuxt.mdc
+        ---
+        安装 **MDC VS Code 扩展**，以获得对 MDC 语法的高亮显示支持。
+        ::     
+  ```
+
+  ::::code-preview{icon="i-lucide-eye" label="Preview"}
+        ::callout
+        ---
+        icon: simple-icons-visualstudiocode
+        to: https://marketplace.visualstudio.com/items?itemName=Nuxt.mdc
+        ---
+        安装 **MDC VS Code 扩展**，以获得对 MDC 语法的高亮显示支持。
+        ::
+  ::::
+:::
+
+
+
+::tip
+在 tip 标签中嵌套 code-group 的示例. 可以直接复制index.md 中的内容,既是 当前展示 的效果.
+
+  :::code-group
+  ```mdc [index.md]
+            ::tip
+            在文档中使用自定义组件时，可以在插槽中使用 Markdown 语法，组件会自动渲染 Markdown 内容。
+
+              :::code-group
+              ```mdc [index.md]
+              ::my-title
+              A [rich text](/) will be **rendered** by the component.
+              ::
+              ```
+              
+              ```html [MyTitle.vue]
+              <template>
+                <h1 class="text-4xl">
+                  <slot mdc-unwrap="p" />
+                </h1>
+              </template>
+              ```
+
+                ::::code-preview{icon="i-lucide-eye" label="Preview"}
+                  :::::example-title
+                  A [rich text](/) will be **rendered** by the component.
+                  :::::
+                ::::
+              :::
+            ::
+  ```
+  
+  ```html [MyTitle.vue]
+  <template>
+    <h1 class="text-4xl">
+      <slot mdc-unwrap="p" />
+    </h1>
+  </template>
+  ```
+
+    ::::code-preview{icon="i-lucide-eye" label="Preview"}
+      :::::example-title
+      A [rich text](/) will be **rendered** by the component.
+      :::::
+    ::::
+  :::
+::
+
+

content/1.简单文档/5.components/code-tree.md

@@ -13,7 +13,7 @@ badges:
 
 ::stack
 ::div{class="p-4"}
-  ::code-tree{defaultValue="nuxt.config.ts" title="Sample Nuxt App"}
+  ::code-tree{defaultValue="nuxt.config.ts"}
 
   ```css [app/assets/main.css]
   @import "tailwindcss" theme(static);
@@ -164,7 +164,7 @@ badges:
 ::
 
 `````mdc height=400
-::code-tree{defaultValue="nuxt.config.ts" title="Sample Nuxt App"}
+::code-tree{defaultValue="nuxt.config.ts"}
 
 ```css [app/assets/main.css]
 @import "tailwindcss" theme(static);

content/2.无人自助系统/.navigation.yml

@@ -0,0 +1,3 @@
+title: 无人自助系统
+description: 24小时无人自助系统,适合 棋牌室 台球厅 自习室 等场所使用
+icon: simple-icons:monica

content/2.无人自助系统/1.index.md

@@ -0,0 +1,11 @@
+---
+title: 介绍
+description: 24小时无人自助系统,适合 棋牌室 台球厅 自习室 等场所使用
+navigation:
+    icon: simple-icons:opencollective
+---
+
+
+::tip
+test
+::

nuxt.config.ts

@@ -77,7 +77,7 @@ export default defineNuxtConfig({
         title: 'Estel Docs',
         description: 'Estel Docs 文档系统',
         contentCollection: 'docs'
-       },
+      }
-    ],
+    ]
-  },
+  }
 })