💄 feat: 将首页轮播图从 Swiper 组件替换为 Carousel 组件

- 使用 Carousel 组件替代原生 Swiper 组件
- 移除冲突的 CSS 样式
- 优化轮播图显示效果

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

mini/src/pages/index/index.css

@@ -40,38 +40,9 @@
   box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
 }
 
-/* Swiper 容器样式 */
-.home-page-header .swiper-wrap swiper {
-  width: 100% !important;
-  height: 800rpx !important;
-}
-
-/* SwiperItem 样式 */
-.home-page-header .swiper-wrap swiper-item {
-  width: 100% !important;
-  height: 100% !important;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
+/* Carousel 组件样式 - 使用标准组件样式 */
 
-/* 轮播图图片容器 */
-.home-page-header .swiper-wrap .w-full.h-full {
-  width: 100% !important;
-  height: 800rpx !important;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: #f8f8f8;
-}
-
-/* 轮播图图片样式 - 高度固定，宽度自适应居中 */
-.home-page-header .swiper-wrap image {
-  height: 800rpx !important;
-  width: auto !important;
-  max-width: 100%;
-  object-fit: contain;
-}
+/* 轮播图图片样式 - 使用 Carousel 组件，移除冲突样式 */
 
 /* 商品列表容器样式 */
 .home-page-container .goods-list-wrap {

mini/src/pages/index/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { View, Text, ScrollView, Swiper, SwiperItem, Image } from '@tarojs/components'
+import { View, Text, ScrollView } from '@tarojs/components'
 import { useInfiniteQuery, useQuery } from '@tanstack/react-query'
 import { TabBarLayout } from '@/layouts/tab-bar-layout'
 import TDesignSearch from '@/components/tdesign/search'
@@ -11,6 +11,7 @@ import './index.css'
 import { useAuth } from '@/utils/auth'
 import { useCart } from '@/contexts/CartContext'
 import { Navbar } from '@/components/ui/navbar'
+import { Carousel } from '@/components/ui/carousel'
 import Taro from '@tarojs/taro'
 
 type GoodsResponse = InferResponseType<typeof goodsClient.$get, 200>
@@ -189,28 +190,18 @@ const HomePage: React.FC = () => {
                 <Text className="error-text">广告加载失败</Text>
               </View>
             ) : finalImgSrcs && finalImgSrcs.length > 0 ? (
-              <Swiper
-                className="w-full"
-                style={{ height: '800rpx', width: '100%' }}
+              <Carousel
+                items={finalImgSrcs.filter(item => item.imageFile?.fullUrl).map(item => ({
+                  src: item.imageFile!.fullUrl,
+                  title: item.title || '',
+                  description: item.description || ''
+                }))}
+                height={800}
                 autoplay={true}
+                interval={4000}
                 circular={true}
-                indicatorDots={true}
-                indicatorColor="rgba(0, 0, 0, .3)"
-                indicatorActiveColor="#000"
-              >
-                {finalImgSrcs.filter(item => item.imageFile?.fullUrl).map((item, index) => (
-                  <SwiperItem key={index} className="w-full h-full">
-                    <View className="w-full h-full flex items-center justify-center bg-gray-100">
-                      <Image
-                        src={item.imageFile!.fullUrl}
-                        mode="heightFix"
-                        style={{ height: '800rpx', width: 'auto' }}
-                        lazyLoad
-                      />
-                    </View>
-                  </SwiperItem>
-                ))}
-              </Swiper>
+                imageMode="aspectFill"
+              />
             ) : (
               <View className="empty-container">
                 <Text className="empty-text">暂无广告</Text>