Merge branch 'light_v4'

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 {

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">

src/components/PublishMenu/index.module.scss

@@ -206,13 +206,12 @@ box-sizing: border-box;
     font-weight: bold;
     line-height: 1;
     transform: rotate(45deg);
-
+    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
   }
   &.rotated {
     .closeIcon{
       transform: rotate(90deg);
     }
-    
   }
 }