更新README文档以反映调色板数据文件的更改，移除不再使用的beadPaletteData.json文件，改为使用colorSystemMapping.json。优化page.tsx和colorSystemUtils.ts中的相关逻辑，确保色号系统选择和颜色映射功能正常工作，提升代码可读性和用户体验。

src/utils/colorSystemUtils.ts

@@ -1,6 +1,5 @@
 import { PaletteColor } from './pixelation';
 import colorSystemMapping from '../app/colorSystemMapping.json';
-import beadPaletteData from '../app/beadPaletteData.json';
 
 // 定义色号系统类型并导出
 export type ColorSystem = 'MARD' | 'COCO' | '漫漫' | '盼盼' | '咪小窝';
@@ -17,7 +16,23 @@ export const colorSystemOptions = [
 // 类型定义
 type ColorMapping = Record<string, Record<ColorSystem, string>>;
 const typedColorSystemMapping = colorSystemMapping as ColorMapping;
-const typedBeadPaletteData = beadPaletteData as Record<string, string>;
+
+// 获取所有可用的hex值
+export function getAllHexValues(): string[] {
+  return Object.keys(typedColorSystemMapping);
+}
+
+// 获取所有MARD色号到hex值的映射（用于向后兼容）
+export function getMardToHexMapping(): Record<string, string> {
+  const mapping: Record<string, string> = {};
+  Object.entries(typedColorSystemMapping).forEach(([hex, colorData]) => {
+    const mardKey = colorData.MARD;
+    if (mardKey) {
+      mapping[mardKey] = hex;
+    }
+  });
+  return mapping;
+}
 
 // 从colorSystemMapping.json加载完整的颜色映射数据
 export function loadFullColorMapping(): Map<string, Record<ColorSystem, string>> {
@@ -45,44 +60,39 @@ export function convertPaletteToColorSystem(
   });
 }
 
-// 获取指定色号系统的显示键 - 重新设计的简化版本
-export function getDisplayColorKey(originalKey: string, colorSystem: ColorSystem): string {
+// 获取指定色号系统的显示键 - 基于hex值的简化版本
+export function getDisplayColorKey(hexValue: string, colorSystem: ColorSystem): string {
   // 对于特殊键（如透明键），直接返回原键
-  if (originalKey === 'ERASE' || originalKey.length === 0 || originalKey === '?') {
-    return originalKey;
+  if (hexValue === 'ERASE' || hexValue.length === 0 || hexValue === '?') {
+    return hexValue;
   }
   
-  // 如果目标色号系统就是MARD，直接返回原键
-  if (colorSystem === 'MARD') {
-    return originalKey;
-  }
+  // 标准化hex值（确保大写）
+  const normalizedHex = hexValue.toUpperCase();
   
-  // 1. 通过MARD色号从beadPaletteData获取hex值
-  const hexValue = typedBeadPaletteData[originalKey];
-  if (!hexValue) {
-    return originalKey; // 如果找不到对应的hex值，返回原键
-  }
-  
-  // 2. 通过hex值从colorSystemMapping获取目标色号系统的值
-  const colorMapping = typedColorSystemMapping[hexValue];
+  // 通过hex值从colorSystemMapping获取目标色号系统的值
+  const colorMapping = typedColorSystemMapping[normalizedHex];
   if (colorMapping && colorMapping[colorSystem]) {
     return colorMapping[colorSystem];
   }
   
-  return originalKey; // 如果找不到映射，返回原键
+  return '?'; // 如果找不到映射，返回 '?'
 }
 
-// 将色号键转换回基础系统（MARD）
-export function convertToBaseKey(displayKey: string, colorSystem: ColorSystem): string {
-  if (colorSystem === 'MARD') {
-    return displayKey;
+// 将色号键转换到hex值（支持任意色号系统）
+export function convertColorKeyToHex(displayKey: string, colorSystem: ColorSystem): string {
+  // 如果已经是hex值，直接返回
+  if (displayKey.startsWith('#') && displayKey.length === 7) {
+    return displayKey.toUpperCase();
   }
   
-  for (const [, mapping] of Object.entries(typedColorSystemMapping)) {
+  // 在colorSystemMapping中查找对应的hex值
+  for (const [hex, mapping] of Object.entries(typedColorSystemMapping)) {
     if (mapping[colorSystem] === displayKey) {
-      return mapping.MARD;
+      return hex;
     }
   }
+  
   return displayKey; // 如果找不到映射，返回原键
 }
 
@@ -103,6 +113,6 @@ export function getColorKeyByHex(hexValue: string, colorSystem: ColorSystem): st
     return mapping[colorSystem];
   }
   
-  // 如果找不到映射，返回 hex 值本身或者 '?'
+  // 如果找不到映射，返回 '?'
   return '?';
 } 

src/utils/imageDownloader.ts

@@ -47,14 +47,13 @@ function sortColorKeys(a: string, b: string): number {
 }
 
 // 下载图片的主函数
-export function downloadImage({
+export async function downloadImage({
   mappedPixelData,
   gridDimensions,
   colorCounts,
   totalBeadCount,
   options,
   activeBeadPalette,
-  selectedPaletteKeySet,
   selectedColorSystem
 }: {
   mappedPixelData: MappedPixel[][] | null;
@@ -63,9 +62,8 @@ export function downloadImage({
   totalBeadCount: number;
   options: GridDownloadOptions;
   activeBeadPalette: PaletteColor[];
-  selectedPaletteKeySet: string;
   selectedColorSystem: ColorSystem;
-}): void {
+}): Promise<void> {
   if (!mappedPixelData || !gridDimensions || gridDimensions.N === 0 || gridDimensions.M === 0 || activeBeadPalette.length === 0) {
     console.error("下载失败: 映射数据或尺寸无效。");
     alert("无法下载图纸，数据未生成或无效。");
@@ -523,7 +521,7 @@ export function downloadImage({
     try {
       const dataURL = downloadCanvas.toDataURL('image/png');
       const link = document.createElement('a');
-      link.download = `bead-grid-${N}x${M}-keys-palette_${selectedPaletteKeySet}.png`; // 文件名包含调色板
+      link.download = `bead-grid-${N}x${M}-keys-palette_${selectedColorSystem}.png`; // 文件名包含色彩系统
       link.href = dataURL;
       document.body.appendChild(link);
       link.click();