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

src/assets/reset-primevue.css

@@ -0,0 +1,6 @@
+.p-toast {
+  max-width: calc(100% - 50px);
+}
+.p-toast .p-toast-message-text {
+  margin-top: -0.2rem;
+}

src/components/primevue.vue

@@ -1,27 +1,27 @@
-<script setup lang="ts">
+<script setup lang="tsx">
-// @ts-expect-error - Ignore missing types
+import { DialogService, ToastService } from '@/utils/primevue';
-import ToastEventBus from 'primevue/toasteventbus';
-import type { ToastServiceMethods } from 'primevue/toastservice';
 
-// https://github.com/primefaces/primevue/blob/61929eae7526015af0362fc5889f2af7527403d1/packages/primevue/src/toastservice/ToastService.js
+const dynamicComponent = defineComponent({
-const ToastService: ToastServiceMethods = {
+  setup() {
-  add: (message) => {
+    return () => <div>PrimeVue DynamicDialog</div>;
-    ToastEventBus.emit('add', message);
-  },
-  remove: (message) => {
-    ToastEventBus.emit('remove', message);
-  },
-  removeGroup: (group) => {
-    ToastEventBus.emit('remove-group', group);
-  },
-  removeAllGroups: () => {
-    ToastEventBus.emit('remove-all-groups');
   },
+});
+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 })">
+    <Button @click="openToast"> ToastService </Button>
-      ToastService
+    <Button @click="openDialog"> DialogService </Button>
-    </Button>
   </div>
 </template>
 

src/utils/primevue.ts

@@ -0,0 +1,47 @@
+/**
+ * 需要把 <Toast /> 放在 App.vue 的 template 中
+ */
+
+// @ts-expect-error - Ignore missing types
+import ToastEventBus from 'primevue/toasteventbus';
+import type { ToastServiceMethods } from 'primevue/toastservice';
+
+// @ts-expect-error - Ignore missing types
+import DynamicDialogEventBus from 'primevue/dynamicdialogeventbus';
+import type { DialogServiceMethods } from 'primevue/dialogservice';
+
+import '../assets/reset-primevue.css';
+
+// https://github.com/primefaces/primevue/blob/61929eae7526015af0362fc5889f2af7527403d1/packages/primevue/src/toastservice/ToastService.js
+export 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');
+  },
+};
+
+// https://github.com/primefaces/primevue/blob/18367429f624285ff32d0ef775c1825a43a02fb1/packages/primevue/src/dialogservice/DialogService.js#L7
+export const DialogService: DialogServiceMethods = {
+  open: (content, options) => {
+    const instance = {
+      content: content && markRaw(content),
+      options: options || {},
+      data: options && options.data,
+      close: (params: unknown) => {
+        DynamicDialogEventBus.emit('close', { instance, params });
+      },
+    };
+
+    DynamicDialogEventBus.emit('open', { instance });
+
+    return instance;
+  },
+};