feat: 添加确认对话框组件，优化提示和对话框服务的交互逻辑

src/components/primevue/primevue.vue

@@ -1,7 +1,7 @@
 <script lang="ts"></script>
 
 <script setup lang="tsx">
-import { DialogService, ToastService } from '@/utils/primevue';
+import { ConfirmationService, DialogService, ToastService } from '@/utils/primevue';
 import dialogContent from './dialog-content.vue';
 
 const dynamicComponent = defineComponent({
@@ -29,13 +29,13 @@ const dynamicComponent = defineComponent({
 const openDialog = async () => {
   const dialog1 = DialogService.open(dynamicComponent, {
     props: {
-      header: 'Header1 可以拖动',
+      header: '对话框1 可以拖动',
       position: 'bottomleft',
       draggable: true,
       pt: { mask: { class: 'backdrop-blur-sm' } }, // 相当于: pt:mask:class="backdrop-blur-sm"
     },
     data: {
-      用inject接收: '定义在-DynamicDialogOptions.data-的数据',
+      用inject接收: '通过 DynamicDialogOptions.data 传递的数据',
     },
     emits: {
       // https://github.com/primefaces/primevue/blob/bd7161298a472c8cd954e35e6a538a8bd1b1b386/packages/primevue/src/dynamicdialog/DynamicDialog.vue#L5
@@ -54,27 +54,48 @@ const openDialog = async () => {
   await new Promise((resolve) => setTimeout(resolve, 300));
   DialogService.open(dialogContent, {
     props: {
-      header: 'Header2',
+      header: '对话框2',
       position: 'bottomright',
       // draggable: false, // Header1的 draggable: true 会影响 Header2，如果指定 draggable: false，则不会受到影响。
     },
   });
 };
 const openToast = () => {
-  ToastService.add({ severity: 'info', summary: 'Info', detail: 'Message Content', life: 3000 });
+  ToastService.add({ severity: 'info', summary: '提示', detail: '消息内容', life: 3000 });
+};
+const openConfirm = async () => {
+  ConfirmationService.require({
+    message: '确定要继续吗？',
+    header: '确认',
+    icon: 'pi pi-exclamation-triangle',
+    rejectProps: {
+      label: '取消',
+      severity: 'secondary',
+      outlined: true,
+    },
+    acceptProps: {
+      label: '确定',
+    },
+    accept: () => {
+      ToastService.add({ severity: 'info', summary: '已确认', detail: '您已同意操作', life: 3000 });
+    },
+    reject: () => {
+      ToastService.add({ severity: 'error', summary: '已取消', detail: '您已取消操作', life: 3000 });
+    },
+  });
 };
 </script>
 
 <template>
   <div class="primevue">
-    <InputText />
+    <InputText placeholder="请输入" />
     <Select
       :options="[
-        { name: 'New York', code: 'NY' },
-        { name: 'Rome', code: 'RM' },
-        { name: 'London', code: 'LDN' },
-        { name: 'Istanbul', code: 'IST' },
-        { name: 'Paris', code: 'PRS' },
+        { name: '纽约', code: 'NY' },
+        { name: '罗马', code: 'RM' },
+        { name: '伦敦', code: 'LDN' },
+        { name: '伊斯坦布尔', code: 'IST' },
+        { name: '巴黎', code: 'PRS' },
       ]"
       optionLabel="name"
       placeholder="选择城市"
@@ -83,16 +104,8 @@ const openToast = () => {
 
     <DatePicker dateFormat="dd/mm/yy" />
 
-    <Button @click="openToast"> ToastService </Button>
-    <Button @click="openDialog"> DialogService </Button>
+    <Button @click="openToast">提示服务</Button>
+    <Button @click="openDialog">对话框服务</Button>
+    <Button @click="openConfirm">确认服务</Button>
   </div>
 </template>
-
-<style>
-.p-toast {
-  max-width: calc(100% - 50px);
-}
-.p-toast .p-toast-message-text {
-  margin-top: -0.2rem;
-}
-</style>