forum

frontend/src/pages/ForumDetail.jsx

@@ -32,8 +32,12 @@ const ForumDetail = () => {
     }
   };
 
+  const hasFetched = React.useRef(false);
   useEffect(() => {
-    fetchTopic();
+    if (!hasFetched.current) {
+        fetchTopic();
+        hasFetched.current = true;
+    }
   }, [id]);
 
   const handleSubmitReply = async () => {
@@ -122,8 +126,45 @@ const ForumDetail = () => {
             minHeight: 200,
             whiteSpace: 'pre-wrap' // Preserve formatting
         }}>
-            {topic.content}
+            {topic.content.replace(/!\[.*?\]\(.*?\)/g, '[图片]')}
         </div>
+        
+        {(() => {
+            const regexMatches = topic.content.match(/!\[.*?\]\((.*?)\)/g);
+            const regexImages = regexMatches ? regexMatches.map(match => match.match(/!\[.*?\]\((.*?)\)/)[1]) : [];
+            
+            // 优先使用 Markdown 中解析出的图片（保持顺序）
+            if (regexImages.length > 0) {
+                return regexImages.map((url, index) => (
+                    <div key={`regex-${index}`} style={{ marginTop: 12 }}>
+                        <img 
+                            src={url} 
+                            alt="content" 
+                            style={{ maxHeight: 400, borderRadius: 8, maxWidth: '100%' }} 
+                        />
+                    </div>
+                ));
+            }
+            
+            // 兜底：如果 Markdown 解析失败或未插入但已上传，显示关联的媒体资源
+            if (topic.media && topic.media.length > 0) {
+                 return topic.media.map((media) => (
+                    <div key={`media-${media.id}`} style={{ marginTop: 12 }}>
+                        {media.media_type === 'video' ? (
+                            <video src={media.url} controls style={{ maxHeight: 400, borderRadius: 8, maxWidth: '100%' }} />
+                        ) : (
+                            <img 
+                                src={media.url} 
+                                alt="content" 
+                                style={{ maxHeight: 400, borderRadius: 8, maxWidth: '100%' }} 
+                            />
+                        )}
+                    </div>
+                ));
+            }
+            
+            return null;
+        })()}
       </Card>
 
       {/* Replies List */}