| 1 | /** |
| 2 | * SharePreviewModal - 分享预览弹窗组件 |
| 3 | * 用于预览生成的分享图片并提供下载/发布功能 |
| 4 | */ |
| 5 | 'use client' |
| 6 | |
| 7 | import { useRouter } from 'next/navigation' |
| 8 | import React, { useCallback, useState } from 'react' |
| 9 | import { uploadToOss } from '@/api/materials/material.api' |
| 10 | import { PubType } from '@/app/config/publishConfig' |
| 11 | |
| 12 | import { useTransClient } from '@/app/i18n/client' |
| 13 | import { usePublishDialogStorageStore } from '@/components/PublishDialog/usePublishDialogStorageStore' |
| 14 | import { Button } from '@/components/ui/button' |
| 15 | import { Modal } from '@/components/ui/modal' |
| 16 | import { useAccountStore } from '@/store/account' |
| 17 | import { getPlatformInfoSync } from '@/store/platformMetadata' |
| 18 | import { toast } from '@/utils/ui/toast' |
| 19 | |
| 20 | interface SharePreviewModalProps { |
| 21 | open: boolean |
| 22 | onClose: () => void |
| 23 | blobs: Blob[] |
| 24 | urls: string[] // object URLs |
| 25 | taskId: string |
| 26 | } |
| 27 | |
| 28 | /** |
| 29 | * 上传 Blob 数组到 OSS |
| 30 | * @param blobs - 待上传的 Blob 数组 |
| 31 | * @returns 上传成功的 URL 数组 |
| 32 | */ |
| 33 | async function uploadBlobsToOss(blobs: Blob[]): Promise<string[]> { |
| 34 | const uploadedUrls: string[] = [] |
| 35 | for (let i = 0; i < blobs.length; i++) { |
| 36 | const file = new File([blobs[i]], `aitoearn_export_${Date.now()}_${i}.png`, { |
| 37 | type: blobs[i].type || 'image/png', |
| 38 | }) |
| 39 | try { |
| 40 | const url = await uploadToOss(file) |
| 41 | uploadedUrls.push(url as string) |
| 42 | } |
| 43 | catch (err) { |
| 44 | console.error('Upload failed for blob', err) |
| 45 | } |
| 46 | } |
| 47 | return uploadedUrls |
| 48 | } |
| 49 | |
| 50 | export function SharePreviewModal({ open, onClose, blobs, urls, taskId }: SharePreviewModalProps) { |
| 51 | const { t } = useTransClient('share') |
| 52 | const router = useRouter() |
| 53 | const { accountList, getAccountList } = useAccountStore() |
| 54 | const [uploading, setUploading] = useState(false) |
| 55 | |
| 56 | // 下载图片 |
| 57 | const downloadBlobs = useCallback(async () => { |
| 58 | try { |
| 59 | for (let i = 0; i < blobs.length; i++) { |
| 60 | const blob = blobs[i] |
| 61 | const a = document.createElement('a') |
| 62 | const url = URL.createObjectURL(blob) |
| 63 | a.href = url |
| 64 | a.download |
| 65 | = blobs.length === 1 |
| 66 | ? `aitoearn_conversation_${taskId}.png` |
| 67 | : `aitoearn_${taskId}_${i + 1}.png` |
| 68 | document.body.appendChild(a) |
| 69 | a.click() |
| 70 | a.remove() |
| 71 | URL.revokeObjectURL(url) |
| 72 | } |
| 73 | toast.success(t('download') || 'Downloaded') |
| 74 | } |
| 75 | catch (e) { |
| 76 | console.error(e) |
| 77 | toast.error(t('downloadFailed') || 'Download failed') |
| 78 | } |
| 79 | }, [blobs, taskId, t]) |
| 80 | |
| 81 | // Agent 分享：上传图片并跳转到首页 |
| 82 | const handleAgentShare = useCallback(async () => { |
| 83 | if (!blobs || blobs.length === 0) { |
| 84 | toast.error(t('noImagesToShare') || 'No images to share') |
| 85 | return |
| 86 | } |
| 87 | |
| 88 | try { |
| 89 | setUploading(true) |
| 90 | const uploadedUrls = await uploadBlobsToOss(blobs) |
| 91 | |
| 92 | if (uploadedUrls.length === 0) { |
| 93 | toast.error(t('uploadFailed') || 'Upload failed') |
| 94 | return |
| 95 | } |
| 96 | |
| 97 | const payloadPrompt |
| 98 | = t('agentSharePrompt') || 'Share this image to social media. Copy write freely.' |
| 99 | const params = new URLSearchParams() |
| 100 | params.set('aiGenerated', 'true') |
| 101 | params.set( |
| 102 | 'medias', |
| 103 | encodeURIComponent(JSON.stringify(uploadedUrls.map(u => ({ type: 'IMAGE', url: u })))), |
| 104 | ) |
| 105 | params.set('description', encodeURIComponent(payloadPrompt)) |
| 106 | |
| 107 | onClose() |
| 108 | router.push(`/?${params.toString()}`) |
| 109 | toast.success(t('agentShareSaved') || 'Ready to share on Home') |
| 110 | } |
| 111 | catch (e) { |
| 112 | console.error(e) |
| 113 | toast.error(t('agentShareFailed') || 'Failed to prepare agent share') |
| 114 | } |
| 115 | finally { |
| 116 | setUploading(false) |
| 117 | } |
| 118 | }, [blobs, onClose, router, t]) |
| 119 | |
| 120 | // 发布分享：上传图片并跳转到账号页面 |
| 121 | const handlePublishShare = useCallback(async () => { |
| 122 | if (!blobs || blobs.length === 0) { |
| 123 | toast.error(t('noImagesToShare') || 'No images to share') |
| 124 | return |
| 125 | } |
| 126 | |
| 127 | try { |
| 128 | usePublishDialogStorageStore.getState().clearPubData() |
| 129 | setUploading(true) |
| 130 | |
| 131 | // 确保账号列表已加载 |
| 132 | if (!accountList || accountList.length === 0) { |
| 133 | await getAccountList() |
| 134 | } |
| 135 | |
| 136 | // 筛选支持图文发布且在线的账号 |
| 137 | const candidates = (useAccountStore.getState().accountList || []).filter((acc) => { |
| 138 | const plat = getPlatformInfoSync(acc.type as any) |
| 139 | return acc.status !== 0 && plat?.pubTypes?.has(PubType.ImageText) |
| 140 | }) |
| 141 | |
| 142 | if (!candidates || candidates.length === 0) { |
| 143 | toast.error(t('noAvailablePublishAccounts') || 'No available accounts to publish') |
| 144 | return |
| 145 | } |
| 146 | |
| 147 | // 上传图片 |
| 148 | const uploadedUrls = await uploadBlobsToOss(blobs) |
| 149 | |
| 150 | if (uploadedUrls.length === 0) { |
| 151 | toast.error(t('uploadFailed') || 'Upload failed') |
| 152 | return |
| 153 | } |
| 154 | |
| 155 | const medias = uploadedUrls.map(u => ({ type: 'IMAGE', url: u })) |
| 156 | const title = '' |
| 157 | const description |
| 158 | = t('publishShareDescription') |
| 159 | || 'I generated this conversation on aitoearn using agent, check it out!' |
| 160 | const tags = ['aitoearn', 'agent'] |
| 161 | |
| 162 | // 构建 URL 参数并跳转到账号页面 |
| 163 | const params = new URLSearchParams() |
| 164 | params.set('aiGenerated', 'true') |
| 165 | params.set('medias', encodeURIComponent(JSON.stringify(medias))) |
| 166 | params.set('description', encodeURIComponent(description)) |
| 167 | params.set('title', encodeURIComponent(title)) |
| 168 | params.set('tags', encodeURIComponent(JSON.stringify(tags))) |
| 169 | params.set('accountId', candidates[0].id) |
| 170 | |
| 171 | onClose() |
| 172 | router.push(`/accounts?${params.toString()}`) |
| 173 | } |
| 174 | catch (e) { |
| 175 | console.error(e) |
| 176 | toast.error(t('publishShareFailed') || 'Failed to prepare publish') |
| 177 | } |
| 178 | finally { |
| 179 | setUploading(false) |
| 180 | } |
| 181 | }, [blobs, accountList, getAccountList, onClose, router, t]) |
| 182 | |
| 183 | return ( |
| 184 | <Modal open={open} onCancel={onClose} title={t('previewTitle')}> |
| 185 | <div className="max-w-3xl mx-auto"> |
| 186 | {/* 图片预览区域 */} |
| 187 | <div className="bg-card rounded-md border p-3 md:p-4 flex justify-center"> |
| 188 | {urls[0] ? ( |
| 189 | <img |
| 190 | src={urls[0]} |
| 191 | alt="preview" |
| 192 | className="max-h-[40vh] md:max-h-[50vh] object-contain" |
| 193 | /> |
| 194 | ) : ( |
| 195 | <div className="text-sm text-muted-foreground py-8">{t('noPreview')}</div> |
| 196 | )} |
| 197 | </div> |
| 198 | |
| 199 | {/* 操作按钮区域 */} |
| 200 | <div className="mt-4 flex flex-col gap-3 md:flex-row md:items-center md:justify-end md:gap-2"> |
| 201 | {/* 移动端：分两行显示 */} |
| 202 | <div className="flex items-center gap-2 md:contents"> |
| 203 | <Button |
| 204 | variant="outline" |
| 205 | onClick={handleAgentShare} |
| 206 | loading={uploading} |
| 207 | className="flex-1 md:flex-none cursor-pointer h-10" |
| 208 | > |
| 209 | {t('agentShare')} |
| 210 | </Button> |
| 211 | <Button |
| 212 | variant="outline" |
| 213 | onClick={handlePublishShare} |
| 214 | loading={uploading} |
| 215 | className="flex-1 md:flex-none cursor-pointer h-10" |
| 216 | > |
| 217 | {t('publishShare')} |
| 218 | </Button> |
| 219 | </div> |
| 220 | <Button |
| 221 | onClick={downloadBlobs} |
| 222 | disabled={uploading} |
| 223 | className="w-full md:w-auto cursor-pointer h-10" |
| 224 | > |
| 225 | {t('download')} |
| 226 | </Button> |
| 227 | </div> |
| 228 | </div> |
| 229 | </Modal> |
| 230 | ) |
| 231 | } |
| 232 | |
| 233 | export default SharePreviewModal |
| 234 |