fix: resolve i18n implementation issues

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

@@ -23,7 +23,7 @@ export const BoardInfoPanel: Component<{ board: BoardInfo }> = (props) => {
     }
 
     if (props.board.ttl == null) {
-      return 'timeout';
+      return t('info.timeout');
     }
 
     return (
@@ -39,7 +39,7 @@ export const BoardInfoPanel: Component<{ board: BoardInfo }> = (props) => {
     }
 
     if ('Connecting' in props.board.connect_status) {
-      return `Connecting (${props.board.connect_status.Connecting.toFixed(0)})`;
+      return `${t('info.connecting')} (${props.board.connect_status.Connecting.toFixed(0)})`;
     }
   });
 

src/components/led-strip-configuration/display-info-panel.tsx

@@ -1,5 +1,6 @@
 import { Component, JSX, ParentComponent, splitProps } from 'solid-js';
 import { DisplayInfo } from '../../models/display-info.model';
+import { useLanguage } from '../../i18n/index';
 
 type DisplayInfoItemProps = {
   label: string;
@@ -20,26 +21,28 @@ type DisplayInfoPanelProps = {
 
 export const DisplayInfoPanel: Component<DisplayInfoPanelProps> = (props) => {
   const [localProps, rootProps] = splitProps(props, ['display']);
+  const { t } = useLanguage();
+
   return (
     <div {...rootProps} class={'card bg-base-100/95 backdrop-blur shadow-lg border border-base-300 ' + rootProps.class}>
       <div class="card-body p-4">
         <div class="card-title text-sm mb-3 flex items-center justify-between">
-          <span class="text-base-content">显示器信息</span>
+          <span class="text-base-content">{t('displays.displayInfo')}</span>
           {localProps.display.is_primary && (
-            <div class="badge badge-primary badge-sm">主显示器</div>
+            <div class="badge badge-primary badge-sm">{t('displays.isPrimary')}</div>
           )}
         </div>
         <div class="space-y-1">
-          <DisplayInfoItem label="ID">
+          <DisplayInfoItem label={t('displays.id')}>
             <code class="bg-base-200 px-1 rounded text-xs">{localProps.display.id}</code>
           </DisplayInfoItem>
-          <DisplayInfoItem label="位置">
+          <DisplayInfoItem label={t('displays.position')}>
             ({localProps.display.x}, {localProps.display.y})
           </DisplayInfoItem>
-          <DisplayInfoItem label="尺寸">
+          <DisplayInfoItem label={t('displays.size')}>
             {localProps.display.width} × {localProps.display.height}
           </DisplayInfoItem>
-          <DisplayInfoItem label="缩放">
+          <DisplayInfoItem label={t('displays.scale')}>
             {localProps.display.scale_factor}×
           </DisplayInfoItem>
         </div>

src/components/led-strip-test/led-strip-test.tsx

@@ -191,14 +191,14 @@ export const LedStripTest = () => {
     <div class="container mx-auto p-6 space-y-6">
       <div class="card bg-base-200 shadow-xl">
         <div class="card-body">
-          <h2 class="card-title text-2xl mb-4">LED Strip Testing</h2>
+          <h2 class="card-title text-2xl mb-4">{t('ledTest.title')}</h2>
           
           {/* Hardware Selection */}
           <div class="form-control w-full max-w-xs">
             <label class="label">
-              <span class="label-text">Select Hardware Board</span>
+              <span class="label-text">{t('ledTest.selectHardwareBoard')}</span>
               <span class="label-text-alt">
-                {boards().length > 0 ? `${boards().length} device(s) found` : 'Searching...'}
+                {boards().length > 0 ? `${boards().length} ${t('ledTest.devicesFound')}` : t('ledTest.searching')}
               </span>
             </label>
             <select
@@ -210,7 +210,7 @@ export const LedStripTest = () => {
               }}
             >
               <option disabled value="">
-                {boards().length > 0 ? 'Choose a board' : 'No boards found'}
+                {boards().length > 0 ? t('ledTest.chooseBoard') : t('ledTest.noBoardsFound')}
               </option>
               <For each={boards()}>
                 {(board) => {
@@ -221,9 +221,9 @@ export const LedStripTest = () => {
                   };
 
                   const getStatusText = (status: BoardInfo['connect_status']) => {
-                    if (status === 'Connected') return 'Connected';
+                    if (status === 'Connected') return t('ledTest.connected');
-                    if (typeof status === 'object' && 'Connecting' in status) return 'Connecting';
+                    if (typeof status === 'object' && 'Connecting' in status) return t('ledTest.connecting');
-                    return 'Disconnected';
+                    return t('ledTest.disconnected');
                   };
 
                   return (
@@ -240,10 +240,10 @@ export const LedStripTest = () => {
           <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
             <div class="form-control">
               <label class="label">
-                <span class="label-text">LED Count</span>
+                <span class="label-text">{t('ledTest.ledCount')}</span>
               </label>
-              <input 
+              <input
-                type="number" 
+                type="number"
                 class="input input-bordered w-full text-center text-lg"
                 value={ledCount()}
                 min="1"
@@ -251,10 +251,10 @@ export const LedStripTest = () => {
                 onInput={(e) => setLedCount(parseInt(e.target.value) || 60)}
               />
             </div>
-            
+
             <div class="form-control">
               <label class="label">
-                <span class="label-text">LED Type</span>
+                <span class="label-text">{t('ledTest.ledType')}</span>
               </label>
               <select
                 class="select select-bordered w-full"
@@ -265,10 +265,10 @@ export const LedStripTest = () => {
                 <option value="SK6812">SK6812</option>
               </select>
             </div>
-            
+
             <div class="form-control">
               <label class="label">
-                <span class="label-text">Animation Speed (ms)</span>
+                <span class="label-text">{t('ledTest.animationSpeed')}</span>
               </label>
               <input
                 type="number"
@@ -301,12 +301,12 @@ export const LedStripTest = () => {
                       <Show 
                         when={currentPattern() === pattern && isRunning()}
                         fallback={
-                          <button 
+                          <button
                             class="btn btn-primary"
                             onClick={() => startTest(pattern)}
                             disabled={!selectedBoard()}
                           >
-                            Start Test
+                            {t('ledTest.startTestButton')}
                           </button>
                         }
                       >
@@ -314,7 +314,7 @@ export const LedStripTest = () => {
                           class="btn btn-error"
                           onClick={() => stopTest()}
                         >
-                          Stop Test
+                          {t('ledTest.stopTest')}
                         </button>
                       </Show>
                     </div>

src/components/white-balance/white-balance.tsx

@@ -301,8 +301,8 @@ export const WhiteBalance = () => {
                       <ol class="list-decimal list-inside space-y-1 ml-2">
                         <li>{t('whiteBalance.fullscreenTip')}</li>
                         <li>{t('whiteBalance.dragTip')}</li>
-                        <li>将RGB控制面板拖拽到合适位置</li>
+                        <li>{t('whiteBalance.dragPanelTip')}</li>
-                        <li>对比LED灯条颜色与屏幕边缘颜色</li>
+                        <li>{t('whiteBalance.compareColorsTip')}</li>
                       </ol>
                     </div>
 

src/i18n/locales/en-US.ts

@@ -58,6 +58,9 @@ export const enUS: TranslationDict = {
     deviceCount: 'Device Count',
     noDevicesFound: 'No Devices Found',
     checkConnection: 'Please check device connection status',
+    // Device status
+    timeout: 'Timeout',
+    connecting: 'Connecting',
   },
   
   displays: {
@@ -88,6 +91,9 @@ export const enUS: TranslationDict = {
     currentMode: 'Current Mode',
     maxMode: 'Max Mode',
     minMode: 'Min Mode',
+    // Display info panel specific
+    id: 'ID',
+    scale: 'Scale',
   },
   
   ledConfig: {
@@ -169,6 +175,9 @@ export const enUS: TranslationDict = {
     draggable: 'Draggable',
     exitFullscreen: 'Exit Fullscreen',
     notEnabled: 'Not Enabled',
+    // Missing white balance instructions
+    dragPanelTip: 'Drag the RGB control panel to a suitable position',
+    compareColorsTip: 'Compare LED strip colors with screen edge colors',
   },
   
   ledTest: {
@@ -197,6 +206,20 @@ export const enUS: TranslationDict = {
     singleScan: 'Single Scan',
     singleScanDesc: 'Light up each LED individually for precise position testing',
     breathingDesc: 'Breathing effect for the entire LED strip to test overall brightness',
+    // LED test form labels
+    ledCount: 'LED Count',
+    ledType: 'LED Type',
+    animationSpeed: 'Animation Speed (ms)',
+    startTestButton: 'Start Test',
+    // Hardware selection
+    selectHardwareBoard: 'Select Hardware Board',
+    devicesFound: 'device(s) found',
+    searching: 'Searching...',
+    chooseBoard: 'Choose a board',
+    noBoardsFound: 'No boards found',
+    connected: 'Connected',
+    connecting: 'Connecting',
+    disconnected: 'Disconnected',
   },
   
   errors: {

src/i18n/locales/zh-CN.ts

@@ -58,6 +58,9 @@ export const zhCN: TranslationDict = {
     deviceCount: '设备总数',
     noDevicesFound: '未发现设备',
     checkConnection: '请检查设备连接状态',
+    // Device status
+    timeout: '超时',
+    connecting: '连接中',
   },
   
   displays: {
@@ -88,6 +91,9 @@ export const zhCN: TranslationDict = {
     currentMode: '当前模式',
     maxMode: '最大模式',
     minMode: '最小模式',
+    // Display info panel specific
+    id: 'ID',
+    scale: '缩放',
   },
   
   ledConfig: {
@@ -169,10 +175,13 @@ export const zhCN: TranslationDict = {
     draggable: '可拖拽',
     exitFullscreen: '退出全屏',
     notEnabled: '暂未启用',
+    // Missing white balance instructions
+    dragPanelTip: '将RGB控制面板拖拽到合适位置',
+    compareColorsTip: '对比LED灯条颜色与屏幕边缘颜色',
   },
   
   ledTest: {
-    title: '灯带测试',
+    title: 'LED灯带测试',
     testEffects: '测试效果',
     staticColor: '静态颜色',
     rainbow: '彩虹',
@@ -197,6 +206,20 @@ export const zhCN: TranslationDict = {
     singleScan: '单色扫描',
     singleScanDesc: '单个LED依次点亮，用于精确测试每个LED位置',
     breathingDesc: '整条灯带呼吸效果，用于测试整体亮度',
+    // LED test form labels
+    ledCount: 'LED数量',
+    ledType: 'LED类型',
+    animationSpeed: '动画速度 (ms)',
+    startTestButton: '开始测试',
+    // Hardware selection
+    selectHardwareBoard: '选择硬件板',
+    devicesFound: '个设备',
+    searching: '搜索中...',
+    chooseBoard: '选择设备',
+    noBoardsFound: '未找到设备',
+    connected: '已连接',
+    connecting: '连接中',
+    disconnected: '已断开',
   },
   
   errors: {

src/i18n/types.ts

@@ -61,6 +61,9 @@ export interface TranslationDict {
     deviceCount: string;
     noDevicesFound: string;
     checkConnection: string;
+    // Device status
+    timeout: string;
+    connecting: string;
   };
   
   // Display page
@@ -92,6 +95,9 @@ export interface TranslationDict {
     currentMode: string;
     maxMode: string;
     minMode: string;
+    // Display info panel specific
+    id: string;
+    scale: string;
   };
   
   // LED Strip Configuration
@@ -175,6 +181,9 @@ export interface TranslationDict {
     draggable: string;
     exitFullscreen: string;
     notEnabled: string;
+    // Missing white balance instructions
+    dragPanelTip: string;
+    compareColorsTip: string;
   };
   
   // LED Test
@@ -204,6 +213,20 @@ export interface TranslationDict {
     singleScan: string;
     singleScanDesc: string;
     breathingDesc: string;
+    // LED test form labels
+    ledCount: string;
+    ledType: string;
+    animationSpeed: string;
+    startTestButton: string;
+    // Hardware selection
+    selectHardwareBoard: string;
+    devicesFound: string;
+    searching: string;
+    chooseBoard: string;
+    noBoardsFound: string;
+    connected: string;
+    connecting: string;
+    disconnected: string;
   };
   
   // Error messages