5674158707
- 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）
50 lines
1.3 KiB
TypeScript
50 lines
1.3 KiB
TypeScript
"use client";
|
||
|
||
import type { RefObject } from "react";
|
||
import { PanelLeft, PanelRight } from "lucide-react";
|
||
|
||
import { Button } from "@/components/ui/Button";
|
||
|
||
interface MobileContextBarProps {
|
||
chapterNo: number;
|
||
onOpenChapters: () => void;
|
||
onOpenAssistant: () => void;
|
||
chapterTriggerRef: RefObject<HTMLButtonElement | null>;
|
||
assistantTriggerRef: RefObject<HTMLButtonElement | null>;
|
||
}
|
||
|
||
// 窄屏/中屏顶部上下文条：目录 / 本章参考经抽屉触达；≥xl 直显三栏、此条隐藏。
|
||
export 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>
|
||
);
|
||
}
|