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/App.tsx

@@ -21,19 +21,47 @@ function App() {
   });
 
   return (
-    <div>
-      <div>
-        <a href="/info">基本信息</a>
-        <a href="/displays">显示器信息</a>
-        <a href="/led-strips-configuration">灯条配置</a>
-        <a href="/white-balance">白平衡</a>
+    <div class="min-h-screen bg-base-100" data-theme="dark">
+      {/* Navigation */}
+      <div class="navbar bg-base-200 shadow-lg">
+        <div class="navbar-start">
+          <div class="dropdown">
+            <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16"></path>
+              </svg>
+            </div>
+            <ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
+              <li><a href="/info" class="text-base-content">基本信息</a></li>
+              <li><a href="/displays" class="text-base-content">显示器信息</a></li>
+              <li><a href="/led-strips-configuration" class="text-base-content">灯条配置</a></li>
+              <li><a href="/white-balance" class="text-base-content">白平衡</a></li>
+            </ul>
+          </div>
+          <a class="btn btn-ghost text-xl text-primary font-bold">环境光控制</a>
+        </div>
+        <div class="navbar-center hidden lg:flex">
+          <ul class="menu menu-horizontal px-1">
+            <li><a href="/info" class="btn btn-ghost text-base-content hover:text-primary">基本信息</a></li>
+            <li><a href="/displays" class="btn btn-ghost text-base-content hover:text-primary">显示器信息</a></li>
+            <li><a href="/led-strips-configuration" class="btn btn-ghost text-base-content hover:text-primary">灯条配置</a></li>
+            <li><a href="/white-balance" class="btn btn-ghost text-base-content hover:text-primary">白平衡</a></li>
+          </ul>
+        </div>
+        <div class="navbar-end">
+          <div class="badge badge-primary badge-outline">v1.0</div>
+        </div>
       </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>
+
+      {/* Main Content */}
+      <main class="container mx-auto p-4">
+        <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>
+      </main>
     </div>
   );
 }