feat: refresh product and customization flows

src/pages/diy/stickerEdit/index.tsx

@@ -45,13 +45,15 @@ function TouchSlider({ value, min, max, step = 1, onChange, format }: SliderProp
 
   const handleTouchStart = (e: any) => {
     setDragging(true)
-    const x = e.touches?.[0]?.clientX ?? 0
+    const touch = e.touches && e.touches[0]
+    const x = touch ? touch.clientX : 0
     onChange(computedFromClientX(x))
   }
 
   const handleTouchMove = (e: any) => {
     if (!dragging) return
-    const x = e.touches?.[0]?.clientX ?? 0
+    const touch = e.touches && e.touches[0]
+    const x = touch ? touch.clientX : 0
     onChange(computedFromClientX(x))
   }
 
@@ -106,14 +108,15 @@ export default function StickerEditPage() {
       query.select('#editCanvas')
         .fields({ node: true, size: true })
         .exec((res: any) => {
-          const canvas = res?.[0]?.node
+          const resFirst = res && res[0]
+          const canvas = resFirst ? resFirst.node : undefined
           if (!canvas) {
             setTimeout(() => initCanvas(st), 300)
             return
           }
           const ctx = canvas.getContext('2d')
-          let cw = res[0]?.width || 300
-          let ch = res[0]?.height || 400
+          let cw = (res[0] && res[0].width) || 300
+          let ch = (res[0] && res[0].height) || 400
           if (cw <= 0) cw = 300
           if (ch <= 0) ch = 400
           const dpr = Taro.getSystemInfoSync().pixelRatio || 1
@@ -130,20 +133,21 @@ export default function StickerEditPage() {
   }, [canvasReady])
 
   useEffect(() => {
-    const params = Taro.getCurrentInstance().router?.params
-    const dId = params?.designId as string
-    const sId = params?.stickerId as string
+    const router = Taro.getCurrentInstance().router
+    const params = router ? router.params : undefined
+    const dId = params ? params.designId : ''
+    const sId = params ? params.stickerId : ''
     setDesignId(dId)
     setStickerId(sId)
 
     const list = getDesignList()
     const design = list.find(d => d.id === dId)
-    const st = design?.designData?.stickers?.find(s => s.id === sId)
+    const st = design && design.designData && design.designData.stickers ? design.designData.stickers.find(s => s.id === sId) : undefined
     if (st) {
       setSticker(st)
-      setBrightness(st.edits?.brightness || 0)
-      setHue(st.edits?.hue || 0)
-      setContrast(st.edits?.contrast || 0)
+      setBrightness((st.edits && st.edits.brightness) || 0)
+      setHue((st.edits && st.edits.hue) || 0)
+      setContrast((st.edits && st.edits.contrast) || 0)
       initCanvas(st)
     }
   }, [initCanvas])
@@ -171,9 +175,9 @@ export default function StickerEditPage() {
       const y = (ch - h) / 2
 
       // 应用滤镜（小程序 Canvas 2D 支持 filter 属性 2.16.0+）
-      const b = opts?.brightness ?? brightness
-      const hVal = opts?.hue ?? hue
-      const c = opts?.contrast ?? contrast
+      const b = opts ? opts.brightness : brightness
+      const hVal = opts ? opts.hue : hue
+      const c = opts ? opts.contrast : contrast
       if (b !== 0 || hVal !== 0 || c !== 0) {
         ctx.filter = `brightness(${100 + b}%) hue-rotate(${hVal}deg) contrast(${100 + c}%)`
       } else {
@@ -217,7 +221,7 @@ export default function StickerEditPage() {
         const dList = getDesignList()
         const dIdx = dList.findIndex(d => d.id === designId)
         if (dIdx === -1) { setLoading(false); return }
-        const stickers = dList[dIdx].designData?.stickers || []
+        const stickers = dList[dIdx].designData ? dList[dIdx].designData.stickers || [] : []
         const sIdx = stickers.findIndex(s => s.id === stickerId)
         if (sIdx === -1) { setLoading(false); return }
         stickers[sIdx] = {
@@ -325,7 +329,7 @@ export default function StickerEditPage() {
         </View>
 
         {/* 快速操作 */}
-        <View className='edit-tools dashed-card mt-20'>
+        <View className='edit-tools surface-card mt-20'>
           <View className='edit-row'>
             <Text className='edit-label'>快速操作</Text>
             <View className='edit-quick-actions'>
@@ -411,6 +415,17 @@ export default function StickerEditPage() {
 
         <View style={{ flex: 1 }} />
 
+        <View className='action-bar edit-footer'>
+          <View className='btn-secondary' onTap={() => Taro.navigateBack()}>
+            <Text>取消</Text>
+          </View>
+          <View className='btn-primary' onTap={handleSave}>
+            <Text>保存</Text>
+          </View>
+        </View>
+
+        <View className='safe-bottom-placeholder' />
+
         {loading && (
           <View className='edit-loading'>
             <Text className='edit-loading-text'>处理中…</Text>