fix: change datastruct to array to improve data safety and make preview avaliable

Xionghaizi001 · Xionghaizi001 · commit dc57c4bdb88c · 2026-02-01T02:16:10.000+08:00
diff --git a/src/components/AMLLWrapper/index.tsx b/src/components/AMLLWrapper/index.tsx
@@ -26,6 +26,47 @@ import {
 import { isDarkThemeAtom, lyricLinesAtom } from "$/states/main.ts";
 import styles from "./index.module.css";
 
+const parseLineVocalIds = (value?: string | string[]) => {
+	if (!value) return [];
+	const parts = Array.isArray(value) ? value : value.split(/[\s,]+/);
+	return parts.map((v) => v.trim()).filter(Boolean);
+};
+
+const mapVocalTagsForPreview = (
+	vocal: string | string[] | undefined,
+	vocalTagMap: Map<string, string>,
+) => {
+	if (!vocal) return;
+	const fallbackParts = Array.isArray(vocal) ? vocal : [vocal];
+	const normalizedFallback = fallbackParts
+		.map((v) => v.trim())
+		.filter(Boolean);
+	if (vocalTagMap.size === 0) {
+		return normalizedFallback.length > 0 ? normalizedFallback : undefined;
+	}
+	const ids = parseLineVocalIds(vocal);
+	if (ids.length === 0) return;
+	let hasMatch = false;
+	const mapped = ids
+		.map((id) => {
+			const value = vocalTagMap.get(id);
+			if (value && value.trim().length > 0) {
+				hasMatch = true;
+				return value;
+			}
+			if (vocalTagMap.has(id)) {
+				hasMatch = true;
+			}
+			return id;
+		})
+		.map((v) => v.trim())
+		.filter(Boolean);
+	if (!hasMatch) {
+		return normalizedFallback.length > 0 ? normalizedFallback : undefined;
+	}
+	return mapped.length > 0 ? mapped : undefined;
+};
+
 export const AMLLWrapper = memo(() => {
 	const originalLyricLines = useAtomValue(lyricLinesAtom);
 	const currentTime = useAtomValue(currentTimeAtom);
@@ -38,11 +79,15 @@ export const AMLLWrapper = memo(() => {
 	const playerRef = useRef<LyricPlayerRef>(null);
 
 	const lyricLines = useMemo(() => {
+		const vocalTagMap = new Map(
+			(originalLyricLines.vocalTags ?? []).map((tag) => [tag.key, tag.value]),
+		);
 		return structuredClone(
 			originalLyricLines.lyricLines.map((line) => ({
 				...line,
 				translatedLyric: showTranslationLines ? line.translatedLyric : "",
 				romanLyric: showRomanLines ? line.romanLyric : "",
+				vocal: mapVocalTagsForPreview(line.vocal, vocalTagMap),
 			})),
 		);
 	}, [originalLyricLines, showTranslationLines, showRomanLines]);
@@ -80,3 +125,4 @@ export const AMLLWrapper = memo(() => {
 });
 
 export default AMLLWrapper;
+
diff --git a/src/modules/lyric-editor/components/lyric-line-view.tsx b/src/modules/lyric-editor/components/lyric-line-view.tsx
@@ -66,13 +66,11 @@ import { RomanWordView } from "./roman-word-view.tsx";
 
 const isDraggingAtom = atom(false);
 
-const parseLineVocalIds = (value?: string) =>
-	value
-		? value
-				.split(/[\s,]+/)
-				.map((v) => v.trim())
-				.filter(Boolean)
-		: [];
+const parseLineVocalIds = (value?: string | string[]) => {
+	if (!value) return [];
+	const parts = Array.isArray(value) ? value : value.split(/[\s,]+/);
+	return parts.map((v) => v.trim()).filter(Boolean);
+};
 
 // 定义一个派生 Atom，用于计算每一行的显示行号
 const lineDisplayNumbersAtom = atom((get) => {
@@ -696,7 +694,7 @@ export const LyricLineView: FC<{
 																		} else {
 																			currentIds.push(id);
 																		}
-																		targetLine.vocal = currentIds.join(",");
+																		targetLine.vocal = currentIds;
 																	});
 																}}
 															>
@@ -714,7 +712,7 @@ export const LyricLineView: FC<{
 																evt.stopPropagation();
 																editLyricLines((state) => {
 																	const targetLine = state.lyricLines[lineIndex];
-																	targetLine.vocal = allSelected ? "" : vocalTagIds.join(",");
+																	targetLine.vocal = allSelected ? [] : [...vocalTagIds];
 																});
 															}}
 														>
diff --git a/src/modules/project/logic/ttml-parser.ts b/src/modules/project/logic/ttml-parser.ts
@@ -87,6 +87,12 @@ export function parseLyric(ttmlText: string): TTMLLyric {
 	});
 
 	const itunesLineRomanizations = new Map<string, LineMetadata>();
+	const parseVocalValue = (value: string | string[] | null | undefined) => {
+		if (!value) return [];
+		const parts = Array.isArray(value) ? value : value.split(/[\s,]+/);
+		return parts.map((v) => v.trim()).filter(Boolean);
+	};
+
 	const itunesWordRomanizations = new Map<string, WordRomanMetadata>();
 
 	const romanizationTextElements = ttmlDoc.querySelectorAll(
@@ -269,7 +275,7 @@ export function parseLyric(ttmlText: string): TTMLLyric {
 		isBG = false,
 		isDuet = false,
 		parentItunesKey: string | null = null,
-		parentVocal: string | null = null,
+		parentVocal: string | string[] | null = null,
 	) {
 		const startTimeAttr = lineEl.getAttribute("begin");
 		const endTimeAttr = lineEl.getAttribute("end");
@@ -285,6 +291,7 @@ export function parseLyric(ttmlText: string): TTMLLyric {
 		const lineVocalAttr =
 			lineEl.getAttribute("amll:vocal") ?? lineEl.getAttribute("vocal");
 		const lineVocal = lineVocalAttr ?? (isBG ? parentVocal : null);
+		const parsedLineVocal = parseVocalValue(lineVocal);
 		const line: LyricLine = {
 			id: uid(),
 			words: [],
@@ -298,7 +305,7 @@ export function parseLyric(ttmlText: string): TTMLLyric {
 			startTime: parsedStartTime,
 			endTime: parsedEndTime,
 			ignoreSync: false,
-			vocal: lineVocal ?? "",
+			vocal: parsedLineVocal,
 		};
 		let haveBg = false;
 
@@ -353,7 +360,7 @@ export function parseLyric(ttmlText: string): TTMLLyric {
 							true,
 							line.isDuet,
 							itunesKey,
-							line.vocal ?? null,
+							line.vocal?.length ? line.vocal : null,
 						);
 						haveBg = true;
 					} else if (role === "x-translation") {
diff --git a/src/modules/project/logic/ttml-writer.ts b/src/modules/project/logic/ttml-writer.ts
@@ -61,10 +61,10 @@ export default function exportTTMLText(
 		return span;
 	}
 
-	function normalizeVocalValue(vocal?: string | null): string {
+	function normalizeVocalValue(vocal?: string | string[] | null): string {
 		if (!vocal) return "";
-		return vocal
-			.split(/[\s,]+/)
+		const parts = Array.isArray(vocal) ? vocal : vocal.split(/[\s,]+/);
+		return parts
 			.map((v) => v.trim())
 			.filter(Boolean)
 			.join(",");
diff --git a/src/modules/project/modals/VocalTagsEditor.tsx b/src/modules/project/modals/VocalTagsEditor.tsx
@@ -10,13 +10,11 @@ import type { LyricLine, TTMLLyric } from "$/types/ttml";
 import styles from "./VocalTagsEditor.module.css";
 
 const getLineText = (line: LyricLine) => line.words.map((word) => word.word).join("");
-const parseLineVocalIds = (value?: string) =>
-	value
-		? value
-				.split(/[\s,]+/)
-				.map((v) => v.trim())
-				.filter(Boolean)
-		: [];
+const parseLineVocalIds = (value?: string | string[]) => {
+	if (!value) return [];
+	const parts = Array.isArray(value) ? value : value.split(/[\s,]+/);
+	return parts.map((v) => v.trim()).filter(Boolean);
+};
 const getNextVocalId = (ids: string[]) => {
 	let maxId = 0;
 	for (const id of ids) {
@@ -41,7 +39,7 @@ const hasDuplicateTag = (
 const reassignVocalIds = (draft: TTMLLyric) => {
 	if (!draft.vocalTags || draft.vocalTags.length === 0) {
 		draft.lyricLines.forEach((line) => {
-			line.vocal = "";
+			line.vocal = [];
 		});
 		return;
 	}
@@ -56,7 +54,7 @@ const reassignVocalIds = (draft: TTMLLyric) => {
 		const mapped = ids
 			.map((id) => idMap.get(id))
 			.filter((value): value is string => !!value);
-		line.vocal = mapped.join(",");
+		line.vocal = mapped;
 	});
 };
 
@@ -123,7 +121,7 @@ export const VocalTagsEditor = () => {
 										onClick={() => {
 											setLyricLines((draft) => {
 												draft.lyricLines.forEach((line) => {
-													line.vocal = "";
+													line.vocal = [];
 												});
 											});
 									}}
@@ -137,7 +135,7 @@ export const VocalTagsEditor = () => {
 											setLyricLines((draft) => {
 												draft.vocalTags = [];
 												draft.lyricLines.forEach((line) => {
-													line.vocal = "";
+													line.vocal = [];
 												});
 											});
 									}}
diff --git a/src/types/ttml.ts b/src/types/ttml.ts
@@ -61,7 +61,7 @@ export interface LyricLine extends AMLLLyricLine {
 	// startTime: number;
 	// endTime: number;
 	ignoreSync: boolean;
-	vocal?: string;
+	vocal?: string | string[];
 }
 
 export const newLyricLine = (): LyricLine => ({
@@ -74,5 +74,5 @@ export const newLyricLine = (): LyricLine => ({
 	startTime: 0,
 	endTime: 0,
 	ignoreSync: false,
-	vocal: "",
+	vocal: [],
 });
