diff --git a/src/components/TemplateCard/index.css b/src/components/TemplateCard/index.css
index eaca306..02adc13 100644
--- a/src/components/TemplateCard/index.css
+++ b/src/components/TemplateCard/index.css
@@ -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;
diff --git a/src/components/UploadButton/index.css b/src/components/UploadButton/index.css
index 41d82c5..a947c96 100644
--- a/src/components/UploadButton/index.css
+++ b/src/components/UploadButton/index.css
@@ -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;
 }
\ No newline at end of file
diff --git a/src/pages/generate/index.css b/src/pages/generate/index.css
index 5b610c4..7fefe80 100644
--- a/src/pages/generate/index.css
+++ b/src/pages/generate/index.css
@@ -1,4 +1,4 @@
 .generate {
-  padding: 20px;
+  padding: 40rpx;
   text-align: center;
 }
\ No newline at end of file
diff --git a/src/pages/history/index.css b/src/pages/history/index.css
index f3c1af6..f27a4f9 100644
--- a/src/pages/history/index.css
+++ b/src/pages/history/index.css
@@ -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;
 }
\ No newline at end of file
diff --git a/src/pages/home/index.css b/src/pages/home/index.css
index 066a25d..a108371 100644
--- a/src/pages/home/index.css
+++ b/src/pages/home/index.css
@@ -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;
   }
 }
\ No newline at end of file
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
index 4689095..71202cd 100644
--- a/src/pages/home/index.tsx
+++ b/src/pages/home/index.tsx
@@ -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()
 
diff --git a/src/pages/result/index.css b/src/pages/result/index.css
index 88eb622..6b3fc77 100644
--- a/src/pages/result/index.css
+++ b/src/pages/result/index.css
@@ -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;
 }
\ No newline at end of file