feat: refresh product and customization flows

src/pages/diy/stickerEdit/index.scss

@@ -28,7 +28,7 @@
 
 .edit-save {
   font-size: 28px;
-  color: var(--accent-pink);
+  color: var(--accent-primary);
   font-weight: 600;
   width: 60px;
   text-align: right;
@@ -93,7 +93,7 @@
 .slider-fill {
   height: 100%;
   border-radius: 4px;
-  background: linear-gradient(90deg, #ff9a9e, #fecfef);
+  background: linear-gradient(90deg, var(--accent-primary), var(--accent-primary-soft));
   position: absolute;
   left: 0;
   top: 0;
@@ -104,7 +104,7 @@
   height: 32px;
   border-radius: 50%;
   background: #fff;
-  border: 4px solid var(--accent-pink);
+  border: 4px solid var(--accent-primary);
   position: absolute;
   top: 50%;
   transform: translate(-50%, -50%);
@@ -132,7 +132,7 @@
   font-weight: 500;
   background: var(--bg-input);
   color: var(--text-primary);
-  border: 2px dashed var(--line-star);
+  border: 1rpx solid var(--border);
   transition: all 0.2s;
 }
 
@@ -142,20 +142,14 @@
 }
 
 .quick-btn.active {
-  background: rgba(255, 154, 158, 0.12);
-  border-color: var(--accent-pink);
-  color: var(--accent-pink);
+  background: var(--accent-primary-soft);
+  border-color: var(--accent-primary);
+  color: var(--accent-primary);
 }
 
-/* 底部操作 */
-.edit-footer {
-  padding: 20px 0 calc(20px + env(safe-area-inset-bottom));
-  display: flex;
-  gap: 20px;
-}
-
-.edit-footer .btn-gradient,
-.edit-footer .btn-outline {
+/* 底部操作栏 — 毛玻璃规则由全局 .action-bar 提供 */
+.edit-footer .btn-primary,
+.edit-footer .btn-secondary {
   flex: 1;
   text-align: center;
   padding: 24px 0;

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>