100 lines
3.5 KiB
TypeScript
100 lines
3.5 KiB
TypeScript
"use client";
|
||
|
||
import { CheckCircle2, CircleDashed, RotateCcw } from "lucide-react";
|
||
|
||
import { Badge } from "@/components/ui/Badge";
|
||
import { Button } from "@/components/ui/Button";
|
||
import { cardClass } from "@/lib/ui/variants";
|
||
import type { StyleDriftReport, StyleDriftSegment } from "@/lib/review/sse";
|
||
|
||
interface StylePanelProps {
|
||
style: StyleDriftReport | null;
|
||
incomplete: boolean;
|
||
// 选中段做回炉（打开 RefineView）。
|
||
onRefine: (segment: StyleDriftSegment) => void;
|
||
}
|
||
|
||
// 整体相似度的四分圆字符档（◔◑◕●），按 score 映射（UX §6.4 ③）。
|
||
const QUARTER_CHARS = ["○", "◔", "◑", "◕", "●"] as const;
|
||
|
||
function quarterChar(score: number): string {
|
||
const clamped = Math.min(100, Math.max(0, score));
|
||
const idx = Math.round((clamped / 100) * (QUARTER_CHARS.length - 1));
|
||
return QUARTER_CHARS[idx] ?? QUARTER_CHARS[0];
|
||
}
|
||
|
||
// 文风审区（UX §6.4 ③）：整体相似度 ◔% + 漂移段列表，每段可一键回炉。只读建议。
|
||
export function StylePanel({ style, incomplete, onRefine }: StylePanelProps) {
|
||
return (
|
||
<section className="mb-4">
|
||
<h2 className="text-xs font-semibold uppercase tracking-wide text-ink-soft">
|
||
文风 (style-auditor)
|
||
</h2>
|
||
{incomplete ? (
|
||
<Badge variant="warning" className="mt-1">
|
||
<CircleDashed className="h-3 w-3" aria-hidden="true" />
|
||
未完成
|
||
</Badge>
|
||
) : style === null ? (
|
||
<p className="mt-1 text-xs text-ink-soft">
|
||
无文风报告（学文风后第四审才能打分）。
|
||
</p>
|
||
) : (
|
||
<div className="mt-2 space-y-2 text-xs">
|
||
<p
|
||
className="flex items-center gap-1.5"
|
||
aria-label={`整体文风相似度 ${style.score}%`}
|
||
role="img"
|
||
>
|
||
<span className="text-lg leading-none text-cinnabar" aria-hidden="true">
|
||
{quarterChar(style.score)}
|
||
</span>
|
||
<span className="text-ink">
|
||
整体相似度 <span className="font-mono">{style.score}%</span>
|
||
</span>
|
||
</p>
|
||
|
||
{style.segments.length === 0 ? (
|
||
<Badge variant="success">
|
||
<CheckCircle2 className="h-3 w-3" aria-hidden="true" />
|
||
无明显文风漂移
|
||
</Badge>
|
||
) : (
|
||
<ul className="space-y-2">
|
||
{style.segments.map((seg, i) => (
|
||
<li
|
||
key={i}
|
||
className={cardClass("p-2")}
|
||
data-testid="drift-segment"
|
||
>
|
||
<div className="flex items-center gap-2">
|
||
<Badge variant="warning" className="font-mono">
|
||
第 {seg.idx} 段
|
||
</Badge>
|
||
<span className="font-mono text-ink-soft">
|
||
相似 {seg.score}%
|
||
</span>
|
||
{seg.label ? (
|
||
<span className="text-ink-soft">{seg.label}</span>
|
||
) : null}
|
||
</div>
|
||
<div className="mt-1.5 flex gap-2">
|
||
<Button
|
||
onClick={() => onRefine(seg)}
|
||
variant="primary"
|
||
size="sm"
|
||
>
|
||
<RotateCcw className="h-4 w-4" aria-hidden="true" />
|
||
一键回炉
|
||
</Button>
|
||
</div>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
)}
|
||
</div>
|
||
)}
|
||
</section>
|
||
);
|
||
}
|