feat: refresh product and customization flows

src/pages/shop/detail/index.scss

@@ -87,7 +87,7 @@
 .shop-hero-price {
   font-size: 44rpx;
   font-weight: 700;
-  color: #ff9a9e;
+  color: var(--accent-primary);
 }
 
 .shop-hero-original {
@@ -146,7 +146,7 @@
 .shop-band-price {
   font-size: 48rpx;
   font-weight: 700;
-  color: #ff9a9e;
+  color: var(--accent-primary);
 }
 
 .shop-band-original {
@@ -183,7 +183,7 @@
   bottom: 6rpx;
   width: 6rpx;
   border-radius: 4rpx;
-  background: linear-gradient(180deg, #ff9a9e, #fecfef);
+  background: linear-gradient(180deg, var(--accent-primary), var(--accent-primary-soft));
 }
 
 .shop-section-text {
@@ -212,15 +212,15 @@
   border-radius: 40rpx;
   font-size: 22rpx;
   font-weight: 500;
-  background: rgba(255, 154, 158, 0.12);
-  border: 1rpx solid rgba(255, 154, 158, 0.2);
+  background: var(--accent-primary-soft);
+  border: 1rpx solid var(--accent-primary);
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
 
 .shop-tag-text {
-  color: #ff9a9e;
+  color: var(--accent-primary);
 }
 
 /* --- Spec Table --- */
@@ -272,7 +272,7 @@
   backdrop-filter: blur(16rpx) saturate(1.4);
   -webkit-backdrop-filter: blur(16rpx) saturate(1.4);
   border: 1rpx solid rgba(255,255,255,0.12);
-  box-shadow: 0 2rpx 16rpx rgba(0,0,0,0.25);
+  box-shadow: var(--shadow-card);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -303,6 +303,7 @@
   gap: 24rpx;
   backdrop-filter: blur(16rpx) saturate(1.2);
   -webkit-backdrop-filter: blur(16rpx) saturate(1.2);
+  box-shadow: var(--shadow-card);
   transition: background-color 0.4s ease;
 }
 
@@ -315,7 +316,7 @@
 .shop-cta-price {
   font-size: 40rpx;
   font-weight: 700;
-  color: #ff9a9e;
+  color: var(--accent-primary);
 }
 
 .shop-cta-original {
@@ -327,8 +328,8 @@
 .shop-cta-btn {
   flex: 1;
   max-width: 260rpx;
-  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%);
-  color: #5c3a3a;
+  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-primary-strong) 99%);
+  color: #fff;
   border-radius: 50rpx;
   padding: 24rpx 48rpx;
   font-size: 30rpx;
@@ -337,6 +338,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  box-shadow: var(--shadow-card);
 }
 
 .shop-cta-btn-text {

src/pages/shop/detail/index.tsx

@@ -21,8 +21,9 @@ export default function ShopDetailPage() {
   // 顶部为沉浸式商品图，状态栏始终使用白字。
   useStatusBar(resolvedTheme, { mode: 'light' })
 
-  const routerParams = Taro.getCurrentInstance().router?.params
-  const productId = routerParams?.id || ''
+  const routerParams = Taro.getCurrentInstance().router
+  const routerParamsValues = routerParams ? routerParams.params : undefined
+  const productId = routerParamsValues ? routerParamsValues.id : ''
   const product: ProductCategory | undefined = PRODUCTS.find(p => p.id === productId)
 
   useEffect(() => {
@@ -35,7 +36,7 @@ export default function ShopDetailPage() {
   }, [])
 
   const handleScroll = useCallback((e: any) => {
-    const st = e.detail?.scrollTop ?? 0
+    const st = (e.detail && e.detail.scrollTop) || 0
     const total = winHeight * 1.2
     const p = clamp(st / total, 0, 1)
     setProgress(p)
@@ -103,7 +104,7 @@ export default function ShopDetailPage() {
     }
   }, [progress])
 
-  const tone = useMemo(() => product?.tone || [28, 22, 18], [product])
+  const tone = useMemo(() => (product ? product.tone : [28, 22, 18]), [product])
 
   if (!product) {
     return (
@@ -129,7 +130,7 @@ export default function ShopDetailPage() {
         >
           <Image
             className="shop-hero-img"
-            src={product.images?.[0] || product.iconImg || ''}
+            src={(product.images && product.images[0]) || product.iconImg || ''}
             mode="aspectFill"
             style={{
               width: '100%',