fix: 生成页错误处理，编辑模式支持更新模板文件

docs: 添加 README 和 .gitignore
fix: 生成前校验数据源文件路径
2026-05-05 14:03:19 +08:00 · 2026-05-05 13:54:38 +08:00 · 2026-05-05 13:53:50 +08:00 · 2026-05-05 13:47:42 +08:00 · 2026-05-05 13:46:17 +08:00 · 2026-05-05 13:45:26 +08:00
16 changed files with 724 additions and 6 deletions
--- a/.gitignore
+++ b/.gitignore
@ -39,6 +39,7 @@ Thumbs.db

 # Electron
 dist/
+renderer/dist/
 out/

 # Database
--- a/README.md
+++ b/README.md
@ -0,0 +1,73 @@
+# Excel 批量编辑器
+
+跨平台桌面应用（Mac/Windows），支持上传 Excel 模板、标记可替换字段，批量生成填充好的输出文件。
+
+## 开发环境
+
+### 前置条件
+- Node.js 18+
+- Python 3.9+（或 3.11+ 更佳）
+
+### 安装依赖
+
+```bash
+npm install
+cd /path/to/excel-batch-editor && source python/.venv/bin/activate 2>/dev/null || python3 -m venv python/.venv && source python/.venv/bin/activate && pip install -r python/requirements.txt
+```
+
+或分步执行：
+
+```bash
+# Node.js 依赖
+npm install
+
+# Python 依赖
+cd excel-batch-editor
+python3 -m venv python/.venv
+source python/.venv/bin/activate   # Windows: python\.venv\Scripts\activate
+pip install -r python/requirements.txt
+```
+
+### 开发模式启动
+
+```bash
+export PYTHON_PATH=$(which python3)   # 或使用 venv：export PYTHON_PATH=$(pwd)/python/.venv/bin/python3
+NODE_ENV=development npm run dev
+```
+
+应用将在 `http://localhost:5173` 启动渲染进程，Electron 窗口自动打开。
+
+### 运行 Python 测试
+
+```bash
+source python/.venv/bin/activate
+pytest tests/python/ -v
+```
+
+## 项目结构
+
+```
+excel-batch-editor/
+├── electron/          # Electron 主进程
+│   ├── main.js        # 入口
+│   ├── preload.js     # IPC 桥接
+│   ├── ipc/           # IPC handler
+│   └── db/            # SQLite 操作
+├── renderer/          # React 前端（Vite）
+│   └── src/
+│       ├── pages/     # 页面组件
+│       └── components/ # 通用组件
+├── python/            # Python Excel 处理
+│   ├── main.py        # stdin/stdout 入口
+│   ├── parser.py      # 模板解析
+│   └── generator.py   # 批量生成
+└── tests/             # 测试
+    └── python/        # Python 单元测试
+```
+
+## 技术栈
+
+- **桌面壳**：Electron 28（跨平台）
+- **UI**：React 18 + Vite + Tailwind CSS
+- **Excel 处理**：Python 3 + openpyxl
+- **本地存储**：SQLite（better-sqlite3）
--- a/electron/db/templateDb.js
+++ b/electron/db/templateDb.js
@ -19,11 +19,11 @@ function saveTemplate({ name, grp = "", file_path, fields = [] }) {
  return id;
 }

-function updateTemplate(id, { name, grp, fields }) {
+function updateTemplate(id, { name, grp, file_path, fields }) {
  const now = new Date().toISOString();
-  if (name !== undefined || grp !== undefined) {
-    db.prepare("UPDATE templates SET name = COALESCE(?, name), grp = COALESCE(?, grp), updated_at = ? WHERE id = ?")
-      .run(name ?? null, grp ?? null, now, id);
+  if (name !== undefined || grp !== undefined || file_path !== undefined) {
+    db.prepare("UPDATE templates SET name = COALESCE(?, name), grp = COALESCE(?, grp), file_path = COALESCE(?, file_path), updated_at = ? WHERE id = ?")
+      .run(name ?? null, grp ?? null, file_path ?? null, now, id);
  }
  if (fields !== undefined) {
    db.prepare("DELETE FROM fields WHERE template_id = ?").run(id);
--- a/electron/ipc/generateIpc.js
+++ b/electron/ipc/generateIpc.js
@ -0,0 +1,6 @@
+const { ipcMain } = require("electron");
+const { callPython } = require("./templateIpc");
+
+ipcMain.handle("generate:run", async (_, req) => {
+  return callPython({ action: "generate", ...req });
+});
--- a/electron/ipc/templateIpc.js
+++ b/electron/ipc/templateIpc.js
@ -28,6 +28,7 @@ function callPython(payload) {
        reject(new Error("Python 返回了无效 JSON: " + stdout));
      }
    });
+    proc.on("error", (e) => reject(new Error("Python 进程启动失败: " + e.message)));
    proc.stdin.write(JSON.stringify(payload) + "\n");
    proc.stdin.end();
  });
--- a/package.json
+++ b/package.json
@ -5,8 +5,8 @@
  "scripts": {
    "start": "electron .",
    "dev": "concurrently \"npm run dev:renderer\" \"wait-on http://localhost:5173 && electron .\"",
-    "dev:renderer": "vite --config renderer/vite.config.js",
-    "build": "vite build --config renderer/vite.config.js && electron-builder",
+    "dev:renderer": "vite --config renderer/vite.config.mjs",
+    "build": "vite build --config renderer/vite.config.mjs && electron-builder",
    "test": "cd /Users/mikivl/workspace/excel-batch-editor && python3 -m pytest tests/python/ -v"
  },
  "devDependencies": {
--- a/renderer/index.html
+++ b/renderer/index.html
@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="zh">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Excel 批量编辑器</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
--- a/renderer/src/App.jsx
+++ b/renderer/src/App.jsx
@ -0,0 +1,19 @@
+import React from "react";
+import { MemoryRouter, Routes, Route, Navigate } from "react-router-dom";
+import TemplateList from "./pages/TemplateList";
+import TemplateConfig from "./pages/TemplateConfig";
+import Generate from "./pages/Generate";
+
+export default function App() {
+  return (
+    <MemoryRouter>
+      <Routes>
+        <Route path="/" element={<Navigate to="/templates" replace />} />
+        <Route path="/templates" element={<TemplateList />} />
+        <Route path="/templates/new" element={<TemplateConfig />} />
+        <Route path="/templates/:id/edit" element={<TemplateConfig />} />
+        <Route path="/generate" element={<Generate />} />
+      </Routes>
+    </MemoryRouter>
+  );
+}
--- a/renderer/src/components/FieldMappingEditor.jsx
+++ b/renderer/src/components/FieldMappingEditor.jsx
@ -0,0 +1,77 @@
+import React from "react";
+
+const FIELD_TYPES = [
+  { value: "text", label: "文本" },
+  { value: "image", label: "图片" },
+  { value: "table_range", label: "批量填充区域" },
+];
+
+export default function FieldMappingEditor({ fields, onChange }) {
+  function addField() {
+    onChange([...fields, { name: "", type: "text", sheet: "Sheet1", cell: "" }]);
+  }
+
+  function updateField(index, patch) {
+    const next = fields.map((f, i) => (i === index ? { ...f, ...patch } : f));
+    onChange(next);
+  }
+
+  function removeField(index) {
+    onChange(fields.filter((_, i) => i !== index));
+  }
+
+  return (
+    <div className="space-y-2">
+      <div className="grid grid-cols-5 gap-2 text-xs text-gray-400 font-medium px-1">
+        <span>字段名</span>
+        <span>类型</span>
+        <span>Sheet</span>
+        <span>单元格</span>
+        <span></span>
+      </div>
+      {fields.map((f, i) => (
+        <div key={i} className="grid grid-cols-5 gap-2 items-center">
+          <input
+            value={f.name}
+            onChange={(e) => updateField(i, { name: e.target.value })}
+            placeholder="如：编号"
+            className="border rounded px-2 py-1 text-sm"
+          />
+          <select
+            value={f.type}
+            onChange={(e) => updateField(i, { type: e.target.value })}
+            className="border rounded px-2 py-1 text-sm"
+          >
+            {FIELD_TYPES.map((t) => (
+              <option key={t.value} value={t.value}>{t.label}</option>
+            ))}
+          </select>
+          <input
+            value={f.sheet}
+            onChange={(e) => updateField(i, { sheet: e.target.value })}
+            placeholder="Sheet1"
+            className="border rounded px-2 py-1 text-sm"
+          />
+          <input
+            value={f.cell}
+            onChange={(e) => updateField(i, { cell: e.target.value })}
+            placeholder="如：B3"
+            className="border rounded px-2 py-1 text-sm font-mono"
+          />
+          <button
+            onClick={() => removeField(i)}
+            className="text-gray-300 hover:text-red-500 text-sm"
+          >
+            删除
+          </button>
+        </div>
+      ))}
+      <button
+        onClick={addField}
+        className="text-blue-600 text-sm hover:underline"
+      >
+        + 添加字段
+      </button>
+    </div>
+  );
+}
--- a/renderer/src/components/ProgressPanel.jsx
+++ 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>
+  );
+}
--- a/renderer/src/index.css
+++ b/renderer/src/index.css
@ -0,0 +1 @@
+@import "tailwindcss";
--- a/renderer/src/main.jsx
+++ b/renderer/src/main.jsx
@ -0,0 +1,6 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root")).render(<App />);
--- a/renderer/src/pages/Generate.jsx
+++ b/renderer/src/pages/Generate.jsx
@ -0,0 +1,198 @@
+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("请选择输出目录");
+    if (dataSource === "file" && !dataFilePath) return alert("请选择数据源 Excel 文件");
+
+    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);
+    } catch (err) {
+      alert("生成失败：" + (err.message || String(err)));
+    } 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>
+  );
+}
--- a/renderer/src/pages/TemplateConfig.jsx
+++ b/renderer/src/pages/TemplateConfig.jsx
@ -0,0 +1,153 @@
+import React, { useState, useEffect } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import FieldMappingEditor from "../components/FieldMappingEditor";
+
+export default function TemplateConfig() {
+  const navigate = useNavigate();
+  const { id } = useParams();
+  const isEdit = Boolean(id);
+
+  const [name, setName] = useState("");
+  const [grp, setGrp] = useState("");
+  const [filePath, setFilePath] = useState("");
+  const [originalFilePath, setOriginalFilePath] = useState("");
+  const [fields, setFields] = useState([]);
+  const [autoDetected, setAutoDetected] = useState([]);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    if (isEdit) {
+      window.api.listTemplates().then((templates) => {
+        const t = templates.find((t) => t.id === id);
+        if (t) {
+          setName(t.name);
+          setGrp(t.grp || "");
+          setFilePath(t.file_path);
+          setOriginalFilePath(t.file_path);
+          setFields(t.fields || []);
+        }
+      });
+    }
+  }, [id]);
+
+  async function handleSelectFile() {
+    const path = await window.api.selectFile([
+      { name: "Excel 文件", extensions: ["xlsx"] },
+    ]);
+    if (!path) return;
+    setFilePath(path);
+    const result = await window.api.parseTemplate(path);
+    if (result.placeholders?.length > 0) {
+      setAutoDetected(result.placeholders);
+      const detected = result.placeholders.map((p) => ({
+        name: p.name,
+        type: "text",
+        sheet: p.sheet,
+        cell: p.cell,
+      }));
+      setFields((prev) => {
+        const existing = prev.map((f) => f.name);
+        const newOnes = detected.filter((d) => !existing.includes(d.name));
+        return [...prev, ...newOnes];
+      });
+    }
+  }
+
+  async function handleSave() {
+    if (!name.trim() || !filePath) return alert("请填写模板名称并选择文件");
+    setSaving(true);
+    try {
+      if (!isEdit) {
+        const tempId = Date.now().toString();
+        const storedPath = await window.api.copyFileToAppData(filePath, tempId);
+        await window.api.saveTemplate({ name, grp, file_path: storedPath, fields });
+      } else {
+        let storedPath;
+        if (filePath !== originalFilePath) {
+          storedPath = await window.api.copyFileToAppData(filePath, id);
+        }
+        await window.api.updateTemplate(id, { name, grp, file_path: storedPath, fields });
+      }
+      navigate("/templates");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 p-8">
+      <div className="max-w-2xl mx-auto bg-white rounded-lg border p-6 space-y-6">
+        <div className="flex items-center justify-between">
+          <h1 className="text-xl font-bold">{isEdit ? "编辑模板" : "新建模板"}</h1>
+          <button onClick={() => navigate("/templates")} className="text-gray-400 hover:text-gray-600 text-sm">
+            ← 返回
+          </button>
+        </div>
+
+        <div className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">模板名称</label>
+            <input
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              className="w-full border rounded px-3 py-2 text-sm"
+              placeholder="如：月度报告模板"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">分组（可选）</label>
+            <input
+              value={grp}
+              onChange={(e) => setGrp(e.target.value)}
+              className="w-full border rounded px-3 py-2 text-sm"
+              placeholder="如：财务部"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Excel 模板文件</label>
+            <div className="flex gap-2">
+              <input
+                readOnly
+                value={filePath}
+                className="flex-1 border rounded px-3 py-2 text-sm bg-gray-50"
+                placeholder="点击右侧按钮选择文件..."
+              />
+              <button
+                onClick={handleSelectFile}
+                className="border rounded px-4 py-2 text-sm hover:bg-gray-100"
+              >
+                选择文件
+              </button>
+            </div>
+            {autoDetected.length > 0 && (
+              <p className="text-xs text-green-600 mt-1">
+                已自动识别 {autoDetected.length} 个占位符
+              </p>
+            )}
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">字段映射</label>
+            <FieldMappingEditor fields={fields} onChange={setFields} />
+          </div>
+        </div>
+
+        <div className="flex justify-end gap-2 pt-4 border-t">
+          <button
+            onClick={() => navigate("/templates")}
+            className="border rounded px-4 py-2 text-sm hover:bg-gray-100"
+          >
+            取消
+          </button>
+          <button
+            onClick={handleSave}
+            disabled={saving}
+            className="bg-blue-600 text-white rounded px-4 py-2 text-sm hover:bg-blue-700 disabled:opacity-50"
+          >
+            {saving ? "保存中..." : "保存模板"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/renderer/src/pages/TemplateList.jsx
+++ b/renderer/src/pages/TemplateList.jsx
@ -0,0 +1,112 @@
+import React, { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+export default function TemplateList() {
+  const [templates, setTemplates] = useState([]);
+  const [selected, setSelected] = useState(null);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    window.api.listTemplates().then(setTemplates);
+  }, []);
+
+  async function handleDelete(id) {
+    if (!confirm("确认删除此模板？")) return;
+    await window.api.deleteTemplate(id);
+    setTemplates((prev) => prev.filter((t) => t.id !== id));
+    if (selected?.id === id) setSelected(null);
+  }
+
+  const groups = [...new Set(templates.map((t) => t.grp || "未分组"))];
+
+  return (
+    <div className="flex h-screen bg-gray-50">
+      {/* 左侧模板列表 */}
+      <aside className="w-72 bg-white border-r flex flex-col">
+        <div className="p-4 border-b flex gap-2">
+          <button
+            onClick={() => navigate("/templates/new")}
+            className="flex-1 bg-blue-600 text-white rounded px-3 py-2 text-sm hover:bg-blue-700"
+          >
+            + 新建模板
+          </button>
+        </div>
+        <div className="flex-1 overflow-y-auto p-2">
+          {groups.map((grp) => (
+            <div key={grp} className="mb-4">
+              <div className="text-xs text-gray-400 font-semibold px-2 py-1 uppercase">{grp}</div>
+              {templates
+                .filter((t) => (t.grp || "未分组") === grp)
+                .map((t) => (
+                  <div
+                    key={t.id}
+                    onClick={() => setSelected(t)}
+                    className={`flex items-center justify-between rounded px-3 py-2 cursor-pointer text-sm ${
+                      selected?.id === t.id ? "bg-blue-50 text-blue-700" : "hover:bg-gray-100"
+                    }`}
+                  >
+                    <span className="truncate">{t.name}</span>
+                    <button
+                      onClick={(e) => { e.stopPropagation(); handleDelete(t.id); }}
+                      className="text-gray-300 hover:text-red-500 ml-2 text-xs"
+                    >
+                      删除
+                    </button>
+                  </div>
+                ))}
+            </div>
+          ))}
+        </div>
+      </aside>
+
+      {/* 右侧详情 */}
+      <main className="flex-1 p-8">
+        {selected ? (
+          <div>
+            <div className="flex items-center justify-between mb-6">
+              <h1 className="text-2xl font-bold">{selected.name}</h1>
+              <div className="flex gap-2">
+                <button
+                  onClick={() => navigate(`/templates/${selected.id}/edit`)}
+                  className="border rounded px-4 py-2 text-sm hover:bg-gray-100"
+                >
+                  编辑字段映射
+                </button>
+                <button
+                  onClick={() => navigate("/generate", { state: { templateId: selected.id } })}
+                  className="bg-blue-600 text-white rounded px-4 py-2 text-sm hover:bg-blue-700"
+                >
+                  批量生成
+                </button>
+              </div>
+            </div>
+            <div className="bg-white rounded-lg border p-6 space-y-3 text-sm text-gray-600">
+              <p><span className="font-medium text-gray-800">分组：</span>{selected.grp || "未分组"}</p>
+              <p><span className="font-medium text-gray-800">字段数量：</span>{selected.fields?.length ?? 0}</p>
+              <p><span className="font-medium text-gray-800">创建时间：</span>{new Date(selected.created_at).toLocaleString("zh-CN")}</p>
+              <p><span className="font-medium text-gray-800">最后修改：</span>{new Date(selected.updated_at).toLocaleString("zh-CN")}</p>
+              {selected.fields?.length > 0 && (
+                <div>
+                  <p className="font-medium text-gray-800 mb-2">字段列表：</p>
+                  <div className="space-y-1">
+                    {selected.fields.map((f) => (
+                      <div key={f.id} className="flex gap-4 bg-gray-50 rounded px-3 py-1">
+                        <span className="font-mono text-blue-600">{"{{"}{f.name}{"}}"}</span>
+                        <span className="text-gray-400">{f.type}</span>
+                        <span>{f.sheet} · {f.cell}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        ) : (
+          <div className="h-full flex items-center justify-center text-gray-400">
+            <p>选择一个模板，或新建模板</p>
+          </div>
+        )}
+      </main>
+    </div>
+  );
+}
--- a/renderer/vite.config.mjs
+++ b/renderer/vite.config.mjs
@ -0,0 +1,14 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  build: {
+    outDir: "dist",
+    emptyOutDir: true,
+  },
+  server: {
+    port: 5173,
+  },
+});
Author	SHA1	Message	Date
MikiVL	fcf3d5c7c2	fix: 生成页错误处理，编辑模式支持更新模板文件	2026-05-05 14:03:19 +08:00
MikiVL	696fd54809	docs: 添加 README 和 .gitignore	2026-05-05 13:54:38 +08:00
MikiVL	c33b048217	fix: 生成前校验数据源文件路径	2026-05-05 13:53:50 +08:00
MikiVL	a01c09dc9f	feat: 批量生成页（文件/手动输入、进度展示）	2026-05-05 13:47:42 +08:00
MikiVL	a37f17b3b6	feat: 模板配置页（上传文件、自动识别占位符、字段映射）	2026-05-05 13:46:17 +08:00
MikiVL	58f639c113	feat: 字段映射编辑组件	2026-05-05 13:45:26 +08:00
MikiVL	37951760e3	feat: 模板管理页（列表、分组、详情）	2026-05-05 13:44:58 +08:00
MikiVL	8fa85966e0	chore: React + Vite + Tailwind CSS 脚手架 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-05 13:43:20 +08:00
MikiVL	b3be6f5f03	feat: 批量生成 IPC handler	2026-05-05 13:37:15 +08:00
MikiVL	1c164ea3d9	fix: 为 callPython 添加 spawn 错误处理，防止进程启动失败时永久挂起	2026-05-05 13:36:44 +08:00