From be582a668a92d54f72655a409431813e60b9a95d Mon Sep 17 00:00:00 2001
From: imeepos <imeepos@outlook.com>
Date: Wed, 3 Sep 2025 17:53:47 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E5=8F=98=E5=BD=A2=E9=97=AE=E9=A2=98=E5=B9=B6=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E7=80=91=E5=B8=83=E6=B5=81=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

� 图片显示修复：
- 改用mode='aspectFit'替代aspectFill，保持图片完整比例
- 设置height: auto让图片高度自适应，避免变形
- 限制宽度但不限制高度，确保图片不被拉伸
- 使用flexbox居中对齐图片显示

� 瀑布流布局优化：
- 简化CSS布局，使用标准grid布局替代复杂的flex+grid混合方案
- 移除不必要的max-height和flex-wrap属性
- 删除TemplateCard的margin-bottom，使用grid gap统一间距
- 确保小程序环境下的兼容性和稳定性

� 样式细节调整：
- 容器使用min-height和max-height控制高度范围
- 添加line-clamp标准属性提升CSS兼容性
- 优化响应式断点，确保不同屏幕尺寸下的良好显示
- 保持卡片圆角和阴影效果

✅ 预期效果：
- 图片不再变形，保持原始宽高比
- 瀑布流布局正确显示为2列网格
- 拖拽功能正常，图片尺寸稳定
- 在微信小程序中完美兼容
---
 src/components/TemplateCard/index.css | 21 +++++++++++++--
 src/components/TemplateCard/index.tsx | 38 +++++++++++++++------------
 src/pages/home/index.css              | 31 ++++++----------------
 3 files changed, 48 insertions(+), 42 deletions(-)

diff --git a/src/components/TemplateCard/index.css b/src/components/TemplateCard/index.css
index 40ba7a0..95dd6ff 100644
--- a/src/components/TemplateCard/index.css
+++ b/src/components/TemplateCard/index.css
@@ -9,7 +9,6 @@
   flex-direction: column;
   position: relative;
   overflow: hidden;
-  margin-bottom: 16px;
   break-inside: avoid;
   width: 100%;
   box-sizing: border-box;
@@ -32,7 +31,8 @@
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  height: 180px;
+  min-height: 180px;
+  max-height: 300px; /* 设置最大高度避免过高 */
   display: flex;
 }
 
@@ -43,6 +43,22 @@
   background-color: #f5f5f5;
 }
 
+.image-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.comparison-image {
+  width: 100%;
+  height: auto; /* 高度自适应，保持宽高比 */
+  max-height: 100%;
+  display: block;
+}
+
 /* 标签容器 */
 .image-labels {
   position: absolute;
@@ -156,6 +172,7 @@
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
+  line-clamp: 2;
   -webkit-box-orient: vertical;
 }
 
diff --git a/src/components/TemplateCard/index.tsx b/src/components/TemplateCard/index.tsx
index 81a61d9..d217961 100644
--- a/src/components/TemplateCard/index.tsx
+++ b/src/components/TemplateCard/index.tsx
@@ -1,4 +1,4 @@
-import { View, Text } from '@tarojs/components'
+import { View, Text, Image } from '@tarojs/components'
 import { useState, useRef } from 'react'
 import Taro from '@tarojs/taro'
 import { Template } from '../../store/types'
@@ -73,30 +73,34 @@ export default function TemplateCard({ template, onClick }: TemplateCardProps) {
           onTouchMove={handleTouchMove}
           onTouchEnd={handleTouchEnd}
         >
-          {/* 左半部分 - 原图的左半部分 */}
+          {/* 左半部分 - 原图 */}
           <View
             className='image-half left-half'
-            style={{
-              width: `${splitPosition}%`,
-              backgroundImage: `url(${template.input})`,
-              backgroundSize: `${(100 / splitPosition) * 100}% 100%`,
-              backgroundPosition: 'left center',
-              backgroundRepeat: 'no-repeat'
-            }}
+            style={{ width: `${splitPosition}%` }}
           >
+            <View className='image-wrapper'>
+              <Image
+                className='comparison-image'
+                src={template.input}
+                mode='aspectFit'
+                lazyLoad
+              />
+            </View>
           </View>
 
-          {/* 右半部分 - 效果图的右半部分 */}
+          {/* 右半部分 - 效果图 */}
           <View
             className='image-half right-half'
-            style={{
-              width: `${100 - splitPosition}%`,
-              backgroundImage: `url(${template.output})`,
-              backgroundSize: `${(100 / (100 - splitPosition)) * 100}% 100%`,
-              backgroundPosition: 'right center',
-              backgroundRepeat: 'no-repeat'
-            }}
+            style={{ width: `${100 - splitPosition}%` }}
           >
+            <View className='image-wrapper'>
+              <Image
+                className='comparison-image'
+                src={template.output}
+                mode='aspectFit'
+                lazyLoad
+              />
+            </View>
           </View>
 
           {/* 可拖拽的分割线 */}
diff --git a/src/pages/home/index.css b/src/pages/home/index.css
index 616c1d0..792ea68 100644
--- a/src/pages/home/index.css
+++ b/src/pages/home/index.css
@@ -29,27 +29,14 @@
   font-weight: 500;
 }
 
-/* 瀑布流布局 - 使用flex布局兼容小程序 */
+/* 瀑布流布局 - 简化为标准grid布局 */
 .template-grid {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  max-height: 2000px; /* 设置一个最大高度来实现换列效果 */
+  display: grid;
+  grid-template-columns: 1fr 1fr;
   gap: 12px;
   max-width: 100%;
   margin: 0 auto;
-  align-content: flex-start;
-}
-
-/* 如果支持grid布局，使用grid */
-@supports (display: grid) {
-  .template-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-gap: 12px;
-    max-height: none;
-    flex-wrap: nowrap;
-  }
+  padding: 0 4px;
 }
 
 /* 响应式调整 */
@@ -61,15 +48,13 @@
   .template-grid {
     max-width: 600px;
     gap: 16px;
-    grid-gap: 16px;
+    padding: 0;
   }
 }
 
 @media (min-width: 1024px) {
-  @supports (display: grid) {
-    .template-grid {
-      grid-template-columns: 1fr 1fr 1fr;
-      max-width: 900px;
-    }
+  .template-grid {
+    grid-template-columns: 1fr 1fr 1fr;
+    max-width: 900px;
   }
 }
\ No newline at end of file