fix: 动作详情GIF动图播放 + 收藏按钮避让胶囊

miniprogram/pages/detail/detail.js

@@ -7,10 +7,13 @@ const auth = require('../../utils/auth');
 Page({
   data: {
     statusBarHeight: 20,
+    favRight: 8,
+    favTop: 20,
     id: '',
     planId: '',
     exercise: null,
     heroSrc: '',
+    heroGif: '',
     heroError: false,
     related: [],
     loading: true,
@@ -20,7 +23,18 @@ Page({
   onLoad(query) {
     const id = query.id || '';
     const planId = query.planId || '';
-    this.setData({ statusBarHeight: app.globalData.statusBarHeight || 20, id, planId });
+    // 收藏按钮需避让微信右上角胶囊按钮(···◯)：用胶囊实际位置算出安全右/上边距
+    let favRight = 8;
+    let favTop = (app.globalData.statusBarHeight || 20) + 6;
+    try {
+      const menu = wx.getMenuButtonBoundingClientRect();
+      const win = (wx.getWindowInfo && wx.getWindowInfo()) || wx.getSystemInfoSync();
+      if (menu && win) {
+        favRight = Math.max(8, win.windowWidth - menu.left + 8);
+        favTop = menu.top + Math.max(0, (menu.height - 36) / 2);
+      }
+    } catch (e) {}
+    this.setData({ statusBarHeight: app.globalData.statusBarHeight || 20, favRight, favTop, id, planId });
     // 防御：id 缺失直接显示空态，避免请求 /api/exercises/ 导致错乱或 404
     if (!id) {
       this.setData({ loading: false });
@@ -37,9 +51,10 @@ Page({
   load() {
     this.setData({ loading: true });
     svc.getExercise(this.data.id).then((ex) => {
-      // 详情大图优先用超分 JPG(720px 清晰)；失败再降级到 GIF / 占位
+      // 海报用超分 JPG(720px 清晰)；动图用原始 GIF，由 gif-player 组件逐帧播放
       const heroSrc = ex && (ex.image || ex.gifUrl) ? (ex.image || ex.gifUrl) : '';
-      this.setData({ exercise: ex, heroSrc, heroError: false, loading: false });
+      const heroGif = ex && ex.gifUrl ? ex.gifUrl : '';
+      this.setData({ exercise: ex, heroSrc, heroGif, heroError: false, loading: false });
       if (ex && ex.target) {
         svc.listExercises({ target: ex.target, pageSize: 6 }).then((res) => {
           const related = ((res && res.items) || [])

miniprogram/pages/detail/detail.json

@@ -2,6 +2,7 @@
   "navigationStyle": "custom",
   "usingComponents": {
     "navbar": "/components/navbar/index",
-    "exercise-card": "/components/exercise-card/index"
+    "exercise-card": "/components/exercise-card/index",
+    "gif-player": "/components/gif-player/gif-player"
   }
 }

miniprogram/pages/detail/detail.wxml

@@ -1,7 +1,7 @@
 <view class="page" wx:if="{{exercise}}">
   <navbar title="{{exercise.displayName || exercise.name}}" show-back />
 
-  <view class="favbtn" style="top: {{statusBarHeight + 12}}px;" bindtap="onToggleFav">
+  <view class="favbtn" style="top: {{favTop}}px; right: {{favRight}}px;" bindtap="onToggleFav">
     <text>{{favorited ? '♥' : '♡'}}</text>
   </view>
 
@@ -14,6 +14,8 @@
       lazy-load="true"
       binderror="onHeroError" />
     <view wx:else class="hero__ph">🏋️</view>
+    <!-- 上层叠一个动图播放器：Canvas 逐帧播放 GIF（微信 image 不播 GIF） -->
+    <gif-player wx:if="{{heroGif}}" class="hero__gif" src="{{heroGif}}" />
   </view>
 
   <view class="body section">

miniprogram/pages/detail/detail.wxss

@@ -1,7 +1,8 @@
 .page { min-height: 100vh; background: var(--bg-grad); padding-bottom: 180rpx; }
-.hero { width: 100%; height: 520rpx; background: var(--surface-2); }
+.hero { width: 100%; height: 520rpx; background: var(--surface-2); position: relative; }
 .hero__img { width: 100%; height: 100%; display: block; }
 .hero__ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 120rpx; }
+.hero__gif { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
 
 .name { font-size: 48rpx; font-weight: 700; color: var(--text); letter-spacing: 1rpx; }