fix(i18n): 统一使用 useLazyTranslation 避免翻译 key 闪烁

components/ImageUploader.tsx

@@ -4,7 +4,7 @@ import ImageIcon from '@mui/icons-material/Image';
 import ClearIcon from '@mui/icons-material/Clear';
 import { qrCodePageStyles } from '@/config/pageTheme';
 import { useSnackbar } from '@/components/GlobalSnackbar';
-import { useTranslation } from 'react-i18next';
+import { useLazyTranslation } from '@/utils/useLazyTranslation';
 
 interface ImageUploaderProps {
   /** 选中的文件 */
@@ -32,7 +32,7 @@ const ImageUploader = ({
   dragging,
   onDraggingChange,
 }: ImageUploaderProps) => {
-  const { t } = useTranslation(['qrCode']);
+  const { t } = useLazyTranslation('qrCode');
   const { showMessage } = useSnackbar();
   const fileInputRef = useRef<HTMLInputElement>(null);
 

components/QrCodePreview.tsx

@@ -2,7 +2,7 @@ import { Box, Button, Typography } from '@mui/material';
 import DownloadIcon from '@mui/icons-material/Download';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import { qrCodePageStyles } from '@/config/pageTheme';
-import { useTranslation } from 'react-i18next';
+import { useLazyTranslation } from '@/utils/useLazyTranslation';
 
 interface QrCodePreviewProps {
   /** 二维码 Data URL */
@@ -14,7 +14,7 @@ interface QrCodePreviewProps {
 }
 
 const QrCodePreview = ({ qrCodeDataUrl, onDownload, onCopy }: QrCodePreviewProps) => {
-  const { t } = useTranslation(['qrCode']);
+  const { t } = useLazyTranslation('qrCode');
 
   if (!qrCodeDataUrl) {
     return (

pages/Base64Converter/__tests__/index.test.tsx

@@ -2,6 +2,24 @@ import { describe, it, expect, vi } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
 import Base64ConverterPage from '../index';
 
+// Mock useLazyTranslation
+vi.mock('@/utils/useLazyTranslation', () => ({
+  useLazyTranslation: () => ({
+    t: (key: string) => key,
+    i18n: { changeLanguage: vi.fn(), language: 'zh-CN' },
+    isLoaded: true,
+  }),
+}));
+
+// Mock getEntryPointType
+vi.mock('@/config/features', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/config/features')>();
+  return {
+    ...actual,
+    getEntryPointType: () => 'sidepanel',
+  };
+});
+
 // Mock 子组件
 vi.mock('../TextMode', () => ({
   default: () => <div data-testid="text-mode">TextMode</div>,

pages/JsonTools/DiffNavigator.tsx

@@ -1,7 +1,7 @@
 import { Box, IconButton, Typography } from '@mui/material';
 import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore';
 import NavigateNextIcon from '@mui/icons-material/NavigateNext';
-import { useTranslation } from 'react-i18next';
+import { useLazyTranslation } from '@/utils/useLazyTranslation';
 import { jsonDiffPageStyles } from '@/config/pageTheme';
 
 interface DiffNavigatorProps {
@@ -13,7 +13,7 @@ interface DiffNavigatorProps {
 }
 
 export default function DiffNavigator({ total, currentIndex, onPrev, onNext }: DiffNavigatorProps) {
-  const { t } = useTranslation(['jsonDiff']);
+  const { t } = useLazyTranslation('jsonDiff');
 
   if (total === 0) {
     return (

pages/JsonTools/DiffResult.tsx

@@ -1,6 +1,6 @@
 import { Box, Stack, Typography, useTheme } from '@mui/material';
 import type { Theme } from '@mui/material/styles';
-import { useTranslation } from 'react-i18next';
+import { useLazyTranslation } from '@/utils/useLazyTranslation';
 import { jsonDiffPageStyles, surfaceTint } from '@/config/pageTheme';
 import JsonTree from './JsonTree';
 import type { DiffNode, DiffResult as DiffResultType, DiffType, ViewMode } from './types';
@@ -12,7 +12,7 @@ interface DiffResultProps {
 }
 
 export default function DiffResult({ result, viewMode, activePath }: DiffResultProps) {
-  const { t } = useTranslation(['jsonDiff']);
+  const { t } = useLazyTranslation('jsonDiff');
 
   if (viewMode === 'sideBySide') {
     return (

pages/JsonTools/JsonConvertSection.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
 import { Box, Button, Stack, Typography } from '@mui/material';
-import { useTranslation } from 'react-i18next';
+import { useLazyTranslation } from '@/utils/useLazyTranslation';
 import { formatByteSize } from '@/utils/textStatistics';
 import { useSnackbar } from '@/components/GlobalSnackbar';
 import CopyButton from '@/components/CopyButton';
@@ -43,7 +43,7 @@ export default function JsonConvertSection({
   convertFunction,
   convertButtonKey = 'convertButton',
 }: JsonConvertSectionProps) {
-  const { t } = useTranslation(['jsonFormat']);
+  const { t } = useLazyTranslation('jsonFormat');
   const { showMessage } = useSnackbar();
 
   const [input, setInput] = useState('');

pages/JsonTools/JsonFormatSection.tsx

@@ -9,7 +9,7 @@ import {
   TextField,
   Typography,
 } from '@mui/material';
-import { useTranslation } from 'react-i18next';
+import { useLazyTranslation } from '@/utils/useLazyTranslation';
 import {
   formatJson,
   validateJson,
@@ -32,7 +32,7 @@ const INDENT_OPTIONS = [2, 4, 6, 8] as const;
  * 支持一键复制格式化后的 JSON。
  */
 export default function JsonFormatSection() {
-  const { t } = useTranslation(['jsonFormat']);
+  const { t } = useLazyTranslation('jsonFormat');
   const { showMessage } = useSnackbar();
 
   const [input, setInput] = useState('');

pages/QrCode/__tests__/index.test.tsx

@@ -2,6 +2,24 @@ import { describe, it, expect, vi } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
 import QrCodePage from '../index';
 
+// Mock useLazyTranslation
+vi.mock('@/utils/useLazyTranslation', () => ({
+  useLazyTranslation: () => ({
+    t: (key: string) => key,
+    i18n: { changeLanguage: vi.fn(), language: 'zh-CN' },
+    isLoaded: true,
+  }),
+}));
+
+// Mock getEntryPointType
+vi.mock('@/config/features', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/config/features')>();
+  return {
+    ...actual,
+    getEntryPointType: () => 'sidepanel',
+  };
+});
+
 // Mock 子组件
 vi.mock('@/components/QrCodePreview', () => ({
   default: () => <div data-testid="qr-code-preview">QrCodePreview</div>,

pages/StorageCleaner/AutoRefreshToggle.tsx

@@ -1,6 +1,6 @@
 import { Box, Switch, Typography } from '@mui/material';
 import { storageCleanerPageStyles } from '@/config/pageTheme';
-import { useTranslation } from 'react-i18next';
+import { useLazyTranslation } from '@/utils/useLazyTranslation';
 
 interface AutoRefreshToggleProps {
   autoRefresh: boolean;
@@ -8,7 +8,7 @@ interface AutoRefreshToggleProps {
 }
 
 export default function AutoRefreshToggle({ autoRefresh, onChange }: AutoRefreshToggleProps) {
-  const { t } = useTranslation(['storageCleaner']);
+  const { t } = useLazyTranslation('storageCleaner');
   return (
     <Box sx={storageCleanerPageStyles.AUTO_REFRESH_CONTAINER}>
       <Typography variant="body2" fontWeight={700} sx={{ fontSize: '0.8rem', px: 1.2 }}>

pages/StorageCleaner/CleaningResult.tsx

@@ -2,14 +2,14 @@ import { Alert, Box } from '@mui/material';
 import type { CleaningResult } from '@/types/storage';
 import { formatCleaningResult } from '@/utils/storageCleaner';
 import { storageCleanerPageStyles } from '@/config/pageTheme';
-import { useTranslation } from 'react-i18next';
+import { useLazyTranslation } from '@/utils/useLazyTranslation';
 
 interface CleaningResultProps {
   result: CleaningResult | null;
 }
 
 export default function CleaningResult({ result }: CleaningResultProps) {
-  const { t } = useTranslation(['storageCleaner']);
+  const { t } = useLazyTranslation('storageCleaner');
   if (!result) return null;
 
   return (

pages/StorageCleaner/DomainHeader.tsx

@@ -3,7 +3,7 @@ import StorageIcon from '@mui/icons-material/Storage';
 import PageHeader from '@/components/PageHeader';
 import { formatSize } from '@/utils/storageCleaner';
 import { storageCleanerPageStyles } from '@/config/pageTheme';
-import { useTranslation } from 'react-i18next';
+import { useLazyTranslation } from '@/utils/useLazyTranslation';
 
 /**
  * DomainHeader 组件属性接口
@@ -29,7 +29,7 @@ interface DomainHeaderProps {
  * ```
  */
 export default function DomainHeader({ domain, totalSize }: DomainHeaderProps) {
-  const { t } = useTranslation(['storageCleaner']);
+  const { t } = useLazyTranslation('storageCleaner');
   return (
     <PageHeader
       icon={<StorageIcon sx={{ fontSize: 22 }} />}

pages/StorageCleaner/ErrorDisplay.tsx

@@ -1,14 +1,14 @@
 import { Box, Container, Typography } from '@mui/material';
 import WarningIcon from '@mui/icons-material/Warning';
 import { storageCleanerPageStyles } from '@/config/pageTheme';
-import { useTranslation } from 'react-i18next';
+import { useLazyTranslation } from '@/utils/useLazyTranslation';
 
 interface ErrorDisplayProps {
   error: string;
 }
 
 export default function ErrorDisplay({ error }: ErrorDisplayProps) {
-  const { t } = useTranslation(['storageCleaner']);
+  const { t } = useLazyTranslation('storageCleaner');
   return (
     <Container sx={storageCleanerPageStyles.ERROR_DISPLAY_CONTAINER}>
       <Box sx={{ width: '100%', maxWidth: 320 }}>

pages/StorageCleaner/OptionItem.tsx

@@ -1,7 +1,7 @@
 import { Box, Checkbox, Typography } from '@mui/material';
 import { formatSize } from '@/utils/storageCleaner';
 import { storageCleanerPageStyles } from '@/config/pageTheme';
-import { useTranslation } from 'react-i18next';
+import { useLazyTranslation } from '@/utils/useLazyTranslation';
 
 interface OptionItemProps {
   labelKey: string;
@@ -18,7 +18,7 @@ export default function OptionItem({
   isCount = false,
   onChange,
 }: OptionItemProps) {
-  const { t } = useTranslation(['storageCleaner']);
+  const { t } = useLazyTranslation('storageCleaner');
   return (
     <Box sx={storageCleanerPageStyles.OPTION_ITEM(checked)}>
       <Box sx={{ flex: 1, minWidth: 0, mr: 1.5 }}>

pages/StorageCleaner/StorageCleanerConfirm.tsx

@@ -10,7 +10,7 @@ import {
 import type { StorageCleanerOptions } from '@/types/storage';
 import Button from '@/components/Button';
 import { storageCleanerPageStyles } from '@/config/pageTheme';
-import { useTranslation } from 'react-i18next';
+import { useLazyTranslation } from '@/utils/useLazyTranslation';
 
 export interface StorageCleanerConfirmProps {
   open: boolean;
@@ -25,7 +25,7 @@ export function StorageCleanerConfirm({
   onConfirm,
   options,
 }: StorageCleanerConfirmProps) {
-  const { t } = useTranslation(['storageCleaner']);
+  const { t } = useLazyTranslation('storageCleaner');
 
   const selectedOptions = Object.entries(options)
     .filter(([_, value]) => value)

pages/StorageCleaner/StorageOptionsGrid.tsx

@@ -2,7 +2,7 @@ import { Box, Checkbox, Divider, Grid, Typography } from '@mui/material';
 import type { StorageCleanerOptions } from '@/types/storage';
 import OptionItem from './OptionItem';
 import { storageCleanerPageStyles } from '@/config/pageTheme';
-import { useTranslation } from 'react-i18next';
+import { useLazyTranslation } from '@/utils/useLazyTranslation';
 
 interface StorageOptionsGridProps {
   options: StorageCleanerOptions;
@@ -21,7 +21,7 @@ export default function StorageOptionsGrid({
   onOptionChange,
   onSelectAll,
 }: StorageOptionsGridProps) {
-  const { t } = useTranslation(['storageCleaner']);
+  const { t } = useLazyTranslation('storageCleaner');
 
   const optionKeys: { key: keyof StorageCleanerOptions; isCount?: boolean }[] = [
     { key: 'localStorage' },

pages/StorageCleaner/useStorageCleaner.ts

@@ -18,7 +18,7 @@ import {
   isRestrictedUrl,
 } from '@/utils/storageCleaner';
 import { MessageAction, sendMessage } from '@/utils/messages';
-import { useTranslation } from 'react-i18next';
+import { useLazyTranslation } from '@/utils/useLazyTranslation';
 
 const DEFAULT_OPTIONS: StorageCleanerOptions = {
   localStorage: true,
@@ -66,7 +66,7 @@ export interface UseStorageCleanerOptions {
 export function useStorageCleaner({
   showMessage,
 }: UseStorageCleanerOptions): UseStorageCleanerReturn {
-  const { t } = useTranslation(['storageCleaner', 'common']);
+  const { t } = useLazyTranslation(['storageCleaner', 'common']);
   const [domain, setDomain] = useState<string>('');
   const [error, setError] = useState<string>('');
   const [isInitializing, setIsInitializing] = useState<boolean>(true);

pages/Timestamp/LiveClock.tsx

@@ -5,7 +5,7 @@ import CopyButton from '@/components/CopyButton';
 import { useSnackbar } from '@/components/GlobalSnackbar';
 import type { UnitType } from '@/config/pageTheme';
 import { timestampPageStyles } from '@/config/pageTheme';
-import { useTranslation } from 'react-i18next';
+import { useLazyTranslation } from '@/utils/useLazyTranslation';
 
 interface LiveClockProps {
   unit: UnitType;
@@ -14,7 +14,7 @@ interface LiveClockProps {
 
 const LiveClock = React.memo(({ unit, onUseNow }: LiveClockProps) => {
   const [now, setNow] = useState(() => Date.now());
-  const { t } = useTranslation(['timestamp']);
+  const { t } = useLazyTranslation('timestamp');
   const { showMessage } = useSnackbar();
   const onUseNowRef = useRef(onUseNow);
 

pages/Timestamp/ResultView.tsx

@@ -4,7 +4,7 @@ import dayjs from '@/utils/dayjs';
 import CopyButton from '@/components/CopyButton';
 import type { UnitType } from '@/config/pageTheme';
 import { DATE_FORMAT, timestampPageStyles } from '@/config/pageTheme';
-import { useTranslation } from 'react-i18next';
+import { useLazyTranslation } from '@/utils/useLazyTranslation';
 
 interface ResultViewProps {
   result: string;
@@ -17,7 +17,7 @@ interface ResultViewProps {
 
 const ResultView = React.memo(
   ({ result, mode, unit, zone, showEmptyPlaceholder = false }: ResultViewProps) => {
-    const { t } = useTranslation(['timestamp']);
+    const { t } = useLazyTranslation('timestamp');
 
     const extraInfo = useMemo(() => {
       if (!result) return null;

pages/Timestamp/useTimestampConverter.ts

@@ -2,7 +2,7 @@ import { useCallback, useState } from 'react';
 import dayjs from '@/utils/dayjs';
 import type { UnitType, ZoneType } from '@/config/pageTheme';
 import { DATE_FORMAT } from '@/config/pageTheme';
-import { useTranslation } from 'react-i18next';
+import { useLazyTranslation } from '@/utils/useLazyTranslation';
 import { useContextMenuData } from '@/utils/useContextMenuData';
 
 export interface UseTimestampConverterReturn {
@@ -34,7 +34,7 @@ function isTimestampLike(input: string): boolean {
 }
 
 export function useTimestampConverter(): UseTimestampConverterReturn {
-  const { t } = useTranslation(['timestamp']);
+  const { t } = useLazyTranslation('timestamp');
   const [mode, setMode] = useState<'ts2dt' | 'dt2ts'>('ts2dt');
   const [tsInput, setTsInput] = useState(() => String(Date.now()));
   const [dtInput, setDtInput] = useState(() => dayjs().format(DATE_FORMAT));