Ivan Li
2c6b777fa6
- 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
65 lines
2.1 KiB
TypeScript
65 lines
2.1 KiB
TypeScript
import { Component, For, createEffect, createSignal } from 'solid-js';
|
|
import { BoardInfo } from '../../models/board-info.model';
|
|
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) => {
|
|
logger('boards_changed', ev);
|
|
setBoards(ev.payload);
|
|
});
|
|
|
|
invoke<BoardInfo[]>('get_boards').then((boards) => {
|
|
logger('get_boards', boards);
|
|
setBoards(boards);
|
|
});
|
|
|
|
return () => {
|
|
unlisten.then((unlisten) => unlisten());
|
|
};
|
|
});
|
|
return (
|
|
<div class="space-y-6">
|
|
<div class="flex items-center justify-between">
|
|
<h1 class="text-2xl font-bold text-base-content">{t('info.boardInfo')}</h1>
|
|
<div class="stats shadow">
|
|
<div class="stat">
|
|
<div class="stat-title">{t('info.deviceCount')}</div>
|
|
<div class="stat-value text-primary">{boards().length}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
<For each={boards()}>
|
|
{(board, index) => (
|
|
<div class="relative">
|
|
<BoardInfoPanel board={board} />
|
|
<div class="absolute -top-2 -left-2 w-6 h-6 bg-primary text-primary-content rounded-full flex items-center justify-center text-xs font-bold">
|
|
{index() + 1}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</For>
|
|
</div>
|
|
|
|
{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">{t('info.noDevicesFound')}</h3>
|
|
<p class="text-base-content/70">{t('info.checkConnection')}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|