修改动画效果（失败T_T）

商品页动画。

src/pages/shop/detail/index.tsx

@@ -1,4 +1,4 @@
-import { View, Text, Image, ScrollView } from '@tarojs/components'
+import { View, Text, Image, ScrollView, ShareElement } from '@tarojs/components'
 import Taro from '@tarojs/taro'
 import { useState, useEffect, useCallback, useMemo } from 'react'
 import './index.scss'
@@ -7,6 +7,7 @@ import { ProductCategory } from '../../../types'
 import { useSafeArea } from '../../../hooks/useSafeArea'
 import { useStatusBar } from '../../../hooks/useStatusBar'
 import { useThemeContext } from '../../../context/ThemeContext'
+import CustomTabBar from '../../../custom-tab-bar'
 
 const clamp = (v: number, min: number, max: number) => Math.min(Math.max(v, min), max)
 const lerp = (a: number, b: number, t: number) => a + (b - a) * t
@@ -26,7 +27,7 @@ export default function ShopDetailPage() {
 
   useEffect(() => {
     try {
-      const info = Taro.getSystemInfoSync()
+      const info = Taro.getWindowInfo()
       setWinHeight(info.windowHeight)
     } catch (e) {
       // fallback to safe default
@@ -124,18 +125,31 @@ export default function ShopDetailPage() {
             transform: `translateY(${winHeight * heroStyles.translateY / 100}px)`
           }}
         >
-          <Image
-            className="shop-hero-img"
-            src={product.images?.[0] || product.iconImg || ''}
-            mode="aspectFill"
+          <ShareElement
+            mapkey={`product-${product.id}`}
+            duration={301}
+            className='shop-hero-share'
             style={{
               width: '100%',
               height: `${winHeight}px`,
               position: 'absolute',
-              top: `${-winHeight * heroStyles.topCrop / 100}px`,
+              top: 0,
               left: 0
             }}
-          />
+          >
+            <Image
+              className="shop-hero-img"
+              src={product.images?.[0] || product.iconImg || ''}
+              mode="aspectFill"
+              style={{
+                width: '100%',
+                height: '100%',
+                position: 'absolute',
+                top: `${-winHeight * heroStyles.topCrop / 100}px`,
+                left: 0
+              }}
+            />
+          </ShareElement>
         </View>
 
         {/* Bottom gradient overlay driven by product tone */}
@@ -164,6 +178,7 @@ export default function ShopDetailPage() {
       {/* Scrollable content sits above the fixed hero */}
       <ScrollView
         key={product.id}
+        type="custom"
         className="shop-scroll"
         scrollY
         scrollEventThrottle={16}
@@ -282,6 +297,9 @@ export default function ShopDetailPage() {
           <Text className="shop-cta-btn-text">立即定制</Text>
         </View>
       </View>
+
+      {/* Detail is not a tabBar page, so render the app navigation explicitly. */}
+      <CustomTabBar />
     </View>
   )
 }