mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-10-08 00:26:37 +08:00
refactor(error-pages): preset templates with OpenFlare branding
This commit is contained in:
@@ -60,7 +60,11 @@ export const openflareWebsiteNavGroup: OpenFlareNavGroup = {
|
||||
childUrls: ['/cloudflare/settings'],
|
||||
},
|
||||
{ title: '源站地址', url: '/origins', childUrls: ['/origins/detail'] },
|
||||
{ title: '错误页', url: '/error-pages' },
|
||||
{
|
||||
title: '错误页',
|
||||
url: '/error-pages',
|
||||
childUrls: ['/error-pages/edit', '/error-pages/preview'],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
|
||||
@@ -1,81 +1,14 @@
|
||||
import {
|
||||
DEFAULT_ORIGIN_ERROR_PAGE_TEMPLATE_ID,
|
||||
getOriginErrorPageTemplate,
|
||||
} from '@/lib/openflare/origin-error-page-templates';
|
||||
|
||||
/**
|
||||
* Built-in Cloudflare-style origin error page.
|
||||
* Keep in sync with Go DefaultOriginErrorPageHTML in
|
||||
* pkg/render/openresty/origin_error_page.go
|
||||
* 预览/回退用的默认 HTML:与内置模板目录中的 minimalist 对齐。
|
||||
* 边缘侧空配置时的默认页仍由 Go DefaultOriginErrorPageHTML 提供。
|
||||
*/
|
||||
export const DEFAULT_ORIGIN_ERROR_PAGE_HTML = `<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{{status}} | 源站暂时无法提供服务</title>
|
||||
<style>
|
||||
:root { color-scheme: light dark; }
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
|
||||
background: #f6f7f9;
|
||||
color: #1f2937;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body { background: #0f1419; color: #e5e7eb; }
|
||||
.card { background: #1a2332; border-color: #2d3a4d; box-shadow: none; }
|
||||
.status { color: #f3f4f6; }
|
||||
.muted { color: #9ca3af; }
|
||||
.host { background: #243044; color: #d1d5db; }
|
||||
}
|
||||
.card {
|
||||
width: min(32rem, calc(100% - 2rem));
|
||||
padding: 2.5rem 2rem;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
border: 1px solid #e5e7eb;
|
||||
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
|
||||
text-align: center;
|
||||
}
|
||||
.status {
|
||||
margin: 0;
|
||||
font-size: clamp(3.5rem, 12vw, 5.5rem);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 1;
|
||||
color: #111827;
|
||||
}
|
||||
h1 {
|
||||
margin: 1rem 0 0.5rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
p { margin: 0.4rem 0; line-height: 1.6; }
|
||||
.muted { color: #6b7280; font-size: 0.95rem; }
|
||||
.host {
|
||||
display: inline-block;
|
||||
margin-top: 1.25rem;
|
||||
padding: 0.35rem 0.75rem;
|
||||
border-radius: 999px;
|
||||
background: #f3f4f6;
|
||||
color: #374151;
|
||||
font-size: 0.85rem;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="card" role="main">
|
||||
<p class="status" aria-label="HTTP status">{{status}}</p>
|
||||
<h1>源站暂时无法提供服务</h1>
|
||||
<p class="muted">网关已拦截源站错误响应。请稍后重试;若问题持续,请联系站点管理员。</p>
|
||||
<p class="host">{{host}}</p>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
export const DEFAULT_ORIGIN_ERROR_PAGE_HTML =
|
||||
getOriginErrorPageTemplate(DEFAULT_ORIGIN_ERROR_PAGE_TEMPLATE_ID)?.html ?? '';
|
||||
|
||||
/** Max HTML size in bytes (aligned with backend 256 KiB). */
|
||||
export const ORIGIN_ERROR_PAGE_HTML_MAX_BYTES = 256 * 1024;
|
||||
|
||||
@@ -0,0 +1,293 @@
|
||||
/** 内置错误页模板:baohaus(包豪斯风格) */
|
||||
const html = `
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{status}} | OpenFlare</title>
|
||||
<style>
|
||||
:root {
|
||||
--color-red: #E53935;
|
||||
--color-yellow: #FDD835;
|
||||
--color-blue: #1E88E5;
|
||||
--color-black: #212121;
|
||||
--color-white: #FAFAFA;
|
||||
--color-grey: #9E9E9E;
|
||||
--font-primary: 'Futura', 'Century Gothic', 'Tw Cen MT', sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--color-white);
|
||||
color: var(--color-black);
|
||||
font-family: var(--font-primary);
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: radial-gradient(var(--color-grey) 1px, transparent 1px);
|
||||
background-size: 20px 20px;
|
||||
opacity: 0.15;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.layout-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1.618fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.zone-left {
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 1 / 3;
|
||||
border-right: 4px solid var(--color-black);
|
||||
border-bottom: 4px solid var(--color-black);
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: var(--color-white);
|
||||
padding: 2rem;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.decor-circle {
|
||||
position: absolute;
|
||||
width: 40vh;
|
||||
height: 40vh;
|
||||
background-color: var(--color-yellow);
|
||||
border-radius: 50%;
|
||||
top: 15%;
|
||||
left: 10%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.error-number {
|
||||
font-size: clamp(6rem, 12vw, 14rem);
|
||||
font-weight: 700;
|
||||
line-height: 0.9;
|
||||
letter-spacing: -0.04em;
|
||||
color: var(--color-black);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.brand-footer {
|
||||
position: absolute;
|
||||
bottom: 2rem;
|
||||
left: 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.brand-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
fill: var(--color-black);
|
||||
}
|
||||
|
||||
.brand-text {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.15em;
|
||||
}
|
||||
|
||||
.zone-top-right {
|
||||
grid-column: 2 / 3;
|
||||
grid-row: 1 / 2;
|
||||
border-bottom: 4px solid var(--color-black);
|
||||
background-color: var(--color-white);
|
||||
padding: 4rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.error-title {
|
||||
font-size: clamp(1.5rem, 3vw, 2.5rem);
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1.5rem;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.error-desc {
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.6;
|
||||
max-width: 450px;
|
||||
color: var(--color-black);
|
||||
}
|
||||
|
||||
.meta-data {
|
||||
margin-top: 2rem;
|
||||
font-family: monospace;
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-grey);
|
||||
border-top: 1px solid var(--color-grey);
|
||||
padding-top: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.zone-bottom-right {
|
||||
grid-column: 2 / 3;
|
||||
grid-row: 2 / 3;
|
||||
background-color: var(--color-white);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.geo-line {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background-color: var(--color-black);
|
||||
top: 50%;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.geo-triangle {
|
||||
position: absolute;
|
||||
right: 15%;
|
||||
bottom: 15%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 80px solid transparent;
|
||||
border-right: 80px solid transparent;
|
||||
border-bottom: 140px solid var(--color-blue);
|
||||
}
|
||||
|
||||
.geo-rect {
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 20%;
|
||||
width: 150px;
|
||||
height: 30px;
|
||||
background-color: var(--color-red);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.layout-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.zone-left {
|
||||
border-right: none;
|
||||
border-bottom: 4px solid var(--color-black);
|
||||
min-height: 50vh;
|
||||
padding-top: 4rem;
|
||||
}
|
||||
|
||||
.decor-circle {
|
||||
width: 30vh;
|
||||
height: 30vh;
|
||||
top: 10%;
|
||||
}
|
||||
|
||||
.zone-top-right {
|
||||
border-bottom: 4px solid var(--color-black);
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.zone-bottom-right {
|
||||
min-height: 30vh;
|
||||
}
|
||||
|
||||
.geo-triangle {
|
||||
border-left-width: 50px;
|
||||
border-right-width: 50px;
|
||||
border-bottom-width: 90px;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.geo-rect {
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
left: 15%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="layout-container">
|
||||
<div class="zone-left">
|
||||
<div class="decor-circle"></div>
|
||||
<div class="error-number" aria-label="HTTP status">{{status}}</div>
|
||||
|
||||
<div class="brand-footer">
|
||||
<svg class="brand-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
|
||||
</svg>
|
||||
<span class="brand-text">OpenFlare</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="zone-top-right">
|
||||
<h1 class="error-title">Origin Unavailable</h1>
|
||||
<p class="error-desc">
|
||||
The server received an invalid response from the upstream server.
|
||||
<br><br>
|
||||
<strong>Form follows function:</strong> The connection path is broken. Please verify the origin server status.
|
||||
</p>
|
||||
<div class="meta-data">
|
||||
<div>ERR_CODE: {{status}}</div>
|
||||
<div>HOST: {{host}}</div>
|
||||
<div>PROXY: OPENFLARE_EDGE</div>
|
||||
<div id="timestamp">--:--:-- UTC</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="zone-bottom-right">
|
||||
<div class="geo-line"></div>
|
||||
<div class="geo-rect"></div>
|
||||
<div class="geo-triangle"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const tsElement = document.getElementById('timestamp');
|
||||
if (tsElement) {
|
||||
const now = new Date();
|
||||
tsElement.textContent = now.toISOString().split('T')[1].split('.')[0] + ' UTC';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
|
||||
export default html;
|
||||
@@ -0,0 +1,46 @@
|
||||
/**
|
||||
* 内置源站错误页 HTML 模板目录。
|
||||
* 每个模板对应本目录下一个独立 `.ts` 模块(export default 完整 HTML 字符串)。
|
||||
* 新增模板:新增 `*.ts` 并在下方数组注册。
|
||||
*
|
||||
* 模板须使用占位符 {{status}} / {{host}},禁止写死状态码。
|
||||
*/
|
||||
import baohausHtml from './baohaus';
|
||||
import lineStyleHtml from './line-style';
|
||||
import minimalistHtml from './minimalist';
|
||||
|
||||
export type OriginErrorPageTemplate = {
|
||||
/** 稳定 ID,与文件名一致 */
|
||||
id: string;
|
||||
/** 下拉展示名称 */
|
||||
name: string;
|
||||
/** 完整 HTML,含 {{status}} / {{host}} */
|
||||
html: string;
|
||||
};
|
||||
|
||||
export const ORIGIN_ERROR_PAGE_TEMPLATES: OriginErrorPageTemplate[] = [
|
||||
{
|
||||
id: 'minimalist',
|
||||
name: '极简白底',
|
||||
html: minimalistHtml,
|
||||
},
|
||||
{
|
||||
id: 'line-style',
|
||||
name: '线框拓扑',
|
||||
html: lineStyleHtml,
|
||||
},
|
||||
{
|
||||
id: 'baohaus',
|
||||
name: '包豪斯',
|
||||
html: baohausHtml,
|
||||
},
|
||||
];
|
||||
|
||||
/** 默认预制模板(前端预览空 HTML 回退 & 加载模板默认选中) */
|
||||
export const DEFAULT_ORIGIN_ERROR_PAGE_TEMPLATE_ID = 'minimalist';
|
||||
|
||||
export function getOriginErrorPageTemplate(
|
||||
id: string,
|
||||
): OriginErrorPageTemplate | undefined {
|
||||
return ORIGIN_ERROR_PAGE_TEMPLATES.find((item) => item.id === id);
|
||||
}
|
||||
@@ -0,0 +1,309 @@
|
||||
/** 内置错误页模板:line-style */
|
||||
const html = `
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{status}} | OpenFlare</title>
|
||||
<style>
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--color-bg: #fcfcfc;
|
||||
--color-line: #e0e0e0;
|
||||
--color-line-hover: #1a1a1a;
|
||||
--color-text-main: #1a1a1a;
|
||||
--color-text-sub: #666666;
|
||||
--color-text-muted: #999999;
|
||||
--color-accent: #d4d4d4;
|
||||
--font-geo: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||||
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-geo);
|
||||
background-color: var(--color-bg);
|
||||
background-image: radial-gradient(circle, var(--color-accent) 0.8px, transparent 0.8px);
|
||||
background-size: 24px 24px;
|
||||
color: var(--color-text-main);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 48px 24px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
width: 100%;
|
||||
max-width: 640px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 48px;
|
||||
}
|
||||
|
||||
.line-box {
|
||||
border: 1px solid var(--color-line);
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
backdrop-filter: blur(4px);
|
||||
padding: 32px;
|
||||
transition: all var(--transition-fast);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.line-box:hover {
|
||||
border-color: var(--color-line-hover);
|
||||
box-shadow: 0 0 0 1px var(--color-line-hover);
|
||||
}
|
||||
|
||||
.line-box:active {
|
||||
transform: scale(0.995);
|
||||
transition-duration: 100ms;
|
||||
}
|
||||
|
||||
.error-header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.error-code {
|
||||
font-size: 64px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.03em;
|
||||
color: var(--color-text-main);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.error-label {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-text-sub);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.error-label::before,
|
||||
.error-label::after {
|
||||
content: '';
|
||||
width: 24px;
|
||||
height: 1px;
|
||||
background-color: var(--color-line);
|
||||
}
|
||||
|
||||
.topology-wrapper {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.topology-svg {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.node-circle {
|
||||
fill: var(--color-bg);
|
||||
stroke: var(--color-text-main);
|
||||
stroke-width: 1.5;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.node-circle.error {
|
||||
stroke: var(--color-text-muted);
|
||||
stroke-dasharray: 3 3;
|
||||
}
|
||||
|
||||
.flow-line {
|
||||
stroke: var(--color-accent);
|
||||
stroke-width: 1.5;
|
||||
fill: none;
|
||||
transition: stroke var(--transition-fast);
|
||||
}
|
||||
|
||||
.flow-line.error {
|
||||
stroke: var(--color-text-muted);
|
||||
stroke-dasharray: 4 4;
|
||||
}
|
||||
|
||||
.node-text {
|
||||
font-family: var(--font-geo);
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.1em;
|
||||
fill: var(--color-text-sub);
|
||||
text-anchor: middle;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-family: var(--font-geo);
|
||||
font-size: 9px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.05em;
|
||||
fill: var(--color-text-muted);
|
||||
text-anchor: middle;
|
||||
}
|
||||
|
||||
.status-text.error {
|
||||
fill: #b0b0b0;
|
||||
}
|
||||
|
||||
.description {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.desc-text {
|
||||
font-size: 18px;
|
||||
line-height: 1.6;
|
||||
color: var(--color-text-sub);
|
||||
font-weight: 400;
|
||||
max-width: 480px;
|
||||
margin: 0 auto 24px;
|
||||
}
|
||||
|
||||
.meta-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
border-top: 1px solid var(--color-line);
|
||||
padding-top: 24px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.meta-key {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.meta-val {
|
||||
font-size: 13px;
|
||||
font-family: 'SF Mono', 'Fira Code', monospace, var(--font-geo);
|
||||
color: var(--color-text-main);
|
||||
font-weight: 500;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.footer-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.05em;
|
||||
transition: color var(--transition-fast);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.footer-brand:hover {
|
||||
color: var(--color-text-main);
|
||||
}
|
||||
|
||||
.brand-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
stroke: currentColor;
|
||||
stroke-width: 1.5;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
body {
|
||||
padding: 32px 16px;
|
||||
}
|
||||
.error-code {
|
||||
font-size: 48px;
|
||||
}
|
||||
.line-box {
|
||||
padding: 24px 16px;
|
||||
}
|
||||
.meta-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="main-container">
|
||||
<div class="line-box error-header">
|
||||
<div class="error-code" aria-label="HTTP status">{{status}}</div>
|
||||
<div class="error-label">Origin Unavailable</div>
|
||||
</div>
|
||||
|
||||
<div class="line-box topology-wrapper">
|
||||
<svg class="topology-svg" viewBox="0 0 600 140" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<defs>
|
||||
<marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
|
||||
<path d="M 0 1 L 8 5 L 0 9 z" fill="#d4d4d4" />
|
||||
</marker>
|
||||
<marker id="arrow-error" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
|
||||
<path d="M 0 1 L 8 5 L 0 9 z" fill="#999999" />
|
||||
</marker>
|
||||
</defs>
|
||||
|
||||
<line x1="135" y1="70" x2="265" y2="70" class="flow-line" marker-end="url(#arrow)" />
|
||||
<line x1="335" y1="70" x2="465" y2="70" class="flow-line error" marker-end="url(#arrow-error)" />
|
||||
|
||||
<circle cx="110" cy="70" r="20" class="node-circle" />
|
||||
<text x="110" y="74" class="node-text" style="font-size: 8px; fill: #1a1a1a;">CLI</text>
|
||||
<text x="110" y="115" class="node-text">CLIENT</text>
|
||||
<text x="110" y="130" class="status-text">REQ_SENT</text>
|
||||
|
||||
<circle cx="300" cy="70" r="20" class="node-circle" />
|
||||
<path d="M296 70 L304 64 L301 70 L305 70 L296 76 L299 70 Z" fill="none" stroke="#1a1a1a" stroke-width="1" stroke-linejoin="round"/>
|
||||
<text x="300" y="115" class="node-text">OPENFLARE</text>
|
||||
<text x="300" y="130" class="status-text">EDGE_PROXY</text>
|
||||
|
||||
<circle cx="490" cy="70" r="20" class="node-circle error" />
|
||||
<line x1="484" y1="64" x2="496" y2="76" stroke="#999" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<line x1="496" y1="64" x2="484" y2="76" stroke="#999" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<text x="490" y="115" class="node-text" style="fill: #999;">ORIGIN</text>
|
||||
<text x="490" y="130" class="status-text error">UNAVAILABLE</text>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="footer-brand">
|
||||
<svg class="brand-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
|
||||
</svg>
|
||||
<span>OpenFlare</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const tsEl = document.getElementById('timestamp');
|
||||
if (tsEl) {
|
||||
const now = new Date();
|
||||
tsEl.textContent = now.toISOString().replace('T', ' ').substring(0, 19) + ' UTC';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
|
||||
export default html;
|
||||
@@ -0,0 +1,109 @@
|
||||
/** 内置错误页模板:minimalist(默认) */
|
||||
const html = `
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{status}} | OpenFlare</title>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
background-color: #ffffff;
|
||||
color: #333333;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 48px 24px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.error-code {
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
color: #333333;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.error-description {
|
||||
font-size: 20px;
|
||||
line-height: 1.6;
|
||||
color: #666666;
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
.host {
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
color: #999999;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.brand-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
fill: currentColor;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.error-code {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.error-description {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1 class="error-code" aria-label="HTTP status">{{status}}</h1>
|
||||
<p class="error-description">
|
||||
The upstream server is unreachable. Please try again later or contact the site administrator if the problem persists.
|
||||
</p>
|
||||
<p class="host">{{host}}</p>
|
||||
<div class="footer">
|
||||
<svg class="brand-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="M13 2L3 14H12L11 22L21 10H12L13 2Z" />
|
||||
</svg>
|
||||
<span>OpenFlare</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
|
||||
export default html;
|
||||
Reference in New Issue
Block a user