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

---
 src/app/globals.css     |   1 +
 src/app/studio/page.tsx | 102 +++++++++++++++++++++++++---------------
 2 files changed, 65 insertions(+), 38 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index a9e3e45..24736a9 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -115,3 +115,4 @@ input[type="range"]:hover::-webkit-slider-thumb {
 input[type="range"]:hover::-moz-range-thumb {
   transform: scale(1.1);
 }
+
diff --git a/src/app/studio/page.tsx b/src/app/studio/page.tsx
index 00d0977..6e6fae8 100644
--- a/src/app/studio/page.tsx
+++ b/src/app/studio/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { useRouter } from 'next/navigation';
 import { 
   MappedPixel, 
@@ -130,6 +130,7 @@ export default function FocusMode() {
   const [clickedCellColor, setClickedCellColor] = useState<{ hex: string; key: string } | null>(null);
   const [showColorSystemPanel, setShowColorSystemPanel] = useState(false);
   const [customPalette, setCustomPalette] = useState<Set<string>>(new Set(getAllHexValues()));
+  const clickedColorTimerRef = useRef<NodeJS.Timeout | null>(null);
   
   // 编辑模式状态
   const [editTool, setEditTool] = useState<'select' | 'wand'>('select');
@@ -436,12 +437,22 @@ export default function FocusMode() {
       const colorKey = getColorKeyByHex(cellColor, selectedColorSystem);
       setClickedCellColor({ hex: cellColor, key: colorKey });
       
+      // 清除之前的定时器
+      if (clickedColorTimerRef.current) {
+        clearTimeout(clickedColorTimerRef.current);
+      }
+      
       // 3秒后自动消失
-      setTimeout(() => {
+      clickedColorTimerRef.current = setTimeout(() => {
         setClickedCellColor(null);
+        clickedColorTimerRef.current = null;
       }, 3000);
     } else {
       setClickedCellColor(null);
+      if (clickedColorTimerRef.current) {
+        clearTimeout(clickedColorTimerRef.current);
+        clickedColorTimerRef.current = null;
+      }
     }
     
     // 专心模式：标记区域
@@ -1115,37 +1126,48 @@ export default function FocusMode() {
   return (
     <div className="h-screen flex flex-col bg-gray-50">
       {/* 顶部导航栏 - 移动端优化 */}
-      <header className="bg-white shadow-sm border-b border-gray-200 px-3 py-2 flex items-center justify-between">
-        <button 
-          onClick={() => window.history.back()}
-          className="p-2 -ml-2 text-gray-600 active:bg-gray-100 rounded-lg"
-        >
-          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-          </svg>
-        </button>
-        
-        {/* Logo 位置预留 */}
-        <div className="flex-1 flex items-center justify-center">
-          {/* TODO: 添加 Logo */}
+      <header className="bg-white shadow-sm border-b border-gray-200 px-3 py-2 relative">
+        <div className="flex items-center w-full">
+          {/* 左侧按钮组 */}
+          <div className="flex items-center gap-2">
+            <button 
+              onClick={() => window.history.back()}
+              className="p-2 -ml-2 text-gray-600 active:bg-gray-100 rounded-lg"
+            >
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+              </svg>
+            </button>
+            
+            {/* 色板系统选择 - 精致小巧 */}
+            <button
+              onClick={() => setShowColorSystemPanel(true)}
+              className="px-2 py-1 text-xs font-medium text-gray-600 bg-gray-100/60 hover:bg-gray-100 rounded-md transition-all duration-200"
+            >
+              {selectedColorSystem}
+            </button>
+          </div>
+          
+          {/* 右侧按钮 */}
+          <div className="ml-auto">
+            <button 
+              onClick={() => setFocusState(prev => ({ ...prev, showSettingsPanel: true }))}
+              className="p-2 -mr-2 text-gray-600 active:bg-gray-100 rounded-lg"
+            >
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
+              </svg>
+            </button>
+          </div>
         </div>
         
-        {/* 色板系统选择 */}
-        <button
-          onClick={() => setShowColorSystemPanel(true)}
-          className="text-sm text-blue-600 hover:text-blue-700 font-medium mr-2"
-        >
-          {selectedColorSystem} ▼
-        </button>
-        
-        <button 
-          onClick={() => setFocusState(prev => ({ ...prev, showSettingsPanel: true }))}
-          className="p-2 -mr-2 text-gray-600 active:bg-gray-100 rounded-lg"
-        >
-          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
-          </svg>
-        </button>
+        {/* 绝对居中的标题 */}
+        <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+          <h1 className="text-sm font-medium text-gray-800">
+            <span className="bg-gradient-to-r from-pink-500 to-purple-500 bg-clip-text text-transparent">七卡瓦</span>
+            <span className="text-gray-600 mx-1">拼豆底稿生成器</span>
+          </h1>
+        </div>
       </header>
       
       {/* 状态信息栏 - 显示颜色数量和像素尺寸 */}
@@ -1155,18 +1177,22 @@ export default function FocusMode() {
           <span className="mx-3 text-gray-400">|</span>
           <span className="font-medium">{mappedPixelData ? `${mappedPixelData[0]?.length || 0}×${mappedPixelData.length}` : '0×0'}</span>
         </div>
-        {/* 点击格子的颜色信息 */}
-        {clickedCellColor && (
-          <div className="flex items-center gap-2 px-3 py-1 bg-gray-100 rounded-lg">
+        {/* 点击格子的颜色信息 - 始终渲染容器以避免布局跳变 */}
+        <div className="relative h-7 min-w-[80px]">
+          <div 
+            className={`absolute right-0 top-1/2 -translate-y-1/2 flex items-center gap-2 px-3 py-1 bg-gray-100/80 backdrop-blur-sm rounded-full transition-all duration-300 ${
+              clickedCellColor ? 'opacity-100 scale-100' : 'opacity-0 scale-95 pointer-events-none'
+            }`}
+          >
             <div 
-              className="w-5 h-5 rounded border border-gray-300"
-              style={{ backgroundColor: clickedCellColor.hex }}
+              className="w-4 h-4 rounded-full border border-gray-300/50 shadow-sm"
+              style={{ backgroundColor: clickedCellColor?.hex || 'transparent' }}
             />
             <span className="text-sm font-medium text-gray-700">
-              {clickedCellColor.key}
+              {clickedCellColor?.key || ''}
             </span>
           </div>
-        )}
+        </div>
       </div>
 
       {/* 当前颜色状态栏 - 仅在专心模式显示 */}