feat(download): add toggle for showing cell numbers in grid

src/app/page.tsx

@@ -139,6 +139,7 @@ export default function Home() {
     showGrid: true,
     gridInterval: 10,
     showCoordinates: true,
+    showCellNumbers: true,
     gridLineColor: gridLineColorOptions[0].value,
     includeStats: true, // 默认包含统计信息
     exportCsv: false // 默认不导出CSV

src/components/DownloadSettingsModal.tsx

@@ -151,6 +151,22 @@ const DownloadSettingsModal: React.FC<DownloadSettingsModalProps> = ({
                 <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
               </label>
             </div>
+
+            {/* 隐藏格内色号选项 */}
+            <div className="flex items-center justify-between">
+              <label className="flex items-center text-sm font-medium text-gray-700 dark:text-gray-300">
+                隐藏格内色号
+              </label>
+              <label className="relative inline-flex items-center cursor-pointer">
+                <input 
+                  type="checkbox" 
+                  className="sr-only peer"
+                  checked={!tempOptions.showCellNumbers}
+                  onChange={(e) => handleOptionChange('showCellNumbers', !e.target.checked)}
+                />
+                <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
+              </label>
+            </div>
             
             {/* 添加: 包含色号统计选项 */}
             <div className="flex items-center justify-between">
@@ -211,4 +227,4 @@ const DownloadSettingsModal: React.FC<DownloadSettingsModalProps> = ({
 };
 
 export default DownloadSettingsModal;
-export { gridLineColorOptions }; 
+export { gridLineColorOptions }; 

src/types/downloadTypes.ts

@@ -3,7 +3,8 @@ export type GridDownloadOptions = {
   showGrid: boolean;
   gridInterval: number;
   showCoordinates: boolean;
+  showCellNumbers: boolean;
   gridLineColor: string;
   includeStats: boolean;
   exportCsv: boolean; // 新增：是否同时导出CSV hex数据
-}; 
+};

src/utils/imageDownloader.ts

@@ -239,7 +239,7 @@ export async function downloadImage({
     const downloadCellSize = 30;
   
     // 从下载选项中获取设置
-    const { showGrid, gridInterval, showCoordinates, gridLineColor, includeStats } = options;
+    const { showGrid, gridInterval, showCoordinates, gridLineColor, includeStats, showCellNumbers = true } = options;
   
     // 设置边距空间用于坐标轴标注（如果需要）
     const axisLabelSize = showCoordinates ? Math.max(30, Math.floor(downloadCellSize)) : 0;
@@ -563,13 +563,15 @@ export async function downloadImage({
         if (cellData && !cellData.isExternal) {
           // 内部单元格：使用珠子颜色填充并绘制文本
           const cellColor = cellData.color || '#FFFFFF';
-          const cellKey = getDisplayColorKey(cellData.color || '#FFFFFF', selectedColorSystem);
 
           ctx.fillStyle = cellColor;
           ctx.fillRect(drawX, drawY, downloadCellSize, downloadCellSize);
 
-          ctx.fillStyle = getContrastColor(cellColor);
-          ctx.fillText(cellKey, drawX + downloadCellSize / 2, drawY + downloadCellSize / 2);
+          if (showCellNumbers) {
+            const cellKey = getDisplayColorKey(cellData.color || '#FFFFFF', selectedColorSystem);
+            ctx.fillStyle = getContrastColor(cellColor);
+            ctx.fillText(cellKey, drawX + downloadCellSize / 2, drawY + downloadCellSize / 2);
+          }
         } else {
           // 外部背景：填充白色
           ctx.fillStyle = '#FFFFFF';
@@ -814,7 +816,9 @@ export async function downloadImage({
     try {
       const dataURL = downloadCanvas.toDataURL('image/png');
       const link = document.createElement('a');
-      link.download = `bead-grid-${N}x${M}-keys-palette_${selectedColorSystem}.png`; // 文件名包含色彩系统
+      link.download = showCellNumbers
+        ? `bead-grid-${N}x${M}-keys-palette_${selectedColorSystem}.png`
+        : `bead-grid-${N}x${M}-pixel-palette_${selectedColorSystem}.png`;
       link.href = dataURL;
       document.body.appendChild(link);
       link.click();
@@ -845,4 +849,4 @@ export async function downloadImage({
       processDownload();
     };
   }
-} 
+}