ai-char/ai-service-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement infinite scroll for generation history and enhance the display of generation statuses (failed, processing).

Browse Source
This commit is contained in:
xds
2026-02-07 15:14:48 +03:00
parent 1b9fddd209
commit 2885382f1f
1 changed files with 61 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/views/FlexibleGenerationView.vue
View File

@@ -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) => {
</header>
<!-- Gallery Grid -->
<div class="flex-1 overflow-y-auto p-4 pb-32 md:pb-32"> <!-- pb-32 to allow space for bottom panel -->
<div class="flex-1 overflow-y-auto p-4 pb-32 md:pb-32" @scroll="onScroll">
<!-- pb-32 to allow space for bottom panel -->
<div v-if="historyGenerations.length > 0"
class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-2 md:gap-1">
<div v-for="gen in historyGenerations" :key="gen.id"
class="aspect-[9/16] relative group overflow-hidden bg-slate-800 transition-all duration-300">
<!-- Image -->
<!-- Image -->
<img v-if="gen.result_list && gen.result_list.length > 0"
:src="API_URL + '/assets/' + gen.result_list[0] + '?thumbnail=true'"
class="w-full h-full object-cover"
class="w-full h-full object-cover cursor-pointer"
@click="openImagePreview(API_URL + '/assets/' + gen.result_list[0])" />
<div v-else class="w-full h-full flex items-center justify-center text-slate-600">
<i class="pi pi-image text-4xl"></i>
<!-- Failed State -->
<div v-else-if="gen.status === 'failed'"
class="w-full h-full flex flex-col items-center justify-center p-2 text-center bg-red-500/10 border border-red-500/20">
<i class="pi pi-times-circle text-red-500 text-2xl mb-1"></i>
<span class="text-[10px] font-bold text-red-400 uppercase tracking-wide">Failed</span>
<span v-if="gen.failed_reason"
class="text-[8px] text-red-300/70 mt-1 line-clamp-2 leading-tight"
v-tooltip.top="gen.failed_reason">{{ gen.failed_reason }}</span>
</div>
<!-- Processing State -->
<div v-else-if="gen.status === 'processing' || gen.status === 'starting'"
class="w-full h-full flex flex-col items-center justify-center bg-slate-800/50 border border-violet-500/20">
<i class="pi pi-spin pi-spinner text-violet-500 text-xl mb-2"></i>
<span class="text-[10px] text-violet-300/70">Creating...</span>
</div>
<!-- Placeholder -->
<div v-else class="w-full h-full flex items-center justify-center text-slate-600 bg-slate-800">
<i class="pi pi-image text-4xl opacity-20"></i>
</div>
<!-- Overlay Info -->
@@ -392,14 +436,22 @@ const deleteGeneration = async (gen) => {
<!-- Top Actions -->
<div
class="flex justify-between items-start translate-y-[-10px] group-hover:translate-y-0 transition-transform duration-200">
class="flex justify-between items-start translate-y-[-10px] group-hover:translate-y-0 transition-transform duration-200 w-full">
<Button icon="pi pi-trash" v-tooltip.right="'Delete'"
class="!w-6 !h-6 !rounded-full !bg-red-500/20 !border-none !text-red-400 text-[10px] hover:!bg-red-500 hover:!text-white"
@click.stop="deleteGeneration(gen)" />
<Button icon="pi pi-pencil" v-tooltip.left="'Edit (Use Result)'"
class="!w-6 !h-6 !rounded-full !bg-white/20 !border-none !text-white text-[10px] hover:!bg-violet-500"
@click.stop="useResultAsAsset(gen)" />
<div class="flex gap-1">
<Button v-if="gen.result_list && gen.result_list.length > 0" icon="pi pi-eye"
v-tooltip.left="'View Full'"
class="!w-6 !h-6 !rounded-full !bg-white/20 !border-none !text-white text-[10px] hover:!bg-blue-500"
@click.stop="openImagePreview(API_URL + '/assets/' + gen.result_list[0])" />
<Button v-if="gen.result_list && gen.result_list.length > 0" icon="pi pi-pencil"
v-tooltip.left="'Edit (Use Result)'"
class="!w-6 !h-6 !rounded-full !bg-white/20 !border-none !text-white text-[10px] hover:!bg-violet-500"
@click.stop="useResultAsAsset(gen)" />
</div>
</div>
<!-- Bottom Actions -->