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/components/DialogCreateTask.vue

@@ -1,97 +1,80 @@
 <template>
-  <Dialog
-    v-model:visible="visible"
-    :header="$t('parseModelUrl')"
-    :modal="true"
-    :maximizable="!isMobile"
-    maximizeIcon="pi pi-arrow-up-right-and-arrow-down-left-from-center"
-    minimizeIcon="pi pi-arrow-down-left-and-arrow-up-right-to-center"
-    pt:mask:style="--p-mask-background: rgba(0, 0, 0, 0.3)"
-    pt:root:class="max-h-full"
-    pt:content:class="px-0"
-    @after-hide="clearContent"
-  >
-    <div class="flex h-full flex-col gap-4 px-5">
-      <ResponseInput
-        v-model="modelUrl"
-        :allow-clear="true"
-        :placeholder="$t('pleaseInputModelUrl')"
-        @keypress.enter="searchModelsByUrl"
+  <div class="flex h-full flex-col gap-4 px-5">
+    <ResponseInput
+      v-model="modelUrl"
+      :allow-clear="true"
+      :placeholder="$t('pleaseInputModelUrl')"
+      @keypress.enter="searchModelsByUrl"
+    >
+      <template #suffix>
+        <span
+          class="pi pi-search pi-inputicon"
+          @click="searchModelsByUrl"
+        ></span>
+      </template>
+    </ResponseInput>
+
+    <div v-show="data.length > 0">
+      <ResponseSelect
+        v-model="current"
+        :items="data"
+        :type="isMobile ? 'drop' : 'button'"
       >
-        <template #suffix>
-          <span
-            class="pi pi-search pi-inputicon"
-            @click="searchModelsByUrl"
-          ></span>
+        <template #prefix>
+          <span>version:</span>
         </template>
-      </ResponseInput>
-
-      <div v-show="data.length > 0">
-        <ResponseSelect
-          v-model="current"
-          :items="data"
-          :type="isMobile ? 'drop' : 'button'"
-        >
-          <template #prefix>
-            <span>version:</span>
-          </template>
-        </ResponseSelect>
-      </div>
-
-      <ResponseScroll class="-mx-5 h-full">
-        <div class="px-5">
-          <ModelContent
-            v-for="{ item } in data"
-            v-show="current == item.id"
-            :key="item.id"
-            :model="item"
-            :editable="true"
-            @submit="createDownTask"
-          >
-            <template #action>
-              <Button
-                icon="pi pi-download"
-                :label="$t('download')"
-                type="submit"
-              ></Button>
-            </template>
-          </ModelContent>
-
-          <div v-show="data.length === 0">
-            <div class="flex flex-col items-center gap-4 py-8">
-              <i class="pi pi-box text-3xl"></i>
-              <div>No Models Found</div>
-            </div>
-          </div>
-        </div>
-      </ResponseScroll>
+      </ResponseSelect>
     </div>
 
-    <DialogResizer :min-width="390"></DialogResizer>
-  </Dialog>
+    <ResponseScroll class="-mx-5 h-full">
+      <div class="px-5">
+        <ModelContent
+          v-for="{ item } in data"
+          v-show="current == item.id"
+          :key="item.id"
+          :model="item"
+          :editable="true"
+          @submit="createDownTask"
+        >
+          <template #action>
+            <Button
+              icon="pi pi-download"
+              :label="$t('download')"
+              type="submit"
+            ></Button>
+          </template>
+        </ModelContent>
+
+        <div v-show="data.length === 0">
+          <div class="flex flex-col items-center gap-4 py-8">
+            <i class="pi pi-box text-3xl"></i>
+            <div>No Models Found</div>
+          </div>
+        </div>
+      </div>
+    </ResponseScroll>
+  </div>
 </template>
 
 <script setup lang="ts">
-import DialogResizer from 'components/DialogResizer.vue'
+import ModelContent from 'components/ModelContent.vue'
 import ResponseInput from 'components/ResponseInput.vue'
 import ResponseSelect from 'components/ResponseSelect.vue'
 import ResponseScroll from 'components/ResponseScroll.vue'
-import ModelContent from 'components/ModelContent.vue'
 import Button from 'primevue/button'
-import Dialog from 'primevue/dialog'
+import { useConfig } from 'hooks/config'
+import { useDialog } from 'hooks/dialog'
 import { useModelSearch } from 'hooks/download'
-import { ref } from 'vue'
-import { previewUrlToFile } from 'utils/common'
 import { useLoading } from 'hooks/loading'
 import { request } from 'hooks/request'
 import { useToast } from 'hooks/toast'
-import { useConfig } from 'hooks/config'
-
-const visible = defineModel<boolean>('visible')
+import { previewUrlToFile } from 'utils/common'
+import { ref } from 'vue'
 
 const { isMobile } = useConfig()
 const { toast } = useToast()
 const loading = useLoading()
+const dialog = useDialog()
 
 const modelUrl = ref<string>()
 
@@ -103,11 +86,6 @@ const searchModelsByUrl = async () => {
   }
 }
 
-const clearContent = () => {
-  modelUrl.value = undefined
-  data.value = []
-}
-
 const createDownTask = async (data: VersionModel) => {
   const formData = new FormData()
 
@@ -143,7 +121,7 @@ const createDownTask = async (data: VersionModel) => {
     body: formData,
   })
     .then(() => {
-      visible.value = false
+      dialog.close({ key: 'model-manager-create-task' })
     })
     .catch((e) => {
       toast.add({