From 512ee822160043ca82a34ed7d8ecb5ec1baccb3c Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Tue, 18 Oct 2022 09:58:09 +0800
Subject: [PATCH] refactor: api of dialog component (#646)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind api-change
/kind improvement
/milestone 2.0

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

重构 Dialog 组件使用 API 的调用方式，改为与 Toast 组件一致。https://github.com/halo-dev/console/pull/644

同样的，使用此方式调用 Dialog 组件不限制在 Vue 组件。

#### Special notes for your reviewer:

/cc @halo-dev/sig-halo-console

需要测试后台各个操作的会话框是否正常。

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

```release-note
重构 Dialog 组件使用 API 的调用方式。
```
---
 .../src/components/dialog/Dialog.story.vue    | 29 ++++---
 .../src/components/dialog/DialogProvider.vue  | 27 -------
 .../src/components/dialog/dialog-manager.ts   | 75 +++++++++++++++++++
 .../components/src/components/dialog/index.ts |  3 +-
 .../src/components/dialog/interface.ts        | 12 +++
 .../src/components/dialog/use-dialog.ts       | 39 ----------
 packages/shared/src/layouts/BasicLayout.vue   |  5 +-
 src/App.vue                                   |  7 +-
 .../UploadSelectorProvider.vue                |  6 +-
 .../attachments/composables/use-attachment.ts |  8 +-
 src/modules/contents/comments/CommentList.vue |  8 +-
 .../comments/components/CommentListItem.vue   |  8 +-
 .../comments/components/ReplyListItem.vue     |  6 +-
 src/modules/contents/pages/SinglePageList.vue |  6 +-
 src/modules/contents/posts/PostList.vue       |  8 +-
 .../composables/use-post-category.ts          |  6 +-
 .../posts/tags/composables/use-post-tag.ts    |  6 +-
 src/modules/interface/menus/Menus.vue         |  8 +-
 .../interface/menus/components/MenuList.vue   |  6 +-
 src/modules/interface/themes/ThemeDetail.vue  |  6 +-
 .../themes/components/ThemeListModal.vue      |  6 +-
 .../interface/themes/composables/use-theme.ts |  6 +-
 .../plugins/components/PluginInstallModal.vue |  5 +-
 .../system/plugins/composables/use-plugin.ts  |  8 +-
 src/modules/system/roles/RoleList.vue         |  5 +-
 src/modules/system/users/UserList.vue         |  8 +-
 26 files changed, 153 insertions(+), 164 deletions(-)
 delete mode 100644 packages/components/src/components/dialog/DialogProvider.vue
 create mode 100644 packages/components/src/components/dialog/dialog-manager.ts
 delete mode 100644 packages/components/src/components/dialog/use-dialog.ts

diff --git a/packages/components/src/components/dialog/Dialog.story.vue b/packages/components/src/components/dialog/Dialog.story.vue
index 876f2267..985016d3 100644
--- a/packages/components/src/components/dialog/Dialog.story.vue
+++ b/packages/components/src/components/dialog/Dialog.story.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { VButton } from "@/components/button";
-import { VDialog } from "@/components/dialog";
+import { Dialog } from "@/components/dialog";
 
 const initState = () => {
   return {
@@ -18,19 +18,26 @@ const initState = () => {
     },
   };
 };
+
+function handleConfirm() {
+  Dialog.success({
+    title: "Hello",
+    description: "Hello World",
+    onConfirm: async () => {
+      await new Promise((resolve) =>
+        setTimeout(() => {
+          console.log("Timeout");
+          resolve("");
+        }, 1000)
+      );
+    },
+  });
+}
 </script>
 <template>
   <Story :init-state="initState" title="Dialog">
-    <template #default="{ state }">
-      <VButton type="danger" @click="state.visible = true">删除</VButton>
-      <VDialog
-        :cancel-text="state.cancelText"
-        :confirm-text="state.confirmText"
-        :description="state.description"
-        :title="state.title"
-        :type="state.type"
-        :visible="state.visible"
-      ></VDialog>
+    <template #default>
+      <VButton @click="handleConfirm">确定</VButton>
     </template>
   </Story>
 </template>
diff --git a/packages/components/src/components/dialog/DialogProvider.vue b/packages/components/src/components/dialog/DialogProvider.vue
deleted file mode 100644
index fcfac149..00000000
--- a/packages/components/src/components/dialog/DialogProvider.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<script lang="ts" setup>
-import { VDialog } from "./index";
-import { provide, ref } from "vue";
-import type { useDialogOptions } from "./interface";
-import { DialogProviderProvideKey } from "@/components/dialog/interface";
-
-const options = ref<useDialogOptions>({
-  visible: false,
-  title: "",
-});
-
-provide(DialogProviderProvideKey, options);
-</script>
-<template>
-  <slot />
-  <VDialog
-    v-model:visible="options.visible"
-    :cancel-text="options.cancelText"
-    :confirm-text="options.confirmText"
-    :confirm-type="options.confirmType"
-    :description="options.description"
-    :on-cancel="options.onCancel"
-    :on-confirm="options.onConfirm"
-    :title="options.title"
-    :type="options.type"
-  ></VDialog>
-</template>
diff --git a/packages/components/src/components/dialog/dialog-manager.ts b/packages/components/src/components/dialog/dialog-manager.ts
new file mode 100644
index 00000000..f11407d8
--- /dev/null
+++ b/packages/components/src/components/dialog/dialog-manager.ts
@@ -0,0 +1,75 @@
+import DialogComponent from "./Dialog.vue";
+import { createVNode, render, type Component } from "vue";
+import type { DialogProps } from "./interface";
+
+export type DialogApiProps = Omit<DialogProps, "type" | "visible">;
+
+export type DialogApi = (props?: DialogApiProps) => void;
+
+export interface DialogEntry {
+  (props: DialogProps): void;
+  info: DialogApi;
+  success: DialogApi;
+  error: DialogApi;
+  warning: DialogApi;
+}
+
+const defaultProps: DialogProps = {
+  title: "",
+  visible: false,
+};
+
+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 { vnode, container: hostContainer } = createVNodeComponent(
+    DialogComponent,
+    props
+  );
+
+  if (hostContainer.firstElementChild) {
+    container.appendChild(hostContainer.firstElementChild);
+  }
+
+  if (vnode.component?.props) {
+    vnode.component.props.visible = true;
+  }
+
+  if (vnode?.props) {
+    // close emit
+
+    vnode.props.onClose = () => {
+      container?.remove();
+      render(null, hostContainer);
+    };
+  }
+};
+
+function createVNodeComponent(
+  component: Component,
+  props: Record<string, unknown>
+) {
+  const vnode = createVNode(component, props);
+  const container = document.createElement("div");
+  render(vnode, container);
+  return { vnode, container };
+}
+
+dialog.success = (props?: DialogApiProps) =>
+  dialog({ ...props, type: "success" });
+dialog.info = (props?: DialogApiProps) => dialog({ ...props, type: "info" });
+dialog.warning = (props?: DialogApiProps) =>
+  dialog({ ...props, type: "warning" });
+dialog.error = (props?: DialogApiProps) => dialog({ ...props, type: "error" });
+
+export { dialog as Dialog };
diff --git a/packages/components/src/components/dialog/index.ts b/packages/components/src/components/dialog/index.ts
index 3ddc98c3..04c96459 100644
--- a/packages/components/src/components/dialog/index.ts
+++ b/packages/components/src/components/dialog/index.ts
@@ -1,3 +1,2 @@
 export { default as VDialog } from "./Dialog.vue";
-export { default as VDialogProvider } from "./DialogProvider.vue";
-export * from "./use-dialog";
+export { Dialog } from "./dialog-manager";
diff --git a/packages/components/src/components/dialog/interface.ts b/packages/components/src/components/dialog/interface.ts
index ca513c8f..fe81823e 100644
--- a/packages/components/src/components/dialog/interface.ts
+++ b/packages/components/src/components/dialog/interface.ts
@@ -14,4 +14,16 @@ export interface useDialogOptions {
   onCancel?: () => void;
 }
 
+export interface DialogProps {
+  type?: Type;
+  visible?: boolean;
+  title?: string;
+  description?: string;
+  confirmType?: ButtonType;
+  confirmText?: string;
+  cancelText?: string;
+  onConfirm?: () => void;
+  onCancel?: () => void;
+}
+
 export type useDialogUserOptions = Omit<useDialogOptions, "type" | "visible">;
diff --git a/packages/components/src/components/dialog/use-dialog.ts b/packages/components/src/components/dialog/use-dialog.ts
deleted file mode 100644
index 3bb7978d..00000000
--- a/packages/components/src/components/dialog/use-dialog.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import type { Ref } from "vue";
-import { inject } from "vue";
-import type {
-  Type,
-  useDialogOptions,
-  useDialogUserOptions,
-} from "@/components/dialog/interface";
-import { DialogProviderProvideKey } from "@/components/dialog/interface";
-
-interface useDialogReturn {
-  success: (options: useDialogUserOptions) => void;
-  info: (options: useDialogUserOptions) => void;
-  warning: (options: useDialogUserOptions) => void;
-  error: (options: useDialogUserOptions) => void;
-}
-
-export function useDialog(): useDialogReturn {
-  const dialogOptions = inject<Ref<useDialogOptions>>(DialogProviderProvideKey);
-
-  if (!dialogOptions) {
-    throw new Error("DialogProvider is not mounted");
-  }
-
-  const createDialog = (type: Type) => (options: useDialogUserOptions) => {
-    // clear previous dialog
-    dialogOptions.value = { title: "", visible: false };
-
-    dialogOptions.value = { ...dialogOptions.value, ...options };
-    dialogOptions.value.type = type;
-    dialogOptions.value.visible = true;
-  };
-
-  return {
-    success: createDialog("success"),
-    info: createDialog("info"),
-    warning: createDialog("warning"),
-    error: createDialog("error"),
-  };
-}
diff --git a/packages/shared/src/layouts/BasicLayout.vue b/packages/shared/src/layouts/BasicLayout.vue
index e399218b..6dfe6f31 100644
--- a/packages/shared/src/layouts/BasicLayout.vue
+++ b/packages/shared/src/layouts/BasicLayout.vue
@@ -8,7 +8,7 @@ import {
   VAvatar,
   VSpace,
   VButton,
-  useDialog,
+  Dialog,
 } from "@halo-dev/components";
 import type { MenuGroupType, MenuItemType } from "../types/menus";
 import type { User } from "@halo-dev/api-client";
@@ -21,7 +21,6 @@ const menus = inject<MenuGroupType[]>("menus");
 const minimenus = inject<MenuItemType[]>("minimenus");
 const route = useRoute();
 const router = useRouter();
-const dialog = useDialog();
 
 const moreMenuVisible = ref(false);
 const moreMenuRootVisible = ref(false);
@@ -34,7 +33,7 @@ const handleRouteToProfile = () => {
 };
 
 const handleLogout = () => {
-  dialog.warning({
+  Dialog.warning({
     title: "是否确认退出登录？",
     onConfirm: async () => {
       try {
diff --git a/src/App.vue b/src/App.vue
index a685b76b..2152c201 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { RouterView, useRoute } from "vue-router";
-import { VDialogProvider } from "@halo-dev/components";
 import { onMounted, provide, ref, watch, type Ref } from "vue";
 import { useTitle } from "@vueuse/core";
 import GlobalSearchModal from "@/components/global-search/GlobalSearchModal.vue";
@@ -41,10 +40,8 @@ onMounted(() => {
 </script>
 
 <template>
-  <VDialogProvider>
-    <RouterView />
-    <GlobalSearchModal v-model:visible="globalSearchVisible" />
-  </VDialogProvider>
+  <RouterView />
+  <GlobalSearchModal v-model:visible="globalSearchVisible" />
 </template>
 
 <style lang="scss">
diff --git a/src/modules/contents/attachments/components/selector-providers/UploadSelectorProvider.vue b/src/modules/contents/attachments/components/selector-providers/UploadSelectorProvider.vue
index 77e2eb92..85ae1e57 100644
--- a/src/modules/contents/attachments/components/selector-providers/UploadSelectorProvider.vue
+++ b/src/modules/contents/attachments/components/selector-providers/UploadSelectorProvider.vue
@@ -4,7 +4,7 @@ import {
   IconCheckboxFill,
   VCard,
   IconDeleteBin,
-  useDialog,
+  Dialog,
 } from "@halo-dev/components";
 
 import type { AttachmentLike } from "@halo-dev/console-shared";
@@ -103,10 +103,8 @@ const handleSelect = async (attachment: Attachment | undefined) => {
   selectedAttachments.value.add(attachment);
 };
 
-const dialog = useDialog();
-
 const handleDelete = async (attachment: Attachment) => {
-  dialog.warning({
+  Dialog.warning({
     title: "确定要删除当前的附件吗？",
     confirmType: "danger",
     onConfirm: async () => {
diff --git a/src/modules/contents/attachments/composables/use-attachment.ts b/src/modules/contents/attachments/composables/use-attachment.ts
index 752b65af..b77d0e82 100644
--- a/src/modules/contents/attachments/composables/use-attachment.ts
+++ b/src/modules/contents/attachments/composables/use-attachment.ts
@@ -9,7 +9,7 @@ import type { Ref } from "vue";
 import { ref, watch } from "vue";
 import type { AttachmentLike } from "@halo-dev/console-shared";
 import { apiClient } from "@/utils/api-client";
-import { useDialog } from "@halo-dev/components";
+import { Dialog } from "@halo-dev/components";
 import type { Content, Editor } from "@halo-dev/richtext-editor";
 
 interface useAttachmentControlReturn {
@@ -64,8 +64,6 @@ export function useAttachmentControl(filterOptions?: {
   const selectedAttachments = ref<Set<Attachment>>(new Set<Attachment>());
   const checkedAll = ref(false);
 
-  const dialog = useDialog();
-
   const handleFetchAttachments = async () => {
     try {
       loading.value = true;
@@ -133,7 +131,7 @@ export function useAttachmentControl(filterOptions?: {
   };
 
   const handleDelete = (attachment: Attachment) => {
-    dialog.warning({
+    Dialog.warning({
       title: "确定要删除该附件吗？",
       description: "删除之后将无法恢复",
       confirmType: "danger",
@@ -160,7 +158,7 @@ export function useAttachmentControl(filterOptions?: {
   };
 
   const handleDeleteInBatch = () => {
-    dialog.warning({
+    Dialog.warning({
       title: "确定要删除所选的附件吗？",
       description: "删除之后将无法恢复",
       confirmType: "danger",
diff --git a/src/modules/contents/comments/CommentList.vue b/src/modules/contents/comments/CommentList.vue
index b218afa8..2912ce42 100644
--- a/src/modules/contents/comments/CommentList.vue
+++ b/src/modules/contents/comments/CommentList.vue
@@ -9,7 +9,7 @@ import {
   VSpace,
   IconCloseCircle,
   VEmpty,
-  useDialog,
+  Dialog,
 } from "@halo-dev/components";
 import CommentListItem from "./components/CommentListItem.vue";
 import UserDropdownSelector from "@/components/dropdown-selector/UserDropdownSelector.vue";
@@ -21,8 +21,6 @@ import type {
 import { onMounted, ref, watch } from "vue";
 import { apiClient } from "@/utils/api-client";
 
-const dialog = useDialog();
-
 const comments = ref<ListedCommentList>({
   page: 1,
   size: 20,
@@ -101,7 +99,7 @@ watch(
 );
 
 const handleDeleteInBatch = async () => {
-  dialog.warning({
+  Dialog.warning({
     title: "确定要删除所选的评论吗？",
     description: "将同时删除所有评论下的回复，该操作不可恢复。",
     confirmType: "danger",
@@ -126,7 +124,7 @@ const handleDeleteInBatch = async () => {
 };
 
 const handleApproveInBatch = async () => {
-  dialog.warning({
+  Dialog.warning({
     title: "确定要审核通过所选评论吗？",
     onConfirm: async () => {
       try {
diff --git a/src/modules/contents/comments/components/CommentListItem.vue b/src/modules/contents/comments/components/CommentListItem.vue
index c1b5aaa5..512346af 100644
--- a/src/modules/contents/comments/components/CommentListItem.vue
+++ b/src/modules/contents/comments/components/CommentListItem.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import {
-  useDialog,
+  Dialog,
   VAvatar,
   VButton,
   VEntity,
@@ -44,8 +44,6 @@ const emit = defineEmits<{
   (event: "reload"): void;
 }>();
 
-const dialog = useDialog();
-
 const replies = ref<ListedReply[]>([] as ListedReply[]);
 const selectedReply = ref<ListedReply>();
 const hoveredReply = ref<ListedReply>();
@@ -56,7 +54,7 @@ const replyModal = ref(false);
 provide<Ref<ListedReply | undefined>>("hoveredReply", hoveredReply);
 
 const handleDelete = async () => {
-  dialog.warning({
+  Dialog.warning({
     title: "是否确认删除该评论？",
     description: "删除评论的同时会删除该评论下的所有回复，该操作不可恢复。",
     confirmType: "danger",
@@ -75,7 +73,7 @@ const handleDelete = async () => {
 };
 
 const handleApproveReplyInBatch = async () => {
-  dialog.warning({
+  Dialog.warning({
     title: "确定要审核通过该评论的所有回复吗？",
     onConfirm: async () => {
       try {
diff --git a/src/modules/contents/comments/components/ReplyListItem.vue b/src/modules/contents/comments/components/ReplyListItem.vue
index 1e399286..c746f1ca 100644
--- a/src/modules/contents/comments/components/ReplyListItem.vue
+++ b/src/modules/contents/comments/components/ReplyListItem.vue
@@ -5,7 +5,7 @@ import {
   VTag,
   VEntityField,
   VEntity,
-  useDialog,
+  Dialog,
   VStatusDot,
   IconReplyLine,
 } from "@halo-dev/components";
@@ -31,8 +31,6 @@ const emit = defineEmits<{
   (event: "reply", reply: ListedReply): void;
 }>();
 
-const dialog = useDialog();
-
 const quoteReply = computed(() => {
   const { quoteReply: replyName } = props.reply.reply.spec;
 
@@ -46,7 +44,7 @@ const quoteReply = computed(() => {
 });
 
 const handleDelete = async () => {
-  dialog.warning({
+  Dialog.warning({
     title: "是否确认删除该回复？",
     description: "该操作不可恢复。",
     confirmType: "danger",
diff --git a/src/modules/contents/pages/SinglePageList.vue b/src/modules/contents/pages/SinglePageList.vue
index fc3a3cde..5d9be364 100644
--- a/src/modules/contents/pages/SinglePageList.vue
+++ b/src/modules/contents/pages/SinglePageList.vue
@@ -12,7 +12,7 @@ import {
   VCard,
   VPagination,
   VSpace,
-  useDialog,
+  Dialog,
   VEmpty,
   VAvatar,
   VStatusDot,
@@ -42,8 +42,6 @@ enum SinglePagePhase {
   PUBLISHED = "已发布",
 }
 
-const dialog = useDialog();
-
 const singlePages = ref<ListedSinglePageList>({
   page: 1,
   size: 20,
@@ -177,7 +175,7 @@ const handleSelectNext = async () => {
 };
 
 const handleDelete = async (singlePage: SinglePage) => {
-  dialog.warning({
+  Dialog.warning({
     title: "是否确认删除该自定义页面？",
     confirmType: "danger",
     onConfirm: async () => {
diff --git a/src/modules/contents/posts/PostList.vue b/src/modules/contents/posts/PostList.vue
index 7c3bc0b9..b062d0d5 100644
--- a/src/modules/contents/posts/PostList.vue
+++ b/src/modules/contents/posts/PostList.vue
@@ -9,7 +9,7 @@ import {
   IconEyeOff,
   IconTeam,
   IconCloseCircle,
-  useDialog,
+  Dialog,
   VButton,
   VCard,
   VEmpty,
@@ -64,8 +64,6 @@ const selectedPostWithContent = ref<PostRequest | null>(null);
 const checkedAll = ref(false);
 const selectedPostNames = ref<string[]>([]);
 
-const dialog = useDialog();
-
 const handleFetchPosts = async () => {
   try {
     loading.value = true;
@@ -205,7 +203,7 @@ const handleCheckAllChange = (e: Event) => {
 };
 
 const handleDelete = async (post: Post) => {
-  dialog.warning({
+  Dialog.warning({
     title: "是否确认删除该文章？",
     confirmType: "danger",
     onConfirm: async () => {
@@ -218,7 +216,7 @@ const handleDelete = async (post: Post) => {
 };
 
 const handleDeleteInBatch = async () => {
-  dialog.warning({
+  Dialog.warning({
     title: "是否确认删除选中的文章？",
     confirmType: "danger",
     onConfirm: async () => {
diff --git a/src/modules/contents/posts/categories/composables/use-post-category.ts b/src/modules/contents/posts/categories/composables/use-post-category.ts
index 704c07bb..40041b28 100644
--- a/src/modules/contents/posts/categories/composables/use-post-category.ts
+++ b/src/modules/contents/posts/categories/composables/use-post-category.ts
@@ -4,7 +4,7 @@ import type { Ref } from "vue";
 import { onMounted, ref } from "vue";
 import type { CategoryTree } from "@/modules/contents/posts/categories/utils";
 import { buildCategoriesTree } from "@/modules/contents/posts/categories/utils";
-import { useDialog } from "@halo-dev/components";
+import { Dialog } from "@halo-dev/components";
 
 interface usePostCategoryReturn {
   categories: Ref<Category[]>;
@@ -23,8 +23,6 @@ export function usePostCategory(options?: {
   const categoriesTree = ref<CategoryTree[]>([] as CategoryTree[]);
   const loading = ref(false);
 
-  const dialog = useDialog();
-
   const handleFetchCategories = async () => {
     try {
       loading.value = true;
@@ -43,7 +41,7 @@ export function usePostCategory(options?: {
   };
 
   const handleDelete = async (category: CategoryTree) => {
-    dialog.warning({
+    Dialog.warning({
       title: "确定要删除该分类吗？",
       description: "删除此分类之后，对应文章的关联将被解除。该操作不可恢复。",
       confirmType: "danger",
diff --git a/src/modules/contents/posts/tags/composables/use-post-tag.ts b/src/modules/contents/posts/tags/composables/use-post-tag.ts
index e602f68a..9b8bf847 100644
--- a/src/modules/contents/posts/tags/composables/use-post-tag.ts
+++ b/src/modules/contents/posts/tags/composables/use-post-tag.ts
@@ -2,7 +2,7 @@ import { apiClient } from "@/utils/api-client";
 import type { Tag } from "@halo-dev/api-client";
 import type { Ref } from "vue";
 import { onMounted, ref } from "vue";
-import { useDialog } from "@halo-dev/components";
+import { Dialog } from "@halo-dev/components";
 
 interface usePostTagReturn {
   tags: Ref<Tag[]>;
@@ -19,8 +19,6 @@ export function usePostTag(options?: {
   const tags = ref<Tag[]>([] as Tag[]);
   const loading = ref(false);
 
-  const dialog = useDialog();
-
   const handleFetchTags = async () => {
     try {
       loading.value = true;
@@ -39,7 +37,7 @@ export function usePostTag(options?: {
   };
 
   const handleDelete = async (tag: Tag) => {
-    dialog.warning({
+    Dialog.warning({
       title: "确定要删除该标签吗？",
       description: "删除此标签之后，对应文章的关联将被解除。该操作不可恢复。",
       confirmType: "danger",
diff --git a/src/modules/interface/menus/Menus.vue b/src/modules/interface/menus/Menus.vue
index 4ee101ac..67980d86 100644
--- a/src/modules/interface/menus/Menus.vue
+++ b/src/modules/interface/menus/Menus.vue
@@ -2,7 +2,7 @@
 import {
   IconAddCircle,
   IconListSettings,
-  useDialog,
+  Dialog,
   VButton,
   VCard,
   VEmpty,
@@ -35,8 +35,6 @@ const loading = ref(false);
 const menuListRef = ref();
 const menuItemEditingModal = ref();
 
-const dialog = useDialog();
-
 const handleFetchMenuItems = async () => {
   try {
     loading.value = true;
@@ -115,7 +113,7 @@ const handleUpdateInBatch = useDebounceFn(async () => {
 }, 500);
 
 const handleDelete = async (menuItem: MenuTreeItem) => {
-  dialog.info({
+  Dialog.info({
     title: "是否确定删除该菜单？",
     description: "删除后将无法恢复",
     confirmType: "danger",
@@ -128,7 +126,7 @@ const handleDelete = async (menuItem: MenuTreeItem) => {
 
       if (childrenNames.length) {
         setTimeout(() => {
-          dialog.info({
+          Dialog.info({
             title: "检查到当前菜单下包含子菜单，是否删除？",
             description: "如果选择否，那么所有子菜单将转移到一级菜单",
             confirmType: "danger",
diff --git a/src/modules/interface/menus/components/MenuList.vue b/src/modules/interface/menus/components/MenuList.vue
index d94b026d..0d26fb09 100644
--- a/src/modules/interface/menus/components/MenuList.vue
+++ b/src/modules/interface/menus/components/MenuList.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import {
-  useDialog,
+  Dialog,
   VButton,
   VCard,
   VEmpty,
@@ -37,8 +37,6 @@ const loading = ref(false);
 const selectedMenuToUpdate = ref<Menu>();
 const menuEditingModal = ref<boolean>(false);
 
-const dialog = useDialog();
-
 const handleFetchMenus = async () => {
   selectedMenuToUpdate.value = undefined;
   try {
@@ -71,7 +69,7 @@ const handleSelect = (menu: Menu) => {
 };
 
 const handleDeleteMenu = async (menu: Menu) => {
-  dialog.warning({
+  Dialog.warning({
     title: "确定要删除该菜单吗？",
     description: "将同时删除该菜单下的所有菜单项，该操作不可恢复。",
     confirmType: "danger",
diff --git a/src/modules/interface/themes/ThemeDetail.vue b/src/modules/interface/themes/ThemeDetail.vue
index 465d2127..1cffcb83 100644
--- a/src/modules/interface/themes/ThemeDetail.vue
+++ b/src/modules/interface/themes/ThemeDetail.vue
@@ -10,7 +10,7 @@ import {
   VTag,
   IconMore,
   VButton,
-  useDialog,
+  Dialog,
 } from "@halo-dev/components";
 
 // types
@@ -22,10 +22,8 @@ import { apiClient } from "@/utils/api-client";
 const selectedTheme = inject<Ref<Theme | undefined>>("selectedTheme");
 const isActivated = inject<ComputedRef<boolean>>("isActivated");
 
-const dialog = useDialog();
-
 const handleReloadThemeSetting = async () => {
-  dialog.warning({
+  Dialog.warning({
     title: "是否确认刷新主题的设置表单？",
     description: "此操作仅会刷新主题的设置表单，不会删除已有的配置。",
     onConfirm: async () => {
diff --git a/src/modules/interface/themes/components/ThemeListModal.vue b/src/modules/interface/themes/components/ThemeListModal.vue
index dd0159ed..308cde51 100644
--- a/src/modules/interface/themes/components/ThemeListModal.vue
+++ b/src/modules/interface/themes/components/ThemeListModal.vue
@@ -2,7 +2,7 @@
 import {
   IconAddCircle,
   IconGitHub,
-  useDialog,
+  Dialog,
   VButton,
   VEmpty,
   VModal,
@@ -45,8 +45,6 @@ const themes = ref<Theme[]>([]);
 const loading = ref(false);
 const themeInstall = ref(false);
 
-const dialog = useDialog();
-
 const handleFetchThemes = async () => {
   try {
     loading.value = true;
@@ -61,7 +59,7 @@ const handleFetchThemes = async () => {
 };
 
 const handleUninstall = async (theme: Theme, deleteExtensions?: boolean) => {
-  dialog.warning({
+  Dialog.warning({
     title: `${
       deleteExtensions
         ? "是否确认删除该主题以及对应的配置？"
diff --git a/src/modules/interface/themes/composables/use-theme.ts b/src/modules/interface/themes/composables/use-theme.ts
index 1dbf8a26..064be5de 100644
--- a/src/modules/interface/themes/composables/use-theme.ts
+++ b/src/modules/interface/themes/composables/use-theme.ts
@@ -2,7 +2,7 @@ import type { ComputedRef, Ref } from "vue";
 import { computed, onMounted, ref } from "vue";
 import type { Theme } from "@halo-dev/api-client";
 import { apiClient } from "@/utils/api-client";
-import { useDialog } from "@halo-dev/components";
+import { Dialog } from "@halo-dev/components";
 
 interface useThemeLifeCycleReturn {
   loading: Ref<boolean>;
@@ -21,8 +21,6 @@ export function useThemeLifeCycle(
     return activatedTheme.value?.metadata.name === theme.value?.metadata.name;
   });
 
-  const dialog = useDialog();
-
   const handleFetchActivatedTheme = async () => {
     try {
       loading.value = true;
@@ -54,7 +52,7 @@ export function useThemeLifeCycle(
   };
 
   const handleActiveTheme = async () => {
-    dialog.info({
+    Dialog.info({
       title: "是否确认启用当前主题",
       description: theme.value?.spec.displayName,
       onConfirm: async () => {
diff --git a/src/modules/system/plugins/components/PluginInstallModal.vue b/src/modules/system/plugins/components/PluginInstallModal.vue
index 8bdd51c4..3455531b 100644
--- a/src/modules/system/plugins/components/PluginInstallModal.vue
+++ b/src/modules/system/plugins/components/PluginInstallModal.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useDialog, VModal } from "@halo-dev/components";
+import { VModal, Dialog } from "@halo-dev/components";
 import FilePondUpload from "@/components/upload/FilePondUpload.vue";
 import { apiClient } from "@/utils/api-client";
 import type { Plugin } from "@halo-dev/api-client";
@@ -20,7 +20,6 @@ const emit = defineEmits<{
   (event: "close"): void;
 }>();
 
-const dialog = useDialog();
 const FilePondUploadRef = ref();
 
 const handleVisibleChange = (visible: boolean) => {
@@ -44,7 +43,7 @@ const uploadHandler = computed(() => {
 const onUploaded = async (response: AxiosResponse) => {
   const plugin = response.data as Plugin;
   handleVisibleChange(false);
-  dialog.success({
+  Dialog.success({
     title: "上传成功",
     description: "是否启动当前安装的插件？",
     onConfirm: async () => {
diff --git a/src/modules/system/plugins/composables/use-plugin.ts b/src/modules/system/plugins/composables/use-plugin.ts
index 57bd6a67..49dba2b0 100644
--- a/src/modules/system/plugins/composables/use-plugin.ts
+++ b/src/modules/system/plugins/composables/use-plugin.ts
@@ -3,7 +3,7 @@ import { computed } from "vue";
 import type { Plugin } from "@halo-dev/api-client";
 import cloneDeep from "lodash.clonedeep";
 import { apiClient } from "@/utils/api-client";
-import { useDialog } from "@halo-dev/components";
+import { Dialog } from "@halo-dev/components";
 
 interface usePluginLifeCycleReturn {
   isStarted: ComputedRef<boolean | undefined>;
@@ -14,8 +14,6 @@ interface usePluginLifeCycleReturn {
 export function usePluginLifeCycle(
   plugin?: Ref<Plugin | undefined>
 ): usePluginLifeCycleReturn {
-  const dialog = useDialog();
-
   const isStarted = computed(() => {
     return (
       plugin?.value?.status?.phase === "STARTED" && plugin.value?.spec.enabled
@@ -27,7 +25,7 @@ export function usePluginLifeCycle(
 
     const pluginToUpdate = cloneDeep(plugin.value);
 
-    dialog.info({
+    Dialog.info({
       title: `确定要${pluginToUpdate.spec.enabled ? "停止" : "启动"}该插件吗？`,
       onConfirm: async () => {
         try {
@@ -50,7 +48,7 @@ export function usePluginLifeCycle(
 
     const { enabled } = plugin.value.spec;
 
-    dialog.warning({
+    Dialog.warning({
       title: `${
         deleteExtensions
           ? "是否确认卸载该插件以及对应的配置？"
diff --git a/src/modules/system/roles/RoleList.vue b/src/modules/system/roles/RoleList.vue
index f5aa4614..1c0c2000 100644
--- a/src/modules/system/roles/RoleList.vue
+++ b/src/modules/system/roles/RoleList.vue
@@ -8,7 +8,7 @@ import {
   IconAddCircle,
   IconArrowDown,
   IconShieldUser,
-  useDialog,
+  Dialog,
   VButton,
   VCard,
   VPageHeader,
@@ -81,9 +81,8 @@ const handleCloneRole = (role: Role) => {
   editingModal.value = true;
 };
 
-const dialog = useDialog();
 const handleDelete = async (role: Role) => {
-  dialog.warning({
+  Dialog.warning({
     title: "是否确定删除该权限？",
     description: "此权限删除之后，相关联的用户将被删除角色绑定，此操作不可恢复",
     confirmType: "danger",
diff --git a/src/modules/system/users/UserList.vue b/src/modules/system/users/UserList.vue
index 9878c0fa..62394471 100644
--- a/src/modules/system/users/UserList.vue
+++ b/src/modules/system/users/UserList.vue
@@ -13,7 +13,7 @@ import {
   VAvatar,
   VEntity,
   VEntityField,
-  useDialog,
+  Dialog,
   VStatusDot,
 } from "@halo-dev/components";
 import UserEditingModal from "./components/UserEditingModal.vue";
@@ -30,8 +30,6 @@ import { usePermission } from "@/utils/permission";
 
 const { currentUserHasPermission } = usePermission();
 
-const dialog = useDialog();
-
 const checkedAll = ref(false);
 const editingModal = ref<boolean>(false);
 const passwordChangeModal = ref<boolean>(false);
@@ -95,7 +93,7 @@ const handlePaginationChange = async ({
 };
 
 const handleDelete = async (user: User) => {
-  dialog.warning({
+  Dialog.warning({
     title: "确定要删除该用户吗？",
     description: "该操作不可恢复。",
     confirmType: "danger",
@@ -114,7 +112,7 @@ const handleDelete = async (user: User) => {
 };
 
 const handleDeleteInBatch = async () => {
-  dialog.warning({
+  Dialog.warning({
     title: "是否确认删除选中的用户？",
     confirmType: "danger",
     onConfirm: async () => {