From dfa942444dfb3885e2e9ab7dd2a6bf8f3688f1e0 Mon Sep 17 00:00:00 2001
From: Zylan <zihan.jian@outlook.com>
Date: Sat, 26 Apr 2025 15:10:31 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E9=A1=B5=E9=9D=A2=E6=8F=90?=
 =?UTF-8?q?=E7=A4=BA=E4=BF=A1=E6=81=AF=EF=BC=8C=E5=A2=9E=E5=8A=A0=E5=85=B3?=
 =?UTF-8?q?=E4=BA=8E=E9=80=89=E6=8B=A9=E9=A2=9C=E8=89=B2=E5=92=8C=E6=A9=A1?=
 =?UTF-8?q?=E7=9A=AE=E6=93=A6=E7=9A=84=E6=93=8D=E4=BD=9C=E6=8C=87=E5=AF=BC?=
 =?UTF-8?q?=EF=BC=8C=E4=BC=98=E5=8C=96=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C?=
 =?UTF-8?q?=E3=80=82=E5=90=8C=E6=97=B6=EF=BC=8C=E7=A7=BB=E9=99=A4=E7=94=BB?=
 =?UTF-8?q?=E5=B8=83=E6=9C=80=E5=A4=A7=E9=AB=98=E5=BA=A6=E9=99=90=E5=88=B6?=
 =?UTF-8?q?=EF=BC=8C=E6=8F=90=E5=8D=87=E7=94=BB=E5=B8=83=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E6=95=88=E6=9E=9C=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/page.tsx                          | 26 +++++++++++++++++++++--
 src/components/PixelatedPreviewCanvas.tsx |  1 -
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 2b85fa4..0a5fc27 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1172,8 +1172,30 @@ export default function Home() {
                   </button>
                   {/* Color Palette (only in manual mode) */}
                   <div className="mt-4">
-                    <p className="text-xs text-center text-gray-600 mb-2">选择颜色或橡皮擦后，点击下方画布格子进行填充或擦除。</p>
-                    <p className="text-xs text-center text-gray-600 mb-2">（推荐使用电脑进行上色操作）</p>
+                    <div className="flex justify-center mb-3">
+                      <div className="bg-blue-50 border border-blue-100 rounded-lg p-2 flex flex-col sm:flex-row items-start sm:items-center gap-2 sm:gap-3 text-xs text-gray-600 w-full sm:w-auto">
+                        <div className="flex items-center gap-1 w-full sm:w-auto">
+                          <svg xmlns="http://www.w3.org/2000/svg" className="h-3.5 w-3.5 text-blue-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
+                          </svg>
+                          <span>选择颜色/橡皮擦，点击画布格子上色</span>
+                        </div>
+                        <span className="hidden sm:inline text-gray-300">|</span>
+                        <div className="flex items-center gap-1 w-full sm:w-auto">
+                          <svg xmlns="http://www.w3.org/2000/svg" className="h-3.5 w-3.5 text-blue-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                          </svg>
+                          <span>为避免误触，推荐使用电脑</span>
+                        </div>
+                        <span className="hidden sm:inline text-gray-300">|</span>
+                        <div className="flex items-center gap-1 w-full sm:w-auto">
+                          <svg xmlns="http://www.w3.org/2000/svg" className="h-3.5 w-3.5 text-blue-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                          </svg>
+                          <span>Ctrl/Cmd+滚轮缩放</span>
+                        </div>
+                      </div>
+                    </div>
                     <ColorPalette
                       colors={[transparentColorData, ...currentGridColors]}
                       selectedColor={selectedColor}
diff --git a/src/components/PixelatedPreviewCanvas.tsx b/src/components/PixelatedPreviewCanvas.tsx
index d7cc4d1..00e660b 100644
--- a/src/components/PixelatedPreviewCanvas.tsx
+++ b/src/components/PixelatedPreviewCanvas.tsx
@@ -174,7 +174,6 @@ const PixelatedPreviewCanvas: React.FC<PixelatedPreviewCanvasProps> = ({
         isManualColoringMode ? 'cursor-pointer' : 'cursor-crosshair'
       }`}
       style={{ 
-        maxHeight: '60vh', 
         imageRendering: 'pixelated', 
         touchAction: 'none' // 防止触摸时页面滚动
       }}