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

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>