From 2519daf1628534e414bc7a10f0472dc32000bde4 Mon Sep 17 00:00:00 2001 From: zihanjian Date: Sun, 25 May 2025 11:29:08 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E9=A2=9C=E8=89=B2=E6=98=A0?= =?UTF-8?q?=E5=B0=84=E4=B8=AD=E7=9A=84=E4=B8=80=E4=B8=AAhex=E5=80=BC?= =?UTF-8?q?=EF=BC=8C=E5=A2=9E=E5=BC=BAlocalStorage=E6=95=B0=E6=8D=AE?= =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E7=9A=84=E9=AA=8C=E8=AF=81=E9=80=BB=E8=BE=91?= =?UTF-8?q?=EF=BC=8C=E6=96=B0=E5=A2=9E=E6=9C=89=E6=95=88=E5=92=8C=E6=97=A0?= =?UTF-8?q?=E6=95=88=E9=94=AE=E7=9A=84=E7=BB=9F=E8=AE=A1=E8=BE=93=E5=87=BA?= =?UTF-8?q?=EF=BC=8C=E4=BC=98=E5=8C=96=E8=B0=83=E8=89=B2=E6=9D=BF=E9=80=89?= =?UTF-8?q?=E6=8B=A9=E5=92=8C=E5=AF=BC=E5=85=A5=E5=8A=9F=E8=83=BD=EF=BC=8C?= =?UTF-8?q?=E6=8F=90=E5=8D=87=E4=BB=A3=E7=A0=81=E5=8F=AF=E8=AF=BB=E6=80=A7?= =?UTF-8?q?=E5=92=8C=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/colorSystemMapping.json | 2 +- src/app/page.tsx | 129 ++++++++++++-------------------- src/utils/localStorageUtils.ts | 14 ++++ 3 files changed, 64 insertions(+), 81 deletions(-) diff --git a/src/app/colorSystemMapping.json b/src/app/colorSystemMapping.json index b6e7a6e..2600afb 100644 --- a/src/app/colorSystemMapping.json +++ b/src/app/colorSystemMapping.json @@ -258,7 +258,7 @@ "#1A60C3": { "MARD": "R08", "COCO": "L08", "漫漫": "T3", "盼盼": "68", "咪小窝": "54" }, "#9A56B4": { "MARD": "R09", "COCO": "L09", "漫漫": "T2", "盼盼": "70", "咪小窝": "56" }, "#FFDB4C": { "MARD": "R10", "COCO": "L10", "漫漫": "L2", "盼盼": "156", "咪小窝": "53" }, - "#FFEBFA": { "MARD": "R11", "COCO": "L11", "漫漫": "T6", "盼盼": "151", "咪小窝": "151" }, + "#FFEBFB": { "MARD": "R11", "COCO": "L11", "漫漫": "T6", "盼盼": "151", "咪小窝": "151" }, "#D8D5CE": { "MARD": "R12", "COCO": "L12", "漫漫": "T7", "盼盼": "160", "咪小窝": "157" }, "#55514C": { "MARD": "R13", "COCO": "L13", "漫漫": "-", "盼盼": "152", "咪小窝": "152" }, "#9FE4DF": { "MARD": "R14", "COCO": "S1", "漫漫": "S1", "盼盼": "231", "咪小窝": "231" }, diff --git a/src/app/page.tsx b/src/app/page.tsx index 9ba1c04..12b6715 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -251,36 +251,48 @@ export default function Home() { // 尝试从localStorage加载 const savedSelections = loadPaletteSelections(); if (savedSelections && Object.keys(savedSelections).length > 0) { + console.log('从localStorage加载的数据键数量:', Object.keys(savedSelections).length); // 验证加载的数据是否都是有效的hex值 const allHexValues = fullBeadPalette.map(color => color.hex.toUpperCase()); const validSelections: PaletteSelections = {}; let hasValidData = false; + let validCount = 0; + let invalidCount = 0; Object.entries(savedSelections).forEach(([key, value]) => { - if (allHexValues.includes(key.toUpperCase())) { + // 严格验证：键必须是有效的hex格式，并且存在于调色板中 + if (/^#[0-9A-F]{6}$/i.test(key) && allHexValues.includes(key.toUpperCase())) { validSelections[key.toUpperCase()] = value; hasValidData = true; + validCount++; + } else { + invalidCount++; } }); + console.log(`验证结果: 有效键 ${validCount} 个, 无效键 ${invalidCount} 个`); + if (hasValidData) { setCustomPaletteSelections(validSelections); setIsCustomPalette(true); } else { - // 如果本地数据无效，用当前预设初始化 + console.log('所有数据都无效，清除localStorage并重新初始化'); + // 如果本地数据无效，清除localStorage并用当前预设初始化 + localStorage.removeItem('customPerlerPaletteSelections'); const currentPresetKeys = paletteOptions[selectedPaletteKeySet]?.keys || []; const initialSelections = presetKeysToHexSelections(fullBeadPalette, currentPresetKeys); setCustomPaletteSelections(initialSelections); setIsCustomPalette(false); } } else { + console.log('没有localStorage数据，使用预设初始化'); // 如果没有保存的选择，用当前预设初始化 const currentPresetKeys = paletteOptions[selectedPaletteKeySet]?.keys || []; const initialSelections = presetKeysToHexSelections(fullBeadPalette, currentPresetKeys); setCustomPaletteSelections(initialSelections); setIsCustomPalette(false); } - }, [selectedPaletteKeySet]); // Add selectedPaletteKeySet to the dependency array + }, [selectedPaletteKeySet]); // 更新 activeBeadPalette 基于自定义选择和排除列表 useEffect(() => { @@ -1127,19 +1139,10 @@ export default function Home() { return; } - // 为了兼容性，也生成对应的MARD色号 - const correspondingMardKeys = selectedHexValues - .map(hex => { - const colorData = fullBeadPalette.find(color => color.hex.toUpperCase() === hex.toUpperCase()); - return colorData?.key; - }) - .filter(key => key !== undefined) as string[]; - - // 导出新格式：基于hex值，同时保留MARD色号以便兼容 + // 导出格式：仅基于hex值 const exportData = { - version: "2.0", // 版本号标识 + version: "3.0", // 新版本号 selectedHexValues: selectedHexValues, - selectedKeys: correspondingMardKeys, // 保留旧格式以便兼容 exportDate: new Date().toISOString(), totalColors: selectedHexValues.length }; @@ -1166,74 +1169,40 @@ export default function Home() { const content = e.target?.result as string; const data = JSON.parse(content); - let validHexValues: string[] = []; - - // 检查是否为新格式（基于hex值） - if (data.version === "2.0" && Array.isArray(data.selectedHexValues)) { - console.log("检测到新格式（基于hex值）的色板文件"); - - const importedHexValues = data.selectedHexValues as string[]; - const invalidHexValues: string[] = []; - - // 验证hex值 - importedHexValues.forEach(hex => { - const normalizedHex = hex.toUpperCase(); - const colorData = fullBeadPalette.find(color => color.hex.toUpperCase() === normalizedHex); - if (colorData) { - validHexValues.push(normalizedHex); - } else { - invalidHexValues.push(hex); - } - }); - - if (invalidHexValues.length > 0) { - console.warn("导入时发现无效的hex值:", invalidHexValues); - alert(`导入完成，但以下颜色无效已被忽略：\n${invalidHexValues.join(', ')}`); - } - - if (validHexValues.length === 0) { - alert("导入的文件中不包含任何有效的颜色。"); - return; - } - - console.log(`成功验证 ${validHexValues.length} 个有效的hex值`); - - } - // 检查是否为旧格式（基于MARD色号） - else if (Array.isArray(data.selectedKeys)) { - console.log("检测到旧格式（基于MARD色号）的色板文件"); - - const importedKeys = data.selectedKeys as string[]; - const validKeys = new Set(allPaletteKeys); - const validImportedKeys = importedKeys.filter(key => validKeys.has(key)); - const invalidKeys = importedKeys.filter(key => !validKeys.has(key)); - - if (invalidKeys.length > 0) { - console.warn("导入时发现无效的颜色key:", invalidKeys); - alert(`导入完成，但以下色号无效已被忽略：\n${invalidKeys.join(', ')}`); - } - - if (validImportedKeys.length === 0) { - alert("导入的文件中不包含任何有效的色号。"); - return; - } - - // 将MARD色号转换为hex值 - validHexValues = validImportedKeys - .map(key => { - const colorData = fullBeadPalette.find(color => color.key === key); - return colorData?.hex.toUpperCase(); - }) - .filter(hex => hex !== undefined) as string[]; - - console.log(`从旧格式转换得到 ${validHexValues.length} 个有效的hex值`); - - } - // 无法识别的格式 - else { - throw new Error("无效的文件格式：文件既不包含 'selectedHexValues' 数组也不包含 'selectedKeys' 数组。"); + // 检查文件格式 + if (!Array.isArray(data.selectedHexValues)) { + throw new Error("无效的文件格式：文件必须包含 'selectedHexValues' 数组。"); } + console.log("检测到基于hex值的色板文件"); + + const importedHexValues = data.selectedHexValues as string[]; + const validHexValues: string[] = []; + const invalidHexValues: string[] = []; + + // 验证hex值 + importedHexValues.forEach(hex => { + const normalizedHex = hex.toUpperCase(); + const colorData = fullBeadPalette.find(color => color.hex.toUpperCase() === normalizedHex); + if (colorData) { + validHexValues.push(normalizedHex); + } else { + invalidHexValues.push(hex); + } + }); + + if (invalidHexValues.length > 0) { + console.warn("导入时发现无效的hex值:", invalidHexValues); + alert(`导入完成，但以下颜色无效已被忽略：\n${invalidHexValues.join(', ')}`); + } + + if (validHexValues.length === 0) { + alert("导入的文件中不包含任何有效的颜色。"); + return; + } + + console.log(`成功验证 ${validHexValues.length} 个有效的hex值`); + // 基于有效的hex值创建新的selections对象 const allHexValues = fullBeadPalette.map(color => color.hex.toUpperCase()); const newSelections = presetToSelections(allHexValues, validHexValues); diff --git a/src/utils/localStorageUtils.ts b/src/utils/localStorageUtils.ts index b158def..c94489c 100644 --- a/src/utils/localStorageUtils.ts +++ b/src/utils/localStorageUtils.ts @@ -55,11 +55,25 @@ export function presetKeysToHexSelections( ): PaletteSelections { const presetKeySet = new Set(presetKeys); const selections: PaletteSelections = {}; + const processedHexValues = new Set(); + + console.log(`presetKeysToHexSelections: 输入调色板大小 ${allBeadPalette.length}, 预设键数量 ${presetKeys.length}`); allBeadPalette.forEach(color => { const normalizedHex = color.hex.toUpperCase(); + + // 检查是否已经处理过这个hex值 + if (processedHexValues.has(normalizedHex)) { + console.warn(`重复的hex值: ${normalizedHex}, MARD键: ${color.key}`); + return; // 跳过重复的hex值 + } + + processedHexValues.add(normalizedHex); selections[normalizedHex] = presetKeySet.has(color.key); }); + const selectedCount = Object.values(selections).filter(Boolean).length; + console.log(`presetKeysToHexSelections: 生成选择对象，总数 ${Object.keys(selections).length}, 选中 ${selectedCount}`); + return selections; } \ No newline at end of file