753 lines
30 KiB
TypeScript
753 lines
30 KiB
TypeScript
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||
import type React from "react";
|
||
import { Link, useParams, useNavigate } from "react-router";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Input } from "@/components/ui/input";
|
||
import {
|
||
getProject,
|
||
getStructure,
|
||
listLanguages,
|
||
type Project,
|
||
type ProjectStructure,
|
||
getLanguageTranslations,
|
||
upsertLanguageTranslations,
|
||
upsertStructure,
|
||
deleteEntryFromAllLanguages,
|
||
renameEntryInAllLanguages,
|
||
updateProject,
|
||
deleteProjectDeep,
|
||
} from "@/lib/db";
|
||
import { ArrowBigDownDash, ArrowBigUpDash, ArrowLeft, Brackets, CaseSensitive, Download, Filter, Languages, LocateFixed, MoreVertical, PencilLine, Reply, Save, Settings, Trash2 } from "lucide-react";
|
||
import { useTranslationInlineEdit } from "@/hooks/biz/use-translation-inline-edit";
|
||
import { flattenEntries, type FlatEntry, insertEntrySibling, removeEntryAtPath, renameEntryAtPath } from "@/lib/i18n-structure";
|
||
import { ImportLanguageModal } from "@/components/biz/import-language-modal";
|
||
import { ExportLanguageModal } from "@/components/biz/export-language-modal";
|
||
import { EntryNameModal } from "@/components/biz/entry-name-modal";
|
||
import { ProjectSettingsModal } from "@/components/biz/project-settings-modal";
|
||
import { AiTranslateModal } from "@/components/biz/ai-translate-modal";
|
||
import { TableVirtuoso, type TableVirtuosoHandle } from "react-virtuoso";
|
||
import {
|
||
DropdownMenu,
|
||
DropdownMenuTrigger,
|
||
DropdownMenuContent,
|
||
DropdownMenuItem,
|
||
DropdownMenuCheckboxItem,
|
||
DropdownMenuSeparator,
|
||
} from "@/components/ui/dropdown-menu";
|
||
import { useClipboard } from "@/hooks/use-clipboard";
|
||
import { toast } from "sonner";
|
||
import { Checkbox } from "@/components/ui/checkbox";
|
||
import { Textarea } from "@/components/ui/textarea";
|
||
import { clearAllConnections, useFileConnections, writeLanguageToConnectedFile } from "@/store/file-connection";
|
||
import { generateLanguageJson } from "@/lib/utils";
|
||
import { HeaderConnectionIndicator } from "@/components/biz/header-connection-indicator";
|
||
|
||
export default function Editor() {
|
||
const { id: projectId } = useParams();
|
||
const navigate = useNavigate();
|
||
const [project, setProject] = useState<Project | null>(null);
|
||
const [structure, setStructure] = useState<ProjectStructure | null>(null);
|
||
const [languages, setLanguages] = useState<string[]>([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [pageError, setPageError] = useState<string | null>(null);
|
||
const [importOpen, setImportOpen] = useState(false);
|
||
const [exportOpen, setExportOpen] = useState(false);
|
||
const [addModal, setAddModal] = useState<{ open: boolean; path: string; position: "above" | "below" } | null>(null);
|
||
const [renameModal, setRenameModal] = useState<{ open: boolean; path: string } | null>(null);
|
||
const virtuosoRef = useRef<TableVirtuosoHandle | null>(null);
|
||
const scrollerRootRef = useRef<HTMLElement | Window | null>(null);
|
||
const [query, setQuery] = useState("");
|
||
const [caseSensitive, setCaseSensitive] = useState(false);
|
||
const [fullMatch, setFullMatch] = useState(false);
|
||
const [aiModal, setAiModal] = useState<{ open: boolean; path: string } | null>(null);
|
||
const [aiBulkOpen, setAiBulkOpen] = useState(false);
|
||
const [settingsOpen, setSettingsOpen] = useState(false);
|
||
const [selected, setSelected] = useState<Set<string>>(new Set());
|
||
const [visibleLangs, setVisibleLangs] = useState<Set<string>>(new Set());
|
||
const [savingAll, setSavingAll] = useState(false);
|
||
|
||
const { copy } = useClipboard();
|
||
const connSnap = useFileConnections(projectId ?? "");
|
||
|
||
function highlightRow(index: number) {
|
||
const tryFindAndAnimate = (attempt = 0) => {
|
||
const root = scrollerRootRef.current as HTMLElement | null;
|
||
if (!root) return;
|
||
const row = root.querySelector(`tr[data-item-index="${index}"]`) as HTMLTableRowElement | null;
|
||
if (row) {
|
||
row.animate(
|
||
[
|
||
{ backgroundColor: "rgba(250, 204, 21, 0.6)" },
|
||
{ backgroundColor: "transparent" },
|
||
{ backgroundColor: "rgba(250, 204, 21, 0.6)" },
|
||
{ backgroundColor: "transparent" },
|
||
],
|
||
{ duration: 1200, easing: "ease-in-out" }
|
||
);
|
||
return;
|
||
}
|
||
if (attempt < 10) {
|
||
setTimeout(() => tryFindAndAnimate(attempt + 1), 50);
|
||
}
|
||
};
|
||
// 等一帧，确保滚动定位后的 DOM 稳定
|
||
requestAnimationFrame(() => tryFindAndAnimate(0));
|
||
}
|
||
|
||
function scrollToQuery(ev: React.FormEvent<HTMLFormElement>) {
|
||
ev.preventDefault();
|
||
ev.stopPropagation();
|
||
|
||
if (!query) return;
|
||
const idx = entries.findIndex((e) => {
|
||
const hay = caseSensitive ? e.path : e.path.toLowerCase();
|
||
const needle = caseSensitive ? query : query.toLowerCase();
|
||
return fullMatch ? hay === needle : hay.includes(needle);
|
||
});
|
||
if (idx >= 0) {
|
||
virtuosoRef.current?.scrollIntoView({ index: idx, align: "center", done: () => highlightRow(idx) });
|
||
}
|
||
}
|
||
|
||
async function refresh() {
|
||
if (!projectId) return;
|
||
setLoading(true);
|
||
setPageError(null);
|
||
try {
|
||
const p = await getProject(projectId);
|
||
if (!p) throw new Error("项目不存在");
|
||
setProject(p);
|
||
const s = await getStructure(projectId);
|
||
if (s) setStructure(s);
|
||
const langs = await listLanguages(projectId);
|
||
setLanguages(langs);
|
||
} catch (e) {
|
||
setPageError((e as Error)?.message ?? "加载失败");
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}
|
||
|
||
useEffect(() => {
|
||
void refresh();
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [projectId]);
|
||
|
||
const entries: FlatEntry[] = useMemo(() => {
|
||
if (!structure) return [];
|
||
return flattenEntries(structure.root);
|
||
}, [structure]);
|
||
|
||
const [valuesByLang, setValuesByLang] = useState<Record<string, Record<string, string>>>({});
|
||
const inline = useTranslationInlineEdit({
|
||
projectId,
|
||
valuesByLang,
|
||
setValuesByLang,
|
||
onError: (m) => setPageError(m),
|
||
});
|
||
|
||
// 同步可见语言集合
|
||
useEffect(() => {
|
||
setVisibleLangs(new Set(languages));
|
||
}, [languages]);
|
||
|
||
const displayedLanguages = useMemo(() => languages.filter((l) => visibleLangs.has(l)), [languages, visibleLangs]);
|
||
|
||
const tableWidth = useMemo(() => (displayedLanguages.length * 200) + 36 + 60 + 300, [displayedLanguages.length]);
|
||
|
||
const handleSaveAllConnected = useCallback(async () => {
|
||
if (!projectId || !structure) return;
|
||
const connectionEntries = Object.entries(connSnap.connections);
|
||
if (connectionEntries.length === 0) {
|
||
toast.info("没有已连接的语言");
|
||
return;
|
||
}
|
||
setSavingAll(true);
|
||
try {
|
||
const orderedPaths = flattenEntries(structure.root).map((e) => e.path);
|
||
const results = await Promise.allSettled(
|
||
connectionEntries.map(async ([lang]) => {
|
||
const jsonText = generateLanguageJson(valuesByLang, lang, orderedPaths);
|
||
const ok = await writeLanguageToConnectedFile(projectId, lang, jsonText);
|
||
if (!ok) throw new Error(lang);
|
||
return lang;
|
||
})
|
||
);
|
||
const failed: string[] = [];
|
||
let success = 0;
|
||
for (const r of results) {
|
||
if (r.status === "fulfilled") success += 1;
|
||
else failed.push((r.reason as Error)?.message || "未知语言");
|
||
}
|
||
if (failed.length === 0) {
|
||
toast.success(`全部保存成功（${success}）`);
|
||
} else if (success === 0) {
|
||
toast.error(`保存失败（${failed.length}）：${failed.join(", ")}`);
|
||
} else {
|
||
toast.warning(`部分成功（成功 ${success}，失败 ${failed.length}）：${failed.join(", ")}`);
|
||
}
|
||
} finally {
|
||
setSavingAll(false);
|
||
}
|
||
}, [projectId, structure, connSnap.connections, valuesByLang]);
|
||
|
||
function computeSuggestedLanguages(pathsInput: string[]): string[] {
|
||
if (languages.length === 0 || pathsInput.length === 0) return [];
|
||
|
||
const missing = new Set<string>();
|
||
|
||
for (const lang of languages) {
|
||
const langMap = valuesByLang[lang] || {};
|
||
let hasMissing = false;
|
||
|
||
for (const p of pathsInput) {
|
||
const val = langMap[p];
|
||
if (typeof val !== "string" || val.trim() === "") {
|
||
hasMissing = true;
|
||
break;
|
||
}
|
||
}
|
||
|
||
if (hasMissing) missing.add(lang);
|
||
}
|
||
|
||
const arr = Array.from(missing);
|
||
|
||
return arr.length > 0 ? arr : languages; // 如无缺失则默认全选
|
||
}
|
||
|
||
const getExistingByPath = useCallback((path: string) => {
|
||
const result: Record<string, string> = {};
|
||
for (const lang of languages) {
|
||
const text = valuesByLang[lang]?.[path];
|
||
if (typeof text === "string" && text.trim() !== "") {
|
||
result[lang] = text;
|
||
}
|
||
}
|
||
|
||
return result;
|
||
}, [languages, valuesByLang]);
|
||
|
||
const virtuosoComponents = useMemo(() => ({
|
||
Table: ({ style, ...props }: React.TableHTMLAttributes<HTMLTableElement>) => <table className="min-w-full text-sm table-fixed" {...props} style={{ ...style, width: tableWidth }} />,
|
||
TableHead: (props: React.HTMLAttributes<HTMLTableSectionElement>) => <thead className="bg-muted" {...props} />,
|
||
TableRow: (props: React.HTMLAttributes<HTMLTableRowElement>) => <tr className="border-t" {...props} />,
|
||
TableBody: (props: React.HTMLAttributes<HTMLTableSectionElement>) => <tbody {...props} />,
|
||
TableFoot: (props: React.HTMLAttributes<HTMLTableSectionElement>) => <tfoot {...props} />,
|
||
}), [tableWidth]);
|
||
|
||
const allSelected = useMemo(() => entries.length > 0 && selected.size === entries.length, [entries, selected]);
|
||
const MAX_AI_ITEMS = 50;
|
||
|
||
const headerContent = useCallback(() => (
|
||
<tr>
|
||
<th style={{ width: 36 }} className="sticky left-0 text-left px-3 py-2 bg-muted">
|
||
<Checkbox
|
||
checked={allSelected}
|
||
onCheckedChange={(checked) => {
|
||
const next = new Set<string>();
|
||
if (checked) {
|
||
for (const en of entries) next.add(en.path);
|
||
}
|
||
setSelected(next);
|
||
}}
|
||
/>
|
||
</th>
|
||
<th style={{ width: 300 }} className="text-left px-3 py-2">翻译条目名称</th>
|
||
{displayedLanguages.map((lang) => (
|
||
<th key={lang} style={{ width: 200 }} className="text-left px-3 py-2">{lang}</th>
|
||
))}
|
||
<th style={{ width: 60 }} className="sticky right-0 text-left px-3 py-2 bg-muted">操作</th>
|
||
</tr>
|
||
), [displayedLanguages, allSelected, entries]);
|
||
|
||
const renderItemContent = useCallback((_idx: number, entry: FlatEntry) => {
|
||
const handleCopy = () => {
|
||
copy(entry.path);
|
||
toast.success("复制成功");
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<td className="sticky left-0 px-3 py-2 bg-white">
|
||
<Checkbox
|
||
checked={selected.has(entry.path)}
|
||
onCheckedChange={(checked) => {
|
||
setSelected((prev) => {
|
||
const next = new Set(prev);
|
||
if (checked) next.add(entry.path); else next.delete(entry.path);
|
||
return next;
|
||
});
|
||
}}
|
||
/>
|
||
</td>
|
||
<td className="px-3 py-2 font-mono wrap-break-word">
|
||
<button type="button" className="w-full text-left min-h-8 leading-normal px-2 rounded hover:bg-accent" onClick={handleCopy} title="点击复制">
|
||
{entry.path}
|
||
</button>
|
||
</td>
|
||
{displayedLanguages.map((lang) => {
|
||
const isEditing = inline.isEditingCell(entry.path, lang);
|
||
const isSaving = inline.isSavingCell(entry.path, lang);
|
||
const displayValue = inline.getDisplayValue(entry.path, lang);
|
||
|
||
return (
|
||
<td key={`${entry.path}:${lang}`} className="px-3 py-2 text-foreground/90 align-top">
|
||
{isEditing ? (
|
||
<Textarea
|
||
ref={inline.inputRef}
|
||
value={inline.editingValue}
|
||
onChange={(e) => inline.setEditingValue(e.target.value)}
|
||
onBlur={inline.saveEdit}
|
||
onKeyDown={inline.handleKeyDown}
|
||
disabled={isSaving}
|
||
className="leading-normal px-2 py-0"
|
||
/>
|
||
) : (
|
||
<button
|
||
type="button"
|
||
className="w-full text-left min-h-8 leading-normal px-2 rounded hover:bg-accent"
|
||
onClick={() => inline.startEdit(entry.path, lang)}
|
||
title="点击编辑"
|
||
>
|
||
{displayValue || <span className="text-destructive">点击编辑</span>}
|
||
</button>
|
||
)}
|
||
</td>
|
||
);
|
||
})}
|
||
<td className="sticky right-0 px-3 py-2 align-top bg-white">
|
||
<DropdownMenu>
|
||
<DropdownMenuTrigger asChild>
|
||
<Button size="sm" variant="outline">
|
||
<MoreVertical />
|
||
</Button>
|
||
</DropdownMenuTrigger>
|
||
<DropdownMenuContent align="end" className="w-44">
|
||
<DropdownMenuItem onClick={() => setAddModal({ open: true, path: entry.path, position: "below" })}>
|
||
<ArrowBigDownDash />
|
||
在下面新增
|
||
</DropdownMenuItem>
|
||
<DropdownMenuItem onClick={() => setAddModal({ open: true, path: entry.path, position: "above" })}>
|
||
<ArrowBigUpDash />
|
||
在上面新增
|
||
</DropdownMenuItem>
|
||
<DropdownMenuSeparator />
|
||
<DropdownMenuItem onClick={() => setAiModal({ open: true, path: entry.path })}>
|
||
<Languages />
|
||
AI 翻译
|
||
</DropdownMenuItem>
|
||
<DropdownMenuSeparator />
|
||
<DropdownMenuItem onClick={() => setRenameModal({ open: true, path: entry.path })}>
|
||
<PencilLine />
|
||
重命名
|
||
</DropdownMenuItem>
|
||
<DropdownMenuItem
|
||
variant="destructive"
|
||
onClick={async () => {
|
||
if (!projectId || !structure) return;
|
||
if (!confirm("确认删除该条目？此操作会移除所有语言下的该键")) return;
|
||
try {
|
||
const nextRoot = removeEntryAtPath(structure.root, entry.path);
|
||
await upsertStructure({ projectId, root: nextRoot });
|
||
await deleteEntryFromAllLanguages(projectId, entry.path);
|
||
setStructure({ projectId, root: nextRoot });
|
||
setValuesByLang((old) => {
|
||
const copy: typeof old = {};
|
||
for (const [langKey, vals] of Object.entries(old)) {
|
||
const rest = { ...vals } as Record<string, string>;
|
||
delete rest[entry.path];
|
||
copy[langKey] = rest;
|
||
}
|
||
return copy;
|
||
});
|
||
} catch (e) {
|
||
setPageError((e as Error)?.message ?? "删除失败");
|
||
}
|
||
}}
|
||
>
|
||
<Trash2 />
|
||
删除
|
||
</DropdownMenuItem>
|
||
</DropdownMenuContent>
|
||
</DropdownMenu>
|
||
</td>
|
||
</>
|
||
);
|
||
}, [displayedLanguages, inline, projectId, structure, setStructure, setValuesByLang, copy, selected]);
|
||
|
||
useEffect(() => {
|
||
if (!projectId || languages.length === 0) return;
|
||
let cancelled = false;
|
||
(async () => {
|
||
const all: Record<string, Record<string, string>> = {};
|
||
for (const lang of languages) {
|
||
const rec = await getLanguageTranslations(projectId, lang);
|
||
all[lang] = rec?.values ?? {};
|
||
}
|
||
if (!cancelled) setValuesByLang(all);
|
||
})();
|
||
return () => {
|
||
cancelled = true;
|
||
};
|
||
}, [projectId, languages]);
|
||
|
||
useEffect(() => {
|
||
return () => {
|
||
if (projectId) {
|
||
clearAllConnections(projectId);
|
||
}
|
||
};
|
||
}, [projectId]);
|
||
|
||
return (
|
||
<div className="h-screen flex flex-col">
|
||
<header className="h-14 px-2 md:px-4 from-blue-400 to-cyan-400 bg-linear-to-r text-white">
|
||
<div className="grid grid-cols-3 h-full items-center">
|
||
<div className="flex items-center gap-2">
|
||
<Button asChild size="icon" variant="ghost" aria-label="返回">
|
||
<Link to="/">
|
||
<ArrowLeft className="size-5" />
|
||
</Link>
|
||
</Button>
|
||
</div>
|
||
<div className="text-center font-medium truncate">
|
||
{project?.name ?? "编辑器"}
|
||
</div>
|
||
<div className="flex items-center justify-end gap-2 text-foreground">
|
||
<HeaderConnectionIndicator projectId={projectId ?? ""} />
|
||
{!structure ? (
|
||
<Button onClick={() => { setImportOpen(true); }}>构建翻译结构</Button>
|
||
) : (
|
||
<Button variant="outline" onClick={() => { setImportOpen(true); }}>
|
||
<Reply />
|
||
导入
|
||
</Button>
|
||
)}
|
||
{languages.length > 0 && (
|
||
<Button variant="outline" onClick={() => setExportOpen(true)}>
|
||
<Download />
|
||
导出
|
||
</Button>
|
||
)}
|
||
{projectId && (
|
||
<Button
|
||
variant="outline"
|
||
onClick={handleSaveAllConnected}
|
||
disabled={savingAll || !structure || Object.keys(connSnap.connections).length === 0}
|
||
title={Object.keys(connSnap.connections).length === 0 ? "暂无已连接的语言" : "将所有已连接语言写入各自文件"}
|
||
>
|
||
<Save />
|
||
{savingAll ? "保存中..." : "一键保存"}
|
||
</Button>
|
||
)}
|
||
{project && (
|
||
<Button variant="outline" onClick={() => setSettingsOpen(true)}>
|
||
<Settings />
|
||
设置
|
||
</Button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main className="flex-1 overflow-auto p-4 md:p-6">
|
||
{pageError && (
|
||
<div className="mb-4 text-sm text-red-600" role="alert">{pageError}</div>
|
||
)}
|
||
|
||
{loading ? (
|
||
<div className="text-sm text-muted-foreground">加载中...</div>
|
||
) : !structure ? (
|
||
<div className="rounded-md border border-dashed p-6">
|
||
<div className="text-sm text-muted-foreground">
|
||
该项目还没有翻译结构。请导入一份 JSON 文件来构建结构，并同时录入该语言的翻译内容。
|
||
</div>
|
||
<div className="mt-3">
|
||
<Button onClick={() => { setImportOpen(true); }}>构建翻译结构</Button>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="h-full flex flex-col">
|
||
<form className="mb-3 flex items-center gap-2" onSubmit={scrollToQuery}>
|
||
<Input placeholder="搜索翻译条目名称" value={query} onChange={(e) => setQuery(e.target.value)} />
|
||
<Button
|
||
variant={fullMatch ? "default" : "outline"}
|
||
onClick={() => setFullMatch((v) => !v)}
|
||
title="切换全量匹配/模糊匹配"
|
||
>
|
||
<Brackets />
|
||
{fullMatch ? "全量匹配" : "模糊匹配"}
|
||
</Button>
|
||
<Button
|
||
variant={caseSensitive ? "default" : "outline"}
|
||
onClick={() => setCaseSensitive((v) => !v)}
|
||
title="切换大小写敏感"
|
||
>
|
||
<CaseSensitive />
|
||
{caseSensitive ? "区分大小写" : "忽略大小写"}
|
||
</Button>
|
||
<Button type="submit">
|
||
<LocateFixed />
|
||
定位
|
||
</Button>
|
||
</form>
|
||
<div className="mb-2 flex items-center gap-2">
|
||
<DropdownMenu>
|
||
<DropdownMenuTrigger asChild>
|
||
<Button variant="outline" title="过滤显示的语言列">
|
||
<Filter />
|
||
语言过滤
|
||
</Button>
|
||
</DropdownMenuTrigger>
|
||
<DropdownMenuContent align="start" className="w-48">
|
||
<DropdownMenuItem onClick={() => setVisibleLangs(new Set(languages))}>
|
||
全部显示
|
||
</DropdownMenuItem>
|
||
<DropdownMenuSeparator />
|
||
{languages.map((lang) => {
|
||
const checked = visibleLangs.has(lang);
|
||
return (
|
||
<DropdownMenuCheckboxItem
|
||
key={lang}
|
||
onSelect={(e) => e.preventDefault()}
|
||
checked={checked}
|
||
onCheckedChange={(v) => {
|
||
setVisibleLangs((prev) => {
|
||
const next = new Set(prev);
|
||
if (v) next.add(lang); else next.delete(lang);
|
||
return next;
|
||
});
|
||
}}
|
||
>
|
||
{lang}
|
||
</DropdownMenuCheckboxItem>
|
||
);
|
||
})}
|
||
</DropdownMenuContent>
|
||
</DropdownMenu>
|
||
<Button
|
||
variant="outline"
|
||
disabled={selected.size === 0 || selected.size > MAX_AI_ITEMS}
|
||
onClick={() => setAiBulkOpen(true)}
|
||
title={selected.size > MAX_AI_ITEMS ? `最多支持 ${MAX_AI_ITEMS} 条` : "对所选条目进行 AI 翻译"}
|
||
>
|
||
<Languages />
|
||
AI 翻译所选（{selected.size}）
|
||
</Button>
|
||
{selected.size > MAX_AI_ITEMS && (
|
||
<span className="text-xs text-red-600">最多支持 {MAX_AI_ITEMS} 条</span>
|
||
)}
|
||
<Button
|
||
variant="outline-destructive"
|
||
disabled={selected.size === 0}
|
||
onClick={async () => {
|
||
if (!projectId || !structure) return;
|
||
if (selected.size === 0) return;
|
||
if (!confirm(`确认删除所选 ${selected.size} 个条目？此操作会移除所有语言下的这些键`)) return;
|
||
try {
|
||
let nextRoot = structure.root;
|
||
for (const p of selected) {
|
||
nextRoot = removeEntryAtPath(nextRoot, p);
|
||
}
|
||
await upsertStructure({ projectId, root: nextRoot });
|
||
// 从所有语言删除这些键
|
||
await Promise.all(Array.from(selected).map((p) => deleteEntryFromAllLanguages(projectId, p)));
|
||
setStructure({ projectId, root: nextRoot });
|
||
setValuesByLang((old) => {
|
||
const copy: typeof old = {};
|
||
for (const [langKey, vals] of Object.entries(old)) {
|
||
const next = { ...vals } as Record<string, string>;
|
||
for (const p of selected) delete next[p];
|
||
copy[langKey] = next;
|
||
}
|
||
return copy;
|
||
});
|
||
setSelected(new Set());
|
||
} catch (e) {
|
||
setPageError((e as Error)?.message ?? "批量删除失败");
|
||
}
|
||
}}
|
||
title="删除所选条目"
|
||
>
|
||
<Trash2 />
|
||
删除所选
|
||
</Button>
|
||
</div>
|
||
<div className="flex-1 border rounded-md">
|
||
<TableVirtuoso
|
||
ref={virtuosoRef}
|
||
data={entries}
|
||
fixedHeaderContent={headerContent}
|
||
itemContent={renderItemContent}
|
||
components={virtuosoComponents}
|
||
computeItemKey={(_index, entry) => entry.path}
|
||
scrollerRef={(el) => { scrollerRootRef.current = el; }}
|
||
/>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</main>
|
||
|
||
<ImportLanguageModal
|
||
open={importOpen}
|
||
onOpenChange={setImportOpen}
|
||
projectId={projectId ?? ""}
|
||
hasStructure={!!structure}
|
||
onImported={refresh}
|
||
languages={languages}
|
||
/>
|
||
<ExportLanguageModal
|
||
open={exportOpen}
|
||
onOpenChange={setExportOpen}
|
||
projectId={projectId ?? ""}
|
||
languages={languages}
|
||
valuesByLang={valuesByLang}
|
||
orderedPaths={entries.map((e) => e.path)}
|
||
/>
|
||
|
||
<ProjectSettingsModal
|
||
open={settingsOpen}
|
||
onOpenChange={setSettingsOpen}
|
||
project={project}
|
||
onSave={async (update) => {
|
||
if (!projectId) return;
|
||
const next = await updateProject({ id: projectId, name: update.name, preferences: update.preferences });
|
||
setProject(next);
|
||
}}
|
||
onDelete={async () => {
|
||
if (!projectId) return;
|
||
await deleteProjectDeep(projectId);
|
||
navigate("/");
|
||
}}
|
||
/>
|
||
|
||
<AiTranslateModal
|
||
open={!!aiModal?.open}
|
||
onOpenChange={(v) => setAiModal((cur) => (cur ? { ...cur, open: v } : cur))}
|
||
languages={languages}
|
||
paths={aiModal?.path ? [aiModal.path] : []}
|
||
initialSelectedLanguages={aiModal?.path ? computeSuggestedLanguages([aiModal.path]) : []}
|
||
getExistingByPath={getExistingByPath}
|
||
prompt={project?.preferences?.aiPrompt}
|
||
model={project?.preferences?.aiModel}
|
||
onConfirm={async (translations, options) => {
|
||
if (!projectId || !aiModal) return;
|
||
const updates: Record<string, Record<string, string>> = {};
|
||
try {
|
||
const targetLangs = options?.selectedLanguages ?? languages;
|
||
await Promise.all(
|
||
targetLangs.map(async (lang) => {
|
||
const prev = valuesByLang[lang] ?? {};
|
||
const next = { ...prev } as Record<string, string>;
|
||
const langMap = translations[lang] || {};
|
||
for (const [k, v] of Object.entries(langMap)) {
|
||
const existing = prev[k];
|
||
const isFilled = typeof existing === "string" && existing.trim() !== "";
|
||
if (!options?.overwrite && isFilled) continue; // 仅填充缺失
|
||
next[k] = v as string;
|
||
}
|
||
updates[lang] = next;
|
||
await upsertLanguageTranslations(projectId, lang, next);
|
||
})
|
||
);
|
||
setValuesByLang((old) => ({ ...old, ...updates }));
|
||
} catch (e) {
|
||
const msg = (e as Error)?.message ?? "保存翻译失败";
|
||
setPageError(msg);
|
||
throw e;
|
||
}
|
||
}}
|
||
/>
|
||
|
||
<AiTranslateModal
|
||
open={aiBulkOpen}
|
||
onOpenChange={setAiBulkOpen}
|
||
languages={languages}
|
||
paths={Array.from(selected)}
|
||
initialSelectedLanguages={computeSuggestedLanguages(Array.from(selected))}
|
||
getExistingByPath={getExistingByPath}
|
||
prompt={project?.preferences?.aiPrompt}
|
||
model={project?.preferences?.aiModel}
|
||
onConfirm={async (translations, options) => {
|
||
if (!projectId || selected.size === 0) return;
|
||
try {
|
||
const updatesByLang: Record<string, Record<string, string>> = {};
|
||
const targetLangs = options?.selectedLanguages ?? languages;
|
||
await Promise.all(
|
||
targetLangs.map(async (lang) => {
|
||
const prev = valuesByLang[lang] ?? {};
|
||
const next = { ...prev } as Record<string, string>;
|
||
const langMap = translations[lang] || {};
|
||
for (const [k, v] of Object.entries(langMap)) {
|
||
const existing = prev[k];
|
||
const isFilled = typeof existing === "string" && existing.trim() !== "";
|
||
if (!options?.overwrite && isFilled) continue; // 仅填充缺失
|
||
next[k] = v as string;
|
||
}
|
||
updatesByLang[lang] = next;
|
||
await upsertLanguageTranslations(projectId, lang, next);
|
||
})
|
||
);
|
||
setValuesByLang((old) => ({ ...old, ...updatesByLang }));
|
||
} catch (e) {
|
||
setPageError((e as Error)?.message ?? "批量 AI 翻译保存失败");
|
||
throw e;
|
||
}
|
||
}}
|
||
/>
|
||
|
||
<EntryNameModal
|
||
open={!!addModal?.open}
|
||
onOpenChange={(v) => setAddModal((cur) => (cur ? { ...cur, open: v } : cur))}
|
||
title={addModal?.position === "above" ? "在上方新增条目" : "在下方新增条目"}
|
||
placeholder="请输入条目名称（不含点）"
|
||
onConfirm={async (name) => {
|
||
if (!projectId || !structure || !addModal) return;
|
||
const nextRoot = insertEntrySibling(structure.root, addModal.path, addModal.position, name);
|
||
console.log("nextRoot", addModal, nextRoot);
|
||
|
||
await upsertStructure({ projectId, root: nextRoot });
|
||
setStructure({ projectId, root: nextRoot });
|
||
}}
|
||
validate={(name) => {
|
||
// 同级重名校验在结构函数中也会做，这里做基础提示即可
|
||
if (name.includes('.')) return "名称不能包含 '.'";
|
||
return null;
|
||
}}
|
||
/>
|
||
|
||
<EntryNameModal
|
||
open={!!renameModal?.open}
|
||
onOpenChange={(v) => setRenameModal((cur) => (cur ? { ...cur, open: v } : cur))}
|
||
title="重命名条目"
|
||
placeholder="请输入新名称（不含点）"
|
||
defaultValue={renameModal?.path ? renameModal.path.split('.').pop() : ''}
|
||
onConfirm={async (newName) => {
|
||
if (!projectId || !structure || !renameModal) return;
|
||
const { root: nextRoot, newPath } = renameEntryAtPath(structure.root, renameModal.path, newName);
|
||
await upsertStructure({ projectId, root: nextRoot });
|
||
await renameEntryInAllLanguages(projectId, renameModal.path, newPath);
|
||
setStructure({ projectId, root: nextRoot });
|
||
setValuesByLang((old) => {
|
||
const copy: typeof old = {};
|
||
for (const [langKey, vals] of Object.entries(old)) {
|
||
if (Object.prototype.hasOwnProperty.call(vals, renameModal.path)) {
|
||
const { [renameModal.path]: val, ...rest } = vals;
|
||
copy[langKey] = { ...rest, [newPath]: val };
|
||
} else {
|
||
copy[langKey] = vals;
|
||
}
|
||
}
|
||
return copy;
|
||
});
|
||
}}
|
||
validate={(name) => {
|
||
if (name.includes('.')) return "名称不能包含 '.'";
|
||
return null;
|
||
}}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|