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 (typeof status === 'object' && 'Connecting' in status) return 'Connecting';
-                    return 'Disconnected';
+                    if (status === 'Connected') return t('ledTest.connected');
+                    if (typeof status === 'object' && 'Connecting' in status) return t('ledTest.connecting');
+                    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 
-                type="number" 
+              <input
+                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>对比LED灯条颜色与屏幕边缘颜色</li>
+                        <li>{t('whiteBalance.dragPanelTip')}</li>
+                        <li>{t('whiteBalance.compareColorsTip')}</li>
                       </ol>
                     </div>