feat: 简化页面布局为4个清晰步骤流程

- 重构index页面为步骤式交互:上传→加载→结果→错误
- 优化用户体验:单一焦点,清晰的状态转换
- 美化UI设计:统一卡片容器,渐变背景,现代化按钮
- 完善提示词:更新为中文手办生成专用描述
- 修复SDK模型名称:gemini-2.5-flash-image
- 添加类型安全:getTaskStatus返回string[]类型
This commit is contained in:
imeepos
2025-09-01 15:16:52 +08:00
parent 77ccaf8acd
commit faefda3ea2
3 changed files with 233 additions and 26 deletions

View File

@@ -1,3 +1,132 @@
.index{
font-size: 1rem;
.index {
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 40rpx;
}
/* 通用步骤容器 */
.step-container {
background: white;
border-radius: 24rpx;
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
padding: 80rpx 60rpx;
text-align: center;
width: 100%;
max-width: 600rpx;
}
/* 标题样式 */
.step-title {
font-size: 48rpx;
font-weight: bold;
color: #333;
margin-bottom: 30rpx;
display: block;
}
/* 描述文字 */
.step-desc {
font-size: 28rpx;
color: #666;
margin-bottom: 60rpx;
line-height: 1.6;
display: block;
}
/* 上传按钮 */
.upload-btn {
background: linear-gradient(45deg, #667eea, #764ba2);
color: white;
border: none;
border-radius: 50rpx;
padding: 30rpx 80rpx;
font-size: 32rpx;
font-weight: bold;
box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.4);
min-width: 300rpx;
}
.upload-btn:active {
transform: translateY(2rpx);
box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
}
/* 加载动画 */
.loading-spinner {
width: 80rpx;
height: 80rpx;
border: 6rpx solid #f3f3f3;
border-top: 6rpx solid #667eea;
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 40rpx;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* 结果网格 */
.result-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20rpx;
margin-bottom: 60rpx;
}
.result-image {
width: 100%;
height: 280rpx;
border-radius: 16rpx;
object-fit: cover;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}
/* 重新生成按钮 */
.restart-btn {
background: linear-gradient(45deg, #52c41a, #73d13d);
color: white;
border: none;
border-radius: 50rpx;
padding: 24rpx 60rpx;
font-size: 30rpx;
font-weight: bold;
box-shadow: 0 4rpx 16rpx rgba(82, 196, 26, 0.3);
}
.restart-btn:active {
transform: translateY(2rpx);
}
/* 错误描述 */
.error-desc {
font-size: 26rpx;
color: #ff4d4f;
margin-bottom: 50rpx;
background: #fff2f0;
border: 1rpx solid #ffccc7;
border-radius: 12rpx;
padding: 30rpx;
line-height: 1.5;
display: block;
}
/* 重试按钮 */
.retry-btn {
background: linear-gradient(45deg, #ff4d4f, #ff7875);
color: white;
border: none;
border-radius: 50rpx;
padding: 24rpx 60rpx;
font-size: 30rpx;
font-weight: bold;
box-shadow: 0 4rpx 16rpx rgba(255, 77, 79, 0.3);
}
.retry-btn:active {
transform: translateY(2rpx);
}