perf: improve modal and drawer component documentation and fix known problems (#4264)

* feat: improve modal and drawer component documentation and fix known problems

* chore: update ci

playground/src/views/examples/drawer/auto-height-demo.vue

@@ -5,6 +5,8 @@ import { useVbenDrawer } from '@vben/common-ui';
 
 import { Button, message } from 'ant-design-vue';
 
+const list = ref<number[]>([]);
+
 const [Drawer, drawerApi] = useVbenDrawer({
   onCancel() {
     drawerApi.close();
@@ -13,14 +15,19 @@ const [Drawer, drawerApi] = useVbenDrawer({
     message.info('onConfirm');
     // drawerApi.close();
   },
+  onOpenChange(isOpen) {
+    if (isOpen) {
+      handleUpdate(10);
+    }
+  },
 });
 
-const list = ref<number[]>([]);
-
-list.value = Array.from({ length: 10 }, (_v, k) => k + 1);
-
-function handleUpdate() {
-  list.value = Array.from({ length: 6 }, (_v, k) => k + 1);
+function handleUpdate(len: number) {
+  drawerApi.setState({ loading: true });
+  setTimeout(() => {
+    list.value = Array.from({ length: len }, (_v, k) => k + 1);
+    drawerApi.setState({ loading: false });
+  }, 2000);
 }
 </script>
 <template>
@@ -34,7 +41,7 @@ function handleUpdate() {
     </div>
 
     <template #prepend-footer>
-      <Button type="link" @click="handleUpdate">点击更新数据</Button>
+      <Button type="link" @click="handleUpdate(6)">点击更新数据</Button>
     </template>
   </Drawer>
 </template>