refactor(category):重构文章分类页面结构和加载逻辑

- 调整文章列表组件路径并优化渲染逻辑
- 添加骨架屏加载效果提升用户体验
- 完善错误处理机制增强页面稳定性- 更新页面配置文件路径引用
- 移除冗余的页面配置和组件引用
-优化首页Banner组件加载状态处理
- 增强热销商品Tab切换功能和空状态展示- 调整用户经销商组件调试日志- 修改全局应用配置中的页面路径引用
- 调整主题处理逻辑执行时机

src/pages/index/Banner.tsx

@@ -13,24 +13,32 @@ const MyPage = () => {
   const [carouselData, setCarouselData] = useState<CmsAd>()
   const [hotToday, setHotToday] = useState<CmsAd>()
   const [item, setItem] = useState<CmsArticle>()
+  const [loading, setLoading] = useState(true)
 
   // 加载数据
   const loadData = async () => {
-    // 轮播图
-    const flash = await getCmsAdByCode('flash')
-    // 今日热卖
-    const hotToday = await getCmsAdByCode('hot_today')
-    // 时里动态
-    const news = await pageCmsArticle({limit:1,recommend:1})
-    // 赋值
-    if(flash){
-      setCarouselData(flash)
-    }
-    if(hotToday){
-      setHotToday(hotToday)
-    }
-    if(news && news.list.length > 0){
-      setItem(news.list[0])
+    try {
+      setLoading(true)
+      // 轮播图
+      const flash = await getCmsAdByCode('flash')
+      // 今日热卖
+      const hotToday = await getCmsAdByCode('hot_today')
+      // 时里动态
+      const news = await pageCmsArticle({limit:1,recommend:1})
+      // 赋值
+      if(flash){
+        setCarouselData(flash)
+      }
+      if(hotToday){
+        setHotToday(hotToday)
+      }
+      if(news && news.list.length > 0){
+        setItem(news.list[0])
+      }
+    } catch (error) {
+      console.error('Banner数据加载失败:', error)
+    } finally {
+      setLoading(false)
     }
   }
 
@@ -41,30 +49,91 @@ const MyPage = () => {
   // 轮播图高度，默认200px
   const carouselHeight = carouselData?.height || 200;
 
+  // 骨架屏组件
+  const BannerSkeleton = () => (
+    <View className="flex p-2 justify-between" style={{height: `${carouselHeight}px`}}>
+      {/* 左侧轮播图骨架屏 */}
+      <View style={{width: '50%', height: '100%'}}>
+        <View
+          className="bg-gray-200 rounded animate-pulse"
+          style={{height: `${carouselHeight}px`}}
+        />
+      </View>
+
+      {/* 右侧骨架屏 */}
+      <View className="flex flex-col" style={{width: '50%', height: '100%'}}>
+        {/* 上层骨架屏 */}
+        <View className="ml-2 bg-white rounded-lg">
+          <View className="px-3 my-2">
+            <View className="bg-gray-200 h-4 w-16 rounded animate-pulse"/>
+          </View>
+          <View className="px-3 flex" style={{height: '110px'}}>
+            {[1, 2].map(i => (
+              <View key={i} className="item flex flex-col mr-4">
+                <View className="bg-gray-200 rounded animate-pulse" style={{width: 70, height: 70}}/>
+                <View className="bg-gray-200 h-3 w-16 rounded mt-2 animate-pulse"/>
+              </View>
+            ))}
+          </View>
+        </View>
+
+        {/* 下层骨架屏 */}
+        <View className="ml-2 bg-white rounded-lg mt-3">
+          <View className="px-3 my-2">
+            <View className="bg-gray-200 h-4 w-20 rounded animate-pulse"/>
+          </View>
+          <View className="rounded-lg px-3 pb-3">
+            <View className="bg-gray-200 rounded animate-pulse" style={{width: '100%', height: 106}}/>
+          </View>
+        </View>
+      </View>
+    </View>
+  )
+
+  // 如果正在加载，显示骨架屏
+  if (loading) {
+    return <BannerSkeleton />
+  }
+
   return (
     <View className="flex p-2 justify-between" style={{height: `${carouselHeight}px`}}>
       {/* 左侧轮播图区域 */}
       <View style={{width: '50%', height: '100%'}}>
-        <Swiper
-          defaultValue={0}
-          height={carouselHeight}
-          indicator
-          style={{height: `${carouselHeight}px`}}
+        <View
+          style={{
+            width: '100%',
+            height: '100%',
+            touchAction: 'pan-y',
+            pointerEvents: 'none'
+          }}
         >
-          {carouselData?.imageList?.map((img, index) => (
-            <Swiper.Item key={index}>
-              <Image
-                width="100%"
-                height="100%"
-                src={img.url}
-                mode={'scaleToFill'}
-                onClick={() => navTo(`${img.path}`)}
-                lazyLoad={false}
-                style={{height: `${carouselHeight}px`, borderRadius: '4px'}}
-              />
-            </Swiper.Item>
-          ))}
-        </Swiper>
+          <Swiper
+            defaultValue={0}
+            height={carouselHeight}
+            indicator
+            autoPlay
+            duration={3000}
+            style={{height: `${carouselHeight}px`}}
+          >
+            {carouselData && carouselData?.imageList?.map((img, index) => (
+              <Swiper.Item key={index}>
+                <Image
+                  width="100%"
+                  height="100%"
+                  src={img.url}
+                  mode={'scaleToFill'}
+                  onClick={() => navTo(`${img.path}`)}
+                  lazyLoad={false}
+                  style={{
+                    height: `${carouselHeight}px`,
+                    borderRadius: '4px',
+                    pointerEvents: 'auto'
+                  }}
+                />
+              </Swiper.Item>
+            ))}
+          </Swiper>
+        </View>
       </View>
 
       {/* 右侧上下图片区域 - 从API获取数据 */}

src/pages/index/BestSellers.tsx

@@ -1,5 +1,5 @@
 import {useEffect, useState} from "react";
-import {Image} from '@nutui/nutui-react-taro'
+import {Image, Tabs, Empty} from '@nutui/nutui-react-taro'
 import {Share} from '@nutui/icons-react-taro'
 import {View, Text} from '@tarojs/components';
 import Taro from "@tarojs/taro";
@@ -7,6 +7,7 @@ import {ShopGoods} from "@/api/shop/shopGoods/model";
 import {pageShopGoods} from "@/api/shop/shopGoods";
 
 const BestSellers = () => {
+  const [tab1value, setTab1value] = useState<string | number>('0')
   const [list, setList] = useState<ShopGoods[]>([])
   const [goods, setGoods] = useState<ShopGoods>()
 
@@ -57,8 +58,29 @@ const BestSellers = () => {
   return (
     <>
       <View className={'py-3'}>
+        {/* Tabs切换组件 */}
+        <Tabs
+          value={tab1value}
+          className={'w-full mb-4'}
+          onChange={(value) => {
+            setTab1value(value)
+          }}
+          style={{
+            backgroundColor: 'transparent',
+          }}
+          activeType="smile"
+        >
+          <Tabs.TabPane title="今日主推">
+          </Tabs.TabPane>
+          <Tabs.TabPane title="即将到期">
+          </Tabs.TabPane>
+          <Tabs.TabPane title="活动预告">
+          </Tabs.TabPane>
+        </Tabs>
+
         <View className={'flex flex-col justify-between items-center rounded-lg px-2'}>
-          {list?.map((item, index) => {
+          {/* 今日主推 */}
+          {tab1value == '0' && list?.map((item, index) => {
             return (
               <View key={index} className={'flex flex-col rounded-lg bg-white shadow-sm w-full mb-5'}>
                 <Image src={item.image} mode={'aspectFit'} lazyLoad={false}
@@ -95,6 +117,28 @@ const BestSellers = () => {
               </View>
             )
           })}
+
+          {/* 即将到期 */}
+          {tab1value == '1' && (
+            <Empty
+              size={'small'}
+              description="暂无即将到期的商品"
+              style={{
+                background: 'transparent',
+              }}
+            />
+          )}
+
+          {/* 活动预告 */}
+          {tab1value == '2' && (
+            <Empty
+              size={'small'}
+              description="暂无活动预告"
+              style={{
+                background: 'transparent',
+              }}
+            />
+          )}
         </View>
       </View>
     </>