feat: 生成 LED 灯条颜色。

src/App.tsx

@@ -7,6 +7,7 @@ function App() {
   const [greetMsg, setGreetMsg] = useState('');
   const [name, setName] = useState('');
   const [screenshots, setScreenshots] = useState<string[]>([]);
+  const [ledStripColors, setLedStripColors] = useState<string[]>([]);
 
   async function greet() {
     // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
@@ -23,20 +24,16 @@ function App() {
     await invoke('refresh_displays');
   }, []);
 
-  return (
-    <div className="container">
-      <h1>Welcome to Tauri!</h1>
+  const getLedStripColors = useCallback(async () => {
+    setLedStripColors(await invoke('get_led_strip_colors'));
+  }, []);
 
-      <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>
+  return (
+    <div>
+      <div className="flex justify-between h-1">
+        {ledStripColors.map((it) => (
+          <span className="h-1 flex-auto" style={{ backgroundColor: it }}></span>
+        ))}
       </div>
 
       <div className="flex gap-1 justify-center w-screen overflow-hidden">
@@ -47,8 +44,6 @@ function App() {
         ))}
       </div>
 
-      <p>Click on the Tauri, Vite, and React logos to learn more.</p>
-
       <div className="flex gap-5 justify-center ">
         <button
           className="bg-black bg-opacity-20"
@@ -64,8 +59,26 @@ function App() {
         >
           Take Snapshot
         </button>
+        <button
+          className="bg-black bg-opacity-20"
+          type="button"
+          onClick={() => getLedStripColors()}
+        >
+          Get Colors
+        </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>
       </div>
-      <p>{greetMsg}</p>
     </div>
   );
 }