feat: refresh home and shop pages

src/pages/index/index.scss

@@ -24,8 +24,8 @@
 .search-inner {
   display: flex;
   align-items: center;
-  background: #f8f9fa;
+  background: var(--bg-input);
-  border: 1px dashed rgba(0, 0, 0, 0.06);
+  border: 1rpx solid var(--border);
   border-radius: 40px;
   padding: 16px 24px;
 }
@@ -58,7 +58,7 @@
 .search-result-hint {
   margin-top: 16px;
   padding-top: 16px;
-  border-top: 2px dashed var(--line-star);
+  border-top: 1rpx solid var(--border);
 }
 
 .hint-text {
@@ -141,7 +141,7 @@
   position: absolute;
   top: 16px;
   right: 16px;
-  background: rgba(255, 154, 158, 0.9);
+  background: var(--accent-primary);
   color: #ffffff;
   font-size: 20px;
   padding: 4px 16px;
@@ -206,7 +206,7 @@
 .category-price {
   font-size: 30px;
   font-weight: 700;
-  color: var(--accent-pink);
+  color: var(--accent-primary);
   margin-top: 8px;
 }
 
@@ -239,5 +239,5 @@
 
 /* 底部安全区 */
 .safe-bottom-placeholder {
-  height: 160px;
+  height: 200px;
 }

src/pages/index/index.tsx

@@ -59,8 +59,7 @@ export default function Index() {
         </View>
 
         {/* 搜索框 */}
-        <View className='search-card dashed-card'>
+        <View className='search-card surface-card'>
-          <View className='star-badge' />
           <View className='search-inner'>
             <Image className='search-icon-img' src={assetUrl('/icon/搜索.svg')} mode='aspectFit' />
             <Input
@@ -88,8 +87,8 @@ export default function Index() {
           <Text className='section-title'>定制成品展示</Text>
           <Swiper
             className='showcase-swiper'
-            indicatorColor='#e0e0e0'
+            indicatorColor='#e0d5c8'
-            indicatorActiveColor='#ff9a9e'
+            indicatorActiveColor='#d96c6a'
             circular
             autoplay
             interval={3000}
@@ -100,8 +99,7 @@ export default function Index() {
           >
             {SHOWCASE_LIST.map((item, idx) => (
               <SwiperItem key={idx} className='showcase-swiper-item'>
-                <View className='showcase-swiper-card dashed-card'>
+                <View className='showcase-swiper-card surface-card'>
-                  <View className='star-badge' />
                   <View className='showcase-image-wrapper'>
                     <Image className='showcase-real-img' src={item.image} mode='aspectFill' />
                   </View>
@@ -125,10 +123,9 @@ export default function Index() {
             {filteredCategories.map((cat) => (
                 <View
                   key={cat.id}
-                  className='category-item dashed-card'
+                  className='category-item surface-card'
                   onTap={() => navigateToProduct(cat.id)}
                 >
-                  <View className='star-badge' />
                   <View className='category-img-wrapper'>
                     <Image
                       className='category-img-real'
@@ -143,7 +140,7 @@ export default function Index() {
             ))}
           </View>
           {filteredCategories.length === 0 && (
-            <View className='empty-category dashed-card'>
+            <View className='empty-category surface-card'>
               <Image className='empty-icon-img' src={assetUrl('/icon/搜索.svg')} mode='aspectFit' />
               <Text className='empty-text'>未找到匹配的品类</Text>
               <Text className='empty-sub'>尝试搜索“笔记本”、“杯垫”等</Text>

src/pages/shop/index.scss

@@ -77,7 +77,7 @@
 .shop-card-price {
   font-size: 30rpx;
   font-weight: 700;
-  color: #ff9a9e;
+  color: var(--accent-primary);
   margin-top: 10rpx;
   display: block;
 }

src/pages/shop/index.tsx

@@ -26,35 +26,39 @@ export default function ShopPage() {
         </View>
 
         <View className="shop-grid">
-          {PRODUCTS.map(product => (
+          {PRODUCTS.map(product => {
-            <View
+            const tone = product.tone || [28, 22, 18]
-              key={product.id}
+            const imageSrc = product.images[0] || product.iconImg || ''
-              className="shop-card"
+            return (
-              onTap={() => openDetail(product.id)}
-            >
-              <View className="shop-card-img-wrap">
-                <Image
-                  className="shop-card-img"
-                  src={product.images?.[0] || product.iconImg || ''}
-                  mode="aspectFill"
-                  lazyLoad
-                />
-              </View>
               <View
-                className="shop-card-info"
+                key={product.id}
-                style={{
+                className="shop-card"
-                  backgroundColor: `rgba(${product.tone?.[0] || 28}, ${product.tone?.[1] || 22}, ${product.tone?.[2] || 18}, 0.92)`
+                onTap={() => openDetail(product.id)}
-                }}
               >
-                <Text className="shop-card-name">{product.name}</Text>
+                <View className="shop-card-img-wrap">
-                <Text className="shop-card-price">¥{product.price}</Text>
+                  <Image
+                    className="shop-card-img"
+                    src={imageSrc}
+                    mode="aspectFill"
+                    lazyLoad
+                  />
+                </View>
+                <View
+                  className="shop-card-info"
+                  style={{
+                    backgroundColor: `rgba(${tone[0]}, ${tone[1]}, ${tone[2]}, 0.92)`
+                  }}
+                >
+                  <Text className="shop-card-name">{product.name}</Text>
+                  <Text className="shop-card-price">¥{product.price}</Text>
+                </View>
               </View>
-            </View>
+            )
-          ))}
+          })}
         </View>
 
         {/* TabBar spacer so list isn't obscured */}
-        <View style={{ height: '160px' }} />
+        <View style={{ height: '200px' }} />
       </View>
     </View>
   )