修改动画效果（失败T_T）

商品页动画。

src/pages/shop/index.tsx

@@ -1,8 +1,11 @@
-import { View, Text, Image } from '@tarojs/components'
+import { View, Text, Image, ShareElement, ScrollView, GridView } from '@tarojs/components'
 import Taro from '@tarojs/taro'
+import { useEffect } from 'react'
 import { useThemeContext } from '../../context/ThemeContext'
 import { useSafeArea } from '../../hooks/useSafeArea'
 import { useStatusBar } from '../../hooks/useStatusBar'
+import { registerSharedElementRoute } from '../../utils/sharedElementRoute'
+import CustomTabBar from '../../custom-tab-bar'
 import './index.scss'
 import { PRODUCTS } from '../../utils/productConfig'
 
@@ -11,19 +14,36 @@ export default function ShopPage() {
   const safe = useSafeArea()
   useStatusBar(resolvedTheme)
 
+  useEffect(() => {
+    registerSharedElementRoute()
+  }, [])
+
   const openDetail = (productId: string) => {
-    Taro.navigateTo({ url: `/pages/shop/detail/index?id=${productId}` })
+    // The initial app page may be WebView, so ensure registration here too.
+    registerSharedElementRoute()
+    Taro.navigateTo({
+      url: `/pages/shop/detail/index?id=${productId}`,
+      // @ts-ignore - routeType is a Skyline custom route option
+      routeType: 'sharedElementRoute'
+    } as any)
   }
 
   return (
     <View className={`shop-page theme-${resolvedTheme}`}>
-      <View className="shop-list">
+      <ScrollView type="custom" scrollY className="shop-scroll">
         <View className="shop-header" style={{ paddingTop: `${safe.headerPaddingTop}px` }}>
           <Text className="shop-header-title">智绘精选</Text>
           <Text className="shop-header-sub">激光微雕定制好物</Text>
         </View>
 
-        <View className="shop-grid">
+        <GridView
+          type="aligned"
+          crossAxisCount={2}
+          mainAxisGap={10}
+          crossAxisGap={10}
+          padding={[0, 12, 12, 12]}
+          className="shop-grid"
+        >
           {PRODUCTS.map(product => (
             <View
               key={product.id}
@@ -31,12 +51,17 @@ export default function ShopPage() {
               onTap={() => openDetail(product.id)}
             >
               <View className="shop-card-img-wrap">
-                <Image
-                  className="shop-card-img"
-                  src={product.images?.[0] || product.iconImg || ''}
-                  mode="aspectFill"
-                  lazyLoad
-                />
+                <ShareElement
+                  mapkey={`product-${product.id}`}
+                  duration={300}
+                  className='shop-card-share'
+                >
+                  <Image
+                    className="shop-card-img"
+                    src={product.images?.[0] || product.iconImg || ''}
+                    mode="aspectFill"
+                  />
+                </ShareElement>
               </View>
               <View
                 className="shop-card-info"
@@ -49,11 +74,13 @@ export default function ShopPage() {
               </View>
             </View>
           ))}
-        </View>
+        </GridView>
 
-        {/* TabBar spacer so list isn't obscured */}
+        {/* TabBar spacer */}
         <View style={{ height: '160px' }} />
-      </View>
+      </ScrollView>
+
+      <CustomTabBar />
     </View>
   )
 }