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>