Merge branch 'master' of https://gitea.bowongai.com/bowong/bw-mini-app
This commit is contained in:
iHeyTang
commit
2dec37614a
|
|
@ -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 {
|
||||
|
|
@ -46,28 +46,116 @@
|
|||
}
|
||||
|
||||
.generate-success {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
|
||||
padding: 40rpx 32rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 成功页面头部 */
|
||||
.success-header {
|
||||
text-align: center;
|
||||
padding: 60rpx;
|
||||
}
|
||||
|
||||
.result-container {
|
||||
margin-bottom: 60rpx;
|
||||
}
|
||||
|
||||
.success-text {
|
||||
font-size: 40rpx;
|
||||
color: #34c759;
|
||||
font-weight: 600;
|
||||
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;
|
||||
}
|
||||
|
||||
.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 {
|
||||
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,20 +163,46 @@
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.result-video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.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 {
|
||||
|
|
@ -100,22 +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;
|
||||
}
|
||||
|
||||
.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 {
|
||||
|
|
@ -124,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;
|
||||
}
|
||||
|
|
@ -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 (
|
||||
<View className='generate-success'>
|
||||
<View className='result-container'>
|
||||
<Text className='success-text'>处理完成！</Text>
|
||||
{result?.imageUrl && (
|
||||
<View className='result-media'>
|
||||
<View className='success-header'>
|
||||
<View className='success-badge'>
|
||||
<Text className='success-icon'>✨</Text>
|
||||
<Text className='success-title'>处理完成！</Text>
|
||||
</View>
|
||||
<Text className='success-subtitle'>您的作品已经准备好了</Text>
|
||||
</View>
|
||||
|
||||
{mediaUrl && (
|
||||
<View className='result-preview'>
|
||||
<View className='preview-container'>
|
||||
{isVideo ? (
|
||||
<Video
|
||||
className='result-video'
|
||||
src={result.imageUrl}
|
||||
className='preview-video'
|
||||
src={mediaUrl}
|
||||
autoplay
|
||||
muted
|
||||
loop
|
||||
|
|
@ -120,25 +127,40 @@ export default function Generate() {
|
|||
showCenterPlayBtn={false}
|
||||
showFullscreenBtn={false}
|
||||
controls={false}
|
||||
poster={result?.thumbnailUrl}
|
||||
/>
|
||||
) : (
|
||||
<Image
|
||||
className='result-image'
|
||||
src={result.imageUrl}
|
||||
mode='aspectFit'
|
||||
<Image
|
||||
className='preview-image'
|
||||
src={mediaUrl}
|
||||
mode='aspectFit'
|
||||
onClick={() => {
|
||||
navigateTo({
|
||||
url: `/pages/result/index?images=${encodeURIComponent(JSON.stringify([mediaUrl]))}`
|
||||
})
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View className='success-actions'>
|
||||
<View className='action-buttons'>
|
||||
<Button className='btn-primary' onClick={handleTryAgain}>
|
||||
<Text className='btn-text'>再来一张</Text>
|
||||
</Button>
|
||||
<Button className='btn-secondary' onClick={handleViewHistory}>
|
||||
<Text className='btn-text'>查看记录</Text>
|
||||
</Button>
|
||||
</View>
|
||||
|
||||
{mediaUrl && (
|
||||
<View className='result-tips'>
|
||||
<Text className='tips-text'>点击图片可查看完整效果</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
<View className='action-buttons'>
|
||||
<Button className='btn-primary' onClick={handleTryAgain}>
|
||||
再来一张
|
||||
</Button>
|
||||
<Button className='btn-secondary' onClick={handleViewHistory}>
|
||||
查看记录
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
@ -123,13 +121,11 @@
|
|||
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;
|
||||
}
|
||||
|
||||
.history-item:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
|
|
@ -149,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 {
|
||||
|
|
@ -258,7 +249,6 @@
|
|||
.item-status[style*="color: rgb(255, 149, 0)"]::before,
|
||||
.item-status[style*="color: #FF9500"]::before {
|
||||
background: #fff;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
/* 已完成状态 */
|
||||
|
|
@ -287,17 +277,6 @@
|
|||
background: #fff;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.item-info {
|
||||
display: flex;
|
||||
|
|
@ -324,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 {
|
||||
|
|
@ -374,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);
|
||||
}
|
||||
}
|
||||
|
||||
/* 操作提示 */
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
@ -129,27 +130,26 @@ export default function History() {
|
|||
<Text className='empty-desc'>开始创作你的第一个作品吧！{'\n'}所有的处理记录都会保存在这里</Text>
|
||||
</View>
|
||||
) : (
|
||||
records.map((record, index) => (
|
||||
records.map((record) => (
|
||||
<View
|
||||
key={record.id}
|
||||
className='history-item'
|
||||
onClick={() => handleItemClick(record)}
|
||||
style={{ animationDelay: `${index * 0.1}s` }}
|
||||
>
|
||||
<View className='item-thumbnail'>
|
||||
{record.status === 'completed' && record.outputResult ? (
|
||||
{record.status === "completed" && record.outputResult ? (
|
||||
<Image
|
||||
className='thumbnail-image'
|
||||
src={Array.isArray(record.outputResult) ? record.outputResult[0] : record.outputResult}
|
||||
src={record.outputUrl || record.inputImageUrl}
|
||||
mode='aspectFill'
|
||||
/>
|
||||
) : (
|
||||
<View className={`thumbnail-placeholder ${record.status}`}>
|
||||
<Text className='thumbnail-icon'>
|
||||
{record.status === 'processing' ? '⏳' :
|
||||
record.status === 'failed' ? '❌' :
|
||||
record.type === 'image-to-video' ? '🎬' : '🎨'}
|
||||
</Text>
|
||||
<Image
|
||||
className='thumbnail-image'
|
||||
src={record.outputUrl || record.inputImageUrl}
|
||||
mode='aspectFill'
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
|
|
|||
Loading…
Reference in New Issue