61 lines
2.0 KiB
TypeScript
61 lines
2.0 KiB
TypeScript
"use client";
|
||
|
||
import Link from "next/link";
|
||
import { PenLine } from "lucide-react";
|
||
|
||
import { Badge } from "@/components/ui/Badge";
|
||
import type { OutlineChapterView } from "@/lib/api/types";
|
||
import {
|
||
isCloseWindow,
|
||
windowBadgeLabel,
|
||
} from "@/lib/outline/outline";
|
||
import { buttonClass } from "@/lib/ui/variants";
|
||
|
||
interface OutlineChapterRowProps {
|
||
chapter: OutlineChapterView;
|
||
projectId: string;
|
||
}
|
||
|
||
// 单章大纲行（UX §6.7）：章号 + beats + 伏笔窗口徽标（⚑）+ 「写此章」入口。
|
||
// 接近回收窗口的徽标用琥珀 + 「可回收」提示（a11y：图标 + 文案，不单靠色）。
|
||
export function OutlineChapterRow({ chapter, projectId }: OutlineChapterRowProps) {
|
||
const windows = chapter.foreshadow_windows ?? [];
|
||
return (
|
||
<li className="border-l-2 border-line py-2 pl-3">
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<span className="font-mono text-xs text-ink-soft">
|
||
第 {chapter.no} 章
|
||
</span>
|
||
<Link
|
||
href={`/projects/${projectId}/write?chapter=${chapter.no}`}
|
||
className={buttonClass({ variant: "secondary", size: "sm" })}
|
||
>
|
||
<PenLine className="h-3.5 w-3.5" aria-hidden="true" />
|
||
写此章
|
||
</Link>
|
||
{windows.map((w) => {
|
||
const close = isCloseWindow(chapter, w);
|
||
return (
|
||
<Badge
|
||
key={w.code}
|
||
variant={close ? "warning" : "accent"}
|
||
title={close ? "进入回收窗口，建议本章安排回收" : undefined}
|
||
>
|
||
{windowBadgeLabel(w)}
|
||
{close ? " · 可回收" : ""}
|
||
</Badge>
|
||
);
|
||
})}
|
||
</div>
|
||
{chapter.beats && chapter.beats.length > 0 ? (
|
||
<p className="mt-1 text-sm text-ink">
|
||
<span className="text-ink-soft">节拍：</span>
|
||
{chapter.beats.join(" / ")}
|
||
</p>
|
||
) : (
|
||
<p className="mt-1 text-sm text-ink-soft/60">（无节拍）</p>
|
||
)}
|
||
</li>
|
||
);
|
||
}
|