feat: M1 — 立项→写章草稿(SSE)→自动保存；连一家 provider
- 薄自建 LLM 网关：OpenAI 兼容适配器(DeepSeek) + instructor 结构化输出 + usage_ledger 记账 + 档位路由 - 记忆服务 assemble：确定性选择(显式+主角+近况) + 渲染卡 + 缓存断点(中性文本) - LangGraph 写章节点 + Postgres checkpointer + SSE 归一(token/done/error) - API：立项 + 写章 draft(SSE) + PUT 自动保存 + 提供商凭据(Fernet 加密/测试连接) - 前端：AppShell + 作品库 + 5 步立项向导 + 写作工作台(流式打字机+自动保存) + 设置页 - M1 E2E：真实 DB + mock 网关零 token 走通闭环
This commit is contained in:
Yaojia Wang
301
apps/web/components/ProjectWizard.tsx
Normal file
301
apps/web/components/ProjectWizard.tsx
Normal file
@@ -0,0 +1,301 @@
|
||||
"use client";
|
||||
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
|
||||
import { api } from "@/lib/api/client";
|
||||
import { useToast } from "@/components/Toast";
|
||||
import {
|
||||
GENRES,
|
||||
SELLING_POINT_PRESETS,
|
||||
STRUCTURES,
|
||||
WIZARD_STEPS,
|
||||
canAdvance,
|
||||
canSubmit,
|
||||
clampStep,
|
||||
emptyWizardForm,
|
||||
toCreateRequest,
|
||||
type WizardForm,
|
||||
} from "@/lib/wizard/wizard";
|
||||
|
||||
const STEP_TITLES = [
|
||||
"书名 + 题材",
|
||||
"一句话故事 + 卖点 + 结构",
|
||||
"立意 / 总纲",
|
||||
"主角 / 金手指",
|
||||
"基础世界观",
|
||||
];
|
||||
|
||||
// 立项向导（UX §6.2）。Client Component：收集字段 → POST /projects → 进工作台。
|
||||
export function ProjectWizard() {
|
||||
const router = useRouter();
|
||||
const toast = useToast();
|
||||
const [step, setStep] = useState(1);
|
||||
const [form, setForm] = useState<WizardForm>(emptyWizardForm);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const update = (patch: Partial<WizardForm>): void =>
|
||||
setForm((prev) => ({ ...prev, ...patch }));
|
||||
|
||||
const toggleSellingPoint = (point: string): void =>
|
||||
setForm((prev) => ({
|
||||
...prev,
|
||||
sellingPoints: prev.sellingPoints.includes(point)
|
||||
? prev.sellingPoints.filter((p) => p !== point)
|
||||
: [...prev.sellingPoints, point],
|
||||
}));
|
||||
|
||||
const goBack = (): void => setStep((s) => clampStep(s - 1));
|
||||
const goNext = (): void => setStep((s) => clampStep(s + 1));
|
||||
|
||||
const submit = async (): Promise<void> => {
|
||||
if (!canSubmit(form)) {
|
||||
toast("请先填写书名", "error");
|
||||
setStep(1);
|
||||
return;
|
||||
}
|
||||
setSubmitting(true);
|
||||
const { data, error } = await api.POST("/projects", {
|
||||
body: toCreateRequest(form),
|
||||
});
|
||||
if (error || !data) {
|
||||
setSubmitting(false);
|
||||
toast("创建作品失败，请重试", "error");
|
||||
return;
|
||||
}
|
||||
router.push(`/projects/${data.id}/write`);
|
||||
};
|
||||
|
||||
const isLast = step === WIZARD_STEPS;
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-2xl rounded border border-line bg-panel p-8 shadow-paper">
|
||||
<div className="mb-6 flex items-center justify-between">
|
||||
<h1 className="font-serif text-2xl text-ink">新建作品</h1>
|
||||
<StepDots current={step} />
|
||||
</div>
|
||||
<p className="mb-4 text-sm text-ink-soft">
|
||||
步骤 {step}/{WIZARD_STEPS} · {STEP_TITLES[step - 1]}
|
||||
</p>
|
||||
|
||||
<div className="min-h-[220px]">
|
||||
{step === 1 && <StepBasics form={form} update={update} />}
|
||||
{step === 2 && (
|
||||
<StepStory
|
||||
form={form}
|
||||
update={update}
|
||||
toggleSellingPoint={toggleSellingPoint}
|
||||
/>
|
||||
)}
|
||||
{step === 3 && <StepPremise form={form} update={update} />}
|
||||
{step === 4 && <StepProtagonist form={form} update={update} />}
|
||||
{step === 5 && <StepWorld />}
|
||||
</div>
|
||||
|
||||
<div className="mt-8 flex items-center justify-between">
|
||||
<button
|
||||
type="button"
|
||||
onClick={goBack}
|
||||
disabled={step === 1}
|
||||
className="rounded border border-line px-4 py-2 text-sm text-ink disabled:opacity-40"
|
||||
>
|
||||
← 上一步
|
||||
</button>
|
||||
{isLast ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={submit}
|
||||
disabled={submitting || !canSubmit(form)}
|
||||
className="rounded bg-cinnabar px-5 py-2 text-sm text-panel disabled:opacity-40"
|
||||
>
|
||||
{submitting ? "创建中…" : "完成立项 →"}
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
onClick={goNext}
|
||||
disabled={!canAdvance(step, form)}
|
||||
className="rounded bg-cinnabar px-5 py-2 text-sm text-panel disabled:opacity-40"
|
||||
>
|
||||
下一步 →
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StepDots({ current }: { current: number }) {
|
||||
return (
|
||||
<div className="flex gap-1.5" aria-hidden="true">
|
||||
{Array.from({ length: WIZARD_STEPS }, (_, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className={`h-2 w-2 rounded-full ${
|
||||
i + 1 <= current ? "bg-cinnabar" : "bg-line"
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface StepProps {
|
||||
form: WizardForm;
|
||||
update: (patch: Partial<WizardForm>) => void;
|
||||
}
|
||||
|
||||
function Field({
|
||||
label,
|
||||
children,
|
||||
}: {
|
||||
label: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<label className="mb-4 block">
|
||||
<span className="mb-1 block text-sm text-ink-soft">{label}</span>
|
||||
{children}
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
const inputCls =
|
||||
"w-full rounded border border-line bg-bg px-3 py-2 text-ink focus:border-cinnabar focus:outline-none";
|
||||
|
||||
function StepBasics({ form, update }: StepProps) {
|
||||
return (
|
||||
<div>
|
||||
<Field label="书名（必填）">
|
||||
<input
|
||||
className={inputCls}
|
||||
value={form.title}
|
||||
onChange={(e) => update({ title: e.target.value })}
|
||||
placeholder="例：逐光而行"
|
||||
autoFocus
|
||||
/>
|
||||
</Field>
|
||||
<Field label="题材">
|
||||
<select
|
||||
className={inputCls}
|
||||
value={form.genre}
|
||||
onChange={(e) => update({ genre: e.target.value })}
|
||||
>
|
||||
<option value="">未选择</option>
|
||||
{GENRES.map((g) => (
|
||||
<option key={g} value={g}>
|
||||
{g}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</Field>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StepStory({
|
||||
form,
|
||||
update,
|
||||
toggleSellingPoint,
|
||||
}: StepProps & { toggleSellingPoint: (p: string) => void }) {
|
||||
return (
|
||||
<div>
|
||||
<Field label="一句话故事（logline）">
|
||||
<textarea
|
||||
className={`${inputCls} h-20 resize-none`}
|
||||
value={form.logline}
|
||||
onChange={(e) => update({ logline: e.target.value })}
|
||||
placeholder="废柴少年觉醒禁忌血脉，在仙门倾轧中逆势封神。"
|
||||
/>
|
||||
</Field>
|
||||
<Field label="故事结构">
|
||||
<div className="flex gap-2">
|
||||
{STRUCTURES.map((s) => (
|
||||
<button
|
||||
type="button"
|
||||
key={s}
|
||||
onClick={() => update({ structure: s })}
|
||||
className={`rounded border px-3 py-1.5 text-sm ${
|
||||
form.structure === s
|
||||
? "border-cinnabar bg-[var(--color-cinnabar-wash)] text-cinnabar"
|
||||
: "border-line text-ink"
|
||||
}`}
|
||||
>
|
||||
{s}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</Field>
|
||||
<fieldset>
|
||||
<legend className="mb-1 block text-sm text-ink-soft">核心卖点</legend>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{SELLING_POINT_PRESETS.map((p) => (
|
||||
<button
|
||||
type="button"
|
||||
key={p}
|
||||
aria-pressed={form.sellingPoints.includes(p)}
|
||||
onClick={() => toggleSellingPoint(p)}
|
||||
className={`rounded border px-3 py-1.5 text-sm ${
|
||||
form.sellingPoints.includes(p)
|
||||
? "border-cinnabar bg-[var(--color-cinnabar-wash)] text-cinnabar"
|
||||
: "border-line text-ink"
|
||||
}`}
|
||||
>
|
||||
{p}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StepPremise({ form, update }: StepProps) {
|
||||
return (
|
||||
<div>
|
||||
<Field label="立意（premise）">
|
||||
<textarea
|
||||
className={`${inputCls} h-20 resize-none`}
|
||||
value={form.premise}
|
||||
onChange={(e) => update({ premise: e.target.value })}
|
||||
placeholder="故事的核心命题与前提。"
|
||||
/>
|
||||
</Field>
|
||||
<Field label="主题（theme）">
|
||||
<input
|
||||
className={inputCls}
|
||||
value={form.theme}
|
||||
onChange={(e) => update({ theme: e.target.value })}
|
||||
placeholder="例：抗争与代价"
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StepProtagonist({ form, update }: StepProps) {
|
||||
// M1 projects 表无独立主角/金手指字段；先并入立意/总纲文本，避免编造 API。
|
||||
return (
|
||||
<div>
|
||||
<p className="mb-3 text-sm text-ink-soft">
|
||||
主角与金手指（M1 暂并入总纲，后续设定库独立建模）。
|
||||
</p>
|
||||
<Field label="主角 / 金手指概要">
|
||||
<textarea
|
||||
className={`${inputCls} h-28 resize-none`}
|
||||
value={form.premise}
|
||||
onChange={(e) => update({ premise: e.target.value })}
|
||||
placeholder="主角设定、金手指来源与限制……"
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StepWorld() {
|
||||
return (
|
||||
<div className="rounded border border-dashed border-line bg-bg p-6 text-sm text-ink-soft">
|
||||
基础世界观将在「设定库」里建模（后续里程碑）。现在可直接完成立项，进入工作台开始写第一章。
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user