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

src/App.vue

@@ -7,4 +7,7 @@ const VITE_BUILD_COMMIT = import.meta.env.VITE_BUILD_COMMIT;
     commit: {{ VITE_BUILD_COMMIT }}
   </div>
   <RouterView />
+
+  <DynamicDialog />
+  <Toast />
 </template>

src/components/primevue.vue

@@ -1,54 +0,0 @@
-<script setup lang="tsx">
-import { DialogService, ToastService } from '@/utils/primevue';
-
-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
-      :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>

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>

src/main.ts

@@ -22,7 +22,7 @@ import PrimeVue from 'primevue/config';
 import messages from '@intlify/unplugin-vue-i18n/messages';
 
 async function init() {
-  if (import.meta.env.MODE === 'development' || 1 === 1) {
+  if ((import.meta.env.MODE === 'development' || 1 === 1) && 0) {
     // TODO: https://github.com/hu3dao/vite-plugin-debug/
     // https://eruda.liriliri.io/zh/docs/#快速上手
     await import('eruda').then(({ default: eruda }) => {

src/pages/index-page.vue

@@ -1,7 +1,7 @@
 <script lang="tsx" setup>
 import { routes } from 'vue-router/auto-routes';
 import I18nComp from '../components/i18nComp/index.vue';
-import Primevue from '@/components/primevue.vue';
+import Primevue from '@/components/primevue/primevue.vue';
 
 useHead({
   // Titles

src/utils/primevue.ts

@@ -45,3 +45,7 @@ export const DialogService: DialogServiceMethods = {
     return instance;
   },
 };
+
+declare global {
+  type DynamicDialogOptions = import('primevue/dynamicdialogoptions').DynamicDialogOptions;
+}