Browse Source

修复已知问题

master
科技小王子 1 month ago
parent
commit
22d4ffe2fb
  1. 50
      src/cms/detail/index.scss
  2. 45
      src/cms/detail/index.tsx

50
src/cms/detail/index.scss

@ -0,0 +1,50 @@
.article-detail-page {
padding: 15px;
background-color: #fff;
.article-header {
margin-bottom: 20px;
border-bottom: 1px solid #eee;
padding-bottom: 15px;
.article-title {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
line-height: 1.4;
}
.article-meta {
font-size: 14px;
color: #999;
span {
margin-right: 15px;
}
}
}
.article-content {
line-height: 1.8;
font-size: 16px;
color: #333;
.article-main-image {
width: 100%;
height: auto;
margin-bottom: 15px;
border-radius: 8px;
}
img {
max-width: 100%;
height: auto;
display: block;
margin: 10px 0;
}
p {
margin-bottom: 10px;
}
}
}

45
src/cms/detail/index.tsx

@ -0,0 +1,45 @@
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 {getCmsArticle} from "@/api/cms/cmsArticle";
import dayjs from "dayjs";
import './index.scss'
const ArticleDetail = () => {
const [article, setArticle] = useState<CmsArticle | null>(null);
const router = Taro.getCurrentInstance().router;
const articleId = router?.params?.id;
useEffect(() => {
if (articleId) {
getCmsArticle(Number(articleId)).then(res => {
setArticle(res);
}).catch(error => {
console.error("Failed to fetch article detail:", error);
});
}
}, [articleId]);
if (!article) {
return <div>...</div>;
}
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>
);
};
export default ArticleDetail;
Loading…
Cancel
Save