Jesse_Chen
e8fa1ce4ea
Dark muted surfaces missed WCAG AA; action and tertiary tokens plus a 32-pair contract close that. Hit targets, remaining-count, and Enter-to-send follow the interaction audit without changing visual sizes. Co-authored-by: Cursor <cursoragent@cursor.com>
135 lines
3.9 KiB
TypeScript
135 lines
3.9 KiB
TypeScript
"use client";
|
||
|
||
const canvas = "var(--bp-canvas)";
|
||
const ink = "var(--bp-ink)";
|
||
const inkSecondary = "var(--bp-ink-soft)";
|
||
const danger = "var(--bp-danger)";
|
||
const border = "var(--bp-border)";
|
||
const action = "var(--bp-action)";
|
||
const focus = "var(--bp-action)";
|
||
|
||
const actionStyle = {
|
||
alignItems: "center",
|
||
borderRadius: "12px",
|
||
display: "inline-flex",
|
||
fontSize: "14px",
|
||
fontWeight: 500,
|
||
justifyContent: "center",
|
||
minHeight: "44px",
|
||
minWidth: "88px",
|
||
padding: "0 20px",
|
||
} as const;
|
||
|
||
export default function GlobalError({
|
||
error,
|
||
reset,
|
||
}: {
|
||
error: Error & { digest?: string };
|
||
reset: () => void;
|
||
}) {
|
||
return (
|
||
<html lang="zh-CN">
|
||
<body
|
||
style={{
|
||
alignItems: "center",
|
||
background: canvas,
|
||
color: ink,
|
||
display: "flex",
|
||
fontFamily:
|
||
'-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif',
|
||
justifyContent: "center",
|
||
margin: 0,
|
||
minHeight: "100vh",
|
||
padding: "24px",
|
||
}}
|
||
>
|
||
<style>{`
|
||
:root {
|
||
color-scheme: light;
|
||
--bp-canvas: #fbfaf7;
|
||
--bp-ink: #1d1d1f;
|
||
--bp-ink-soft: #5f5f59;
|
||
--bp-border: #d8d6cf;
|
||
--bp-action: #85432f;
|
||
--bp-danger: #9a2f2f;
|
||
}
|
||
@media (prefers-color-scheme: dark) {
|
||
:root:not([data-theme="light"]) {
|
||
color-scheme: dark;
|
||
--bp-canvas: #262624;
|
||
--bp-ink: #f2f0ea;
|
||
--bp-ink-soft: #b3afa4;
|
||
--bp-border: #3c3b37;
|
||
--bp-action: #d78064;
|
||
--bp-danger: #e08573;
|
||
}
|
||
}
|
||
:root[data-theme="dark"] {
|
||
color-scheme: dark;
|
||
--bp-canvas: #262624;
|
||
--bp-ink: #f2f0ea;
|
||
--bp-ink-soft: #b3afa4;
|
||
--bp-border: #3c3b37;
|
||
--bp-action: #d78064;
|
||
--bp-danger: #e08573;
|
||
}
|
||
.global-error-action:focus-visible { outline: 3px solid ${focus}; outline-offset: 2px; }
|
||
`}</style>
|
||
<main style={{ maxWidth: "32rem", textAlign: "center" }}>
|
||
<div role="alert">
|
||
<h1 style={{ color: danger, fontSize: "20px", fontWeight: 600, margin: "0 0 12px" }}>
|
||
应用加载失败
|
||
</h1>
|
||
<p style={{ color: inkSecondary, fontSize: "14px", lineHeight: 1.7, margin: 0 }}>
|
||
页面框架发生异常，暂时无法显示内容。可以重试，或稍后再回来。
|
||
</p>
|
||
</div>
|
||
{error.digest ? (
|
||
<p style={{ color: inkSecondary, fontSize: "12px", lineHeight: 1.7, margin: "12px 0 0" }}>
|
||
错误编号 {error.digest}，反馈问题时请一并提供。
|
||
</p>
|
||
) : null}
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
flexWrap: "wrap",
|
||
gap: "12px",
|
||
justifyContent: "center",
|
||
marginTop: "24px",
|
||
}}
|
||
>
|
||
<button
|
||
className="global-error-action"
|
||
onClick={() => reset()}
|
||
style={{
|
||
...actionStyle,
|
||
background: action,
|
||
border: "1px solid transparent",
|
||
color: canvas,
|
||
cursor: "pointer",
|
||
}}
|
||
type="button"
|
||
>
|
||
重试
|
||
</button>
|
||
<button
|
||
className="global-error-action"
|
||
onClick={() => window.location.assign("/")}
|
||
style={{
|
||
...actionStyle,
|
||
background: canvas,
|
||
border: `1px solid ${border}`,
|
||
color: ink,
|
||
cursor: "pointer",
|
||
}}
|
||
type="button"
|
||
>
|
||
返回对话
|
||
</button>
|
||
</div>
|
||
</main>
|
||
</body>
|
||
</html>
|
||
);
|
||
}
|