fix: Too many models may cause performance issues

src/components/DialogCreateTask.vue

@@ -29,10 +29,9 @@
     <ResponseScroll class="-mx-5 h-full">
       <div class="px-5">
         <ModelContent
-          v-for="{ item } in data"
+          v-if="currentModel"
-          v-show="current == item.id"
+          :key="currentModel.id"
-          :key="item.id"
+          :model="currentModel"
-          :model="item"
           :editable="true"
           @submit="createDownTask"
         >
@@ -78,7 +77,7 @@ const dialog = useDialog()
 
 const modelUrl = ref<string>()
 
-const { current, data, search } = useModelSearch()
+const { current, currentModel, data, search } = useModelSearch()
 
 const searchModelsByUrl = async () => {
   if (modelUrl.value) {

src/hooks/download.ts

@@ -4,7 +4,7 @@ import { socket } from 'hooks/socket'
 import { defineStore } from 'hooks/store'
 import { useToast } from 'hooks/toast'
 import { bytesToSize } from 'utils/common'
-import { onBeforeMount, onMounted, ref } from 'vue'
+import { onBeforeMount, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 export const useDownload = defineStore('download', (store) => {
@@ -375,6 +375,7 @@ export const useModelSearch = () => {
   const { toast } = useToast()
   const data = ref<(SelectOptions & { item: VersionModel })[]>([])
   const current = ref<string | number>()
+  const currentModel = ref<BaseModel>()
 
   const handleSearchByUrl = async (url: string) => {
     if (!url) {
@@ -406,6 +407,7 @@ export const useModelSearch = () => {
           },
         }))
         current.value = data.value[0]?.value
+        currentModel.value = data.value[0]?.item
 
         if (resData.length === 0) {
           toast.add({
@@ -430,5 +432,11 @@ export const useModelSearch = () => {
       .finally(() => loading.hide())
   }
 
-  return { data, current, search: handleSearchByUrl }
+  watch(current, () => {
+    currentModel.value = data.value.find(
+      (option) => option.value === current.value,
+    )?.item
+  })
+
+  return { data, current, currentModel, search: handleSearchByUrl }
 }