From bef39f6894c67dde2c962c7c47218f56a1dc3f39 Mon Sep 17 00:00:00 2001
From: lapuda <577732344@qq.com>
Date: Thu, 23 Jul 2026 10:06:22 +0800
Subject: [PATCH] fix: constrain images in news detail modal

---
 src/pages/NewsInfo/components/DetailModal.tsx | 93 +++++++++++--------
 1 file changed, 54 insertions(+), 39 deletions(-)

diff --git a/src/pages/NewsInfo/components/DetailModal.tsx b/src/pages/NewsInfo/components/DetailModal.tsx
index 1d2f196..9947846 100644
--- a/src/pages/NewsInfo/components/DetailModal.tsx
+++ b/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 }) => (
-  <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;