feat: refresh product and customization flows

src/pages/diy/index.tsx

@@ -25,22 +25,23 @@ export default function DIYPage() {
   const [hasOverlap, setHasOverlap] = useState(false)
 
   useEffect(() => {
-    const params = Taro.getCurrentInstance().router?.params
-    const source = params?.source
-    const productId = params?.productId || params?.category
+    const router = Taro.getCurrentInstance().router
+    const params = router ? router.params : undefined
+    const source = params ? params.source : undefined
+    const productId = (params && params.productId) || (params && params.category)
 
     if (source === 'product' && productId) {
       const product = getProductById(productId)
       if (product) {
         setCategory(product)
-        setQuantity(Number(params?.quantity) || 1)
+        setQuantity(Number(params ? params.quantity : undefined) || 1)
         const newDesign: DesignItem = {
           id: 'DSG' + Date.now(),
           productId: product.id,
           productName: product.name,
           productIcon: product.icon,
           unitPrice: product.price,
-          count: Number(params?.quantity) || 1,
+          count: Number(params ? params.quantity : undefined) || 1,
           status: 'designing',
           createdAt: new Date().toISOString().slice(0, 10)
         }
@@ -51,7 +52,7 @@ export default function DIYPage() {
       return
     }
 
-    if (source === 'designList' && params?.designId) {
+    if (source === 'designList' && params && params.designId) {
       const dId = params.designId
       const list = getDesignList()
       const design = list.find(d => d.id === dId)
@@ -60,16 +61,16 @@ export default function DIYPage() {
         setQuantity(design.count)
         const product = getProductById(design.productId)
         if (product) setCategory(product)
-        if (design.designData?.stickers) {
+        if (design.designData ? design.designData.stickers : undefined) {
           setStickers(design.designData.stickers)
-        } else if (design.designData?.imageSrc) {
+        } else if (design.designData ? design.designData.imageSrc : undefined) {
           // 兼容旧版数据
           const s: StickerItem = {
             id: 'legacy_' + Date.now(),
             src: design.designData.imageSrc,
-            x: design.designData.imagePos?.x || 0,
-            y: design.designData.imagePos?.y || 0,
-            scale: design.designData.imagePos?.scale || 1,
+            x: design.designData.imagePos ? design.designData.imagePos.x || 0 : 0,
+            y: design.designData.imagePos ? design.designData.imagePos.y || 0 : 0,
+            scale: design.designData.imagePos ? design.designData.imagePos.scale || 1 : 1,
             width: 200,
             height: 200,
             isOverlapping: false
@@ -255,6 +256,9 @@ export default function DIYPage() {
     Taro.navigateTo({ url: `/pages/checkout/index?designId=${designId}` })
   }
 
+  const activeSticker = activeStickerId ? stickers.find(s => s.id === activeStickerId) : undefined
+  const activeScale = activeSticker ? activeSticker.scale : 1
+
   if (!category) {
     return (
       <View className={`theme-${resolvedTheme}`}>
@@ -271,8 +275,7 @@ export default function DIYPage() {
       <ThemedPageMeta />
       <View className='diy-page'>
 
-        <View className='page-header dashed-card mt-20' style={{ marginTop: `${safe.headerPaddingTop}px` }}>
-          <View className='star-badge' />
+        <View className='page-header surface-card mt-20' style={{ marginTop: `${safe.headerPaddingTop}px` }}>
           <View className='flex-between' style={{ width: '100%' }}>
             <Text className='back-btn' onTap={goBack}>←</Text>
             <Text className='page-title'>设计工作台</Text>
@@ -281,8 +284,7 @@ export default function DIYPage() {
         </View>
 
         {/* 画布区域 — catchtouchmove 阻止事件冒泡导致页面滚动 */}
-        <View className='canvas-wrapper dashed-card mt-20' catchMove>
-          <View className='star-badge' />
+        <View className='canvas-wrapper surface-card mt-20' catchMove>
           <View className='canvas-area' style={getMaskStyle()}>
             {stickers.map(s => (
               <Image
@@ -308,8 +310,7 @@ export default function DIYPage() {
         </View>
 
         {/* 贴纸列表与控制 */}
-        <View className='sticker-panel dashed-card mt-20'>
-          <View className='star-badge' />
+        <View className='sticker-panel surface-card mt-20'>
           <Text className='section-title'>贴纸</Text>
           <View className='sticker-list'>
             {stickers.map(s => (
@@ -330,15 +331,12 @@ export default function DIYPage() {
 
         {/* 控制工具栏 */}
         {activeStickerId && (
-          <View className='toolbar dashed-card mt-20'>
-            <View className='star-badge' />
+          <View className='toolbar surface-card mt-20'>
             <View className='tool-row'>
               <Text className='tool-label'>缩放</Text>
               <View className='flex-center' style={{ gap: '20px' }}>
                 <View className='tool-btn' onTap={() => handleScale(activeStickerId, -0.1)}>－</View>
-                <Text className='tool-value'>
-                  {Math.round((stickers.find(s => s.id === activeStickerId)?.scale || 1) * 100)}%
-                </Text>
+                <Text className='tool-value'>{Math.round(activeScale * 100)}%</Text>
                 <View className='tool-btn' onTap={() => handleScale(activeStickerId, 0.1)}>＋</View>
               </View>
             </View>
@@ -360,11 +358,11 @@ export default function DIYPage() {
         </View>
 
         {/* 底部操作按钮 */}
-        <View className='action-btns mt-20'>
-          <View className='btn-gradient' onTap={() => setPreviewMode(true)}>
+        <View className='action-bar'>
+          <View className='btn-primary' onTap={() => setPreviewMode(true)}>
             <Text>预览效果</Text>
           </View>
-          <View className='btn-outline' onTap={addSticker}>
+          <View className='btn-secondary' onTap={addSticker}>
             <Text>添加贴纸</Text>
           </View>
         </View>
@@ -372,8 +370,7 @@ export default function DIYPage() {
         {/* 预览弹层 */}
         {previewMode && (
           <View className='preview-overlay'>
-            <View className='preview-card dashed-card'>
-              <View className='star-badge' />
+            <View className='preview-card surface-card'>
               <Text className='preview-title'>确认效果</Text>
               <View className='preview-canvas' style={getMaskStyle()}>
                 {stickers.map(s => (
@@ -396,10 +393,10 @@ export default function DIYPage() {
                 {hasOverlap && <Text className='overlap-hint'>贴纸有重叠，不可提交</Text>}
               </View>
               <View className='preview-actions'>
-                <View className='btn-outline' onTap={() => setPreviewMode(false)}>
+                <View className='btn-secondary' onTap={() => setPreviewMode(false)}>
                   <Text>返回修改</Text>
                 </View>
-                <View className={`btn-gradient ${hasOverlap ? 'disabled' : ''}`} onTap={handleComplete}>
+                <View className={`btn-primary ${hasOverlap ? 'disabled' : ''}`} onTap={handleComplete}>
                   <Text>确认完成</Text>
                 </View>
               </View>
@@ -407,7 +404,7 @@ export default function DIYPage() {
           </View>
         )}
 
-        <View style={{ height: '40px' }} />
+        <View className='safe-bottom-placeholder' />
       </View>
     </View>
   )