From 3cbb1e84111cb5e30d66b530d8bd609835944de4 Mon Sep 17 00:00:00 2001
From: Dream <1012377328@qq.com>
Date: Wed, 5 Aug 2026 09:48:27 +0800
Subject: [PATCH] refactor(@vben/playground): type popup data consumers

---
 .../views/examples/drawer/form-drawer-demo.vue | 14 ++++++++++----
 .../views/examples/drawer/shared-data-demo.vue | 13 ++++++++++---
 .../views/examples/modal/form-modal-demo.vue   | 14 ++++++++++----
 .../views/examples/modal/shared-data-demo.vue  | 13 ++++++++++---
 .../src/views/system/dept/modules/form.vue     | 18 ++++++++++++++----
 .../src/views/system/menu/modules/form.vue     | 13 ++++++++++---
 playground/src/views/system/role/list.vue      |  2 +-
 .../src/views/system/role/modules/form.vue     |  6 ++++--
 playground/src/views/system/user/list.vue      |  2 +-
 .../src/views/system/user/modules/detail.vue   |  6 ++++--
 .../src/views/system/user/modules/form.vue     |  6 ++++--
 11 files changed, 78 insertions(+), 29 deletions(-)

diff --git a/playground/src/views/examples/drawer/form-drawer-demo.vue b/playground/src/views/examples/drawer/form-drawer-demo.vue
index 6a1e4ed3..620432d7 100644
--- a/playground/src/views/examples/drawer/form-drawer-demo.vue
+++ b/playground/src/views/examples/drawer/form-drawer-demo.vue
@@ -7,6 +7,10 @@ defineOptions({
   name: 'FormDrawerDemo',
 });
 
+interface FormDrawerData {
+  values?: Record<string, unknown>;
+}
+
 const [Form, formApi] = useVbenForm({
   schema: [
     {
@@ -30,7 +34,7 @@ const [Form, formApi] = useVbenForm({
   ],
   showDefaultActions: false,
 });
-const [Drawer, drawerApi] = useVbenDrawer({
+const [Drawer, drawerApi] = useVbenDrawer<FormDrawerData>({
   onCancel() {
     drawerApi.close();
   },
@@ -40,14 +44,16 @@ const [Drawer, drawerApi] = useVbenDrawer({
   },
   onOpenChange(isOpen: boolean) {
     if (isOpen) {
-      const { values } = drawerApi.getData<Record<string, any>>();
-      if (values) {
-        formApi.setValues(values);
+      const data = drawerApi.getData();
+      if (data?.values) {
+        formApi.setValues(data.values);
       }
     }
   },
   title: '内嵌表单示例',
 });
+
+defineExpose({ drawerApi });
 </script>
 <template>
   <Drawer>
diff --git a/playground/src/views/examples/drawer/shared-data-demo.vue b/playground/src/views/examples/drawer/shared-data-demo.vue
index 1be3641c..90f7eca6 100644
--- a/playground/src/views/examples/drawer/shared-data-demo.vue
+++ b/playground/src/views/examples/drawer/shared-data-demo.vue
@@ -5,9 +5,14 @@ import { useVbenDrawer } from '@vben/common-ui';
 
 import { message } from 'antdv-next';
 
-const data = ref();
+interface SharedData {
+  content: string;
+  payload: string;
+}
 
-const [Drawer, drawerApi] = useVbenDrawer({
+const data = ref<SharedData>();
+
+const [Drawer, drawerApi] = useVbenDrawer<SharedData>({
   onCancel() {
     drawerApi.close();
   },
@@ -17,10 +22,12 @@ const [Drawer, drawerApi] = useVbenDrawer({
   },
   onOpenChange(isOpen: boolean) {
     if (isOpen) {
-      data.value = drawerApi.getData<Record<string, any>>();
+      data.value = drawerApi.getData();
     }
   },
 });
+
+defineExpose({ drawerApi });
 </script>
 <template>
   <Drawer title="数据共享示例">
diff --git a/playground/src/views/examples/modal/form-modal-demo.vue b/playground/src/views/examples/modal/form-modal-demo.vue
index 60f13c41..1b152bd8 100644
--- a/playground/src/views/examples/modal/form-modal-demo.vue
+++ b/playground/src/views/examples/modal/form-modal-demo.vue
@@ -9,6 +9,10 @@ defineOptions({
   name: 'FormModelDemo',
 });
 
+interface FormModalData {
+  values?: Record<string, unknown>;
+}
+
 const [Form, formApi] = useVbenForm({
   handleSubmit: onSubmit,
   schema: [
@@ -48,7 +52,7 @@ const [Form, formApi] = useVbenForm({
   showDefaultActions: false,
 });
 
-const [Modal, modalApi] = useVbenModal({
+const [Modal, modalApi] = useVbenModal<FormModalData>({
   fullscreenButton: false,
   onCancel() {
     modalApi.close();
@@ -59,15 +63,17 @@ const [Modal, modalApi] = useVbenModal({
   },
   onOpenChange(isOpen: boolean) {
     if (isOpen) {
-      const { values } = modalApi.getData<Record<string, any>>();
-      if (values) {
-        formApi.setValues(values);
+      const data = modalApi.getData();
+      if (data?.values) {
+        formApi.setValues(data.values);
       }
     }
   },
   title: '内嵌表单示例',
 });
 
+defineExpose({ modalApi });
+
 function onSubmit(values: Record<string, any>) {
   message.loading({
     content: '正在提交中...',
diff --git a/playground/src/views/examples/modal/shared-data-demo.vue b/playground/src/views/examples/modal/shared-data-demo.vue
index 57b14b61..733261e9 100644
--- a/playground/src/views/examples/modal/shared-data-demo.vue
+++ b/playground/src/views/examples/modal/shared-data-demo.vue
@@ -5,9 +5,14 @@ import { useVbenModal } from '@vben/common-ui';
 
 import { message } from 'antdv-next';
 
-const data = ref();
+interface SharedData {
+  content: string;
+  payload: string;
+}
 
-const [Modal, modalApi] = useVbenModal({
+const data = ref<SharedData>();
+
+const [Modal, modalApi] = useVbenModal<SharedData>({
   onCancel() {
     modalApi.close();
   },
@@ -17,10 +22,12 @@ const [Modal, modalApi] = useVbenModal({
   },
   onOpenChange(isOpen: boolean) {
     if (isOpen) {
-      data.value = modalApi.getData<Record<string, any>>();
+      data.value = modalApi.getData();
     }
   },
 });
+
+defineExpose({ modalApi });
 </script>
 <template>
   <Modal title="数据共享示例">
diff --git a/playground/src/views/system/dept/modules/form.vue b/playground/src/views/system/dept/modules/form.vue
index 225fda82..5a134447 100644
--- a/playground/src/views/system/dept/modules/form.vue
+++ b/playground/src/views/system/dept/modules/form.vue
@@ -15,6 +15,11 @@ import { useSchema } from '../data';
 
 const emit = defineEmits(['success']);
 const formData = ref<SystemDeptApi.SystemDept>();
+type DeptModalData =
+  | null
+  | SystemDeptApi.SystemDept
+  | { pid: SystemDeptApi.SystemDept['pid'] };
+
 const getTitle = computed(() => {
   return formData.value?.id
     ? $t('ui.actionTitle.edit', [$t('system.dept.name')])
@@ -32,7 +37,7 @@ function resetForm() {
   formApi.setValues(formData.value || {});
 }
 
-const [Modal, modalApi] = useVbenModal({
+const [Modal, modalApi] = useVbenModal<DeptModalData>({
   async onConfirm() {
     const { valid } = await formApi.validate();
     if (valid) {
@@ -51,17 +56,22 @@ const [Modal, modalApi] = useVbenModal({
   },
   onOpenChange(isOpen) {
     if (isOpen) {
-      const data = modalApi.getData<SystemDeptApi.SystemDept>();
+      const data = modalApi.getData();
       if (data) {
         if (data.pid === 0) {
           data.pid = undefined;
         }
-        formData.value = data;
-        formApi.setValues(formData.value);
+        formData.value = 'id' in data ? data : undefined;
+        formApi.setValues(data);
+      } else {
+        formData.value = undefined;
+        formApi.reset();
       }
     }
   },
 });
+
+defineExpose({ modalApi });
 </script>
 
 <template>
diff --git a/playground/src/views/system/menu/modules/form.vue b/playground/src/views/system/menu/modules/form.vue
index 7ce50f05..34ae38dc 100644
--- a/playground/src/views/system/menu/modules/form.vue
+++ b/playground/src/views/system/menu/modules/form.vue
@@ -32,6 +32,9 @@ const emit = defineEmits<{
 const formData = ref<SystemMenuApi.SystemMenu>();
 const titleSuffix = ref<string>();
 
+type MenuDrawerData =
+  | SystemMenuApi.SystemMenu
+  | { pid?: SystemMenuApi.SystemMenu['pid'] };
 type MenuSubmitValues = Omit<SystemMenuApi.SystemMenu, 'children' | 'id'>;
 type MenuFormValues = MenuSubmitValues & { linkSrc?: string };
 
@@ -479,25 +482,29 @@ const [Form, formApi] = useVbenForm({
   showDefaultActions: false,
   wrapperClass: 'grid-cols-2 gap-x-4',
 });
-const [Drawer, drawerApi] = useVbenDrawer({
+const [Drawer, drawerApi] = useVbenDrawer<MenuDrawerData>({
   onConfirm: onSubmit,
   async onOpenChange(isOpen) {
     if (isOpen) {
-      const data = drawerApi.getData<SystemMenuApi.SystemMenu>();
-      if (data) {
+      const data = drawerApi.getData();
+      if (data && 'id' in data) {
         formData.value = data;
         await formApi.setSubmitValues(data);
         titleSuffix.value = formData.value.meta?.title
           ? $t(formData.value.meta.title)
           : '';
       } else {
+        formData.value = undefined;
         formApi.reset();
+        await formApi.setValues(data ?? {});
         titleSuffix.value = '';
       }
     }
   },
 });
 
+defineExpose({ drawerApi });
+
 async function onSubmit() {
   const { valid } = await formApi.validate();
   if (valid) {
diff --git a/playground/src/views/system/role/list.vue b/playground/src/views/system/role/list.vue
index 321eef7d..91f23ddc 100644
--- a/playground/src/views/system/role/list.vue
+++ b/playground/src/views/system/role/list.vue
@@ -161,7 +161,7 @@ function onRefresh() {
 }
 
 function onCreate() {
-  formDrawerApi.setData({}).open();
+  formDrawerApi.setData(null).open();
 }
 </script>
 <template>
diff --git a/playground/src/views/system/role/modules/form.vue b/playground/src/views/system/role/modules/form.vue
index 11326d55..968ba2ef 100644
--- a/playground/src/views/system/role/modules/form.vue
+++ b/playground/src/views/system/role/modules/form.vue
@@ -32,7 +32,7 @@ const permissions = ref<DataNode[]>([]);
 const loadingPermissions = ref(false);
 
 const id = ref();
-const [Drawer, drawerApi] = useVbenDrawer({
+const [Drawer, drawerApi] = useVbenDrawer<null | SystemRoleApi.SystemRole>({
   async onConfirm() {
     const { valid } = await formApi.validate();
     if (!valid) return;
@@ -50,7 +50,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
 
   async onOpenChange(isOpen) {
     if (isOpen) {
-      const data = drawerApi.getData<SystemRoleApi.SystemRole>();
+      const data = drawerApi.getData();
       formApi.reset();
 
       if (data) {
@@ -72,6 +72,8 @@ const [Drawer, drawerApi] = useVbenDrawer({
   },
 });
 
+defineExpose({ drawerApi });
+
 async function loadPermissions() {
   loadingPermissions.value = true;
   try {
diff --git a/playground/src/views/system/user/list.vue b/playground/src/views/system/user/list.vue
index d4b65dea..c88a304f 100644
--- a/playground/src/views/system/user/list.vue
+++ b/playground/src/views/system/user/list.vue
@@ -162,7 +162,7 @@ function onRefresh() {
 }
 
 function onCreate() {
-  formDrawerApi.setData({}).open();
+  formDrawerApi.setData(null).open();
 }
 
 async function loadDeptList() {
diff --git a/playground/src/views/system/user/modules/detail.vue b/playground/src/views/system/user/modules/detail.vue
index 525a7ffc..43a80558 100644
--- a/playground/src/views/system/user/modules/detail.vue
+++ b/playground/src/views/system/user/modules/detail.vue
@@ -13,13 +13,15 @@ const detailData = ref<SystemUserApi.SystemUser>();
 
 const items = computed(() => useDescriptionItems(detailData.value));
 
-const [Drawer, drawerApi] = useVbenDrawer({
+const [Drawer, drawerApi] = useVbenDrawer<SystemUserApi.SystemUser>({
   onOpenChange(isOpen) {
     if (isOpen) {
-      detailData.value = drawerApi.getData<SystemUserApi.SystemUser>();
+      detailData.value = drawerApi.getData();
     }
   },
 });
+
+defineExpose({ drawerApi });
 </script>
 <template>
   <Drawer :footer="false" :title="$t('common.detail')">
diff --git a/playground/src/views/system/user/modules/form.vue b/playground/src/views/system/user/modules/form.vue
index 7bded888..0a010252 100644
--- a/playground/src/views/system/user/modules/form.vue
+++ b/playground/src/views/system/user/modules/form.vue
@@ -31,7 +31,7 @@ const permissions = ref<DataNode[]>([]);
 const loadingPermissions = ref(false);
 
 const id = ref();
-const [Drawer, drawerApi] = useVbenDrawer({
+const [Drawer, drawerApi] = useVbenDrawer<null | SystemUserApi.SystemUser>({
   async onConfirm() {
     const { valid } = await formApi.validate();
     if (!valid) return;
@@ -49,7 +49,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
 
   async onOpenChange(isOpen) {
     if (isOpen) {
-      const data = drawerApi.getData<SystemUserApi.SystemUser>();
+      const data = drawerApi.getData();
       formApi.reset();
 
       if (data) {
@@ -71,6 +71,8 @@ const [Drawer, drawerApi] = useVbenDrawer({
   },
 });
 
+defineExpose({ drawerApi });
+
 async function loadPermissions() {
   loadingPermissions.value = true;
   try {