feat: 支持列出显示器。

src/App.tsx

@@ -6,6 +6,7 @@ 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';
+import { DisplayStateIndex } from './components/displays/display-state-index';
 
 function App() {
   createEffect(() => {
@@ -23,11 +24,13 @@ function App() {
     <div>
       <div>
         <a href="/info">基本信息</a>
+        <a href="/displays">显示器信息</a>
         <a href="/led-strips-configuration">灯条配置</a>
         <a href="/white-balance">白平衡</a>
       </div>
       <Routes>
         <Route path="/info" component={InfoIndex} />
+        <Route path="/displays" component={DisplayStateIndex} />
         <Route path="/led-strips-configuration" component={LedStripConfiguration} />
         <Route path="/white-balance" component={WhiteBalance} />
       </Routes>

src/components/displays/display-state-card.tsx

@@ -0,0 +1,36 @@
+import { Component, ParentComponent } from 'solid-js';
+import { DisplayState } from '../../models/display-state.model';
+
+type DisplayStateCardProps = {
+  state: DisplayState;
+};
+
+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 DisplayStateCard: Component<DisplayStateCardProps> = (props) => {
+  return (
+    <section class="p-2 rounded shadow">
+      <Item label="Brightness">{props.state.brightness}</Item>
+      <Item label="Max Brightness">{props.state.max_brightness}</Item>
+      <Item label="Min Brightness">{props.state.min_brightness}</Item>
+      <Item label="Contrast">{props.state.contrast}</Item>
+      <Item label="Max Contrast">{props.state.max_contrast}</Item>
+      <Item label="Min Contrast">{props.state.min_contrast}</Item>
+      <Item label="Max Mode">{props.state.max_mode}</Item>
+      <Item label="Min Mode">{props.state.min_mode}</Item>
+      <Item label="Mode">{props.state.mode}</Item>
+      <Item label="Last Modified At">{props.state.last_modified_at.toISOString()}</Item>
+    </section>
+  );
+};

src/components/displays/display-state-index.tsx

@@ -0,0 +1,52 @@
+import { Component, For, createEffect, createSignal } from 'solid-js';
+import { listen } from '@tauri-apps/api/event';
+import debug from 'debug';
+import { invoke } from '@tauri-apps/api';
+import { DisplayState, RawDisplayState } from '../../models/display-state.model';
+import { DisplayStateCard } from './display-state-card';
+
+const logger = debug('app:components:displays:display-state-index');
+
+export const DisplayStateIndex: Component = () => {
+  const [states, setStates] = createSignal<DisplayState[]>([]);
+
+  createEffect(() => {
+    const unlisten = listen<RawDisplayState[]>('displays_changed', (ev) => {
+      logger('displays_changed', ev);
+      setStates(
+        ev.payload.map((it) => ({
+          ...it,
+          last_modified_at: new Date(it.last_modified_at.secs_since_epoch * 1000),
+        })),
+      );
+    });
+
+    invoke<RawDisplayState[]>('get_displays').then((states) => {
+      logger('get_displays', states);
+      setStates(
+        states.map((it) => ({
+          ...it,
+          last_modified_at: new Date(it.last_modified_at.secs_since_epoch * 1000),
+        })),
+      );
+    });
+
+    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={states()}>
+        {(state, index) => (
+          <li class="bg-slate-50 text-gray-800 relative border-2 border-slate-50 hover:border-sky-300 focus:border-sky-300 transition">
+            <DisplayStateCard state={state} />
+            <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/models/display-state.model.ts

@@ -0,0 +1,16 @@
+export type DisplayState = {
+  brightness: number;
+  max_brightness: number;
+  min_brightness: number;
+  contrast: number;
+  max_contrast: number;
+  min_contrast: number;
+  mode: number;
+  max_mode: number;
+  min_mode: number;
+  last_modified_at: Date;
+};
+
+export type RawDisplayState = DisplayState & {
+  last_modified_at: { secs_since_epoch: number };
+};