优化专心模式和颜色系统面板，直接从localStorage读取自定义色板数据，更新颜色状态显示逻辑，提升用户体验。

src/app/studio/page.tsx

@@ -214,9 +214,11 @@ export default function FocusMode() {
         const aspectRatio = img.height / img.width;
         const M = Math.round(N * aspectRatio); // M是纵向（高度），按比例计算
 
-        // 根据自定义色板构建可用颜色
-        const activeBeadPalette: PaletteColor[] = Array.from(customPalette)
-          .map(hex => {
+        // 根据自定义色板构建可用颜色 - 直接从localStorage读取最新数据
+        const savedPalette = localStorage.getItem('customPalette');
+        const paletteData = savedPalette ? JSON.parse(savedPalette) : Array.from(getAllHexValues());
+        const activeBeadPalette: PaletteColor[] = paletteData
+          .map((hex: string) => {
             const rgb = hexToRgb(hex);
             if (!rgb) return null;
             return { key: hex, hex, rgb };

src/components/ColorSystemPanel.tsx

@@ -279,9 +279,13 @@ const ColorSystemPanel: React.FC<ColorSystemPanelProps> = ({
                     <span className="font-medium text-gray-700">{groupKey}</span>
                     <div className="flex items-center gap-2 text-sm text-gray-500 ml-auto">
                       <span>{selectedInGroup}/{groupColors.length}</span>
-                      {selectedInGroup > 0 && (
-                        <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
-                      )}
+                      <div className={`w-2 h-2 rounded-full ${
+                        selectedInGroup === 0 
+                          ? 'bg-red-500' 
+                          : selectedInGroup === groupColors.length 
+                            ? 'bg-green-500' 
+                            : 'bg-orange-500'
+                      }`}></div>
                     </div>
                   </button>