From f40485e2dc27e56da311ebedcd50169df0d657ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Wed, 27 May 2026 14:10:11 +0800
Subject: [PATCH] fix(ErrorBoundary): replace hardcoded Chinese with i18n via
 withTranslation HOC

Use react-i18next withTranslation HOC for class component to translate
title, description, and refresh button text.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 components/ErrorBoundary.tsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/components/ErrorBoundary.tsx b/components/ErrorBoundary.tsx
index 3789b0e..c74e7a6 100644
--- a/components/ErrorBoundary.tsx
+++ b/components/ErrorBoundary.tsx
@@ -1,8 +1,9 @@
 import { Component, ErrorInfo, ReactNode } from 'react';
+import { withTranslation, type WithTranslation } from 'react-i18next';
 import { AlertCircle, RefreshCw } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 
-interface Props {
+interface Props extends WithTranslation {
   children: ReactNode;
 }
 
@@ -11,10 +12,7 @@ interface State {
   error: Error | null;
 }
 
-/**
- * 错误边界组件：捕获子组件树中的 JavaScript 错误
- */
-export class ErrorBoundary extends Component<Props, State> {
+class ErrorBoundaryBase extends Component<Props, State> {
   state: State = {
     hasError: false,
     error: null,
@@ -39,6 +37,7 @@ export class ErrorBoundary extends Component<Props, State> {
   };
 
   render() {
+    const { t } = this.props;
     if (this.state.hasError) {
       return (
         <div className="flex flex-col items-center justify-center mt-16 mx-auto max-w-md">
@@ -46,10 +45,10 @@ export class ErrorBoundary extends Component<Props, State> {
             <div className="flex h-16 w-16 items-center justify-center rounded-full bg-destructive/10 text-destructive mx-auto mb-4">
               <AlertCircle className="h-8 w-8" />
             </div>
-            <h2 className="text-xl font-extrabold text-destructive mb-2">糟糕，出了点问题</h2>
-            <p className="text-sm text-muted-foreground mb-6">
-              应用遇到了一些意外错误。您可以尝试刷新页面或重置应用。
-            </p>
+            <h2 className="text-xl font-extrabold text-destructive mb-2">
+              {t('errorBoundary.title')}
+            </h2>
+            <p className="text-sm text-muted-foreground mb-6">{t('errorBoundary.description')}</p>
             {this.state.error && (
               <div className="mb-6 p-4 rounded-lg bg-zinc-950 dark:bg-zinc-900 text-left max-h-[200px] overflow-auto border border-border/40">
                 <pre className="font-mono text-xs whitespace-pre-wrap break-all text-zinc-200 selection:bg-zinc-700">
@@ -63,7 +62,7 @@ export class ErrorBoundary extends Component<Props, State> {
               className="rounded-lg font-bold shadow-sm"
             >
               <RefreshCw className="mr-2 h-4 w-4" />
-              刷新应用
+              {t('errorBoundary.refresh')}
             </Button>
           </div>
         </div>
@@ -74,4 +73,5 @@ export class ErrorBoundary extends Component<Props, State> {
   }
 }
 
+export const ErrorBoundary = withTranslation('common')(ErrorBoundaryBase);
 export default ErrorBoundary;