feat(gui): 全局的灯条颜色预览。

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

@@ -2,9 +2,7 @@ import { Component, createContext, createEffect, createSignal, For } from 'solid
 import { LedStripConfig, LedStripPixelMapper } from '../models/led-strip-config';
 import { ledStripStore } from '../stores/led-strip.store';
 
-const SorterItem: Component<{ mapper: LedStripPixelMapper; strip: LedStripConfig }> = (
-  props,
-) => {
+const SorterItem: Component<{ mapper: LedStripPixelMapper }> = (props) => {
   const [fullLeds, setFullLeds] = createSignal<string[]>([]);
 
   createEffect(() => {
@@ -39,16 +37,52 @@ const SorterItem: Component<{ mapper: LedStripPixelMapper; strip: LedStripConfig
   );
 };
 
-export const LedStripPartsSorter: Component = () => {
-  const context = createContext();
+const SorterResult: Component = () => {
+  const [fullLeds, setFullLeds] = createSignal<string[]>([]);
+
+  createEffect(() => {
+    const strips = ledStripStore.strips;
+    const totalLedCount = strips.reduce((acc, strip) => acc + strip.len, 0);
+    const fullLeds = new Array(totalLedCount).fill('rgba(255,255,255,0.5)');
+
+    ledStripStore.mappers.forEach((mapper) => {
+      for (let i = mapper.start, j = 0; i < mapper.end; i++, j++) {
+        fullLeds[i] = `rgb(${ledStripStore.colors[i * 3]}, ${
+          ledStripStore.colors[i * 3 + 1]
+        }, ${ledStripStore.colors[i * 3 + 2]})`;
+      }
+    });
+    setFullLeds(fullLeds);
+  });
 
   return (
-    <div>
-      <For each={ledStripStore.strips}>
-        {(strip, index) => (
-          <SorterItem strip={strip} mapper={ledStripStore.mappers[index()]} />
+    <div class="flex h-2 m-2">
+      <For each={fullLeds()}>
+        {(it) => (
+          <div
+            class="flex-auto flex h-full w-full justify-center items-center relative"
+            title={it}
+          >
+            <div
+              class="absolute top-1/2 -translate-y-1/2 h-2.5 w-2.5 rounded-full ring-1 ring-stone-300"
+              style={{ background: it }}
+            />
+          </div>
         )}
       </For>
     </div>
   );
 };
+
+export const LedStripPartsSorter: Component = () => {
+  const context = createContext();
+
+  return (
+    <div>
+      <SorterResult />
+      <For each={ledStripStore.strips}>
+        {(strip, index) => <SorterItem mapper={ledStripStore.mappers[index()]} />}
+      </For>
+    </div>
+  );
+};