fix: resolve i18n implementation issues

2025-07-08 22:59:54 +08:00
parent a8f2b93de0
commit 953cb24a3b
7 changed files with 100 additions and 28 deletions
--- a/src/components/info/board-info-panel.tsx
+++ b/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)})`;
    }
  });

--- a/src/components/led-strip-configuration/display-info-panel.tsx
+++ b/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>
--- a/src/components/led-strip-test/led-strip-test.tsx
+++ b/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,7 +240,7 @@ 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"
@ -254,7 +254,7 @@ export const LedStripTest = () => {

            <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"
@ -268,7 +268,7 @@ export const LedStripTest = () => {

            <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"
@ -306,7 +306,7 @@ export const LedStripTest = () => {
                            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>
--- a/src/components/white-balance/white-balance.tsx
+++ b/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>

--- a/src/i18n/locales/en-US.ts
+++ b/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: {
--- a/src/i18n/locales/zh-CN.ts
+++ b/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: {
--- a/src/i18n/types.ts
+++ b/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