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:
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user