From f37a1e7b8190d25e0515a4b81b83eae6ecd8b2ab Mon Sep 17 00:00:00 2001
From: imeepos <imeepos@outlook.com>
Date: Wed, 3 Sep 2025 18:10:20 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=A4=9A=E4=B8=AATemp?=
 =?UTF-8?q?lateCard=E6=8B=96=E6=8B=BD=E9=80=BB=E8=BE=91=E5=86=B2=E7=AA=81?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

问题分析：
- 每个TemplateCard都使用相同的CSS选择器
- Taro选择器总是选择页面中第一个匹配元素
- 导致第二个及后续卡片获取到错误的容器信息
- 造成拖拽计算错误，出现不连续的滑动效果

解决方案：
- 为每个TemplateCard容器添加唯一ID
- 使用ID选择器替代class选择器
- 确保每个卡片获取到正确的容器边界信息
- 保证拖拽计算基于正确的容器尺寸和位置

修复效果：
- 所有卡片的拖拽逻辑互不干扰
- 分割线移动精确响应触摸位置
- 解决多实例组件选择器冲突问题
---
 src/components/TemplateCard/index.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/TemplateCard/index.tsx b/src/components/TemplateCard/index.tsx
index 6bdc6db..903ba9e 100644
--- a/src/components/TemplateCard/index.tsx
+++ b/src/components/TemplateCard/index.tsx
@@ -14,6 +14,7 @@ export default function TemplateCard({ template, onClick }: TemplateCardProps) {
   const [isDragging, setIsDragging] = useState(false)
   const [containerInfo, setContainerInfo] = useState<any>(null)
   const containerRef = useRef<any>(null)
+  const containerId = `container-${template.code}` // 为每个容器创建唯一ID
 
   const handleClick = () => {
     if (!isDragging) {
@@ -25,7 +26,7 @@ export default function TemplateCard({ template, onClick }: TemplateCardProps) {
   const getContainerInfo = () => {
     return new Promise((resolve) => {
       const query = Taro.createSelectorQuery()
-      query.select('.merged-image-container').boundingClientRect((rect) => {
+      query.select(`#${containerId}`).boundingClientRect((rect) => {
         if (rect) {
           setContainerInfo(rect)
           resolve(rect)
@@ -68,6 +69,7 @@ export default function TemplateCard({ template, onClick }: TemplateCardProps) {
       {/* 合成对比图片区域 */}
       <View className='image-comparison'>
         <View
+          id={containerId}
           className='merged-image-container'
           ref={containerRef}
           onTouchMove={handleTouchMove}