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/displays/display-state-card.tsx

@@ -1,5 +1,6 @@
 import { Component, ParentComponent } from 'solid-js';
 import { DisplayState } from '../../models/display-state.model';
+import { useLanguage } from '../../i18n/index';
 
 type DisplayStateCardProps = {
   state: DisplayState;
@@ -19,48 +20,49 @@ const Item: ParentComponent<ItemProps> = (props) => {
 };
 
 export const DisplayStateCard: Component<DisplayStateCardProps> = (props) => {
+  const { t } = useLanguage();
   return (
     <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>显示器状态</span>
-          <div class="badge badge-primary badge-outline">实时</div>
+          <span>{t('displays.title')}</span>
+          <div class="badge badge-primary badge-outline">{t('common.realtime')}</div>
         </div>
 
         <div class="grid grid-cols-1 gap-3">
           {/* 亮度信息 */}
           <div class="bg-base-100 rounded-lg p-3">
-            <h4 class="text-sm font-semibold text-base-content mb-2">亮度设置</h4>
+            <h4 class="text-sm font-semibold text-base-content mb-2">{t('displays.brightnessSettings')}</h4>
             <div class="space-y-1">
-              <Item label="当前亮度">{props.state.brightness}</Item>
-              <Item label="最大亮度">{props.state.max_brightness}</Item>
-              <Item label="最小亮度">{props.state.min_brightness}</Item>
+              <Item label={t('displays.currentBrightness')}>{props.state.brightness}</Item>
+              <Item label={t('displays.maxBrightness')}>{props.state.max_brightness}</Item>
+              <Item label={t('displays.minBrightness')}>{props.state.min_brightness}</Item>
             </div>
           </div>
 
           {/* 对比度信息 */}
           <div class="bg-base-100 rounded-lg p-3">
-            <h4 class="text-sm font-semibold text-base-content mb-2">对比度设置</h4>
+            <h4 class="text-sm font-semibold text-base-content mb-2">{t('displays.contrastSettings')}</h4>
             <div class="space-y-1">
-              <Item label="当前对比度">{props.state.contrast}</Item>
-              <Item label="最大对比度">{props.state.max_contrast}</Item>
-              <Item label="最小对比度">{props.state.min_contrast}</Item>
+              <Item label={t('displays.currentContrast')}>{props.state.contrast}</Item>
+              <Item label={t('displays.maxContrast')}>{props.state.max_contrast}</Item>
+              <Item label={t('displays.minContrast')}>{props.state.min_contrast}</Item>
             </div>
           </div>
 
           {/* 模式信息 */}
           <div class="bg-base-100 rounded-lg p-3">
-            <h4 class="text-sm font-semibold text-base-content mb-2">模式设置</h4>
+            <h4 class="text-sm font-semibold text-base-content mb-2">{t('displays.modeSettings')}</h4>
             <div class="space-y-1">
-              <Item label="当前模式">{props.state.mode}</Item>
-              <Item label="最大模式">{props.state.max_mode}</Item>
-              <Item label="最小模式">{props.state.min_mode}</Item>
+              <Item label={t('displays.currentMode')}>{props.state.mode}</Item>
+              <Item label={t('displays.maxMode')}>{props.state.max_mode}</Item>
+              <Item label={t('displays.minMode')}>{props.state.min_mode}</Item>
             </div>
           </div>
 
           {/* 更新时间 */}
           <div class="text-xs text-base-content/50 text-center pt-2 border-t border-base-300">
-            最后更新: {props.state.last_modified_at.toLocaleString()}
+            {t('displays.lastModified')}: {props.state.last_modified_at.toLocaleString()}
           </div>
         </div>
       </div>

src/components/displays/display-state-index.tsx

@@ -4,11 +4,13 @@ import debug from 'debug';
 import { invoke } from '@tauri-apps/api/core';
 import { DisplayState, RawDisplayState } from '../../models/display-state.model';
 import { DisplayStateCard } from './display-state-card';
+import { useLanguage } from '../../i18n/index';
 
 const logger = debug('app:components:displays:display-state-index');
 
 export const DisplayStateIndex: Component = () => {
   const [states, setStates] = createSignal<DisplayState[]>([]);
+  const { t } = useLanguage();
 
   createEffect(() => {
     const unlisten = listen<RawDisplayState[]>('displays_changed', (ev) => {
@@ -38,10 +40,10 @@ export const DisplayStateIndex: 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('displays.title')}</h1>
         <div class="stats shadow">
           <div class="stat">
-            <div class="stat-title">显示器数量</div>
+            <div class="stat-title">{t('displays.displayCount')}</div>
             <div class="stat-value text-primary">{states().length}</div>
           </div>
         </div>
@@ -63,8 +65,8 @@ export const DisplayStateIndex: Component = () => {
       {states().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('displays.noDisplaysFound')}</h3>
+          <p class="text-base-content/70">{t('displays.checkConnection')}</p>
         </div>
       )}
     </div>