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/modal/auto-height-demo.vue

@@ -5,24 +5,31 @@ import { useVbenModal } from '@vben/common-ui';
 
 import { Button, message } from 'ant-design-vue';
 
+const list = ref<number[]>([]);
+
 const [Modal, modalApi] = useVbenModal({
   onCancel() {
     modalApi.close();
   },
   onConfirm() {
     message.info('onConfirm');
-    // modalApi.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) {
+  modalApi.setState({ loading: true });
+  setTimeout(() => {
+    list.value = Array.from({ length: len }, (_v, k) => k + 1);
+    modalApi.setState({ loading: false });
+  }, 2000);
 }
 </script>
+
 <template>
   <Modal title="自动计算高度">
     <div
@@ -32,9 +39,8 @@ function handleUpdate() {
     >
       {{ item }}
     </div>
-
     <template #prepend-footer>
-      <Button type="link" @click="handleUpdate">点击更新数据</Button>
+      <Button type="link" @click="handleUpdate(6)">点击更新数据</Button>
     </template>
   </Modal>
 </template>