Feat: 增加文件连线编辑功能，可一键覆盖原文件保存
This commit is contained in:
parent
2ae98780de
commit
70c09558d1
|
|
@ -1,5 +1,5 @@
|
|||
import { memo, useEffect, useMemo, useState } from "react";
|
||||
import { Check } from "lucide-react";
|
||||
import { Check, Copy, Download, Save } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
|
|
@ -10,10 +10,12 @@ import {
|
|||
} from "@/components/ui/dialog";
|
||||
import { unflattenValues } from "@/lib/i18n-structure";
|
||||
import { useClipboard } from "@/hooks/use-clipboard";
|
||||
import { useFileConnections, writeLanguageToConnectedFile } from "@/store/file-connection";
|
||||
|
||||
type Props = {
|
||||
open: boolean;
|
||||
onOpenChange: (next: boolean) => void;
|
||||
projectId: string;
|
||||
languages: string[];
|
||||
valuesByLang: Record<string, Record<string, string>>;
|
||||
orderedPaths?: string[]; // 优先按照结构顺序导出
|
||||
|
|
@ -22,12 +24,14 @@ type Props = {
|
|||
function ExportLanguageModalImpl({
|
||||
open,
|
||||
onOpenChange,
|
||||
projectId,
|
||||
languages,
|
||||
valuesByLang,
|
||||
orderedPaths,
|
||||
}: Props) {
|
||||
const [selected, setSelected] = useState<string>("");
|
||||
const { copied, copy } = useClipboard({ resetAfterMs: 1500 });
|
||||
const connSnap = useFileConnections(projectId);
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
|
|
@ -115,6 +119,13 @@ function ExportLanguageModalImpl({
|
|||
copy(jsonText);
|
||||
}
|
||||
|
||||
const hasConnectedTarget = !!(selected && connSnap.connections[selected]);
|
||||
|
||||
const handleWriteToFile = async () => {
|
||||
if (!selected || !jsonText) return;
|
||||
await writeLanguageToConnectedFile(projectId, selected, jsonText);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-3xl">
|
||||
|
|
@ -155,10 +166,15 @@ function ExportLanguageModalImpl({
|
|||
关闭
|
||||
</Button>
|
||||
<Button onClick={handleCopy} variant="outline" disabled={!selected || !jsonText}>
|
||||
{copied ? (<><Check /> 已复制</>) : "复制 JSON"}
|
||||
{copied ? (<><Check /> 已复制</>) : (<><Copy /> 复制</>)}
|
||||
</Button>
|
||||
<Button onClick={handleDownload} disabled={!selected || !jsonText}>
|
||||
导出 JSON
|
||||
<Button variant="outline" onClick={handleDownload} disabled={!selected || !jsonText}>
|
||||
<Download />
|
||||
导出
|
||||
</Button>
|
||||
<Button onClick={handleWriteToFile} disabled={!hasConnectedTarget || !jsonText}>
|
||||
<Save />
|
||||
写入文件
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,54 @@
|
|||
import { disconnectLanguage, useFileConnections } from "@/store/file-connection";
|
||||
|
||||
type Props = {
|
||||
projectId: string;
|
||||
};
|
||||
|
||||
export function HeaderConnectionIndicator({ projectId }: Props) {
|
||||
const snap = useFileConnections(projectId);
|
||||
const list = Object.values(snap.connections);
|
||||
const hasAny = list.length > 0;
|
||||
|
||||
return (
|
||||
<div className="relative group">
|
||||
<button
|
||||
type="button"
|
||||
className={`px-2 h-8 rounded border text-sm bg-white ${hasAny ? "text-foreground" : "text-muted-foreground"}`}
|
||||
title={hasAny ? "已连线文件" : "未连线到任何文件"}
|
||||
>
|
||||
{hasAny ? `已连线 ${list.length}` : "未连线"}
|
||||
</button>
|
||||
<div className="invisible opacity-0 group-hover:visible group-hover:opacity-100 transition-opacity duration-150 absolute right-0 top-full mt-2 z-50 w-80 rounded-md border bg-white text-foreground shadow">
|
||||
<div className="p-3">
|
||||
<div className="text-sm font-medium mb-2">连线状态</div>
|
||||
{list.length === 0 ? (
|
||||
<div className="text-sm text-muted-foreground">暂无连线。通过“导入 JSON”选择文件后将建立连线。</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{list.map((c) => (
|
||||
<div key={c.language} className="flex items-start justify-between gap-2">
|
||||
<div className="min-w-0">
|
||||
<div className="text-sm font-medium truncate">{c.language}</div>
|
||||
<div className="text-xs text-muted-foreground truncate" title={c.name}>
|
||||
{c.name}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="px-2 h-7 rounded border text-xs hover:bg-accent"
|
||||
onClick={() => disconnectLanguage(projectId, c.language)}
|
||||
>
|
||||
断开
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
<div className="text-xs text-muted-foreground">
|
||||
注：出于隐私，浏览器不提供完整路径，仅显示文件名；刷新页面后连线不会自动恢复。
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { memo, useRef, useState } from "react";
|
||||
import { memo, useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { buildStructureFromObject, flattenValues } from "@/lib/i18n-structure";
|
||||
|
|
@ -11,6 +11,7 @@ import {
|
|||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Checkbox } from "../ui/checkbox";
|
||||
import { connectLanguageToFile, isFilePickerSupported } from "@/store/file-connection";
|
||||
|
||||
type Props = {
|
||||
open: boolean;
|
||||
|
|
@ -32,29 +33,28 @@ function ImportLanguageModalImpl({
|
|||
const [lang, setLang] = useState("");
|
||||
const [importing, setImporting] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const fileRef = useRef<HTMLInputElement | null>(null);
|
||||
const [forceOverride, setForceOverride] = useState(false);
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (
|
||||
!fileRef.current ||
|
||||
!fileRef.current.files ||
|
||||
fileRef.current.files.length === 0
|
||||
) {
|
||||
setError("请选择 JSON 文件");
|
||||
return;
|
||||
}
|
||||
const language = lang.trim();
|
||||
if (!language) {
|
||||
setError("请输入语言代号，如 en 或 zh-CN");
|
||||
return;
|
||||
}
|
||||
if (!isFilePickerSupported()) {
|
||||
setError("当前浏览器不支持 showOpenFilePicker");
|
||||
return;
|
||||
}
|
||||
setImporting(true);
|
||||
setError(null);
|
||||
try {
|
||||
const file = fileRef.current.files[0]!;
|
||||
const text = await file.text();
|
||||
const picked = await connectLanguageToFile(projectId, language);
|
||||
if (!picked) {
|
||||
setImporting(false);
|
||||
return;
|
||||
}
|
||||
const text = picked.text;
|
||||
let json: unknown;
|
||||
try {
|
||||
json = JSON.parse(text);
|
||||
|
|
@ -73,7 +73,6 @@ function ImportLanguageModalImpl({
|
|||
const values = flattenValues(json);
|
||||
await upsertLanguageTranslations(projectId, language, values);
|
||||
setLang("");
|
||||
if (fileRef.current) fileRef.current.value = "";
|
||||
setForceOverride(false);
|
||||
onOpenChange(false);
|
||||
await onImported();
|
||||
|
|
@ -102,17 +101,6 @@ function ImportLanguageModalImpl({
|
|||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
<form onSubmit={handleSubmit} className="mt-2 space-y-3">
|
||||
<div>
|
||||
<label className="text-sm text-muted-foreground">
|
||||
选择 JSON 文件
|
||||
</label>
|
||||
<Input
|
||||
ref={fileRef}
|
||||
type="file"
|
||||
accept="application/json,.json"
|
||||
className="mt-1 block w-full text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm text-muted-foreground">
|
||||
语言代号（如 en、ja、zh-CN）
|
||||
|
|
@ -163,7 +151,7 @@ function ImportLanguageModalImpl({
|
|||
取消
|
||||
</Button>
|
||||
<Button type="submit" disabled={importing}>
|
||||
{importing ? "导入中..." : "确认导入"}
|
||||
{importing ? "导入中..." : "选择文件并导入"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ import {
|
|||
updateProject,
|
||||
deleteProjectDeep,
|
||||
} from "@/lib/db";
|
||||
import { ArrowBigDownDash, ArrowBigUpDash, ArrowLeft, Brackets, CaseSensitive, Filter, Languages, LocateFixed, MoreVertical, PencilLine, Trash2 } from "lucide-react";
|
||||
import { ArrowBigDownDash, ArrowBigUpDash, ArrowLeft, Brackets, CaseSensitive, Download, Filter, Languages, LocateFixed, MoreVertical, PencilLine, Reply, 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";
|
||||
|
|
@ -38,6 +38,8 @@ import { useClipboard } from "@/hooks/use-clipboard";
|
|||
import { toast } from "sonner";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { clearAllConnections } from "@/store/file-connection";
|
||||
import { HeaderConnectionIndicator } from "@/components/biz/header-connection-indicator";
|
||||
|
||||
export default function Editor() {
|
||||
const { id: projectId } = useParams();
|
||||
|
|
@ -351,6 +353,14 @@ export default function Editor() {
|
|||
};
|
||||
}, [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">
|
||||
|
|
@ -366,16 +376,26 @@ export default function Editor() {
|
|||
{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); }}>导入 JSON</Button>
|
||||
<Button variant="outline" onClick={() => { setImportOpen(true); }}>
|
||||
<Reply />
|
||||
导入
|
||||
</Button>
|
||||
)}
|
||||
{languages.length > 0 && (
|
||||
<Button variant="outline" onClick={() => setExportOpen(true)}>导出 JSON</Button>
|
||||
<Button variant="outline" onClick={() => setExportOpen(true)}>
|
||||
<Download />
|
||||
导出
|
||||
</Button>
|
||||
)}
|
||||
{project && (
|
||||
<Button variant="outline" onClick={() => setSettingsOpen(true)}>项目设置</Button>
|
||||
<Button variant="outline" onClick={() => setSettingsOpen(true)}>
|
||||
<Settings />
|
||||
设置
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -530,6 +550,7 @@ export default function Editor() {
|
|||
<ExportLanguageModal
|
||||
open={exportOpen}
|
||||
onOpenChange={setExportOpen}
|
||||
projectId={projectId ?? ""}
|
||||
languages={languages}
|
||||
valuesByLang={valuesByLang}
|
||||
orderedPaths={entries.map((e) => e.path)}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,173 @@
|
|||
import { useSyncExternalStore } from "react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export type LanguageConnection = {
|
||||
language: string;
|
||||
handle: FileSystemFileHandle;
|
||||
name: string;
|
||||
};
|
||||
|
||||
type Snapshot = {
|
||||
connections: Record<string, LanguageConnection>;
|
||||
};
|
||||
|
||||
type Listener = () => void;
|
||||
|
||||
// projectId -> Snapshot
|
||||
const state = new Map<string, Snapshot>();
|
||||
const listeners = new Map<string, Set<Listener>>();
|
||||
|
||||
function ensureProject(projectId: string) {
|
||||
if (!state.has(projectId)) {
|
||||
state.set(projectId, { connections: {} });
|
||||
}
|
||||
if (!listeners.has(projectId)) {
|
||||
listeners.set(projectId, new Set());
|
||||
}
|
||||
}
|
||||
|
||||
function emit(projectId: string) {
|
||||
const set = listeners.get(projectId);
|
||||
if (!set) return;
|
||||
for (const l of Array.from(set)) {
|
||||
try {
|
||||
l();
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function useFileConnections(projectId: string): Snapshot {
|
||||
ensureProject(projectId);
|
||||
|
||||
return useSyncExternalStore(
|
||||
(l) => {
|
||||
const set = listeners.get(projectId)!;
|
||||
set.add(l);
|
||||
return () => set.delete(l);
|
||||
},
|
||||
() => state.get(projectId)!,
|
||||
() => ({ connections: {} })
|
||||
);
|
||||
}
|
||||
|
||||
export function isFilePickerSupported(): boolean {
|
||||
return typeof window !== "undefined" && typeof (window as unknown as { showOpenFilePicker?: unknown }).showOpenFilePicker === "function";
|
||||
}
|
||||
|
||||
export async function connectLanguageToFile(projectId: string, language: string): Promise<{ text: string; connection: LanguageConnection } | null> {
|
||||
if (!isFilePickerSupported()) {
|
||||
toast.error("当前浏览器不支持文件系统访问 API（showOpenFilePicker）");
|
||||
return null;
|
||||
}
|
||||
ensureProject(projectId);
|
||||
try {
|
||||
// @ts-expect-error - showOpenFilePicker exists in supporting browsers
|
||||
const [handle]: FileSystemFileHandle[] = await window.showOpenFilePicker({
|
||||
multiple: false,
|
||||
types: [
|
||||
{
|
||||
description: "JSON Files",
|
||||
accept: { "application/json": [".json"] },
|
||||
},
|
||||
],
|
||||
excludeAcceptAllOption: true,
|
||||
});
|
||||
if (!handle) return null;
|
||||
|
||||
const canRead = await ensurePermission(handle, "read");
|
||||
if (!canRead) {
|
||||
toast.error("没有读取权限");
|
||||
return null;
|
||||
}
|
||||
|
||||
const file = await handle.getFile();
|
||||
const text = await file.text();
|
||||
|
||||
const snap = state.get(projectId)!;
|
||||
snap.connections[language] = {
|
||||
language,
|
||||
handle,
|
||||
name: handle.name,
|
||||
};
|
||||
emit(projectId);
|
||||
|
||||
return { text, connection: snap.connections[language]! };
|
||||
} catch (e) {
|
||||
const message = (e as Error)?.message ?? "选择文件失败";
|
||||
if (!/aborted|cancel/i.test(message)) {
|
||||
toast.error(message);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export async function writeLanguageToConnectedFile(projectId: string, language: string, text: string): Promise<boolean> {
|
||||
const snap = state.get(projectId);
|
||||
const conn = snap?.connections[language];
|
||||
if (!conn) {
|
||||
toast.error("该语言未连线到文件");
|
||||
return false;
|
||||
}
|
||||
try {
|
||||
const canWrite = await ensurePermission(conn.handle, "readwrite");
|
||||
if (!canWrite) {
|
||||
toast.error("没有写入权限");
|
||||
return false;
|
||||
}
|
||||
const writable = await conn.handle.createWritable();
|
||||
await writable.write(text);
|
||||
await writable.close();
|
||||
toast.success(`已写入 ${conn.name}`);
|
||||
return true;
|
||||
} catch (e) {
|
||||
toast.error((e as Error)?.message ?? "写入失败");
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
export function disconnectLanguage(projectId: string, language: string) {
|
||||
const snap = state.get(projectId);
|
||||
if (!snap) return;
|
||||
if (snap.connections[language]) {
|
||||
delete snap.connections[language];
|
||||
emit(projectId);
|
||||
}
|
||||
}
|
||||
|
||||
export function clearAllConnections(projectId: string) {
|
||||
if (!state.has(projectId)) return;
|
||||
state.set(projectId, { connections: {} });
|
||||
emit(projectId);
|
||||
}
|
||||
|
||||
export function getConnection(projectId: string, language: string): LanguageConnection | undefined {
|
||||
return state.get(projectId)?.connections[language];
|
||||
}
|
||||
|
||||
export function listConnections(projectId: string): LanguageConnection[] {
|
||||
return Object.values(state.get(projectId)?.connections ?? {});
|
||||
}
|
||||
|
||||
async function ensurePermission(handle: FileSystemFileHandle, mode: "read" | "readwrite"): Promise<boolean> {
|
||||
try {
|
||||
// @ts-expect-error - queryPermission/requestPermission exist in supporting browsers
|
||||
const q = await handle.queryPermission?.({ mode });
|
||||
if (q === "granted") return true;
|
||||
// @ts-expect-error - requestPermission exists in supporting browsers
|
||||
const r = await handle.requestPermission?.({ mode });
|
||||
return r === "granted";
|
||||
} catch {
|
||||
if (mode === "readwrite") {
|
||||
try {
|
||||
const w = await handle.createWritable();
|
||||
await w.close();
|
||||
return true;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue