From 16164f3e5c2ebb708e48b462a8dec959c9f1378e Mon Sep 17 00:00:00 2001
From: lirui <lirui@winjoinit.com>
Date: Mon, 9 Feb 2026 20:23:24 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=88=97=E9=85=8D=E7=BD=AE?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=B7=BB=E5=8A=A0=E7=82=B9=E5=87=BB?=
 =?UTF-8?q?=E5=A4=96=E9=83=A8=E5=85=B3=E9=97=AD=E5=8A=9F=E8=83=BD=EF=BC=9B?=
 =?UTF-8?q?=E6=94=B9=E8=BF=9B=E6=95=B0=E6=8D=AE=E8=BD=AC=E6=8D=A2=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91=EF=BC=8C=E6=94=AF=E6=8C=81=E9=98=B2=E6=8A=96=E5=A4=84?=
 =?UTF-8?q?=E7=90=86=E4=BB=A5=E6=8F=90=E5=8D=87=E6=80=A7=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/ColumnConfig.svelte | 22 +++++++++++++++++++++-
 src/routes/+page.svelte                | 19 ++++++++++++++++++-
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/ColumnConfig.svelte b/src/lib/components/ColumnConfig.svelte
index 3ddb51d..4232dac 100644
--- a/src/lib/components/ColumnConfig.svelte
+++ b/src/lib/components/ColumnConfig.svelte
@@ -29,9 +29,29 @@
 			config.format = undefined;
 		}
 	}
+
+	// Click outside to close
+	let panelEl: HTMLDivElement;
+
+	function onDocumentClick(e: MouseEvent) {
+		if (panelEl && !panelEl.contains(e.target as Node)) {
+			onclose();
+		}
+	}
+
+	$effect(() => {
+		// Delay listener attachment to avoid catching the opening click itself
+		const timer = setTimeout(() => {
+			document.addEventListener('click', onDocumentClick, true);
+		}, 0);
+		return () => {
+			clearTimeout(timer);
+			document.removeEventListener('click', onDocumentClick, true);
+		};
+	});
 </script>
 
-<div class="absolute top-full left-0 z-50 mt-1 w-72 rounded-lg border border-gray-200 bg-white p-4 shadow-xl">
+<div bind:this={panelEl} class="absolute top-full left-0 z-50 mt-1 w-72 rounded-lg border border-gray-200 bg-white p-4 shadow-xl">
 	<div class="mb-3 flex items-center justify-between">
 		<h4 class="text-sm font-semibold text-gray-700">列配置</h4>
 		<button onclick={onclose} aria-label="关闭配置" class="text-gray-400 hover:text-gray-600 cursor-pointer">
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b3a5a0e..71563ce 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -16,7 +16,24 @@
 
 	// Derived
 	const hasData = $derived(headers.length > 0 && rows.length > 0);
-	const convertedJson = $derived(hasData ? convertData(rows, mappings) : []);
+
+	// Debounced conversion to avoid lag while editing mappings
+	let convertedJson = $state<Record<string, unknown>[]>([]);
+	let debounceTimer: ReturnType<typeof setTimeout>;
+
+	$effect(() => {
+		// $state.snapshot forces deep read of all nested properties,
+		// so changes to e.g. mappings[i].target will trigger this effect
+		const snapshotMappings = $state.snapshot(mappings);
+		const currentRows = rows;
+		const dataReady = hasData;
+
+		clearTimeout(debounceTimer);
+		debounceTimer = setTimeout(() => {
+			convertedJson = dataReady ? convertData(currentRows, snapshotMappings) : [];
+		}, 150);
+	});
+
 	const jsonString = $derived(JSON.stringify(convertedJson, null, 2));
 
 	// File handling