优化细节

src/cms/detail/index.tsx

@@ -1,45 +1,53 @@
-import {useEffect, useState} from "react";
-import {Image} from '@nutui/nutui-react-taro'
 import Taro from '@tarojs/taro'
-import {CmsArticle} from "@/api/cms/cmsArticle/model";
+import {useEffect, useState} from 'react'
+import {useRouter} from '@tarojs/taro'
+import {Loading} from '@nutui/nutui-react-taro'
+import {View, RichText} from '@tarojs/components'
+import {wxParse} from "@/utils/common";
 import {getCmsArticle} from "@/api/cms/cmsArticle";
-import dayjs from "dayjs";
+import {CmsArticle} from "@/api/cms/cmsArticle/model"
+import Line from "@/components/Gap";
 import './index.scss'
 
-const ArticleDetail = () => {
-  const [article, setArticle] = useState<CmsArticle | null>(null);
-  const router = Taro.getCurrentInstance().router;
-  const articleId = router?.params?.id;
+function Detail() {
+  const {params} = useRouter();
+  const [loading, setLoading] = useState<boolean>(true)
+  // 文章详情
+  const [item, setItem] = useState<CmsArticle>()
+  const reload = async () => {
+    const item = await getCmsArticle(Number(params.id))
+
+    if (item) {
+      item.content = wxParse(item.content)
+      setItem(item)
+      Taro.setNavigationBarTitle({
+        title: `${item?.categoryName}`
+      })
+    }
+  }
 
   useEffect(() => {
-    if (articleId) {
-      getCmsArticle(Number(articleId)).then(res => {
-        setArticle(res);
-      }).catch(error => {
-        console.error("Failed to fetch article detail:", error);
-      });
-    }
-  }, [articleId]);
+    reload().then(() => {
+      setLoading(false)
+    });
+  }, []);
 
-  if (!article) {
-    return <div>加载中...</div>;
+  if (loading) {
+    return (
+      <Loading className={'px-2'}>加载中</Loading>
+    )
   }
 
   return (
-    <div className={'article-detail-page'}>
-      <div className={'article-header'}>
-        <h1 className={'article-title'}>{article.title}</h1>
-        <div className={'article-meta'}>
-          <span>作者：{article.author}</span>
-          <span>发布时间：{dayjs(article.createTime).format('YYYY-MM-DD HH:mm')}</span>
-        </div>
-      </div>
-      <div className={'article-content'}>
-        {article.image && <Image src={article.image} className={'article-main-image'} />}
-        <div dangerouslySetInnerHTML={{ __html: article.content || '' }} />
-      </div>
+    <div className={'bg-white'}>
+      <div className={'p-4 font-bold text-lg'}>{item?.title}</div>
+      <div className={'text-gray-400 text-sm px-4 '}>{item?.createTime}</div>
+      <View className={'content px-3'}>
+        <RichText nodes={item?.content}/>
+      </View>
+      <Line height={44}/>
     </div>
-  );
-};
+  )
+}
 
-export default ArticleDetail;
+export default Detail