feat: 测试灯效，流光溢彩

src/App.tsx

@@ -2,12 +2,14 @@ import { useCallback, useState } from 'react';
 import reactLogo from './assets/react.svg';
 import { invoke } from '@tauri-apps/api/tauri';
 import './App.css';
+import clsx from 'clsx';
 
 function App() {
   const [greetMsg, setGreetMsg] = useState('');
   const [name, setName] = useState('');
   const [screenshots, setScreenshots] = useState<string[]>([]);
   const [ledStripColors, setLedStripColors] = useState<string[]>([]);
+  const [flowingLightMode, setFlowingLightMode] = useState<boolean>(false);
 
   async function greet() {
     // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
@@ -28,6 +30,17 @@ function App() {
     setLedStripColors(await invoke('get_led_strip_colors'));
   }, []);
 
+  const switchFlowingLightMode = useCallback(async () => {
+    console.log('A', flowingLightMode);
+    if (flowingLightMode) {
+      await invoke('stop_flowing_light');
+    } else {
+      invoke('play_flowing_light');
+    }
+    console.log('B', flowingLightMode);
+    setFlowingLightMode(!flowingLightMode);
+  }, [flowingLightMode]);
+
   return (
     <div>
       <div className="flex justify-between">
@@ -66,18 +79,21 @@ function App() {
         >
           Get Colors
         </button>
+        <button
+          className={clsx('bg-black', 'bg-opacity-20', {
+            'bg-gradient-to-r from-purple-500 to-blue-500': flowingLightMode,
+          })}
+          type="button"
+          onClick={() => switchFlowingLightMode()}
+        >
+          Flowing Light
+        </button>
       </div>
 
       <div className="flex gap-5 justify-center">
-        <a href="https://vitejs.dev" target="_blank">
-          <img src="/vite.svg" className="logo vite" alt="Vite logo" />
-        </a>
-        <a href="https://tauri.app" target="_blank">
-          <img src="/tauri.svg" className="logo tauri" alt="Tauri logo" />
-        </a>
-        <a href="https://reactjs.org" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
+        <img src="/vite.svg" className="logo vite" alt="Vite logo" />
+        <img src="/tauri.svg" className="logo tauri" alt="Tauri logo" />
+        <img src={reactLogo} className="logo react" alt="React logo" />
       </div>
     </div>
   );