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

feat: Implement download functionality for generated results and enhance result item interactivity with modal opening and hover effects.

Browse Source
This commit is contained in:
xds
2026-02-04 16:56:55 +03:00
parent bb3a7955b4
commit 48d3a7aea5
1 changed files with 34 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/views/CharacterDetailView.vue
View File

@@ -64,6 +64,34 @@ const handleUseInGeneration = () => {
bulkSelectedAssetIds.value = []
}
const downloadImage = (url, name) => {
fetch(url)
.then(response => response.blob())
.then(blob => {
const blobUrl = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = blobUrl;
link.download = name || 'image.webp';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(blobUrl);
})
.catch(e => console.error('Download failed', e));
}
const handleDownloadResults = () => {
if (!generatedResult.value) return
if (generatedResult.value.type === 'assets') {
generatedResult.value.assets.forEach(asset => {
downloadImage(API_URL + asset.url, asset.name + '.webp')
})
} else if (generatedResult.value.type === 'image') {
downloadImage(generatedResult.value.url, 'generated_image.webp')
}
}
const loadData = async () => {
loading.value = true
const charId = route.params.id
@@ -570,7 +598,8 @@ const handleLogout = () => {
<div class="flex justify-between items-center mb-1">
<h2 class="text-lg font-bold m-0">Result</h2>
<div class="flex gap-1">
<Button icon="pi pi-download" text class="hover:bg-white/10 p-1 text-xs" />
<Button icon="pi pi-download" text class="hover:bg-white/10 p-1 text-xs"
@click="handleDownloadResults" title="Download results" />
<Button icon="pi pi-share-alt" text class="hover:bg-white/10 p-1 text-xs" />
</div>
</div>
@@ -578,12 +607,14 @@ const handleLogout = () => {
<div v-if="generatedResult.type === 'assets'"
class="grid grid-cols-1 md:grid-cols-2 gap-2 overflow-y-auto">
<div v-for="asset in generatedResult.assets" :key="asset.id"
class="rounded-xl overflow-hidden border border-white/10 shadow-xl aspect-square bg-black/20">
@click="openModal(asset)"
class="h-80 rounded-xl overflow-hidden border border-white/10 shadow-xl aspect-[9/16] bg-black/20 cursor-pointer hover:border-violet-500/50 hover:scale-[1.01] transition-all duration-300">
<img :src="API_URL + asset.url" class="w-full h-full object-cover" />
</div>
</div>
<div v-else-if="generatedResult.type === 'image'"
class="flex-1 rounded-xl overflow-hidden border border-white/10 shadow-xl">
@click="openModal({ url: generatedResult.url, name: 'Generated Image', type: 'IMAGE' })"
class="flex-1 rounded-xl overflow-hidden border border-white/10 shadow-xl cursor-pointer hover:border-violet-500/50 transition-all duration-300">
<img :src="generatedResult.url" class="w-full h-full object-cover" />
</div>
<div v-else