feat: 完善项目。

- 后端代码结构调整；
- 所有屏幕截屏；
- 前端增加 tailwind；
- 前端 style lint。

src/App.tsx

@@ -1,29 +1,33 @@
-import { useState } from "react";
-import reactLogo from "./assets/react.svg";
-import { invoke } from "@tauri-apps/api/tauri";
-import "./App.css";
+import { useCallback, useState } from 'react';
+import reactLogo from './assets/react.svg';
+import { invoke } from '@tauri-apps/api/tauri';
+import './App.css';
 
 function App() {
-  const [greetMsg, setGreetMsg] = useState("");
-  const [name, setName] = useState("");
+  const [greetMsg, setGreetMsg] = useState('');
+  const [name, setName] = useState('');
   const [screenshots, setScreenshots] = useState<string[]>([]);
 
   async function greet() {
     // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
-    setGreetMsg(await invoke("greet", { name }));
+    setGreetMsg(await invoke('greet', { name }));
   }
 
   async function takeSnapshot() {
-    const base64Text = await invoke("take_snapshot");
-    
-    setScreenshots([`data:image/webp;base64,${base64Text}`]);
+    const base64TextList: string[] = await invoke('take_snapshot');
+
+    setScreenshots(base64TextList.map((text) => `data:image/webp;base64,${text}`));
   }
 
+  const refreshDisplays = useCallback(async () => {
+    await invoke('refresh_displays');
+  }, []);
+
   return (
     <div className="container">
       <h1>Welcome to Tauri!</h1>
 
-      <div className="row">
+      <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>
@@ -35,23 +39,31 @@ function App() {
         </a>
       </div>
 
-      <div className='row'>
-        <img src={screenshots[0]} />
+      <div className="flex gap-1 justify-center w-screen overflow-hidden">
+        {screenshots.map((screenshot) => (
+          <div className="flex-auto">
+            <img src={screenshot} />
+          </div>
+        ))}
       </div>
 
       <p>Click on the Tauri, Vite, and React logos to learn more.</p>
 
-      <div className="row">
-        <div>
-          <input
-            id="greet-input"
-            onChange={(e) => setName(e.currentTarget.value)}
-            placeholder="Enter a name..."
-          />
-          <button type="button" onClick={() => takeSnapshot()}>
-            Take Snapshot
-          </button>
-        </div>
+      <div className="flex gap-5 justify-center ">
+        <button
+          className="bg-black bg-opacity-20"
+          type="button"
+          onClick={() => refreshDisplays()}
+        >
+          Refresh Displays
+        </button>
+        <button
+          className="bg-black bg-opacity-20"
+          type="button"
+          onClick={() => takeSnapshot()}
+        >
+          Take Snapshot
+        </button>
       </div>
       <p>{greetMsg}</p>
     </div>