diff --git a/demo/frontend/src/api/userWorks.js b/demo/frontend/src/api/userWorks.js index fe0ddbc..d0acf92 100644 --- a/demo/frontend/src/api/userWorks.js +++ b/demo/frontend/src/api/userWorks.js @@ -5,7 +5,8 @@ export const getMyWorks = (params = {}) => { return api.get('/works/my-works', { params: { page: params.page || 0, - size: params.size || 10 + size: params.size || 10, + includeProcessing: params.includeProcessing !== false // 默认包含正在处理中的作品 } }) } diff --git a/demo/frontend/src/components/PaymentModal.vue b/demo/frontend/src/components/PaymentModal.vue index fe2010e..a9ff665 100644 --- a/demo/frontend/src/components/PaymentModal.vue +++ b/demo/frontend/src/components/PaymentModal.vue @@ -23,7 +23,7 @@
- Alipay扫码支付 + 支付宝支付
${{ amount }}
- -
-
- 支付二维码 -
- -
- - - - - - 正在生成二维码 - 请稍候... + +
+
+ +

安全便捷的在线支付方式

+

点击下方按钮跳转到支付宝完成支付

-
支付前请阅读《Vionow支付服务条款》
+
@@ -84,17 +85,6 @@
- -
-
-

请使用支付宝扫描上方二维码完成支付

-

支付完成后页面将自动更新

-
- -
-
《Vionow支付服务条款》 @@ -136,8 +126,6 @@ const visible = ref(false) const selectedMethod = ref('alipay') const loading = ref(false) const currentPaymentId = ref(null) -const qrCodeUrl = ref('') // 二维码URL -const showQrCode = ref(false) // 是否显示二维码 let paymentPollingTimer = null let isPaymentStarted = false // 防止重复调用 let lastPlanType = '' // 记录上一次的套餐类型 @@ -165,14 +153,8 @@ watch(() => props.modelValue, (newVal) => { console.log('同一套餐，复用 paymentId:', currentPaymentId.value) } - qrCodeUrl.value = '' - showQrCode.value = false - - // 只有选择支付宝时才自动生成二维码，PayPal需要用户点击按钮 - if (!isPaymentStarted && selectedMethod.value === 'alipay') { - isPaymentStarted = true - handlePay() - } + // 重置状态 + isPaymentStarted = false } // 关闭时重置标志 if (!newVal) { @@ -183,11 +165,9 @@ watch(() => props.modelValue, (newVal) => { // 监听 visible 变化 watch(visible, (newVal) => { emit('update:modelValue', newVal) - // 如果模态框关闭，停止轮询并重置二维码状态（但保留paymentId和lastPlanType用于同套餐复用） + // 如果模态框关闭，停止轮询 if (!newVal) { stopPaymentPolling() - qrCodeUrl.value = '' - showQrCode.value = false } }) @@ -197,10 +177,6 @@ const selectMethod = async (method) => { console.log('切换支付方式:', selectedMethod.value, '->', method, '复用 paymentId:', currentPaymentId.value) selectedMethod.value = method - // 重置二维码显示 - qrCodeUrl.value = '' - showQrCode.value = false - // 如果已有支付记录，更新支付方式和描述（复用paymentId） if (currentPaymentId.value) { try { @@ -230,22 +206,12 @@ const selectMethod = async (method) => { if (response.ok && responseData.success) { console.log('✅ 支付方式更新成功，复用paymentId:', currentPaymentId.value) - // 如果切换到支付宝，生成新二维码 - if (method === 'alipay') { - await handleAlipayPayment() - } } else { console.error('❌ 支付方式更新失败:', responseData.message || response.statusText) } } catch (error) { console.error('❌ 更新支付方式异常:', error) } - } else { - // 没有支付记录，如果是支付宝则自动创建 - if (method === 'alipay') { - isPaymentStarted = true - await handlePay() - } } } } @@ -323,11 +289,7 @@ const handlePay = async () => { // 处理支付宝支付 const handleAlipayPayment = async () => { - // 重置二维码显示状态 - showQrCode.value = false - qrCodeUrl.value = '' - - ElMessage.info('正在生成支付二维码...') + ElMessage.info('正在创建支付宝支付...') const paymentId = currentPaymentId.value console.log('=== 开始支付宝支付流程 ===') @@ -338,26 +300,36 @@ const handleAlipayPayment = async () => { console.log('支付宝支付响应：', alipayResponse) if (alipayResponse.data && alipayResponse.data.success) { - // 显示二维码 - const qrCode = alipayResponse.data.data.qrCode - console.log('支付宝二维码：', qrCode) + const responseData = alipayResponse.data.data - // 使用QuickChart API生成二维码 - qrCodeUrl.value = `https://quickchart.io/qr?text=${encodeURIComponent(qrCode)}&size=200&margin=0&dark=ffffff&light=1a1a1a` + // 检查是否是电脑网页支付（返回HTML表单） + if (responseData.payType === 'PAGE_PAY' && responseData.payForm) { + console.log('使用电脑网页支付，跳转到支付宝页面') + ElMessage.success('正在跳转到支付宝支付页面...') + + // 创建一个临时的div来渲染表单并自动提交 + const div = document.createElement('div') + div.innerHTML = responseData.payForm + document.body.appendChild(div) + + // 找到表单并提交 + const form = div.querySelector('form') + if (form) { + form.submit() + } else { + console.error('未找到支付表单') + ElMessage.error('支付页面生成失败') + document.body.removeChild(div) + } + return + } - console.log('二维码图片URL已生成:', qrCodeUrl.value) - - // 显示二维码 - showQrCode.value = true - console.log('二维码已显示') - - // 开始轮询支付状态 - console.log('=== 开始轮询支付状态 ===') - startPaymentPolling(paymentId) + console.error('支付宝响应格式未知：', responseData) + ElMessage.error('支付创建失败，请重试') } else { console.error('支付宝响应失败：', alipayResponse) - ElMessage.error(alipayResponse.data?.message || '生成二维码失败') - emit('pay-error', new Error(alipayResponse.data?.message || '生成二维码失败')) + ElMessage.error(alipayResponse.data?.message || '支付创建失败') + emit('pay-error', new Error(alipayResponse.data?.message || '支付创建失败')) } } @@ -962,6 +934,74 @@ const showAgreement = () => { transform: none; } +/* 支付宝支付区域 */ +.alipay-section { + text-align: center; + margin-bottom: 24px; + padding: 32px 24px; + background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%); + border-radius: 12px; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); +} + +.alipay-info { + margin-bottom: 24px; +} + +.alipay-logo { + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 16px; +} + +.alipay-desc { + color: white !important; + font-size: 16px !important; + font-weight: 500 !important; + margin: 8px 0 !important; + line-height: 1.5 !important; +} + +.alipay-desc-small { + color: rgba(255, 255, 255, 0.7) !important; + font-size: 13px !important; + font-weight: 400 !important; + margin: 4px 0 !important; + line-height: 1.5 !important; +} + +.alipay-pay-button { + width: 100%; + padding: 16px 24px; + background: linear-gradient(135deg, #1677FF 0%, #0958d9 100%); + color: white; + border: none; + border-radius: 8px; + font-size: 16px; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + box-shadow: 0 4px 12px rgba(22, 119, 255, 0.3); +} + +.alipay-pay-button:hover:not(:disabled) { + background: linear-gradient(135deg, #0958d9 0%, #003eb3 100%); + transform: translateY(-2px); + box-shadow: 0 6px 16px rgba(22, 119, 255, 0.4); +} + +.alipay-pay-button:active:not(:disabled) { + transform: translateY(0); +} + +.alipay-pay-button:disabled { + background: #666; + cursor: not-allowed; + opacity: 0.6; + transform: none; +} + /* 二维码区域 */ .qr-section { text-align: center; diff --git a/demo/frontend/src/locales/en.js b/demo/frontend/src/locales/en.js index c5c309b..7376881 100644 --- a/demo/frontend/src/locales/en.js +++ b/demo/frontend/src/locales/en.js @@ -133,6 +133,7 @@ export default { generating: 'Generating', completed: 'Completed', failed: 'Failed', + failReason: 'Failure Reason', prompt: 'Prompt', promptPlaceholder: 'Enter video description...', optimizePrompt: 'Optimize Prompt', @@ -400,9 +401,15 @@ export default { resumingStoryboardTask: 'Detected unfinished storyboard generation task, resuming...', resumingTask: 'Detected unfinished task, resuming...', storyboardReady: 'Storyboard generated, click button below to generate video', + readyForVideo: 'Storyboard ready, you can generate video now', + uploadStoryboardFirst: 'Please upload storyboard first', regenerate: 'Regenerate', regenerateConfirm: 'Regenerating will consume points and create a new task. Continue?', regenerateTitle: 'Regenerate Storyboard', + generateVideo: 'Generate Video', + readyToGenerateVideo: 'Storyboard parameters filled, ready to generate video', + downloadImage: 'Download Storyboard', + imageUrlNotAvailable: 'Storyboard image URL not available', statusPending: 'Pending', statusProcessing: 'Processing', statusCompleted: 'Completed', diff --git a/demo/frontend/src/locales/zh.js b/demo/frontend/src/locales/zh.js index 879bc75..9dea267 100644 --- a/demo/frontend/src/locales/zh.js +++ b/demo/frontend/src/locales/zh.js @@ -135,6 +135,7 @@ export default { generating: '生成中', completed: '已完成', failed: '失败', + failReason: '失败原因', prompt: '提示词', promptPlaceholder: '请输入视频描述...', optimizePrompt: '优化提示词', @@ -404,9 +405,15 @@ export default { resumingStoryboardTask: '检测到未完成的分镜图生成任务，继续处理中...', resumingTask: '检测到未完成的任务，继续处理中...', storyboardReady: '分镜图已生成，点击下方按钮生成视频', + readyForVideo: '分镜图已就绪，可以生成视频', + uploadStoryboardFirst: '请先上传分镜图', regenerate: '重新生成', regenerateConfirm: '重新生成将消耗积分并创建新任务，确定要继续吗？', regenerateTitle: '重新生成分镜图', + generateVideo: '生成视频', + readyToGenerateVideo: '已填充分镜图参数，可以生成视频', + downloadImage: '下载分镜图', + imageUrlNotAvailable: '分镜图地址不可用', statusPending: '排队中', statusProcessing: '生成中', statusCompleted: '已完成', @@ -498,7 +505,8 @@ export default { free: '免费版', standard: '标准版', professional: '专业版', - perMonth: '/年', + perMonth: '年', + perYear: '年', subscribe: '立即订阅', renew: '续费', upgrade: '升级', diff --git a/demo/frontend/src/utils/download.js b/demo/frontend/src/utils/download.js new file mode 100644 index 0000000..cb81d51 --- /dev/null +++ b/demo/frontend/src/utils/download.js @@ -0,0 +1,193 @@ +/** + * 跨浏览器兼容的文件下载工具 + * 特别针对 Safari/iOS 进行了优化 + */ + +/** + * 检测是否为 Safari 浏览器 + */ +export const isSafari = () => { + const ua = navigator.userAgent.toLowerCase() + return ua.includes('safari') && !ua.includes('chrome') && !ua.includes('android') +} + +/** + * 检测是否为 iOS 设备 + */ +export const isIOS = () => { + return /iPad|iPhone|iPod/.test(navigator.userAgent) || + (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1) +} + +/** + * 通用文件下载函数 + * @param {string} url - 文件URL + * @param {string} filename - 下载文件名 + * @param {string} mimeType - 文件MIME类型（可选） + * @returns {Promise} - 下载是否成功 + */ +export const downloadFile = async (url, filename, mimeType = '') => { + try { + // Safari 和 iOS 特殊处理 + if (isSafari() || isIOS()) { + return await downloadForSafari(url, filename, mimeType) + } + + // 其他浏览器使用标准方式 + return await downloadStandard(url, filename) + } catch (error) { + console.error('下载失败，尝试备用方案:', error) + // 最终备用方案：新窗口打开 + window.open(url, '_blank') + return false + } +} + +/** + * Safari/iOS 专用下载方法 + */ +const downloadForSafari = async (url, filename, mimeType) => { + try { + // 方案1：尝试使用 fetch + blob + const response = await fetch(url, { + mode: 'cors', + credentials: 'omit' + }) + + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`) + } + + const blob = await response.blob() + + // 创建带正确 MIME 类型的 blob + const finalMimeType = mimeType || blob.type || getMimeType(filename) + const finalBlob = new Blob([blob], { type: finalMimeType }) + + // Safari 需要使用 FileReader 转换为 data URL + return new Promise((resolve) => { + const reader = new FileReader() + reader.onloadend = () => { + const dataUrl = reader.result + + // 创建临时链接 + const link = document.createElement('a') + link.href = dataUrl + link.download = filename + link.style.display = 'none' + + // Safari 需要将链接添加到 DOM + document.body.appendChild(link) + + // 使用 setTimeout 确保 Safari 能正确处理 + setTimeout(() => { + link.click() + + // 延迟移除链接 + setTimeout(() => { + document.body.removeChild(link) + }, 100) + + resolve(true) + }, 0) + } + + reader.onerror = () => { + // FileReader 失败，尝试直接打开 + window.open(url, '_blank') + resolve(false) + } + + reader.readAsDataURL(finalBlob) + }) + } catch (error) { + console.error('Safari 下载失败:', error) + + // 备用方案：直接打开新窗口 + // 对于视频文件，Safari 会显示播放器，用户可以长按保存 + window.open(url, '_blank') + return false + } +} + +/** + * 标准浏览器下载方法 + */ +const downloadStandard = async (url, filename) => { + try { + const response = await fetch(url, { + mode: 'cors', + credentials: 'omit' + }) + + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`) + } + + const blob = await response.blob() + const blobUrl = window.URL.createObjectURL(blob) + + const link = document.createElement('a') + link.href = blobUrl + link.download = filename + link.style.display = 'none' + + document.body.appendChild(link) + link.click() + + // 清理 + setTimeout(() => { + document.body.removeChild(link) + window.URL.revokeObjectURL(blobUrl) + }, 100) + + return true + } catch (error) { + console.error('标准下载失败:', error) + throw error + } +} + +/** + * 根据文件名获取 MIME 类型 + */ +const getMimeType = (filename) => { + const ext = filename.split('.').pop()?.toLowerCase() + const mimeTypes = { + 'mp4': 'video/mp4', + 'webm': 'video/webm', + 'mov': 'video/quicktime', + 'avi': 'video/x-msvideo', + 'png': 'image/png', + 'jpg': 'image/jpeg', + 'jpeg': 'image/jpeg', + 'gif': 'image/gif', + 'webp': 'image/webp' + } + return mimeTypes[ext] || 'application/octet-stream' +} + +/** + * 下载视频文件 + */ +export const downloadVideo = async (url, taskId) => { + const filename = `video_${taskId || Date.now()}.mp4` + return downloadFile(url, filename, 'video/mp4') +} + +/** + * 下载图片文件 + */ +export const downloadImage = async (url, taskId, prefix = 'image') => { + // 根据 URL 判断图片格式 + let ext = 'png' + if (url.includes('.jpg') || url.includes('.jpeg')) { + ext = 'jpg' + } else if (url.includes('.webp')) { + ext = 'webp' + } + + const filename = `${prefix}_${taskId || Date.now()}.${ext}` + const mimeType = ext === 'jpg' ? 'image/jpeg' : `image/${ext}` + return downloadFile(url, filename, mimeType) +} diff --git a/demo/frontend/src/views/GenerateTaskRecord.vue b/demo/frontend/src/views/GenerateTaskRecord.vue index 1f9969d..ab57652 100644 --- a/demo/frontend/src/views/GenerateTaskRecord.vue +++ b/demo/frontend/src/views/GenerateTaskRecord.vue @@ -61,15 +61,7 @@