29265fa0fd
- 冲突「采纳改法」：有补丁瞬时改入终稿并选中；无补丁但可定位则采纳时调 AI（refiner）重写该段套入；定位不到提示手改 - 正文改为行内高亮叠层编辑器（与页面同底色、随内容增高、无滚动条），点冲突卡/锚点整页滚到并选中+闪烁 - 仅对可在正文定位的冲突显示「跳转」/锚点；locate 支持从 where 引号抽原文，杜绝定位失败刷屏 - 伏笔建议卡：新埋一键登记（预填表单）/ 疑似回收一键标记 CLOSED（复用现有端点） - 审稿页草稿自动保存（防抖 PUT /draft），与「验收本章」解耦，刷新不丢 - 写作路由带章号 ?chapter=N + 验收成功面板/大纲页「写下一章」入口；写作目录从大纲列出全部章节 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
102 lines
3.5 KiB
TypeScript
102 lines
3.5 KiB
TypeScript
"use client";
|
||
|
||
import { useMemo, useState } from "react";
|
||
|
||
import { AppShell } from "@/components/AppShell";
|
||
import type { OutlineChapterView, ProjectResponse } from "@/lib/api/types";
|
||
import { groupByVolume } from "@/lib/outline/outline";
|
||
import { useOutline } from "@/lib/outline/useOutline";
|
||
import { OutlineChapterRow } from "./OutlineChapterRow";
|
||
|
||
interface OutlineEditorProps {
|
||
project: ProjectResponse;
|
||
initialChapters: OutlineChapterView[];
|
||
}
|
||
|
||
// 大纲编辑器主体（UX §6.7）。RSC 种入已存大纲；Client 承载生成（POST .../outline）。
|
||
// 无凭据 → 503 LLM_UNAVAILABLE 经 error 检出、引导去设置。
|
||
export function OutlineEditor({
|
||
project,
|
||
initialChapters,
|
||
}: OutlineEditorProps) {
|
||
const { chapters, status, error, generate } = useOutline(initialChapters);
|
||
const [volume, setVolume] = useState(1);
|
||
const volumes = useMemo(() => groupByVolume(chapters), [chapters]);
|
||
const generating = status === "generating";
|
||
|
||
return (
|
||
<AppShell
|
||
title={`〈${project.title}〉`}
|
||
subtitle="大纲"
|
||
projectId={project.id}
|
||
activeNav="outline"
|
||
>
|
||
<div className="flex h-[calc(100vh-var(--chrome,4rem))] flex-col p-6">
|
||
<div className="mb-4 flex items-center gap-3">
|
||
<h1 className="font-serif text-lg text-ink">大纲</h1>
|
||
<label htmlFor="vol" className="ml-auto text-xs text-ink-soft">
|
||
卷号
|
||
</label>
|
||
<input
|
||
id="vol"
|
||
inputMode="numeric"
|
||
value={volume}
|
||
onChange={(e) => setVolume(Math.max(1, Number(e.target.value) || 1))}
|
||
className="w-16 rounded border border-line bg-bg px-2 py-1 text-sm text-ink focus:border-cinnabar focus:outline-none"
|
||
/>
|
||
<button
|
||
type="button"
|
||
disabled={generating}
|
||
onClick={() => void generate(project.id, volume)}
|
||
className="rounded bg-cinnabar px-3 py-1.5 text-sm text-panel hover:opacity-90 disabled:opacity-40"
|
||
>
|
||
{generating ? "排大纲中…" : "✦ AI 排大纲"}
|
||
</button>
|
||
</div>
|
||
|
||
{error ? (
|
||
<p className="mb-4 text-sm text-conflict">
|
||
大纲生成失败（{error.code}）：{error.message}
|
||
{error.code === "LLM_UNAVAILABLE" ? (
|
||
<>
|
||
{" "}
|
||
<a
|
||
href="/settings/providers"
|
||
className="underline hover:text-cinnabar"
|
||
>
|
||
去设置提供商
|
||
</a>
|
||
</>
|
||
) : null}
|
||
</p>
|
||
) : null}
|
||
|
||
<div className="min-h-0 flex-1 overflow-auto">
|
||
{volumes.length === 0 ? (
|
||
<p className="rounded border border-dashed border-line p-6 text-sm text-ink-soft">
|
||
暂无大纲。点「✦ AI 排大纲」生成逐章节拍与伏笔窗口。
|
||
</p>
|
||
) : (
|
||
volumes.map((group) => (
|
||
<section key={group.volume} className="mb-6">
|
||
<h2 className="mb-2 font-serif text-base text-ink">
|
||
卷 {group.volume}
|
||
</h2>
|
||
<ul className="space-y-1">
|
||
{group.chapters.map((ch) => (
|
||
<OutlineChapterRow
|
||
key={ch.no}
|
||
chapter={ch}
|
||
projectId={project.id}
|
||
/>
|
||
))}
|
||
</ul>
|
||
</section>
|
||
))
|
||
)}
|
||
</div>
|
||
</div>
|
||
</AppShell>
|
||
);
|
||
}
|