feat(frontend): add origin error page settings under websites

frontend/lib/navigation/openflare-nav.ts

@@ -60,6 +60,7 @@ export const openflareWebsiteNavGroup: OpenFlareNavGroup = {
       childUrls: ['/cloudflare/settings'],
     },
     { title: '源站地址', url: '/origins', childUrls: ['/origins/detail'] },
+    { title: '错误页', url: '/error-pages' },
   ],
 };
 
@@ -115,6 +116,7 @@ export const openflareWebsiteSubNav = [
   { title: '证书', url: '/certificates' },
   { title: 'DNS 账号', url: '/dns-accounts' },
   { title: 'Cloudflare', url: '/cloudflare' },
+  { title: '错误页', url: '/error-pages' },
 ] as const;
 
 const nonConsoleRoutePrefixes = [

frontend/lib/openflare/default-origin-error-page-html.ts

@@ -0,0 +1,95 @@
+/**
+ * Built-in Cloudflare-style origin error page.
+ * Keep in sync with Go DefaultOriginErrorPageHTML in
+ * pkg/render/openresty/origin_error_page.go
+ */
+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>
+`;
+
+/** Max HTML size in bytes (aligned with backend 256 KiB). */
+export const ORIGIN_ERROR_PAGE_HTML_MAX_BYTES = 256 * 1024;
+
+export function effectiveOriginErrorPageHTML(html: string): string {
+  return html.trim() === '' ? DEFAULT_ORIGIN_ERROR_PAGE_HTML : html;
+}
+
+export function previewOriginErrorPageHTML(
+  html: string,
+  status = '502',
+  host = 'example.com',
+): string {
+  return effectiveOriginErrorPageHTML(html)
+    .replaceAll('{{status}}', status)
+    .replaceAll('{{host}}', host);
+}

frontend/lib/openflare/status-code-tags.ts

@@ -0,0 +1,100 @@
+/** Matches pkg/render/openresty StatusCodeMin / StatusCodeMax. */
+export const STATUS_CODE_MIN = 400;
+export const STATUS_CODE_MAX = 599;
+
+export const DEFAULT_ORIGIN_ERROR_PAGE_STATUS_TAGS = ['500-599'] as const;
+
+/**
+ * Parse a single tag such as "502" or "500-599".
+ * Bounds must fall within 400–599 inclusive (aligned with Go ParseStatusCodeTag).
+ */
+export function parseStatusCodeTag(tag: string): {
+  lo: number;
+  hi: number;
+} {
+  const trimmed = tag.trim();
+  if (!trimmed) {
+    throw new Error('状态码标签不能为空');
+  }
+
+  let lo: number;
+  let hi: number;
+
+  const dash = trimmed.indexOf('-');
+  if (dash >= 0) {
+    lo = Number.parseInt(trimmed.slice(0, dash), 10);
+    hi = Number.parseInt(trimmed.slice(dash + 1), 10);
+    if (Number.isNaN(lo) || Number.isNaN(hi)) {
+      throw new Error(`无效状态码区间: ${trimmed}`);
+    }
+  } else {
+    lo = Number.parseInt(trimmed, 10);
+    if (Number.isNaN(lo)) {
+      throw new Error(`无效状态码: ${trimmed}`);
+    }
+    hi = lo;
+  }
+
+  if (lo > hi) {
+    throw new Error(`状态码区间左右端点反序: ${trimmed}`);
+  }
+  if (lo < STATUS_CODE_MIN || hi > STATUS_CODE_MAX) {
+    throw new Error(
+      `状态码须在 ${STATUS_CODE_MIN}–${STATUS_CODE_MAX}: ${trimmed}`,
+    );
+  }
+
+  return { lo, hi };
+}
+
+/** Expand tags into a sorted unique list of integers. */
+export function expandStatusCodeTags(tags: string[]): number[] {
+  const set = new Set<number>();
+  for (const tag of tags) {
+    const { lo, hi } = parseStatusCodeTag(tag);
+    for (let code = lo; code <= hi; code += 1) {
+      set.add(code);
+    }
+  }
+  return Array.from(set).sort((a, b) => a - b);
+}
+
+/** Soft validator for TagsInput: returns error message or null if ok. */
+export function validateStatusCodeTagMessage(tag: string): string | null {
+  try {
+    parseStatusCodeTag(tag);
+    return null;
+  } catch (error) {
+    return error instanceof Error ? error.message : '无效状态码标签';
+  }
+}
+
+/** Validate a full tag list before save (must be non-empty and expand cleanly). */
+export function validateStatusCodeTags(tags: string[]): void {
+  if (tags.length === 0) {
+    throw new Error('请至少添加一个状态码标签');
+  }
+  const codes = expandStatusCodeTags(tags);
+  if (codes.length === 0) {
+    throw new Error('状态码展开结果为空');
+  }
+}
+
+export function parseStatusCodeTagsJSON(raw: string | undefined): string[] {
+  if (!raw || !raw.trim()) {
+    return [...DEFAULT_ORIGIN_ERROR_PAGE_STATUS_TAGS];
+  }
+  try {
+    const parsed = JSON.parse(raw) as unknown;
+    if (!Array.isArray(parsed)) {
+      return [...DEFAULT_ORIGIN_ERROR_PAGE_STATUS_TAGS];
+    }
+    const tags = parsed
+      .filter((item): item is string => typeof item === 'string')
+      .map((item) => item.trim())
+      .filter(Boolean);
+    return tags.length > 0 ? tags : [...DEFAULT_ORIGIN_ERROR_PAGE_STATUS_TAGS];
+  } catch {
+    return [...DEFAULT_ORIGIN_ERROR_PAGE_STATUS_TAGS];
+  }
+}

frontend/lib/utils/search-data.ts

@@ -130,6 +130,23 @@ export const searchData: SearchItem[] = [
     category: 'page',
     keywords: ['origin', '源站', '后端', 'backend', '服务器', '负载均衡'],
   },
+  {
+    id: 'console-error-pages',
+    title: '错误页',
+    description: '配置源站错误状态码触发的统一 HTML 错误页',
+    url: '/error-pages',
+    category: 'page',
+    keywords: [
+      '错误页',
+      '源站',
+      '502',
+      '503',
+      '5xx',
+      'error page',
+      'origin error',
+      'error_page',
+    ],
+  },
   {
     id: 'console-waf',
     title: 'WAF 防火墙',