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>
This commit is contained in:
雨霖铃
2026-05-27 14:10:11 +08:00
parent 0908358f97
commit f40485e2dc
+10 -10
View File
@@ -1,8 +1,9 @@
import { Component, ErrorInfo, ReactNode } from 'react'; import { Component, ErrorInfo, ReactNode } from 'react';
import { withTranslation, type WithTranslation } from 'react-i18next';
import { AlertCircle, RefreshCw } from 'lucide-react'; import { AlertCircle, RefreshCw } from 'lucide-react';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
interface Props { interface Props extends WithTranslation {
children: ReactNode; children: ReactNode;
} }
@@ -11,10 +12,7 @@ interface State {
error: Error | null; error: Error | null;
} }
/** class ErrorBoundaryBase extends Component<Props, State> {
* 错误边界组件:捕获子组件树中的 JavaScript 错误
*/
export class ErrorBoundary extends Component<Props, State> {
state: State = { state: State = {
hasError: false, hasError: false,
error: null, error: null,
@@ -39,6 +37,7 @@ export class ErrorBoundary extends Component<Props, State> {
}; };
render() { render() {
const { t } = this.props;
if (this.state.hasError) { if (this.state.hasError) {
return ( return (
<div className="flex flex-col items-center justify-center mt-16 mx-auto max-w-md"> <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"> <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" /> <AlertCircle className="h-8 w-8" />
</div> </div>
<h2 className="text-xl font-extrabold text-destructive mb-2"></h2> <h2 className="text-xl font-extrabold text-destructive mb-2">
<p className="text-sm text-muted-foreground mb-6"> {t('errorBoundary.title')}
</h2>
</p> <p className="text-sm text-muted-foreground mb-6">{t('errorBoundary.description')}</p>
{this.state.error && ( {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"> <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"> <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" className="rounded-lg font-bold shadow-sm"
> >
<RefreshCw className="mr-2 h-4 w-4" /> <RefreshCw className="mr-2 h-4 w-4" />
{t('errorBoundary.refresh')}
</Button> </Button>
</div> </div>
</div> </div>
@@ -74,4 +73,5 @@ export class ErrorBoundary extends Component<Props, State> {
} }
} }
export const ErrorBoundary = withTranslation('common')(ErrorBoundaryBase);
export default ErrorBoundary; export default ErrorBoundary;