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

---
 src/app/page.tsx | 40 ++++++++++++++++++++--------------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 43fab00..8125d76 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1134,10 +1134,10 @@ export default function Home() {
           <div className="w-full flex flex-col items-center space-y-5 sm:space-y-6">
             {/* ++ HIDE Control Row in manual mode ++ */}
             {!isManualColoringMode && (
-              <div className="w-full max-w-2xl grid grid-cols-1 sm:grid-cols-4 gap-4 bg-white p-3 sm:p-4 rounded-lg shadow">
+              <div className="w-full max-w-2xl grid grid-cols-1 sm:grid-cols-4 gap-4 bg-white p-4 sm:p-5 rounded-xl shadow-md border border-gray-100">
                 {/* Granularity Input */}
                 <div className="flex-1">
-                  <label htmlFor="granularityInput" className="block text-xs sm:text-sm font-medium text-gray-700 mb-1 sm:mb-1.5">
+                  <label htmlFor="granularityInput" className="block text-xs sm:text-sm font-medium text-gray-700 mb-1.5 sm:mb-2">
                     横轴格子 (10-300):
                   </label>
                   <div className="flex items-center gap-2">
@@ -1146,20 +1146,20 @@ export default function Home() {
                       id="granularityInput"
                       value={granularityInput}
                       onChange={handleGranularityInputChange}
-                      className="w-full p-1.5 border border-gray-300 rounded-md text-sm focus:ring-blue-500 focus:border-blue-500 h-9"
+                      className="w-full p-1.5 border border-gray-300 rounded-md text-sm focus:ring-blue-500 focus:border-blue-500 h-9 shadow-sm"
                       min="10"
                       max="300"
                     />
                     <button 
                       onClick={handleConfirmGranularity}
-                      className="h-9 bg-blue-500 hover:bg-blue-600 text-white text-sm px-2 rounded-md whitespace-nowrap"
+                      className="h-9 bg-blue-500 hover:bg-blue-600 text-white text-sm px-2.5 rounded-md whitespace-nowrap transition-colors duration-200 shadow-sm"
                     >确认</button>
                   </div>
                 </div>
 
                 {/* Similarity Threshold Slider */}
                 <div className="flex-1">
-                    <label htmlFor="similarityThreshold" className="block text-xs sm:text-sm font-medium text-gray-700 mb-1 sm:mb-1.5">
+                    <label htmlFor="similarityThreshold" className="block text-xs sm:text-sm font-medium text-gray-700 mb-1.5 sm:mb-2">
                         区域颜色合并: <span className="font-semibold text-purple-600">{similarityThreshold}</span>
                     </label>
                     <input
@@ -1169,7 +1169,7 @@ export default function Home() {
                       max="100"
                       value={similarityThreshold}
                       onChange={handleSimilarityChange}
-                      className="w-full h-9"
+                      className="w-full h-9 accent-purple-600"
                     />
                     <div className="flex justify-between text-xs text-gray-500 -mt-1">
                       <span>少</span>
@@ -1179,12 +1179,12 @@ export default function Home() {
 
                 {/* Palette Selector */}
                 <div className="flex-1">
-                  <label htmlFor="paletteSelect" className="block text-xs sm:text-sm font-medium text-gray-700 mb-1 sm:mb-1.5">选择色板:</label>
+                  <label htmlFor="paletteSelect" className="block text-xs sm:text-sm font-medium text-gray-700 mb-1.5 sm:mb-2">选择色板:</label>
                   <select
                     id="paletteSelect"
                     value={selectedPaletteKeySet}
                     onChange={handlePaletteChange}
-                    className="w-full p-1.5 border border-gray-300 rounded-md text-sm focus:ring-blue-500 focus:border-blue-500 h-9"
+                    className="w-full p-1.5 border border-gray-300 rounded-md text-sm focus:ring-blue-500 focus:border-blue-500 h-9 shadow-sm"
                   >
                     {(Object.keys(paletteOptions) as PaletteOptionKey[]).map(key => (
                       <option key={key} value={key}>{paletteOptions[key].name}</option>
@@ -1194,12 +1194,12 @@ export default function Home() {
 
                 {/* 添加像素化模式选择 */}
                 <div className="flex-1">
-                  <label htmlFor="pixelationModeSelect" className="block text-xs sm:text-sm font-medium text-gray-700 mb-1 sm:mb-1.5">处理模式:</label>
+                  <label htmlFor="pixelationModeSelect" className="block text-xs sm:text-sm font-medium text-gray-700 mb-1.5 sm:mb-2">处理模式:</label>
                   <select
                     id="pixelationModeSelect"
                     value={pixelationMode}
                     onChange={handlePixelationModeChange}
-                    className="w-full p-1.5 border border-gray-300 rounded-md text-sm focus:ring-blue-500 focus:border-blue-500 h-9"
+                    className="w-full p-1.5 border border-gray-300 rounded-md text-sm focus:ring-blue-500 focus:border-blue-500 h-9 shadow-sm"
                   >
                     <option value={PixelationMode.Dominant}>卡通 (主色)</option>
                     <option value={PixelationMode.Average}>真实 (平均)</option>
@@ -1214,7 +1214,7 @@ export default function Home() {
 
               {/* ++ RENDER Button/Palette ONLY in manual mode above canvas ++ */}
               {isManualColoringMode && mappedPixelData && gridDimensions && (
-                <div className="w-full mb-4 p-3 bg-blue-50 rounded-lg shadow-sm">
+                <div className="w-full mb-4 p-4 bg-blue-50 rounded-xl shadow-md border border-blue-100">
                   {/* Finish Manual Coloring Button */}
                   <button
                     onClick={() => {
@@ -1222,13 +1222,13 @@ export default function Home() {
                       setSelectedColor(null);
                       setTooltipData(null);
                     }}
-                    className={`w-full py-2 px-4 text-sm sm:text-base rounded-md transition-colors flex items-center justify-center gap-2 bg-red-500 hover:bg-red-600 text-white`}
+                    className={`w-full py-2.5 px-4 text-sm sm:text-base rounded-lg transition-all duration-200 flex items-center justify-center gap-2 bg-red-500 hover:bg-red-600 text-white shadow-sm hover:shadow-md`}
                   >
                     <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}> <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" /> </svg>
                     完成手动上色
                   </button>
                   {/* Color Palette (only in manual mode) */}
-                  <div className="mt-3">
+                  <div className="mt-4">
                     <p className="text-xs text-center text-gray-600 mb-2">选择颜色或橡皮擦后，点击下方画布格子进行填充或擦除:</p>
                     <ColorPalette
                       colors={[transparentColorData, ...currentGridColors]}
@@ -1241,8 +1241,8 @@ export default function Home() {
               )} {/* ++ End of RENDER Button/Palette ++ */}
 
               {/* Canvas Preview Container */}
-              <div className="bg-white p-3 sm:p-4 rounded-lg shadow">
-                <div className="flex justify-center mb-3 sm:mb-4 bg-gray-100 p-2 rounded overflow-hidden"
+              <div className="bg-white p-4 rounded-xl shadow-md border border-gray-100">
+                <div className="flex justify-center mb-3 sm:mb-4 bg-gray-100 p-2 rounded-lg overflow-hidden"
                      style={{ minHeight: '150px' }}>
                   <PixelatedPreviewCanvas
                     canvasRef={pixelatedCanvasRef}
@@ -1339,7 +1339,7 @@ export default function Home() {
                   setSelectedColor(null);
                   setTooltipData(null);
                 }}
-                className={`w-full py-2 px-4 text-sm sm:text-base rounded-md transition-colors flex items-center justify-center gap-2 bg-blue-500 hover:bg-blue-600 text-white`}
+                className={`w-full py-2.5 px-4 text-sm sm:text-base rounded-lg transition-all duration-300 flex items-center justify-center gap-2 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white shadow-md hover:shadow-lg hover:translate-y-[-1px]`}
               >
                  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" /> </svg>
                  进入手动上色模式
@@ -1354,7 +1354,7 @@ export default function Home() {
               <button
                 onClick={handleDownloadImage}
                 disabled={!mappedPixelData || !gridDimensions || gridDimensions.N === 0 || gridDimensions.M === 0 || activeBeadPalette.length === 0}
-                className="flex-1 py-2 px-4 bg-green-600 text-white text-sm sm:text-base rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
+                className="flex-1 py-2.5 px-4 bg-gradient-to-r from-green-500 to-green-600 text-white text-sm sm:text-base rounded-lg hover:from-green-600 hover:to-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-all duration-300 flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed shadow-md hover:shadow-lg hover:translate-y-[-1px] disabled:hover:translate-y-0 disabled:hover:shadow-md"
                >
                 <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
                 下载图纸 (带色号)
@@ -1363,7 +1363,7 @@ export default function Home() {
               <button
                 onClick={handleDownloadStatsImage}
                 disabled={!colorCounts || totalBeadCount === 0 || activeBeadPalette.length === 0}
-                className="flex-1 py-2 px-4 bg-purple-600 text-white text-sm sm:text-base rounded-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transition-colors flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
+                className="flex-1 py-2.5 px-4 bg-gradient-to-r from-purple-500 to-purple-600 text-white text-sm sm:text-base rounded-lg hover:from-purple-600 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transition-all duration-300 flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed shadow-md hover:shadow-lg hover:translate-y-[-1px] disabled:hover:translate-y-0 disabled:hover:shadow-md"
               >
                 <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
                 下载数量表 (PNG)
@@ -1427,10 +1427,10 @@ export default function Home() {
               
               <div className="text-center">
                 <p className="mb-4 text-gray-600">
-                  开源项目就是纯粹的为爱发电项目，作者会在工作之余尽力维护，如果您希望这个项目更好，可以让我看到
+                  开源项目就是纯粹的为爱发电项目，作者会在工作之余尽力维护，如果您希望这个项目更好，可以给我点杯奶茶。
                 </p>
                 <p className="mb-6 text-gray-600">
-                  每一份都支持是这个项目继续维护的动力。
+                  你的支持是这个项目继续维护的动力。
                 </p>
                 
                 <div className="flex justify-center mb-5">