批量生图页改版：提示词列表移到输入框上方、支持分隔符与 xlsx 导入

- 布局重构：不再把多行编辑器塞进输入框，改成「列表在上、原输入框编辑选中项」——
点列表里任意一条，输入框就显示并编辑那一条（原来输入框的内容会在进入批量模式时带进第 1 条）
- 每条独立设置平铺出来：参考图、张数、模型、比例直接可见可改（不再藏在「参数」展开里）；
改过之后旁边出现「恢复跟全局」用来清掉行级覆盖
- 分隔符：默认 ----，可在批量区自定义；「拆分输入框」把当前这条按分隔符拆成多条；
批量模式下粘贴含分隔符的内容也会自动拆
- 导入 xlsx / xls / csv（SheetJS）：读各工作表第一列的非空单元格，跳过「提示词 / prompt」
这类表头，单元格内还能再按分隔符拆；导入结果追加进列表
- 修两个 bug：
① 追加条目改用函数式 setState —— 否则拆分时会把同一批次里刚改好的那条顶回原文；
② 导入时不能提前把 input.value = "" —— 会让已拿到的 File 变成不可读（NotReadableError）
- 依赖：新增 xlsx（SheetJS）

web/package-lock.json

@@ -37,6 +37,7 @@
         "remark-gfm": "^4.0.1",
         "sonner": "^2.0.6",
         "tailwind-merge": "^3.3.1",
+        "xlsx": "^0.18.5",
         "zustand": "^5.0.8"
       },
       "devDependencies": {
@@ -3362,6 +3363,15 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/adler-32": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz",
+      "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/agent-base": {
       "version": "6.0.2",
       "license": "MIT",
@@ -3794,6 +3804,19 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/cfb": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz",
+      "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "crc-32": "~1.2.0"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "dev": true,
@@ -3875,6 +3898,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/codepage": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
+      "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "dev": true,
@@ -3958,6 +3990,18 @@
         }
       }
     },
+    "node_modules/crc-32": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
+      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
+      "license": "Apache-2.0",
+      "bin": {
+        "crc32": "bin/crc32.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "dev": true,
@@ -5072,6 +5116,15 @@
         "node": ">= 6"
       }
     },
+    "node_modules/frac": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
+      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/framer-motion": {
       "version": "12.42.2",
       "license": "MIT",
@@ -9053,6 +9106,18 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/ssf": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
+      "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "frac": "~1.1.2"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/stable-hash": {
       "version": "0.0.5",
       "dev": true,
@@ -9953,6 +10018,24 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/wmf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
+      "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/word": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
+      "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/word-wrap": {
       "version": "1.2.5",
       "dev": true,
@@ -9982,6 +10065,27 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/xlsx": {
+      "version": "0.18.5",
+      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz",
+      "integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "cfb": "~1.2.1",
+        "codepage": "~1.15.0",
+        "crc-32": "~1.2.1",
+        "ssf": "~0.11.2",
+        "wmf": "~1.0.1",
+        "word": "~0.3.0"
+      },
+      "bin": {
+        "xlsx": "bin/xlsx.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/y18n": {
       "version": "5.0.8",
       "dev": true,

web/package.json

@@ -40,6 +40,7 @@
     "remark-gfm": "^4.0.1",
     "sonner": "^2.0.6",
     "tailwind-merge": "^3.3.1",
+    "xlsx": "^0.18.5",
     "zustand": "^5.0.8"
   },
   "devDependencies": {

web/src/app/batch/components/image-composer.tsx

@@ -1,5 +1,6 @@
 "use client";
-import { Check, ChevronDown, ImagePlus, Layers, LoaderCircle, Plus, Trash2, X } from "lucide-react";
+import { Check, ChevronDown, FileSpreadsheet, ImagePlus, Layers, LoaderCircle, Plus, Scissors, X } from "lucide-react";
+import * as XLSX from "xlsx";
 import { useEffect, useMemo, useRef, useState, type ClipboardEvent, type DragEvent, type PointerEvent, type RefObject } from "react";
 
 import {
@@ -53,6 +54,12 @@ function createBatchItem(prompt = ""): BatchItem {
   return { id: `batch-${Date.now().toString(36)}-${batchItemSeq}`, prompt, count: 1, refIndexes: [] };
 }
 
+/** 批量提示词默认分隔符：粘贴 / 导入时用它把一大段文本拆成多条。 */
+const BATCH_DEFAULT_SEPARATOR = "----";
+
+/** 表格首行常见表头，导入时跳过，免得把「提示词」也生成一张图。 */
+const BATCH_SHEET_HEADERS = new Set(["提示词", "提示语", "prompt", "prompts", "内容", "描述"]);
+
 type ImageComposerProps = {
   prompt: string;
   imageCount: string;
@@ -212,8 +219,14 @@ export function ImageComposer({
   const [isDraggingImage, setIsDraggingImage] = useState(false);
   const [isBatchMode, setIsBatchMode] = useState(false);
   const [batchItems, setBatchItems] = useState<BatchItem[]>(() => [createBatchItem()]);
-  const [batchExpandedIds, setBatchExpandedIds] = useState<string[]>([]);
   const [batchPickerId, setBatchPickerId] = useState<string | null>(null);
+  /** 当前编辑中的条目（输入框显示的就是它）。 */
+  const [activeBatchId, setActiveBatchId] = useState<string | null>(null);
+  /** 拆分提示词用的分隔符，默认 ----，可自行改。 */
+  const [batchSeparator, setBatchSeparator] = useState(BATCH_DEFAULT_SEPARATOR);
+  /** 导入 / 拆分后的一句提示文案。 */
+  const [batchNotice, setBatchNotice] = useState("");
+  const batchImportInputRef = useRef<HTMLInputElement | null>(null);
   const [sizeMenuPos, setSizeMenuPos] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
   const [modelMenuPos, setModelMenuPos] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
   // 心跳由全局 PresenceProvider 统一上报（覆盖站内所有页面），这里只负责展示数字。
@@ -299,8 +312,8 @@ export function ImageComposer({
     : unitCreditCost.toFixed(2).replace(/\.?0+$/, "");
 
   // ---- 批量模式 ----------------------------------------------------------
-  // 一次提交多条提示词：每条独立选参考图、独立张数、可选的行级参数覆盖；
-  // 张数与参考图无关（参考图只是"一起作参考"，张数按条目自己填的数字出）。
+  // 批量 = 一串「提示词条目」：列表显示在输入框**上方**，原来的输入框用来编辑
+  // 「当前选中那条」的提示词。每条仍可独立选参考图、独立张数、按需覆盖参数。
   const batchValidItems = useMemo(() => batchItems.filter((item) => item.prompt.trim()), [batchItems]);
   const batchTotalCount = batchValidItems.reduce((sum, item) => sum + Math.max(1, item.count), 0);
   const batchEstimatedCost = batchTotalCount * unitCreditCost;
@@ -308,38 +321,54 @@ export function ImageComposer({
     ? String(batchEstimatedCost)
     : batchEstimatedCost.toFixed(2).replace(/\.?0+$/, "");
   const batchItemCounts = useMemo(() => ({ valid: batchValidItems.length, total: batchItems.length }), [batchItems.length, batchValidItems.length]);
+  const activeBatchItem = useMemo(
+    () => batchItems.find((item) => item.id === activeBatchId) ?? null,
+    [batchItems, activeBatchId],
+  );
+  const activeBatchIndex = activeBatchItem ? batchItems.findIndex((item) => item.id === activeBatchItem.id) : -1;
 
   const enterBatchMode = () => {
     setIsBatchMode(true);
-    setBatchItems((current) => {
+    setBatchPickerId(null);
+    setBatchNotice("");
+    const pending = prompt.trim();
+    if (pending && batchItems.length === 1 && !batchItems[0].prompt.trim()) {
       // 把已经敲在输入框里的提示词带进第 1 条，不清空用户内容。
-      const pending = prompt.trim();
-      if (!pending) return current;
-      if (current.length === 1 && !current[0].prompt.trim()) {
-        return [{ ...current[0], prompt }];
-      }
-      return current;
-    });
+      const next = [{ ...batchItems[0], prompt }];
+      setBatchItems(next);
+      setActiveBatchId(next[0].id);
+      return;
+    }
+    setActiveBatchId(batchItems[0]?.id ?? null);
   };
   const exitBatchMode = () => {
     setIsBatchMode(false);
     setBatchPickerId(null);
-    setBatchExpandedIds([]);
+    setActiveBatchId(null);
+    setBatchNotice("");
   };
   const updateBatchItem = (id: string, patch: Partial<BatchItem>) => {
     setBatchItems((current) => current.map((item) => (item.id === id ? { ...item, ...patch } : item)));
   };
+  const selectBatchItem = (id: string) => {
+    setActiveBatchId(id);
+    setBatchPickerId(null);
+  };
   const addBatchItem = () => {
-    setBatchItems((current) => [...current, createBatchItem()]);
+    const item = createBatchItem();
+    setBatchItems((current) => [...current, item]);
+    setActiveBatchId(item.id);
     setBatchPickerId(null);
   };
   const removeBatchItem = (id: string) => {
-    setBatchItems((current) => (current.length <= 1 ? current : current.filter((item) => item.id !== id)));
-  };
-  const toggleBatchExpanded = (id: string) => {
-    setBatchExpandedIds((current) => (
-      current.includes(id) ? current.filter((value) => value !== id) : [...current, id]
-    ));
+    if (batchItems.length <= 1) return;
+    const index = batchItems.findIndex((item) => item.id === id);
+    const next = batchItems.filter((item) => item.id !== id);
+    setBatchItems(next);
+    if (id === activeBatchId) {
+      setActiveBatchId(next[Math.min(Math.max(index, 0), next.length - 1)]?.id ?? null);
+    }
+    setBatchPickerId(null);
   };
   const toggleBatchReference = (itemId: string, index: number) => {
     setBatchItems((current) => current.map((item) => {
@@ -351,6 +380,96 @@ export function ImageComposer({
       return { ...item, refIndexes: next };
     }));
   };
+
+  /** 按当前分隔符把一段文本拆成多条提示词；分隔符留空时退化为按换行拆。 */
+  const splitBatchPrompts = (raw: string): string[] => {
+    const separator = batchSeparator.trim();
+    const parts = separator ? raw.split(separator) : raw.split(/\r?\n/);
+    return parts.map((part) => part.trim()).filter(Boolean);
+  };
+
+  /** 追加若干条提示词（跳过空串），选中最后一条，返回实际追加条数。 */
+  const appendBatchPrompts = (prompts: string[]): number => {
+    const cleaned = prompts.map((item) => item.trim()).filter(Boolean);
+    if (cleaned.length === 0) return 0;
+    const created = cleaned.map((text) => createBatchItem(text));
+    // ⚠️ 必须用函数式更新：调用方可能刚在同一批次里改过某条（如拆分时改了当前条），
+    // 用闭包里的 batchItems 直接赋值会把那次改动顶掉。
+    setBatchItems((current) => {
+      // 列表里只有一条空行时直接占用它，避免头上留一行空的。
+      const reuseEmpty = current.length === 1 && !current[0].prompt.trim();
+      return reuseEmpty ? created : [...current, ...created];
+    });
+    setActiveBatchId(created[created.length - 1].id);
+    return cleaned.length;
+  };
+
+  /** 导入 xlsx / xls / csv：读各工作表第一列的非空单元格，单元格内再按分隔符拆。 */
+  const handleBatchImportFile = async (file: File) => {
+    try {
+      const workbook = XLSX.read(await file.arrayBuffer(), { type: "array" });
+      const prompts: string[] = [];
+      workbook.SheetNames.forEach((name) => {
+        const sheet = workbook.Sheets[name];
+        if (!sheet) return;
+        const rows = XLSX.utils.sheet_to_json<unknown[]>(sheet, { header: 1, blankrows: false, defval: "" });
+        const firstColumn = rows.map((row) => String(row?.[0] ?? "").trim()).filter(Boolean);
+        if (firstColumn.length > 0) {
+          // 常见表头（「提示词」「prompt」）不该被当成一条提示词。
+          if (BATCH_SHEET_HEADERS.has(firstColumn[0].toLowerCase())) firstColumn.shift();
+          prompts.push(...firstColumn);
+          return;
+        }
+        // 第一列整列为空（提示词横着排）：退回收集表内所有非空单元格。
+        rows.forEach((row) => {
+          (row ?? []).forEach((cell) => {
+            const text = String(cell ?? "").trim();
+            if (text) prompts.push(text);
+          });
+        });
+      });
+      const added = appendBatchPrompts(prompts.flatMap((item) => splitBatchPrompts(item)));
+      setBatchNotice(added > 0 ? `已导入 ${added} 条` : "这个文件里没读到提示词");
+    } catch (error) {
+      setBatchNotice(error instanceof Error ? `导入失败：${error.message}` : "导入失败");
+    }
+    setIsBatchMode(true);
+  };
+
+  /** 把当前输入框（= 选中条目）的内容按分隔符拆开，其余追加为新条目。 */
+  const handleBatchSplitActive = () => {
+    if (!activeBatchItem) return;
+    const parts = splitBatchPrompts(activeBatchItem.prompt);
+    if (parts.length <= 1) {
+      setBatchNotice(`没找到分隔符「${batchSeparator.trim() || "换行"}」`);
+      return;
+    }
+    const [first, ...rest] = parts;
+    updateBatchItem(activeBatchItem.id, { prompt: first });
+    appendBatchPrompts(rest);
+    setBatchNotice(`已拆成 ${parts.length} 条`);
+  };
+
+  const handleBatchActivePromptChange = (value: string) => {
+    if (!activeBatchItem) return;
+    updateBatchItem(activeBatchItem.id, { prompt: value });
+  };
+
+  /** 批量模式下的粘贴：内容带分隔符就一次拆成多条，否则按普通粘贴处理。 */
+  const handleBatchPaste = (event: ClipboardEvent<HTMLTextAreaElement>) => {
+    const text = event.clipboardData?.getData("text") ?? "";
+    const parts = text ? splitBatchPrompts(text) : [];
+    if (parts.length <= 1 || !activeBatchItem) {
+      handleTextareaPaste(event);
+      return;
+    }
+    event.preventDefault();
+    const [first, ...rest] = parts;
+    updateBatchItem(activeBatchItem.id, { prompt: first });
+    appendBatchPrompts(rest);
+    setBatchNotice(`粘贴内容已拆成 ${parts.length} 条`);
+  };
+
   const handleBatchSubmitClick = async () => {
     if (!onBatchSubmit) return;
     const items: BatchSubmitItem[] = batchValidItems.map((item) => ({
@@ -365,8 +484,9 @@ export function ImageComposer({
     if (items.length === 0) return;
     await onBatchSubmit(items);
     setBatchItems([createBatchItem()]);
-    setBatchExpandedIds([]);
     setBatchPickerId(null);
+    setActiveBatchId(null);
+    setBatchNotice("");
     setIsBatchMode(false);
   };
   const requiresImageSize = imageModel.trim().toLowerCase() === "gpt-image-2-4k";
@@ -630,195 +750,280 @@ export function ImageComposer({
               onPointerDown={handlePromptResizePointerDown}
             />
             {isBatchMode ? (
-              <div className="px-2.5 pb-1 pt-3 sm:px-4" data-testid="batch-editor">
-                <div className="mb-2 flex items-center justify-between gap-2 px-0.5">
-                  <span className="text-xs font-medium text-stone-500">每条一个提示词 · 张数与参考图各自独立</span>
+              <div className="border-b border-stone-100 px-2.5 pb-2.5 pt-3 sm:px-4" data-testid="batch-panel">
+                <div className="mb-1.5 flex items-center justify-between gap-2 px-0.5">
+                  <span className="flex items-center gap-1.5 text-xs font-medium text-stone-600">
+                    <Layers className="size-3.5" />
+                    批量提示词
+                  </span>
                   <span className="shrink-0 text-[11px] tabular-nums text-stone-400">
-                    {batchItemCounts.valid} 条有效 · 共 {batchTotalCount} 张
+                    {batchItemCounts.valid} 条 · 共 {batchTotalCount} 张
                   </span>
                 </div>
-                <div className="max-h-[46dvh] space-y-1.5 overflow-y-auto pr-0.5">
+
+                <div className="max-h-[38dvh] space-y-1 overflow-y-auto pr-0.5" data-testid="batch-list">
                   {batchItems.map((item, index) => {
-                    const isPickerOpen = batchPickerId === item.id;
-                    const isExpanded = batchExpandedIds.includes(item.id);
+                    const isActive = item.id === activeBatchId;
                     return (
-                      <div key={item.id} className="rounded-2xl border border-stone-200 bg-white/80" data-testid="batch-row">
-                        <div className="flex items-start gap-1.5 p-1.5">
-                          <span className="mt-2.5 w-4 shrink-0 text-center text-[11px] tabular-nums text-stone-400">{index + 1}</span>
-                          <textarea
-                            data-testid="batch-row-input"
-                            value={item.prompt}
-                            rows={1}
-                            placeholder="输入这条提示词"
-                            onChange={(event) => updateBatchItem(item.id, { prompt: event.target.value })}
-                            className="min-h-9 flex-1 resize-none overflow-hidden rounded-xl border border-stone-200 bg-white px-2.5 py-2 text-sm leading-5 text-stone-800 outline-none placeholder:text-stone-400 focus:border-stone-400"
-                          />
-                          <button
-                            type="button"
-                            data-testid="batch-row-ref"
-                            onClick={() => setBatchPickerId(isPickerOpen ? null : item.id)}
-                            className={cn(
-                              "h-9 shrink-0 rounded-full border px-2.5 text-[11px] font-medium transition",
-                              item.refIndexes.length > 0
-                                ? "border-stone-900 bg-stone-950 text-white hover:bg-stone-800"
-                                : "border-stone-200 bg-white text-stone-500 hover:bg-stone-100",
-                            )}
-                            title="从参考图池里选图（不选 = 纯文生图）"
-                          >
-                            {item.refIndexes.length > 0 ? `参考图 ${item.refIndexes.length}` : "参考图"}
-                          </button>
-                          <div className="flex h-9 shrink-0 items-center rounded-full border border-stone-200 bg-white px-1">
-                            <button
-                              type="button"
-                              className="flex size-6 items-center justify-center rounded-full text-stone-500 hover:bg-stone-100"
-                              onClick={() => updateBatchItem(item.id, { count: Math.max(1, item.count - 1) })}
-                              aria-label="减少张数"
-                            >−</button>
-                            <input
-                              type="number"
-                              inputMode="numeric"
-                              min="1"
-                              max="100"
-                              value={item.count}
-                              onChange={(event) => {
-                                const next = Number(event.target.value);
-                                updateBatchItem(item.id, { count: Number.isFinite(next) && next > 0 ? Math.min(100, Math.floor(next)) : 1 });
-                              }}
-                              className="w-7 border-0 bg-transparent px-0 text-center text-xs font-medium text-stone-700 outline-none"
-                              aria-label="这条生成张数"
-                            />
-                            <button
-                              type="button"
-                              className="flex size-6 items-center justify-center rounded-full text-stone-500 hover:bg-stone-100"
-                              onClick={() => updateBatchItem(item.id, { count: Math.min(100, item.count + 1) })}
-                              aria-label="增加张数"
-                            >+</button>
-                          </div>
-                          <button
-                            type="button"
-                            data-testid="batch-row-params"
-                            onClick={() => toggleBatchExpanded(item.id)}
+                      <div
+                        key={item.id}
+                        data-testid="batch-row"
+                        data-active={isActive ? "true" : "false"}
+                        className={cn(
+                          "group flex items-center gap-1.5 rounded-xl border px-2 py-1.5 transition",
+                          isActive
+                            ? "border-stone-300 bg-white shadow-[0_1px_2px_rgba(15,23,42,0.06)]"
+                            : "border-transparent bg-stone-50 hover:bg-white",
+                        )}
+                      >
+                        <button
+                          type="button"
+                          data-testid="batch-row-select"
+                          onClick={() => selectBatchItem(item.id)}
+                          className="flex min-w-0 flex-1 items-center gap-2 py-0.5 text-left"
+                          title="选中后在上面输入框里编辑这条"
+                        >
+                          <span
                             className={cn(
-                              "h-9 shrink-0 rounded-full border px-2 text-[11px] font-medium transition",
-                              isExpanded ? "border-stone-400 bg-stone-100 text-stone-800" : "border-stone-200 bg-white text-stone-500 hover:bg-stone-100",
+                              "flex size-5 shrink-0 items-center justify-center rounded-full text-[10px] font-medium tabular-nums",
+                              isActive ? "bg-stone-900 text-white" : "bg-stone-200 text-stone-500",
                             )}
-                            title="这一条的模型 / 比例（默认跟随全局）"
                           >
-                            参数
-                          </button>
-                          <button
-                            type="button"
-                            onClick={() => removeBatchItem(item.id)}
-                            disabled={batchItems.length <= 1}
-                            className="flex size-9 shrink-0 items-center justify-center rounded-full text-stone-300 transition hover:bg-rose-50 hover:text-rose-500 disabled:opacity-30 disabled:hover:bg-transparent disabled:hover:text-stone-300"
-                            aria-label="删除这条"
+                            {index + 1}
+                          </span>
+                          <span className={cn("truncate text-[13px] leading-5", item.prompt.trim() ? "text-stone-700" : "text-stone-400")}>
+                            {item.prompt.trim() || "（空）选中后在上面的输入框填写"}
+                          </span>
+                        </button>
+
+                        {item.refIndexes.length > 0 ? (
+                          <span
+                            className="shrink-0 rounded-full bg-stone-900/85 px-1.5 py-0.5 text-[10px] leading-none tabular-nums text-white"
+                            title={`这条已选 ${item.refIndexes.length} 张参考图`}
                           >
-                            <Trash2 className="size-3.5" />
-                          </button>
-                        </div>
-
-                        {isPickerOpen ? (
-                          <div className="border-t border-stone-100 px-2.5 py-2">
-                            {referenceImages.length === 0 ? (
-                              <p className="text-[11px] leading-4 text-stone-400">
-                                还没有参考图。点左边的图片按钮上传，上传的图会进「图池」，所有条目都能选。
-                              </p>
-                            ) : (
-                              <>
-                                <p className="mb-1.5 text-[11px] text-stone-400">点选这条要用的参考图（可多选，不选就是纯文生图）</p>
-                                <div className="flex flex-wrap gap-1.5">
-                                  {referenceImages.map((image, refIndex) => {
-                                    const active = item.refIndexes.includes(refIndex);
-                                    return (
-                                      <button
-                                        key={`${item.id}-ref-${refIndex}`}
-                                        type="button"
-                                        data-testid="batch-ref-option"
-                                        onClick={() => toggleBatchReference(item.id, refIndex)}
-                                        className={cn(
-                                          "relative overflow-hidden rounded-lg border-2 transition",
-                                          active ? "border-stone-900" : "border-transparent hover:border-stone-300",
-                                        )}
-                                        title={image.name}
-                                      >
-                                        {/* eslint-disable-next-line @next/next/no-img-element */}
-                                        <img src={image.dataUrl} alt={image.name} className="size-11 object-cover" />
-                                        {active ? (
-                                          <span className="absolute right-0 top-0 flex size-4 items-center justify-center rounded-bl-md bg-stone-950 text-white">
-                                            <Check className="size-2.5" />
-                                          </span>
-                                        ) : null}
-                                      </button>
-                                    );
-                                  })}
-                                </div>
-                              </>
-                            )}
-                          </div>
+                            {item.refIndexes.length}
+                          </span>
                         ) : null}
 
-                        {isExpanded ? (
-                          <div className="flex flex-wrap items-center gap-1.5 border-t border-stone-100 px-2.5 py-2">
-                            <select
-                              value={item.model ?? imageModel}
-                              onChange={(event) => updateBatchItem(item.id, { model: event.target.value })}
-                              className="h-8 rounded-lg border border-stone-200 bg-white px-2 text-xs text-stone-700 outline-none"
-                              aria-label="这条的模型"
-                            >
-                              {modelOptions.map((option) => (
-                                <option key={option.key} value={option.id}>{option.id}</option>
-                              ))}
-                            </select>
-                            <select
-                              value={item.size ?? imageSize}
-                              onChange={(event) => updateBatchItem(item.id, { size: event.target.value })}
-                              className="h-8 rounded-lg border border-stone-200 bg-white px-2 text-xs text-stone-700 outline-none"
-                              aria-label="这条的比例"
-                            >
-                              {imageSizeOptions.map((option) => (
-                                <option key={option.value || "auto"} value={option.value}>{option.label}</option>
-                              ))}
-                            </select>
-                            <button
-                              type="button"
-                              onClick={() => updateBatchItem(item.id, { model: undefined, size: undefined })}
-                              className="text-[11px] text-stone-400 underline decoration-dotted hover:text-stone-600"
-                            >
-                              恢复跟全局
-                            </button>
-                          </div>
-                        ) : null}
+                        <span className="shrink-0 text-[11px] tabular-nums text-stone-400">×{item.count}</span>
+
+                        <button
+                          type="button"
+                          data-testid="batch-row-remove"
+                          onClick={() => removeBatchItem(item.id)}
+                          className="flex size-6 shrink-0 items-center justify-center rounded-full text-stone-300 opacity-0 transition hover:bg-rose-50 hover:text-rose-500 focus-visible:opacity-100 group-hover:opacity-100"
+                          aria-label={`删除第 ${index + 1} 条`}
+                        >
+                          <X className="size-3.5" />
+                        </button>
                       </div>
                     );
                   })}
                 </div>
+
+                <div className="mt-2 flex flex-wrap items-center gap-x-1 gap-y-1.5 px-0.5 text-[11px]">
+                  <button
+                    type="button"
+                    data-testid="batch-add-row"
+                    onClick={addBatchItem}
+                    className="inline-flex items-center gap-1 rounded-full px-2 py-1 font-medium text-stone-500 transition hover:bg-stone-100 hover:text-stone-800"
+                  >
+                    <Plus className="size-3.5" />
+                    添加一条
+                  </button>
+                  <span className="text-stone-200">·</span>
+                  <button
+                    type="button"
+                    data-testid="batch-import"
+                    onClick={() => batchImportInputRef.current?.click()}
+                    className="inline-flex items-center gap-1 rounded-full px-2 py-1 font-medium text-stone-500 transition hover:bg-stone-100 hover:text-stone-800"
+                  >
+                    <FileSpreadsheet className="size-3.5" />
+                    导入 xlsx
+                  </button>
+                  <span className="text-stone-200">·</span>
+                  <label className="inline-flex items-center gap-1 text-stone-400">
+                    分隔符
+                    <input
+                      data-testid="batch-separator"
+                      value={batchSeparator}
+                      onChange={(event) => setBatchSeparator(event.target.value)}
+                      placeholder="----"
+                      className="h-6 w-14 rounded-md border border-stone-200 bg-white px-1.5 text-center text-[11px] text-stone-700 outline-none focus:border-stone-400"
+                    />
+                  </label>
+                  <button
+                    type="button"
+                    data-testid="batch-split"
+                    onClick={handleBatchSplitActive}
+                    className="inline-flex items-center gap-1 rounded-full px-2 py-1 font-medium text-stone-500 transition hover:bg-stone-100 hover:text-stone-800"
+                  >
+                    <Scissors className="size-3.5" />
+                    拆分输入框
+                  </button>
+                  {batchNotice ? <span data-testid="batch-notice" className="text-stone-400">{batchNotice}</span> : null}
+                </div>
+
+                <input
+                  ref={batchImportInputRef}
+                  type="file"
+                  accept=".xlsx,.xls,.csv"
+                  data-testid="batch-import-input"
+                  className="hidden"
+                  onChange={(event) => {
+                    const input = event.target;
+                    const file = input.files?.[0];
+                    if (!file) return;
+                    // ⚠️ 必须先读完再清空 input：提前 value = "" 会让拿到的 File 变成不可读，
+                    // Chrome 会抛 NotReadableError（permission problems ...）。
+                    void handleBatchImportFile(file).finally(() => {
+                      input.value = "";
+                    });
+                  }}
+                />
+              </div>
+            ) : null}
+
+            <PromptComposerTextarea
+              ref={textareaRef}
+              value={isBatchMode ? (activeBatchItem?.prompt ?? "") : prompt}
+              style={promptHeight ? { height: `${promptHeight}px` } : undefined}
+              onValueChange={isBatchMode ? handleBatchActivePromptChange : onPromptChange}
+              onPaste={isBatchMode ? handleBatchPaste : handleTextareaPaste}
+              placeholder={
+                isBatchMode
+                  ? activeBatchIndex >= 0
+                    ? `编辑第 ${activeBatchIndex + 1} 条提示词（粘贴含 ${batchSeparator.trim() || "换行"} 的内容可一次拆成多条）`
+                    : "先在上面选一条，或点「添加一条」"
+                  : referenceImages.length > 0
+                    ? "描述你希望如何修改参考图"
+                    : "输入你想要生成的画面，也可直接粘贴图片"
+              }
+              onSubmit={isBatchMode ? handleBatchSubmitClick : onSubmit}
+              onOptimize={isBatchMode ? undefined : onOptimizePrompt}
+              isOptimizing={isBatchMode ? false : isOptimizingPrompt}
+            />
+
+            {isBatchMode && activeBatchItem ? (
+              <div
+                className="flex flex-wrap items-center gap-1.5 border-t border-stone-100 px-2.5 py-2 sm:px-4"
+                data-testid="batch-row-settings"
+              >
+                <span className="shrink-0 text-[11px] text-stone-400">第 {activeBatchIndex + 1} 条</span>
                 <button
                   type="button"
-                  data-testid="batch-add-row"
-                  onClick={addBatchItem}
-                  className="mt-1.5 inline-flex items-center gap-1 rounded-full px-2 py-1 text-[11px] font-medium text-stone-500 transition hover:bg-stone-100 hover:text-stone-800"
+                  data-testid="batch-row-ref"
+                  onClick={() => setBatchPickerId(batchPickerId === activeBatchItem.id ? null : activeBatchItem.id)}
+                  className={cn(
+                    "h-7 shrink-0 rounded-full border px-2.5 text-[11px] font-medium transition",
+                    activeBatchItem.refIndexes.length > 0
+                      ? "border-stone-900 bg-stone-950 text-white hover:bg-stone-800"
+                      : "border-stone-200 bg-white text-stone-500 hover:bg-stone-100",
+                  )}
+                  title="从参考图池里选图（不选 = 纯文生图）"
                 >
-                  <Plus className="size-3.5" />
-                  添加一条
+                  {activeBatchItem.refIndexes.length > 0 ? `参考图 ${activeBatchItem.refIndexes.length}` : "参考图"}
                 </button>
+                <div className="flex h-7 shrink-0 items-center rounded-full border border-stone-200 bg-white px-1">
+                  <button
+                    type="button"
+                    className="flex size-5 items-center justify-center rounded-full text-stone-500 hover:bg-stone-100"
+                    onClick={() => updateBatchItem(activeBatchItem.id, { count: Math.max(1, activeBatchItem.count - 1) })}
+                    aria-label="减少张数"
+                  >−</button>
+                  <input
+                    type="number"
+                    inputMode="numeric"
+                    min="1"
+                    max="100"
+                    value={activeBatchItem.count}
+                    onChange={(event) => {
+                      const next = Number(event.target.value);
+                      updateBatchItem(activeBatchItem.id, { count: Number.isFinite(next) && next > 0 ? Math.min(100, Math.floor(next)) : 1 });
+                    }}
+                    className="w-7 border-0 bg-transparent px-0 text-center text-xs font-medium text-stone-700 outline-none"
+                    aria-label="这条生成张数"
+                  />
+                  <button
+                    type="button"
+                    className="flex size-5 items-center justify-center rounded-full text-stone-500 hover:bg-stone-100"
+                    onClick={() => updateBatchItem(activeBatchItem.id, { count: Math.min(100, activeBatchItem.count + 1) })}
+                    aria-label="增加张数"
+                  >+</button>
+                </div>
+                <select
+                  data-testid="batch-row-model"
+                  value={activeBatchItem.model ?? imageModel}
+                  onChange={(event) => updateBatchItem(activeBatchItem.id, { model: event.target.value })}
+                  className="h-7 max-w-[9.5rem] shrink-0 rounded-full border border-stone-200 bg-white px-2 text-[11px] text-stone-600 outline-none"
+                  title="这条用哪个模型（默认跟随全局）"
+                  aria-label="这条的模型"
+                >
+                  {modelOptions.map((option) => (
+                    <option key={option.key} value={option.id}>{option.id}</option>
+                  ))}
+                </select>
+                <select
+                  data-testid="batch-row-size"
+                  value={activeBatchItem.size ?? imageSize}
+                  onChange={(event) => updateBatchItem(activeBatchItem.id, { size: event.target.value })}
+                  className="h-7 shrink-0 rounded-full border border-stone-200 bg-white px-2 text-[11px] text-stone-600 outline-none"
+                  title="这条用哪个比例（默认跟随全局）"
+                  aria-label="这条的比例"
+                >
+                  {imageSizeOptions.map((option) => (
+                    <option key={option.value || "auto"} value={option.value}>{option.label}</option>
+                  ))}
+                </select>
+
+                {batchPickerId === activeBatchItem.id ? (
+                  <div className="w-full pt-1">
+                    {referenceImages.length === 0 ? (
+                      <p className="text-[11px] leading-4 text-stone-400">
+                        还没有参考图。点左下角图片按钮上传，上传的图会进「图池」，每条都能选。
+                      </p>
+                    ) : (
+                      <div className="flex flex-wrap gap-1.5">
+                        {referenceImages.map((image, refIndex) => {
+                          const active = activeBatchItem.refIndexes.includes(refIndex);
+                          return (
+                            <button
+                              key={`${activeBatchItem.id}-ref-${refIndex}`}
+                              type="button"
+                              data-testid="batch-ref-option"
+                              onClick={() => toggleBatchReference(activeBatchItem.id, refIndex)}
+                              className={cn(
+                                "relative overflow-hidden rounded-lg border-2 transition",
+                                active ? "border-stone-900" : "border-transparent hover:border-stone-300",
+                              )}
+                              title={image.name}
+                            >
+                              {/* eslint-disable-next-line @next/next/no-img-element */}
+                              <img src={image.dataUrl} alt={image.name} className="size-11 object-cover" />
+                              {active ? (
+                                <span className="absolute right-0 top-0 flex size-4 items-center justify-center rounded-bl-md bg-stone-950 text-white">
+                                  <Check className="size-2.5" />
+                                </span>
+                              ) : null}
+                            </button>
+                          );
+                        })}
+                      </div>
+                    )}
+                  </div>
+                ) : null}
+
+                {activeBatchItem.model || activeBatchItem.size ? (
+                  <button
+                    type="button"
+                    onClick={() => updateBatchItem(activeBatchItem.id, { model: undefined, size: undefined })}
+                    className="shrink-0 text-[11px] text-stone-400 underline decoration-dotted hover:text-stone-600"
+                  >
+                    恢复跟全局
+                  </button>
+                ) : null}
               </div>
-            ) : (
-            <PromptComposerTextarea
-                ref={textareaRef}
-                value={prompt}
-                style={promptHeight ? { height: `${promptHeight}px` } : undefined}
-                onValueChange={onPromptChange}
-                onPaste={handleTextareaPaste}
-                placeholder={
-                  referenceImages.length > 0
-                    ? "描述你希望如何修改参考图"
-                    : "输入你想要生成的画面，也可直接粘贴图片"
-                }
-                onSubmit={onSubmit}
-                onOptimize={onOptimizePrompt}
-                isOptimizing={isOptimizingPrompt}
-              />
-            )}
+            ) : null}
             {isDraggingImage ? (
               <div className="pointer-events-none absolute inset-0 z-20 flex items-center justify-center rounded-[24px] border-2 border-dashed border-stone-900 bg-white/85 text-sm font-medium text-stone-900 backdrop-blur-[1px] sm:rounded-[32px]">
                 <div className="flex items-center gap-2 rounded-full bg-stone-950 px-4 py-2 text-white shadow-lg">