优化状态管理，移除未使用的色号系统状态，调整依赖项以提升代码可读性和性能。

src/app/focus/page.tsx

@@ -61,7 +61,6 @@ export default function FocusMode() {
   // 从localStorage或URL参数获取像素数据
   const [mappedPixelData, setMappedPixelData] = useState<MappedPixel[][] | null>(null);
   const [gridDimensions, setGridDimensions] = useState<{ N: number; M: number } | null>(null);
-  const [selectedColorSystem, setSelectedColorSystem] = useState<ColorSystem>('MARD');
 
   // 专心模式状态
   const [focusState, setFocusState] = useState<FocusModeState>({
@@ -137,13 +136,10 @@ export default function FocusMode() {
         setMappedPixelData(pixelData);
         setGridDimensions(dimensions);
         
-        // 设置色号系统
-        if (savedColorSystem) {
-          setSelectedColorSystem(savedColorSystem as ColorSystem);
-        }
+        // 设置色号系统 - 已移除未使用的状态
 
         // 计算颜色进度
-        const colors = Object.entries(colorCounts).map(([colorKey, colorData]) => {
+        const colors = Object.entries(colorCounts).map(([, colorData]) => {
           const data = colorData as { color: string; count: number };
           // 通过hex值获取对应色号系统的色号
           const displayKey = getColorKeyByHex(data.color, savedColorSystem as ColorSystem || 'MARD');
@@ -346,7 +342,7 @@ export default function FocusMode() {
         return color;
       }));
     }
-  }, [mappedPixelData, focusState.currentColor, focusState.completedCells, focusState.colorProgress]);
+  }, [mappedPixelData, focusState.currentColor, focusState.completedCells, focusState.colorProgress, focusState.enableCelebration]);
 
   // 处理颜色切换
   const handleColorChange = useCallback((color: string) => {

src/components/CelebrationAnimation.tsx

@@ -26,13 +26,13 @@ const CelebrationAnimation: React.FC<CelebrationAnimationProps> = ({
   const [particles, setParticles] = useState<Particle[]>([]);
   const [confetti, setConfetti] = useState<Particle[]>([]);
 
-  // emoji和彩带选项
-  const celebrationEmojis = ['🎉', '🎊', '✨', '🌟', '💫', '🎈', '🎁', '🏆'];
-  const confettiColors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57', '#ff9ff3', '#54a0ff'];
-
   useEffect(() => {
     if (!isVisible) return;
 
+    // emoji和彩带选项
+    const celebrationEmojis = ['🎉', '🎊', '✨', '🌟', '💫', '🎈', '🎁', '🏆'];
+    const confettiColors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57', '#ff9ff3', '#54a0ff'];
+
     // 创建emoji粒子
     const newParticles: Particle[] = [];
     for (let i = 0; i < 20; i++) {

src/components/CompletionCard.tsx

@@ -305,7 +305,7 @@ const CompletionCard: React.FC<CompletionCardProps> = ({
       };
       userImg.src = userPhoto;
     });
-  }, [userPhoto, totalElapsedTime, generateThumbnail]);
+  }, [userPhoto, totalElapsedTime, generateThumbnail, totalBeads]);
 
   // 下载打卡图
   const downloadCard = async () => {
@@ -393,6 +393,7 @@ const CompletionCard: React.FC<CompletionCardProps> = ({
             </div>
           ) : (
             <div className="text-center">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
               <img
                 src={userPhoto}
                 alt="用户照片"

src/components/FocusCanvas.tsx

@@ -73,7 +73,6 @@ const FocusCanvas: React.FC<FocusCanvasProps> = ({
 
         // 确定格子颜色
         let fillColor = pixel.color;
-        let isGrayedOut = false;
 
         // 如果不是当前颜色，显示为灰度
         if (pixel.color !== currentColor) {
@@ -84,7 +83,6 @@ const FocusCanvas: React.FC<FocusCanvasProps> = ({
           const b = parseInt(hex.substr(4, 2), 16);
           const gray = Math.round(0.299 * r + 0.587 * g + 0.114 * b);
           fillColor = `rgb(${gray}, ${gray}, ${gray})`;
-          isGrayedOut = true;
         }
 
         // 绘制格子背景
@@ -159,7 +157,7 @@ const FocusCanvas: React.FC<FocusCanvasProps> = ({
   }, [mappedPixelData, gridDimensions, cellSize, currentColor, completedCells, recommendedCell, recommendedRegion, gridSectionInterval, showSectionLines, sectionLineColor]);
 
   // 处理触摸/鼠标事件
-  const getEventPosition = (event: React.MouseEvent | React.TouchEvent) => {
+  const getEventPosition = useCallback((event: React.MouseEvent | React.TouchEvent) => {
     const canvas = canvasRef.current;
     if (!canvas) return null;
 
@@ -179,9 +177,9 @@ const FocusCanvas: React.FC<FocusCanvasProps> = ({
       x: (clientX - rect.left) / canvasScale,
       y: (clientY - rect.top) / canvasScale
     };
-  };
+  }, [canvasScale]);
 
-  const getGridPosition = (x: number, y: number) => {
+  const getGridPosition = useCallback((x: number, y: number) => {
     const col = Math.floor(x / cellSize);
     const row = Math.floor(y / cellSize);
     
@@ -189,7 +187,7 @@ const FocusCanvas: React.FC<FocusCanvasProps> = ({
       return { row, col };
     }
     return null;
-  };
+  }, [cellSize, gridDimensions]);
 
   // 计算两指间距离
   const getTouchDistance = (touches: React.TouchList) => {
@@ -212,7 +210,7 @@ const FocusCanvas: React.FC<FocusCanvasProps> = ({
     if (gridPos) {
       onCellClick(gridPos.row, gridPos.col);
     }
-  }, [onCellClick, canvasScale, cellSize, gridDimensions]);
+  }, [onCellClick, getEventPosition, getGridPosition]);
 
   // 处理缩放
   const handleWheel = useCallback((event: React.WheelEvent) => {