Merge branch 'master' into sync-test-s

src/components/__tests__/GenerationComposer.test.tsx

@@ -471,7 +471,7 @@ describe("GenerationComposer", () => {
     });
 
     await waitFor(() => {
-      expect(screen.getByLabelText("移除参考图片")).toBeInTheDocument();
+      expect(screen.getByLabelText("移除参考图片 1")).toBeInTheDocument();
     });
 
     fireEvent.change(screen.getByPlaceholderText(/描述你想生成的内容/), {
@@ -489,6 +489,30 @@ describe("GenerationComposer", () => {
     expect((nodes[0].data as NanoBananaNodeData).inputImages[0]).toMatch(/^data:image\/png;base64,/);
   });
 
+  it("renders uploaded reference images in order instead of stacking them", async () => {
+    render(<GenerationComposer />);
+
+    const firstImage = new File(["first-reference"], "first.png", { type: "image/png" });
+    const secondImage = new File(["second-reference"], "second.png", { type: "image/png" });
+    fireEvent.change(screen.getByLabelText("上传参考图片"), {
+      target: { files: [firstImage, secondImage] },
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTitle("参考图片 1")).toBeInTheDocument();
+      expect(screen.getByTitle("参考图片 2")).toBeInTheDocument();
+    });
+
+    const removeButtons = screen.getAllByLabelText(/移除参考图片/);
+    expect(removeButtons).toHaveLength(2);
+
+    fireEvent.click(screen.getByLabelText("移除参考图片 1"));
+    await waitFor(() => {
+      expect(screen.queryByTitle("参考图片 2")).not.toBeInTheDocument();
+      expect(screen.getByTitle("参考图片 1")).toBeInTheDocument();
+    });
+  });
+
   it("keeps upstream text authoritative without overwriting the local fallback prompt", async () => {
     useWorkflowStore.setState({
       nodes: [

src/components/composer/GenerationComposer.tsx

@@ -1080,23 +1080,31 @@ export function GenerationComposer() {
                   <span>参考</span>
                 </button>
 
-                {primaryReference && (
-                  <div className="relative ml-1 h-14 w-14 overflow-hidden rounded-lg border border-neutral-700 bg-neutral-900">
-                    <img src={primaryReference} alt="" className="h-full w-full object-cover" />
-                    <span className="absolute right-1 top-1 rounded-full bg-neutral-900/80 px-1 text-[10px] text-neutral-200">
-                      {referenceImages.length}
+                {referenceImages.length > 0 && (
+                  <div className="ml-1 flex max-w-[18rem] items-center gap-1.5 overflow-x-auto rounded-lg pr-1">
+                    {referenceImages.map((referenceImage, imageIndex) => (
+                      <div
+                        key={`${imageIndex}-${referenceImage.slice(0, 24)}`}
+                        className="relative h-14 w-14 shrink-0 overflow-hidden rounded-lg border border-neutral-700 bg-neutral-900"
+                        title={`参考图片 ${imageIndex + 1}`}
+                      >
+                        <img src={referenceImage} alt="" className="h-full w-full object-cover" />
+                        <span className="absolute left-1 top-1 rounded-full bg-neutral-900/80 px-1 text-[10px] text-neutral-200">
+                          {imageIndex + 1}
                         </span>
                         {canEditReferenceImages && (
                           <button
                             type="button"
-                        aria-label="移除参考图片"
-                        onClick={() => removeReferenceImage(0)}
+                            aria-label={`移除参考图片 ${imageIndex + 1}`}
+                            onClick={() => removeReferenceImage(imageIndex)}
                             className="absolute bottom-1 right-1 flex h-4 w-4 items-center justify-center rounded-full bg-black/70 text-[10px] text-neutral-200 transition-colors hover:bg-red-600 hover:text-white"
                           >
                             ×
                           </button>
                         )}
                       </div>
+                    ))}
+                  </div>
                 )}
               </>
             )}