cc0aabdd9a
新 lib/workbench/directive.ts (STYLE_PRESETS + composeDirective 纯函数+测)；useDraftStream.start 加 directive 参数（非空时 POST JSON body）；Workbench 加「本章指令」textarea + 风格预设 chips，写本章时 composeDirective 传入。TDD: directive 测。前端门禁绿。docs(progress): 记 Tier4 完成。
324 lines
11 KiB
TypeScript
324 lines
11 KiB
TypeScript
"use client";
|
||
|
||
import Link from "next/link";
|
||
import { useEffect, useRef, useState } from "react";
|
||
|
||
import { AppShell } from "@/components/AppShell";
|
||
import { Drawer } from "@/components/Drawer";
|
||
import type { ProjectResponse } from "@/lib/api/types";
|
||
import { friendlyError } from "@/lib/errors/messages";
|
||
import { useAutosave } from "@/lib/autosave/useAutosave";
|
||
import { useDraftStream } from "@/lib/stream/useDraftStream";
|
||
import { WORKBENCH_CHAPTER_NO } from "@/lib/workbench/chapter";
|
||
import { composeDirective, STYLE_PRESETS } from "@/lib/workbench/directive";
|
||
import { ChapterList, ChapterListContent } from "./ChapterList";
|
||
import { ChapterAssistant, AssistantContent } from "./ChapterAssistant";
|
||
import { Editor } from "./Editor";
|
||
|
||
interface WorkbenchProps {
|
||
project: ProjectResponse;
|
||
// RSC 种入的已存草稿正文（GET .../draft）；无草稿（404）→ ""（空编辑器）。
|
||
initialText?: string;
|
||
}
|
||
|
||
// 移动端右栏（目录/助手）经抽屉触达；桌面用三栏栅格。
|
||
type MobilePanel = "chapters" | "assistant" | null;
|
||
|
||
// M1：单章工作台。章节列表为占位（无章节列表端点）；默认第 1 章。
|
||
// WORKBENCH_CHAPTER_NO 移到 lib/workbench/chapter.ts（非客户端模块），供 Server Component 安全导入。
|
||
|
||
export function Workbench({ project, initialText = "" }: WorkbenchProps) {
|
||
const chapterNo = WORKBENCH_CHAPTER_NO;
|
||
// 用已存草稿作初值；流式开始后由下方 effect 覆盖（流不会被初值反扑——
|
||
// stream.state.text 起始为空，仅当 streaming/done/aborted 且变化才写回）。
|
||
const [text, setText] = useState(initialText);
|
||
const [mobilePanel, setMobilePanel] = useState<MobilePanel>(null);
|
||
// 本章指令（T4-b）：自由文本 + 风格预设 → 写本章时组装传入 draft 生成。
|
||
const [directive, setDirective] = useState("");
|
||
const [presetIds, setPresetIds] = useState<string[]>([]);
|
||
const autosave = useAutosave(project.id, chapterNo);
|
||
const stream = useDraftStream();
|
||
const lastStreamText = useRef("");
|
||
|
||
// 流式 token 累积进编辑器（打字机）；停止/结束后已生成部分留在草稿。
|
||
useEffect(() => {
|
||
const streamed = stream.state.text;
|
||
if (
|
||
(stream.state.phase === "streaming" ||
|
||
stream.state.phase === "done" ||
|
||
stream.state.phase === "aborted") &&
|
||
streamed !== lastStreamText.current
|
||
) {
|
||
lastStreamText.current = streamed;
|
||
setText(streamed);
|
||
autosave.onChange(streamed);
|
||
}
|
||
}, [stream.state.phase, stream.state.text, autosave]);
|
||
|
||
const onWrite = (): void => {
|
||
void stream.start(
|
||
project.id,
|
||
chapterNo,
|
||
composeDirective(directive, presetIds),
|
||
);
|
||
};
|
||
|
||
const togglePreset = (id: string): void => {
|
||
setPresetIds((prev) =>
|
||
prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id],
|
||
);
|
||
};
|
||
|
||
const onEditorChange = (value: string): void => {
|
||
setText(value);
|
||
autosave.onChange(value);
|
||
};
|
||
|
||
const wordCount = text.length;
|
||
const closePanel = (): void => setMobilePanel(null);
|
||
|
||
return (
|
||
<AppShell
|
||
title={`〈${project.title}〉`}
|
||
subtitle={`第 ${chapterNo} 章`}
|
||
projectId={project.id}
|
||
activeNav="write"
|
||
>
|
||
<div className="grid h-[calc(100vh-var(--chrome,4rem))] grid-cols-1 lg:grid-cols-[12rem_1fr_18rem]">
|
||
<ChapterList currentChapterNo={chapterNo} />
|
||
|
||
<section className="flex min-w-0 flex-col bg-bg">
|
||
<DirectivePanel
|
||
directive={directive}
|
||
onDirectiveChange={setDirective}
|
||
presetIds={presetIds}
|
||
onTogglePreset={togglePreset}
|
||
/>
|
||
<div className="flex-1 overflow-auto px-6 py-8">
|
||
<Editor
|
||
value={text}
|
||
onChange={onEditorChange}
|
||
streaming={stream.isStreaming}
|
||
/>
|
||
</div>
|
||
<Toolbar
|
||
projectId={project.id}
|
||
chapterNo={chapterNo}
|
||
wordCount={wordCount}
|
||
savedLabel={autosave.savedLabel}
|
||
saveStatus={autosave.status}
|
||
streaming={stream.isStreaming}
|
||
streamError={stream.state.error}
|
||
onWrite={onWrite}
|
||
onStop={stream.stop}
|
||
onOpenChapters={() => setMobilePanel("chapters")}
|
||
onOpenAssistant={() => setMobilePanel("assistant")}
|
||
/>
|
||
</section>
|
||
|
||
<ChapterAssistant projectId={project.id} chapterNo={chapterNo} />
|
||
</div>
|
||
|
||
{/* 移动端：目录 / 本章助手经抽屉触达（桌面已在栅格里，抽屉 lg:hidden）。 */}
|
||
<Drawer
|
||
open={mobilePanel === "chapters"}
|
||
onClose={closePanel}
|
||
side="left"
|
||
label="目录"
|
||
>
|
||
<ChapterListContent currentChapterNo={chapterNo} />
|
||
</Drawer>
|
||
<Drawer
|
||
open={mobilePanel === "assistant"}
|
||
onClose={closePanel}
|
||
side="right"
|
||
label="本章助手"
|
||
>
|
||
<AssistantContent projectId={project.id} chapterNo={chapterNo} />
|
||
</Drawer>
|
||
</AppShell>
|
||
);
|
||
}
|
||
|
||
interface DirectivePanelProps {
|
||
directive: string;
|
||
onDirectiveChange: (value: string) => void;
|
||
presetIds: readonly string[];
|
||
onTogglePreset: (id: string) => void;
|
||
}
|
||
|
||
// 本章指令面板（T4-b）：可折叠的 textarea + 风格快捷预设 chips。
|
||
// 默认折叠（不抢编辑视野）；指令覆盖/补充大纲节拍，写本章时组装传入生成。
|
||
function DirectivePanel({
|
||
directive,
|
||
onDirectiveChange,
|
||
presetIds,
|
||
onTogglePreset,
|
||
}: DirectivePanelProps) {
|
||
return (
|
||
<details className="border-b border-line bg-panel px-6 py-2">
|
||
<summary className="cursor-pointer text-sm text-ink-soft hover:text-cinnabar">
|
||
本章指令（可选）
|
||
</summary>
|
||
<div className="mt-2 space-y-2">
|
||
<label className="block">
|
||
<span className="sr-only">本章指令</span>
|
||
<textarea
|
||
value={directive}
|
||
onChange={(e) => onDirectiveChange(e.target.value)}
|
||
rows={2}
|
||
placeholder="本章想怎么写？（可选，覆盖/补充大纲节拍）"
|
||
className="w-full resize-y rounded border border-line bg-bg px-3 py-2 text-sm text-ink placeholder:text-ink-soft focus:border-cinnabar focus:outline-none"
|
||
/>
|
||
</label>
|
||
<div className="flex flex-wrap gap-2">
|
||
{STYLE_PRESETS.map((preset) => {
|
||
const active = presetIds.includes(preset.id);
|
||
return (
|
||
<button
|
||
key={preset.id}
|
||
type="button"
|
||
aria-pressed={active}
|
||
onClick={() => onTogglePreset(preset.id)}
|
||
className={
|
||
active
|
||
? "rounded-full border border-cinnabar bg-cinnabar px-3 py-1 text-xs text-panel"
|
||
: "rounded-full border border-line px-3 py-1 text-xs text-ink-soft hover:border-cinnabar hover:text-cinnabar"
|
||
}
|
||
>
|
||
{preset.label}
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</details>
|
||
);
|
||
}
|
||
|
||
// 写章失败提示：友好文案（不暴露 raw code）+ 可选「去设置」动作（F4）。
|
||
function StreamErrorNote({
|
||
streamError,
|
||
}: {
|
||
streamError: { code: string; message: string };
|
||
}) {
|
||
const friendly = friendlyError(streamError.code, streamError.message);
|
||
return (
|
||
<p className="mb-2 text-sm text-conflict">
|
||
{friendly.text}
|
||
{friendly.actionHref ? (
|
||
<>
|
||
{" "}
|
||
<Link
|
||
href={friendly.actionHref}
|
||
className="underline hover:text-cinnabar"
|
||
>
|
||
{friendly.actionLabel}
|
||
</Link>
|
||
</>
|
||
) : null}
|
||
</p>
|
||
);
|
||
}
|
||
|
||
interface ToolbarProps {
|
||
projectId: string;
|
||
chapterNo: number;
|
||
wordCount: number;
|
||
savedLabel: string | null;
|
||
saveStatus: ReturnType<typeof useAutosave>["status"];
|
||
streaming: boolean;
|
||
streamError: { code: string; message: string } | null;
|
||
onWrite: () => void;
|
||
onStop: () => void;
|
||
onOpenChapters: () => void;
|
||
onOpenAssistant: () => void;
|
||
}
|
||
|
||
function Toolbar({
|
||
projectId,
|
||
chapterNo,
|
||
wordCount,
|
||
savedLabel,
|
||
saveStatus,
|
||
streaming,
|
||
streamError,
|
||
onWrite,
|
||
onStop,
|
||
onOpenChapters,
|
||
onOpenAssistant,
|
||
}: ToolbarProps) {
|
||
return (
|
||
<div className="border-t border-line bg-panel px-4 py-3 sm:px-6">
|
||
{streamError ? <StreamErrorNote streamError={streamError} /> : null}
|
||
<div className="flex flex-wrap items-center gap-2 sm:gap-3">
|
||
<button
|
||
type="button"
|
||
onClick={onOpenChapters}
|
||
className="rounded border border-line px-3 py-2 text-sm text-ink hover:border-cinnabar hover:text-cinnabar lg:hidden"
|
||
>
|
||
目录
|
||
</button>
|
||
{streaming ? (
|
||
<button
|
||
type="button"
|
||
onClick={onStop}
|
||
className="rounded border border-conflict px-4 py-2 text-sm text-conflict"
|
||
>
|
||
停
|
||
</button>
|
||
) : (
|
||
<button
|
||
type="button"
|
||
onClick={onWrite}
|
||
className="rounded bg-cinnabar px-4 py-2 text-sm text-panel hover:opacity-90"
|
||
>
|
||
✍ 写本章
|
||
</button>
|
||
)}
|
||
{streaming ? (
|
||
<span className="font-mono text-xs text-cinnabar motion-safe:animate-pulse">
|
||
生成中… {wordCount.toLocaleString("en-US")} 字
|
||
</span>
|
||
) : (
|
||
<span className="font-mono text-xs text-ink-soft">
|
||
字数 {wordCount.toLocaleString("en-US")}
|
||
</span>
|
||
)}
|
||
<Link
|
||
href={`/projects/${projectId}/outline`}
|
||
className="rounded border border-line px-4 py-2 text-sm text-ink hover:border-cinnabar hover:text-cinnabar"
|
||
>
|
||
大纲
|
||
</Link>
|
||
<Link
|
||
href={`/projects/${projectId}/foreshadow`}
|
||
className="rounded border border-line px-4 py-2 text-sm text-ink hover:border-cinnabar hover:text-cinnabar"
|
||
>
|
||
伏笔
|
||
</Link>
|
||
<button
|
||
type="button"
|
||
onClick={onOpenAssistant}
|
||
className="rounded border border-line px-3 py-2 text-sm text-ink hover:border-cinnabar hover:text-cinnabar lg:hidden"
|
||
>
|
||
助手
|
||
</button>
|
||
<Link
|
||
href={`/projects/${projectId}/review?chapter=${chapterNo}`}
|
||
className="rounded border border-cinnabar px-4 py-2 text-sm text-cinnabar hover:bg-[var(--color-cinnabar-wash)]"
|
||
>
|
||
审稿 →
|
||
</Link>
|
||
<span className="ml-auto font-mono text-xs text-ink-soft">
|
||
{saveStatus === "saving"
|
||
? "保存中…"
|
||
: saveStatus === "error"
|
||
? "保存失败"
|
||
: (savedLabel ?? "尚未保存")}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|