From 870991d81d3db69d5def98bf367adc4ede4a32b3 Mon Sep 17 00:00:00 2001 From: imeepos Date: Thu, 4 Sep 2025 22:38:24 +0800 Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/generate/index.css | 51 ++++++++++++++++++++++++++++-------- src/pages/history/index.css | 1 - src/pages/history/index.tsx | 5 ++-- 3 files changed, 42 insertions(+), 15 deletions(-) diff --git a/src/pages/generate/index.css b/src/pages/generate/index.css index 1b7b3e3..0438386 100644 --- a/src/pages/generate/index.css +++ b/src/pages/generate/index.css @@ -46,28 +46,42 @@ } .generate-success { - text-align: center; - padding: 60rpx; + position: relative; + width: 100%; + height: 100vh; + display: flex; + flex-direction: column; } .result-container { - margin-bottom: 60rpx; + flex: 1; + position: relative; + width: 100%; + height: 100%; } .success-text { + position: absolute; + top: 60rpx; + left: 50%; + transform: translateX(-50%); font-size: 40rpx; - color: #34c759; + color: white; font-weight: 600; - margin-bottom: 40rpx; + z-index: 10; + background: rgba(0, 0, 0, 0.5); + padding: 20rpx 40rpx; + border-radius: 25rpx; +} + +.result-media { + width: 100%; + height: 100%; } .result-image { - width: 500rpx; - height: 500rpx; - margin: 0 auto; - border-radius: 12rpx; - overflow: hidden; - box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1); + width: 100%; + height: 100%; } .result-image image { @@ -75,6 +89,11 @@ height: 100%; } +.result-video { + width: 100%; + height: 100%; +} + .generate-error { text-align: center; padding: 60rpx; @@ -106,6 +125,16 @@ margin-top: 60rpx; } +.generate-success .action-buttons { + position: absolute; + bottom: 80rpx; + left: 50%; + transform: translateX(-50%); + z-index: 10; + padding: 0 40rpx; + box-sizing: border-box; +} + .btn-primary { flex: 1; background-color: #FFD67A; diff --git a/src/pages/history/index.css b/src/pages/history/index.css index 2848340..0fb7f83 100644 --- a/src/pages/history/index.css +++ b/src/pages/history/index.css @@ -123,7 +123,6 @@ align-items: center; box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); border: 1rpx solid #f0f0f0; - transition: all 0.3s ease; position: relative; overflow: hidden; } diff --git a/src/pages/history/index.tsx b/src/pages/history/index.tsx index 662c659..71aff57 100644 --- a/src/pages/history/index.tsx +++ b/src/pages/history/index.tsx @@ -129,18 +129,17 @@ export default function History() { 开始创作你的第一个作品吧！{'\n'}所有的处理记录都会保存在这里 ) : ( - records.map((record, index) => ( + records.map((record) => ( handleItemClick(record)} - style={{ animationDelay: `${index * 0.1}s` }} > {record.status === 'completed' && record.outputResult ? ( ) : ( From 39b81bf0bbe32338c762b069e11d308c9591afe0 Mon Sep 17 00:00:00 2001 From: imeepos Date: Thu, 4 Sep 2025 23:20:01 +0800 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E5=8E=86=E5=8F=B2?= =?UTF-8?q?=E8=AE=B0=E5=BD=95bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/generate/index.css | 205 +++++++++++++++++++++++++++++------ src/pages/generate/index.tsx | 66 +++++++---- src/pages/history/index.css | 84 -------------- src/pages/history/index.tsx | 13 ++- 4 files changed, 220 insertions(+), 148 deletions(-) diff --git a/src/pages/generate/index.css b/src/pages/generate/index.css index 0438386..1c0c95f 100644 --- a/src/pages/generate/index.css +++ b/src/pages/generate/index.css @@ -1,11 +1,11 @@ .generate { - padding: 40rpx; + padding: 0; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; - background-color: #f8f9fa; + background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%); } .generate-loading { @@ -51,27 +51,101 @@ height: 100vh; display: flex; flex-direction: column; + background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%); + padding: 40rpx 32rpx; + box-sizing: border-box; } -.result-container { +/* 成功页面头部 */ +.success-header { + text-align: center; + margin-bottom: 40rpx; + padding-top: 80rpx; +} + +.success-badge { + display: flex; + align-items: center; + justify-content: center; + gap: 12rpx; + margin-bottom: 24rpx; +} + +.success-icon { + font-size: 64rpx; + filter: drop-shadow(0 4rpx 8rpx rgba(0, 0, 0, 0.1)); +} + +.success-title { + font-size: 48rpx; + font-weight: 700; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + letter-spacing: -0.5rpx; +} + +.success-subtitle { + font-size: 28rpx; + color: #666; + font-weight: 500; + line-height: 1.5; +} + +/* 预览区域 */ +.result-preview { flex: 1; + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 40rpx; + min-height: 0; + padding: 0 16rpx; +} + +.preview-container { + border-radius: 32rpx; + padding: 0; + box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1); + border: 1rpx solid #f0f0f0; position: relative; + overflow: hidden; + width: 90%; + max-width: 600rpx; + min-height: 680rpx; + height: 60vh; + display: block; +} + +.preview-image { width: 100%; height: 100%; + min-height: 680rpx; + object-fit: cover; + border-radius: 32rpx; + cursor: pointer; + display: block; + transform: translateZ(0); + image-rendering: optimizeSpeed; + backface-visibility: hidden; } -.success-text { - position: absolute; - top: 60rpx; - left: 50%; - transform: translateX(-50%); - font-size: 40rpx; - color: white; - font-weight: 600; - z-index: 10; - background: rgba(0, 0, 0, 0.5); - padding: 20rpx 40rpx; - border-radius: 25rpx; +.preview-video { + width: 100%; + height: 100%; + min-height: 680rpx; + object-fit: cover; + border-radius: 32rpx; + display: block; + transform: translateZ(0); + backface-visibility: hidden; +} + +/* 底部操作区域 */ +.success-actions { + margin-top: auto; + width: 100%; } .result-media { @@ -97,17 +171,38 @@ .generate-error { text-align: center; padding: 60rpx; + background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%); + min-height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } .error-container { margin-bottom: 60rpx; + background: #fff; + border-radius: 32rpx; + padding: 60rpx 40rpx; + box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1); + border: 1rpx solid #f0f0f0; + max-width: 600rpx; } .error-text { font-size: 40rpx; color: #ff3b30; - font-weight: 600; + font-weight: 700; margin-bottom: 20rpx; + display: flex; + align-items: center; + justify-content: center; + gap: 12rpx; +} + +.error-text::before { + content: '⚠️'; + font-size: 36rpx; } .error-message { @@ -119,32 +214,60 @@ .action-buttons { display: flex; flex-direction: row; - gap: 40rpx; + gap: 24rpx; width: 100%; max-width: 600rpx; - margin-top: 60rpx; + margin: 0 auto 32rpx; } -.generate-success .action-buttons { - position: absolute; - bottom: 80rpx; - left: 50%; - transform: translateX(-50%); - z-index: 10; - padding: 0 40rpx; - box-sizing: border-box; +.success-actions .action-buttons { + margin-bottom: 24rpx; +} + +/* 结果提示 */ +.result-tips { + text-align: center; + margin-top: 16rpx; +} + +.tips-text { + font-size: 24rpx; + color: #999; + background: rgba(255, 255, 255, 0.8); + padding: 12rpx 24rpx; + border-radius: 20rpx; + display: inline-block; + backdrop-filter: blur(10rpx); + -webkit-backdrop-filter: blur(10rpx); + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); } .btn-primary { flex: 1; - background-color: #FFD67A; + background: linear-gradient(135deg, #FFD67A 0%, #FFC947 100%); color: #333; - border-radius: 16rpx; + border-radius: 24rpx; height: 96rpx; - font-size: 34rpx; + font-size: 32rpx; font-weight: 600; border: none; - box-shadow: 0 4rpx 12rpx rgba(255, 214, 122, 0.3); + box-shadow: 0 8rpx 24rpx rgba(255, 214, 122, 0.3); + position: relative; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; +} + +.btn-primary::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); + z-index: 1; } .btn-primary::after { @@ -153,16 +276,26 @@ .btn-secondary { flex: 1; - background-color: #fff; - color: #000000; - border: 3rpx solid #FFD67A; - border-radius: 16rpx; + background: rgba(255, 255, 255, 0.9); + color: #333; + border: 2rpx solid rgba(255, 214, 122, 0.6); + border-radius: 24rpx; height: 96rpx; - font-size: 34rpx; + font-size: 32rpx; font-weight: 600; - box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1); + box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); + backdrop-filter: blur(10rpx); + -webkit-backdrop-filter: blur(10rpx); + display: flex; + align-items: center; + justify-content: center; } .btn-secondary::after { border: none; +} + +.btn-text { + position: relative; + z-index: 2; } \ No newline at end of file diff --git a/src/pages/generate/index.tsx b/src/pages/generate/index.tsx index 6870d78..113d955 100644 --- a/src/pages/generate/index.tsx +++ b/src/pages/generate/index.tsx @@ -44,7 +44,7 @@ export default function Generate() { if (result.status === 'completed') { setStatus('success') - setResult({ success: true, imageUrl: result.outputUrl }) + setResult({ success: true, imageUrl: result.outputUrl, thumbnailUrl: result.thumbnailUrl }) } else if (result.status === 'failed') { setStatus('error') setResult({ success: false, error: result.error || '处理失败' }) @@ -99,19 +99,26 @@ export default function Generate() { ) const renderSuccess = () => { - // 检测是否为视频 - const isVideo = result?.imageUrl && /\.(mp4|webm|ogg|mov|avi|mkv|flv)$/i.test(result.imageUrl) - + const isVideo = result?.imageUrl && (result.imageUrl.includes('.mp4') || result.imageUrl.includes('video')) + const mediaUrl = result?.imageUrl + return ( - - 处理完成！ - {result?.imageUrl && ( - + + + ✨ + 处理完成！ + + 您的作品已经准备好了 + + + {mediaUrl && ( + + {isVideo ? ( + + )} + + + + + + + + {mediaUrl && ( + + 点击图片可查看完整效果 + )} - - - - ) } diff --git a/src/pages/history/index.css b/src/pages/history/index.css index 0fb7f83..f9eb60f 100644 --- a/src/pages/history/index.css +++ b/src/pages/history/index.css @@ -41,14 +41,12 @@ padding: 16rpx 24rpx; border-radius: 24rpx; cursor: pointer; - transition: all 0.3s ease; border: 1rpx solid rgba(0, 122, 255, 0.2); font-weight: 500; } .clear-btn:active { background: rgba(0, 122, 255, 0.2); - transform: scale(0.95); } .history-list { @@ -128,7 +126,6 @@ } .history-item:active { - transform: scale(0.98); box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.12); } @@ -148,11 +145,6 @@ height: 100%; border-radius: 20rpx; background: #f5f5f5; - transition: transform 0.2s ease; -} - -.history-item:active .thumbnail-image { - transform: scale(0.95); } .thumbnail-placeholder { @@ -257,7 +249,6 @@ .item-status[style*="color: rgb(255, 149, 0)"]::before, .item-status[style*="color: #FF9500"]::before { background: #fff; - animation: pulse 2s infinite; } /* 已完成状态 */ @@ -286,17 +277,6 @@ background: #fff; } -@keyframes pulse { - - 0%, - 100% { - opacity: 1; - } - - 50% { - opacity: 0.5; - } -} .item-info { display: flex; @@ -323,42 +303,6 @@ opacity: 0.8; } -/* 添加一些动画效果 */ -@keyframes fadeInUp { - from { - opacity: 0; - transform: translateY(20rpx); - } - - to { - opacity: 1; - transform: translateY(0); - } -} - -.history-item { - animation: fadeInUp 0.5s ease-out; -} - -.history-item:nth-child(1) { - animation-delay: 0.1s; -} - -.history-item:nth-child(2) { - animation-delay: 0.2s; -} - -.history-item:nth-child(3) { - animation-delay: 0.3s; -} - -.history-item:nth-child(4) { - animation-delay: 0.4s; -} - -.history-item:nth-child(5) { - animation-delay: 0.5s; -} /* 加载指示器 */ .loading-indicator { @@ -373,34 +317,6 @@ border-radius: 50%; background: #FF9500; font-size: 0; - animation: loadingPulse 1.5s ease-in-out infinite; -} - -.loading-dot:nth-child(1) { - animation-delay: 0s; -} - -.loading-dot:nth-child(2) { - animation-delay: 0.3s; -} - -.loading-dot:nth-child(3) { - animation-delay: 0.6s; -} - -@keyframes loadingPulse { - - 0%, - 60%, - 100% { - opacity: 0.3; - transform: scale(0.8); - } - - 30% { - opacity: 1; - transform: scale(1); - } } /* 操作提示 */ diff --git a/src/pages/history/index.tsx b/src/pages/history/index.tsx index 71aff57..34f8cba 100644 --- a/src/pages/history/index.tsx +++ b/src/pages/history/index.tsx @@ -13,6 +13,7 @@ export default function History() { const loadRecords = async () => { try { const logs = await serverSdk.getMineLogs() + console.log(logs) setRecords(logs || []) } catch (error) { console.error('加载记录失败:', error) @@ -136,7 +137,7 @@ export default function History() { onClick={() => handleItemClick(record)} > - {record.status === 'completed' && record.outputResult ? ( + {record.status === "completed" && record.outputResult ? ( ) : ( - - {record.status === 'processing' ? '⏳' : - record.status === 'failed' ? '❌' : - record.type === 'image-to-video' ? '🎬' : '🎨'} - + )}