389 lines
15 KiB
TypeScript
389 lines
15 KiB
TypeScript
import { Button } from "@/components/ui/button";
|
||
import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
|
||
import { Input } from "@/components/ui/input";
|
||
import { Checkbox } from "@/components/ui/checkbox";
|
||
import { Textarea } from "@/components/ui/textarea";
|
||
import { ArrowBigDownDash, ArrowBigUpDash, Brackets, CaseSensitive, Filter, Languages, LocateFixed, MoreVertical, PencilLine, Trash2 } from "lucide-react";
|
||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||
import type React from "react";
|
||
import { TableVirtuoso, type TableVirtuosoHandle } from "react-virtuoso";
|
||
import { toast } from "sonner";
|
||
import { useClipboard } from "@/hooks/use-clipboard";
|
||
import { useTableOptionState } from "./use-table-option-state";
|
||
import type { FlatEntry } from "@/lib/i18n-structure";
|
||
import type { TranslationInlineEditHandlers } from "@/hooks/biz/use-translation-inline-edit";
|
||
|
||
interface EditorTableProps {
|
||
entries: FlatEntry[];
|
||
languages: string[];
|
||
selected: Set<string>;
|
||
setSelected: React.Dispatch<React.SetStateAction<Set<string>>>;
|
||
inlineEdit: TranslationInlineEditHandlers;
|
||
onOpenAddEntry: (path: string, position: "above" | "below") => void;
|
||
onOpenAiTranslate: (path: string) => void;
|
||
onOpenBulkAiTranslate: () => void;
|
||
onOpenRenameEntry: (path: string) => void;
|
||
onMoveEntry: (path: string, offset: number) => Promise<void> | void;
|
||
onDeleteEntry: (path: string) => Promise<void> | void;
|
||
onDeleteSelected: (paths: string[]) => Promise<void> | void;
|
||
maxAiItems?: number;
|
||
}
|
||
|
||
export default function EditorTable({
|
||
entries,
|
||
languages,
|
||
selected,
|
||
setSelected,
|
||
inlineEdit,
|
||
onOpenAddEntry,
|
||
onOpenAiTranslate,
|
||
onOpenBulkAiTranslate,
|
||
onOpenRenameEntry,
|
||
onMoveEntry,
|
||
onDeleteEntry,
|
||
onDeleteSelected,
|
||
maxAiItems = 50,
|
||
}: EditorTableProps) {
|
||
const { copy } = useClipboard();
|
||
|
||
const [visibleLangs, setVisibleLangs] = useState<Set<string>>(new Set());
|
||
|
||
useEffect(() => {
|
||
setVisibleLangs(new Set(languages));
|
||
}, [languages]);
|
||
|
||
const virtuosoRef = useRef<TableVirtuosoHandle | null>(null);
|
||
const scrollerRootRef = useRef<HTMLElement | Window | null>(null);
|
||
|
||
const {
|
||
query, setQuery,
|
||
caseSensitive, setCaseSensitive,
|
||
fullMatch, setFullMatch,
|
||
} = useTableOptionState();
|
||
|
||
const [moveCountUp, setMoveCountUp] = useState(1);
|
||
const [moveCountDown, setMoveCountDown] = useState(1);
|
||
|
||
const allSelected = useMemo(() => entries.length > 0 && selected.size === entries.length, [entries, selected]);
|
||
const MAX_AI_ITEMS = maxAiItems;
|
||
|
||
const highlightRow = useCallback((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);
|
||
}
|
||
};
|
||
requestAnimationFrame(() => tryFindAndAnimate(0));
|
||
}, []);
|
||
|
||
const scrollToQuery = useCallback((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) });
|
||
}
|
||
}, [caseSensitive, entries, fullMatch, highlightRow, query]);
|
||
|
||
const displayedLanguages = useMemo(() => languages.filter((l) => visibleLangs.has(l)), [languages, visibleLangs]);
|
||
const tableWidth = useMemo(() => (displayedLanguages.length * 200) + 36 + 60 + 300, [displayedLanguages.length]);
|
||
|
||
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 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>
|
||
), [allSelected, displayedLanguages, entries, setSelected]);
|
||
|
||
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 = inlineEdit.isEditingCell(entry.path, lang);
|
||
const isSaving = inlineEdit.isSavingCell(entry.path, lang);
|
||
const displayValue = inlineEdit.getDisplayValue(entry.path, lang);
|
||
|
||
return (
|
||
<td key={`${entry.path}:${lang}`} className="px-3 py-2 text-foreground/90 align-top">
|
||
{isEditing ? (
|
||
<Textarea
|
||
ref={inlineEdit.inputRef}
|
||
value={inlineEdit.editingValue}
|
||
onChange={(e) => inlineEdit.setEditingValue(e.target.value)}
|
||
onBlur={() => { void inlineEdit.saveEdit(); }}
|
||
onKeyDown={inlineEdit.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={() => inlineEdit.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 modal={false}>
|
||
<DropdownMenuTrigger asChild>
|
||
<Button size="sm" variant="outline">
|
||
<MoreVertical />
|
||
</Button>
|
||
</DropdownMenuTrigger>
|
||
<DropdownMenuContent align="end" className="w-64">
|
||
<DropdownMenuItem onClick={() => onOpenAddEntry(entry.path, "below")}>
|
||
<ArrowBigDownDash />
|
||
在下面新增
|
||
</DropdownMenuItem>
|
||
<DropdownMenuItem onClick={() => onOpenAddEntry(entry.path, "above")}>
|
||
<ArrowBigUpDash />
|
||
在上面新增
|
||
</DropdownMenuItem>
|
||
<DropdownMenuSeparator />
|
||
<DropdownMenuItem onClick={() => onOpenAiTranslate(entry.path)}>
|
||
<Languages />
|
||
AI 翻译
|
||
</DropdownMenuItem>
|
||
<DropdownMenuSeparator />
|
||
<DropdownMenuItem onClick={() => onOpenRenameEntry(entry.path)}>
|
||
<PencilLine />
|
||
重命名
|
||
</DropdownMenuItem>
|
||
<DropdownMenuSeparator />
|
||
<DropdownMenuItem
|
||
onSelect={async () => {
|
||
await onMoveEntry(entry.path, -moveCountUp);
|
||
}}
|
||
>
|
||
<ArrowBigUpDash />
|
||
<span className="whitespace-nowrap">向上移动</span>
|
||
<Input
|
||
type="number"
|
||
min={1}
|
||
value={moveCountUp}
|
||
onChange={(e) => {
|
||
const n = parseInt(e.target.value, 10);
|
||
setMoveCountUp(Number.isFinite(n) && n > 0 ? n : 1);
|
||
}}
|
||
className="h-7 w-16"
|
||
onClick={(e) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
}}
|
||
/>
|
||
个条目
|
||
</DropdownMenuItem>
|
||
<DropdownMenuItem
|
||
onSelect={async () => {
|
||
await onMoveEntry(entry.path, moveCountDown);
|
||
}}
|
||
>
|
||
<ArrowBigDownDash />
|
||
<span className="whitespace-nowrap">向下移动</span>
|
||
<Input
|
||
type="number"
|
||
min={1}
|
||
value={moveCountDown}
|
||
onChange={(e) => {
|
||
const n = parseInt(e.target.value, 10);
|
||
setMoveCountDown(Number.isFinite(n) && n > 0 ? n : 1);
|
||
}}
|
||
className="h-7 w-16"
|
||
onClick={(e) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
}}
|
||
/>
|
||
个条目
|
||
</DropdownMenuItem>
|
||
<DropdownMenuSeparator />
|
||
<DropdownMenuItem
|
||
variant="destructive"
|
||
onClick={async () => {
|
||
if (!confirm("确认删除该条目？此操作会移除所有语言下的该键")) return;
|
||
await onDeleteEntry(entry.path);
|
||
}}
|
||
>
|
||
<Trash2 />
|
||
删除
|
||
</DropdownMenuItem>
|
||
</DropdownMenuContent>
|
||
</DropdownMenu>
|
||
</td>
|
||
</>
|
||
);
|
||
}, [copy, displayedLanguages, inlineEdit, moveCountDown, moveCountUp, onDeleteEntry, onMoveEntry, onOpenAddEntry, onOpenAiTranslate, onOpenRenameEntry, selected, setSelected]);
|
||
|
||
|
||
return (
|
||
<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
|
||
type="button"
|
||
variant={fullMatch ? "default" : "outline"}
|
||
onClick={() => setFullMatch((v) => !v)}
|
||
title="切换全量匹配/模糊匹配"
|
||
>
|
||
<Brackets />
|
||
{fullMatch ? "全量匹配" : "模糊匹配"}
|
||
</Button>
|
||
<Button
|
||
type="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={onOpenBulkAiTranslate}
|
||
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 (!confirm(`确认删除所选 ${selected.size} 个条目？此操作会移除所有语言下的这些键`)) return;
|
||
await onDeleteSelected(Array.from(selected));
|
||
}}
|
||
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>
|
||
);
|
||
}
|