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

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">
-      <dt class="uppercase w-1/3">{props.label}</dt>
-      <dd>{props.children}</dd>
+    <dl class="px-3 py-1 flex hover:bg-gray-100/50 gap-2 text-black rounded">
+      <dt class="uppercase w-1/2 select-all">{props.label}</dt>
+      <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} />;
 };