EXCEL2JSON/src/lib/components/DictionaryMapper.svelte

<script lang="ts">
	import type { ValueMapItem, MappingFallback, RowData } from '$lib/types.js';
	import { scanUniqueValues } from '$lib/converter.js';

	let {
		config = $bindable(),
		rows,
		sourceColumn
	}: {
		config: {
			useDictionary: boolean;
			valueMapping: ValueMapItem[];
			mappingFallback: MappingFallback;
			mappingCustomValue?: string;
		};
		rows: RowData[];
		sourceColumn: string;
	} = $props();

	const fallbackOptions: { value: MappingFallback; label: string }[] = [
		{ value: 'keep', label: '保留原值' },
		{ value: 'null', label: '设为 null' },
		{ value: 'custom', label: '自定义值' }
	];

	let newSourceValue = $state('');
	let newTargetValue = $state('');

	function enableDictionary() {
		config.useDictionary = true;
		if (config.valueMapping.length === 0) {
			scanColumnValues();
		}
	}

	function disableDictionary() {
		config.useDictionary = false;
	}

	function scanColumnValues() {
		const uniqueValues = scanUniqueValues(sourceColumn, rows);
		config.valueMapping = uniqueValues.map((v) => ({
			source: v,
			target: v
		}));
	}

	function addMappingItem() {
		if (!newSourceValue) return;
		config.valueMapping = [
			...config.valueMapping,
			{ source: newSourceValue, target: newTargetValue || newSourceValue }
		];
		newSourceValue = '';
		newTargetValue = '';
	}

	function removeMappingItem(index: number) {
		config.valueMapping = config.valueMapping.filter((_, i) => i !== index);
	}

	function updateTargetValue(index: number, value: string) {
		// Create a new array to trigger Svelte 5 reactivity
		config.valueMapping = config.valueMapping.map((item, i) =>
			i === index
				? { ...item, target: parseTargetValue(value) }
				: item
		);
	}

	function parseTargetValue(value: string): unknown {
		if (value === 'null' || value === '') return null;
		if (value === 'true') return true;
		if (value === 'false') return false;
		if (value === 'undefined') return undefined;

		const num = Number(value);
		if (!isNaN(num) && value !== '') return num;

		if ((value.startsWith('{') && value.endsWith('}')) || (value.startsWith('[') && value.endsWith(']'))) {
			try {
				return JSON.parse(value);
			} catch {
				return value;
			}
		}

		return value;
	}

	function formatTargetValue(value: unknown): string {
		if (value === null || value === undefined) return '';
		if (typeof value === 'string') return value;
		return JSON.stringify(value);
	}
</script>

<div class="space-y-2">
	<!-- Toggle -->
	<div class="flex items-center justify-between border-b border-gray-100 pb-1.5">
		<span class="text-xs font-semibold text-gray-700">字典映射</span>
		{#if !config.useDictionary}
			<button
				onclick={enableDictionary}
				class="rounded bg-blue-600 px-2 py-0.5 text-xs text-white hover:bg-blue-700"
			>
				启用
			</button>
		{:else}
			<button
				onclick={disableDictionary}
				class="rounded border border-gray-300 px-2 py-0.5 text-xs text-gray-600 hover:bg-gray-50"
			>
				禁用
			</button>
		{/if}
	</div>

	{#if config.useDictionary}
		<!-- Auto Scan Button -->
		<button
			onclick={scanColumnValues}
			class="w-full rounded border border-blue-600 bg-blue-50 px-2 py-1 text-xs text-blue-600 hover:bg-blue-100"
		>
			🔄 自动扫描列值
		</button>

		<!-- Mapping Table -->
		{#if config.valueMapping.length > 0}
			<div class="max-h-32 overflow-y-auto rounded border border-gray-200">
				<table class="w-full text-xs">
					<thead class="bg-gray-50 sticky top-0">
						<tr>
							<th class="px-1.5 py-1 text-left font-medium text-gray-600 text-[10px]">源</th>
							<th class="px-1.5 py-1 text-left font-medium text-gray-600 text-[10px]">目标</th>
							<th class="w-6"></th>
						</tr>
					</thead>
					<tbody>
						{#each config.valueMapping as item, index (index)}
							<tr class="border-t border-gray-100">
								<td class="px-1.5 py-1 text-gray-700 truncate max-w-24" title={String(item.source)}>{String(item.source)}</td>
								<td class="px-1.5 py-1">
									<input
										type="text"
										value={formatTargetValue(item.target)}
										oninput={(e) => updateTargetValue(index, e.currentTarget.value)}
										class="w-full rounded border border-gray-300 px-1 py-0.5 text-xs focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
									/>
								</td>
								<td class="px-0.5 py-1">
									<button
										onclick={() => removeMappingItem(index)}
										class="text-red-500 hover:text-red-700 p-0.5"
										title="删除"
									>
										<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
											<path
												stroke-linecap="round"
												stroke-linejoin="round"
												stroke-width="2"
												d="M6 18L18 6M6 6l12 12"
											/>
										</svg>
									</button>
								</td>
							</tr>
						{/each}
					</tbody>
				</table>
			</div>
		{:else}
			<p class="text-[10px] text-gray-400 text-center">暂无映射项</p>
		{/if}

		<!-- Manual Add (compact) -->
		<div class="flex gap-1">
			<input
				bind:value={newSourceValue}
				type="text"
				placeholder="源值"
				class="w-20 rounded border border-gray-300 px-1.5 py-1 text-xs focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
			/>
			<input
				bind:value={newTargetValue}
				type="text"
				placeholder="目标"
				class="flex-1 rounded border border-gray-300 px-1.5 py-1 text-xs focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
			/>
			<button
				onclick={addMappingItem}
				disabled={!newSourceValue}
				class="rounded border border-gray-300 px-2 py-1 text-xs text-gray-600 hover:bg-gray-50 disabled:opacity-50 whitespace-nowrap"
			>
				+
			</button>
		</div>

		<!-- Fallback Strategy (compact) -->
		<div class="flex items-center gap-2">
			<span class="text-[10px] text-gray-500 whitespace-nowrap">未匹配:</span>
			<select
				bind:value={config.mappingFallback}
				class="flex-1 rounded border border-gray-300 px-1.5 py-1 text-xs focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
			>
				{#each fallbackOptions as opt (opt.value)}
					<option value={opt.value}>{opt.label}</option>
				{/each}
			</select>
		</div>

		<!-- Custom Fallback Value (compact) -->
		{#if config.mappingFallback === 'custom'}
			<input
				bind:value={config.mappingCustomValue}
				type="text"
				placeholder="自定义默认值 (如: null, true, 0)"
				class="w-full rounded border border-gray-300 px-2 py-1 text-xs focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
			/>
		{/if}
	{/if}
</div>