From e7b8aab80ce9c527c0a6d8adc775c231346940ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E6=88=90?= <light.zhang@ysinc.com>
Date: Mon, 10 Nov 2025 00:05:49 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=97=B6=E9=97=B4=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ListCard/index.scss | 11 ++++--
 src/components/ListCard/index.tsx  | 58 ++++++++++++++++++++++++++++--
 2 files changed, 65 insertions(+), 4 deletions(-)

diff --git a/src/components/ListCard/index.scss b/src/components/ListCard/index.scss
index c28b995..e7f0b56 100644
--- a/src/components/ListCard/index.scss
+++ b/src/components/ListCard/index.scss
@@ -49,13 +49,20 @@
   font-size: 12px;
   line-height: 18px;
   color: #3C3C4399;
+  overflow: hidden;
 }
 
 .location-position {
-  max-width: 50%;
+  flex: 1;
+  min-width: 0; // 允许缩小
   white-space: nowrap;
   overflow: hidden;
-  text-overflow: ellipsis;
+  // 不使用 CSS 的省略号，由 JS 控制
+}
+
+.location-time-distance {
+  flex-shrink: 0; // 固定信息不压缩，始终显示
+  white-space: nowrap;
 }
 
 .location-text {
diff --git a/src/components/ListCard/index.tsx b/src/components/ListCard/index.tsx
index 6f7b205..012636f 100644
--- a/src/components/ListCard/index.tsx
+++ b/src/components/ListCard/index.tsx
@@ -1,5 +1,6 @@
 import { View, Text, Image } from "@tarojs/components";
 import Taro from "@tarojs/taro";
+import { useMemo } from "react";
 import img from "../../config/images";
 import { ListCardProps } from "../../../types/list/types";
 import { formatGameTime, calculateDuration } from "@/utils/timeUtils";
@@ -54,6 +55,59 @@ const ListCard: React.FC<ListCardProps> = ({
     });
   };
 
+  // 处理地点截断，确保固定信息始终显示
+  const displayLocation = useMemo(() => {
+    if (!location) return '';
+    
+    // 获取屏幕宽度，用于计算实际容器宽度
+    const systemInfo = Taro.getSystemInfoSync();
+    const screenWidth = systemInfo.windowWidth || 375;
+    // 容器宽度 = 屏幕宽度 - 左右 padding - 图片区域宽度
+    const containerWidthPx = screenWidth - 130;
+    
+    // 计算固定信息宽度
+    const extraInfo = `${court_type ? `・${court_type}` : ''}${distance_km ? `・${distance_km}km` : ''}`;
+    
+    // 估算字符宽度（基于 12px 字体）
+    const getTextWidth = (text: string) => {
+      let width = 0;
+      for (let char of text) {
+        if (/[\u4e00-\u9fa5\u3000-\u303f\uff00-\uffef]/.test(char)) {
+          width += 12; // 中文字符 12px
+        } else {
+          width += 6; // 英文字符和数字 6px
+        }
+      }
+      return width;
+    };
+    
+    const extraWidth = getTextWidth(extraInfo);
+    const locationWidth = getTextWidth(location);
+    
+    // 可用宽度 = 容器宽度 - 固定信息宽度 - 省略号宽度（18px）
+    const availableWidth = containerWidthPx - extraWidth - 18;
+    
+    // 如果地点宽度小于可用宽度，不需要截断
+    if (locationWidth <= availableWidth) {
+      return location;
+    }
+    
+    // 需要截断地点
+    let maxChars = 0;
+    let currentWidth = 0;
+    for (let i = 0; i < location.length; i++) {
+      const char = location[i];
+      const charWidth = /[\u4e00-\u9fa5\u3000-\u303f\uff00-\uffef]/.test(char) ? 12 : 6;
+      if (currentWidth + charWidth > availableWidth) {
+        break;
+      }
+      currentWidth += charWidth;
+      maxChars++;
+    }
+    
+    return location.slice(0, maxChars) + '...';
+  }, [location, court_type, distance_km]);
+
   // 根据图片数量决定展示样式
   const renderImages = () => {
     if (image_list?.length === 0) return null;
@@ -128,9 +182,9 @@ const ListCard: React.FC<ListCardProps> = ({
           {/* 地点,室内外,距离 */}
 
           <View className="location">
-            {location && (
+            {displayLocation && (
               <Text className="location-text location-position">
-                {location}
+                {displayLocation}
               </Text>
             )}
             <Text className="location-text location-time-distance">