Implement LED test effects with proper cleanup

- Add LED test effects page with multiple test patterns (solid colors, rainbow, breathing, flowing)
- Implement Rust backend for LED test effects with proper task management
- Add automatic cleanup when navigating away from test page using onCleanup hook
- Ensure test mode is properly disabled to resume normal ambient lighting
- Clean up debug logging for production readiness
- Fix menu navigation issues by using SolidJS router components

Features:
- Multiple test patterns: solid colors, rainbow cycle, breathing effect, flowing lights
- Configurable animation speed
- Automatic cleanup prevents LED conflicts with ambient lighting
- Responsive UI with proper error handling

src/App.tsx

@@ -1,7 +1,8 @@
-import { Routes, Route } from '@solidjs/router';
+import { Routes, Route, useLocation, A } from '@solidjs/router';
 import { LedStripConfiguration } from './components/led-strip-configuration/led-strip-configuration';
 import { WhiteBalance } from './components/white-balance/white-balance';
-import { createEffect } from 'solid-js';
+import { LedStripTest } from './components/led-strip-test/led-strip-test';
+import { createEffect, createSignal } from 'solid-js';
 import { invoke } from '@tauri-apps/api/core';
 import { setLedStripStore } from './stores/led-strip.store';
 import { LedStripConfigContainer } from './models/led-strip-config';
@@ -9,6 +10,29 @@ import { InfoIndex } from './components/info/info-index';
 import { DisplayStateIndex } from './components/displays/display-state-index';
 
 function App() {
+  const location = useLocation();
+  const [previousPath, setPreviousPath] = createSignal<string>('');
+
+  // Monitor route changes and cleanup LED tests when leaving the test page
+  createEffect(() => {
+    const currentPath = location.pathname;
+    const prevPath = previousPath();
+
+    // Check if we're leaving the LED test page
+    const isLeavingTestPage = prevPath === '/led-strip-test' && currentPath !== '/led-strip-test';
+
+    if (isLeavingTestPage) {
+      // The LED test component will handle stopping the test effect via onCleanup
+      // We just need to ensure test mode is disabled to resume normal LED publishing
+      invoke('disable_test_mode').catch((error) => {
+        console.error('Failed to disable test mode:', error);
+      });
+    }
+
+    // Update previousPath after the condition check
+    setPreviousPath(currentPath);
+  });
+
   createEffect(() => {
     invoke<LedStripConfigContainer>('read_config').then((config) => {
       setLedStripStore({
@@ -33,20 +57,22 @@ function App() {
               </svg>
             </div>
             <ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
-              <li><a href="/info" class="text-base-content">基本信息</a></li>
-              <li><a href="/displays" class="text-base-content">显示器信息</a></li>
-              <li><a href="/led-strips-configuration" class="text-base-content">灯条配置</a></li>
-              <li><a href="/white-balance" class="text-base-content">白平衡</a></li>
+              <li><A href="/info" class="text-base-content">基本信息</A></li>
+              <li><A href="/displays" class="text-base-content">显示器信息</A></li>
+              <li><A href="/led-strips-configuration" class="text-base-content">灯条配置</A></li>
+              <li><A href="/white-balance" class="text-base-content">白平衡</A></li>
+              <li><A href="/led-strip-test" class="text-base-content">灯带测试</A></li>
             </ul>
           </div>
           <a class="btn btn-ghost text-xl text-primary font-bold">环境光控制</a>
         </div>
         <div class="navbar-center hidden lg:flex">
           <ul class="menu menu-horizontal px-1">
-            <li><a href="/info" class="btn btn-ghost text-base-content hover:text-primary">基本信息</a></li>
-            <li><a href="/displays" class="btn btn-ghost text-base-content hover:text-primary">显示器信息</a></li>
-            <li><a href="/led-strips-configuration" class="btn btn-ghost text-base-content hover:text-primary">灯条配置</a></li>
-            <li><a href="/white-balance" class="btn btn-ghost text-base-content hover:text-primary">白平衡</a></li>
+            <li><A href="/info" class="btn btn-ghost text-base-content hover:text-primary">基本信息</A></li>
+            <li><A href="/displays" class="btn btn-ghost text-base-content hover:text-primary">显示器信息</A></li>
+            <li><A href="/led-strips-configuration" class="btn btn-ghost text-base-content hover:text-primary">灯条配置</A></li>
+            <li><A href="/white-balance" class="btn btn-ghost text-base-content hover:text-primary">白平衡</A></li>
+            <li><A href="/led-strip-test" class="btn btn-ghost text-base-content hover:text-primary">灯带测试</A></li>
           </ul>
         </div>
         <div class="navbar-end">
@@ -61,6 +87,7 @@ function App() {
           <Route path="/displays" component={DisplayStateIndex} />
           <Route path="/led-strips-configuration" component={LedStripConfiguration} />
           <Route path="/white-balance" component={WhiteBalance} />
+          <Route path="/led-strip-test" element={<LedStripTest />} />
         </Routes>
       </main>
     </div>