更新

TUICallKit-Vue3/tongji/components/FoodTileIcon.vue

@@ -1,11 +1,14 @@
 <template>
-    <view class="food-tile-icon" :class="[`food-tile-icon--${size}`]">
-        <text class="food-tile-icon__emoji">{{ fallbackIcon }}</text>
+    <view
+        class="food-tile-icon"
+        :class="[`food-tile-icon--${size}`, { 'is-custom-img': hasCustomImg }]"
+    >
+        <text v-if="showEmojiFallback" class="food-tile-icon__emoji">{{ fallbackIcon }}</text>
         <image
             v-if="src && !imageFailed"
             class="food-tile-icon__img"
             :src="src"
-            mode="aspectFit"
+            :mode="imageMode"
             @error="onImageError"
         />
     </view>
@@ -27,12 +30,20 @@ const fallbackIcon = computed(() => {
     return '🍽'
 })
 
+const hasCustomImg = computed(() => typeof props.food === 'object' && !!props.food?.img)
+
 const src = computed(() => {
     if (typeof props.food === 'object' && props.food?.img) return props.food.img
     if (typeof props.food === 'object' && props.food?.icon) return getFoodImgUrl(props.food.icon)
     return ''
 })
 
+/** 有可用图片时不渲染 emoji，避免 PNG 透明区域露出底层符号 */
+const showEmojiFallback = computed(() => !src.value || imageFailed.value)
+
+/** 自定义素材用 aspectFill 铺满，减少边缘露底 */
+const imageMode = computed(() => (hasCustomImg.value ? 'aspectFill' : 'aspectFit'))
+
 watch(
     () => src.value,
     () => {
@@ -71,6 +82,11 @@ function onImageError() {
     z-index: 2;
 }
 
+.food-tile-icon--tile.is-custom-img .food-tile-icon__img {
+    width: 82%;
+    height: 82%;
+}
+
 /* 玻璃格上的食材图片：投影增强立体感（参考稿） */
 .food-tile-icon--tile .food-tile-icon__img {
     filter: drop-shadow(0 6rpx 10rpx rgba(0, 0, 0, 0.16));
@@ -109,6 +125,11 @@ function onImageError() {
     font-size: 34rpx;
 }
 
+.food-tile-icon--goal.is-custom-img .food-tile-icon__img,
+.food-tile-icon--tooltip.is-custom-img .food-tile-icon__img {
+    border-radius: 8rpx;
+}
+
 .food-tile-icon__img {
     position: absolute;
     left: 0;