feat: 截图线程 + 编码线程。

每个显示器分别使用一个截图线程和一个编码（png+base64）线程。避免程序不明原因崩溃。

src/App.tsx

@@ -3,6 +3,7 @@ import { invoke } from "@tauri-apps/api/tauri";
 import "./App.css";
 import { DisplayInfo } from './models/display-info.model';
 import { DisplayInfoPanel } from './components/display-info-panel';
+import { ScreenView } from './components/screen-view';
 
 function App() {
   const [screenshots, setScreenshots] = createSignal<string[]>([]);
@@ -14,9 +15,9 @@ function App() {
     });
   });
 
-  createEffect(() => {
-    take_all_display_screenshot();
-  }, [displays]);
+  // createEffect(() => {
+  //   take_all_display_screenshot();
+  // }, [displays]);
 
   async function take_all_display_screenshot() {
     console.log('take_all_display_screenshot');
@@ -37,18 +38,7 @@ function App() {
           return (
             <li>
               <DisplayInfoPanel display={display} />
-            </li>
-          );
-        })}
-      </ol>
-      <ol>
-        {screenshots().map((screenshot) => {
-          return (
-            <li>
-              <img
-                style="object-fit: contain; height: 400px; width: 600px"
-                src={screenshot}
-              />
+              <ScreenView displayId={display.id} />
             </li>
           );
         })}

src/components/screen-view.tsx

@@ -0,0 +1,38 @@
+import { invoke } from '@tauri-apps/api';
+import { listen } from '@tauri-apps/api/event';
+import { Component, createEffect, createSignal, onCleanup } from 'solid-js';
+
+type ScreenViewProps = {
+  displayId: number;
+};
+
+async function subscribeScreenshotUpdate(displayId: number) {
+  await invoke('subscribe_encoded_screenshot_updated', {
+    displayId,
+  });
+}
+
+export const ScreenView: Component<ScreenViewProps> = (props) => {
+  const [image, setImage] = createSignal<string>();
+  createEffect(() => {
+    const unlisten = listen<{ base64_image: string; display_id: number }>(
+      'encoded-screenshot-updated',
+      (event) => {
+        if (event.payload.display_id === props.displayId) {
+          setImage(event.payload.base64_image);
+        }
+
+        console.log(event.payload.display_id, props.displayId);
+      },
+    );
+    subscribeScreenshotUpdate(props.displayId);
+
+    onCleanup(() => {
+      unlisten.then((unlisten) => {
+        unlisten();
+      });
+    });
+  });
+
+  return <img src={image()} class="object-contain" />;
+};