修复已知问题
This commit is contained in:
50
src/cms/detail/index.scss
Normal file
50
src/cms/detail/index.scss
Normal file
@@ -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
Normal file
45
src/cms/detail/index.tsx
Normal file
@@ -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;
|
||||
Reference in New Issue
Block a user