Merge pull request #50 from hayden-fr/feature-optimize-ui

Feature optimize UI

src/components/DialogCreateTask.vue

@@ -28,21 +28,23 @@
 
     <ResponseScroll class="-mx-5 h-full">
       <div class="px-5">
-        <ModelContent
+        <KeepAlive>
-          v-if="currentModel"
+          <ModelContent
-          :key="currentModel.id"
+            v-if="currentModel"
-          :model="currentModel"
+            :key="currentModel.id"
-          :editable="true"
+            :model="currentModel"
-          @submit="createDownTask"
+            :editable="true"
-        >
+            @submit="createDownTask"
-          <template #action>
+          >
-            <Button
+            <template #action>
-              icon="pi pi-download"
+              <Button
-              :label="$t('download')"
+                icon="pi pi-download"
-              type="submit"
+                :label="$t('download')"
-            ></Button>
+                type="submit"
-          </template>
+              ></Button>
-        </ModelContent>
+            </template>
+          </ModelContent>
+        </KeepAlive>
 
         <div v-show="data.length === 0">
           <div class="flex flex-col items-center gap-4 py-8">

src/components/DialogManager.vue

@@ -40,6 +40,7 @@
     </div>
 
     <ResponseScroll
+      ref="responseScroll"
       :items="list"
       :itemSize="itemSize"
       :row-key="(item) => item.map(genModelKey).join(',')"
@@ -80,7 +81,7 @@ import ModelCard from 'components/ModelCard.vue'
 import ResponseInput from 'components/ResponseInput.vue'
 import ResponseSelect from 'components/ResponseSelect.vue'
 import ResponseScroll from 'components/ResponseScroll.vue'
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { chunk } from 'lodash'
 import { defineResizeCallback } from 'hooks/resize'
@@ -91,6 +92,8 @@ const { isMobile, cardWidth, gutter, aspect, modelFolders } = useConfig()
 const { data } = useModels()
 const { t } = useI18n()
 
+const responseScroll = ref()
+
 const searchContent = ref<string>()
 
 const currentType = ref('all')
@@ -120,6 +123,10 @@ const sortOrderOptions = ref(
   }),
 )
 
+watch([searchContent, currentType], () => {
+  responseScroll.value.init()
+})
+
 const itemSize = computed(() => {
   let itemWidth = cardWidth
   let itemGutter = gutter

src/components/ResponseScroll.vue

@@ -298,7 +298,6 @@ const startDragThumb = (event: MouseEvent) => {
 watch(
   () => props.items,
   () => {
-    init()
     setSpacerSize()
     calculateScrollThumbSize()
     calculateLoadItems()
@@ -311,5 +310,6 @@ onUnmounted(() => {
 
 defineExpose({
   viewport,
+  init,
 })
 </script>