From 105c5b257564b7b832b0ca5384010bba9f327f91 Mon Sep 17 00:00:00 2001
From: Zylan <zihan.jian@outlook.com>
Date: Fri, 25 Apr 2025 01:43:33 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A7=BB=E9=99=A4=E6=9C=AA=E4=BD=BF=E7=94=A8?=
 =?UTF-8?q?=E7=9A=84Image=E5=AF=BC=E5=85=A5=EF=BC=8C=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E6=8B=BC=E8=B1=86=E5=9B=BE=E6=A1=88=E7=9A=84=E7=BD=91=E6=A0=BC?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E5=8C=BA=E5=9F=9F=E5=92=8C=E4=B8=8B=E8=BD=BD?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=EF=BC=8C=E6=9B=B4=E6=96=B0=E9=A1=B5=E8=84=9A?=
 =?UTF-8?q?=E4=BB=A5=E9=93=BE=E6=8E=A5=E5=88=B0GitHub=E6=BA=90=E7=A0=81?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/page.tsx | 60 +++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 57 insertions(+), 3 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index a7885f8..306209b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,7 +3,7 @@
 import React, { useState, useRef, ChangeEvent, DragEvent, useEffect } from 'react';
 // Image component from next/image might not be strictly needed if you only use canvas and basic elements,
 // but keep it if you plan to add other images later or use the SVG icon below.
-import Image from 'next/image';
+// Removed unused Image import
 
 // Helper function to convert Hex to RGB
 function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
@@ -396,7 +396,6 @@ export default function Home() {
          return () => clearTimeout(timeoutId); // Cleanup timeout on unmount or change
       }
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps -- pixelateImage is stable if defined outside useEffect
   }, [originalImageSrc, granularity]); // Dependencies: run when image or granularity changes
 
   // Download function
@@ -599,12 +598,67 @@ export default function Home() {
             </div>
           </div>
         )}
+
+        {/* Grid Display Area */}
+        {mappedPixelData && gridDimensions && (
+          <div className="mt-8 p-4 bg-gray-200 rounded shadow-inner overflow-auto">
+            <h3 className="text-lg font-semibold mb-4 text-gray-700">拼豆图案 ({gridDimensions.M} x {gridDimensions.N})</h3>
+            <div
+              className="inline-grid border border-gray-400"
+              style={{
+                gridTemplateColumns: `repeat(${gridDimensions.N}, minmax(0, 1fr))`,
+                // Set a max width to prevent overly large grids from breaking layout
+                maxWidth: '100%',
+                // Calculate aspect ratio for the container itself
+                // aspectRatio: `${gridDimensions.N} / ${gridDimensions.M}` // Can cause layout issues if cells are small
+              }}
+            >
+              {mappedPixelData.flat().map((cell, index) => (
+                <div
+                  key={index}
+                  title={`${cell.key} (${cell.color})`}
+                  className="w-4 h-4 flex items-center justify-center text-xs font-mono leading-none" // Smaller size, flex center
+                  style={{
+                    backgroundColor: cell.color,
+                    color: getContrastColor(cell.color),
+                    // Add a subtle border to each cell
+                    border: '1px solid rgba(0,0,0,0.1)'
+                  }}
+                >
+                  {/* Optionally display the key inside */}
+                   {/* {cell.key} */}
+                </div>
+              ))}
+            </div>
+            {/* Download Buttons */}
+            <div className="mt-4 flex space-x-4">
+              <button
+                  onClick={handleDownloadImage}
+                  className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition duration-150"
+                  disabled={!mappedPixelData}
+              >
+                  下载 PNG 图案
+              </button>
+              <button
+                  onClick={handleDownloadJson}
+                  className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-150"
+                  disabled={!mappedPixelData}
+              >
+                  下载 JSON 数据
+              </button>
+            </div>
+          </div>
+        )}
       </main>
 
       <footer className="w-full max-w-4xl mt-10 mb-6 py-4 text-center text-xs sm:text-sm text-gray-500 border-t border-gray-200">
         <p>拼豆底稿生成器 &copy; {new Date().getFullYear()}</p>
         {/* Optional: Add link to source code or your website */}
-        {/* <p className="mt-1"><a href="#" className="hover:underline">GitHub Repo</a></p> */}
+        <p className="mt-1">
+          <a href="https://github.com/Zippland/perler-beads.git" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline ml-2">
+            在 GitHub 上查看源码
+          </a>
+        </p>
       </footer>
     </div>
   );