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

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

src/pages/category/components/ArticleList.tsx

@@ -0,0 +1,35 @@
+import {Image, Cell} from '@nutui/nutui-react-taro'
+import {View, Text} from '@tarojs/components'
+import Taro from '@tarojs/taro'
+
+const ArticleList = (props: any) => {
+
+  return (
+    <>
+      <View className={'px-3'}>
+        {props.data.map((item: any, index: number) => {
+          return (
+            <Cell
+              title={
+                <View>
+                  <View className="text-base font-medium mb-1">{item.title}</View>
+                  {item.comments && (
+                    <Text className="text-sm text-gray-500 leading-relaxed">
+                      {item.comments}
+                    </Text>
+                  )}
+                </View>
+              }
+              extra={
+                <Image src={item.image} mode={'aspectFit'} lazyLoad={false} width={100} height="100"/>
+              }
+              key={index}
+              onClick={() => Taro.navigateTo({url: '/cms/detail/index?id=' + item.articleId})}
+            />
+          )
+        })}
+      </View>
+    </>
+  )
+}
+export default ArticleList

src/pages/category/components/ArticleTabs.tsx

@@ -0,0 +1,59 @@
+import {useEffect, useState} from "react";
+import {Tabs, Loading} from '@nutui/nutui-react-taro'
+import {pageCmsArticle} from "@/api/cms/cmsArticle";
+import {CmsArticle} from "@/api/cms/cmsArticle/model";
+import ArticleList from "./ArticleList";
+
+const ArticleTabs = (props: any) => {
+  const [loading, setLoading] = useState<boolean>(true)
+  const [tab1value, setTab1value] = useState<string | number>('0')
+  const [list, setList] = useState<CmsArticle[]>([])
+
+  const reload = async (value) => {
+    const {data} = props
+    pageCmsArticle({
+      categoryId: data[value].navigationId,
+      page: 1,
+      status: 0,
+      limit: 10
+    }).then((res) => {
+      res && setList(res?.list || [])
+    })
+      .catch(err => {
+        console.log(err)
+      })
+      .finally(() => {
+        setTab1value(value)
+        setLoading(false)
+      })
+  }
+
+  useEffect(() => {
+    reload(0).then()
+  }, []);
+
+  if (loading) {
+    return (
+      <Loading className={'px-2'}>加载中</Loading>
+    )
+  }
+
+  return (
+    <>
+      <Tabs
+        value={tab1value}
+        onChange={(value) => {
+          reload(value).then()
+        }}
+      >
+        {props.data?.map((item, index) => {
+          return (
+            <Tabs.TabPane title={item.categoryName} key={index}/>
+          )
+        })}
+      </Tabs>
+      <ArticleList data={list}/>
+    </>
+  )
+}
+export default ArticleTabs

src/pages/category/components/Banner.tsx

@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react'
+import { Swiper } from '@nutui/nutui-react-taro'
+import {CmsAd} from "@/api/cms/cmsAd/model";
+import {Image} from '@nutui/nutui-react-taro'
+import {getCmsAd} from "@/api/cms/cmsAd";
+
+const MyPage = () => {
+  const [item, setItem] = useState<CmsAd>()
+  const reload = () => {
+    getCmsAd(439).then(data => {
+      setItem(data)
+    })
+  }
+
+  useEffect(() => {
+    reload()
+  }, [])
+
+  return (
+    <>
+      <Swiper defaultValue={0} height={item?.height} indicator style={{ height: item?.height + 'px', display: 'none' }}>
+        {item?.imageList?.map((item) => (
+          <Swiper.Item key={item}>
+            <Image width="100%" height="100%" src={item.url} mode={'scaleToFill'} lazyLoad={false} style={{ height: item.height + 'px' }} />
+          </Swiper.Item>
+        ))}
+      </Swiper>
+    </>
+  )
+}
+export default MyPage

src/pages/category/index.config.ts

@@ -0,0 +1,4 @@
+export default definePageConfig({
+  navigationBarTitleText: '文章列表',
+  navigationBarTextStyle: 'black'
+})

src/pages/category/index.tsx

@@ -0,0 +1,96 @@
+import Taro from '@tarojs/taro'
+import {useShareAppMessage} from "@tarojs/taro"
+import {useEffect, useState} from "react"
+import {useRouter} from '@tarojs/taro'
+import {View} from '@tarojs/components'
+import {getCmsNavigation, listCmsNavigation} from "@/api/cms/cmsNavigation";
+import {CmsNavigation} from "@/api/cms/cmsNavigation/model";
+import {pageCmsArticle} from "@/api/cms/cmsArticle";
+import {CmsArticle} from "@/api/cms/cmsArticle/model";
+import ArticleList from './components/ArticleList'
+import ArticleTabs from "./components/ArticleTabs";
+import './index.scss'
+
+function Category() {
+  const {params} = useRouter();
+  const [categoryId, setCategoryId] = useState<number>(0)
+  const [category, setCategory] = useState<CmsNavigation[]>([])
+  const [loading, setLoading] = useState<boolean>(true)
+  const [nav, setNav] = useState<CmsNavigation>()
+  const [list, setList] = useState<CmsArticle[]>([])
+
+  const reload = async () => {
+    try {
+      setLoading(true)
+      // 1.加载远程数据
+      const id = Number(params.id || 4328)
+      const nav = await getCmsNavigation(id)
+      const categoryList = await listCmsNavigation({parentId: id})
+      const shopGoods = await pageCmsArticle({categoryId: id})
+
+      // 2.赋值
+      setCategoryId(id)
+      setNav(nav)
+      setList(shopGoods?.list || [])
+      setCategory(categoryList)
+      Taro.setNavigationBarTitle({
+        title: `${nav?.categoryName}`
+      })
+    } catch (error) {
+      console.error('文章分类加载失败:', error)
+    } finally {
+      setLoading(false)
+    }
+  };
+
+  useEffect(() => {
+    reload()
+  }, []);
+
+  useShareAppMessage(() => {
+    return {
+      title: `${nav?.categoryName}_时里院子市集`,
+      path: `/shop/category/index?id=${categoryId}`,
+      success: function () {
+        console.log('分享成功');
+      },
+      fail: function () {
+        console.log('分享失败');
+      }
+    };
+  });
+
+  // 骨架屏组件
+  const ArticleSkeleton = () => (
+    <View className="px-3">
+      {[1, 2, 3, 4, 5].map(i => (
+        <View key={i} className="flex items-center py-4 border-b border-gray-100">
+          {/* 左侧文字骨架屏 */}
+          <View className="flex-1 pr-4">
+            {/* 标题骨架屏 */}
+            <View className="bg-gray-200 h-5 rounded animate-pulse mb-2" style={{width: '75%'}}/>
+            {/* 副标题骨架屏 */}
+            <View className="bg-gray-200 h-4 rounded animate-pulse" style={{width: '50%'}}/>
+          </View>
+          {/* 右侧图片骨架屏 */}
+          <View
+            className="bg-gray-200 rounded animate-pulse flex-shrink-0"
+            style={{width: '100px', height: '100px'}}
+          />
+        </View>
+      ))}
+    </View>
+  )
+
+  if (loading) {
+    return <ArticleSkeleton />
+  }
+
+  if(category.length > 0){
+    return <ArticleTabs data={category}/>
+  }
+
+  return <ArticleList data={list}/>
+}
+
+export default Category