feat(gui): 增强显示屏预览效果。

src/components/display-view.tsx

@@ -16,18 +16,29 @@ export const DisplayView: Component<DisplayViewProps> = (props) => {
   const style = createMemo(() => ({
     top: `${props.display.y * displayStore.viewScale}px`,
     left: `${props.display.x * displayStore.viewScale}px`,
+    height: `${size().height}px`,
+    width: `${size().width}px`,
   }));
   return (
-    <section class="absolute bg-gray-300" style={style()}>
+    <section
+      class="absolute bg-gray-300 grid grid-cols-[16px,auto,16px] grid-rows-[16px,auto,16px] overflow-hidden"
+      style={style()}
+    >
       <ScreenView
+        class="row-start-2 col-start-2"
         displayId={props.display.id}
-        height={size().height}
-        width={size().width}
+        style={{
+          'object-fit': 'contain',
+        }}
       />
       <DisplayInfoPanel
         display={props.display}
         class="absolute bg-slate-50/10 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded backdrop-blur w-1/3 min-w-[300px] text-black"
       />
+      <div class="row-start-1 col-start-2">Test</div>
+      <div class="row-start-2 col-start-1">Test</div>
+      <div class="row-start-2 col-start-3">Test</div>
+      <div class="row-start-3 col-start-2">Test</div>
     </section>
   );
 };