feat: Optimize dialog

- Change the method of open dialog
- Fix the problem of open dialog disappearing due to virtual scrolling
- Float the active dialog to the top

src/hooks/dialog.ts

@@ -0,0 +1,66 @@
+import { defineStore } from 'hooks/store'
+import { Component, markRaw, ref } from 'vue'
+
+interface HeaderButton {
+  icon: string
+  command: () => void
+}
+
+interface DialogItem {
+  key: string
+  title: string
+  content: Component
+  contentProps?: Record<string, any>
+  keepAlive?: boolean
+  headerButtons?: HeaderButton[]
+  defaultSize?: Partial<ContainerSize>
+  defaultMobileSize?: Partial<ContainerSize>
+  resizeAllow?: { x?: boolean; y?: boolean }
+  minWidth?: number
+  maxWidth?: number
+  minHeight?: number
+  maxHeight?: number
+}
+
+export const useDialog = defineStore('dialog', () => {
+  const stack = ref<(DialogItem & { visible?: boolean })[]>([])
+
+  const rise = (dialog: { key: string }) => {
+    const index = stack.value.findIndex((item) => item.key === dialog.key)
+    if (index !== -1) {
+      const item = stack.value.splice(index, 1)
+      stack.value.push(...item)
+    }
+  }
+
+  const open = (dialog: DialogItem) => {
+    const item = stack.value.find((item) => item.key === dialog.key)
+    if (item) {
+      item.visible = true
+      rise(dialog)
+    } else {
+      stack.value.push({
+        ...dialog,
+        content: markRaw(dialog.content),
+        visible: true,
+      })
+    }
+  }
+
+  const close = (dialog: { key: string }) => {
+    const item = stack.value.find((item) => item.key === dialog.key)
+    if (item?.keepAlive) {
+      item.visible = false
+    } else {
+      stack.value = stack.value.filter((item) => item.key !== dialog.key)
+    }
+  }
+
+  return { stack, open, close, rise }
+})
+
+declare module 'hooks/store' {
+  interface StoreProvider {
+    dialog: ReturnType<typeof useDialog>
+  }
+}