fix: unify product detail back button with top mask style

src/app.scss

@@ -201,10 +201,27 @@ page {
   padding-top: calc(env(safe-area-inset-top, 20px) + 96rpx);
 }
 
-/* 返回按钮不单独占状态栏空间——父级 .page-header / .edit-header 已整体下移 */
+/* 返回按钮统一为 TopMask 同款圆形毛玻璃 */
 .back-btn,
-.edit-back {
-  display: inline-block;
+.edit-back,
+.shop-back-btn {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  border-radius: 50% !important;
+  background: rgba(255, 255, 255, 0.55) !important;
+  backdrop-filter: blur(32px) saturate(1.2) !important;
+  -webkit-backdrop-filter: blur(32px) saturate(1.2) !important;
+  border: 1rpx solid rgba(255, 255, 255, 0.55) !important;
+  box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.18), 0 4rpx 12rpx rgba(0, 0, 0, 0.08) !important;
+}
+
+.theme-dark .back-btn,
+.theme-dark .edit-back,
+.theme-dark .shop-back-btn {
+  background: rgba(25, 25, 25, 0.55) !important;
+  border-color: rgba(255, 255, 255, 0.14) !important;
+  box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.5), 0 4rpx 12rpx rgba(0, 0, 0, 0.3) !important;
 }
 
 /* ==========================================================

src/components/ScrollTopMask/index.scss

@@ -26,7 +26,6 @@
   position: absolute;
   left: 0;
   right: 0;
-  bottom: 38%;
   text-align: center;
   font-size: 36rpx;
   font-weight: 600;

src/components/ScrollTopMask/index.tsx

@@ -111,6 +111,8 @@ export default function ScrollTopMask({ title, targetSelector = '.page-header',
       <Text
         className='scroll-top-title'
         style={{
+          top: `calc(${safe.menuButtonTop}px + 40rpx)`,
+          transform: 'translateY(-50%)',
           opacity: Math.max(0, Math.min(1, (topMaskOpacity - 0.5) / 0.5))
         }}
       >

src/pages/designList/index.scss

@@ -5,28 +5,23 @@
 
 .page-header.design-header {
   display: flex;
-  align-items: center;
+  align-items: flex-end;
   min-height: 88rpx;
-  padding-bottom: 16rpx;
-}
-
-.header-spacer {
-  width: 88rpx;
-  height: 88rpx;
-  flex-shrink: 0;
+  padding-bottom: 32rpx;
 }
 
 .header-title {
   flex: 1;
-  text-align: center;
-  font-size: 36rpx;
-  font-weight: 700;
+  font-size: 56rpx;
+  font-weight: 800;
+  line-height: 1.15;
+  letter-spacing: 0;
   color: var(--text-primary);
 }
 
 .header-manage {
   width: 88rpx;
-  text-align: center;
+  text-align: right;
   font-size: 28rpx;
   font-weight: 500;
   color: var(--accent-secondary);

src/pages/designList/index.tsx

@@ -125,7 +125,6 @@ export default function DesignListPage() {
       <LoginGuard>
         <View className='design-page'>
           <View className='page-header design-header' style={{ paddingTop: `${safe.statusBarHeight + 12}px` }}>
-            <View className='header-spacer' />
             <Text className='header-title'>我的设计清单</Text>
             <View className='header-manage' onTap={handleManage}>
               <Text>{managing ? '完成' : '管理'}</Text>

src/pages/diy/index.tsx

@@ -279,7 +279,7 @@ export default function DIYPage() {
       <ScrollTopMask title="设计工作台" targetSelector=".page-header.surface-card" showBack />
       <View className='diy-page'>
 
-        <View className='page-header surface-card mt-20' style={{ paddingTop: `${safe.statusBarHeight + 12}px` }}>
+        <View className='page-header surface-card' style={{ paddingTop: `${safe.statusBarHeight + 12}px` }}>
           <View className='flex-between' style={{ width: '100%' }}>
             <Text className='back-btn' onTap={goBack}>←</Text>
             <Text className='page-title'>设计工作台</Text>

src/pages/orderDetail/index.scss

@@ -481,8 +481,3 @@
   font-weight: 600;
   color: var(--accent-secondary);
 }
-
-/* --- 底部留白 --- */
-.page-bottom-spacer {
-  height: 48rpx;
-}

src/pages/orderDetail/index.tsx

@@ -56,7 +56,7 @@ export default function OrderDetailPage() {
     return (
       <View className={`theme-${resolvedTheme}`}>
         <ThemedPageMeta />
-      <ScrollTopMask title="订单详情" targetSelector=".page-header" showBack />
+        <ScrollTopMask title="订单详情" targetSelector=".page-header" showBack />
         <View className='order-detail-page'>
           <View className='page-header' style={{ paddingTop: `${safe.statusBarHeight + 12}px` }}>
             <View className='page-header-inner'>
@@ -75,7 +75,7 @@ export default function OrderDetailPage() {
   return (
       <View className={`theme-${resolvedTheme}`}>
         <ThemedPageMeta />
-      <ScrollTopMask title="订单详情" targetSelector=".page-header" showBack />
+        <ScrollTopMask title="订单详情" targetSelector=".page-header" showBack />
         <View className='order-detail-page'>
 
         <View className='page-header' style={{ paddingTop: `${safe.statusBarHeight + 12}px` }}>
@@ -209,8 +209,6 @@ export default function OrderDetailPage() {
           </View>
         </View>
 
-        <View className='page-bottom-spacer' />
-
         {/* 地址选择底部弹窗 */}
         {showAddrPicker && (
           <View className='modal-overlay' style={{ alignItems: 'flex-end', justifyContent: 'flex-end' }}>

src/pages/orders/index.scss

@@ -8,15 +8,16 @@
 .orders-page .page-header {
   display: flex;
   align-items: flex-end;
+  padding-top: 0;
   padding-bottom: 32rpx;
   margin: 0;
 }
 
 .orders-page .page-title {
   display: block;
-  font-size: 44rpx;
-  font-weight: 700;
-  line-height: 1.2;
+  font-size: 56rpx;
+  font-weight: 800;
+  line-height: 1.15;
   color: var(--text-primary);
   letter-spacing: 0;
 }

src/pages/product/index.scss

@@ -19,8 +19,8 @@
 }
 
 .back-btn {
-  width: 88rpx;
-  height: 88rpx;
+  width: 80rpx;
+  height: 80rpx;
   flex: 0 0 auto;
   border-radius: 50%;
   background: var(--bg-card);
@@ -36,7 +36,8 @@
 }
 
 .back-arrow {
-  font-size: 36rpx;
+  font-size: 44rpx;
+  font-weight: 600;
   line-height: 1;
   color: var(--text-primary);
 }
@@ -53,7 +54,7 @@
 }
 
 .nav-placeholder {
-  width: 88rpx;
+  width: 80rpx;
   flex: 0 0 auto;
 }
 

src/pages/product/index.tsx

@@ -28,7 +28,7 @@ export default function ProductPage() {
     return (
       <View className={`theme-${resolvedTheme}`}>
         <ThemedPageMeta />
-      <ScrollTopMask title="商品详情" targetSelector=".page-header" showBack />
+        <ScrollTopMask title="商品详情" targetSelector=".page-header" showBack />
         <View className='product-page'>
           <View className='page-header' style={{ marginTop: `${safe.statusBarHeight + 12}px` }}>
             <View className='page-header-inner'>
@@ -173,9 +173,6 @@ export default function ProductPage() {
           </View>
         </BottomActionBar>
 
-        {/* 安全区占位（防止内容被 action-bar 遮挡） */}
-        <View className='safe-bottom-placeholder' />
-
         {/* 数量选择弹窗 */}
         {showModal && (
           <View className='modal-overlay'>

src/pages/service/index.scss

@@ -46,7 +46,7 @@
   flex: 1;
   min-width: 0;
   text-align: center;
-  font-size: 44rpx;
+  font-size: 34rpx;
   font-weight: 700;
   line-height: 1.2;
   color: var(--text-primary);

src/pages/service/index.tsx

@@ -95,7 +95,6 @@ export default function ServicePage() {
           </View>
         </View>
 
-        <View style={{ height: '80rpx' }} />
       </View>
     </View>
   )

src/pages/settings/index.tsx

@@ -142,6 +142,7 @@ export default function SettingsPage() {
             </View>
           )}
 
+          {/* 底部留白：短内容页，为退出登录按钮与底部保留呼吸空间 */}
           <View style={{ height: '80rpx' }} />
 
           {/* 编辑弹窗 */}

src/pages/shop/detail/index.scss

@@ -281,10 +281,10 @@
 .shop-back-btn {
   position: fixed;
   top: calc(env(safe-area-inset-top, 20px) + 20rpx);
-  left: 24rpx;
+  left: 30rpx;
   z-index: 50;
-  width: 88rpx;
-  height: 88rpx;
+  width: 80rpx;
+  height: 80rpx;
   border-radius: 50%;
   background: rgba(40, 35, 32, 0.5);
   backdrop-filter: blur(16px) saturate(1.4);
@@ -302,9 +302,10 @@
 }
 
 .shop-back-arrow {
-  font-size: 36rpx;
-  color: var(--text-primary);
+  font-size: 44rpx;
+  font-weight: 600;
   line-height: 1;
+  color: var(--text-primary);
 }
 
 /* --- Bottom Action Bar — 毛玻璃由 BottomActionBar 提供，本地只补充价格摘要 --- */

src/pages/shop/detail/index.tsx

@@ -277,7 +277,7 @@ export default function ShopDetailPage() {
       <View
         className="shop-back-btn"
         onTap={() => Taro.navigateBack()}
-        style={{ top: `${safe.backBtnPaddingTop}px`, opacity: heroStyles.backBtnOpacity }}
+        style={{ top: `${safe.menuButtonTop}px`, opacity: heroStyles.backBtnOpacity }}
       >
         <Text className="shop-back-arrow">←</Text>
       </View>

src/pages/shop/index.scss

@@ -8,15 +8,15 @@
 }
 
 .shop-header {
-  text-align: center;
-  padding: 48rpx 0 32rpx;
+  padding-bottom: 32rpx;
 }
 
 .shop-header-title {
-  font-size: 44rpx;
-  font-weight: 700;
+  font-size: 56rpx;
+  font-weight: 800;
   color: var(--text-primary);
   letter-spacing: 0;
+  line-height: 1.15;
   display: block;
 }
 

src/pages/userDatabase/index.scss

@@ -94,11 +94,12 @@
 }
 
 .udb-header .page-title {
-  text-align: center;
-  font-size: 44rpx;
-  font-weight: 700;
+  text-align: left;
+  font-size: 56rpx;
+  font-weight: 800;
   color: var(--text-primary);
   letter-spacing: 0;
+  line-height: 1.15;
 }
 
 /* 工具栏 */