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

src/views/CharacterDetailView.vue

@@ -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