完成目录架构变更

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

@@ -0,0 +1,82 @@
+---
+title: 常用组件
+description: 常用自定义组件速查文档
+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.
+      :::::
+    ::::
+  :::
+::
+
+