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

2024-12-12 23:34:20 +08:00
parent 22ff97d003
commit 6ceb3f0766
10 changed files with 665 additions and 601 deletions
--- a/package.json
+++ b/package.json
@ -26,13 +26,16 @@
  "pnpm": {
    "overrides": {
      "vite": "$vite"
+    },
+    "patchedDependencies": {
+      "primevue@4.2.5": "patches/primevue@4.2.5.patch"
    }
  },
  "dependencies": {
    "@alova/adapter-axios": "^2.0.11",
    "@intlify/unplugin-vue-i18n": "^6.0.1",
-    "@primevue/themes": "^4.2.4",
-    "@unhead/vue": "^1.11.13",
+    "@primevue/themes": "^4.2.5",
+    "@unhead/vue": "^1.11.14",
    "@vant/use": "^1.6.0",
    "@vueuse/core": "^12.0.0",
    "alova": "^3.2.6",
@ -46,14 +49,14 @@
    "pinia-plugin-persistedstate": "^4.1.3",
    "primeicons": "^7.0.0",
    "primelocale": "^1.2.2",
-    "primevue": "^4.2.4",
+    "primevue": "^4.2.5",
    "radash": "^12.1.0",
    "taze": "^0.18.0",
    "tdesign-icons-vue-next": "^0.3.3",
    "tdesign-mobile-vue": "^1.6.0",
    "ts-enum-util": "^4.1.0",
    "utils4u": "^2.12.2",
-    "vant": "^4.9.9",
+    "vant": "^4.9.10",
    "vite-plugin-webfont-dl": "^3.10.3",
    "vue": "^3.5.13",
    "vue-i18n": "10.0.5",
@ -65,11 +68,11 @@
    "@faker-js/faker": "^9.3.0",
    "@iconify-json/carbon": "^1.2.4",
    "@iconify/utils": "^2.2.0",
-    "@playwright/test": "^1.49.0",
-    "@primevue/auto-import-resolver": "^4.2.4",
+    "@playwright/test": "^1.49.1",
+    "@primevue/auto-import-resolver": "^4.2.5",
    "@tsconfig/node20": "^20.1.4",
    "@types/jsdom": "^21.1.7",
-    "@types/node": "^22.10.1",
+    "@types/node": "^22.10.2",
    "@types/nprogress": "^0.2.3",
    "@unocss/preset-rem-to-px": "latest",
    "@vant/auto-import-resolver": "^1.2.1",
@ -88,7 +91,7 @@
    "husky": "^9.1.7",
    "jsdom": "^25.0.1",
    "less": "^4.2.1",
-    "lint-staged": "^15.2.10",
+    "lint-staged": "^15.2.11",
    "mockjs": "^1.1.0",
    "npm-run-all2": "^7.0.1",
    "prettier": "^3.4.2",
@ -98,14 +101,14 @@
    "unplugin-auto-import": "^0.18.6",
    "unplugin-icons": "^0.21.0",
    "unplugin-vue-components": "^0.27.5",
-    "unplugin-vue-macros": "^2.13.5",
+    "unplugin-vue-macros": "^2.13.6",
    "unplugin-vue-markdown": "^0.27.1",
    "unplugin-vue-router": "^0.10.9",
-    "vercel": "^39.1.3",
+    "vercel": "^39.2.0",
    "vite": "^6.0.3",
    "vite-plugin-cdn-import": "^1.0.1",
    "vite-plugin-fake-server": "^2.1.4",
-    "vite-plugin-vue-devtools": "^7.6.7",
+    "vite-plugin-vue-devtools": "^7.6.8",
    "vue-tsc": "^2.1.10"
  }
 }
--- a/patches/primevue@4.2.5.patch
+++ b/patches/primevue@4.2.5.patch
@ -0,0 +1,30 @@
+diff --git a/dynamicdialog/index.mjs b/dynamicdialog/index.mjs
+index 984a71573166b74e4593c258124f48580b7e9aa1..2b04f1be26b0bc1e09a78034a0289177724dbd73 100644
+--- a/dynamicdialog/index.mjs
+++ b/dynamicdialog/index.mjs
+@@ -65,11 +65,12 @@ var script = {
+       !this.currentInstance && instance.options.onClose && instance.options.onClose({
+         type: 'dialog-close'
+       });
+-      delete this.instanceMap[instance.key];
+     },
+-    onDialogAfterHide: function onDialogAfterHide() {
+    onDialogAfterHide: function onDialogAfterHide(instance) {
+      console.debug('--onDialogAfterHide--');
+       this.currentInstance && delete this.currentInstance;
+       this.currentInstance = null;
+      delete this.instanceMap[instance.key];
+     },
+     getTemplateItems: function getTemplateItems(template) {
+       return Array.isArray(template) ? template : [template];
+@@ -95,7 +96,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
+       onHide: function onHide($event) {
+         return $options.onDialogHide(instance);
+       },
+-      onAfterHide: $options.onDialogAfterHide
+      onAfterHide: function onAfterHide($event) {
+        return $options.onDialogAfterHide(instance);
+      }
+     }), createSlots({
+       "default": withCtx(function () {
+         return [(openBlock(), createBlock(resolveDynamicComponent(instance.content), mergeProps({
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/App.vue
+++ b/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>
--- a/src/components/primevue.vue
+++ b/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>
--- a/src/components/primevue/dialog-content.vue
+++ b/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>
--- a/src/components/primevue/primevue.vue
+++ b/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>
--- a/src/main.ts
+++ b/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 }) => {
--- a/src/pages/index-page.vue
+++ b/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
--- a/src/utils/primevue.ts
+++ b/src/utils/primevue.ts
@ -45,3 +45,7 @@ export const DialogService: DialogServiceMethods = {
    return instance;
  },
 };
+
+declare global {
+  type DynamicDialogOptions = import('primevue/dynamicdialogoptions').DynamicDialogOptions;
+}