diff --git a/src/views/FlexibleGenerationView.vue b/src/views/FlexibleGenerationView.vue index 211a857..68ab9b5 100644 --- a/src/views/FlexibleGenerationView.vue +++ b/src/views/FlexibleGenerationView.vue @@ -43,6 +43,7 @@ const generationStatus = ref('') const generationProgress = ref(0) const generationError = ref(null) const generatedResult = ref(null) // For immediate feedback if needed +const isLoadingMore = ref(false) // Options const qualityOptions = ref([ @@ -159,7 +160,29 @@ const loadData = async () => { } const loadMoreHistory = async () => { - // Implement pagination/infinite scroll logic here + if (isLoadingMore.value || historyGenerations.value.length >= historyTotal.value) return + + isLoadingMore.value = true + historyFirst.value += historyRows.value + + try { + const response = await aiService.getGenerations(historyRows.value, historyFirst.value) + if (response && response.generations) { + historyGenerations.value = [...historyGenerations.value, ...response.generations] + historyTotal.value = response.total_count || historyTotal.value + } + } catch (e) { + console.error('Failed to load more history', e) + } finally { + isLoadingMore.value = false + } +} + +const onScroll = (event) => { + const { scrollTop, clientHeight, scrollHeight } = event.target + if (scrollTop + clientHeight >= scrollHeight - 50) { + loadMoreHistory() + } } // --- Generation --- @@ -370,20 +393,41 @@ const deleteGeneration = async (gen) => { -
+
+
+ -
- + + +
+ + Failed + {{ gen.failed_reason }} +
+ + +
+ + Creating... +
+ + +
+
@@ -392,14 +436,22 @@ const deleteGeneration = async (gen) => {
+ class="flex justify-between items-start translate-y-[-10px] group-hover:translate-y-0 transition-transform duration-200 w-full">