feat: 实现可拖拽分割线功能，支持动态调整对比比例

� 核心功能：
- 添加可拖拽分割线，用户可左右拖动调整原图和效果图显示比例
- 初始50/50比例，支持10%-90%范围内自由调整
- 实时响应拖拽操作，提供流畅交互体验

� 交互优化：
- 增大拖拽区域（4px宽度）便于操作
- 拖拽时手柄放大并增强阴影效果
- 使用touch-action: none防止页面滚动干扰
- 延迟重置拖拽状态避免误触发卡片点击

� 动态效果：
- 左右区域宽度随拖拽实时调整
- 标签宽度动态跟随区域变化
- 平滑过渡动画（0.1s ease-out）
- 分割线位置流畅跟随手指移动

� 技术实现：
- React useState管理分割线位置状态
- getBoundingClientRect()获取精确容器位置
- 动态计算触摸点位置并转换为百分比
- CSS动态样式与React状态完美结合
- 触摸事件阻止冒泡避免干扰其他交互

� 更新设计文档，添加交互使用说明

DESIGN_PREVIEW.md

@@ -11,12 +11,13 @@
 - **响应式设计**：在更大屏幕上自动调整为3列
 - **自适应高度**：每个卡片根据内容自动调整高度
 
-### 2. 左右对比效果 ⭐ **最新更新**
+### 2. 可拖拽对比效果 🚀 **最新功能**
-- **左右分屏**：原图展示左半边，效果图展示右半边，各占50%宽度
+- **可拖拽分割线**：用户可以左右拖动分割线，动态调整对比比例
-- **视觉分割线**：中间添加优雅的白色分割线，带有圆形交互手柄
+- **实时响应**：拖拽过程中实时看到两张图片的显示比例变化
-- **标签标识**：底部居中显示标签，原图蓝色，效果图绿色
+- **智能边界**：限制拖拽范围在10%-90%之间，确保两侧都有内容显示
-- **毛玻璃效果**：标签使用backdrop-filter实现现代毛玻璃效果
+- **触摸优化**：增大拖拽区域，优化触摸体验，防止误触
-- **完美对比**：统一高度180px，确保视觉平衡和对比效果
+- **视觉反馈**：拖拽时手柄会放大，提供清晰的交互反馈
+- **动态标签**：左右标签宽度随分割线位置动态调整
 
 ### 3. 卡片设计
 - **渐变背景**：图片区域使用渐变背景增加层次感
@@ -38,10 +39,10 @@ Home页面
 │   └── 副标题："选择模板，一键生成精美效果"
 └── 瀑布流网格
     └── 模板卡片 × 6
-        ├── 左右对比区域 ⭐ **新设计**
+        ├── 可拖拽对比区域 🚀 **交互功能**
-        │   ├── 左半边：原图（底部蓝色"原图"标签）
+        │   ├── 左半边：原图左半部分（动态宽度，蓝色标签）
-        │   ├── 中央分割线：白色线条 + 圆形手柄（⟷图标）
+        │   ├── 可拖拽分割线：白色线条 + 可拖拽手柄（⟷图标）
-        │   └── 右半边：效果图（底部绿色"效果"标签）
+        │   └── 右半边：效果图右半部分（动态宽度，绿色标签）
         └── 信息区域
             ├── 模板名称
             ├── 功能描述
@@ -86,11 +87,28 @@ Home页面
 - CSS动画使用transform提升性能
 - 合理的图片尺寸设置
 
+## 🎮 交互使用说明
+
+### 拖拽对比功能
+1. **初始状态**：分割线位于中央（50/50比例）
+2. **开始拖拽**：用手指按住分割线上的圆形手柄
+3. **左右拖动**：
+   - 向左拖动：原图区域变小，效果图区域变大
+   - 向右拖动：原图区域变大，效果图区域变小
+4. **实时预览**：拖拽过程中可以实时看到对比效果
+5. **智能限制**：拖拽范围限制在10%-90%之间
+
+### 视觉反馈
+- **拖拽时**：手柄会放大并增强阴影效果
+- **动态标签**：左右标签宽度随分割线实时调整
+- **平滑过渡**：所有动画都有平滑的过渡效果
+
 ## 🚀 使用方法
 
 1. 启动开发服务器：`npm run dev:weapp`
 2. 在微信开发者工具中打开项目
 3. 查看home页面的瀑布流效果
+4. 尝试拖拽分割线体验对比功能
 
 ## 📝 后续优化建议
 

src/components/TemplateCard/index.css

@@ -38,8 +38,8 @@
 
 .image-half {
   position: relative;
-  flex: 1;
   overflow: hidden;
+  transition: width 0.1s ease-out;
 }
 
 .comparison-image {
@@ -77,13 +77,14 @@
 
 .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);
+  transition: width 0.1s ease-out;
+  min-width: 40px; /* 确保标签有最小宽度 */
 }
 
 .label-left {
@@ -103,19 +104,21 @@
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
 }
 
-/* 分割线和手柄 */
+/* 可拖拽分割线 */
 .split-line {
   position: absolute;
-  left: 50%;
   top: 0;
   bottom: 0;
-  width: 2px;
+  width: 4px; /* 增加宽度便于拖拽 */
   background: linear-gradient(to bottom,
     rgba(255, 255, 255, 0.8) 0%,
     rgba(255, 255, 255, 0.9) 50%,
     rgba(255, 255, 255, 0.8) 100%);
   transform: translateX(-50%);
   z-index: 3;
+  cursor: col-resize;
+  touch-action: none; /* 防止页面滚动 */
+  transition: left 0.1s ease-out;
 }
 
 .split-handle {
@@ -123,15 +126,23 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  width: 28px;
+  width: 32px;
-  height: 28px;
+  height: 32px;
   background: rgba(255, 255, 255, 0.95);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
-  border: 2px solid rgba(0, 122, 255, 0.3);
+  border: 2px solid rgba(0, 122, 255, 0.4);
+  cursor: col-resize;
+  touch-action: none;
+  transition: all 0.2s ease;
+}
+
+.split-handle:active {
+  transform: translate(-50%, -50%) scale(1.1);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
 }
 
 .split-icon {

src/components/TemplateCard/index.tsx

@@ -1,4 +1,5 @@
 import { View, Text, Image } from '@tarojs/components'
+import { useState, useRef } from 'react'
 import { Template } from '../../store/types'
 import './index.css'
 
@@ -8,17 +9,64 @@ interface TemplateCardProps {
 }
 
 export default function TemplateCard({ template, onClick }: TemplateCardProps) {
+  const [splitPosition, setSplitPosition] = useState(50) // 分割线位置百分比
+  const [isDragging, setIsDragging] = useState(false)
+  const containerRef = useRef<any>(null)
+
   const handleClick = () => {
+    if (!isDragging) {
       onClick(template)
     }
+  }
+
+  // 处理触摸开始
+  const handleTouchStart = (e: any) => {
+    e.stopPropagation()
+    setIsDragging(true)
+  }
+
+  // 处理触摸移动
+  const handleTouchMove = (e: any) => {
+    if (!isDragging) return
+    e.stopPropagation()
+
+    const touch = e.touches[0]
+    const container = containerRef.current
+    if (!container || !touch) return
+
+    // 获取容器的位置信息
+    const rect = container.getBoundingClientRect()
+    const containerLeft = rect.left
+    const containerWidth = rect.width
+
+    // 计算触摸点相对于容器的位置
+    const touchX = touch.clientX - containerLeft
+    const percentage = Math.max(10, Math.min(90, (touchX / containerWidth) * 100))
+
+    setSplitPosition(percentage)
+  }
+
+  // 处理触摸结束
+  const handleTouchEnd = (e: any) => {
+    e.stopPropagation()
+    setTimeout(() => setIsDragging(false), 100) // 延迟重置，避免触发点击
+  }
 
   return (
     <View className='template-card' onClick={handleClick}>
       {/* 合成对比图片区域 */}
       <View className='image-comparison'>
-        <View className='merged-image-container'>
+        <View
+          className='merged-image-container'
+          ref={containerRef}
+          onTouchMove={handleTouchMove}
+          onTouchEnd={handleTouchEnd}
+        >
           {/* 左半部分 - 原图的左半部分 */}
-          <View className='image-half left-half'>
+          <View
+            className='image-half left-half'
+            style={{ width: `${splitPosition}%` }}
+          >
             <Image
               className='comparison-image left-image'
               src={template.input}
@@ -28,7 +76,10 @@ export default function TemplateCard({ template, onClick }: TemplateCardProps) {
           </View>
 
           {/* 右半部分 - 效果图的右半部分 */}
-          <View className='image-half right-half'>
+          <View
+            className='image-half right-half'
+            style={{ width: `${100 - splitPosition}%` }}
+          >
             <Image
               className='comparison-image right-image'
               src={template.output}
@@ -37,19 +88,31 @@ export default function TemplateCard({ template, onClick }: TemplateCardProps) {
             />
           </View>
 
-          {/* 中央分割线 */}
+          {/* 可拖拽的分割线 */}
-          <View className='split-line'>
+          <View
+            className='split-line'
+            style={{ left: `${splitPosition}%` }}
+            onTouchStart={handleTouchStart}
+            onTouchMove={handleTouchMove}
+            onTouchEnd={handleTouchEnd}
+          >
             <View className='split-handle'>
               <Text className='split-icon'>⟷</Text>
             </View>
           </View>
 
-          {/* 标签 */}
+          {/* 动态标签 */}
           <View className='image-labels'>
-            <View className='label-left input-label'>
+            <View
+              className='label-left input-label'
+              style={{ width: `${splitPosition}%` }}
+            >
               <Text className='label-text'>原图</Text>
             </View>
-            <View className='label-right output-label'>
+            <View
+              className='label-right output-label'
+              style={{ width: `${100 - splitPosition}%` }}
+            >
               <Text className='label-text'>效果</Text>
             </View>
           </View>