Update web/src/components/Message.tsx

web/src/components/Message.tsx

@@ -1,3 +1,4 @@
+确实是看不到你看看这里web/src/components/Message.tsx呢：
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { Button } from "./ui/button";
 import {
@@ -77,7 +78,7 @@ export function FileUploadArea({
   const [pendingFiles, setPendingFiles] = useState<PendingFile[]>([]);
   const [showTypeDialog, setShowTypeDialog] = useState(false);
 
-  // ✅ objectURL cache（ref 不触发渲染，所以 URL 必须在 render 时按需创建）
+  // ===== objectURL cache（更稳：不用 state，避免时序问题）=====
   const urlCacheRef = useRef<Map<string, string>>(new Map());
 
   const fingerprint = (f: File) => `${f.name}::${f.size}::${f.lastModified}`;
@@ -89,7 +90,7 @@ export function FileUploadArea({
     ];
   }, [uploadedFiles, pendingFiles]);
 
-  // ✅ 当文件列表变化：revoke 掉不再需要的 url
+  // 维护 cache：只保留当前需要的 image url；移除的立即 revoke
   useEffect(() => {
     const need = new Set<string>();
     for (const f of allFiles) {
@@ -97,6 +98,7 @@ export function FileUploadArea({
       need.add(fingerprint(f));
     }
 
+    // revoke removed
     for (const [key, url] of urlCacheRef.current.entries()) {
       if (!need.has(key)) {
         try {
@@ -107,9 +109,18 @@ export function FileUploadArea({
         urlCacheRef.current.delete(key);
       }
     }
+
+    // create missing
+    for (const f of allFiles) {
+      if (!isImageFile(f)) continue;
+      const key = fingerprint(f);
+      if (!urlCacheRef.current.has(key)) {
+        urlCacheRef.current.set(key, URL.createObjectURL(f));
+      }
+    }
   }, [allFiles]);
 
-  // ✅ 卸载：全部 revoke
+  // unmount：全部 revoke
   useEffect(() => {
     return () => {
       for (const url of urlCacheRef.current.values()) {
@@ -123,15 +134,9 @@ export function FileUploadArea({
     };
   }, []);
 
-  // ✅ 关键：render 时同步 getOrCreate，这样第一次渲染就能拿到 src
-  const getOrCreatePreviewUrl = (file: File) => {
+  const getPreviewUrl = (file: File) => {
     const key = fingerprint(file);
-    const existed = urlCacheRef.current.get(key);
-    if (existed) return existed;
-
-    const url = URL.createObjectURL(file);
-    urlCacheRef.current.set(key, url);
-    return url;
+    return urlCacheRef.current.get(key);
   };
 
   const filterSupportedFiles = (files: File[]) => {
@@ -195,15 +200,21 @@ export function FileUploadArea({
 
   const renderLeading = (file: File) => {
     if (isImageFile(file)) {
-      const src = getOrCreatePreviewUrl(file);
+      const src = getPreviewUrl(file);
       return (
         <div className="h-12 w-12 rounded-md overflow-hidden bg-background border border-border flex-shrink-0">
-          <img
-            src={src}
-            alt={file.name}
-            className="h-full w-full object-cover"
-            draggable={false}
-          />
+          {src ? (
+            <img
+              src={src}
+              alt={file.name}
+              className="h-full w-full object-cover"
+              draggable={false}
+            />
+          ) : (
+            <div className="h-full w-full flex items-center justify-center text-muted-foreground">
+              <ImageIcon className="h-5 w-5" />
+            </div>
+          )}
         </div>
       );
     }
@@ -359,4 +370,4 @@ export function FileUploadArea({
       )}
     </Card>
   );
-}
+}