From 3647b4063173c9d32de798a77f0a48fb72903547 Mon Sep 17 00:00:00 2001
From: imeepos <imeepos@outlook.com>
Date: Wed, 3 Sep 2025 17:47:15 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8DTaro=E7=8E=AF=E5=A2=83?=
 =?UTF-8?q?=E4=B8=8B=E6=8B=96=E6=8B=BD=E5=8A=9F=E8=83=BD=E7=9A=84getBoundi?=
 =?UTF-8?q?ngClientRect=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

� 问题修复：
- 替换getBoundingClientRect()为Taro.createSelectorQuery()
- 使用Taro官方推荐的boundingClientRect()方法获取元素位置
- 解决小程序环境下DOM API不可用的问题

� 技术改进：
- 异步获取容器位置信息并缓存
- 在触摸开始时预先获取容器数据
- 保持拖拽过程中的流畅性和响应性
- 完全兼容微信小程序环境

✅ 功能验证：
- 项目成功构建，无编译错误
- 保持所有原有拖拽功能特性
- 维持10%-90%拖拽范围限制
- 确保触摸事件正常响应

现在可以在微信开发者工具中正常使用拖拽分割线功能
---
 src/components/TemplateCard/index.tsx | 33 ++++++++++++++++++---------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/components/TemplateCard/index.tsx b/src/components/TemplateCard/index.tsx
index 6210c1b..2f9b608 100644
--- a/src/components/TemplateCard/index.tsx
+++ b/src/components/TemplateCard/index.tsx
@@ -1,5 +1,6 @@
 import { View, Text, Image } from '@tarojs/components'
 import { useState, useRef } from 'react'
+import Taro from '@tarojs/taro'
 import { Template } from '../../store/types'
 import './index.css'
 
@@ -11,6 +12,7 @@ interface TemplateCardProps {
 export default function TemplateCard({ template, onClick }: TemplateCardProps) {
   const [splitPosition, setSplitPosition] = useState(50) // 分割线位置百分比
   const [isDragging, setIsDragging] = useState(false)
+  const [containerInfo, setContainerInfo] = useState<any>(null)
   const containerRef = useRef<any>(null)
 
   const handleClick = () => {
@@ -19,29 +21,38 @@ export default function TemplateCard({ template, onClick }: TemplateCardProps) {
     }
   }
 
+  // 获取容器信息
+  const getContainerInfo = () => {
+    return new Promise((resolve) => {
+      const query = Taro.createSelectorQuery()
+      query.select('.merged-image-container').boundingClientRect((rect) => {
+        if (rect) {
+          setContainerInfo(rect)
+          resolve(rect)
+        }
+      }).exec()
+    })
+  }
+
   // 处理触摸开始
-  const handleTouchStart = (e: any) => {
+  const handleTouchStart = async (e: any) => {
     e.stopPropagation()
     setIsDragging(true)
+    // 获取容器信息用于后续计算
+    await getContainerInfo()
   }
 
   // 处理触摸移动
   const handleTouchMove = (e: any) => {
-    if (!isDragging) return
+    if (!isDragging || !containerInfo) 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
+    if (!touch) return
 
     // 计算触摸点相对于容器的位置
-    const touchX = touch.clientX - containerLeft
-    const percentage = Math.max(10, Math.min(90, (touchX / containerWidth) * 100))
+    const touchX = touch.clientX - containerInfo.left
+    const percentage = Math.max(10, Math.min(90, (touchX / containerInfo.width) * 100))
 
     setSplitPosition(percentage)
   }