fix(ErrorBoundary): use shadcn destructive tokens instead of hardcoded red colors

Replace hardcoded red-200/red-50/red-600 with border-destructive,
bg-destructive/5, text-destructive. Use variant='destructive' on
Button. Align error log styling with PageErrorBoundary.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
雨霖铃
2026-05-27 13:48:30 +08:00
parent 601260797e
commit e005d4d95d
+10 -8
View File
@@ -41,24 +41,26 @@ export class ErrorBoundary extends Component<Props, State> {
render() { render() {
if (this.state.hasError) { if (this.state.hasError) {
return ( return (
<div className="mt-16 mx-auto max-w-md"> <div className="flex flex-col items-center justify-center mt-16 mx-auto max-w-md">
<div className="p-6 text-center rounded-xl border border-red-200 bg-red-50"> <div className="p-6 text-center rounded-xl border border-destructive/20 bg-destructive/5 shadow-sm">
<AlertCircle className="h-16 w-16 text-red-500 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">
<h2 className="text-xl font-extrabold text-red-600 mb-2"></h2> <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 className="text-sm text-muted-foreground mb-6">
</p> </p>
{this.state.error && ( {this.state.error && (
<div className="mb-6 p-4 bg-muted rounded-lg text-left max-h-[200px] overflow-auto"> <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-red-700"> <pre className="font-mono text-xs whitespace-pre-wrap break-all text-zinc-200 selection:bg-zinc-700">
{this.state.error.toString()} {this.state.error.toString()}
</pre> </pre>
</div> </div>
)} )}
<Button <Button
variant="default" variant="destructive"
onClick={this.handleReset} onClick={this.handleReset}
className="rounded-lg font-bold bg-red-600 hover:bg-red-700 text-white" className="rounded-lg font-bold shadow-sm"
> >
<RefreshCw className="mr-2 h-4 w-4" /> <RefreshCw className="mr-2 h-4 w-4" />