feat: 添加 Toast 和 Dialog 服务，优化组件交互和样式

src/components/primevue.vue

@@ -1,27 +1,27 @@
-<script setup lang="ts">
-// @ts-expect-error - Ignore missing types
-import ToastEventBus from 'primevue/toasteventbus';
-import type { ToastServiceMethods } from 'primevue/toastservice';
+<script setup lang="tsx">
+import { DialogService, ToastService } from '@/utils/primevue';
 
-// https://github.com/primefaces/primevue/blob/61929eae7526015af0362fc5889f2af7527403d1/packages/primevue/src/toastservice/ToastService.js
-const ToastService: ToastServiceMethods = {
-  add: (message) => {
-    ToastEventBus.emit('add', message);
-  },
-  remove: (message) => {
-    ToastEventBus.emit('remove', message);
-  },
-  removeGroup: (group) => {
-    ToastEventBus.emit('remove-group', group);
-  },
-  removeAllGroups: () => {
-    ToastEventBus.emit('remove-all-groups');
+const dynamicComponent = defineComponent({
+  setup() {
+    return () => <div>PrimeVue DynamicDialog</div>;
   },
+});
+const openDialog = () => {
+  // https://primevue.org/dynamicdialog/#import
+  DialogService.open(dynamicComponent, {
+    props: {
+      header: 'Header',
+    },
+  });
+};
+const openToast = () => {
+  ToastService.add({ severity: 'info', summary: 'Info', detail: 'Message Content', life: 3000 });
 };
 </script>
 
 <template>
   <div class="primevue">
+    <DynamicDialog />
     <Toast />
     <InputText />
     <Select
@@ -39,9 +39,8 @@ const ToastService: ToastServiceMethods = {
 
     <DatePicker dateFormat="dd/mm/yy" />
 
-    <Button @click="ToastService.add({ severity: 'info', summary: 'Info', detail: 'Message Content', life: 3000 })">
-      ToastService
-    </Button>
+    <Button @click="openToast"> ToastService </Button>
+    <Button @click="openDialog"> DialogService </Button>
   </div>
 </template>