diff --git a/src/app/page.tsx b/src/app/page.tsx index b09503b..ea50c2b 100644 --- a/src/app/page.tsx +++ b/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 diff --git a/src/components/DownloadSettingsModal.tsx b/src/components/DownloadSettingsModal.tsx index beeb0bb..83a164e 100644 --- a/src/components/DownloadSettingsModal.tsx +++ b/src/components/DownloadSettingsModal.tsx @@ -151,6 +151,22 @@ const DownloadSettingsModal: React.FC = ({
+ + {/* 隐藏格内色号选项 */} +
+ + +
{/* 添加: 包含色号统计选项 */}
@@ -211,4 +227,4 @@ const DownloadSettingsModal: React.FC = ({ }; export default DownloadSettingsModal; -export { gridLineColorOptions }; \ No newline at end of file +export { gridLineColorOptions }; diff --git a/src/types/downloadTypes.ts b/src/types/downloadTypes.ts index 74c0eaf..7764bcf 100644 --- a/src/types/downloadTypes.ts +++ b/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数据 -}; \ No newline at end of file +}; diff --git a/src/utils/imageDownloader.ts b/src/utils/imageDownloader.ts index 70ac4e7..808137a 100644 --- a/src/utils/imageDownloader.ts +++ b/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(); }; } -} \ No newline at end of file +}