feat(@vben/docs): preview components are supported within documents (#4250)

docs/src/components/common-ui/vben-modal.md

@@ -0,0 +1,45 @@
+---
+outline: deep
+---
+
+# vben-modal
+
+::: tip
+
+文档还在完善中，敬请期待。
+
+:::
+
+框架提供的模态框组件，支持`拖拽`、`全屏`、`自定义`等功能。
+
+## 基础用法
+
+使用 `useVbenModal` 创建最基于的模态框。
+
+<DemoPreview dir="demos/vben-modal/basic" />
+
+## 组件抽离
+
+modal 内的内容一般业务中，会比较复杂，所以我们可以将 modal 内的内容抽离出来。
+
+<DemoPreview dir="demos/vben-modal/extra" />
+
+## API
+
+### 属性
+
+| 属性名 | 描述  | 类型     | 默认值 |
+| ------ | ----- | -------- | ------ |
+| title  | 标题. | `string` | —      |
+
+### 事件
+
+| 事件名 | 描述 | 类型 |
+| ------ | ---- | ---- |
+| TODO   | TODO | TODO |
+
+### 插槽
+
+| 插槽名  | 描述 |
+| ------- | ---- |
+| default | xx.  |

docs/src/components/introduction.md

@@ -0,0 +1,11 @@
+# 介绍
+
+::: tip README
+
+该文档介绍的是框架组件的使用方法、属性、事件等。如果你觉得组件封装的不好，或者不符合你的需求，你可以直接使用原生的组件，或者自己封装一个组件，不需要拘泥于框架提供的组件。我们只是提供了一些常用的组件，方便你快速开发。是否使用，取决于你的需求。
+
+:::
+
+## 通用组件
+
+通用组件是一些常用的组件，比如弹窗、抽屉、表单等。大部分基于 `Tailwind CSS` 实现，可适用于不同 UI 组件库的应用。

docs/src/demos/vben-modal/basic/index.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { useVbenModal, VbenButton } from '@vben/common-ui';
+
+const [Modal, modalApi] = useVbenModal();
+</script>
+<template>
+  <div>
+    <VbenButton @click="() => modalApi.open()">打开弹窗</VbenButton>
+    <Modal title="基础示例"> modal content </Modal>
+  </div>
+</template>

docs/src/demos/vben-modal/extra/index.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import { useVbenModal, VbenButton } from '@vben/common-ui';
+
+import ExtraModal from './modal.vue';
+
+const [Modal, modalApi] = useVbenModal({
+  // 链接抽离的组件
+  connectedComponent: ExtraModal,
+});
+
+function openModal() {
+  modalApi.open();
+}
+</script>
+
+<template>
+  <div>
+    <Modal />
+
+    <VbenButton @click="openModal">打开弹窗</VbenButton>
+  </div>
+</template>

docs/src/demos/vben-modal/extra/modal.vue

@@ -0,0 +1,8 @@
+<script lang="ts" setup>
+import { useVbenModal } from '@vben/common-ui';
+
+const [Modal] = useVbenModal();
+</script>
+<template>
+  <Modal title="基础示例"> extra modal content </Modal>
+</template>

docs/src/guide/in-depth/loading.md

@@ -42,3 +42,5 @@ VITE_INJECT_APP_LOADING=false
   <div class="title"><%= VITE_APP_TITLE %></div>
 </div>
 ```
+
+:::