feat(ui): 工作台精修 + 拆分(P3-3..7)
- Workbench.tsx 937→467 行,抽出 AiToolbar/WorkbenchToolbar/MobileContextBar - P3-3 AI 工具条分组留白 + 眉题 + 主 CTA 凸显 - P3-4 专注写作模式(useFocusMode hook+vitest,隐藏侧栏加宽正文)+ 左双栏面色区分 - P3-5 右栏本章参考小标题去衬线(font-sans) + 空态引导(无标题保 h2→h3 大纲) - P3-6 底栏信息/操作/状态三区 + TOC 当前章高亮;TOC 状态点因无每章状态数据跳过 - P3-7 展示层流式跟随滚动(不触碰 SSE 逻辑,尊重 reduced-motion) - AppShell 加可选 hideNav(加法式,默认 false)
This commit is contained in:
@@ -1,32 +1,11 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useEffect, useId, useRef, useState, type RefObject } from "react";
|
||||
import {
|
||||
BookMarked,
|
||||
ChevronDown,
|
||||
ClipboardCheck,
|
||||
FileText,
|
||||
HelpCircle,
|
||||
MessagesSquare,
|
||||
PanelLeft,
|
||||
PanelRight,
|
||||
PenLine,
|
||||
RefreshCw,
|
||||
Sparkles,
|
||||
Square,
|
||||
Wand2,
|
||||
WrapText,
|
||||
} from "lucide-react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
|
||||
import { AppShell } from "@/components/AppShell";
|
||||
import { Drawer } from "@/components/Drawer";
|
||||
import { ThinkingIndicator } from "@/components/ThinkingIndicator";
|
||||
import { useToast } from "@/components/Toast";
|
||||
import { Button } from "@/components/ui/Button";
|
||||
import { SectionHeader } from "@/components/ui/SectionHeader";
|
||||
import { StatusNote } from "@/components/ui/StatusNote";
|
||||
import { TextArea } from "@/components/ui/TextArea";
|
||||
import type { ProjectResponse } from "@/lib/api/types";
|
||||
import { friendlyError } from "@/lib/errors/messages";
|
||||
import { useAutosave } from "@/lib/autosave/useAutosave";
|
||||
@@ -35,14 +14,8 @@ import {
|
||||
WORKBENCH_CHAPTER_NO,
|
||||
type ChapterEntry,
|
||||
} from "@/lib/workbench/chapter";
|
||||
import {
|
||||
composeDirective,
|
||||
PLOT_PRESETS,
|
||||
STYLE_PRESETS,
|
||||
type Preset,
|
||||
} from "@/lib/workbench/directive";
|
||||
import { composeDirective } from "@/lib/workbench/directive";
|
||||
import { applyRefinement } from "@/lib/workbench/refineApply";
|
||||
import { buttonClass, focusRing } from "@/lib/ui/variants";
|
||||
import { ChapterList, ChapterListContent } from "./ChapterList";
|
||||
import { ChapterAssistant, AssistantContent } from "./ChapterAssistant";
|
||||
import { Editor, type EditorSelection } from "./Editor";
|
||||
@@ -50,7 +23,7 @@ import { RefinePanel } from "./RefinePanel";
|
||||
import { ContinuePanel } from "./ContinuePanel";
|
||||
import { InlineToolbox } from "./InlineToolbox";
|
||||
import { ChapterRewritePanel } from "./ChapterRewritePanel";
|
||||
import { ContextDrawer, CONTEXT_DRAWER_ENABLED } from "./ContextDrawer";
|
||||
import { ContextDrawer } from "./ContextDrawer";
|
||||
import {
|
||||
AiConversationDrawer,
|
||||
AI_CONVERSATION_ENABLED,
|
||||
@@ -60,6 +33,10 @@ import { GENRES } from "@/lib/wizard/wizard";
|
||||
import { useGenreGate, toGenreDirective } from "@/lib/workbench/useGenreGate";
|
||||
import { useAiConversation } from "@/lib/workbench/useAiConversation";
|
||||
import { useChapterListCollapse } from "@/lib/workbench/useChapterListCollapse";
|
||||
import { useFocusMode } from "@/lib/workbench/useFocusMode";
|
||||
import { DirectivePanel, AiVerbsRow } from "./AiToolbar";
|
||||
import { MobileContextBar } from "./MobileContextBar";
|
||||
import { Toolbar } from "./WorkbenchToolbar";
|
||||
|
||||
interface WorkbenchProps {
|
||||
project: ProjectResponse;
|
||||
@@ -107,6 +84,8 @@ export function Workbench({
|
||||
const conversation = useAiConversation(project.id, chapterNo);
|
||||
// P2-2:桌面「目录」列可收起(记忆状态);收起时把宽让给正文,窄轨留一个展开入口。
|
||||
const chapterList = useChapterListCollapse();
|
||||
// P3-4:专注写作开关(记忆状态)——开启隐藏左侧图标导航 + 目录 TOC,让宽给正文。
|
||||
const focusMode = useFocusMode();
|
||||
const conversationTriggerRef = useRef<HTMLButtonElement>(null);
|
||||
const toast = useToast();
|
||||
const autosave = useAutosave(project.id, chapterNo, initialText);
|
||||
@@ -116,6 +95,8 @@ export function Workbench({
|
||||
const chapterTriggerRef = useRef<HTMLButtonElement>(null);
|
||||
const assistantTriggerRef = useRef<HTMLButtonElement>(null);
|
||||
const contextTriggerRef = useRef<HTMLButtonElement>(null);
|
||||
// P3-7 流式跟随:正文滚动容器引用(纯展示层,不触碰 SSE/流式数据)。
|
||||
const editorScrollRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// 流式 token 累积进编辑器(打字机);停止/结束后已生成部分留在草稿。
|
||||
useEffect(() => {
|
||||
@@ -132,6 +113,15 @@ export function Workbench({
|
||||
}
|
||||
}, [stream.state.phase, stream.state.text, autosave]);
|
||||
|
||||
// P3-7 流式跟随:流式且正文增长时把滚动容器贴到底,让新生成的段落保持可见。
|
||||
// 纯展示层:只读既有 text/streaming 展示态,瞬时定位(无动画,天然尊重 prefers-reduced-motion)。
|
||||
useEffect(() => {
|
||||
if (!stream.isStreaming) return;
|
||||
const el = editorScrollRef.current;
|
||||
if (!el) return;
|
||||
el.scrollTop = el.scrollHeight;
|
||||
}, [text, stream.isStreaming]);
|
||||
|
||||
// 题材 + 三槽指令合并为一条写章指令(题材前置);effectiveGenre 无 → 仅原指令。
|
||||
const startWrite = (effectiveGenre: string | null): void => {
|
||||
const base = composeDirective(directive, presetIds);
|
||||
@@ -271,6 +261,13 @@ export function Workbench({
|
||||
const wordCount = text.replace(/\s+/g, "").length;
|
||||
const closePanel = (): void => setMobilePanel(null);
|
||||
|
||||
// 桌面栅格列宽:专注模式撤掉目录 TOC 列(仅正文 + 右栏);否则按目录列收起/展开取宽。
|
||||
const gridCols = focusMode.focus
|
||||
? "xl:grid-cols-[1fr_18rem]"
|
||||
: chapterList.collapsed
|
||||
? "xl:grid-cols-[2.75rem_1fr_18rem]"
|
||||
: "xl:grid-cols-[12rem_1fr_18rem]";
|
||||
|
||||
// 流式里程碑播报(仅终结句,非逐 token):完成/停止/失败时写入 role=status 区。
|
||||
const liveMessage = ((): string => {
|
||||
switch (stream.state.phase) {
|
||||
@@ -294,21 +291,20 @@ export function Workbench({
|
||||
subtitle={`第 ${chapterNo} 章`}
|
||||
projectId={project.id}
|
||||
activeNav="write"
|
||||
hideNav={focusMode.focus}
|
||||
>
|
||||
<div
|
||||
className={`grid min-h-[calc(100vh-var(--chrome,4rem))] grid-cols-1 xl:h-[calc(100vh-var(--chrome,4rem))] ${
|
||||
chapterList.collapsed
|
||||
? "xl:grid-cols-[2.75rem_1fr_18rem]"
|
||||
: "xl:grid-cols-[12rem_1fr_18rem]"
|
||||
}`}
|
||||
className={`grid min-h-[calc(100vh-var(--chrome,4rem))] grid-cols-1 xl:h-[calc(100vh-var(--chrome,4rem))] ${gridCols}`}
|
||||
>
|
||||
<ChapterList
|
||||
projectId={project.id}
|
||||
chapters={chapters}
|
||||
currentChapterNo={chapterNo}
|
||||
collapsed={chapterList.collapsed}
|
||||
onToggle={chapterList.toggle}
|
||||
/>
|
||||
{focusMode.focus ? null : (
|
||||
<ChapterList
|
||||
projectId={project.id}
|
||||
chapters={chapters}
|
||||
currentChapterNo={chapterNo}
|
||||
collapsed={chapterList.collapsed}
|
||||
onToggle={chapterList.toggle}
|
||||
/>
|
||||
)}
|
||||
|
||||
<section className="flex min-w-0 flex-col bg-bg">
|
||||
<MobileContextBar
|
||||
@@ -386,7 +382,7 @@ export function Workbench({
|
||||
onClose={() => setRewriteOpen(false)}
|
||||
/>
|
||||
) : null}
|
||||
<div className="flex-1 overflow-auto px-6 py-8">
|
||||
<div ref={editorScrollRef} className="flex-1 overflow-auto px-6 py-8">
|
||||
{chapters.length === 0 ? (
|
||||
<StatusNote variant="info" className="mb-4">
|
||||
尚无大纲,将按设定自由生成。
|
||||
@@ -409,6 +405,8 @@ export function Workbench({
|
||||
streamError={stream.state.error}
|
||||
liveMessage={liveMessage}
|
||||
onStop={stream.stop}
|
||||
focus={focusMode.focus}
|
||||
onToggleFocus={focusMode.toggle}
|
||||
onOpenContext={() => setContextOpen(true)}
|
||||
contextTriggerRef={contextTriggerRef}
|
||||
onOpenConversation={() => setConversationOpen(true)}
|
||||
@@ -467,471 +465,3 @@ export function Workbench({
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
|
||||
interface MobileContextBarProps {
|
||||
chapterNo: number;
|
||||
onOpenChapters: () => void;
|
||||
onOpenAssistant: () => void;
|
||||
chapterTriggerRef: RefObject<HTMLButtonElement | null>;
|
||||
assistantTriggerRef: RefObject<HTMLButtonElement | null>;
|
||||
}
|
||||
|
||||
function MobileContextBar({
|
||||
chapterNo,
|
||||
onOpenChapters,
|
||||
onOpenAssistant,
|
||||
chapterTriggerRef,
|
||||
assistantTriggerRef,
|
||||
}: MobileContextBarProps) {
|
||||
return (
|
||||
<div className="flex items-center justify-between gap-2 border-b border-line bg-panel px-4 py-2 xl:hidden">
|
||||
<Button
|
||||
ref={chapterTriggerRef}
|
||||
onClick={onOpenChapters}
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
>
|
||||
<PanelLeft className="h-4 w-4" aria-hidden="true" />
|
||||
目录
|
||||
</Button>
|
||||
<span className="min-w-0 truncate font-mono text-xs text-ink-soft">
|
||||
第 {chapterNo} 章
|
||||
</span>
|
||||
<Button
|
||||
ref={assistantTriggerRef}
|
||||
onClick={onOpenAssistant}
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
>
|
||||
<PanelRight className="h-4 w-4" aria-hidden="true" />
|
||||
助手
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface DirectivePanelProps {
|
||||
directive: string;
|
||||
onDirectiveChange: (value: string) => void;
|
||||
presetIds: readonly string[];
|
||||
onTogglePreset: (id: string) => void;
|
||||
// 空章默认展开(新手最需要看到输入框的时机);满章默认收起以让出编辑视野。
|
||||
defaultOpen: boolean;
|
||||
// 发送键 = 写本章:把已选文风/剧情 + 自定义要求组装后逐字流式写进正文(不改成聊天气泡)。
|
||||
streaming: boolean;
|
||||
onWrite: () => void;
|
||||
onStop: () => void;
|
||||
}
|
||||
|
||||
// 本章写作指令面板(P0-2 提升):正文正上方常驻的「和 AI 说话」输入条。
|
||||
// 标题「告诉 AI 这章想怎么写」+ HITL 微文案 +「?这是什么」常驻可见;空章默认展开露出输入框。
|
||||
// 发送键即「写本章」,沿用 composeDirective + 文风/剧情 chips + 流式打字机写进正文。
|
||||
function DirectivePanel({
|
||||
directive,
|
||||
onDirectiveChange,
|
||||
presetIds,
|
||||
onTogglePreset,
|
||||
defaultOpen,
|
||||
streaming,
|
||||
onWrite,
|
||||
onStop,
|
||||
}: DirectivePanelProps) {
|
||||
const panelId = useId();
|
||||
const [open, setOpen] = useState(defaultOpen);
|
||||
const activeCount = presetIds.length + (directive.trim().length > 0 ? 1 : 0);
|
||||
return (
|
||||
<section className="border-b border-line bg-panel px-4 py-3 sm:px-6">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
aria-expanded={open}
|
||||
aria-controls={panelId}
|
||||
className={`flex min-w-0 cursor-pointer items-center gap-2 rounded font-serif text-base text-ink hover:text-cinnabar ${focusRing}`}
|
||||
>
|
||||
<ChevronDown
|
||||
className={`h-4 w-4 shrink-0 text-ink-soft transition-transform ${
|
||||
open ? "rotate-180" : ""
|
||||
}`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span className="truncate">告诉 AI 这章想怎么写</span>
|
||||
</button>
|
||||
<div className="flex shrink-0 items-center gap-2">
|
||||
{activeCount > 0 ? (
|
||||
<span className="rounded border border-line bg-bg px-2 py-0.5 text-xs text-ink-soft">
|
||||
{activeCount} 项指令
|
||||
</span>
|
||||
) : null}
|
||||
{/* 常驻「发送键」= 写本章:始终可见(折叠时也在),逐字流式写进正文。带可见范围提示(P1-4)。 */}
|
||||
{streaming ? (
|
||||
<Button onClick={onStop} variant="danger" size="sm">
|
||||
<Square className="h-4 w-4" aria-hidden="true" />
|
||||
停
|
||||
</Button>
|
||||
) : (
|
||||
<Button onClick={onWrite} variant="primary" size="sm">
|
||||
<PenLine className="h-4 w-4" aria-hidden="true" />
|
||||
写本章
|
||||
<span className="text-2xs font-normal text-panel/75">
|
||||
整章·从头写
|
||||
</span>
|
||||
</Button>
|
||||
)}
|
||||
<HitlHelp />
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-1 text-xs text-ink-soft">
|
||||
AI 给草稿,你决定采不采用,原文永远你说了算。
|
||||
</p>
|
||||
{open ? (
|
||||
<div id={panelId} className="mt-3 space-y-3">
|
||||
<SectionHeader
|
||||
title="你的写作要求"
|
||||
description="选文风、点剧情需求、写自己的要求,只影响本次生成。"
|
||||
/>
|
||||
<PresetGroup
|
||||
label="文风"
|
||||
presets={STYLE_PRESETS}
|
||||
presetIds={presetIds}
|
||||
onToggle={onTogglePreset}
|
||||
/>
|
||||
<PresetGroup
|
||||
label="剧情需求"
|
||||
presets={PLOT_PRESETS}
|
||||
presetIds={presetIds}
|
||||
onToggle={onTogglePreset}
|
||||
/>
|
||||
<label className="block">
|
||||
<span className="mb-1 block text-sm text-ink-soft">自己的要求</span>
|
||||
<TextArea
|
||||
value={directive}
|
||||
onChange={(e) => onDirectiveChange(e.target.value)}
|
||||
rows={2}
|
||||
placeholder="写点要求,AI 更懂你(留空则按大纲写)"
|
||||
/>
|
||||
</label>
|
||||
{activeCount > 0 ? (
|
||||
<StatusNote variant="info">
|
||||
写本章时会把已选文风/剧情预设和你的要求合并进本次生成请求。
|
||||
</StatusNote>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface AiVerbsRowProps {
|
||||
streaming: boolean;
|
||||
onContinue: () => void;
|
||||
onRefineSelection: () => void;
|
||||
onRewrite: () => void;
|
||||
onToolbox: () => void;
|
||||
}
|
||||
|
||||
// 「或让 AI:」次级动作行(P1-1):常驻贴在中央输入条下方,把续写/润色/整章重写/工具箱
|
||||
// 归为「同一个 AI 的其它用法」(act-on-chapter 与导航分家)。每个动词带可见范围提示(P1-4)。
|
||||
// 生成中禁用(避免与流式写章并发),触发逻辑沿用 Workbench 既有 open* 回调(仅搬家、不改行为)。
|
||||
function AiVerbsRow({
|
||||
streaming,
|
||||
onContinue,
|
||||
onRefineSelection,
|
||||
onRewrite,
|
||||
onToolbox,
|
||||
}: AiVerbsRowProps) {
|
||||
return (
|
||||
<div className="flex flex-wrap items-center gap-x-3 gap-y-2 border-b border-line bg-panel px-4 py-2 sm:px-6">
|
||||
<span className="text-xs text-ink-soft">或让 AI:</span>
|
||||
<VerbButton
|
||||
icon={WrapText}
|
||||
label="续写"
|
||||
hint="接着往下写"
|
||||
disabled={streaming}
|
||||
onClick={onContinue}
|
||||
/>
|
||||
<VerbButton
|
||||
icon={Wand2}
|
||||
label="润色选段"
|
||||
hint="选中段·打磨"
|
||||
disabled={streaming}
|
||||
onClick={onRefineSelection}
|
||||
/>
|
||||
<VerbButton
|
||||
icon={RefreshCw}
|
||||
label="整章重写"
|
||||
hint="整章·基于现有重写"
|
||||
disabled={streaming}
|
||||
onClick={onRewrite}
|
||||
/>
|
||||
<VerbButton
|
||||
icon={Sparkles}
|
||||
label="工具箱"
|
||||
disabled={streaming}
|
||||
onClick={onToolbox}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface VerbButtonProps {
|
||||
icon: typeof WrapText;
|
||||
label: string;
|
||||
// 可见(非 hover-only)范围提示:让作者点前就能预判对草稿的影响(P1-4)。工具箱无范围提示。
|
||||
hint?: string;
|
||||
disabled: boolean;
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
function VerbButton({ icon: Icon, label, hint, disabled, onClick }: VerbButtonProps) {
|
||||
return (
|
||||
<Button onClick={onClick} disabled={disabled} variant="secondary" size="sm">
|
||||
<Icon className="h-4 w-4" aria-hidden="true" />
|
||||
{label}
|
||||
{hint ? <span className="text-2xs text-ink-soft">{hint}</span> : null}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
// 「?这是什么」:常驻、可再发现的说明(非一次性 coach)——解释「和 AI 说话」的闭环。
|
||||
// 仿 AiToolbarMoreMenu:按钮 + 轻量弹层,Esc / 点击外部关闭,还原焦点。
|
||||
function HitlHelp() {
|
||||
const [open, setOpen] = useState(false);
|
||||
const popId = useId();
|
||||
const rootRef = useRef<HTMLDivElement>(null);
|
||||
const buttonRef = useRef<HTMLButtonElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const onKeyDown = (e: KeyboardEvent): void => {
|
||||
if (e.key === "Escape") {
|
||||
setOpen(false);
|
||||
buttonRef.current?.focus();
|
||||
}
|
||||
};
|
||||
const onPointerDown = (e: PointerEvent): void => {
|
||||
const target = e.target;
|
||||
if (target instanceof Node && !rootRef.current?.contains(target)) {
|
||||
setOpen(false);
|
||||
}
|
||||
};
|
||||
window.addEventListener("keydown", onKeyDown);
|
||||
window.addEventListener("pointerdown", onPointerDown);
|
||||
return () => {
|
||||
window.removeEventListener("keydown", onKeyDown);
|
||||
window.removeEventListener("pointerdown", onPointerDown);
|
||||
};
|
||||
}, [open]);
|
||||
|
||||
return (
|
||||
<div ref={rootRef} className="relative">
|
||||
<button
|
||||
ref={buttonRef}
|
||||
type="button"
|
||||
aria-haspopup="dialog"
|
||||
aria-expanded={open}
|
||||
aria-controls={popId}
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
className={buttonClass({
|
||||
variant: "ghost",
|
||||
size: "sm",
|
||||
className: "gap-1 text-xs text-ink-soft",
|
||||
})}
|
||||
>
|
||||
<HelpCircle className="h-4 w-4" aria-hidden="true" />
|
||||
这是什么
|
||||
</button>
|
||||
{open ? (
|
||||
<div
|
||||
id={popId}
|
||||
role="dialog"
|
||||
aria-label="怎么和 AI 说话"
|
||||
className="absolute right-0 z-30 mt-2 w-72 max-w-[80vw] rounded border border-line bg-panel p-3 text-sm text-ink-soft shadow-paper"
|
||||
>
|
||||
<p className="mb-1 font-serif text-sm text-ink">怎么和 AI 说话</p>
|
||||
<p>
|
||||
在这条写下要求,点「写本章」——AI 会把草稿逐字写进正文。草稿随时能改;
|
||||
满意了去「审稿」验收。原文永远你说了算。
|
||||
</p>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface PresetGroupProps {
|
||||
label: string;
|
||||
presets: readonly Preset[];
|
||||
presetIds: readonly string[];
|
||||
onToggle: (id: string) => void;
|
||||
}
|
||||
|
||||
// 一组预设 chips(文风 / 剧情需求):点选 toggle,选中高亮。id 统一进 presetIds。
|
||||
function PresetGroup({ label, presets, presetIds, onToggle }: PresetGroupProps) {
|
||||
return (
|
||||
<div>
|
||||
<p className="mb-1 text-sm text-ink-soft">{label}</p>
|
||||
<div className="flex flex-wrap gap-2" role="group" aria-label={label}>
|
||||
{presets.map((preset) => {
|
||||
const active = presetIds.includes(preset.id);
|
||||
return (
|
||||
<Button
|
||||
key={preset.id}
|
||||
type="button"
|
||||
aria-pressed={active}
|
||||
onClick={() => onToggle(preset.id)}
|
||||
variant={active ? "outline" : "secondary"}
|
||||
size="sm"
|
||||
>
|
||||
{preset.label}
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 写章失败提示:友好文案(不暴露 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>
|
||||
);
|
||||
}
|
||||
|
||||
// 底栏瘦身(P1-1):act-on-chapter 动词与纯导航都已上移/移除,底栏只余
|
||||
// 状态(字数/保存/播报)+ 流式时的「停」+ 唯一强调的「审稿」前进 CTA + 速查/对话记录抽屉入口。
|
||||
interface ToolbarProps {
|
||||
projectId: string;
|
||||
chapterNo: number;
|
||||
wordCount: number;
|
||||
savedLabel: string | null;
|
||||
saveStatus: ReturnType<typeof useAutosave>["status"];
|
||||
streaming: boolean;
|
||||
streamError: { code: string; message: string } | null;
|
||||
// 流式里程碑播报句(完成/停止/失败);仅在 role=status 区出现,不逐 token 刷新。
|
||||
liveMessage: string;
|
||||
// 流式时的「停」:底栏 sticky,滚到长正文下方也够得着(中央条会滚出视野)。
|
||||
onStop: () => void;
|
||||
// 打开上下文速查抽屉(WFW-6)。
|
||||
onOpenContext: () => void;
|
||||
contextTriggerRef: RefObject<HTMLButtonElement | null>;
|
||||
// 打开对话记录抽屉(AC-3)。
|
||||
onOpenConversation: () => void;
|
||||
conversationTriggerRef: RefObject<HTMLButtonElement | null>;
|
||||
}
|
||||
|
||||
function Toolbar({
|
||||
projectId,
|
||||
chapterNo,
|
||||
wordCount,
|
||||
savedLabel,
|
||||
saveStatus,
|
||||
streaming,
|
||||
streamError,
|
||||
liveMessage,
|
||||
onStop,
|
||||
onOpenContext,
|
||||
contextTriggerRef,
|
||||
onOpenConversation,
|
||||
conversationTriggerRef,
|
||||
}: ToolbarProps) {
|
||||
return (
|
||||
<div className="sticky bottom-0 z-10 border-t border-line bg-panel/95 px-4 py-2 backdrop-blur sm:px-6 sm:py-3">
|
||||
{streamError ? <StreamErrorNote streamError={streamError} /> : null}
|
||||
<div className="grid gap-2 sm:flex sm:flex-wrap sm:items-center sm:gap-3">
|
||||
<div className="flex min-w-0 flex-wrap items-center gap-2">
|
||||
{streaming ? (
|
||||
<Button onClick={onStop} variant="danger" size="sm">
|
||||
<Square className="h-4 w-4" aria-hidden="true" />
|
||||
停
|
||||
</Button>
|
||||
) : null}
|
||||
{streaming ? (
|
||||
// ThinkingIndicator 自带 role=status,开始时播报一次「生成中」;
|
||||
// 易变字数 aria-hidden,仅供视觉,不逐 token 打扰屏读。
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<ThinkingIndicator label="生成中" className="text-xs text-cinnabar" />
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="font-mono text-xs text-cinnabar"
|
||||
>
|
||||
{wordCount} 字
|
||||
</span>
|
||||
</span>
|
||||
) : (
|
||||
<span className="font-mono text-xs text-ink-soft">
|
||||
字数 {wordCount}
|
||||
</span>
|
||||
)}
|
||||
{/* 终结句播报区:完成/停止/失败时写入,屏读只播报里程碑。 */}
|
||||
<span className="sr-only" role="status" aria-live="polite">
|
||||
{liveMessage}
|
||||
</span>
|
||||
{CONTEXT_DRAWER_ENABLED ? (
|
||||
<Button
|
||||
ref={contextTriggerRef}
|
||||
onClick={onOpenContext}
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
title="打开上下文速查(设定库/大纲/伏笔/规则/文风)"
|
||||
>
|
||||
<BookMarked className="h-4 w-4" aria-hidden="true" />
|
||||
速查
|
||||
</Button>
|
||||
) : null}
|
||||
{AI_CONVERSATION_ENABLED ? (
|
||||
<Button
|
||||
ref={conversationTriggerRef}
|
||||
onClick={onOpenConversation}
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
title="打开对话记录(润色/重写/续写/工具箱往复留痕的只读日志)"
|
||||
>
|
||||
<MessagesSquare className="h-4 w-4" aria-hidden="true" />
|
||||
对话记录
|
||||
</Button>
|
||||
) : null}
|
||||
{/* 唯一强调的「审稿」= 写→审→验收的前进 CTA(导航去重后仅此一处强调,左栏另有入口)。 */}
|
||||
<Link
|
||||
href={`/projects/${projectId}/review?chapter=${chapterNo}`}
|
||||
className={buttonClass({ variant: "outline", size: "sm" })}
|
||||
>
|
||||
<ClipboardCheck className="h-4 w-4" aria-hidden="true" />
|
||||
审稿
|
||||
</Link>
|
||||
</div>
|
||||
<span
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
className="min-w-0 font-mono text-xs text-ink-soft sm:ml-auto"
|
||||
>
|
||||
<FileText className="mr-1 inline h-3.5 w-3.5" aria-hidden="true" />
|
||||
{saveStatus === "saving"
|
||||
? "保存中…"
|
||||
: saveStatus === "error"
|
||||
? "保存失败"
|
||||
: (savedLabel ?? "尚未保存")}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user