Feat: 增加文件连线编辑功能，可一键覆盖原文件保存

src/components/biz/export-language-modal.tsx

@@ -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}>
+          <Button variant="outline" onClick={handleDownload} disabled={!selected || !jsonText}>
-            导出 JSON
+            <Download />
+            导出
+          </Button>
+          <Button onClick={handleWriteToFile} disabled={!hasConnectedTarget || !jsonText}>
+            <Save />
+            写入文件
           </Button>
         </DialogFooter>
       </DialogContent>

src/components/biz/header-connection-indicator.tsx

@@ -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>
+	);
+}

src/components/biz/import-language-modal.tsx

@@ -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 picked = await connectLanguageToFile(projectId, language);
-      const text = await file.text();
+      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>

src/pages/editor.tsx

@@ -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)}

src/store/file-connection.ts

@@ -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;
+	}
+}