feat: add preset alert, confirm, prompt components that can be simple called (#5843)

* feat: add preset alert, confirm, prompt components that can be simple called

* fix: type define

docs/src/demos/vben-alert/alert/index.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { h } from 'vue';
+
+import { alert, VbenButton } from '@vben/common-ui';
+
+import { Empty } from 'ant-design-vue';
+
+function showAlert() {
+  alert('This is an alert message');
+}
+
+function showIconAlert() {
+  alert({
+    content: 'This is an alert message with icon',
+    icon: 'success',
+  });
+}
+
+function showCustomAlert() {
+  alert({
+    content: h(Empty, { description: '什么都没有' }),
+  });
+}
+</script>
+<template>
+  <div class="flex gap-4">
+    <VbenButton @click="showAlert">Alert</VbenButton>
+    <VbenButton @click="showIconAlert">Alert With Icon</VbenButton>
+    <VbenButton @click="showCustomAlert">Alert With Custom Content</VbenButton>
+  </div>
+</template>

docs/src/demos/vben-alert/confirm/index.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import { alert, confirm, VbenButton } from '@vben/common-ui';
+
+function showConfirm() {
+  confirm('This is an alert message')
+    .then(() => {
+      alert('Confirmed');
+    })
+    .catch(() => {
+      alert('Canceled');
+    });
+}
+
+function showIconConfirm() {
+  confirm({
+    content: 'This is an alert message with icon',
+    icon: 'success',
+  });
+}
+
+function showAsyncConfirm() {
+  confirm({
+    beforeClose() {
+      return new Promise((resolve) => setTimeout(resolve, 2000));
+    },
+    content: 'This is an alert message with async confirm',
+    icon: 'success',
+  }).then(() => {
+    alert('Confirmed');
+  });
+}
+</script>
+<template>
+  <div class="flex gap-4">
+    <VbenButton @click="showConfirm">Confirm</VbenButton>
+    <VbenButton @click="showIconConfirm">Confirm With Icon</VbenButton>
+    <VbenButton @click="showAsyncConfirm">Async Confirm</VbenButton>
+  </div>
+</template>

docs/src/demos/vben-alert/prompt/index.vue

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import { alert, prompt, VbenButton } from '@vben/common-ui';
+
+import { VbenSelect } from '@vben-core/shadcn-ui';
+
+function showPrompt() {
+  prompt({
+    content: '请输入一些东西',
+  })
+    .then((val) => {
+      alert(`已收到你的输入：${val}`);
+    })
+    .catch(() => {
+      alert('Canceled');
+    });
+}
+
+function showSelectPrompt() {
+  prompt({
+    component: VbenSelect,
+    componentProps: {
+      options: [
+        { label: 'Option 1', value: 'option1' },
+        { label: 'Option 2', value: 'option2' },
+        { label: 'Option 3', value: 'option3' },
+      ],
+      placeholder: '请选择',
+    },
+    content: 'This is an alert message with icon',
+    icon: 'question',
+  }).then((val) => {
+    alert(`你选择的是${val}`);
+  });
+}
+</script>
+<template>
+  <div class="flex gap-4">
+    <VbenButton @click="showPrompt">Prompt</VbenButton>
+    <VbenButton @click="showSelectPrompt">Confirm With Select</VbenButton>
+  </div>
+</template>