feat: 添加 DynamicDialog 和 Toast 组件，重构 PrimeVue 相关逻辑和样式

src/components/primevue/dialog-content.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const dialogRef = inject<ComputedRef<DynamicDialogOptions>>('dialogRef');
+// console.debug(`dialogRef?.value :>> `, dialogRef?.value);
+// console.debug(`dialogRef?.value.data :>> `, JSON.stringify(dialogRef?.value.data, null, 2));
+
+// import 'primevue/dynamicdialog'
+</script>
+
+<template>
+  <div>
+    <div>dialog-content.vue</div>
+    <pre>{{
+      {
+        'dialogRef?.data': dialogRef?.data,
+        "inject('dialogRef')": dialogRef,
+      }
+    }}</pre>
+  </div>
+</template>

src/components/primevue/primevue.vue

@@ -0,0 +1,98 @@
+<script lang="ts"></script>
+
+<script setup lang="tsx">
+import { DialogService, ToastService } from '@/utils/primevue';
+import dialogContent from './dialog-content.vue';
+
+const dynamicComponent = defineComponent({
+  props: {
+    'defining-props': {
+      type: Object as PropType<Record<string, unknown>>,
+      default: () => ({}),
+    },
+  },
+  setup(props, { attrs, emit }) {
+    return () => (
+      <div>
+        <button onClick={() => emit('close')}>close</button>
+        <div>PrimeVue DynamicDialog</div>
+        <pre>{`${JSON.stringify({ attrs, props }, null, 2)}`}</pre>
+      </div>
+    );
+  },
+});
+const openDialog = async () => {
+  // TODO: primevue 的 dialog 代码有问题。https://github.com/primefaces/z/blob/bd7161298a472c8cd954e35e6a538a8bd1b1b386/packages/primevue/src/dynamicdialog/DynamicDialog.vue#L64
+  // https://primevue.org/dynamicdialog/#import
+  const dialog1 = DialogService.open(dynamicComponent, {
+    props: {
+      header: 'Header1 Drag Me',
+      draggable: true,
+      // 'pt:mask:class': 'backdrop-blur-sm',
+      pt: {
+        mask: {
+          class: 'backdrop-blur-sm',
+        },
+      },
+      position: 'bottomright',
+    },
+    emits: {
+      // https://github.com/primefaces/primevue/blob/bd7161298a472c8cd954e35e6a538a8bd1b1b386/packages/primevue/src/dynamicdialog/DynamicDialog.vue#L5
+      //   v-bind="instance.options.emits", 所以 props 也可以通过 emits 传递给 content 的组件
+      'some-data': 'in-dialog',
+      'defining-props': {
+        'defined-props': 'in-dialog',
+      },
+      onClose: () => dialog1.close(),
+    },
+  });
+  await nextTick();
+  // if ($__DEV__) return;
+  await new Promise((resolve) => setTimeout(resolve, 500));
+  DialogService.open(dialogContent, {
+    props: {
+      header: 'Header2',
+      position: 'bottomleft',
+      // draggable: false,
+    },
+    data: {
+      some: 'data',
+    },
+  });
+};
+const openToast = () => {
+  ToastService.add({ severity: 'info', summary: 'Info', detail: 'Message Content', life: 3000 });
+};
+</script>
+
+<template>
+  <div class="primevue">
+    <InputText />
+    <Select
+      :options="[
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' },
+      ]"
+      optionLabel="name"
+      placeholder="选择城市"
+      class="min-w-[200px]"
+    />
+
+    <DatePicker dateFormat="dd/mm/yy" />
+
+    <Button @click="openToast"> ToastService </Button>
+    <Button @click="openDialog"> DialogService </Button>
+  </div>
+</template>
+
+<style>
+.p-toast {
+  max-width: calc(100% - 50px);
+}
+.p-toast .p-toast-message-text {
+  margin-top: -0.2rem;
+}
+</style>