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

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>
   );