From c80ceb460dcb29ee54565ad3f198628cf856ebc7 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Mon, 30 Sep 2024 17:29:52 +0800
Subject: [PATCH] feat: add support for setting uniqueId in Dialog to prevent
 duplicate creation (#6737)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/area ui
/kind feature
/milestone 2.20.x

#### What this PR does / why we need it:

Dialog API 支持传入 uniqueId，以限制同一时间仅打开一个。

#### Which issue(s) this PR fixes:

Fixes https://github.com/halo-dev/halo/issues/6724

#### Does this PR introduce a user-facing change?

```release-note
Dialog API 支持传入 uniqueId，以限制同一时间仅打开一个。
```
---
 .../src/components/dialog/Dialog.stories.ts   | 10 ++--
 .../src/components/dialog/Dialog.vue          | 50 +++++++------------
 .../src/components/dialog/dialog-manager.ts   | 43 +++++++++++-----
 .../src/components/dialog/interface.ts        |  8 +--
 .../components/src/components/modal/Modal.vue |  1 +
 5 files changed, 56 insertions(+), 56 deletions(-)

diff --git a/ui/packages/components/src/components/dialog/Dialog.stories.ts b/ui/packages/components/src/components/dialog/Dialog.stories.ts
index e423c49dd..e726a9afb 100644
--- a/ui/packages/components/src/components/dialog/Dialog.stories.ts
+++ b/ui/packages/components/src/components/dialog/Dialog.stories.ts
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/vue3";
 
-import { VDialog } from ".";
+import { Dialog, VDialog } from ".";
 import { VButton } from "../button";
 
 const meta: Meta<typeof VDialog> = {
@@ -12,8 +12,11 @@ const meta: Meta<typeof VDialog> = {
     height: 400,
     setup() {
       const showDialog = () => {
-        // @ts-ignore
-        args.visible = true;
+        Dialog.success({
+          title: "Hi",
+          // @ts-ignore
+          type: args.type,
+        });
       };
 
       return {
@@ -24,7 +27,6 @@ const meta: Meta<typeof VDialog> = {
     template: `
       <div style="height: 400px">
         <VButton @click="showDialog" >点击显示Dialog</VButton>
-        <VDialog v-bind="args" @onCancel="args.visible = false" />
       </div>
     `,
   }),
diff --git a/ui/packages/components/src/components/dialog/Dialog.vue b/ui/packages/components/src/components/dialog/Dialog.vue
index 94b2608fb..8a5cb7cbb 100644
--- a/ui/packages/components/src/components/dialog/Dialog.vue
+++ b/ui/packages/components/src/components/dialog/Dialog.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import type { Type as ButtonType } from "@/components/button/interface";
-import type { Type } from "@/components/dialog/interface";
+import type { DialogProps, Type } from "@/components/dialog/interface";
 import { markRaw, ref, type Component, type Raw } from "vue";
 import {
   IconCheckboxCircle,
@@ -12,36 +11,22 @@ import {
 import { VButton } from "../button";
 import { VModal } from "../modal";
 
-const props = withDefaults(
-  defineProps<{
-    type?: Type;
-    title?: string;
-    description?: string;
-    confirmText?: string;
-    confirmType?: ButtonType;
-    showCancel?: boolean;
-    cancelText?: string;
-    visible?: boolean;
-    onConfirm?: () => void;
-    onCancel?: () => void;
-  }>(),
-  {
-    type: "info",
-    title: "提示",
-    description: "",
-    confirmText: "确定",
-    confirmType: "primary",
-    showCancel: true,
-    cancelText: "取消",
-    visible: false,
-    onConfirm: () => {
-      return;
-    },
-    onCancel: () => {
-      return;
-    },
-  }
-);
+const props = withDefaults(defineProps<DialogProps>(), {
+  type: "info",
+  title: "提示",
+  description: "",
+  confirmText: "确定",
+  confirmType: "primary",
+  showCancel: true,
+  cancelText: "取消",
+  visible: false,
+  onConfirm: () => {
+    return;
+  },
+  onCancel: () => {
+    return;
+  },
+});
 
 const emit = defineEmits<{
   (event: "update:visible", visible: boolean): void;
@@ -102,6 +87,7 @@ const handleClose = () => {
     :visible="visible"
     :width="450"
     :layer-closable="true"
+    :data-unique-id="uniqueId"
     @close="handleCancel()"
   >
     <div class="flex justify-between items-start py-2 mb-2">
diff --git a/ui/packages/components/src/components/dialog/dialog-manager.ts b/ui/packages/components/src/components/dialog/dialog-manager.ts
index 37d2d740d..5b90f7092 100644
--- a/ui/packages/components/src/components/dialog/dialog-manager.ts
+++ b/ui/packages/components/src/components/dialog/dialog-manager.ts
@@ -19,17 +19,32 @@ const defaultProps: DialogProps = {
   visible: false,
 };
 
+const DIALOG_CONTAINER_CLASS = ".dialog-container";
+const MODAL_WRAPPER_CLASS = ".modal-wrapper";
+
+function getOrCreateContainer() {
+  let container = document.body.querySelector(DIALOG_CONTAINER_CLASS);
+  if (!container) {
+    container = document.createElement("div");
+    container.className = "dialog-container";
+    document.body.appendChild(container);
+  }
+  return container;
+}
+
 const dialog: DialogEntry = (userProps: DialogProps) => {
   const props = {
     ...defaultProps,
     ...userProps,
   };
 
-  let container = document.body.querySelector(".dialog-container");
-  if (!container) {
-    container = document.createElement("div");
-    container.className = "dialog-container";
-    document.body.appendChild(container);
+  const container = getOrCreateContainer();
+
+  if (
+    props.uniqueId &&
+    container.querySelector(`[data-unique-id="${props.uniqueId}"]`)
+  ) {
+    return;
   }
 
   const { vnode, container: hostContainer } = createVNodeComponent(
@@ -37,19 +52,21 @@ const dialog: DialogEntry = (userProps: DialogProps) => {
     props
   );
 
-  if (hostContainer.firstElementChild) {
+  hostContainer.firstElementChild &&
     container.appendChild(hostContainer.firstElementChild);
-  }
 
-  if (vnode.component?.props) {
-    vnode.component.props.visible = true;
-  }
+  vnode.component?.props && (vnode.component.props.visible = true);
 
   if (vnode?.props) {
-    // close emit
-
     vnode.props.onClose = () => {
-      container?.remove();
+      const modals = container.querySelectorAll(MODAL_WRAPPER_CLASS);
+
+      if (modals.length > 1) {
+        hostContainer.firstElementChild?.remove();
+      } else {
+        container.remove();
+      }
+
       render(null, hostContainer);
     };
   }
diff --git a/ui/packages/components/src/components/dialog/interface.ts b/ui/packages/components/src/components/dialog/interface.ts
index 9bfa31e05..1da3989df 100644
--- a/ui/packages/components/src/components/dialog/interface.ts
+++ b/ui/packages/components/src/components/dialog/interface.ts
@@ -11,13 +11,7 @@ export interface DialogProps {
   showCancel?: boolean;
   confirmText?: string;
   cancelText?: string;
+  uniqueId?: string;
   onConfirm?: () => void;
   onCancel?: () => void;
 }
-
-type useDialogOptions = Omit<DialogProps, "visible" | "title"> & {
-  visible: boolean;
-  title: string;
-};
-
-export type useDialogUserOptions = Omit<useDialogOptions, "type" | "visible">;
diff --git a/ui/packages/components/src/components/modal/Modal.vue b/ui/packages/components/src/components/modal/Modal.vue
index 3c9ba85e9..019f1f496 100644
--- a/ui/packages/components/src/components/modal/Modal.vue
+++ b/ui/packages/components/src/components/modal/Modal.vue
@@ -126,6 +126,7 @@ watch(
       class="modal-wrapper"
       role="dialog"
       tabindex="0"
+      v-bind="$attrs"
       @keyup.esc.stop="handleClose()"
     >
       <transition