diff --git a/renderer/src/pages/TemplateList.jsx b/renderer/src/pages/TemplateList.jsx index b11c114..3527fcf 100644 --- a/renderer/src/pages/TemplateList.jsx +++ b/renderer/src/pages/TemplateList.jsx @@ -1 +1,112 @@ -export default function TemplateList() { return
TemplateList
; } +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 ( +
+ {/* 左侧模板列表 */} + + + {/* 右侧详情 */} +
+ {selected ? ( +
+
+

{selected.name}

+
+ + +
+
+
+

分组:{selected.grp || "未分组"}

+

字段数量:{selected.fields?.length ?? 0}

+

创建时间:{new Date(selected.created_at).toLocaleString("zh-CN")}

+

最后修改:{new Date(selected.updated_at).toLocaleString("zh-CN")}

+ {selected.fields?.length > 0 && ( +
+

字段列表:

+
+ {selected.fields.map((f) => ( +
+ {"{{"}{f.name}{"}}"} + {f.type} + {f.sheet} · {f.cell} +
+ ))} +
+
+ )} +
+
+ ) : ( +
+

选择一个模板,或新建模板

+
+ )} +
+
+ ); +}