feat(ui): 界面样式调整。

src/App.css

@@ -1,7 +0,0 @@
-.logo.vite:hover {
-  filter: drop-shadow(0 0 2em #747bff);
-}
-
-.logo.solid:hover {
-  filter: drop-shadow(0 0 2em #2f5d90);
-}

src/App.tsx

@@ -1,12 +1,9 @@
 import { createEffect, createSignal } from "solid-js";
-import { invoke } from "@tauri-apps/api/tauri";
+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 { DisplayView } from './components/\u0016display-view';
-import { ScreenView } from './components/screen-view';
 
 function App() {
-  const [screenshots, setScreenshots] = createSignal<string[]>([]);
   const [displays, setDisplays] = createSignal<DisplayInfo[]>([]);
 
   createEffect(() => {
@@ -15,32 +12,11 @@ function App() {
     });
   });
 
-  // createEffect(() => {
-  //   take_all_display_screenshot();
-  // }, [displays]);
-
-  async function take_all_display_screenshot() {
-    console.log('take_all_display_screenshot');
-    displays().forEach((display) => {
-      invoke<string>('take_screenshot', {
-        displayId: display.id,
-        scaleFactor: display.scale_factor,
-      }).then((image) => {
-        setScreenshots((screenshots) => [...screenshots, image]);
-      });
-    });
-  }
-
   return (
     <div class="container">
       <ol>
         {displays().map((display) => {
-          return (
+          return <DisplayView display={display} />;
-            <li>
-              <DisplayInfoPanel display={display} />
-              <ScreenView displayId={display.id} />
-            </li>
-          );
         })}
       </ol>
     </div>

src/components/display-view.tsx

@@ -0,0 +1,20 @@
+import { Component } from 'solid-js';
+import { DisplayInfo } from '../models/display-info.model';
+import { DisplayInfoPanel } from './display-info-panel';
+import { ScreenView } from './screen-view';
+
+type DisplayViewProps = {
+  display: DisplayInfo;
+};
+
+export const DisplayView: Component<DisplayViewProps> = (props) => {
+  return (
+    <section class="relative">
+      <ScreenView displayId={props.display.id} />
+      <DisplayInfoPanel
+        display={props.display}
+        class="absolute bg-slate-50/10 top-1/4 left-1/4 rounded backdrop-blur w-1/3 min-w-fit text-black"
+      />
+    </section>
+  );
+};

src/components/display-info-panel.tsx

@@ -1,4 +1,4 @@
-import { Component, ParentComponent } from 'solid-js';
+import { Component, JSX, ParentComponent, splitProps } from 'solid-js';
 import { DisplayInfo } from '../models/display-info.model';
 
 type DisplayInfoItemProps = {
@@ -7,32 +7,35 @@ type DisplayInfoItemProps = {
 
 export const DisplayInfoItem: ParentComponent<DisplayInfoItemProps> = (props) => {
   return (
-    <dl class="m-1 flex hover:bg-gray-100 gap-2 text-gray-700">
+    <dl class="px-3 py-1 flex hover:bg-gray-100/50 gap-2 text-black rounded">
-      <dt class="uppercase w-1/3">{props.label}</dt>
+      <dt class="uppercase w-1/2 select-all">{props.label}</dt>
-      <dd>{props.children}</dd>
+      <dd class="select-all">{props.children}</dd>
     </dl>
   );
 };
 
 type DisplayInfoPanelProps = {
   display: DisplayInfo;
-};
+} & JSX.HTMLAttributes<HTMLElement>;
 
 export const DisplayInfoPanel: Component<DisplayInfoPanelProps> = (props) => {
+  const [localProps, rootProps] = splitProps(props, ['display']);
   return (
-    <section class="m-2">
+    <section {...rootProps} class={'m-2 flex flex-col gap-1 py-2 ' + rootProps.class}>
       <DisplayInfoItem label="ID">
-        <code>{props.display.id}</code>
+        <code>{localProps.display.id}</code>
       </DisplayInfoItem>
       <DisplayInfoItem label="Position">
-        ({props.display.x}, {props.display.y})
+        ({localProps.display.x}, {localProps.display.y})
       </DisplayInfoItem>
       <DisplayInfoItem label="Size">
-        {props.display.width} x {props.display.height}
+        {localProps.display.width} x {localProps.display.height}
+      </DisplayInfoItem>
+      <DisplayInfoItem label="Scale Factor">
+        {localProps.display.scale_factor}
       </DisplayInfoItem>
-      <DisplayInfoItem label="Scale Factor">{props.display.scale_factor}</DisplayInfoItem>
       <DisplayInfoItem label="is Primary">
-        {props.display.is_primary ? 'True' : 'False'}
+        {localProps.display.is_primary ? 'True' : 'False'}
       </DisplayInfoItem>
     </section>
   );

src/components/screen-view.tsx

@@ -1,10 +1,17 @@
 import { invoke } from '@tauri-apps/api';
 import { listen } from '@tauri-apps/api/event';
-import { Component, createEffect, createSignal, onCleanup } from 'solid-js';
+import {
+  Component,
+  createEffect,
+  createSignal,
+  JSX,
+  onCleanup,
+  splitProps,
+} from 'solid-js';
 
 type ScreenViewProps = {
   displayId: number;
-};
+} & JSX.HTMLAttributes<HTMLImageElement>;
 
 async function subscribeScreenshotUpdate(displayId: number) {
   await invoke('subscribe_encoded_screenshot_updated', {
@@ -13,19 +20,20 @@ async function subscribeScreenshotUpdate(displayId: number) {
 }
 
 export const ScreenView: Component<ScreenViewProps> = (props) => {
+  const [localProps, rootProps] = splitProps(props, ['displayId']);
   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) {
+        if (event.payload.display_id === localProps.displayId) {
           setImage(event.payload.base64_image);
         }
 
-        console.log(event.payload.display_id, props.displayId);
+        console.log(event.payload.display_id, localProps.displayId);
       },
     );
-    subscribeScreenshotUpdate(props.displayId);
+    subscribeScreenshotUpdate(localProps.displayId);
 
     onCleanup(() => {
       unlisten.then((unlisten) => {
@@ -34,5 +42,5 @@ export const ScreenView: Component<ScreenViewProps> = (props) => {
     });
   });
 
-  return <img src={image()} class="object-contain" />;
+  return <img src={image()} class="object-contain" {...rootProps} />;
 };