feat: 全站视觉焕新与悬浮玻璃 TabBar 迁移

src/pages/index/index.tsx

@@ -11,12 +11,48 @@ import ThemedPageMeta from '../../components/ThemedPageMeta'
 
 // 成品展示配图（从 img 里取对应实物图）
 const SHOWCASE_LIST = [
-  { title: '毕业纪念笔记本', desc: '全班名字组成校徽', image: assetUrl('/img/book_small/The1.jpg') },
-  { title: '铜质杯垫', desc: '金属质感桌面艺术', image: assetUrl('/img/cup/The1.jpg') },
-  { title: '竹制笔盒', desc: '自然竹纹文房雅器', image: assetUrl('/img/penbox/The1.jpg') },
-  { title: '书本型灯', desc: '温暖光影点亮心意', image: assetUrl('/img/booklight/The1.jpg') },
-  { title: '情侣定制礼', desc: '两个人的名字交织', image: assetUrl('/img/book_big/The1.jpg') },
-  { title: '企业年会礼', desc: '员工名字组成Logo', image: assetUrl('/img/penbox/The2.jpg') }
+  {
+    title: '毕业纪念笔记本',
+    desc: '全班名字组成校徽',
+    priceText: '¥45 起',
+    categoryId: 'notebook-large',
+    image: assetUrl('/img/book_small/The1.jpg')
+  },
+  {
+    title: '铜质杯垫',
+    desc: '金属质感桌面艺术',
+    priceText: '¥25 起',
+    categoryId: 'coaster',
+    image: assetUrl('/img/cup/The1.jpg')
+  },
+  {
+    title: '竹制笔盒',
+    desc: '自然竹纹文房雅器',
+    priceText: '¥75 起',
+    categoryId: 'penbox',
+    image: assetUrl('/img/penbox/The1.jpg')
+  },
+  {
+    title: '书本型灯',
+    desc: '温暖光影点亮心意',
+    priceText: '¥45 起',
+    categoryId: 'booklamp',
+    image: assetUrl('/img/booklight/The1.jpg')
+  },
+  {
+    title: '情侣定制礼',
+    desc: '两个人的名字交织',
+    priceText: '¥45 起',
+    categoryId: 'notebook-large',
+    image: assetUrl('/img/book_big/The1.jpg')
+  },
+  {
+    title: '企业年会礼',
+    desc: '员工名字组成Logo',
+    priceText: '¥75 起',
+    categoryId: 'penbox',
+    image: assetUrl('/img/penbox/The2.jpg')
+  }
 ]
 
 // 品类对应的实物照片映射（首页卡片顶部大图）
@@ -38,6 +74,17 @@ export default function Index() {
     Taro.navigateTo({ url: `/pages/product/index?id=${categoryId}` })
   }
 
+  const navigateFromShowcase = (item: { categoryId?: string; title: string }) => {
+    if (item.categoryId) {
+      navigateToProduct(item.categoryId)
+      return
+    }
+    Taro.showToast({
+      title: `“${item.title}”定制通道即将开放`,
+      icon: 'none'
+    })
+  }
+
   const filteredCategories = searchKey.trim()
     ? CATEGORIES.filter(
         (c) => c.name.includes(searchKey) || c.desc.includes(searchKey)
@@ -53,62 +100,51 @@ export default function Index() {
       <ThemedPageMeta />
       <View className='index-page'>
 
-        {/* 顶部标题栏 */}
-        <View className='header-bar' style={{ paddingTop: `${safe.headerPaddingTop}px` }}>
-          <Text className='header-title'>智绘微刻</Text>
+        {/* 页头 */}
+        <View className='home-header' style={{ paddingTop: `${safe.headerPaddingTop}px` }}>
+          <Text className='home-title'>智绘微刻</Text>
         </View>
 
-        {/* 搜索框 */}
-        <View className='search-card surface-card'>
-          <View className='search-inner'>
-            <Image className='search-icon-img' src={assetUrl('/icon/搜索.svg')} mode='aspectFit' />
-            <Input
-              className='search-input'
-              type='text'
-              placeholder='搜索定制品类：笔记本、杯垫、书灯...'
-              value={searchKey}
-              onInput={handleSearch}
-              confirmType='search'
-            />
+        {/* 搜索 */}
+        <View className='searchbox'>
+          <Image className='search-icon-img' src={assetUrl('/icon/搜索.svg')} mode='aspectFit' />
+          <Input
+            className='search-input'
+            type='text'
+            placeholder='搜索定制品类：笔记本、杯垫、书灯...'
+            value={searchKey}
+            onInput={handleSearch}
+            confirmType='search'
+          />
+        </View>
+        {searchKey.trim() && (
+          <View className='search-result-hint'>
+            <Text className='hint-text'>
+              {filteredCategories.length > 0
+                ? `找到 ${filteredCategories.length} 个相关品类`
+                : '没有找到相关品类，试试看其他关键词'}
+            </Text>
           </View>
-          {searchKey.trim() && (
-            <View className='search-result-hint'>
-              <Text className='hint-text'>
-                {filteredCategories.length > 0
-                  ? `找到 ${filteredCategories.length} 个相关品类`
-                  : '没有找到相关品类，试试看其他关键词'}
-              </Text>
-            </View>
-          )}
-        </View>
+        )}
 
-        {/* 成品展示轮播 */}
-        <View className='showcase-section mt-20'>
-          <Text className='section-title'>定制成品展示</Text>
+        {/* 定制成品展示 */}
+        <View className='showcase-section'>
+          <Text className='home-section-title'>定制成品展示</Text>
           <Swiper
             className='showcase-swiper'
-            indicatorColor='#e0d5c8'
-            indicatorActiveColor='#d96c6a'
             circular
             autoplay
             interval={3000}
             duration={500}
-            previousMargin='40rpx'
-            nextMargin='40rpx'
             indicatorDots
           >
             {SHOWCASE_LIST.map((item, idx) => (
               <SwiperItem key={idx} className='showcase-swiper-item'>
-                <View className='showcase-swiper-card surface-card'>
-                  <View className='showcase-image-wrapper'>
-                    <Image className='showcase-real-img' src={item.image} mode='aspectFill' />
-                  </View>
-                  <View className='showcase-text-area'>
-                    <View className='showcase-info'>
-                      <Text className='showcase-title'>{item.title}</Text>
-                      <Text className='showcase-desc'>{item.desc}</Text>
-                    </View>
-                    <View className='showcase-tag'>成品案例</View>
+                <View className='hero-block'>
+                  <Image className='hero-media' src={item.image} mode='aspectFill' />
+                  <View className='glass-overlay'>
+                    <Text className='hero-title'>{item.title}</Text>
+                    <Text className='hero-desc'>{item.desc}</Text>
                   </View>
                 </View>
               </SwiperItem>
@@ -117,30 +153,32 @@ export default function Index() {
         </View>
 
         {/* 热门品类 */}
-        <View className='category-section mt-20'>
-          <Text className='section-title'>热门品类</Text>
-          <View className='category-grid'>
+        <View className='category-section'>
+          <Text className='home-section-title'>热门品类</Text>
+          <View className='home-grid'>
             {filteredCategories.map((cat) => (
-                <View
-                  key={cat.id}
-                  className='category-item surface-card'
-                  onTap={() => navigateToProduct(cat.id)}
-                >
-                  <View className='category-img-wrapper'>
-                    <Image
-                      className='category-img-real'
-                      src={PRODUCT_IMG_MAP[cat.id] || assetUrl('/icon/四角星.svg')}
-                      mode='aspectFill'
-                    />
-                  </View>
-                  <Text className='category-name'>{cat.name}</Text>
-                  <Text className='category-desc'>{cat.desc}</Text>
-                  <Text className='category-price'>¥{cat.price} 起</Text>
+              <View
+                key={cat.id}
+                className='media-card'
+                onTap={() => navigateToProduct(cat.id)}
+              >
+                <View className='media-card-image'>
+                  <Image
+                    className='media-card-img'
+                    src={PRODUCT_IMG_MAP[cat.id] || assetUrl('/icon/四角星.svg')}
+                    mode='aspectFill'
+                  />
                 </View>
+                <View className='media-card-body'>
+                  <Text className='media-card-title'>{cat.name}</Text>
+                  <Text className='media-card-desc'>{cat.desc}</Text>
+                  <Text className='media-card-price'>¥{cat.price} 起</Text>
+                </View>
+              </View>
             ))}
           </View>
           {filteredCategories.length === 0 && (
-            <View className='empty-category surface-card'>
+            <View className='empty-category'>
               <Image className='empty-icon-img' src={assetUrl('/icon/搜索.svg')} mode='aspectFit' />
               <Text className='empty-text'>未找到匹配的品类</Text>
               <Text className='empty-sub'>尝试搜索“笔记本”、“杯垫”等</Text>
@@ -148,7 +186,29 @@ export default function Index() {
           )}
         </View>
 
-        <View className='safe-bottom-placeholder' />
+        {/* 为你推荐 */}
+        <View className='recommend-section'>
+          <Text className='home-section-title'>为你推荐</Text>
+          <View className='home-grid'>
+            {SHOWCASE_LIST.slice(0, 4).map((item, idx) => (
+              <View
+                key={idx}
+                className='media-card'
+                onTap={() => navigateFromShowcase(item)}
+              >
+                <View className='media-card-image'>
+                  <Image className='media-card-img' src={item.image} mode='aspectFill' />
+                </View>
+                <View className='media-card-body'>
+                  <Text className='media-card-title'>{item.title}</Text>
+                  <Text className='media-card-desc'>{item.desc}</Text>
+                  <Text className='media-card-price'>{item.priceText}</Text>
+                </View>
+              </View>
+            ))}
+          </View>
+        </View>
+
       </View>
     </View>
   )