From a01c09dc9f4b976a5fa4c5142f72ac13236cc0dd Mon Sep 17 00:00:00 2001
From: MikiVL <mikivl@MikiVLdeMacBook-Air.local>
Date: Tue, 5 May 2026 13:47:42 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=89=B9=E9=87=8F=E7=94=9F=E6=88=90?=
 =?UTF-8?q?=E9=A1=B5=EF=BC=88=E6=96=87=E4=BB=B6/=E6=89=8B=E5=8A=A8?=
 =?UTF-8?q?=E8=BE=93=E5=85=A5=E3=80=81=E8=BF=9B=E5=BA=A6=E5=B1=95=E7=A4=BA?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 renderer/src/components/ProgressPanel.jsx |  45 +++++
 renderer/src/pages/Generate.jsx           | 196 +++++++++++++++++++++-
 2 files changed, 240 insertions(+), 1 deletion(-)
 create mode 100644 renderer/src/components/ProgressPanel.jsx

diff --git a/renderer/src/components/ProgressPanel.jsx b/renderer/src/components/ProgressPanel.jsx
new file mode 100644
index 0000000..d4fc845
--- /dev/null
+++ b/renderer/src/components/ProgressPanel.jsx
@@ -0,0 +1,45 @@
+import React from "react";
+
+export default function ProgressPanel({ results, outputDir, onOpenDir }) {
+  if (!results) return null;
+
+  const success = results.filter((r) => r.status === "success").length;
+  const failed = results.filter((r) => r.status === "error").length;
+
+  return (
+    <div className="space-y-4">
+      <div className="flex gap-4 text-sm">
+        <span className="text-green-600 font-medium">成功：{success}</span>
+        {failed > 0 && <span className="text-red-500 font-medium">失败：{failed}</span>}
+      </div>
+      {outputDir && (
+        <button
+          onClick={onOpenDir}
+          className="text-blue-600 text-sm hover:underline"
+        >
+          打开输出文件夹 →
+        </button>
+      )}
+      {failed > 0 && (
+        <div className="border border-red-100 rounded bg-red-50 p-3 space-y-1">
+          <p className="text-xs font-medium text-red-600">失败详情：</p>
+          {results
+            .filter((r) => r.status === "error")
+            .map((r) => (
+              <p key={r.row} className="text-xs text-red-500">
+                第 {r.row + 1} 行：{r.error}
+              </p>
+            ))}
+        </div>
+      )}
+      <div className="max-h-48 overflow-y-auto space-y-1">
+        {results.map((r) => (
+          <div key={r.row} className={`text-xs px-2 py-1 rounded flex justify-between ${r.status === "success" ? "bg-green-50 text-green-700" : "bg-red-50 text-red-600"}`}>
+            <span>{r.status === "success" ? "✓" : "✗"} 第 {r.row + 1} 行</span>
+            <span className="truncate ml-2 text-gray-400">{r.file?.split("/").pop() || r.file?.split("\\").pop()}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/renderer/src/pages/Generate.jsx b/renderer/src/pages/Generate.jsx
index f5c1a86..12b6aca 100644
--- a/renderer/src/pages/Generate.jsx
+++ b/renderer/src/pages/Generate.jsx
@@ -1 +1,195 @@
-export default function Generate() { return <div>Generate</div>; }
+import React, { useState, useEffect } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+import ProgressPanel from "../components/ProgressPanel";
+
+export default function Generate() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const preselectedId = location.state?.templateId;
+
+  const [templates, setTemplates] = useState([]);
+  const [selectedId, setSelectedId] = useState(preselectedId || "");
+  const [dataSource, setDataSource] = useState("file");
+  const [dataFilePath, setDataFilePath] = useState("");
+  const [manualRows, setManualRows] = useState([{}]);
+  const [outputDir, setOutputDir] = useState("");
+  const [filenamePattern, setFilenamePattern] = useState("输出_{{编号}}.xlsx");
+  const [generating, setGenerating] = useState(false);
+  const [results, setResults] = useState(null);
+
+  useEffect(() => {
+    window.api.listTemplates().then(setTemplates);
+  }, []);
+
+  const selectedTemplate = templates.find((t) => t.id === selectedId);
+  const fields = selectedTemplate?.fields || [];
+
+  async function handleSelectDataFile() {
+    const path = await window.api.selectFile([
+      { name: "Excel 文件", extensions: ["xlsx"] },
+    ]);
+    if (path) setDataFilePath(path);
+  }
+
+  async function handleSelectOutputDir() {
+    const dir = await window.api.selectDirectory();
+    if (dir) setOutputDir(dir);
+  }
+
+  function updateManualRow(rowIdx, fieldName, value) {
+    setManualRows((prev) => {
+      const next = [...prev];
+      next[rowIdx] = { ...next[rowIdx], [fieldName]: value };
+      return next;
+    });
+  }
+
+  function addManualRow() {
+    setManualRows((prev) => [...prev, {}]);
+  }
+
+  function removeManualRow(idx) {
+    setManualRows((prev) => prev.filter((_, i) => i !== idx));
+  }
+
+  async function handleGenerate() {
+    if (!selectedId) return alert("请选择模板");
+    if (!outputDir) return alert("请选择输出目录");
+
+    setGenerating(true);
+    setResults(null);
+    try {
+      const result = await window.api.generate({
+        template_path: selectedTemplate.file_path,
+        fields: fields,
+        rows: dataSource === "manual" ? manualRows : null,
+        data_file_path: dataSource === "file" ? dataFilePath : null,
+        output_dir: outputDir,
+        filename_pattern: filenamePattern,
+      });
+      setResults(result.results);
+    } finally {
+      setGenerating(false);
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 p-8">
+      <div className="max-w-2xl mx-auto space-y-6">
+        <div className="flex items-center justify-between">
+          <h1 className="text-xl font-bold">批量生成</h1>
+          <button onClick={() => navigate("/templates")} className="text-gray-400 hover:text-gray-600 text-sm">
+            ← 返回模板列表
+          </button>
+        </div>
+
+        <div className="bg-white rounded-lg border p-6 space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">选择模板</label>
+            <select
+              value={selectedId}
+              onChange={(e) => setSelectedId(e.target.value)}
+              className="w-full border rounded px-3 py-2 text-sm"
+            >
+              <option value="">请选择...</option>
+              {templates.map((t) => (
+                <option key={t.id} value={t.id}>{t.name}</option>
+              ))}
+            </select>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">数据来源</label>
+            <div className="flex gap-4 text-sm">
+              <label className="flex items-center gap-1 cursor-pointer">
+                <input type="radio" value="file" checked={dataSource === "file"} onChange={() => setDataSource("file")} />
+                上传 Excel 数据源
+              </label>
+              <label className="flex items-center gap-1 cursor-pointer">
+                <input type="radio" value="manual" checked={dataSource === "manual"} onChange={() => setDataSource("manual")} />
+                手动填写
+              </label>
+            </div>
+          </div>
+
+          {dataSource === "file" ? (
+            <div className="flex gap-2">
+              <input readOnly value={dataFilePath} className="flex-1 border rounded px-3 py-2 text-sm bg-gray-50" placeholder="选择数据源 Excel 文件..." />
+              <button onClick={handleSelectDataFile} className="border rounded px-4 py-2 text-sm hover:bg-gray-100">选择文件</button>
+            </div>
+          ) : (
+            <div className="overflow-x-auto">
+              <table className="text-sm border-collapse w-full">
+                <thead>
+                  <tr>
+                    {fields.map((f) => (
+                      <th key={f.id} className="border px-2 py-1 bg-gray-50 text-left text-xs font-medium">{f.name}</th>
+                    ))}
+                    <th className="border px-2 py-1 bg-gray-50 w-8"></th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {manualRows.map((row, idx) => (
+                    <tr key={idx}>
+                      {fields.map((f) => (
+                        <td key={f.id} className="border px-1 py-1">
+                          <input
+                            value={row[f.name] || ""}
+                            onChange={(e) => updateManualRow(idx, f.name, e.target.value)}
+                            className="w-full px-1 py-0.5 text-sm outline-none"
+                          />
+                        </td>
+                      ))}
+                      <td className="border px-2 py-1 text-center">
+                        <button onClick={() => removeManualRow(idx)} className="text-gray-300 hover:text-red-500 text-xs">✕</button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+              <button onClick={addManualRow} className="text-blue-600 text-xs mt-2 hover:underline">+ 添加行</button>
+            </div>
+          )}
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">输出目录</label>
+            <div className="flex gap-2">
+              <input readOnly value={outputDir} className="flex-1 border rounded px-3 py-2 text-sm bg-gray-50" placeholder="选择输出文件夹..." />
+              <button onClick={handleSelectOutputDir} className="border rounded px-4 py-2 text-sm hover:bg-gray-100">选择目录</button>
+            </div>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">输出文件命名规则</label>
+            <input
+              value={filenamePattern}
+              onChange={(e) => setFilenamePattern(e.target.value)}
+              className="w-full border rounded px-3 py-2 text-sm font-mono"
+              placeholder="如：{{编号}}_报告.xlsx"
+            />
+            <p className="text-xs text-gray-400 mt-1">支持使用 {"{{字段名}}"} 作为变量</p>
+          </div>
+
+          <button
+            onClick={handleGenerate}
+            disabled={generating || !selectedId || !outputDir}
+            className="w-full bg-blue-600 text-white rounded px-4 py-2 text-sm hover:bg-blue-700 disabled:opacity-50"
+          >
+            {generating ? "生成中..." : "开始生成"}
+          </button>
+        </div>
+
+        {results && (
+          <div className="bg-white rounded-lg border p-6">
+            <h2 className="font-medium mb-4">生成结果</h2>
+            <ProgressPanel
+              results={results}
+              outputDir={outputDir}
+              onOpenDir={() => window.api.openDirectory(outputDir)}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}