feat: WIP 界面调整。

src/App.tsx

@@ -1,8 +1,9 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import reactLogo from './assets/react.svg';
 import { invoke } from '@tauri-apps/api/tauri';
 import './App.css';
 import clsx from 'clsx';
+import { Configurator } from './configurator/configurator';
 
 type Mode = 'Flowing' | 'Follow' | null;
 
@@ -17,10 +18,6 @@ function App() {
     setScreenshots(base64TextList.map((text) => `data:image/webp;base64,${text}`));
   }
 
-  const refreshDisplays = useCallback(async () => {
-    await invoke('refresh_displays');
-  }, []);
-
   const getLedStripColors = useCallback(async () => {
     setLedStripColors(await invoke('get_led_strip_colors'));
   }, []);
@@ -60,7 +57,7 @@ function App() {
         <button
           className="bg-black bg-opacity-20"
           type="button"
-          onClick={() => refreshDisplays()}
+          onClick={() => readPickerConfig()}
         >
           Refresh Displays
         </button>
@@ -99,9 +96,7 @@ function App() {
       </div>
 
       <div className="flex gap-5 justify-center">
-        <img src="/vite.svg" className="logo vite" alt="Vite logo" />
-        <img src="/tauri.svg" className="logo tauri" alt="Tauri logo" />
-        <img src={reactLogo} className="logo react" alt="React logo" />
+        <Configurator />
       </div>
     </div>
   );

src/configurator/components/display-with-led-strips.tsx

@@ -0,0 +1,25 @@
+import { HTMLAttributes } from 'react';
+import { FC } from 'react';
+import { DisplayConfig } from '../models/display-config';
+import { LedStrip } from './led-strip';
+
+export interface DisplayWithLedStripsProps extends HTMLAttributes<HTMLElement> {
+  config: DisplayConfig;
+  screenshot: string;
+}
+
+export const DisplayWithLedStrips: FC<DisplayWithLedStripsProps> = ({
+  config,
+  screenshot,
+  ...htmlAttrs
+}) => {
+  return (
+    <section className="m-4 grid grid-rows-3 grid-cols-3 gr" {...htmlAttrs}>
+      <img src={screenshot} className="row-start-2 col-start-2" />
+      <LedStrip config={config.top_led_strip} className="row-start-1 col-start-2 h-1" />
+      <LedStrip config={config.left_led_strip} className="row-start-2 col-start-1 w-1" />
+      <LedStrip config={config.right_led_strip} className="row-start-2 col-start-3" />
+      <LedStrip config={config.bottom_led_strip} className="row-start-3 col-start-2" />
+    </section>
+  );
+};

src/configurator/components/led-strip.tsx

@@ -0,0 +1,11 @@
+import { HTMLAttributes } from 'react';
+import { FC } from 'react';
+import { LedStripConfig } from '../models/led-strip-config';
+
+export interface LedStripProps extends HTMLAttributes<HTMLElement> {
+  config: LedStripConfig;
+}
+
+export const LedStrip: FC<LedStripProps> = ({ config, ...htmlAttrs }) => {
+  return <section {...htmlAttrs}>...</section>;
+};

src/configurator/configurator.tsx

@@ -0,0 +1,46 @@
+import { invoke } from '@tauri-apps/api';
+import { FC, useMemo } from 'react';
+import { useAsync } from 'react-async-hook';
+import { DisplayWithLedStrips } from './components/display-with-led-strips';
+import { PickerConfiguration } from './models/picker-configuration';
+
+const getPickerConfig = () => invoke<PickerConfiguration>('get_picker_config');
+const getScreenshotOfDisplays = () =>
+  invoke<string[]>('take_snapshot').then((items) =>
+    items?.map((it) => `data:image/webp;base64,${it}`),
+  );
+
+export const Configurator: FC = () => {
+  const { loading: pendingPickerConfig, result: pickerConfig } = useAsync(
+    getPickerConfig,
+    [],
+  );
+
+  const { loading: pendingScreenshotOfDisplays, result: screenshotOfDisplays } = useAsync(
+    getScreenshotOfDisplays,
+    [],
+  );
+
+  const displays = useMemo(() => {
+    if (pickerConfig && screenshotOfDisplays) {
+      return screenshotOfDisplays.map((screenshot, index) => (
+        <DisplayWithLedStrips
+          key={index}
+          config={pickerConfig.display_configs[index] ?? {}}
+          screenshot={screenshot}
+        />
+      ));
+    }
+  }, [pickerConfig, screenshotOfDisplays]);
+
+  if (pendingPickerConfig || pendingScreenshotOfDisplays) {
+    return (
+      <section>
+        等待 {JSON.stringify({ pendingPickerConfig, pendingScreenshotOfDisplays })}
+        {displays}
+      </section>
+    );
+  }
+
+  return <section>{displays}</section>;
+};

src/configurator/models/display-config.ts

@@ -0,0 +1,11 @@
+import { LedStripConfig } from './led-strip-config';
+
+export class DisplayConfig {
+  index_of_display!: number;
+  display_width!: number;
+  display_height!: number;
+  top_led_strip!: LedStripConfig;
+  bottom_led_strip!: LedStripConfig;
+  left_led_strip!: LedStripConfig;
+  right_led_strip!: LedStripConfig;
+}

src/configurator/models/led-strip-config.ts

@@ -0,0 +1,5 @@
+export class LedStripConfig {
+  index!: number;
+  global_start_position!: number;
+  global_end_position!: number;
+}

src/configurator/models/picker-configuration.ts

@@ -0,0 +1,6 @@
+import { DisplayConfig } from './display-config';
+
+export class PickerConfiguration {
+  config_version!: number;
+  display_configs!: DisplayConfig[];
+}