修复已知问题
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