From ebe0eadee4d38f7a5f70722f85d23226fa67c7b8 Mon Sep 17 00:00:00 2001
From: Dream <1012377328@qq.com>
Date: Wed, 5 Aug 2026 09:50:55 +0800
Subject: [PATCH] feat(@vben/playground): add typed popup data examples

---
 .../src/views/examples/drawer/index.vue       | 74 ++++++++++++++++++
 .../examples/drawer/typed-data-auto-demo.vue  | 29 +++++++
 .../examples/drawer/typed-data-contract.ts    | 13 ++++
 .../drawer/typed-data-explicit-demo.vue       | 24 ++++++
 .../drawer/typed-data-factory-demo.vue        | 24 ++++++
 playground/src/views/examples/modal/index.vue | 76 +++++++++++++++++++
 .../examples/modal/typed-data-auto-demo.vue   | 29 +++++++
 .../examples/modal/typed-data-contract.ts     | 13 ++++
 .../modal/typed-data-explicit-demo.vue        | 24 ++++++
 .../modal/typed-data-factory-demo.vue         | 24 ++++++
 10 files changed, 330 insertions(+)
 create mode 100644 playground/src/views/examples/drawer/typed-data-auto-demo.vue
 create mode 100644 playground/src/views/examples/drawer/typed-data-contract.ts
 create mode 100644 playground/src/views/examples/drawer/typed-data-explicit-demo.vue
 create mode 100644 playground/src/views/examples/drawer/typed-data-factory-demo.vue
 create mode 100644 playground/src/views/examples/modal/typed-data-auto-demo.vue
 create mode 100644 playground/src/views/examples/modal/typed-data-contract.ts
 create mode 100644 playground/src/views/examples/modal/typed-data-explicit-demo.vue
 create mode 100644 playground/src/views/examples/modal/typed-data-factory-demo.vue

diff --git a/playground/src/views/examples/drawer/index.vue b/playground/src/views/examples/drawer/index.vue
index 56d98300..b57c5946 100644
--- a/playground/src/views/examples/drawer/index.vue
+++ b/playground/src/views/examples/drawer/index.vue
@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import type { DrawerPlacement, DrawerState } from '@vben/common-ui';
 
+import type { ExplicitDrawerData } from './typed-data-contract';
+
 import { Page, useVbenDrawer } from '@vben/common-ui';
 
 import { Button, Card } from 'antdv-next';
@@ -12,6 +14,10 @@ import DynamicDemo from './dynamic-demo.vue';
 import FormDrawerDemo from './form-drawer-demo.vue';
 import inContentDemo from './in-content-demo.vue';
 import SharedDataDemo from './shared-data-demo.vue';
+import TypedDataAutoDemo from './typed-data-auto-demo.vue';
+import { useFactoryDrawer } from './typed-data-contract';
+import TypedDataExplicitDemo from './typed-data-explicit-demo.vue';
+import TypedDataFactoryDemo from './typed-data-factory-demo.vue';
 
 defineOptions({ name: 'DrawerExample' });
 const [BaseDrawer, baseDrawerApi] = useVbenDrawer({
@@ -42,6 +48,19 @@ const [FormDrawer, formDrawerApi] = useVbenDrawer({
   connectedComponent: FormDrawerDemo,
 });
 
+const [TypedDataAutoDrawer, typedDataAutoDrawerApi] = useVbenDrawer({
+  connectedComponent: TypedDataAutoDemo,
+});
+
+const [TypedDataExplicitDrawer, typedDataExplicitDrawerApi] =
+  useVbenDrawer<ExplicitDrawerData>({
+    connectedComponent: TypedDataExplicitDemo,
+  });
+
+const [TypedDataFactoryDrawer, typedDataFactoryDrawerApi] = useFactoryDrawer({
+  connectedComponent: TypedDataFactoryDemo,
+});
+
 function openBaseDrawer(placement: DrawerPlacement = 'right') {
   baseDrawerApi.setState({ placement }).open();
 }
@@ -93,6 +112,33 @@ function openFormDrawer() {
     })
     .open();
 }
+
+function openTypedDataAutoDrawer() {
+  typedDataAutoDrawerApi
+    .setData({
+      message: '外部无需声明泛型，由 connected component 自动推导。',
+      method: '自动推导',
+    })
+    .open();
+}
+
+function openTypedDataExplicitDrawer() {
+  typedDataExplicitDrawerApi
+    .setData({
+      message: '父子组件显式引用同一个数据类型。',
+      method: '显式泛型',
+    })
+    .open();
+}
+
+function openTypedDataFactoryDrawer() {
+  typedDataFactoryDrawerApi
+    .setData({
+      message: '父子组件复用预绑定的 typed composable。',
+      method: '契约工厂',
+    })
+    .open();
+}
 </script>
 
 <template>
@@ -110,6 +156,9 @@ function openFormDrawer() {
     <DynamicDrawer />
     <SharedDataDrawer />
     <FormDrawer />
+    <TypedDataAutoDrawer />
+    <TypedDataExplicitDrawer />
+    <TypedDataFactoryDrawer />
 
     <Card class="mb-4" title="基本使用">
       <p class="mb-3">一个基础的抽屉示例</p>
@@ -191,5 +240,30 @@ function openFormDrawer() {
         打开抽屉并设置表单schema以及数据
       </Button>
     </Card>
+
+    <Card class="mb-4" title="共享数据：自动推导">
+      <p class="mb-3">
+        子组件 expose API，父组件从 connected component 推导类型
+      </p>
+      <Button type="primary" @click="openTypedDataAutoDrawer">
+        打开自动推导示例
+      </Button>
+    </Card>
+
+    <Card class="mb-4" title="共享数据：显式泛型">
+      <p class="mb-3">无法自动推导时，父子组件显式引用同一个数据类型</p>
+      <Button type="primary" @click="openTypedDataExplicitDrawer">
+        打开显式泛型示例
+      </Button>
+    </Card>
+
+    <Card class="mb-4" title="共享数据：契约工厂">
+      <p class="mb-3">
+        通过 createVbenDrawer 预绑定类型并复用 typed composable
+      </p>
+      <Button type="primary" @click="openTypedDataFactoryDrawer">
+        打开契约工厂示例
+      </Button>
+    </Card>
   </Page>
 </template>
diff --git a/playground/src/views/examples/drawer/typed-data-auto-demo.vue b/playground/src/views/examples/drawer/typed-data-auto-demo.vue
new file mode 100644
index 00000000..5af52258
--- /dev/null
+++ b/playground/src/views/examples/drawer/typed-data-auto-demo.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+
+interface AutoDrawerData {
+  message: string;
+  method: '自动推导';
+}
+
+const data = ref<AutoDrawerData>();
+
+const [Drawer, drawerApi] = useVbenDrawer<AutoDrawerData>({
+  onOpenChange(isOpen) {
+    data.value = isOpen ? drawerApi.getData() : undefined;
+  },
+});
+
+defineExpose({ drawerApi });
+</script>
+
+<template>
+  <Drawer title="自动推导数据类型">
+    <div class="space-y-2 px-2">
+      <p>类型来源：{{ data?.method }}</p>
+      <p>接收内容：{{ data?.message }}</p>
+    </div>
+  </Drawer>
+</template>
diff --git a/playground/src/views/examples/drawer/typed-data-contract.ts b/playground/src/views/examples/drawer/typed-data-contract.ts
new file mode 100644
index 00000000..96ab8e25
--- /dev/null
+++ b/playground/src/views/examples/drawer/typed-data-contract.ts
@@ -0,0 +1,13 @@
+import { createVbenDrawer } from '@vben/common-ui';
+
+export interface ExplicitDrawerData {
+  message: string;
+  method: '显式泛型';
+}
+
+export interface FactoryDrawerData {
+  message: string;
+  method: '契约工厂';
+}
+
+export const useFactoryDrawer = createVbenDrawer<FactoryDrawerData>();
diff --git a/playground/src/views/examples/drawer/typed-data-explicit-demo.vue b/playground/src/views/examples/drawer/typed-data-explicit-demo.vue
new file mode 100644
index 00000000..cad5315e
--- /dev/null
+++ b/playground/src/views/examples/drawer/typed-data-explicit-demo.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { ExplicitDrawerData } from './typed-data-contract';
+
+import { ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+
+const data = ref<ExplicitDrawerData>();
+
+const [Drawer, drawerApi] = useVbenDrawer<ExplicitDrawerData>({
+  onOpenChange(isOpen) {
+    data.value = isOpen ? drawerApi.getData() : undefined;
+  },
+});
+</script>
+
+<template>
+  <Drawer title="显式泛型数据类型">
+    <div class="space-y-2 px-2">
+      <p>类型来源：{{ data?.method }}</p>
+      <p>接收内容：{{ data?.message }}</p>
+    </div>
+  </Drawer>
+</template>
diff --git a/playground/src/views/examples/drawer/typed-data-factory-demo.vue b/playground/src/views/examples/drawer/typed-data-factory-demo.vue
new file mode 100644
index 00000000..b4ee168e
--- /dev/null
+++ b/playground/src/views/examples/drawer/typed-data-factory-demo.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { FactoryDrawerData } from './typed-data-contract';
+
+import { ref } from 'vue';
+
+import { useFactoryDrawer } from './typed-data-contract';
+
+const data = ref<FactoryDrawerData>();
+
+const [Drawer, drawerApi] = useFactoryDrawer({
+  onOpenChange(isOpen) {
+    data.value = isOpen ? drawerApi.getData() : undefined;
+  },
+});
+</script>
+
+<template>
+  <Drawer title="契约工厂数据类型">
+    <div class="space-y-2 px-2">
+      <p>类型来源：{{ data?.method }}</p>
+      <p>接收内容：{{ data?.message }}</p>
+    </div>
+  </Drawer>
+</template>
diff --git a/playground/src/views/examples/modal/index.vue b/playground/src/views/examples/modal/index.vue
index 7b659e4c..5631e7c8 100644
--- a/playground/src/views/examples/modal/index.vue
+++ b/playground/src/views/examples/modal/index.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import type { ExplicitModalData } from './typed-data-contract';
+
 import { onBeforeUnmount } from 'vue';
 
 import {
@@ -22,6 +24,10 @@ import FormModalDemo from './form-modal-demo.vue';
 import InContentModalDemo from './in-content-demo.vue';
 import NestedDemo from './nested-demo.vue';
 import SharedDataDemo from './shared-data-demo.vue';
+import TypedDataAutoDemo from './typed-data-auto-demo.vue';
+import { useFactoryModal } from './typed-data-contract';
+import TypedDataExplicitDemo from './typed-data-explicit-demo.vue';
+import TypedDataFactoryDemo from './typed-data-factory-demo.vue';
 
 defineOptions({ name: 'ModalExample' });
 
@@ -55,6 +61,19 @@ const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: FormModalDemo,
 });
 
+const [TypedDataAutoModal, typedDataAutoModalApi] = useVbenModal({
+  connectedComponent: TypedDataAutoDemo,
+});
+
+const [TypedDataExplicitModal, typedDataExplicitModalApi] =
+  useVbenModal<ExplicitModalData>({
+    connectedComponent: TypedDataExplicitDemo,
+  });
+
+const [TypedDataFactoryModal, typedDataFactoryModalApi] = useFactoryModal({
+  connectedComponent: TypedDataFactoryDemo,
+});
+
 const [NestedModal, nestedModalApi] = useVbenModal({
   connectedComponent: NestedDemo,
 });
@@ -113,6 +132,33 @@ function openFormModal() {
     .open();
 }
 
+function openTypedDataAutoModal() {
+  typedDataAutoModalApi
+    .setData({
+      message: '外部无需声明泛型，由 connected component 自动推导。',
+      method: '自动推导',
+    })
+    .open();
+}
+
+function openTypedDataExplicitModal() {
+  typedDataExplicitModalApi
+    .setData({
+      message: '父子组件显式引用同一个数据类型。',
+      method: '显式泛型',
+    })
+    .open();
+}
+
+function openTypedDataFactoryModal() {
+  typedDataFactoryModalApi
+    .setData({
+      message: '父子组件复用预绑定的 typed composable。',
+      method: '契约工厂',
+    })
+    .open();
+}
+
 function openAlert() {
   alert({
     content: '这是一个弹窗',
@@ -188,6 +234,9 @@ async function openPrompt() {
     <DynamicModal />
     <SharedDataModal />
     <FormModal />
+    <TypedDataAutoModal />
+    <TypedDataExplicitModal />
+    <TypedDataFactoryModal />
     <NestedModal />
     <BlurModal />
     <Flex wrap="wrap" class="w-full" gap="10">
@@ -249,6 +298,33 @@ async function openPrompt() {
         </template>
       </Card>
 
+      <Card class="w-75" title="共享数据：自动推导">
+        <p>子组件 expose API，父组件从 connected component 推导类型</p>
+        <template #actions>
+          <Button type="primary" @click="openTypedDataAutoModal">
+            打开自动推导示例
+          </Button>
+        </template>
+      </Card>
+
+      <Card class="w-75" title="共享数据：显式泛型">
+        <p>无法自动推导时，父子组件显式引用同一个数据类型</p>
+        <template #actions>
+          <Button type="primary" @click="openTypedDataExplicitModal">
+            打开显式泛型示例
+          </Button>
+        </template>
+      </Card>
+
+      <Card class="w-75" title="共享数据：契约工厂">
+        <p>通过 createVbenModal 预绑定类型并复用 typed composable</p>
+        <template #actions>
+          <Button type="primary" @click="openTypedDataFactoryModal">
+            打开契约工厂示例
+          </Button>
+        </template>
+      </Card>
+
       <Card class="w-75" title="嵌套弹窗示例">
         <p>在已经打开的弹窗中再次打开弹窗</p>
         <template #actions>
diff --git a/playground/src/views/examples/modal/typed-data-auto-demo.vue b/playground/src/views/examples/modal/typed-data-auto-demo.vue
new file mode 100644
index 00000000..52dd5270
--- /dev/null
+++ b/playground/src/views/examples/modal/typed-data-auto-demo.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+interface AutoModalData {
+  message: string;
+  method: '自动推导';
+}
+
+const data = ref<AutoModalData>();
+
+const [Modal, modalApi] = useVbenModal<AutoModalData>({
+  onOpenChange(isOpen) {
+    data.value = isOpen ? modalApi.getData() : undefined;
+  },
+});
+
+defineExpose({ modalApi });
+</script>
+
+<template>
+  <Modal title="自动推导数据类型">
+    <div class="space-y-2 px-2">
+      <p>类型来源：{{ data?.method }}</p>
+      <p>接收内容：{{ data?.message }}</p>
+    </div>
+  </Modal>
+</template>
diff --git a/playground/src/views/examples/modal/typed-data-contract.ts b/playground/src/views/examples/modal/typed-data-contract.ts
new file mode 100644
index 00000000..87e74275
--- /dev/null
+++ b/playground/src/views/examples/modal/typed-data-contract.ts
@@ -0,0 +1,13 @@
+import { createVbenModal } from '@vben/common-ui';
+
+export interface ExplicitModalData {
+  message: string;
+  method: '显式泛型';
+}
+
+export interface FactoryModalData {
+  message: string;
+  method: '契约工厂';
+}
+
+export const useFactoryModal = createVbenModal<FactoryModalData>();
diff --git a/playground/src/views/examples/modal/typed-data-explicit-demo.vue b/playground/src/views/examples/modal/typed-data-explicit-demo.vue
new file mode 100644
index 00000000..f3300666
--- /dev/null
+++ b/playground/src/views/examples/modal/typed-data-explicit-demo.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { ExplicitModalData } from './typed-data-contract';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+const data = ref<ExplicitModalData>();
+
+const [Modal, modalApi] = useVbenModal<ExplicitModalData>({
+  onOpenChange(isOpen) {
+    data.value = isOpen ? modalApi.getData() : undefined;
+  },
+});
+</script>
+
+<template>
+  <Modal title="显式泛型数据类型">
+    <div class="space-y-2 px-2">
+      <p>类型来源：{{ data?.method }}</p>
+      <p>接收内容：{{ data?.message }}</p>
+    </div>
+  </Modal>
+</template>
diff --git a/playground/src/views/examples/modal/typed-data-factory-demo.vue b/playground/src/views/examples/modal/typed-data-factory-demo.vue
new file mode 100644
index 00000000..4713f848
--- /dev/null
+++ b/playground/src/views/examples/modal/typed-data-factory-demo.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { FactoryModalData } from './typed-data-contract';
+
+import { ref } from 'vue';
+
+import { useFactoryModal } from './typed-data-contract';
+
+const data = ref<FactoryModalData>();
+
+const [Modal, modalApi] = useFactoryModal({
+  onOpenChange(isOpen) {
+    data.value = isOpen ? modalApi.getData() : undefined;
+  },
+});
+</script>
+
+<template>
+  <Modal title="契约工厂数据类型">
+    <div class="space-y-2 px-2">
+      <p>类型来源：{{ data?.method }}</p>
+      <p>接收内容：{{ data?.message }}</p>
+    </div>
+  </Modal>
+</template>