fix: 修复拖拽时图片缩放变形问题，保证图片尺寸不变形

� 问题修复：
- 解决拖拽分割线时图片会缩放变形的问题
- 确保图片始终保持原始比例，不会因容器宽度变化而变形
- 只改变图片的显示区域，而非图片本身的尺寸

� 技术实现：
- 使用CSS背景图片替代Image组件
- 通过backgroundSize动态计算保持图片原始比例
- 左侧：backgroundPosition: 'left center' 显示图片左侧部分
- 右侧：backgroundPosition: 'right center' 显示图片右侧部分
- 动态调整backgroundSize确保图片不变形

� 实现原理：
- 左半部分：backgroundSize = (100 / splitPosition) * 100%
- 右半部分：backgroundSize = (100 / (100 - splitPosition)) * 100%
- 通过数学计算确保图片在任何分割比例下都保持原始尺寸

✅ 效果验证：
- 拖拽时图片不再缩放变形
- 保持图片原始宽高比
- 只显示对应区域的图片内容
- 提供更真实的before/after对比效果

src/components/TemplateCard/index.css

@@ -40,29 +40,7 @@
   position: relative;
   overflow: hidden;
   transition: width 0.1s ease-out;
-}
+  background-color: #f5f5f5;
-
-.comparison-image {
-  width: 200%; /* 图片宽度设为容器的2倍 */
-  height: 100%;
-  object-fit: cover;
-  display: block;
-  background: #f5f5f5;
-  transition: opacity 0.3s ease;
-}
-
-/* 左半部分显示原图的左半部分 */
-.left-image {
-  transform: translateX(0); /* 不偏移，显示图片左半部分 */
-}
-
-/* 右半部分显示效果图的右半部分 */
-.right-image {
-  transform: translateX(-50%); /* 向左偏移50%，显示图片右半部分 */
-}
-
-.comparison-image:not([src]) {
-  opacity: 0.5;
 }
 
 /* 标签容器 */

src/components/TemplateCard/index.tsx

@@ -1,4 +1,4 @@
-import { View, Text, Image } from '@tarojs/components'
+import { View, Text } from '@tarojs/components'
 import { useState, useRef } from 'react'
 import Taro from '@tarojs/taro'
 import { Template } from '../../store/types'
@@ -76,27 +76,27 @@ export default function TemplateCard({ template, onClick }: TemplateCardProps) {
           {/* 左半部分 - 原图的左半部分 */}
           <View
             className='image-half left-half'
-            style={{ width: `${splitPosition}%` }}
+            style={{
+              width: `${splitPosition}%`,
+              backgroundImage: `url(${template.input})`,
+              backgroundSize: `${(100 / splitPosition) * 100}% 100%`,
+              backgroundPosition: 'left center',
+              backgroundRepeat: 'no-repeat'
+            }}
           >
-            <Image
-              className='comparison-image left-image'
-              src={template.input}
-              mode='aspectFill'
-              lazyLoad
-            />
           </View>
 
           {/* 右半部分 - 效果图的右半部分 */}
           <View
             className='image-half right-half'
-            style={{ width: `${100 - splitPosition}%` }}
+            style={{
+              width: `${100 - splitPosition}%`,
+              backgroundImage: `url(${template.output})`,
+              backgroundSize: `${(100 / (100 - splitPosition)) * 100}% 100%`,
+              backgroundPosition: 'right center',
+              backgroundRepeat: 'no-repeat'
+            }}
           >
-            <Image
-              className='comparison-image right-image'
-              src={template.output}
-              mode='aspectFill'
-              lazyLoad
-            />
           </View>
 
           {/* 可拖拽的分割线 */}