fix: constrain images in news detail modal

src/pages/NewsInfo/components/DetailModal.tsx

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