feat(ux): R1+R2 审稿裁决人体学 — 冲突卡内联片段 + 分组/排序/跳下一条/主次按钮

R1: 新 lib/review/snippet.ts 从 where 解析段号取终稿命中段预览,ConflictCard 渲染引用块。
R2: 新 lib/review/grouping.ts 按 type 分组+严重度排序(仅改显示顺序,保留原始 index 守 conflict_index 不变量),组计数徽标、跳到下一条未裁决(环回)、采纳改法主按钮/忽略手改次级。
TDD: snippet 8 测 + grouping 10 测。前端门禁绿: lint/tsc/vitest 201/build。
This commit is contained in:
Yaojia Wang
2026-06-20 15:53:45 +02:00
parent 6f419b35ed
commit d81583d5d1
7 changed files with 329 additions and 22 deletions

View File

@@ -8,17 +8,27 @@ interface ConflictCardProps {
conflict: ReviewConflict;
draft: DecisionDraft;
missing: boolean;
// R1命中段内联预览无段号/越界时为 null回退到「跳转」按钮
snippet: string | null;
onVerdict: (index: number, verdict: Verdict) => void;
onNote: (index: number, note: string) => void;
onJump: (index: number) => void;
}
const VERDICT_OPTIONS: { value: Verdict; label: string }[] = [
{ value: "accept", label: "采纳改法" },
{ value: "ignore", label: "忽略" },
{ value: "manual", label: "手改" },
// R2采纳改法=朱砂主按钮primary忽略/手改=次级secondary不再三者同权。
const VERDICT_OPTIONS: { value: Verdict; label: string; primary: boolean }[] = [
{ value: "accept", label: "采纳改法", primary: true },
{ value: "ignore", label: "忽略", primary: false },
{ value: "manual", label: "手改", primary: false },
];
// 裁决按钮样式:激活=朱砂填充;未激活的主按钮=朱砂描边强调,次级=低对比描边。
function verdictClass(active: boolean, primary: boolean): string {
if (active) return "bg-cinnabar text-panel";
if (primary) return "border border-cinnabar text-cinnabar hover:bg-cinnabar/10";
return "border border-line text-ink-soft hover:border-cinnabar hover:text-ink";
}
// 单个冲突报告卡UX §6.4):五类徽标 + where + refs + suggestion + 裁决三态。
// 冲突=赭红;未决/缺判时加图标+文案不单靠色a11y §10
export function ConflictCard({
@@ -26,6 +36,7 @@ export function ConflictCard({
conflict,
draft,
missing,
snippet,
onVerdict,
onNote,
onJump,
@@ -52,6 +63,15 @@ export function ConflictCard({
<p className="flex-1 text-sm text-ink">{conflict.suggestion}</p>
</div>
{snippet ? (
<blockquote className="mt-2 border-l-2 border-conflict/40 bg-bg/50 py-1 pl-3 text-xs leading-relaxed text-ink-soft">
<span className="mr-1 text-conflict" aria-hidden="true">
</span>
{snippet}
</blockquote>
) : null}
<div className="mt-2 flex flex-wrap items-center gap-2 pl-1 text-xs text-ink-soft">
{conflict.where ? (
<button
@@ -80,11 +100,10 @@ export function ConflictCard({
type="button"
aria-pressed={active}
onClick={() => onVerdict(index, opt.value)}
className={`rounded px-3 py-1 text-xs ${
active
? "bg-cinnabar text-panel"
: "border border-line text-ink hover:border-cinnabar"
}`}
className={`rounded px-3 py-1 text-xs ${verdictClass(
active,
opt.primary,
)}`}
>
{opt.label}
</button>

View File

@@ -19,6 +19,12 @@ import {
normalizeForeshadowSug,
normalizePace,
} from "@/lib/review/history";
import {
displayOrder,
groupConflicts,
nextUnresolvedInOrder,
} from "@/lib/review/grouping";
import { conflictSnippet } from "@/lib/review/snippet";
import { useAccept } from "@/lib/review/useAccept";
import { useReviewStream } from "@/lib/review/useReviewStream";
import type { ReviewConflict, StyleDriftSegment } from "@/lib/review/sse";
@@ -139,12 +145,26 @@ export function ReviewReport({
const onNote = (index: number, note: string): void =>
setDrafts((prev) => setNote(prev, index, note));
// R2按 type 分组 + 严重度排序(仅改显示顺序,每条仍携原始 index
const groups = useMemo(() => groupConflicts(conflicts), [conflicts]);
const order = useMemo(() => displayOrder(groups), [groups]);
const jumpToCard = (index: number): void => {
setFocusedIndex(index);
document
.getElementById(`conflict-card-${index}`)
?.scrollIntoView({ behavior: "smooth", block: "center" });
};
// R2跳到显示顺序中的下一条未裁决环回全决则提示完成。
const jumpToNextUnresolved = (): void => {
const next = nextUnresolvedInOrder(order, drafts, focusedIndex);
if (next === null) {
toast("全部冲突已裁决。", "success");
return;
}
jumpToCard(next);
};
const jumpToAnchor = (index: number): void => {
setFocusedIndex(index);
document
@@ -276,20 +296,54 @@ export function ReviewReport({
: "进页未带审稿留痕,点「重新审稿」开始。"}
</p>
) : (
<ul className="space-y-3">
{conflicts.map((c, i) => (
<ConflictCard
key={i}
index={i}
conflict={c}
draft={drafts[i] ?? { verdict: null, note: "" }}
missing={missing.has(i)}
onVerdict={onVerdict}
onNote={onNote}
onJump={jumpToAnchor}
/>
<div className="space-y-4">
{/* R2未裁决进度 + 跳到下一条未裁决 */}
<div className="flex items-center justify-between text-xs text-ink-soft">
<span>
{unresolved > 0 ? (
<span className="text-conflict">
{unresolved}/{conflictCount}
</span>
) : (
<span className="text-pass"> </span>
)}
</span>
<button
type="button"
onClick={jumpToNextUnresolved}
disabled={unresolved === 0}
className="rounded border border-line px-2 py-0.5 hover:border-cinnabar hover:text-cinnabar disabled:cursor-not-allowed disabled:opacity-40"
>
</button>
</div>
{groups.map((group) => (
<div key={group.type}>
<h3 className="mb-2 flex items-center gap-2 text-xs font-semibold text-ink">
{group.type}
<span className="rounded-full bg-[var(--color-conflict)]/10 px-2 py-0.5 font-mono text-conflict">
{group.items.length}
</span>
</h3>
<ul className="space-y-3">
{group.items.map(({ conflict: c, index: i }) => (
<ConflictCard
key={i}
index={i}
conflict={c}
draft={drafts[i] ?? { verdict: null, note: "" }}
missing={missing.has(i)}
snippet={conflictSnippet(finalText, c.where)}
onVerdict={onVerdict}
onNote={onNote}
onJump={jumpToAnchor}
/>
))}
</ul>
</div>
))}
</ul>
</div>
)}
</section>