sh/shz-admin
2
0
Fork 0
Code Issues Pull Requests Actions 7 Packages Projects Releases Wiki Activity

fix: constrain images in news detail modal

Browse Source
This commit is contained in:
lapuda
2026-07-23 10:06:22 +08:00
parent 9d1dfe962f
commit bef39f6894
1 changed files with 54 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/pages/NewsInfo/components/DetailModal.tsx
View File

@@ -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,44 +22,48 @@ interface DetailModalProps {
onCancel: () => void;
}
const DetailModal: React.FC<DetailModalProps> = ({ open, data, moduleEnum, onCancel }) => (
<Modal
title="新闻资讯详情"
open={open}
onCancel={onCancel}
footer={null}
width={900}
destroyOnClose
>
<Descriptions bordered column={2} size="small">
<Descriptions.Item label="资讯模块">
{data?.module ? <DictTag enums={moduleEnum} value={data.module} /> : '-'}
</Descriptions.Item>
<Descriptions.Item label="状态">
<Tag color={data?.status === '0' ? 'success' : 'default'}>
{data?.status === '0' ? '上架' : '下架'}
</Tag>
</Descriptions.Item>
<Descriptions.Item label="标题" span={2}>
{data?.title || '-'}
</Descriptions.Item>
<Descriptions.Item label="创建时间">{data?.createTime || '-'}</Descriptions.Item>
<Descriptions.Item label="更新时间">{data?.updateTime || '-'}</Descriptions.Item>
<Descriptions.Item label="正文" span={2}>
{data?.content ? (
<Typography
className="news-detail-content"
dangerouslySetInnerHTML={{ __html: normalizeNewsContent(data.content) }}
/>
) : (
'-'
)}
</Descriptions.Item>
<Descriptions.Item label="备注" span={2}>
{data?.remark || '-'}
</Descriptions.Item>
</Descriptions>
</Modal>
);
const DetailModal: React.FC<DetailModalProps> = ({ open, data, moduleEnum, onCancel }) => {
const { styles } = useStyles();
return (
<Modal
title="新闻资讯详情"
open={open}
onCancel={onCancel}
footer={null}
width={900}
destroyOnClose
>
<Descriptions bordered column={2} size="small">
<Descriptions.Item label="资讯模块">
{data?.module ? <DictTag enums={moduleEnum} value={data.module} /> : '-'}
</Descriptions.Item>
<Descriptions.Item label="状态">
<Tag color={data?.status === '0' ? 'success' : 'default'}>
{data?.status === '0' ? '上架' : '下架'}
</Tag>
</Descriptions.Item>
<Descriptions.Item label="标题" span={2}>
{data?.title || '-'}
</Descriptions.Item>
<Descriptions.Item label="创建时间">{data?.createTime || '-'}</Descriptions.Item>
<Descriptions.Item label="更新时间">{data?.updateTime || '-'}</Descriptions.Item>
<Descriptions.Item label="正文" span={2}>
{data?.content ? (
<Typography
className={`${styles.content} news-detail-content`}
dangerouslySetInnerHTML={{ __html: normalizeNewsContent(data.content) }}
/>
) : (
'-'
)}
</Descriptions.Item>
<Descriptions.Item label="备注" span={2}>
{data?.remark || '-'}
</Descriptions.Item>
</Descriptions>
</Modal>
);
};
export default DetailModal;