feat: 商家卡片支持多图展示,点击左右切换带 crossfade 过渡

- Restaurant.image 改为 images: string[],API 层从高德取最多 5 张图
- RestaurantCard 新增 ImageGallery:点击图片左右区域切换、顶部圆点指示器、
  左右箭头提示、首次查看时文字引导气泡(2.5s 自动消失)
- 图片切换使用 crossfade 动画(旧图渐隐 280ms),过渡平滑
- MatchResult / Profile 页面兼容新旧数据格式,无图时条件渲染
This commit is contained in:
2026-02-25 11:51:42 +08:00
parent c86a6c0909
commit 079feddf0e
6 changed files with 153 additions and 33 deletions
+9 -5
View File
@@ -42,10 +42,14 @@ function mapPoiToRestaurant(poi: AmapPoiV5, defaultImage: string): Restaurant {
const price =
costStr && costStr !== "[]" && costStr !== "0" ? `¥${costStr}` : "未知";
const image =
poi.photos && poi.photos.length > 0 && poi.photos[0].url
? poi.photos[0].url
: defaultImage;
const images =
poi.photos && poi.photos.length > 0
? poi.photos
.map((p) => p.url)
.filter(Boolean)
.slice(0, 5)
: [];
if (images.length === 0) images.push(defaultImage);
const openTime =
cleanField(poi.business?.opentime_week) ||
@@ -57,7 +61,7 @@ function mapPoiToRestaurant(poi: AmapPoiV5, defaultImage: string): Restaurant {
rating,
price,
distance: poi.distance ? `${poi.distance}m` : "",
image,
images,
category: extractCategory(poi.type),
address: cleanField(poi.address),
openTime,