feat: 前端显示 mdns 搜索到的板子连接信息。
This commit is contained in:
@ -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>
|
||||
|
52
src/components/info/board-index.tsx
Normal file
52
src/components/info/board-index.tsx
Normal file
@ -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>
|
||||
);
|
||||
};
|
10
src/components/info/info-index.tsx
Normal file
10
src/components/info/info-index.tsx
Normal file
@ -0,0 +1,10 @@
|
||||
import { Component } from 'solid-js';
|
||||
import { BoardIndex } from './board-index';
|
||||
|
||||
export const InfoIndex: Component = () => {
|
||||
return (
|
||||
<div>
|
||||
<BoardIndex />
|
||||
</div>
|
||||
);
|
||||
};
|
5
src/models/board-info.model.ts
Normal file
5
src/models/board-info.model.ts
Normal file
@ -0,0 +1,5 @@
|
||||
export type BoardInfo = {
|
||||
name: string;
|
||||
address: string;
|
||||
port: number;
|
||||
};
|
Reference in New Issue
Block a user