修改了样式

app/app.config.ts

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

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>
-        2. 创建文档，为文档添加文章！<br>
-        3. 拖拽文章标题进行排序，分享文档！
+        · Nuxt 4 全栈框架构建<br>
+        · 基于 Markdown 语法的文档系统！<br>
+        · 在文档内使用自定义语法的 Vue 组件!
       </div>
     </div>
   </div>

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
+::