390 lines
46 KiB
TypeScript
390 lines
46 KiB
TypeScript
"use client";
|
||
|
||
import { useCallback, useEffect, useMemo, useRef, useState, type ChangeEvent } from "react";
|
||
import Timeline from "@/components/timeline";
|
||
import TranscriptEditor from "@/components/transcript-editor";
|
||
import { createEditHistory, commitEdit, undoEdit, redoEdit } from "@/lib/edit-history";
|
||
import { createAnnotation, exportAnnotations, exportTranscripts, formatTime, parseAnnotations, parseTranscripts, reasonOptions, validateAnnotation, type Annotation, type Transcript } from "@/lib/annotations";
|
||
|
||
type Recording = { call_id: string; name: string; path: string; url: string };
|
||
type Dataset = { transcripts: Transcript[]; annotations: Annotation[] };
|
||
type Workspace = Dataset & { recordings: Recording[]; source: "saved" | "draft" | "example"; savedAt?: string };
|
||
type Notice = { message: string; kind: "success" | "error" | "info" };
|
||
const DRAFT_KEY = "eot-workbench-v1";
|
||
const DEFAULT_DATASET = "韩泰机器人抢话";
|
||
const ALL_DATASETS = "all";
|
||
function recordingDataset(recording: Recording) {
|
||
const parts = recording.path.replaceAll("\\", "/").split("/").filter(Boolean);
|
||
return parts.length > 1 ? parts[0] : "已导入对话";
|
||
}
|
||
function callDataset(id: string, recordings: Recording[], originalGroups?: Map<string, string>) {
|
||
const original = originalGroups?.get(id);
|
||
if (original) return original;
|
||
const recording = recordings.find(row => row.call_id === id);
|
||
return recording ? recordingDataset(recording) : id === "demo" ? "标准示例" : "已导入对话";
|
||
}
|
||
type IconName = "wave" | "upload" | "download" | "save" | "search" | "play" | "pause" | "back" | "forward" | "plus" | "check" | "clock" | "help" | "edit" | "trash" | "undo" | "redo" | "headphones" | "chevron" | "close" | "file";
|
||
const paths: Record<IconName, string> = {
|
||
wave: "M3 10v4m4-8v12m5-16v20m5-16v12m4-8v4", upload: "M12 16V3m-5 5 5-5 5 5M4 16v4h16v-4", download: "M12 3v13m-5-5 5 5 5-5M4 17v3h16v-3",
|
||
save: "M5 3h13l3 3v15H3V3h2m2 0v6h10V3M7 21v-8h10v8", search: "M21 21l-5-5M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0", play: "m9 5 11 7-11 7V5", pause: "M8 5v14m8-14v14",
|
||
back: "M11 5 4 12l7 7M4 12h10a6 6 0 0 1 6 6", forward: "m13 5 7 7-7 7M20 12H10a6 6 0 0 0-6 6", plus: "M12 5v14M5 12h14", check: "m5 12 4 4L19 6", clock: "M12 7v5l3 2M22 12a10 10 0 1 1-20 0 10 10 0 0 1 20 0",
|
||
help: "M9 9a3 3 0 0 1 6 0c0 2-3 2-3 4m0 3h.01M22 12a10 10 0 1 1-20 0 10 10 0 0 1 20 0", edit: "m16 3 5 5-12 12-6 1 1-6L16 3m-2 2 5 5", trash: "M3 6h18M9 6V3h6v3M5 6l1 15h12l1-15M10 10v7m4-7v7",
|
||
undo: "M8 3 3 8l5 5M3 8h11a7 7 0 0 1 0 14", redo: "m16 3 5 5-5 5M21 8H10a7 7 0 0 0 0 14", headphones: "M4 14v-2a8 8 0 0 1 16 0v2M4 13H2v7h5v-7H4m16 0h2v7h-5v-7h3", chevron: "m6 9 6 6 6-6", close: "m6 6 12 12M18 6 6 18", file: "M14 2H5v20h14V7l-5-5v5h5M8 12h8m-8 4h6",
|
||
};
|
||
function Icon({ name, size = 18 }: { name: IconName; size?: number }) { return <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d={paths[name]} /></svg>; }
|
||
function labelName(row: Annotation) { return row.can_reply_now === "1" ? "可以接话" : row.can_reply_now === "0" ? "继续等待" : row.reason ? "待仲裁" : "待标注"; }
|
||
function labelClass(row: Annotation) { return row.can_reply_now === "1" ? "positive" : row.can_reply_now === "0" ? "negative" : "pending"; }
|
||
function download(filename: string, content: string) { const url = URL.createObjectURL(new Blob(["\uFEFF", content], { type: "text/csv;charset=utf-8" })); const link = document.createElement("a"); link.href = url; link.download = filename; link.click(); setTimeout(() => URL.revokeObjectURL(url), 1000); }
|
||
|
||
export default function Workbench() {
|
||
const [history, setHistory] = useState(() => createEditHistory<Dataset>({ transcripts: [], annotations: [] }));
|
||
const historyRef = useRef(history);
|
||
const { transcripts, annotations } = history.present;
|
||
const [recordings, setRecordings] = useState<Recording[]>([]);
|
||
const [callId, setCallId] = useState("demo");
|
||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||
const [currentMs, setCurrentMs] = useState(0);
|
||
const [audioDuration, setAudioDuration] = useState(0);
|
||
const [waveform, setWaveform] = useState<number[][] | null>(null);
|
||
const [playing, setPlaying] = useState(false);
|
||
const [rate, setRate] = useState(1);
|
||
const [loading, setLoading] = useState(true);
|
||
const [initialized, setInitialized] = useState(false);
|
||
const [dirty, setDirty] = useState(false);
|
||
const [saving, setSaving] = useState(false);
|
||
const [savedTime, setSavedTime] = useState<string | null>(null);
|
||
const [search, setSearch] = useState("");
|
||
const [filter, setFilter] = useState("all");
|
||
const [datasetScope, setDatasetScope] = useState(DEFAULT_DATASET);
|
||
const [mode, setMode] = useState<"edit" | "view">("edit");
|
||
const [menu, setMenu] = useState<"import" | "export" | "create" | null>(null);
|
||
const [notice, setNotice] = useState<Notice | null>(null);
|
||
const [transcriptDraft, setTranscriptDraft] = useState<{ index: number; row: Transcript } | null>(null);
|
||
const [helpOpen, setHelpOpen] = useState(false);
|
||
const audioRef = useRef<HTMLAudioElement>(null);
|
||
const asrImportRef = useRef<HTMLInputElement>(null);
|
||
const eotImportRef = useRef<HTMLInputElement>(null);
|
||
const audioImportRef = useRef<HTMLInputElement>(null);
|
||
const playBoundary = useRef<number | null>(null);
|
||
const objectUrls = useRef(new Set<string>());
|
||
const versionRef = useRef(0);
|
||
const originalGroupsRef = useRef(new Map<string, string>());
|
||
const callListRef = useRef<HTMLDivElement>(null);
|
||
|
||
const notify = useCallback((message: string, kind: Notice["kind"] = "success") => setNotice({ message, kind }), []);
|
||
const commit = useCallback((next: Dataset | ((current: Dataset) => Dataset)) => {
|
||
const current = historyRef.current;
|
||
const updated = commitEdit(current, typeof next === "function" ? next(current.present) : next);
|
||
if (updated === current) return;
|
||
historyRef.current = updated; setHistory(updated);
|
||
versionRef.current++;
|
||
setDirty(true); setSavedTime(null);
|
||
}, []);
|
||
const updateAnnotation = useCallback((id: string, patch: Partial<Annotation>) => commit(current => {
|
||
const row = current.annotations.find(item => item.id === id);
|
||
if (!row || Object.entries(patch).every(([key, value]) => row[key as keyof Annotation] === value)) return current;
|
||
return { ...current, annotations: current.annotations.map(item => item.id === id ? { ...item, ...patch } : item) };
|
||
}), [commit]);
|
||
const loadWorkspace = useCallback(async () => {
|
||
try {
|
||
const response = await fetch("/api/workspace", { cache: "no-store" }); const payload = await response.json();
|
||
if (!response.ok) throw new Error(payload.error || "工作区读取失败");
|
||
const workspace = payload as Workspace; let dataset: Dataset = { transcripts: workspace.transcripts, annotations: workspace.annotations }; let restored = false;
|
||
try {
|
||
const draft = JSON.parse(localStorage.getItem(DRAFT_KEY) || "null");
|
||
if (draft && (!workspace.savedAt || draft.updatedAt > Date.parse(workspace.savedAt))) {
|
||
parseTranscripts(exportTranscripts(draft.transcripts)); parseAnnotations(exportAnnotations(draft.annotations));
|
||
dataset = { transcripts: draft.transcripts, annotations: draft.annotations }; restored = true;
|
||
}
|
||
} catch { /* A corrupt browser draft never blocks opening the project. */ }
|
||
originalGroupsRef.current = new Map(workspace.recordings.map(row => [row.call_id, recordingDataset(row)]));
|
||
const initialHistory = createEditHistory(dataset); historyRef.current = initialHistory; setHistory(initialHistory); setRecordings(workspace.recordings);
|
||
const preferredRecording = workspace.recordings.find(row => recordingDataset(row) === DEFAULT_DATASET);
|
||
const initialCall = preferredRecording?.call_id || dataset.annotations[0]?.call_id || dataset.transcripts[0]?.call_id || workspace.recordings[0]?.call_id || "demo";
|
||
const initial = dataset.annotations.filter(row => row.call_id === initialCall).sort((a, b) => a.decision_ms - b.decision_ms)[0];
|
||
setDatasetScope(preferredRecording ? DEFAULT_DATASET : ALL_DATASETS);
|
||
setCallId(initialCall); setSelectedId(initial?.id || null); setCurrentMs(initial?.decision_ms || 0);
|
||
setDirty(restored); setSavedTime(workspace.savedAt || null); setInitialized(true);
|
||
if (restored) notify("已恢复这个浏览器中尚未保存的草稿", "info");
|
||
} catch (error) { notify(error instanceof Error ? error.message : "工作区读取失败", "error"); }
|
||
finally { setLoading(false); }
|
||
}, [notify]);
|
||
useEffect(() => { void loadWorkspace(); }, [loadWorkspace]);
|
||
useEffect(() => { callListRef.current?.querySelector(".call-item.selected")?.scrollIntoView({ block: "nearest" }); }, [callId]);
|
||
useEffect(() => {
|
||
if (!initialized || !dirty) return;
|
||
const timer = setTimeout(() => { try { localStorage.setItem(DRAFT_KEY, JSON.stringify({ transcripts, annotations, updatedAt: Date.now() })); } catch { notify("浏览器草稿空间不足，请保存到项目或导出 CSV", "error"); } }, 350);
|
||
return () => clearTimeout(timer);
|
||
}, [transcripts, annotations, initialized, dirty, notify]);
|
||
useEffect(() => { if (!notice) return; const timer = setTimeout(() => setNotice(null), notice.kind === "error" ? 9000 : 4500); return () => clearTimeout(timer); }, [notice]);
|
||
useEffect(() => { const urls = objectUrls.current; return () => urls.forEach(url => URL.revokeObjectURL(url)); }, []);
|
||
useEffect(() => {
|
||
if (!helpOpen) return;
|
||
const oldFocus = document.activeElement as HTMLElement | null;
|
||
const modal = document.querySelector<HTMLElement>(".modal"); const focusables = () => [...(modal?.querySelectorAll<HTMLElement>('button:not(:disabled),input,select,textarea') || [])];
|
||
(modal?.querySelector<HTMLElement>("[autofocus]") || focusables()[0])?.focus();
|
||
const handler = (event: KeyboardEvent) => {
|
||
if (event.key === "Escape") setHelpOpen(false);
|
||
if (event.key === "Tab") { const elements = focusables(); const first = elements[0], last = elements.at(-1); if (event.shiftKey && document.activeElement === first) { event.preventDefault(); last?.focus(); } else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first?.focus(); } }
|
||
};
|
||
document.addEventListener("keydown", handler); return () => { document.removeEventListener("keydown", handler); oldFocus?.focus(); };
|
||
}, [helpOpen]);
|
||
|
||
const callAnnotations = useMemo(() => annotations.filter(row => row.call_id === callId).sort((a, b) => a.decision_ms - b.decision_ms), [annotations, callId]);
|
||
const callTranscripts = useMemo(() => transcripts.map((row, index) => ({ row, index })).filter(({ row }) => row.call_id === callId).sort((a, b) => a.row.start_ms - b.row.start_ms), [transcripts, callId]);
|
||
const selected = callAnnotations.find(row => row.id === selectedId) || null;
|
||
const recording = recordings.find(row => row.call_id === callId) || null;
|
||
const durationMs = audioDuration || Math.max(10000, ...callTranscripts.map(({ row }) => row.end_ms + 1500), ...callAnnotations.map(row => row.decision_ms + 1500));
|
||
const selectedError = selected ? validateAnnotation(selected, annotations.filter(row => row.id !== selected.id)) : null;
|
||
const allCalls = useMemo(() => {
|
||
const groupNumbers = new Map<string, number>();
|
||
return [...new Set([...recordings.map(row => row.call_id), ...transcripts.map(row => row.call_id), ...annotations.map(row => row.call_id)])].map(id => {
|
||
const recording = recordings.find(row => row.call_id === id); const rows = annotations.filter(row => row.call_id === id);
|
||
const group = callDataset(id, recordings, originalGroupsRef.current);
|
||
const groupNumber = (groupNumbers.get(group) || 0) + 1; groupNumbers.set(group, groupNumber);
|
||
return { id, group, name: id === "demo" ? "示例对话" : recording ? `${group} · ${String(groupNumber).padStart(2, "0")}` : id, count: rows.length, pending: rows.filter(row => row.can_reply_now === "").length, recording };
|
||
});
|
||
}, [transcripts, annotations, recordings]);
|
||
const datasetGroups = useMemo(() => [...new Set(allCalls.map(row => row.group))].sort((a, b) => a === DEFAULT_DATASET ? -1 : b === DEFAULT_DATASET ? 1 : a.localeCompare(b, "zh-CN")), [allCalls]);
|
||
const scopedCalls = allCalls.filter(row => datasetScope === ALL_DATASETS || row.group === datasetScope);
|
||
const scopedCallIds = new Set(scopedCalls.map(row => row.id));
|
||
const scopedAnnotations = annotations.filter(row => scopedCallIds.has(row.call_id));
|
||
const visibleCalls = scopedCalls.filter(row => `${row.id} ${row.name}`.toLowerCase().includes(search.toLowerCase()) && (filter !== "pending" || row.pending > 0 || row.count === 0));
|
||
const callName = allCalls.find(row => row.id === callId)?.name || callId;
|
||
const completed = scopedAnnotations.filter(row => row.can_reply_now !== "").length;
|
||
|
||
const seek = useCallback((ms: number) => {
|
||
const next = Math.max(0, Math.min(durationMs, Math.round(ms))); setCurrentMs(next); playBoundary.current = null;
|
||
if (audioRef.current && recording && Number.isFinite(audioRef.current.duration)) audioRef.current.currentTime = next / 1000;
|
||
}, [durationMs, recording]);
|
||
const selectAnnotation = useCallback((id: string, seekToPoint = true) => { const row = annotations.find(row => row.id === id); if (row) { setTranscriptDraft(null); setSelectedId(id); if (seekToPoint) seek(row.decision_ms); } }, [annotations, seek]);
|
||
const chooseCall = (id: string) => {
|
||
if (id === callId) return;
|
||
audioRef.current?.pause(); playBoundary.current = null; setPlaying(false); setAudioDuration(0); setWaveform(null);
|
||
const initial = annotations.filter(row => row.call_id === id).sort((a, b) => a.decision_ms - b.decision_ms)[0];
|
||
setCallId(id); setSelectedId(initial?.id || null); setCurrentMs(initial?.decision_ms || 0); setTranscriptDraft(null);
|
||
};
|
||
const changeDatasetScope = (scope: string) => {
|
||
setDatasetScope(scope); setSearch(""); setFilter("all");
|
||
const first = allCalls.find(row => scope === ALL_DATASETS || row.group === scope);
|
||
if (first) chooseCall(first.id);
|
||
};
|
||
const togglePlay = useCallback(async () => {
|
||
const audio = audioRef.current; if (!recording || !audio) { notify("请先为这通对话关联录音", "info"); return; } playBoundary.current = null;
|
||
if (audio.paused) { try { if (audio.ended) audio.currentTime = 0; await audio.play(); } catch { notify("录音暂时无法播放，请重新关联文件", "error"); } } else audio.pause();
|
||
}, [recording, notify]);
|
||
const review = async (future: boolean) => {
|
||
if (!selected || !recording || !audioRef.current) { notify("关联录音后即可回听这个判断点", "info"); return; }
|
||
const audio = audioRef.current; const start = future ? selected.decision_ms : Math.max(0, selected.decision_ms - 4000);
|
||
audio.currentTime = Math.min(start, durationMs) / 1000; setCurrentMs(start); playBoundary.current = future ? Math.min(durationMs, start + 4000) : selected.decision_ms;
|
||
try { await audio.play(); } catch { notify("录音暂时无法播放", "error"); }
|
||
};
|
||
useEffect(() => {
|
||
if (!playing) return; let frame = 0;
|
||
const tick = () => { const audio = audioRef.current; if (audio) { const position = audio.currentTime * 1000; if (playBoundary.current !== null && position >= playBoundary.current) { const stop = playBoundary.current; audio.pause(); audio.currentTime = stop / 1000; setCurrentMs(stop); playBoundary.current = null; return; } setCurrentMs(Math.round(position)); } frame = requestAnimationFrame(tick); };
|
||
frame = requestAnimationFrame(tick); return () => cancelAnimationFrame(frame);
|
||
}, [playing]);
|
||
useEffect(() => {
|
||
const audio = audioRef.current;
|
||
const sameSource = !!recording && audio?.currentSrc === new URL(recording.url, window.location.href).href;
|
||
const knownDuration = sameSource && audio && Number.isFinite(audio.duration) && audio.duration > 0 ? Math.round(audio.duration * 1000) : 0;
|
||
setWaveform(null); setAudioDuration(knownDuration); setPlaying(false); if (!recording) return;
|
||
const controller = new AbortController(); let context: AudioContext | null = null;
|
||
void (async () => {
|
||
try { const response = await fetch(recording.url, { signal: controller.signal }); if (!response.ok) throw new Error("无法读取录音"); const bytes = await response.arrayBuffer(); context = new AudioContext(); const buffer = await context.decodeAudioData(bytes); if (controller.signal.aborted) return;
|
||
const count = 3200;
|
||
const channels = Array.from({ length: buffer.numberOfChannels }, (_, channel) => {
|
||
const samples = buffer.getChannelData(channel);
|
||
return Array.from({ length: count }, (_, index) => {
|
||
const begin = Math.floor(index * samples.length / count), end = Math.floor((index + 1) * samples.length / count);
|
||
let peak = 0;
|
||
for (let i = begin; i < end; i++) peak = Math.max(peak, Math.abs(samples[i]));
|
||
return peak;
|
||
});
|
||
});
|
||
// Share the scale across channels so their relative levels remain visible.
|
||
const max = channels.reduce((largest, peaks) => Math.max(largest, ...peaks), .01);
|
||
setWaveform(channels.map(peaks => peaks.map(peak => peak / max)));
|
||
} catch (error) { if (!controller.signal.aborted) notify(error instanceof Error ? error.message : "波形读取失败", "error"); } finally { if (context) void context.close(); }
|
||
})(); return () => controller.abort();
|
||
}, [recording?.url, notify]);
|
||
useEffect(() => { if (audioRef.current) audioRef.current.playbackRate = rate; }, [rate, recording]);
|
||
|
||
const addAnnotationAt = useCallback((ms: number) => {
|
||
if (mode === "view" || loading) return;
|
||
setTranscriptDraft(null); setMenu(null);
|
||
const time = Math.max(0, Math.min(durationMs, Math.round(ms)));
|
||
const existing = callAnnotations.find(row => row.decision_ms === time);
|
||
if (existing) { setSelectedId(existing.id); seek(time); notify("这个时间点已有标注，已为你选中", "info"); return; }
|
||
const row = createAnnotation(callId, time);
|
||
const lastUser = callTranscripts.map(item => item.row).filter(item => item.role === "user" && item.end_ms <= time).at(-1);
|
||
row.user_text_at_decision = lastUser?.transcript || "";
|
||
commit({ transcripts, annotations: [...annotations, row] }); setSelectedId(row.id); seek(time); notify(`已在 ${formatTime(time)} 新增判断点`);
|
||
}, [mode, loading, durationMs, callAnnotations, callId, callTranscripts, transcripts, annotations, commit, notify, seek]);
|
||
const moveAnnotation = (id: string, ms: number) => {
|
||
if (mode !== "edit") return;
|
||
const time = Math.max(0, Math.min(durationMs, Math.round(ms)));
|
||
const row = callAnnotations.find(item => item.id === id);
|
||
if (!row || row.decision_ms === time) return;
|
||
if (callAnnotations.some(item => item.id !== id && item.decision_ms === time)) { notify("这个时间点已有标注，请选择另一个位置", "info"); return; }
|
||
updateAnnotation(id, { decision_ms: time });
|
||
};
|
||
const addAnnotation = useCallback(() => addAnnotationAt(currentMs), [addAnnotationAt, currentMs]);
|
||
const setLabel = useCallback((label: Annotation["can_reply_now"]) => {
|
||
if (!selected || mode === "view") return; const existing = reasonOptions.find(row => row.value === selected.reason && row.can_reply_now === label);
|
||
updateAnnotation(selected.id, { can_reply_now: label, reason: existing?.value || (label === "1" ? "completed_turn" : label === "0" ? "mid_turn_pause" : "uncertain") });
|
||
}, [selected, mode, updateAnnotation]);
|
||
const travelHistory = useCallback((direction: "undo" | "redo") => {
|
||
if (mode !== "edit" || loading) return;
|
||
const current = historyRef.current;
|
||
const updated = direction === "undo" ? undoEdit(current) : redoEdit(current);
|
||
if (updated === current) return;
|
||
historyRef.current = updated; setHistory(updated);
|
||
const previous = updated.present;
|
||
versionRef.current++; setDirty(true); setSavedTime(null);
|
||
setTranscriptDraft(draft => draft && draft.index >= 0 && previous.transcripts[draft.index]
|
||
? { index: draft.index, row: { ...previous.transcripts[draft.index] } } : null);
|
||
const ids = new Set([...previous.annotations.map(row => row.call_id), ...previous.transcripts.map(row => row.call_id), ...recordings.map(row => row.call_id)]);
|
||
const firstInScope = [...ids].find(id => datasetScope === ALL_DATASETS || callDataset(id, recordings, originalGroupsRef.current) === datasetScope);
|
||
const nextCall = ids.has(callId) ? callId : firstInScope || previous.annotations[0]?.call_id || previous.transcripts[0]?.call_id || recordings[0]?.call_id || "demo";
|
||
const nextSelection = previous.annotations.find(row => row.id === selectedId && row.call_id === nextCall) || previous.annotations.find(row => row.call_id === nextCall);
|
||
setSelectedId(nextSelection?.id || null);
|
||
if (nextCall !== callId) {
|
||
const nextGroup = callDataset(nextCall, recordings, originalGroupsRef.current);
|
||
if (datasetScope !== ALL_DATASETS && datasetScope !== nextGroup) setDatasetScope(nextGroup);
|
||
setSearch(""); setFilter("all"); audioRef.current?.pause(); setCallId(nextCall); setCurrentMs(nextSelection?.decision_ms || 0); setAudioDuration(0);
|
||
}
|
||
notify(direction === "undo" ? "已撤销上一步修改" : "已重做上一步修改", "info");
|
||
}, [mode, loading, selectedId, callId, recordings, datasetScope, notify]);
|
||
const undo = useCallback(() => travelHistory("undo"), [travelHistory]);
|
||
const redo = useCallback(() => travelHistory("redo"), [travelHistory]);
|
||
useEffect(() => {
|
||
const handler = (event: KeyboardEvent) => {
|
||
if (event.defaultPrevented || event.isComposing || helpOpen || mode !== "edit" || loading || event.altKey || !(event.ctrlKey || event.metaKey)) return;
|
||
const target = event.target;
|
||
if (target instanceof HTMLElement && (target.closest("input, textarea, select") || target.isContentEditable)) return;
|
||
const key = event.key.toLowerCase();
|
||
if (key !== "z" && key !== "y") return;
|
||
event.preventDefault();
|
||
if (key === "y" || event.shiftKey) redo(); else undo();
|
||
};
|
||
// Capture only history shortcuts so timeline controls cannot swallow them.
|
||
window.addEventListener("keydown", handler, true);
|
||
return () => window.removeEventListener("keydown", handler, true);
|
||
}, [undo, redo, mode, loading, helpOpen]);
|
||
const saveWorkspace = useCallback(async () => {
|
||
if (saving) return; const version = versionRef.current;
|
||
try { parseTranscripts(exportTranscripts(transcripts)); parseAnnotations(exportAnnotations(annotations)); if (audioDuration && callAnnotations.some(row => row.decision_ms > audioDuration)) throw new Error("当前判断点超出录音时长，请调整后保存"); setSaving(true);
|
||
const response = await fetch("/api/workspace", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ transcripts, annotations }) }); const payload = await response.json(); if (!response.ok) throw new Error(payload.error || "保存失败");
|
||
setSavedTime(payload.savedAt); if (versionRef.current === version) { setDirty(false); localStorage.removeItem(DRAFT_KEY); } notify(versionRef.current === version ? "已保存对话转写和 EOT 标注到项目" : "已保存，保存期间的新修改仍保留为草稿");
|
||
} catch (error) { notify(error instanceof Error ? error.message : "保存失败", "error"); } finally { setSaving(false); }
|
||
}, [saving, transcripts, annotations, audioDuration, callAnnotations, notify]);
|
||
useEffect(() => {
|
||
const handler = (event: KeyboardEvent) => {
|
||
if (event.defaultPrevented || helpOpen) return;
|
||
if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "s") { event.preventDefault(); void saveWorkspace(); return; }
|
||
const target = event.target as HTMLElement; if (target.closest("input, textarea, select, [contenteditable=true]") || event.ctrlKey || event.metaKey || event.altKey) return;
|
||
if (event.code === "Space") { if (target.closest("button, a, summary")) return; event.preventDefault(); void togglePlay(); } else if (event.key === "ArrowLeft") { event.preventDefault(); seek(currentMs - 1000); } else if (event.key === "ArrowRight") { event.preventDefault(); seek(currentMs + 1000); }
|
||
else if (event.key === "1") setLabel("1"); else if (event.key === "2") setLabel("0"); else if (event.key === "3") setLabel(""); else if (event.key.toLowerCase() === "a") addAnnotation();
|
||
else if (event.key === "[" || event.key === "]") { const index = callAnnotations.findIndex(row => row.id === selectedId); const next = callAnnotations[index + (event.key === "[" ? -1 : 1)]; if (next) selectAnnotation(next.id); }
|
||
}; window.addEventListener("keydown", handler); return () => window.removeEventListener("keydown", handler);
|
||
}, [currentMs, togglePlay, seek, setLabel, addAnnotation, selectedId, callAnnotations, selectAnnotation, saveWorkspace, helpOpen, transcriptDraft]);
|
||
const importCsv = async (event: ChangeEvent<HTMLInputElement>, kind: "asr" | "eot") => {
|
||
const file = event.target.files?.[0]; event.target.value = ""; if (!file) return;
|
||
try { const content = await file.text(); const rows = kind === "asr" ? parseTranscripts(content) : parseAnnotations(content); commit(kind === "asr" ? { transcripts: rows as Transcript[], annotations } : { transcripts, annotations: rows as Annotation[] });
|
||
const initialCall = rows[0]?.call_id; if (initialCall) {
|
||
const nextGroup = callDataset(initialCall, recordings, originalGroupsRef.current);
|
||
if (datasetScope !== ALL_DATASETS && datasetScope !== nextGroup) setDatasetScope(nextGroup);
|
||
setSearch(""); setFilter("all"); audioRef.current?.pause();
|
||
if (initialCall === callId && audioRef.current) audioRef.current.currentTime = 0;
|
||
if (initialCall !== callId) setAudioDuration(0);
|
||
setCallId(initialCall); setCurrentMs(0); setTranscriptDraft(null); setSelectedId(kind === "eot" ? (rows[0] as Annotation).id : annotations.find(row => row.call_id === initialCall)?.id || null);
|
||
} notify(`已导入 ${rows.length} 条${kind === "asr" ? "对话转写" : "EOT 标注"}，可撤销或保存到项目`);
|
||
} catch (error) { notify(error instanceof Error ? error.message : "导入失败", "error"); }
|
||
};
|
||
const attachAudio = (event: ChangeEvent<HTMLInputElement>) => { const file = event.target.files?.[0]; event.target.value = ""; if (!file) return; const url = URL.createObjectURL(file); objectUrls.current.add(url); setRecordings(rows => [...rows.filter(row => row.call_id !== callId), { call_id: callId, name: file.name, path: file.name, url }]); notify(`已关联录音：${file.name}。文件关联保留在当前页面`, "info"); };
|
||
const exportCsv = (kind: "asr" | "eot", scope: "current" | "all") => {
|
||
try {
|
||
const rows = kind === "asr" ? transcripts : annotations;
|
||
const exportRows = scope === "current" ? rows.filter(row => scopedCallIds.has(row.call_id)) : rows;
|
||
const content = kind === "asr" ? exportTranscripts(exportRows as Transcript[]) : exportAnnotations(exportRows as Annotation[]);
|
||
if (kind === "asr") parseTranscripts(content); else parseAnnotations(content);
|
||
download(kind === "asr" ? "asr_history.csv" : "eot_labels.csv", content); setMenu(null);
|
||
notify(`已导出${scope === "current" ? datasetScope : "全部数据"}的 ${exportRows.length} 条${kind === "asr" ? "对话转写" : "EOT 标注"}`);
|
||
} catch (error) { notify(error instanceof Error ? error.message : "导出失败", "error"); }
|
||
};
|
||
const addTranscriptAt = (role: Transcript["role"]) => {
|
||
if (loading || mode === "view") return;
|
||
setMenu(null); audioRef.current?.pause();
|
||
const start = Math.max(0, Math.min(Math.round(currentMs), durationMs - 1));
|
||
setTranscriptDraft({ index: -1, row: { call_id: callId, role, start_ms: start, end_ms: Math.min(durationMs, start + 1000), transcript: "" } });
|
||
};
|
||
const resizeTranscript = (index: number, startMs: number, endMs: number) => {
|
||
if (mode === "view" || !transcripts[index]) return;
|
||
if (startMs < 0 || endMs > durationMs || endMs <= startMs) { notify("片段时间必须在录音内，且结束时间晚于开始时间", "error"); return; }
|
||
const next = transcripts.map((row, i) => i === index ? { ...row, start_ms: startMs, end_ms: endMs } : row);
|
||
commit({ transcripts: next, annotations });
|
||
setTranscriptDraft(draft => draft?.index === index ? { ...draft, row: { ...draft.row, start_ms: startMs, end_ms: endMs } } : draft);
|
||
};
|
||
const saveTranscript = () => {
|
||
if (!transcriptDraft || mode === "view") return;
|
||
try {
|
||
const next = [...transcripts];
|
||
if (transcriptDraft.row.end_ms > durationMs) throw new Error("片段结束时间不能超过录音时长");
|
||
if (transcriptDraft.index === -1) next.push(transcriptDraft.row); else next[transcriptDraft.index] = transcriptDraft.row;
|
||
parseTranscripts(exportTranscripts(next)); commit({ transcripts: next, annotations });
|
||
setTranscriptDraft({ ...transcriptDraft, index: transcriptDraft.index === -1 ? next.length - 1 : transcriptDraft.index });
|
||
notify("对话片段已更新");
|
||
} catch (error) { notify(error instanceof Error ? error.message : "片段无效", "error"); }
|
||
};
|
||
|
||
return <div className="app-shell">
|
||
<input ref={asrImportRef} type="file" accept=".csv,text/csv" hidden onChange={event => void importCsv(event, "asr")} />
|
||
<input ref={eotImportRef} type="file" accept=".csv,text/csv" hidden onChange={event => void importCsv(event, "eot")} />
|
||
<input ref={audioImportRef} type="file" accept="audio/*,.mp3,.wav,.m4a,.ogg,.flac,.webm" hidden onChange={attachAudio} />
|
||
<audio ref={audioRef} src={recording?.url} preload="metadata" onPlay={() => setPlaying(true)} onPause={() => setPlaying(false)} onEnded={() => setPlaying(false)} onLoadedMetadata={() => { const audio = audioRef.current; if (audio && Number.isFinite(audio.duration)) { setAudioDuration(Math.round(audio.duration * 1000)); audio.currentTime = Math.min(currentMs / 1000, audio.duration); audio.playbackRate = rate; } }} onTimeUpdate={() => { if (!playing && audioRef.current) setCurrentMs(Math.round(audioRef.current.currentTime * 1000)); }} onError={() => { if (recording) notify("录音无法播放，请重新关联文件", "error"); }} />
|
||
|
||
<header className="topbar"><a className="brand" href="/" aria-label="EOT Studio 首页"><span className="brand-mark"><Icon name="wave" size={22} /></span><span>EOT<span className="brand-light"> Studio</span><small>话轮标注工作台</small></span></a><div className="workspace-tag"><span className="status-dot" />本地工作空间</div><div className="top-actions">
|
||
<span className="save-status"><span className={`status-dot ${dirty ? "orange" : ""}`} />{saving ? "正在保存…" : dirty ? "草稿自动保留" : savedTime ? "已保存到项目" : "未保存到项目"}</span>
|
||
<div className="menu-wrap"><button className="button ghost" onClick={() => setMenu(menu === "import" ? null : "import")} aria-expanded={menu === "import"}><Icon name="upload" />导入<Icon name="chevron" size={14} /></button>{menu === "import" && <div className="dropdown"><button onClick={() => { asrImportRef.current?.click(); setMenu(null); }}><Icon name="file" />对话转写 CSV</button><button onClick={() => { eotImportRef.current?.click(); setMenu(null); }}><Icon name="file" />EOT 标注 CSV</button><button onClick={() => { audioImportRef.current?.click(); setMenu(null); }}><Icon name="headphones" />为当前通话关联录音</button></div>}</div>
|
||
<div className="menu-wrap"><button className="button ghost" onClick={() => setMenu(menu === "export" ? null : "export")} aria-expanded={menu === "export"}><Icon name="download" />导出</button>{menu === "export" && <div className="dropdown">{datasetScope !== ALL_DATASETS && <><button onClick={() => exportCsv("eot", "current")}><Icon name="file" />当前数据集 EOT 标注 CSV</button><button onClick={() => exportCsv("asr", "current")}><Icon name="file" />当前数据集对话转写 CSV</button><div className="dropdown-divider" /></>}<button onClick={() => exportCsv("eot", "all")}><Icon name="file" />全部 EOT 标注 CSV</button><button onClick={() => exportCsv("asr", "all")}><Icon name="file" />全部对话转写 CSV</button></div>}</div>
|
||
<button className="button primary" onClick={() => void saveWorkspace()} disabled={saving || loading}><Icon name="save" />{saving ? "保存中…" : "保存到项目"}</button>
|
||
</div></header>
|
||
|
||
<div className="workspace-grid"><aside className="sidebar"><div className="sidebar-heading"><span className="eyebrow">对话库</span><span className="count-badge">{scopedCalls.length}</span></div><label className="dataset-scope"><span>数据集</span><select aria-label="选择数据集" value={datasetScope} disabled={loading} onChange={event => changeDatasetScope(event.target.value)}>{datasetGroups.map(group => <option key={group} value={group}>{group}</option>)}<option value={ALL_DATASETS}>全部数据</option></select><small>导出可选当前数据集，项目保存保留全部</small></label><label className="search-box"><Icon name="search" size={16} /><input aria-label="搜索通话" value={search} onChange={event => setSearch(event.target.value)} placeholder="搜索名称或通话 ID" /></label><div className="sidebar-tabs"><button className={filter === "all" ? "active" : ""} onClick={() => setFilter("all")}>全部对话</button><button className={filter === "pending" ? "active" : ""} onClick={() => setFilter("pending")}>待处理</button></div>
|
||
<div className="call-list" ref={callListRef}>{loading ? <p className="muted loading-label">正在读取工作空间…</p> : visibleCalls.length ? visibleCalls.map(row => <button key={row.id} className={`call-item ${callId === row.id ? "selected" : ""}`} onClick={() => chooseCall(row.id)} title={row.id}><span className="call-icon"><Icon name={row.recording ? "headphones" : "file"} size={17} /></span><span className="call-item-copy"><strong>{row.name}</strong><small>{row.id === "demo" ? "标准示例 · 可自由编辑" : row.id.slice(0, 18) + (row.id.length > 18 ? "…" : "")}</small><span>{row.count} 个判断点{row.pending > 0 && <em> · {row.pending} 待处理</em>}</span></span>{callId === row.id && <span className="selected-dot" />}</button>) : <p className="muted loading-label">没有找到对话</p>}</div>
|
||
<div className="sidebar-bottom"><div><span>标注进度</span><strong>{completed}<span> / {scopedAnnotations.length}</span></strong></div><div className="progress-track"><span style={{ width: `${scopedAnnotations.length ? completed / scopedAnnotations.length * 100 : 0}%` }} /></div><p>每次判断，留出合适的接话空间。</p><button className="help-link" onClick={() => setHelpOpen(true)}><Icon name="help" size={16} />标注说明与快捷键</button></div>
|
||
</aside>
|
||
|
||
<main className="main-workspace"><div className="page-heading"><div><div className="breadcrumb">工作空间 <span>/</span> {callName}</div><h1>对话标注<span className="offline-badge">离线转写</span></h1><p title={callId}>{callId === "demo" ? "从一段对话开始，判断用户是否已经说完。" : callId}</p></div><div className="view-switch" aria-label="工作模式"><button className={mode === "edit" ? "active" : ""} onClick={() => setMode("edit")}><Icon name="edit" size={15} />标注</button><button className={mode === "view" ? "active" : ""} onClick={() => { setMode("view"); setTranscriptDraft(null); }}>查看</button></div></div>
|
||
<section className="audio-card panel"><div className="panel-heading"><div><h2><Icon name="headphones" />录音与时间轴</h2><p className="audio-filename" title={recording?.name}>{recording?.name || "示例尚未关联录音，可先查看转写与标注"}</p></div><button className="button small ghost" onClick={() => audioImportRef.current?.click()}><Icon name="upload" size={15} />{recording ? "更换录音" : "关联录音"}</button></div>
|
||
<div className="player"><div className="player-main"><button className="icon-button" aria-label="后退 3 秒" onClick={() => seek(currentMs - 3000)}><Icon name="back" /></button><button className="play-button" aria-label={playing ? "暂停录音" : "播放录音"} onClick={() => void togglePlay()} disabled={!recording}><Icon name={playing ? "pause" : "play"} size={19} /></button><button className="icon-button" aria-label="前进 3 秒" onClick={() => seek(currentMs + 3000)}><Icon name="forward" /></button><span className="time-display">{formatTime(currentMs)}<span> / {formatTime(durationMs)}</span></span></div><div className="player-secondary"><label className="speed-label">播放速度<select aria-label="播放速度" value={rate} onChange={event => setRate(Number(event.target.value))}>{[.75, 1, 1.25, 1.5, 2].map(value => <option key={value} value={value}>{value}×</option>)}</select></label>{mode === "edit" && <div className="menu-wrap"><button className="button small subtle" onClick={() => setMenu(menu === "create" ? null : "create")} disabled={loading} aria-expanded={menu === "create"} aria-haspopup="menu"><Icon name="plus" size={16} />在播放位置新增<Icon name="chevron" size={13} /></button>{menu === "create" && <div className="dropdown" role="menu" aria-label="新增项目"><button role="menuitem" onClick={addAnnotation}>EOT 判断点</button><button role="menuitem" onClick={() => addTranscriptAt("agent")}>机器人转写</button><button role="menuitem" onClick={() => addTranscriptAt("user")}>用户转写</button></div>}</div>}</div></div>
|
||
<Timeline callId={callId} recordingPath={recording?.url.startsWith("/api/audio?") ? recording.path : null} durationMs={durationMs} currentMs={currentMs} decisionMs={selected?.decision_ms ?? null} transcripts={callTranscripts.map(({ row, index }) => ({ ...row, index }))} annotations={callAnnotations} selectedId={selectedId} waveform={waveform} onSeek={seek} onMoveAnnotation={moveAnnotation} onSelectAnnotation={selectAnnotation} onSelectTranscript={index => {
|
||
const row = transcripts[index]; seek(row.start_ms);
|
||
audioRef.current?.pause(); setTranscriptDraft({ index, row: { ...row } });
|
||
}} onResizeTranscript={resizeTranscript} editingTranscriptIndex={transcriptDraft?.index ?? null} onAddAnnotation={addAnnotationAt} readOnly={mode === "view"} />
|
||
<div className="timeline-legend"><span><i className="legend-dot agent" />机器人</span><span><i className="legend-dot user" />用户</span><span><i className="legend-line" />播放位置</span><span><i className="legend-dot decision" />EOT 判断点</span><span className="timeline-tip">{mode === "edit" ? "拖动片段边界 · 点击块在右侧编辑" : "点击时间轴或判断点查看"}</span></div>
|
||
</section>
|
||
|
||
<div className="workspace-footer"><span><Icon name="check" size={14} />转写与标注使用同一录音时间轴</span><div className="history-actions"><button onClick={undo} disabled={!history.past.length || mode === "view" || loading} title="撤销上一步（Ctrl / ⌘ + Z）" aria-keyshortcuts="Control+Z Meta+Z"><Icon name="undo" size={14} />撤销上一步</button><button onClick={redo} disabled={!history.future.length || mode === "view" || loading} title="重做上一步（Ctrl + Y / ⌘ + Shift + Z）" aria-keyshortcuts="Control+Y Meta+Y Control+Shift+Z Meta+Shift+Z"><Icon name="redo" size={14} />重做上一步</button></div></div>
|
||
</main>
|
||
|
||
{transcriptDraft ? <TranscriptEditor draft={transcriptDraft} readOnly={mode === "view"}
|
||
onChange={row => setTranscriptDraft({ ...transcriptDraft, row })} onSave={saveTranscript} onClose={() => setTranscriptDraft(null)}
|
||
onDelete={() => { commit({ transcripts: transcripts.filter((_, index) => index !== transcriptDraft.index), annotations }); setTranscriptDraft(null); notify("已删除片段，可撤销", "info"); }}
|
||
/> : <aside className="annotation-sidebar"><div className="editor-heading"><div><span className="eyebrow">{mode === "view" ? "标注详情" : "当前标注"}</span><h2>这个位置，可以接话吗？</h2></div><span className="editor-number">{selected ? String(callAnnotations.findIndex(row => row.id === selected.id) + 1).padStart(2, "0") : "—"}</span></div>
|
||
{selected ? <div className="editor-body"><div className="decision-card"><span><i className="legend-dot decision" />判断时间</span><strong>{formatTime(selected.decision_ms)}</strong><div className="review-actions"><button disabled={!recording} onClick={() => void review(false)}><Icon name="back" size={14} />听判断前</button><button disabled={!recording} onClick={() => void review(true)}><Icon name="forward" size={14} />听后续</button></div></div>
|
||
<fieldset className="label-fieldset" disabled={mode === "view"}><legend>用户是否已完成当前表达？</legend>{([{ value: "1", title: "可以接话", detail: "当前表达已完成", icon: "check", number: "1", cls: "positive" }, { value: "0", title: "继续等待", detail: "现在接话会打断用户", icon: "clock", number: "2", cls: "negative" }, { value: "", title: "需要仲裁", detail: "证据不足，暂不确定", icon: "help", number: "3", cls: "pending" }] as const).map(choice => <button key={choice.number} className={`label-choice ${choice.cls} ${selected.can_reply_now === choice.value ? "active" : ""}`} aria-pressed={selected.can_reply_now === choice.value} onClick={() => setLabel(choice.value)}><span className="choice-symbol"><Icon name={choice.icon} size={18} /></span><span><strong>{choice.title}</strong><small>{choice.detail}</small></span><kbd>{choice.number}</kbd></button>)}</fieldset>
|
||
<label className="form-field"><span>判断时的用户文本 <small>截至当前橙色判断点</small></span><textarea aria-label="判断时的用户文本" value={selected.user_text_at_decision} placeholder="例如：我明天下午…" readOnly={mode === "view"} onChange={event => updateAnnotation(selected.id, { user_text_at_decision: event.target.value })} rows={3} /><small>只填写当时已说出的内容，可保留未完成的表达。</small></label>
|
||
<label className="form-field"><span>判断原因</span><select aria-label="判断原因" disabled={mode === "view"} value={selected.reason} onChange={event => updateAnnotation(selected.id, { reason: event.target.value })}><option value="">请选择原因</option>{reasonOptions.filter(row => row.can_reply_now === selected.can_reply_now).map(row => <option key={row.value} value={row.value}>{row.label}</option>)}</select></label>
|
||
<div className="form-two"><label className="form-field"><span>标注把握</span><select aria-label="标注把握" disabled={mode === "view"} value={selected.confidence} onChange={event => updateAnnotation(selected.id, { confidence: event.target.value as Annotation["confidence"] })}><option value="">未填写</option><option value="high">高</option><option value="medium">中</option><option value="low">低</option></select></label><label className="form-field"><span>标注员</span><input aria-label="标注员" readOnly={mode === "view"} placeholder="姓名或 ID" value={selected.annotator} onChange={event => updateAnnotation(selected.id, { annotator: event.target.value })} /></label></div>
|
||
{selectedError && <p className="field-error" role="alert">{selectedError}</p>}<div className="editor-bottom"><span><span className={`mini-dot ${labelClass(selected)}`} />{labelName(selected)}</span>{mode === "edit" && <button className="delete-button" onClick={() => { commit({ transcripts, annotations: annotations.filter(row => row.id !== selected.id) }); setSelectedId(callAnnotations.find(row => row.id !== selected.id)?.id || null); notify("已删除判断点，可撤销", "info"); }}><Icon name="trash" size={15} />删除</button>}</div>
|
||
</div> : <div className="empty-editor"><span className="empty-marker"><Icon name="plus" size={26} /></span><h3>创建第一个判断点</h3><p>在时间轴上定位，再新增标注，记录此刻是否适合接话。</p>{mode === "edit" && <button className="button primary" onClick={addAnnotation} disabled={loading}><Icon name="plus" />新增判断点</button>}</div>}
|
||
</aside>}</div>
|
||
<footer className="keyboard-footer"><span>EOT Studio <i />让每一次接话更自然</span><div><span><kbd>空格</kbd> 播放 / 暂停</span><span><kbd>1</kbd><kbd>2</kbd><kbd>3</kbd> 标签</span><span><kbd>[</kbd><kbd>]</kbd> 切换判断点</span><button onClick={() => setHelpOpen(true)} aria-label="查看快捷键"><Icon name="help" size={15} /></button></div></footer>
|
||
{notice && <div className={`toast ${notice.kind}`} role={notice.kind === "error" ? "alert" : "status"}><Icon name={notice.kind === "success" ? "check" : "help"} /><span>{notice.message}</span><button aria-label="关闭消息" onClick={() => setNotice(null)}><Icon name="close" size={15} /></button></div>}
|
||
{menu && <button className="menu-scrim" aria-label="关闭菜单" onClick={() => setMenu(null)} />}
|
||
{helpOpen && <div className="modal-backdrop" onClick={() => setHelpOpen(false)}><section className="modal help-modal" role="dialog" aria-modal="true" aria-labelledby="help-title" onClick={event => event.stopPropagation()}><div className="modal-heading"><h2 id="help-title">把判断留在正确的时刻</h2><button className="icon-button" aria-label="关闭说明" onClick={() => setHelpOpen(false)}><Icon name="close" /></button></div><p>橙色标记表示 EOT 判断时间，黑色细线表示播放位置。听判断之前的录音，再回答“机器人现在接话是否合适”。</p><ol><li><strong>可以接话：</strong>用户已完成当前表达，或已回答机器人问题。</li><li><strong>继续等待：</strong>用户只是停顿、犹豫或表达未完成。</li><li><strong>需要仲裁：</strong>录音或上下文不足，保留空标签。</li></ol><p>当前用户文本只写到橙色判断点。时间轴展示完整对话用于校对，后续转写不会自动写入当前文本。</p><div className="shortcut-grid"><span><kbd>空格</kbd>播放 / 暂停</span><span><kbd>A</kbd>新增判断点</span><span><kbd>←</kbd><kbd>→</kbd>播放位置前后 1 秒</span><span><kbd>1</kbd><kbd>2</kbd><kbd>3</kbd>选择标签</span><span><kbd>[</kbd><kbd>]</kbd>上 / 下一个判断点</span><span><kbd>⌘ / Ctrl + S</kbd>保存到项目</span><span><kbd>⌘ / Ctrl + Z</kbd>撤销上一步</span><span><kbd>Ctrl + Y</kbd>重做上一步</span></div><p className="muted">最近 40 步修改可撤销和重做；撤销后作新修改会清空重做记录。文本输入框内保留原生文字撤销。Mac 也支持 ⌘ + Shift + Z 重做。刷新页面会清空撤销记录。编辑会保留为浏览器草稿。“保存到项目”写入工作数据目录；“导出”下载标准 CSV。上传录音的关联在页面关闭后需重新建立。</p><button className="button primary" onClick={() => setHelpOpen(false)}>开始标注</button></section></div>}
|
||
</div>;
|
||
}
|