From e683bcdcb98c3c5c8786b5a2b3a24af0fefa17fe Mon Sep 17 00:00:00 2001
From: imeepos <imeepos@outlook.com>
Date: Wed, 3 Sep 2025 17:34:54 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=9E=E7=8E=B0=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E5=90=88=E6=88=90=E5=AF=B9=E6=AF=94=E6=95=88=E6=9E=9C=EF=BC=8C?=
 =?UTF-8?q?=E5=B7=A6=E5=8D=8A=E9=83=A8=E5=88=86=E6=98=BE=E7=A4=BA=E5=8E=9F?=
 =?UTF-8?q?=E5=9B=BE=E5=B7=A6=E5=8D=8A=EF=BC=8C=E5=8F=B3=E5=8D=8A=E9=83=A8?=
 =?UTF-8?q?=E5=88=86=E6=98=BE=E7=A4=BA=E6=95=88=E6=9E=9C=E5=9B=BE=E5=8F=B3?=
 =?UTF-8?q?=E5=8D=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 重新设计图片对比逻辑，实现真正的图片合成对比效果
- 左半部分显示原图的左半部分，右半部分显示效果图的右半部分
- 使用CSS transform实现图片的精确裁剪和定位
- 左图不偏移显示左半部分，右图向左偏移50%显示右半部分
- 优化标签布局，左右标签分别覆盖对应区域底部
- 保持中央分割线和交互手柄的视觉引导效果
- 实现真正的before/after对比效果，用户可直观看到处理差异
---
 src/components/TemplateCard/index.css | 71 ++++++++++++++++-----------
 src/components/TemplateCard/index.tsx | 33 ++++++++-----
 2 files changed, 62 insertions(+), 42 deletions(-)

diff --git a/src/components/TemplateCard/index.css b/src/components/TemplateCard/index.css
index f0f97a8..c42d716 100644
--- a/src/components/TemplateCard/index.css
+++ b/src/components/TemplateCard/index.css
@@ -20,20 +20,20 @@
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
 }
 
-/* 左右对比区域 */
+/* 合成对比图片区域 */
 .image-comparison {
   position: relative;
   padding: 16px;
   background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
 }
 
-.split-container {
+.merged-image-container {
   position: relative;
-  display: flex;
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   height: 180px;
+  display: flex;
 }
 
 .image-half {
@@ -42,16 +42,8 @@
   overflow: hidden;
 }
 
-.left-half {
-  border-right: 1px solid rgba(255, 255, 255, 0.3);
-}
-
-.right-half {
-  border-left: 1px solid rgba(255, 255, 255, 0.3);
-}
-
 .comparison-image {
-  width: 100%;
+  width: 200%; /* 图片宽度设为容器的2倍 */
   height: 100%;
   object-fit: cover;
   display: block;
@@ -59,28 +51,49 @@
   transition: opacity 0.3s ease;
 }
 
+/* 左半部分显示原图的左半部分 */
+.left-image {
+  transform: translateX(0); /* 不偏移，显示图片左半部分 */
+}
+
+/* 右半部分显示效果图的右半部分 */
+.right-image {
+  transform: translateX(-50%); /* 向左偏移50%，显示图片右半部分 */
+}
+
 .comparison-image:not([src]) {
   opacity: 0.5;
 }
 
-.image-label {
+/* 标签容器 */
+.image-labels {
   position: absolute;
-  bottom: 8px;
-  left: 50%;
-  transform: translateX(-50%);
-  padding: 4px 12px;
-  border-radius: 16px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  z-index: 2;
+}
+
+.label-left,
+.label-right {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 8px 4px;
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
-  white-space: nowrap;
 }
 
-.input-label {
+.label-left {
   background: rgba(52, 152, 219, 0.9);
+  border-radius: 0 0 0 12px;
 }
 
-.output-label {
+.label-right {
   background: rgba(46, 204, 113, 0.9);
+  border-radius: 0 0 12px 0;
 }
 
 .label-text {
@@ -90,12 +103,12 @@
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
 }
 
-/* 分割线和拖拽手柄 */
+/* 分割线和手柄 */
 .split-line {
   position: absolute;
   left: 50%;
-  top: 16px;
-  bottom: 16px;
+  top: 0;
+  bottom: 0;
   width: 2px;
   background: linear-gradient(to bottom,
     rgba(255, 255, 255, 0.8) 0%,
@@ -110,19 +123,19 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  width: 32px;
-  height: 32px;
+  width: 28px;
+  height: 28px;
   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.15);
-  border: 2px solid rgba(0, 122, 255, 0.2);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  border: 2px solid rgba(0, 122, 255, 0.3);
 }
 
 .split-icon {
-  font-size: 14px;
+  font-size: 12px;
   color: #007AFF;
   font-weight: bold;
 }
diff --git a/src/components/TemplateCard/index.tsx b/src/components/TemplateCard/index.tsx
index 1604a52..4e98f7f 100644
--- a/src/components/TemplateCard/index.tsx
+++ b/src/components/TemplateCard/index.tsx
@@ -14,37 +14,44 @@ export default function TemplateCard({ template, onClick }: TemplateCardProps) {
 
   return (
     <View className='template-card' onClick={handleClick}>
-      {/* 左右对比区域 */}
+      {/* 合成对比图片区域 */}
       <View className='image-comparison'>
-        <View className='split-container'>
+        <View className='merged-image-container'>
+          {/* 左半部分 - 原图的左半部分 */}
           <View className='image-half left-half'>
             <Image
-              className='comparison-image'
+              className='comparison-image left-image'
               src={template.input}
               mode='aspectFill'
               lazyLoad
             />
-            <View className='image-label input-label'>
-              <Text className='label-text'>原图</Text>
-            </View>
           </View>
 
+          {/* 右半部分 - 效果图的右半部分 */}
           <View className='image-half right-half'>
             <Image
-              className='comparison-image'
+              className='comparison-image right-image'
               src={template.output}
               mode='aspectFill'
               lazyLoad
             />
-            <View className='image-label output-label'>
-              <Text className='label-text'>效果</Text>
+          </View>
+
+          {/* 中央分割线 */}
+          <View className='split-line'>
+            <View className='split-handle'>
+              <Text className='split-icon'>⟷</Text>
             </View>
           </View>
-        </View>
 
-        <View className='split-line'>
-          <View className='split-handle'>
-            <Text className='split-icon'>⟷</Text>
+          {/* 标签 */}
+          <View className='image-labels'>
+            <View className='label-left input-label'>
+              <Text className='label-text'>原图</Text>
+            </View>
+            <View className='label-right output-label'>
+              <Text className='label-text'>效果</Text>
+            </View>
           </View>
         </View>
       </View>