feat: 前端显示 mdns 搜索到的板子连接信息。

src/App.tsx

@@ -5,6 +5,7 @@ import { createEffect } from 'solid-js';
 import { invoke } from '@tauri-apps/api';
 import { setLedStripStore } from './stores/led-strip.store';
 import { LedStripConfigContainer } from './models/led-strip-config';
+import { InfoIndex } from './components/info/info-index';
 
 function App() {
   createEffect(() => {
@@ -21,10 +22,12 @@ function App() {
   return (
     <div>
       <div>
+        <a href="/info">基本信息</a>
         <a href="/led-strips-configuration">灯条配置</a>
         <a href="/white-balance">白平衡</a>
       </div>
       <Routes>
+        <Route path="/info" component={InfoIndex} />
         <Route path="/led-strips-configuration" component={LedStripConfiguration} />
         <Route path="/white-balance" component={WhiteBalance} />
       </Routes>

src/components/info/board-index.tsx

@@ -0,0 +1,52 @@
+import { Component, For, createEffect, createSignal } from 'solid-js';
+import { BoardInfo } from '../../models/board-info.model';
+import { listen } from '@tauri-apps/api/event';
+import debug from 'debug';
+import { invoke } from '@tauri-apps/api';
+
+const logger = debug('app:components:info:board-index');
+
+export const BoardIndex: Component = () => {
+  const [boards, setBoards] = createSignal<BoardInfo[]>([]);
+
+  createEffect(() => {
+    const unlisten = listen<BoardInfo[]>('boards_changed', (ev) => {
+      logger('boards_changed', ev);
+      setBoards(ev.payload);
+    });
+
+    invoke<BoardInfo[]>('get_boards').then((boards) => {
+      logger('get_boards', boards);
+      setBoards(boards);
+    });
+
+    return () => {
+      unlisten.then((unlisten) => unlisten());
+    };
+  });
+  return (
+    <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>
+            <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>
+          </li>
+        )}
+      </For>
+    </ol>
+  );
+};

src/components/info/info-index.tsx

@@ -0,0 +1,10 @@
+import { Component } from 'solid-js';
+import { BoardIndex } from './board-index';
+
+export const InfoIndex: Component = () => {
+  return (
+    <div>
+      <BoardIndex />
+    </div>
+  );
+};

src/models/board-info.model.ts

@@ -0,0 +1,5 @@
+export type BoardInfo = {
+  name: string;
+  address: string;
+  port: number;
+};