From 72b1f8f1cf075008e8086f140ae98fd05df94826 Mon Sep 17 00:00:00 2001
From: 134 <a134@134deMacBook-Pro.local>
Date: Thu, 9 Jul 2026 14:39:38 +0800
Subject: [PATCH] fix: keep image attachment add button visible

---
 components/canvas/CanvasChatPanel.tsx | 62 +++++++++++++++------------
 1 file changed, 35 insertions(+), 27 deletions(-)

diff --git a/components/canvas/CanvasChatPanel.tsx b/components/canvas/CanvasChatPanel.tsx
index a95e017c3..d9030fc5a 100644
--- a/components/canvas/CanvasChatPanel.tsx
+++ b/components/canvas/CanvasChatPanel.tsx
@@ -15265,33 +15265,41 @@ export function CanvasChatPanel({
               </div>
             ) : null}
             {!isWorkspacePresentation && !isDetailGenerationMode && !isVideoWorkspace && activeComposerMode === "image" ? (
-              <button
-                type="button"
-                className="mx-4 mt-3 flex h-16 w-16 shrink-0 flex-col items-center justify-center gap-1.5 overflow-hidden rounded-[18px] bg-[#f3f3f4] text-[#a8adb5] transition-colors hover:bg-[#ececee] hover:text-[#7d848e] dark:bg-white/8 dark:text-zinc-400 dark:hover:bg-white/12"
-                onClick={() => fileInputRef.current?.click()}
-                disabled={isSubmitting}
-                title="添加参考图"
-              >
-                {attachments[0]?.url ? (
-                  <img
-                    src={buildPreviewImageUrl(attachments[0].url, 180)}
-                    alt={attachments[0].name || "参考图"}
-                    className="h-full w-full object-cover"
-                    loading="lazy"
-                    decoding="async"
-                    onError={(event) => {
-                      if (event.currentTarget.src !== attachments[0]?.url) {
-                        event.currentTarget.src = attachments[0]?.url || "";
-                      }
-                    }}
-                  />
-                ) : (
-                  <>
-                    <ImagePlus className="h-5 w-5" />
-                    <span className="text-[13px] font-medium leading-none">参考图</span>
-                  </>
-                )}
-              </button>
+              <div className="mx-4 mt-3 flex gap-2 overflow-x-auto pb-1 scrollbar-hide">
+                {attachments.map((attachment, index) => (
+                  <div
+                    key={`${attachment.url}-${index}`}
+                    className="relative h-16 w-16 shrink-0 overflow-hidden rounded-[18px] bg-[#f3f3f4] dark:bg-white/8"
+                    title={attachment.name || `参考图 ${index + 1}`}
+                  >
+                    <img
+                      src={buildPreviewImageUrl(attachment.url, 180)}
+                      alt={attachment.name || `参考图 ${index + 1}`}
+                      className="h-full w-full object-cover"
+                      loading="lazy"
+                      decoding="async"
+                      onError={(event) => {
+                        if (event.currentTarget.src !== attachment.url) {
+                          event.currentTarget.src = attachment.url;
+                        }
+                      }}
+                    />
+                  </div>
+                ))}
+                <button
+                  type="button"
+                  className="flex h-16 w-16 shrink-0 flex-col items-center justify-center gap-1.5 rounded-[18px] border border-dashed border-[#d9dde4] bg-[#f3f3f4] text-[#a8adb5] transition-colors hover:border-[#c6ccd6] hover:bg-[#ececee] hover:text-[#7d848e] disabled:cursor-not-allowed disabled:opacity-60 dark:border-white/12 dark:bg-white/8 dark:text-zinc-400 dark:hover:border-white/20 dark:hover:bg-white/12"
+                  onClick={() => fileInputRef.current?.click()}
+                  disabled={isSubmitting}
+                  title="继续添加参考图"
+                  aria-label="继续添加参考图"
+                >
+                  <ImagePlus className="h-5 w-5" />
+                  <span className="text-[13px] font-medium leading-none">
+                    参考图
+                  </span>
+                </button>
+              </div>
             ) : null}
             {isClawdMode && clawdTableFiles.length > 0 ? (
               <div className="mx-4 mt-3 flex flex-wrap gap-2">