feat(web): F1/F2/F3 前端——拆书入库为规则 / 续写式链选择 / 模板库
- gen:api 纳入 /templates、chain continue_volume、teardown rules ingest 端点 - F1：GeneratorRunner 识别拆书为单对象入库（整 preview 作一条 teardown）， ingestTable(BookTeardownResult)=rules，buildIngestRequest 组装 teardown 体， 按 isSingleObjectIngest 隐藏勾选框、改文案「入库为规则」 - F2：ChainStarter 加链类型单选（draft_volume 从头写 / continue_volume 续写）， chain_key 作 path 参传给 run（CHAIN_KINDS 对齐后端 SUPPORTED_CHAINS） - F3：模板库页 app/templates + 全局 nav 入口 + TemplatesManager（列/建/删，乐观更新回滚）； GeneratorRunner 加 TemplateFiller「从模板填入」（body 填进 brief/text，纯前端） - vitest 覆盖 templates/ingest teardown/templateFillTarget/CHAIN_KINDS 纯逻辑
This commit is contained in:
Yaojia Wang
@@ -10,11 +10,13 @@ import {
|
||||
initialFieldValues,
|
||||
missingRequiredFields,
|
||||
previewRows,
|
||||
templateFillTarget,
|
||||
type FieldValues,
|
||||
type PreviewItem,
|
||||
} from "@/lib/toolbox/toolbox";
|
||||
import { ingestTable } from "@/lib/toolbox/ingest";
|
||||
import { ingestTable, isSingleObjectIngest } from "@/lib/toolbox/ingest";
|
||||
import { useGenerator } from "@/lib/toolbox/useGenerator";
|
||||
import { TemplateFiller } from "./TemplateFiller";
|
||||
|
||||
interface GeneratorRunnerProps {
|
||||
projectId: string;
|
||||
@@ -42,6 +44,12 @@ export function GeneratorRunner({
|
||||
setValues((prev) => ({ ...prev, [name]: value }));
|
||||
}, []);
|
||||
|
||||
// 「从模板填入」的目标字段（brief / text；无则不渲染）。
|
||||
const fillTarget = useMemo(
|
||||
() => templateFillTarget(tool.input_fields),
|
||||
[tool.input_fields],
|
||||
);
|
||||
|
||||
const onGenerate = useCallback(async (): Promise<void> => {
|
||||
const missing = missingRequiredFields(tool.input_fields, values);
|
||||
if (missing.length > 0) {
|
||||
@@ -58,7 +66,15 @@ export function GeneratorRunner({
|
||||
);
|
||||
|
||||
const table = gen.outputKind ? ingestTable(gen.outputKind) : null;
|
||||
const canIngest = tool.ingestable && table !== null && rows.length > 0;
|
||||
// 单对象产物（如拆书）：整个 preview 即一条入库项，无逐行勾选；行式产物按勾选入库。
|
||||
const singleObject = gen.outputKind
|
||||
? isSingleObjectIngest(gen.outputKind)
|
||||
: false;
|
||||
const hasPreview = (gen.preview?.items.length ?? 0) > 0;
|
||||
const canIngest =
|
||||
tool.ingestable &&
|
||||
table !== null &&
|
||||
(singleObject ? hasPreview : rows.length > 0);
|
||||
|
||||
const toggle = useCallback((idx: number): void => {
|
||||
setSelected((prev) => {
|
||||
@@ -81,14 +97,17 @@ export function GeneratorRunner({
|
||||
async (acknowledge: boolean): Promise<void> => {
|
||||
if (!gen.outputKind) return;
|
||||
const chapterNo = Number(values["chapter_no"]?.trim() || "") || null;
|
||||
// 单对象产物（拆书）：整个 rawPreview 作唯一入库行；行式产物用勾选行。
|
||||
const ingestRows =
|
||||
singleObject && gen.rawPreview ? [gen.rawPreview] : selectedRows;
|
||||
await gen.ingest(projectId, tool.key, {
|
||||
outputKind: gen.outputKind,
|
||||
rows: selectedRows,
|
||||
rows: ingestRows,
|
||||
chapterNo,
|
||||
acknowledgeConflicts: acknowledge,
|
||||
});
|
||||
},
|
||||
[gen, projectId, tool.key, selectedRows, values],
|
||||
[gen, projectId, tool.key, selectedRows, values, singleObject],
|
||||
);
|
||||
|
||||
const generating = gen.genStatus === "generating";
|
||||
@@ -120,6 +139,7 @@ export function GeneratorRunner({
|
||||
void onGenerate();
|
||||
}}
|
||||
>
|
||||
<TemplateFiller targetField={fillTarget} onFill={setField} />
|
||||
{(tool.input_fields ?? []).map((field) => (
|
||||
<FormField
|
||||
key={field.name}
|
||||
@@ -141,7 +161,11 @@ export function GeneratorRunner({
|
||||
<div className="flex flex-col gap-3">
|
||||
<h3 className="font-serif text-sm text-ink">
|
||||
预览（{gen.preview.items.length}）
|
||||
{canIngest ? "（勾选后可入库）" : null}
|
||||
{canIngest
|
||||
? singleObject
|
||||
? "（可入库）"
|
||||
: "（勾选后可入库）"
|
||||
: null}
|
||||
</h3>
|
||||
<ul className="flex flex-col gap-2">
|
||||
{gen.preview.items.map((item, i) => (
|
||||
@@ -149,7 +173,7 @@ export function GeneratorRunner({
|
||||
key={i}
|
||||
item={item}
|
||||
index={i}
|
||||
selectable={canIngest}
|
||||
selectable={canIngest && !singleObject}
|
||||
checked={selected.has(i)}
|
||||
onToggle={toggle}
|
||||
/>
|
||||
@@ -160,10 +184,14 @@ export function GeneratorRunner({
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void runIngest(false)}
|
||||
disabled={ingesting || selected.size === 0}
|
||||
disabled={ingesting || (!singleObject && selected.size === 0)}
|
||||
className="self-start rounded border border-cinnabar px-4 py-2 text-sm text-cinnabar disabled:opacity-50"
|
||||
>
|
||||
{ingesting ? "入库中…" : `入库选中（${selected.size}）至 ${table}`}
|
||||
{ingesting
|
||||
? "入库中…"
|
||||
: singleObject
|
||||
? `入库为规则至 ${table}`
|
||||
: `入库选中（${selected.size}）至 ${table}`}
|
||||
</button>
|
||||
) : null}
|
||||
|
||||
|
||||
102
apps/web/components/toolbox/TemplateFiller.tsx
Normal file
102
apps/web/components/toolbox/TemplateFiller.tsx
Normal file
@@ -0,0 +1,102 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
|
||||
import { useToast } from "@/components/Toast";
|
||||
import { api } from "@/lib/api/client";
|
||||
import type { TemplateResponse } from "@/lib/api/types";
|
||||
|
||||
interface TemplateFillerProps {
|
||||
// 可填入的目标输入字段名（如 brief / text）；空 → 不渲染（无可填字段）。
|
||||
targetField: string | null;
|
||||
// 选定模板 → 把其 body 填进目标字段（纯前端，不改生成器后端）。
|
||||
onFill: (field: string, body: string) => void;
|
||||
}
|
||||
|
||||
// 「从模板填入」（F3，纯前端）：进场懒加载模板库，选一个把 body 填进生成器的 brief/原文输入。
|
||||
// 与生成器后端解耦——只读 /templates 并回写本地表单值。无模板/无目标字段则不渲染。
|
||||
export function TemplateFiller({ targetField, onFill }: TemplateFillerProps) {
|
||||
const toast = useToast();
|
||||
const [templates, setTemplates] = useState<TemplateResponse[] | null>(null);
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const load = useCallback(async (): Promise<void> => {
|
||||
try {
|
||||
const { data, error } = await api.GET("/templates", {});
|
||||
if (error || !data) {
|
||||
toast("加载模板失败。", "error");
|
||||
setTemplates([]);
|
||||
return;
|
||||
}
|
||||
setTemplates(data);
|
||||
} catch {
|
||||
toast("加载模板请求异常，请检查网络。", "error");
|
||||
setTemplates([]);
|
||||
}
|
||||
}, [toast]);
|
||||
|
||||
useEffect(() => {
|
||||
if (open && templates === null) void load();
|
||||
}, [open, templates, load]);
|
||||
|
||||
if (!targetField) return null;
|
||||
const field = targetField;
|
||||
|
||||
if (!open) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen(true)}
|
||||
className="self-start rounded border border-line px-3 py-1 text-sm text-ink-soft hover:text-ink"
|
||||
>
|
||||
从模板填入
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex flex-col gap-2 rounded border border-line bg-bg p-3"
|
||||
aria-label="从模板填入"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-ink-soft">选一个模板填入「{field}」</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen(false)}
|
||||
className="text-xs text-ink-soft hover:text-ink"
|
||||
>
|
||||
收起
|
||||
</button>
|
||||
</div>
|
||||
{templates === null ? (
|
||||
<p className="text-sm text-ink-soft">加载中…</p>
|
||||
) : templates.length === 0 ? (
|
||||
<p className="text-sm text-ink-soft">（暂无模板，去模板库新建。）</p>
|
||||
) : (
|
||||
<ul className="flex flex-col gap-1">
|
||||
{templates.map((t) => (
|
||||
<li key={t.id}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
onFill(field, t.body);
|
||||
setOpen(false);
|
||||
toast(`已填入模板「${t.title}」。`, "success");
|
||||
}}
|
||||
className="w-full rounded border border-line px-3 py-2 text-left text-sm text-ink hover:border-cinnabar"
|
||||
>
|
||||
<span className="font-serif">{t.title}</span>
|
||||
{t.tool_key ? (
|
||||
<span className="ml-2 text-xs text-ink-soft">
|
||||
{t.tool_key}
|
||||
</span>
|
||||
) : null}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user