From ba95037d05fcbc8d72ee11d17ebfbb432e9dd4af Mon Sep 17 00:00:00 2001
From: lhmin0604 <lhmin.0604@gmail.com>
Date: Tue, 15 Sep 2026 06:06:42 +0800
Subject: [PATCH] =?UTF-8?q?fix(checkout):=20=E8=AE=BE=E8=AE=A1=E6=95=88?=
 =?UTF-8?q?=E6=9E=9C=E7=A1=AE=E8=AE=A4=E9=A1=B5=E6=B6=88=E8=B4=B9=E8=B4=B4?=
 =?UTF-8?q?=E7=BA=B8=20edits=20=E6=BB=A4=E9=95=9C=20+=20=E6=8C=89=20zIndex?=
 =?UTF-8?q?=20=E6=8E=92=E5=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

与 DIY 工作台同一 stickerFilter 逻辑（diy-fix-workflow 问题5 的 R3 待办），
修复贴纸编辑保存后确认页预览与工作台图片不一致；
图层顺序改为按 zIndex（无 zIndex 按数组序兜底），与 WCD 打包规则一致。

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/pages/checkout/index.tsx | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/pages/checkout/index.tsx b/src/pages/checkout/index.tsx
index f434909..1986a1b 100644
--- a/src/pages/checkout/index.tsx
+++ b/src/pages/checkout/index.tsx
@@ -105,6 +105,27 @@ export default function CheckoutPage() {
 
   const hasStickers = design && design.designData && design.designData.stickers && design.designData.stickers.length > 0
   const hasLegacyImage = design && design.designData ? design.designData.imageSrc : undefined
+
+  // 预览消费贴纸 edits（亮度/色相/对比度 → CSS filter），与 DIY 工作台同一呈现逻辑
+  //（diy-fix-workflow 问题5 的 R3 待办：不消费会导致确认页图片与工作台不一致）
+  const stickerFilter = (s: { edits?: { brightness?: number; hue?: number; contrast?: number } }) => {
+    const ed = s.edits
+    if (!ed) return undefined
+    const b = ed.brightness || 0
+    const h = ed.hue || 0
+    const c = ed.contrast || 0
+    if (b === 0 && h === 0 && c === 0) return undefined
+    return `brightness(${100 + b}%) hue-rotate(${h}deg) contrast(${100 + c}%)`
+  }
+
+  // 图层顺序与 WCD 打包规则一致（按 zIndex，无 zIndex 按数组序兜底）
+  const previewStickers = hasStickers
+    ? design.designData!.stickers!
+        .map((s: any, i: number) => ({ s, z: typeof s.zIndex === 'number' ? s.zIndex : i }))
+        .sort((a, b) => a.z - b.z)
+        .map((it) => it.s)
+    : []
+
   const formatAddress = (region: string[] | undefined, detail: string) => {
     const regionText = region ? region.join(' ') : ''
     return regionText ? `${regionText} ${detail}` : detail
@@ -159,13 +180,14 @@ export default function CheckoutPage() {
         <View className='checkout-canvas surface-card'>
           <View className='canvas-area' style={maskStyle}>
             {hasStickers ? (
-              design.designData.stickers.map((s: any) => (
+              previewStickers.map((s: any) => (
                 <Image
                   key={s.id}
                   className='checkout-image'
                   src={s.src}
                   style={{
                     transform: `translate(${s.x}px, ${s.y}px) scale(${s.scale || 1})`,
+                    filter: stickerFilter(s),
                     width: s.width || 200,
                     height: s.height || 200
                   }}