feat: 支持获取和查看板子连接的情况。

src/components/info/board-index.tsx

@@ -3,6 +3,7 @@ import { BoardInfo } from '../../models/board-info.model';
 import { listen } from '@tauri-apps/api/event';
 import debug from 'debug';
 import { invoke } from '@tauri-apps/api';
+import { BoardInfoPanel } from './board-info-panel';
 
 const logger = debug('app:components:info:board-index');
 
@@ -28,19 +29,8 @@ export const BoardIndex: Component = () => {
     <ol class="grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 p-2 gap-2">
       <For each={boards()}>
         {(board, index) => (
-          <li class="p-2 rounded shadow bg-slate-50 text-gray-800 relative border-2 border-slate-50 hover:border-sky-300 focus:border-sky-300 transition">
-            <dl class="flex">
-              <dt class="w-20">host</dt>
-              <dd class="flex-auto">{board.name}</dd>
-            </dl>
-            <dl class="flex">
-              <dt class="w-20">Ip Addr</dt>
-              <dd class="flex-auto font-mono">{board.address}</dd>
-            </dl>
-            <dl class="flex">
-              <dt class="w-20">Port</dt>
-              <dd class="flex-auto font-mono">{board.port}</dd>
-            </dl>
+          <li class="bg-slate-50 text-gray-800 relative border-2 border-slate-50 hover:border-sky-300 focus:border-sky-300 transition">
+            <BoardInfoPanel board={board} />
             <span class="absolute left-2 -top-3 bg-sky-300 text-white px-1 py-0.5 text-xs rounded-sm font-mono">
               #{index() + 1}
             </span>

src/components/info/board-info-panel.tsx

@@ -0,0 +1,49 @@
+import { Component, ParentComponent, createMemo } from 'solid-js';
+import { BoardInfo } from '../../models/board-info.model';
+
+type ItemProps = {
+  label: string;
+};
+
+const Item: ParentComponent<ItemProps> = (props) => {
+  return (
+    <dl class="flex">
+      <dt class="w-20">{props.label}</dt>
+      <dd class="flex-auto">{props.children}</dd>
+    </dl>
+  );
+};
+
+export const BoardInfoPanel: Component<{ board: BoardInfo }> = (props) => {
+  const ttl = createMemo(() => {
+    if (!props.board.is_online) {
+      return '--';
+    }
+
+    if (props.board.ttl == null) {
+      return 'timeout';
+    }
+
+    return (
+      <>
+        <span class="font-mono">{props.board.ttl.toFixed(0)}</span> ms
+      </>
+    );
+  });
+
+  return (
+    <section class="p-2 rounded shadow">
+      <Item label="Host">{props.board.host}</Item>
+      <Item label="Ip Addr">
+        <span class="font-mono">{props.board.address}</span>
+      </Item>
+      <Item label="Port">
+        <span class="font-mono">{props.board.port}</span>
+      </Item>
+      <Item label="Status">
+        <span class="font-mono">{props.board.is_online ? 'Online' : 'Offline'}</span>
+      </Item>
+      <Item label="TTL">{ttl()}</Item>
+    </section>
+  );
+};

src/models/board-info.model.ts

@@ -1,5 +1,8 @@
 export type BoardInfo = {
-  name: string;
+  host: string;
   address: string;
   port: number;
+  ttl: number;
+  is_online: boolean;
+  checked_at: Date;
 };