feat: 修复字体大小问题并添加历史记录功能
- 将所有页面和组件的px单位改为rpx，确保跨设备适配 - 修复首页右侧padding超出屏幕的问题 - 在模板执行流程中添加历史记录功能： - 开始处理时创建generating状态记录 - 处理成功时更新为completed状态并保存结果 - 处理失败时更新为failed状态并记录错误信息 - 优化布局间距和字体大小，提升用户体验
This commit is contained in:
parent
4c0d69e1b2
commit
c5fcab683f
|
|
@ -1,8 +1,8 @@
|
|||
.template-card {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
border-radius: 32rpx;
|
||||
padding: 0;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
|
||||
/* 优化：移除transition，减少重绘 */
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
position: relative;
|
||||
padding: 0;
|
||||
flex: 1;
|
||||
min-height: 240px;
|
||||
min-height: 480rpx;
|
||||
}
|
||||
|
||||
.merged-image-container {
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 240px;
|
||||
min-height: 480rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 240px;
|
||||
min-height: 480rpx;
|
||||
}
|
||||
|
||||
/* 优化：减少clip-path动画频率，提升性能 */
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
.full-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 240px;
|
||||
min-height: 480rpx;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
/* 性能优化：启用硬件加速和图片优化 */
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 4px; /* 增加宽度便于拖拽 */
|
||||
width: 8rpx; /* 增加宽度便于拖拽 */
|
||||
background: linear-gradient(to bottom,
|
||||
rgba(255, 255, 255, 0.8) 0%,
|
||||
rgba(255, 255, 255, 0.9) 50%,
|
||||
|
|
@ -94,15 +94,15 @@
|
|||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
|
||||
border: 2px solid rgba(0, 122, 255, 0.4);
|
||||
box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.25);
|
||||
border: 4rpx solid rgba(0, 122, 255, 0.4);
|
||||
cursor: col-resize;
|
||||
touch-action: none;
|
||||
transition: all 0.2s ease;
|
||||
|
|
@ -110,11 +110,11 @@
|
|||
|
||||
.split-handle:active {
|
||||
transform: translate(-50%, -50%) scale(1.1);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.split-icon {
|
||||
font-size: 12px;
|
||||
font-size: 24rpx;
|
||||
color: #007AFF;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -123,12 +123,12 @@
|
|||
|
||||
/* 标题区域 - 图片上方 */
|
||||
.template-header {
|
||||
padding: 12px 16px 8px;
|
||||
padding: 24rpx 32rpx 16rpx;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.template-name {
|
||||
font-size: 16px;
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
line-height: 1.3;
|
||||
|
|
@ -139,27 +139,27 @@
|
|||
/* 积分悬浮徽章 - 图片右上角 */
|
||||
.credit-badge {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
top: 24rpx;
|
||||
right: 24rpx;
|
||||
z-index: 4;
|
||||
background: rgba(255, 107, 53, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border-radius: 10px;
|
||||
padding: 3px 6px;
|
||||
box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
|
||||
backdrop-filter: blur(20rpx);
|
||||
-webkit-backdrop-filter: blur(20rpx);
|
||||
border-radius: 20rpx;
|
||||
padding: 6rpx 12rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(255, 107, 53, 0.3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 18px;
|
||||
min-height: 36rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.credit-text {
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
font-size: 22rpx;
|
||||
font-weight: 600;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
|
|
@ -169,35 +169,35 @@
|
|||
/* 标签悬浮 - 图片底部 */
|
||||
.tags-overlay {
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
left: 12px;
|
||||
right: 12px;
|
||||
bottom: 24rpx;
|
||||
left: 24rpx;
|
||||
right: 24rpx;
|
||||
z-index: 4;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.tag-badge {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(20rpx);
|
||||
-webkit-backdrop-filter: blur(20rpx);
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
font-size: 20rpx;
|
||||
font-weight: 500;
|
||||
padding: 3px 8px;
|
||||
border-radius: 10px;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
padding: 6rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* 简介区域 - 图片下方 */
|
||||
.template-footer {
|
||||
padding: 12px 16px 16px;
|
||||
padding: 24rpx 32rpx 32rpx;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.template-desc {
|
||||
font-size: 13px;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
line-height: 1.4;
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -10,14 +10,14 @@
|
|||
.create-button {
|
||||
background: linear-gradient(135deg, #ff6b9d, #ff9a56, #ffd93d);
|
||||
border: none;
|
||||
border-radius: 72px;
|
||||
padding: 12px 108px;
|
||||
font-size: 36px;
|
||||
border-radius: 144rpx;
|
||||
padding: 24rpx 216rpx;
|
||||
font-size: 72rpx;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0 8px 25px rgba(255, 107, 157, 0.4),
|
||||
0 4px 15px rgba(255, 154, 86, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.3);
|
||||
text-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0 16rpx 50rpx rgba(255, 107, 157, 0.4),
|
||||
0 8rpx 30rpx rgba(255, 154, 86, 0.3), inset 0 4rpx 0 rgba(255, 255, 255, 0.3);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
|
@ -59,9 +59,9 @@
|
|||
.create-button::after {
|
||||
content: "✨";
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
right: -5px;
|
||||
font-size: 16px;
|
||||
top: -10rpx;
|
||||
right: -10rpx;
|
||||
font-size: 32rpx;
|
||||
animation: sparkle 2s infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
.generate {
|
||||
padding: 20px;
|
||||
padding: 40rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -7,77 +7,77 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px 16px 16px;
|
||||
padding: 40rpx 32rpx 32rpx;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #eee;
|
||||
border-bottom: 2rpx solid #eee;
|
||||
}
|
||||
|
||||
.history-title {
|
||||
font-size: 20px;
|
||||
font-size: 40rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.clear-btn {
|
||||
font-size: 16px;
|
||||
font-size: 32rpx;
|
||||
color: #007AFF;
|
||||
padding: 8px;
|
||||
padding: 16rpx;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.history-list {
|
||||
height: calc(100vh - 160px);
|
||||
padding: 16px;
|
||||
height: calc(100vh - 320rpx);
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 80px 20px;
|
||||
padding: 160rpx 40rpx;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 60px;
|
||||
font-size: 120rpx;
|
||||
display: block;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 18px;
|
||||
font-size: 36rpx;
|
||||
color: #333;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.empty-desc {
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.history-item {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
border-radius: 24rpx;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.item-thumbnail {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
background: linear-gradient(135deg, #007AFF, #5AC8FA);
|
||||
border-radius: 8px;
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 16px;
|
||||
margin-right: 32rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.thumbnail-icon {
|
||||
font-size: 20px;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
|
|
@ -89,11 +89,11 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 16px;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
|
|
@ -103,12 +103,12 @@
|
|||
}
|
||||
|
||||
.item-status {
|
||||
font-size: 12px;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
padding: 4px 8px;
|
||||
border-radius: 10px;
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
background: rgba(142, 142, 147, 0.1);
|
||||
margin-left: 12px;
|
||||
margin-left: 24rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
|
@ -119,16 +119,16 @@
|
|||
}
|
||||
|
||||
.item-type {
|
||||
font-size: 13px;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
background: rgba(0, 122, 255, 0.1);
|
||||
color: #007AFF;
|
||||
padding: 3px 8px;
|
||||
border-radius: 8px;
|
||||
font-size: 12px;
|
||||
padding: 6rpx 16rpx;
|
||||
border-radius: 16rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.item-time {
|
||||
font-size: 12px;
|
||||
font-size: 24rpx;
|
||||
color: #8E8E93;
|
||||
}
|
||||
|
|
@ -9,32 +9,28 @@
|
|||
.home-scroll {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
padding: 16px 12px 20px;
|
||||
/* 滚动性能优化 */
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.home-header {
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
padding: 16px 0;
|
||||
margin-bottom: 48rpx;
|
||||
padding: 32rpx 0;
|
||||
}
|
||||
|
||||
.home-title {
|
||||
font-size: 28px;
|
||||
font-size: 56rpx;
|
||||
font-weight: 800;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
letter-spacing: -0.5px;
|
||||
margin-bottom: 16rpx;
|
||||
letter-spacing: -1rpx;
|
||||
}
|
||||
|
||||
.home-subtitle {
|
||||
font-size: 16px;
|
||||
font-size: 32rpx;
|
||||
color: #666;
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
|
|
@ -44,10 +40,10 @@
|
|||
.template-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
gap: 20rpx;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 0 4px;
|
||||
padding: 8rpx 12rpx;
|
||||
/* 最小高度确保内容撑开 */
|
||||
min-height: 100%;
|
||||
}
|
||||
|
|
@ -55,12 +51,12 @@
|
|||
/* 响应式调整 */
|
||||
@media (min-width: 768px) {
|
||||
.home {
|
||||
padding: 20px 16px;
|
||||
padding: 40rpx 32rpx;
|
||||
}
|
||||
|
||||
.template-grid {
|
||||
max-width: 600px;
|
||||
gap: 16px;
|
||||
max-width: 1200rpx;
|
||||
gap: 32rpx;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -68,6 +64,6 @@
|
|||
@media (min-width: 1024px) {
|
||||
.template-grid {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
max-width: 900px;
|
||||
max-width: 1800rpx;
|
||||
}
|
||||
}
|
||||
|
|
@ -4,6 +4,7 @@ import Taro, { navigateTo } from '@tarojs/taro'
|
|||
import { useAppDispatch, useAppSelector } from '../../hooks/redux'
|
||||
import { selectTemplates } from '../../selectors/template'
|
||||
import { initTemplates } from '../../actions/template'
|
||||
import { addRecord, updateRecord } from '../../actions/history'
|
||||
import { Template } from '../../store/types'
|
||||
import TemplateCard from '../../components/TemplateCard'
|
||||
import { useSdk, useServerSdk } from '../../hooks/index'
|
||||
|
|
@ -57,6 +58,8 @@ export default function Home() {
|
|||
const handleTemplateClick = async (template: Template) => {
|
||||
if (loading) return // 防止重复点击
|
||||
|
||||
let recordId: string | undefined
|
||||
|
||||
try {
|
||||
setLoading(true)
|
||||
|
||||
|
|
@ -82,6 +85,19 @@ export default function Home() {
|
|||
}
|
||||
})
|
||||
|
||||
// 创建历史记录（生成中状态）
|
||||
try {
|
||||
recordId = await dispatch(addRecord({
|
||||
type: 'image-to-image',
|
||||
templateId: template.code,
|
||||
templateName: template.name,
|
||||
inputImage: url,
|
||||
status: 'generating'
|
||||
}))
|
||||
} catch (historyError) {
|
||||
console.error('创建历史记录失败:', historyError)
|
||||
}
|
||||
|
||||
// 执行模板处理
|
||||
Taro.showLoading({
|
||||
title: '处理图片中...',
|
||||
|
|
@ -93,6 +109,19 @@ export default function Home() {
|
|||
templateCode: template.code
|
||||
})
|
||||
|
||||
// 处理完成后更新历史记录状态
|
||||
if (recordId) {
|
||||
try {
|
||||
await dispatch(updateRecord(recordId, {
|
||||
outputResult: result || undefined,
|
||||
status: 'completed'
|
||||
}))
|
||||
} catch (historyError) {
|
||||
console.error('更新历史记录失败:', historyError)
|
||||
// 历史记录更新失败不影响主流程，只记录错误
|
||||
}
|
||||
}
|
||||
|
||||
// 隐藏loading
|
||||
Taro.hideLoading()
|
||||
|
||||
|
|
@ -102,6 +131,18 @@ export default function Home() {
|
|||
url: `/pages/result/index?resultUrl=${encodeURIComponent(result!)}`
|
||||
})
|
||||
} catch (e) {
|
||||
// 处理失败时更新历史记录状态
|
||||
if (recordId) {
|
||||
try {
|
||||
await dispatch(updateRecord(recordId, {
|
||||
status: 'failed',
|
||||
errorMessage: (e as Error).message || '处理失败'
|
||||
}))
|
||||
} catch (historyError) {
|
||||
console.error('更新失败记录到历史失败:', historyError)
|
||||
}
|
||||
}
|
||||
|
||||
// 处理失败
|
||||
Taro.showToast({
|
||||
title: (e as Error).message || '处理失败',
|
||||
|
|
@ -109,11 +150,21 @@ export default function Home() {
|
|||
duration: 2000
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
} catch (error) {
|
||||
console.error('模板处理失败:', error)
|
||||
|
||||
// 如果有记录ID，更新为失败状态
|
||||
if (recordId) {
|
||||
try {
|
||||
await dispatch(updateRecord(recordId, {
|
||||
status: 'failed',
|
||||
errorMessage: error instanceof Error ? error.message : '处理失败'
|
||||
}))
|
||||
} catch (historyError) {
|
||||
console.error('更新历史记录失败:', historyError)
|
||||
}
|
||||
}
|
||||
|
||||
// 隐藏loading
|
||||
Taro.hideLoading()
|
||||
|
||||
|
|
|
|||
|
|
@ -89,14 +89,14 @@
|
|||
|
||||
/* 模板处理结果对比样式 */
|
||||
.template-name {
|
||||
font-size: 18px;
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
margin-bottom: 8rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.result-status {
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
opacity: 0.8;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -107,8 +107,8 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px 16px;
|
||||
gap: 16px;
|
||||
padding: 40rpx 32rpx;
|
||||
gap: 32rpx;
|
||||
}
|
||||
|
||||
.comparison-item {
|
||||
|
|
@ -121,23 +121,23 @@
|
|||
|
||||
.comparison-image {
|
||||
width: 100%;
|
||||
max-height: 300px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
|
||||
max-height: 600rpx;
|
||||
border-radius: 24rpx;
|
||||
box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.2);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.comparison-label {
|
||||
margin-top: 8px;
|
||||
margin-top: 16rpx;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.comparison-arrow {
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
font-size: 48rpx;
|
||||
font-weight: bold;
|
||||
opacity: 0.8;
|
||||
}
|
||||
Loading…
Reference in New Issue