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

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);