feat: Add Daisy-UI and optimize LED strip configuration UI

- Install and configure Tailwind CSS 4.1 with Daisy-UI plugin
- Redesign main navigation with responsive navbar and dark theme
- Optimize LED strip configuration layout with modern card components
- Improve screen preview performance with frame-based rendering
- Reduce LED pixel size for better visual appearance
- Remove excessive debug logging for better performance
- Fix Tailwind CSS ESM compatibility issues with dynamic imports

src/components/info/board-index.tsx

@@ -26,17 +26,37 @@ export const BoardIndex: Component = () => {
     };
   });
   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="bg-slate-50 text-gray-800 relative border-2 border-slate-50 hover:border-sky-300 focus:border-sky-300 transition">
-            <BoardInfoPanel board={board} />
-            <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>
+    <div class="space-y-6">
+      <div class="flex items-center justify-between">
+        <h1 class="text-2xl font-bold text-base-content">设备信息</h1>
+        <div class="stats shadow">
+          <div class="stat">
+            <div class="stat-title">设备总数</div>
+            <div class="stat-value text-primary">{boards().length}</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        <For each={boards()}>
+          {(board, index) => (
+            <div class="relative">
+              <BoardInfoPanel board={board} />
+              <div class="absolute -top-2 -left-2 w-6 h-6 bg-primary text-primary-content rounded-full flex items-center justify-center text-xs font-bold">
+                {index() + 1}
+              </div>
+            </div>
+          )}
+        </For>
+      </div>
+
+      {boards().length === 0 && (
+        <div class="text-center py-12">
+          <div class="text-6xl mb-4">🔍</div>
+          <h3 class="text-lg font-semibold text-base-content mb-2">未发现设备</h3>
+          <p class="text-base-content/70">请检查设备连接状态</p>
+        </div>
+      )}
+    </div>
   );
 };

src/components/info/board-info-panel.tsx

@@ -7,10 +7,10 @@ type ItemProps = {
 
 const Item: ParentComponent<ItemProps> = (props) => {
   return (
-    <dl class="flex">
-      <dt class="w-20">{props.label}</dt>
-      <dd class="flex-auto">{props.children}</dd>
-    </dl>
+    <div class="flex justify-between items-center py-1">
+      <dt class="text-sm font-medium text-base-content/70">{props.label}</dt>
+      <dd class="text-sm font-mono text-base-content">{props.children}</dd>
+    </div>
   );
 };
 
@@ -41,20 +41,31 @@ export const BoardInfoPanel: Component<{ board: BoardInfo }> = (props) => {
     }
   });
 
+  const statusBadgeClass = createMemo(() => {
+    const status = connectStatus();
+    if (status === 'Connected') {
+      return 'badge badge-success badge-sm';
+    } else if (status?.startsWith('Connecting')) {
+      return 'badge badge-warning badge-sm';
+    } else {
+      return 'badge badge-error badge-sm';
+    }
+  });
+
   return (
-    <section class="p-2 rounded shadow">
-      <Item label="Host">{props.board.fullname}</Item>
-      <Item label="Host">{props.board.host}</Item>
-      <Item label="Ip Addr">
-        <span class="font-mono">{props.board.address}</span>
-      </Item>
-      <Item label="Port">
-        <span class="font-mono">{props.board.port}</span>
-      </Item>
-      <Item label="Status">
-        <span class="font-mono">{connectStatus()}</span>
-      </Item>
-      <Item label="TTL">{ttl()}</Item>
-    </section>
+    <div class="card bg-base-200 shadow-lg hover:shadow-xl transition-shadow duration-200">
+      <div class="card-body p-4">
+        <div class="card-title text-base mb-3 flex items-center justify-between">
+          <span class="truncate">{props.board.fullname}</span>
+          <div class={statusBadgeClass()}>{connectStatus()}</div>
+        </div>
+        <div class="space-y-2">
+          <Item label="主机名">{props.board.host}</Item>
+          <Item label="IP地址">{props.board.address}</Item>
+          <Item label="端口">{props.board.port}</Item>
+          <Item label="延迟">{ttl()}</Item>
+        </div>
+      </div>
+    </div>
   );
 };