feat: implement comprehensive i18n internationalization support

- Add custom i18n infrastructure with TypeScript support
- Support Chinese (zh-CN) and English (en-US) languages
- Implement language switching with localStorage persistence
- Update all components with translation keys:
  * System info components (board-info-panel, board-index)
  * Display management components (display-state-index, display-state-card)
  * LED strip configuration components (led-strip-configuration, led-count-control-panel)
  * White balance component with detailed usage instructions
  * LED test component with test pattern descriptions
- Add comprehensive translation coverage for:
  * Navigation menus and page titles
  * Common UI elements (buttons, status, actions)
  * Hardware information and connection status
  * Display configuration options
  * LED strip settings and controls
  * White balance adjustment instructions and tips
  * LED test modes and descriptions
  * Error messages and status indicators
- Features:
  * Dynamic language switching without app restart
  * Type-safe translation keys with full TypeScript support
  * Modular design for easy language extension
  * Responsive UI updates using SolidJS reactivity

src/components/info/board-index.tsx

@@ -4,11 +4,13 @@ import { listen } from '@tauri-apps/api/event';
 import debug from 'debug';
 import { invoke } from '@tauri-apps/api/core';
 import { BoardInfoPanel } from './board-info-panel';
+import { useLanguage } from '../../i18n/index';
 
 const logger = debug('app:components:info:board-index');
 
 export const BoardIndex: Component = () => {
   const [boards, setBoards] = createSignal<BoardInfo[]>([]);
+  const { t } = useLanguage();
 
   createEffect(() => {
     const unlisten = listen<BoardInfo[]>('boards_changed', (ev) => {
@@ -28,10 +30,10 @@ export const BoardIndex: Component = () => {
   return (
     <div class="space-y-6">
       <div class="flex items-center justify-between">
-        <h1 class="text-2xl font-bold text-base-content">设备信息</h1>
+        <h1 class="text-2xl font-bold text-base-content">{t('info.boardInfo')}</h1>
         <div class="stats shadow">
           <div class="stat">
-            <div class="stat-title">设备总数</div>
+            <div class="stat-title">{t('info.deviceCount')}</div>
             <div class="stat-value text-primary">{boards().length}</div>
           </div>
         </div>
@@ -53,8 +55,8 @@ export const BoardIndex: Component = () => {
       {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>
+          <h3 class="text-lg font-semibold text-base-content mb-2">{t('info.noDevicesFound')}</h3>
+          <p class="text-base-content/70">{t('info.checkConnection')}</p>
         </div>
       )}
     </div>