45025c36bf
- P4-1 对比度：muted-soft 提到 WCAG AA 小字(≥4.5:1)于两主题各面 - P4-3 ConflictCard 原文/建议加 Minus/Plus 图标 + sr-only 标签（不靠颜色） - P4-4 动效：3 处 chevron transition-transform 加 motion-safe 门控 - P4-5 命令面板 ⌘K 键帽提示 + 键盘操作读数 + 空态引导 + mono 快捷键 - P2-8 SegmentedControl 升级 radiogroup（role=radio/aria-checked + 方向键 roving）
310 lines
10 KiB
TypeScript
310 lines
10 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useId, useRef, useState } from "react";
|
||
import {
|
||
ChevronDown,
|
||
HelpCircle,
|
||
PenLine,
|
||
RefreshCw,
|
||
Sparkles,
|
||
Square,
|
||
Wand2,
|
||
WrapText,
|
||
} from "lucide-react";
|
||
|
||
import { Button } from "@/components/ui/Button";
|
||
import { Eyebrow } from "@/components/ui/Eyebrow";
|
||
import { SectionHeader } from "@/components/ui/SectionHeader";
|
||
import { StatusNote } from "@/components/ui/StatusNote";
|
||
import { TextArea } from "@/components/ui/TextArea";
|
||
import { PLOT_PRESETS, STYLE_PRESETS, type Preset } from "@/lib/workbench/directive";
|
||
import { buttonClass, focusRing } from "@/lib/ui/variants";
|
||
|
||
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 / P3-3 提升）：正文正上方常驻的「和 AI 说话」输入条。
|
||
// 眉题「和 AI 说话」+ 主标题「告诉 AI 这章想怎么写」+ HITL 微文案 +「?这是什么」常驻可见；
|
||
// 主 CTA「写本章」突出（md 尺寸、独占右侧），空章默认展开露出输入框。
|
||
// 发送键即「写本章」，沿用 composeDirective + 文风/剧情 chips + 流式打字机写进正文。
|
||
export 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-4 sm:px-6">
|
||
<div className="flex items-start justify-between gap-4">
|
||
<div className="min-w-0">
|
||
<Eyebrow className="mb-1">和 AI 说话</Eyebrow>
|
||
<button
|
||
type="button"
|
||
onClick={() => setOpen((v) => !v)}
|
||
aria-expanded={open}
|
||
aria-controls={panelId}
|
||
className={`group flex min-w-0 cursor-pointer items-center gap-2 rounded text-left font-serif text-title-md text-ink transition-colors duration-fast ease-standard hover:text-cinnabar ${focusRing}`}
|
||
>
|
||
<ChevronDown
|
||
className={`h-4 w-4 shrink-0 text-muted-soft motion-safe:transition-transform duration-fast ease-standard group-hover:text-cinnabar ${
|
||
open ? "rotate-180" : ""
|
||
}`}
|
||
aria-hidden="true"
|
||
/>
|
||
<span className="truncate">告诉 AI 这章想怎么写</span>
|
||
</button>
|
||
</div>
|
||
<div className="flex shrink-0 items-center gap-2">
|
||
{activeCount > 0 ? (
|
||
<span className="hidden rounded-full border border-line bg-bg px-2.5 py-0.5 text-2xs text-ink-soft sm:inline">
|
||
{activeCount} 项指令
|
||
</span>
|
||
) : null}
|
||
{/* 常驻主 CTA = 写本章：始终可见（折叠时也在），md 尺寸凸显为本条主动作，逐字流式写进正文。 */}
|
||
{streaming ? (
|
||
<Button onClick={onStop} variant="danger" size="md">
|
||
<Square className="h-4 w-4" aria-hidden="true" />
|
||
停
|
||
</Button>
|
||
) : (
|
||
<Button onClick={onWrite} variant="primary" size="md">
|
||
<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-2 text-caption text-muted-soft">
|
||
AI 给草稿，你决定采不采用，原文永远你说了算。
|
||
</p>
|
||
{open ? (
|
||
<div id={panelId} className="mt-4 space-y-4">
|
||
<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 / P3-3）：常驻贴在中央输入条下方，把续写/润色/整章重写/工具箱
|
||
// 归为「同一个 AI 的其它用法」（act-on-chapter 与导航分家）。用较浅面色 + 更软分隔成组，
|
||
// 与上方主指令条拉开层级。每个动词带可见范围提示（P1-4）。生成中禁用（避免与流式写章并发）。
|
||
export 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-soft bg-surface-soft px-4 py-2.5 sm:px-6">
|
||
<span className="text-eyebrow uppercase tracking-wide text-muted-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 说话」的闭环。
|
||
// 按钮 + 轻量弹层，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-lg border border-line bg-panel p-4 text-sm text-ink-soft shadow-paper"
|
||
>
|
||
<p className="mb-1 font-serif text-title-md text-ink">怎么和 AI 说话</p>
|
||
<p className="leading-6">
|
||
在这条写下要求，点「写本章」——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>
|
||
);
|
||
}
|