59 lines
1.9 KiB
TypeScript
59 lines
1.9 KiB
TypeScript
"use client";
|
||
import { useState } from "react";
|
||
import type { CanvasConflictChoice } from "@/lib/video-canvas/merge-snapshot";
|
||
export function VideoCanvasConflictNotice({
|
||
fields,
|
||
onResolve,
|
||
onDownload,
|
||
}: {
|
||
fields: string[];
|
||
onResolve: (choice: CanvasConflictChoice) => Promise<void> | undefined;
|
||
onDownload: () => void;
|
||
}) {
|
||
const [busy, setBusy] = useState(false);
|
||
if (!fields.length) return null;
|
||
const resolve = async (choice: CanvasConflictChoice) => {
|
||
setBusy(true);
|
||
try {
|
||
await onResolve(choice);
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
};
|
||
return (
|
||
<div
|
||
role="alert"
|
||
className="absolute left-1/2 top-20 z-[200] w-[min(680px,90vw)] -translate-x-1/2 rounded-xl border border-amber-400/40 bg-[#29251b] p-4 text-sm text-white shadow-xl"
|
||
>
|
||
<p className="font-semibold">其他页面修改了相同内容，当前草稿已保留</p>
|
||
<p className="mt-2 text-white/70">
|
||
共有 {fields.length} 处冲突。不同位置的修改会自动合并；以下选择仅处理冲突部分。
|
||
</p>
|
||
<ul className="my-2 max-h-32 overflow-auto text-xs text-white/60">
|
||
{fields.map((field, index) => (
|
||
<li key={`${field}-${index}`}>{field}</li>
|
||
))}
|
||
</ul>
|
||
<div className="flex flex-wrap gap-3">
|
||
<button
|
||
disabled={busy}
|
||
className="rounded bg-white/10 px-3 py-2 disabled:opacity-40"
|
||
onClick={() => void resolve("local")}
|
||
>
|
||
冲突处保留本页
|
||
</button>
|
||
<button
|
||
disabled={busy}
|
||
className="rounded bg-white/10 px-3 py-2 disabled:opacity-40"
|
||
onClick={() => void resolve("remote")}
|
||
>
|
||
冲突处采用服务器版
|
||
</button>
|
||
<button className="rounded bg-white/10 px-3 py-2" onClick={onDownload}>
|
||
下载当前草稿
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|