chore: GUI 增加路由。

src/App.tsx

@@ -1,104 +1,17 @@
-import { createEffect, onCleanup } from 'solid-js';
-import { invoke } from '@tauri-apps/api/tauri';
-import { DisplayView } from './components/display-view';
-import { DisplayListContainer } from './components/display-list-container';
-import { displayStore, setDisplayStore } from './stores/display.store';
-import { LedStripConfigContainer } from './models/led-strip-config';
-import { setLedStripStore } from './stores/led-strip.store';
-import { listen } from '@tauri-apps/api/event';
-import { LedStripPartsSorter } from './components/led-strip-parts-sorter';
-import { createStore } from 'solid-js/store';
-import {
-  LedStripConfigurationContext,
-  LedStripConfigurationContextType,
-} from './contexts/led-strip-configuration.context';
+import { Routes, Route } from '@solidjs/router';
+import { LedStripConfiguration } from './components/led-strip-configuration/led-strip-configuration';
 
 function App() {
-  createEffect(() => {
-    invoke<string>('list_display_info').then((displays) => {
-      setDisplayStore({
-        displays: JSON.parse(displays),
-      });
-    });
-    invoke<LedStripConfigContainer>('read_led_strip_configs').then((configs) => {
-      console.log(configs);
-      setLedStripStore(configs);
-    });
-  });
-
-  // listen to config_changed event
-  createEffect(() => {
-    const unlisten = listen('config_changed', (event) => {
-      const { strips, mappers } = event.payload as LedStripConfigContainer;
-      console.log(event.payload);
-      setLedStripStore({
-        strips,
-        mappers,
-      });
-    });
-
-    onCleanup(() => {
-      unlisten.then((unlisten) => unlisten());
-    });
-  });
-
-  // listen to led_colors_changed event
-  createEffect(() => {
-    const unlisten = listen<Uint8ClampedArray>('led_colors_changed', (event) => {
-      const colors = event.payload;
-
-      setLedStripStore({
-        colors,
-      });
-    });
-
-    onCleanup(() => {
-      unlisten.then((unlisten) => unlisten());
-    });
-  });
-
-  // listen to led_sorted_colors_changed event
-  createEffect(() => {
-    const unlisten = listen<Uint8ClampedArray>('led_sorted_colors_changed', (event) => {
-      const sortedColors = event.payload;
-
-      setLedStripStore({
-        sortedColors,
-      });
-    });
-
-    onCleanup(() => {
-      unlisten.then((unlisten) => unlisten());
-    });
-  });
-
-  const [ledStripConfiguration, setLedStripConfiguration] = createStore<
-    LedStripConfigurationContextType[0]
-  >({
-    selectedStripPart: null,
-  });
-
-  const ledStripConfigurationContextValue: LedStripConfigurationContextType = [
-    ledStripConfiguration,
-    {
-      setSelectedStripPart: (v) => {
-        setLedStripConfiguration({
-          selectedStripPart: v,
-        });
-      },
-    },
-  ];
-
   return (
     <div>
-      <LedStripConfigurationContext.Provider value={ledStripConfigurationContextValue}>
-        <LedStripPartsSorter />
-        <DisplayListContainer>
-          {displayStore.displays.map((display) => {
-            return <DisplayView display={display} />;
-          })}
-        </DisplayListContainer>
-      </LedStripConfigurationContext.Provider>
+      <div>
+        <a href="/led-strips-configuration">灯条配置</a>
+        <a href="/white-balance">白平衡</a>
+      </div>
+      <Routes>
+        <Route path="/led-strips-configuration" component={LedStripConfiguration} />
+        <Route path="/white-balance" component={LedStripConfiguration} />
+      </Routes>
     </div>
   );
 }

src/components/led-strip-configuration/display-info-panel.tsx

@@ -1,5 +1,5 @@
 import { Component, JSX, ParentComponent, splitProps } from 'solid-js';
-import { DisplayInfo } from '../models/display-info.model';
+import { DisplayInfo } from '../../models/display-info.model';
 
 type DisplayInfoItemProps = {
   label: string;

src/components/led-strip-configuration/display-list-container.tsx

@@ -6,8 +6,8 @@ import {
   onMount,
   ParentComponent,
 } from 'solid-js';
-import { displayStore, setDisplayStore } from '../stores/display.store';
-import background from '../assets/transparent-grid-background.svg?url';
+import { displayStore, setDisplayStore } from '../../stores/display.store';
+import background from '../../assets/transparent-grid-background.svg?url';
 
 export const DisplayListContainer: ParentComponent = (props) => {
   let root: HTMLElement;

src/components/led-strip-configuration/display-view.tsx

@@ -1,7 +1,7 @@
 import { Component, createMemo } from 'solid-js';
-import { DisplayInfo } from '../models/display-info.model';
-import { displayStore } from '../stores/display.store';
-import { ledStripStore } from '../stores/led-strip.store';
+import { DisplayInfo } from '../../models/display-info.model';
+import { displayStore } from '../../stores/display.store';
+import { ledStripStore } from '../../stores/led-strip.store';
 import { DisplayInfoPanel } from './display-info-panel';
 import { LedStripPart } from './led-strip-part';
 import { ScreenView } from './screen-view';

src/components/led-strip-configuration/led-strip-configuration.tsx

@@ -0,0 +1,106 @@
+import { createEffect, onCleanup } from 'solid-js';
+import { invoke } from '@tauri-apps/api/tauri';
+import { DisplayView } from './display-view';
+import { DisplayListContainer } from './display-list-container';
+import { displayStore, setDisplayStore } from '../../stores/display.store';
+import { LedStripConfigContainer } from '../../models/led-strip-config';
+import { setLedStripStore } from '../../stores/led-strip.store';
+import { listen } from '@tauri-apps/api/event';
+import { LedStripPartsSorter } from './led-strip-parts-sorter';
+import { createStore } from 'solid-js/store';
+import {
+  LedStripConfigurationContext,
+  LedStripConfigurationContextType,
+} from '../../contexts/led-strip-configuration.context';
+
+export const LedStripConfiguration = () => {
+  createEffect(() => {
+    invoke<string>('list_display_info').then((displays) => {
+      setDisplayStore({
+        displays: JSON.parse(displays),
+      });
+    });
+    invoke<LedStripConfigContainer>('read_led_strip_configs').then((configs) => {
+      console.log(configs);
+      setLedStripStore(configs);
+    });
+  });
+
+  // listen to config_changed event
+  createEffect(() => {
+    const unlisten = listen('config_changed', (event) => {
+      const { strips, mappers } = event.payload as LedStripConfigContainer;
+      console.log(event.payload);
+      setLedStripStore({
+        strips,
+        mappers,
+      });
+    });
+
+    onCleanup(() => {
+      unlisten.then((unlisten) => unlisten());
+    });
+  });
+
+  // listen to led_colors_changed event
+  createEffect(() => {
+    const unlisten = listen<Uint8ClampedArray>('led_colors_changed', (event) => {
+      if (!window.document.hidden) {
+        const colors = event.payload;
+        setLedStripStore({
+          colors,
+        });
+      }
+    });
+
+    onCleanup(() => {
+      unlisten.then((unlisten) => unlisten());
+    });
+  });
+
+  // listen to led_sorted_colors_changed event
+  createEffect(() => {
+    const unlisten = listen<Uint8ClampedArray>('led_sorted_colors_changed', (event) => {
+      if (!window.document.hidden) {
+        const sortedColors = event.payload;
+        setLedStripStore({
+          sortedColors,
+        });
+      }
+    });
+
+    onCleanup(() => {
+      unlisten.then((unlisten) => unlisten());
+    });
+  });
+
+  const [ledStripConfiguration, setLedStripConfiguration] = createStore<
+    LedStripConfigurationContextType[0]
+  >({
+    selectedStripPart: null,
+  });
+
+  const ledStripConfigurationContextValue: LedStripConfigurationContextType = [
+    ledStripConfiguration,
+    {
+      setSelectedStripPart: (v) => {
+        setLedStripConfiguration({
+          selectedStripPart: v,
+        });
+      },
+    },
+  ];
+
+  return (
+    <div>
+      <LedStripConfigurationContext.Provider value={ledStripConfigurationContextValue}>
+        <LedStripPartsSorter />
+        <DisplayListContainer>
+          {displayStore.displays.map((display) => {
+            return <DisplayView display={display} />;
+          })}
+        </DisplayListContainer>
+      </LedStripConfigurationContext.Provider>
+    </div>
+  );
+};

src/components/led-strip-configuration/led-strip-part.tsx

@@ -12,9 +12,9 @@ import {
 } from 'solid-js';
 import { useTippy } from 'solid-tippy';
 import { followCursor } from 'tippy.js';
-import { LedStripConfig } from '../models/led-strip-config';
-import { LedStripConfigurationContext } from '../contexts/led-strip-configuration.context';
-import { ledStripStore } from '../stores/led-strip.store';
+import { LedStripConfig } from '../../models/led-strip-config';
+import { LedStripConfigurationContext } from '../../contexts/led-strip-configuration.context';
+import { ledStripStore } from '../../stores/led-strip.store';
 
 type LedStripPartProps = {
   config?: LedStripConfig | null;

src/components/led-strip-configuration/led-strip-parts-sorter.tsx

@@ -14,11 +14,11 @@ import {
   untrack,
   useContext,
 } from 'solid-js';
-import { LedStripConfig, LedStripPixelMapper } from '../models/led-strip-config';
-import { ledStripStore } from '../stores/led-strip.store';
+import { LedStripConfig, LedStripPixelMapper } from '../../models/led-strip-config';
+import { ledStripStore } from '../../stores/led-strip.store';
 import { invoke } from '@tauri-apps/api';
-import { LedStripConfigurationContext } from '../contexts/led-strip-configuration.context';
-import background from '../assets/transparent-grid-background.svg?url';
+import { LedStripConfigurationContext } from '../../contexts/led-strip-configuration.context';
+import background from '../../assets/transparent-grid-background.svg?url';
 
 const SorterItem: Component<{ strip: LedStripConfig; mapper: LedStripPixelMapper }> = (
   props,

src/index.tsx

@@ -3,5 +3,13 @@ import { render } from "solid-js/web";
 
 import "./styles.css";
 import App from "./App";
+import { Router } from '@solidjs/router';
 
-render(() => <App />, document.getElementById("root") as HTMLElement);
+render(
+  () => (
+    <Router>
+      <App />
+    </Router>
+  ),
+  document.getElementById('root') as HTMLElement,
+);