fix: constrain images in news detail modal
This commit is contained in:
@@ -1,9 +1,20 @@
|
||||
import React from 'react';
|
||||
import { Descriptions, Modal, Tag, Typography } from 'antd';
|
||||
import { createStyles } from 'antd-style';
|
||||
import DictTag from '@/components/DictTag';
|
||||
import type { DictValueEnumObj } from '@/components/DictTag';
|
||||
import { normalizeNewsContent } from '@/utils/newsImageUrl';
|
||||
|
||||
const useStyles = createStyles(() => ({
|
||||
content: {
|
||||
'& img': {
|
||||
display: 'block',
|
||||
maxWidth: '100%',
|
||||
height: 'auto',
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
interface DetailModalProps {
|
||||
open: boolean;
|
||||
data?: API.NewsInfo.NewsInfoItem;
|
||||
@@ -11,7 +22,10 @@ interface DetailModalProps {
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
const DetailModal: React.FC<DetailModalProps> = ({ open, data, moduleEnum, onCancel }) => (
|
||||
const DetailModal: React.FC<DetailModalProps> = ({ open, data, moduleEnum, onCancel }) => {
|
||||
const { styles } = useStyles();
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title="新闻资讯详情"
|
||||
open={open}
|
||||
@@ -37,7 +51,7 @@ const DetailModal: React.FC<DetailModalProps> = ({ open, data, moduleEnum, onCan
|
||||
<Descriptions.Item label="正文" span={2}>
|
||||
{data?.content ? (
|
||||
<Typography
|
||||
className="news-detail-content"
|
||||
className={`${styles.content} news-detail-content`}
|
||||
dangerouslySetInnerHTML={{ __html: normalizeNewsContent(data.content) }}
|
||||
/>
|
||||
) : (
|
||||
@@ -50,5 +64,6 @@ const DetailModal: React.FC<DetailModalProps> = ({ open, data, moduleEnum, onCan
|
||||
</Descriptions>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default DetailModal;
|
||||
|
||||
Reference in New Issue
Block a user