From f083da20f2556fa4b8519f964b9d867615a7c3bf Mon Sep 17 00:00:00 2001
From: ryan <ryan@arctel.net>
Date: Sat, 8 Aug 2026 21:18:53 +0800
Subject: [PATCH] feat(frontend): add dedicated edit and preview routes for
 response pages and sync tab state to url

---
 docs/changelog/index.md                       |   2 +
 .../responses/components/contact-page-tab.tsx |  48 ++--
 .../responses/components/error-page-tab.tsx   |  66 +++--
 .../(main)/responses/contact/edit/page.tsx    | 200 +++++++++++++
 .../(main)/responses/contact/preview/page.tsx | 115 ++++++++
 .../(main)/responses/error-page/edit/page.tsx | 262 ++++++++++++++++++
 .../responses/error-page/preview/page.tsx     | 118 ++++++++
 frontend/app/(main)/responses/page.tsx        |  56 +++-
 frontend/lib/navigation/openflare-nav.ts      |   7 +-
 frontend/lib/theme/themes.json                |   2 +-
 10 files changed, 829 insertions(+), 47 deletions(-)
 create mode 100644 frontend/app/(main)/responses/contact/edit/page.tsx
 create mode 100644 frontend/app/(main)/responses/contact/preview/page.tsx
 create mode 100644 frontend/app/(main)/responses/error-page/edit/page.tsx
 create mode 100644 frontend/app/(main)/responses/error-page/preview/page.tsx

diff --git a/docs/changelog/index.md b/docs/changelog/index.md
index ebbe7db6..d17c9e8d 100644
--- a/docs/changelog/index.md
+++ b/docs/changelog/index.md
@@ -34,6 +34,8 @@ sidebar: false
 ### 改进
 
 - 响应页面统一：将源站错误页与 Service Worker 离线兜底联系页整合至统一的「响应页面」（`/responses`）标签页中，移除原 `/error-pages` 独立路由。
+- 响应页面 Tab 状态 URL 同步：响应页面（`/responses`）的 Tab 状态增加 URL 查询参数 `tab` 支持，刷新页面时自动保持当前选中的标签页。
+- 响应页面编辑与真实预览独立路由：为「源站错误页」与「离线联系页」提供独立的 `/responses/error-page/edit`、`/responses/error-page/preview`、`/responses/contact/edit` 及 `/responses/contact/preview` 路由入口，恢复默认展示网页预览图、点击编辑进入包含预制模板与代码编辑器的独立编辑页逻辑。
 
 ## [v3.4.5] - 2026-08-08
 
diff --git a/frontend/app/(main)/responses/components/contact-page-tab.tsx b/frontend/app/(main)/responses/components/contact-page-tab.tsx
index 84e67fb8..ec24e2a0 100644
--- a/frontend/app/(main)/responses/components/contact-page-tab.tsx
+++ b/frontend/app/(main)/responses/components/contact-page-tab.tsx
@@ -1,8 +1,9 @@
 'use client';
 
+import Link from 'next/link';
 import { useEffect, useState } from 'react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { Loader2, Plus, Save, X } from 'lucide-react';
+import { Expand, Loader2, Pencil, Plus, Save, X } from 'lucide-react';
 import { toast } from 'sonner';
 
 import { Badge } from '@/components/ui/badge';
@@ -16,13 +17,11 @@ import {
 } from '@/components/ui/card';
 import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
-import { HtmlEditorWorkspace } from '@/components/common/html-editor-workspace';
 import {
   OptionService,
   ZoneService,
   zoneQueryKey,
 } from '@/lib/services/openflare';
-import { cn } from '@/lib/utils';
 
 import { ScopeDomainDialog } from './scope-domain-dialog';
 import {
@@ -180,22 +179,35 @@ export function ContactPageTab({
           </div>
         </CardContent>
       </Card>
-      <Card className='border-dashed shadow-none'>
-        <CardHeader>
-          <CardTitle className='text-base'>联系页 HTML</CardTitle>
-          <CardDescription>留空则使用内置默认模板。</CardDescription>
+      <Card className='border-dashed shadow-none overflow-hidden'>
+        <CardHeader className='flex flex-row items-start justify-between gap-3 space-y-0'>
+          <div className='space-y-1.5'>
+            <CardTitle className='text-base'>页面预览</CardTitle>
+          </div>
+          <div className='flex shrink-0 flex-wrap gap-2'>
+            <Button variant='outline' size='sm' asChild>
+              <Link href='/responses/contact/preview'>
+                <Expand className='size-3.5' />
+                真实预览
+              </Link>
+            </Button>
+            <Button size='sm' asChild>
+              <Link href='/responses/contact/edit'>
+                <Pencil className='size-3.5' />
+                编辑
+              </Link>
+            </Button>
+          </div>
         </CardHeader>
-        <CardContent
-          className={cn(!fields.enabled && 'pointer-events-none opacity-60')}
-        >
-          <HtmlEditorWorkspace
-            value={fields.html}
-            onChange={(v) => setFields((prev) => ({ ...prev, html: v }))}
-            preview={(html) => html}
-            footerHint={null}
-            showPreviewLink={false}
-            previewTitle='离线联系页实时预览'
-          />
+        <CardContent>
+          <div className='overflow-hidden rounded-md border bg-muted/30'>
+            <iframe
+              title='离线联系页预览'
+              sandbox=''
+              srcDoc={fields.html}
+              className='h-[32rem] w-full bg-background'
+            />
+          </div>
         </CardContent>
       </Card>
       <ScopeDomainDialog
diff --git a/frontend/app/(main)/responses/components/error-page-tab.tsx b/frontend/app/(main)/responses/components/error-page-tab.tsx
index 7a126837..f28b61f7 100644
--- a/frontend/app/(main)/responses/components/error-page-tab.tsx
+++ b/frontend/app/(main)/responses/components/error-page-tab.tsx
@@ -1,8 +1,9 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import { useEffect, useMemo, useState } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { Loader2, Save } from 'lucide-react';
+import { Expand, Loader2, Pencil, Save } from 'lucide-react';
 import { toast } from 'sonner';
 
 import { Button } from '@/components/ui/button';
@@ -16,21 +17,18 @@ import {
 import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
 import { TagsInput } from '@/components/ui/tags-input';
-import { HtmlEditorWorkspace } from '@/components/common/html-editor-workspace';
 import { previewOriginErrorPageHTML } from '@/lib/openflare/default-origin-error-page-html';
 import {
   validateStatusCodeTagMessage,
   validateStatusCodeTags,
 } from '@/lib/openflare/status-code-tags';
 import { OptionService } from '@/lib/services/openflare';
-import { cn } from '@/lib/utils';
 
 import {
   defaultErrorPageFields,
   invalidateResponseQueries,
   KEY_ENABLED,
   KEY_GET_ONLY,
-  KEY_HTML,
   KEY_STATUS_CODES,
   mapOptionsToErrorFields,
   type ErrorPageFields,
@@ -42,6 +40,7 @@ export function ErrorPageTab({
   optionMap: Record<string, string>;
 }) {
   const queryClient = useQueryClient();
+
   const [fields, setFields] = useState<ErrorPageFields>(defaultErrorPageFields);
   const [tagError, setTagError] = useState<string | null>(null);
 
@@ -50,7 +49,13 @@ export function ErrorPageTab({
     setTagError(null);
   }, [optionMap]);
 
-  const saveMutation = useMutation({
+  const previewSrcDoc = useMemo(
+    () => previewOriginErrorPageHTML(fields.html),
+    [fields.html],
+  );
+
+  /** 仅保存策略项 */
+  const savePolicyMutation = useMutation({
     mutationFn: async () => {
       validateStatusCodeTags(fields.statusCodes);
       await OptionService.updateBatch([
@@ -60,11 +65,10 @@ export function ErrorPageTab({
           key: KEY_STATUS_CODES,
           value: JSON.stringify(fields.statusCodes),
         },
-        { key: KEY_HTML, value: fields.html },
       ]);
     },
     onSuccess: async () => {
-      toast.success('源站错误页已保存，请前往版本发布使配置生效');
+      toast.success('触发策略已保存，请前往版本发布使配置生效');
       await invalidateResponseQueries(queryClient);
     },
     onError: (error) => {
@@ -96,10 +100,10 @@ export function ErrorPageTab({
           <Button
             size='sm'
             className='shrink-0'
-            disabled={saveMutation.isPending}
-            onClick={() => saveMutation.mutate()}
+            disabled={savePolicyMutation.isPending}
+            onClick={() => savePolicyMutation.mutate()}
           >
-            {saveMutation.isPending ? (
+            {savePolicyMutation.isPending ? (
               <Loader2 className='size-3.5 animate-spin' />
             ) : (
               <Save className='size-3.5' />
@@ -176,19 +180,35 @@ export function ErrorPageTab({
         </CardContent>
       </Card>
 
-      <Card className='border-dashed shadow-none'>
-        <CardHeader>
-          <CardTitle className='text-base'>错误页 HTML</CardTitle>
-          <CardDescription>留空则使用内置默认模板。</CardDescription>
+      <Card className='border-dashed shadow-none overflow-hidden'>
+        <CardHeader className='flex flex-row items-start justify-between gap-3 space-y-0'>
+          <div className='space-y-1.5'>
+            <CardTitle className='text-base'>页面预览</CardTitle>
+          </div>
+          <div className='flex shrink-0 flex-wrap gap-2'>
+            <Button variant='outline' size='sm' asChild>
+              <Link href='/responses/error-page/preview'>
+                <Expand className='size-3.5' />
+                真实预览
+              </Link>
+            </Button>
+            <Button size='sm' asChild>
+              <Link href='/responses/error-page/edit'>
+                <Pencil className='size-3.5' />
+                编辑
+              </Link>
+            </Button>
+          </div>
         </CardHeader>
-        <CardContent
-          className={cn(!fields.enabled && 'pointer-events-none opacity-60')}
-        >
-          <HtmlEditorWorkspace
-            value={fields.html}
-            onChange={(v) => setFields((prev) => ({ ...prev, html: v }))}
-            preview={previewOriginErrorPageHTML}
-          />
+        <CardContent>
+          <div className='overflow-hidden rounded-md border bg-muted/30'>
+            <iframe
+              title='源站错误页预览'
+              sandbox=''
+              srcDoc={previewSrcDoc}
+              className='h-[32rem] w-full bg-background'
+            />
+          </div>
         </CardContent>
       </Card>
     </div>
diff --git a/frontend/app/(main)/responses/contact/edit/page.tsx b/frontend/app/(main)/responses/contact/edit/page.tsx
new file mode 100644
index 00000000..3ea9a55d
--- /dev/null
+++ b/frontend/app/(main)/responses/contact/edit/page.tsx
@@ -0,0 +1,200 @@
+'use client';
+
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { ArrowLeft, FileCode2, Loader2, RotateCcw, Save } from 'lucide-react';
+import { toast } from 'sonner';
+
+import { useAuth } from '@/components/providers/auth-provider';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Button } from '@/components/ui/button';
+import { EmptyStateWithBorder } from '@/components/layout/empty';
+import { ErrorInline } from '@/components/layout/error';
+import { LoadingStateWithBorder } from '@/components/layout/loading';
+import { HtmlEditorWorkspace } from '@/components/common/html-editor-workspace';
+import { OptionService } from '@/lib/services/openflare';
+
+import {
+  invalidateResponseQueries,
+  KEY_SW_HTML,
+  mapOptionsToContactFields,
+  OPTIONS_QUERY_KEY,
+  optionsToMap,
+} from '../../components/shared';
+
+const CONTACT_PAGE_HTML_MAX_BYTES = 256 * 1024;
+
+export default function ContactPageEditPage() {
+  const { user, loading: authLoading } = useAuth();
+  const queryClient = useQueryClient();
+  const [html, setHtml] = useState('');
+  const [restoreOpen, setRestoreOpen] = useState(false);
+
+  const optionsQuery = useQuery({
+    queryKey: OPTIONS_QUERY_KEY,
+    queryFn: () => OptionService.list(),
+    enabled: !!user?.is_admin,
+  });
+
+  useEffect(() => {
+    if (!optionsQuery.data) return;
+    setHtml(mapOptionsToContactFields(optionsToMap(optionsQuery.data)).html);
+  }, [optionsQuery.data]);
+
+  const saveMutation = useMutation({
+    mutationFn: async () => {
+      const bytes = new TextEncoder().encode(html).length;
+      if (bytes > CONTACT_PAGE_HTML_MAX_BYTES) {
+        throw new Error('HTML 大小超出限制（最大 256KB）');
+      }
+      await OptionService.updateBatch([{ key: KEY_SW_HTML, value: html }]);
+    },
+    onSuccess: async () => {
+      toast.success('离线联系页 HTML 已保存，请前往版本发布使配置生效');
+      await invalidateResponseQueries(queryClient);
+    },
+    onError: (error) => {
+      toast.error(error instanceof Error ? error.message : '保存失败');
+    },
+  });
+
+  const restoreDefault = () => {
+    setHtml('');
+    setRestoreOpen(false);
+    toast.success('已清空为使用内置默认模板（需保存后生效）');
+  };
+
+  if (authLoading) {
+    return (
+      <div className='w-full py-6 px-1'>
+        <LoadingStateWithBorder
+          icon={FileCode2}
+          description='加载权限信息...'
+        />
+      </div>
+    );
+  }
+
+  if (!user?.is_admin) {
+    return (
+      <div className='w-full py-6 px-1'>
+        <EmptyStateWithBorder
+          icon={FileCode2}
+          title='权限不足'
+          description='只有管理员可以编辑联系页 HTML。'
+        />
+      </div>
+    );
+  }
+
+  if (optionsQuery.isLoading) {
+    return (
+      <div className='w-full py-6 px-1'>
+        <LoadingStateWithBorder
+          icon={FileCode2}
+          description='加载联系页配置...'
+        />
+      </div>
+    );
+  }
+
+  if (optionsQuery.isError) {
+    return (
+      <div className='w-full py-6 px-1'>
+        <ErrorInline
+          message={
+            optionsQuery.error instanceof Error
+              ? optionsQuery.error.message
+              : '加载失败'
+          }
+          onRetry={() => void optionsQuery.refetch()}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className='flex flex-col gap-4 py-6 px-1'>
+      <div className='flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between'>
+        <div className='flex items-center gap-3'>
+          <Button variant='outline' size='icon' className='h-8 w-8' asChild>
+            <Link href='/responses?tab=contact' aria-label='返回联系页'>
+              <ArrowLeft className='size-4' />
+            </Link>
+          </Button>
+          <div className='flex items-center gap-2'>
+            <FileCode2 className='size-5 text-primary' />
+            <div>
+              <h1 className='text-2xl font-semibold tracking-tight'>
+                编辑离线联系页 HTML
+              </h1>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <HtmlEditorWorkspace
+        value={html}
+        onChange={setHtml}
+        preview={(h) => h}
+        footerHint={null}
+        showPreviewLink={false}
+        previewTitle='离线联系页实时预览'
+        toolbarRight={
+          <>
+            <Button
+              type='button'
+              variant='ghost'
+              size='sm'
+              className='h-7 px-2 text-[11px]'
+              onClick={() => setRestoreOpen(true)}
+            >
+              <RotateCcw className='size-3.5' />
+              恢复默认
+            </Button>
+            <Button
+              size='sm'
+              className='h-7 px-3 text-[11px]'
+              disabled={saveMutation.isPending}
+              onClick={() => saveMutation.mutate()}
+            >
+              {saveMutation.isPending ? (
+                <Loader2 className='size-3 animate-spin' />
+              ) : (
+                <Save className='size-3' />
+              )}
+              保存
+            </Button>
+          </>
+        }
+      />
+
+      <AlertDialog open={restoreOpen} onOpenChange={setRestoreOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>恢复默认 HTML？</AlertDialogTitle>
+            <AlertDialogDescription>
+              将清空编辑器内容，保存后使用内置默认模板。此操作不会自动保存。
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>取消</AlertDialogCancel>
+            <AlertDialogAction onClick={restoreDefault}>
+              确认恢复
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/responses/contact/preview/page.tsx b/frontend/app/(main)/responses/contact/preview/page.tsx
new file mode 100644
index 00000000..2889e1b2
--- /dev/null
+++ b/frontend/app/(main)/responses/contact/preview/page.tsx
@@ -0,0 +1,115 @@
+'use client';
+
+import Link from 'next/link';
+import { useMemo } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { ArrowLeft, Pencil, X } from 'lucide-react';
+
+import { useAuth } from '@/components/providers/auth-provider';
+import { Button } from '@/components/ui/button';
+import { EmptyStateWithBorder } from '@/components/layout/empty';
+import { ErrorInline } from '@/components/layout/error';
+import { LoadingStateWithBorder } from '@/components/layout/loading';
+import { OptionService } from '@/lib/services/openflare';
+
+import {
+  mapOptionsToContactFields,
+  OPTIONS_QUERY_KEY,
+  optionsToMap,
+} from '../../components/shared';
+
+export default function ContactPagePreviewPage() {
+  const { user, loading: authLoading } = useAuth();
+
+  const optionsQuery = useQuery({
+    queryKey: OPTIONS_QUERY_KEY,
+    queryFn: () => OptionService.list(),
+    enabled: !!user?.is_admin,
+  });
+
+  const html = useMemo(() => {
+    if (!optionsQuery.data) return '';
+    return mapOptionsToContactFields(optionsToMap(optionsQuery.data)).html;
+  }, [optionsQuery.data]);
+
+  if (authLoading) {
+    return (
+      <div className='w-full py-6 px-1'>
+        <LoadingStateWithBorder description='加载权限信息...' />
+      </div>
+    );
+  }
+
+  if (!user?.is_admin) {
+    return (
+      <div className='w-full py-6 px-1'>
+        <EmptyStateWithBorder
+          title='权限不足'
+          description='只有管理员可以预览联系页。'
+        />
+      </div>
+    );
+  }
+
+  if (optionsQuery.isLoading) {
+    return (
+      <div className='w-full py-6 px-1'>
+        <LoadingStateWithBorder description='加载联系页配置...' />
+      </div>
+    );
+  }
+
+  if (optionsQuery.isError) {
+    return (
+      <div className='w-full py-6 px-1'>
+        <ErrorInline
+          message={
+            optionsQuery.error instanceof Error
+              ? optionsQuery.error.message
+              : '加载失败'
+          }
+          onRetry={() => void optionsQuery.refetch()}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className='fixed inset-0 z-50 flex flex-col bg-background'>
+      <div className='flex items-center justify-between gap-3 border-b bg-background/95 px-4 py-2 backdrop-blur shrink-0'>
+        <div className='flex items-center gap-2 min-w-0'>
+          <Button variant='outline' size='icon' className='h-8 w-8' asChild>
+            <Link href='/responses?tab=contact' aria-label='返回联系页'>
+              <ArrowLeft className='size-4' />
+            </Link>
+          </Button>
+          <div className='min-w-0'>
+            <p className='text-sm font-semibold truncate'>离线联系页真实预览</p>
+            <p className='text-[11px] text-muted-foreground font-mono truncate'>
+              全屏展示
+            </p>
+          </div>
+        </div>
+        <div className='flex items-center gap-2 shrink-0'>
+          <Button variant='outline' size='sm' asChild>
+            <Link href='/responses/contact/edit'>
+              <Pencil className='size-3.5' />
+              编辑
+            </Link>
+          </Button>
+          <Button variant='ghost' size='icon' className='h-8 w-8' asChild>
+            <Link href='/responses?tab=contact' aria-label='关闭预览'>
+              <X className='size-4' />
+            </Link>
+          </Button>
+        </div>
+      </div>
+      <iframe
+        title='离线联系页真实预览'
+        sandbox=''
+        srcDoc={html}
+        className='flex-1 w-full border-0 bg-background min-h-0'
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/responses/error-page/edit/page.tsx b/frontend/app/(main)/responses/error-page/edit/page.tsx
new file mode 100644
index 00000000..b6deff5e
--- /dev/null
+++ b/frontend/app/(main)/responses/error-page/edit/page.tsx
@@ -0,0 +1,262 @@
+'use client';
+
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+  ArrowLeft,
+  FileCode2,
+  Loader2,
+  RotateCcw,
+  Save,
+  Sparkles,
+} from 'lucide-react';
+import { toast } from 'sonner';
+
+import { useAuth } from '@/components/providers/auth-provider';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Button } from '@/components/ui/button';
+import { EmptyStateWithBorder } from '@/components/layout/empty';
+import { ErrorInline } from '@/components/layout/error';
+import { LoadingStateWithBorder } from '@/components/layout/loading';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { HtmlEditorWorkspace } from '@/components/common/html-editor-workspace';
+import {
+  ORIGIN_ERROR_PAGE_HTML_MAX_BYTES,
+  previewOriginErrorPageHTML,
+} from '@/lib/openflare/default-origin-error-page-html';
+import {
+  DEFAULT_ORIGIN_ERROR_PAGE_TEMPLATE_ID,
+  getOriginErrorPageTemplate,
+  ORIGIN_ERROR_PAGE_TEMPLATES,
+} from '@/lib/openflare/origin-error-page-templates';
+import { OptionService } from '@/lib/services/openflare';
+
+import {
+  invalidateResponseQueries,
+  KEY_HTML,
+  mapOptionsToErrorFields,
+  OPTIONS_QUERY_KEY,
+  optionsToMap,
+} from '../../components/shared';
+
+export default function ErrorPageEditPage() {
+  const { user, loading: authLoading } = useAuth();
+  const queryClient = useQueryClient();
+  const [html, setHtml] = useState('');
+  const [restoreOpen, setRestoreOpen] = useState(false);
+  const [templateId, setTemplateId] = useState(
+    DEFAULT_ORIGIN_ERROR_PAGE_TEMPLATE_ID,
+  );
+
+  const optionsQuery = useQuery({
+    queryKey: OPTIONS_QUERY_KEY,
+    queryFn: () => OptionService.list(),
+    enabled: !!user?.is_admin,
+  });
+
+  useEffect(() => {
+    if (!optionsQuery.data) return;
+    setHtml(mapOptionsToErrorFields(optionsToMap(optionsQuery.data)).html);
+  }, [optionsQuery.data]);
+
+  const saveMutation = useMutation({
+    mutationFn: async () => {
+      const bytes = new TextEncoder().encode(html).length;
+      if (bytes > ORIGIN_ERROR_PAGE_HTML_MAX_BYTES) {
+        throw new Error('HTML 大小超出限制（最大 256KB）');
+      }
+      await OptionService.updateBatch([{ key: KEY_HTML, value: html }]);
+    },
+    onSuccess: async () => {
+      toast.success('源站错误页 HTML 已保存，请前往版本发布使配置生效');
+      await invalidateResponseQueries(queryClient);
+    },
+    onError: (error) => {
+      toast.error(error instanceof Error ? error.message : '保存失败');
+    },
+  });
+
+  const loadSelectedTemplate = () => {
+    const tmpl = getOriginErrorPageTemplate(templateId);
+    if (!tmpl) {
+      toast.error('未找到所选模板');
+      return;
+    }
+    setHtml(tmpl.html);
+    toast.success(`已加载模板「${tmpl.name}」到编辑器`);
+  };
+
+  const restoreDefault = () => {
+    setHtml('');
+    setRestoreOpen(false);
+    toast.success('已清空为使用服务端内置默认模板（需保存后生效）');
+  };
+
+  if (authLoading) {
+    return (
+      <div className='w-full py-6 px-1'>
+        <LoadingStateWithBorder
+          icon={FileCode2}
+          description='加载权限信息...'
+        />
+      </div>
+    );
+  }
+
+  if (!user?.is_admin) {
+    return (
+      <div className='w-full py-6 px-1'>
+        <EmptyStateWithBorder
+          icon={FileCode2}
+          title='权限不足'
+          description='只有管理员可以编辑错误页 HTML。'
+        />
+      </div>
+    );
+  }
+
+  if (optionsQuery.isLoading) {
+    return (
+      <div className='w-full py-6 px-1'>
+        <LoadingStateWithBorder
+          icon={FileCode2}
+          description='加载错误页配置...'
+        />
+      </div>
+    );
+  }
+
+  if (optionsQuery.isError) {
+    return (
+      <div className='w-full py-6 px-1'>
+        <ErrorInline
+          message={
+            optionsQuery.error instanceof Error
+              ? optionsQuery.error.message
+              : '加载失败'
+          }
+          onRetry={() => void optionsQuery.refetch()}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className='flex flex-col gap-4 py-6 px-1'>
+      <div className='flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between'>
+        <div className='flex items-center gap-3'>
+          <Button variant='outline' size='icon' className='h-8 w-8' asChild>
+            <Link href='/responses?tab=error' aria-label='返回错误页'>
+              <ArrowLeft className='size-4' />
+            </Link>
+          </Button>
+          <div className='flex items-center gap-2'>
+            <FileCode2 className='size-5 text-primary' />
+            <div>
+              <h1 className='text-2xl font-semibold tracking-tight'>
+                编辑错误页 HTML
+              </h1>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <HtmlEditorWorkspace
+        value={html}
+        onChange={setHtml}
+        preview={previewOriginErrorPageHTML}
+        toolbarRight={
+          <>
+            <div className='flex items-center gap-1.5'>
+              <span className='text-[11px] text-muted-foreground hidden sm:inline'>
+                内置模板
+              </span>
+              <Select value={templateId} onValueChange={setTemplateId}>
+                <SelectTrigger className='h-7 w-[160px] text-[11px] bg-background'>
+                  <SelectValue placeholder='选择模板' />
+                </SelectTrigger>
+                <SelectContent>
+                  {ORIGIN_ERROR_PAGE_TEMPLATES.map((tmpl) => (
+                    <SelectItem
+                      key={tmpl.id}
+                      value={tmpl.id}
+                      className='text-xs'
+                    >
+                      {tmpl.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <Button
+                type='button'
+                variant='ghost'
+                size='sm'
+                className='h-7 px-2 text-[11px]'
+                onClick={loadSelectedTemplate}
+              >
+                <Sparkles className='size-3.5' />
+                加载模板
+              </Button>
+            </div>
+            <Button
+              type='button'
+              variant='ghost'
+              size='sm'
+              className='h-7 px-2 text-[11px]'
+              onClick={() => setRestoreOpen(true)}
+            >
+              <RotateCcw className='size-3.5' />
+              恢复默认
+            </Button>
+            <Button
+              size='sm'
+              className='h-7 px-3 text-[11px]'
+              disabled={saveMutation.isPending}
+              onClick={() => saveMutation.mutate()}
+            >
+              {saveMutation.isPending ? (
+                <Loader2 className='size-3 animate-spin' />
+              ) : (
+                <Save className='size-3' />
+              )}
+              保存
+            </Button>
+          </>
+        }
+      />
+
+      <AlertDialog open={restoreOpen} onOpenChange={setRestoreOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>恢复默认 HTML？</AlertDialogTitle>
+            <AlertDialogDescription>
+              将清空编辑器内容，保存后使用服务端内置默认模板。此操作不会自动保存。
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>取消</AlertDialogCancel>
+            <AlertDialogAction onClick={restoreDefault}>
+              确认恢复
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/responses/error-page/preview/page.tsx b/frontend/app/(main)/responses/error-page/preview/page.tsx
new file mode 100644
index 00000000..8e3d34c0
--- /dev/null
+++ b/frontend/app/(main)/responses/error-page/preview/page.tsx
@@ -0,0 +1,118 @@
+'use client';
+
+import Link from 'next/link';
+import { useMemo } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { ArrowLeft, Pencil, X } from 'lucide-react';
+
+import { useAuth } from '@/components/providers/auth-provider';
+import { Button } from '@/components/ui/button';
+import { EmptyStateWithBorder } from '@/components/layout/empty';
+import { ErrorInline } from '@/components/layout/error';
+import { LoadingStateWithBorder } from '@/components/layout/loading';
+import { previewOriginErrorPageHTML } from '@/lib/openflare/default-origin-error-page-html';
+import { OptionService } from '@/lib/services/openflare';
+
+import {
+  mapOptionsToErrorFields,
+  OPTIONS_QUERY_KEY,
+  optionsToMap,
+} from '../../components/shared';
+
+export default function ErrorPagePreviewPage() {
+  const { user, loading: authLoading } = useAuth();
+
+  const optionsQuery = useQuery({
+    queryKey: OPTIONS_QUERY_KEY,
+    queryFn: () => OptionService.list(),
+    enabled: !!user?.is_admin,
+  });
+
+  const html = useMemo(() => {
+    if (!optionsQuery.data) return '';
+    return mapOptionsToErrorFields(optionsToMap(optionsQuery.data)).html;
+  }, [optionsQuery.data]);
+
+  const previewSrcDoc = useMemo(() => previewOriginErrorPageHTML(html), [html]);
+
+  if (authLoading) {
+    return (
+      <div className='w-full py-6 px-1'>
+        <LoadingStateWithBorder description='加载权限信息...' />
+      </div>
+    );
+  }
+
+  if (!user?.is_admin) {
+    return (
+      <div className='w-full py-6 px-1'>
+        <EmptyStateWithBorder
+          title='权限不足'
+          description='只有管理员可以预览错误页。'
+        />
+      </div>
+    );
+  }
+
+  if (optionsQuery.isLoading) {
+    return (
+      <div className='w-full py-6 px-1'>
+        <LoadingStateWithBorder description='加载错误页配置...' />
+      </div>
+    );
+  }
+
+  if (optionsQuery.isError) {
+    return (
+      <div className='w-full py-6 px-1'>
+        <ErrorInline
+          message={
+            optionsQuery.error instanceof Error
+              ? optionsQuery.error.message
+              : '加载失败'
+          }
+          onRetry={() => void optionsQuery.refetch()}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className='fixed inset-0 z-50 flex flex-col bg-background'>
+      <div className='flex items-center justify-between gap-3 border-b bg-background/95 px-4 py-2 backdrop-blur shrink-0'>
+        <div className='flex items-center gap-2 min-w-0'>
+          <Button variant='outline' size='icon' className='h-8 w-8' asChild>
+            <Link href='/responses?tab=error' aria-label='返回错误页'>
+              <ArrowLeft className='size-4' />
+            </Link>
+          </Button>
+          <div className='min-w-0'>
+            <p className='text-sm font-semibold truncate'>错误页真实预览</p>
+            <p className='text-[11px] text-muted-foreground font-mono truncate'>
+              {'{{status}}'}→502 · {'{{host}}'}→example.com · 全屏展示
+            </p>
+          </div>
+        </div>
+        <div className='flex items-center gap-2 shrink-0'>
+          <Button variant='outline' size='sm' asChild>
+            <Link href='/responses/error-page/edit'>
+              <Pencil className='size-3.5' />
+              编辑
+            </Link>
+          </Button>
+          <Button variant='ghost' size='icon' className='h-8 w-8' asChild>
+            <Link href='/responses?tab=error' aria-label='关闭预览'>
+              <X className='size-4' />
+            </Link>
+          </Button>
+        </div>
+      </div>
+      <iframe
+        title='源站错误页真实预览'
+        sandbox=''
+        srcDoc={previewSrcDoc}
+        className='flex-1 w-full border-0 bg-background min-h-0'
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/responses/page.tsx b/frontend/app/(main)/responses/page.tsx
index a7f4c3a9..70b176a8 100644
--- a/frontend/app/(main)/responses/page.tsx
+++ b/frontend/app/(main)/responses/page.tsx
@@ -1,6 +1,7 @@
 'use client';
 
-import { useMemo, useState } from 'react';
+import { Suspense, useMemo } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
 import { useQuery } from '@tanstack/react-query';
 import { MessageSquareText } from 'lucide-react';
 
@@ -15,9 +16,35 @@ import { ContactPageTab } from './components/contact-page-tab';
 import { ErrorPageTab } from './components/error-page-tab';
 import { OPTIONS_QUERY_KEY, optionsToMap } from './components/shared';
 
-export default function ResponsesPage() {
+type ResponseTab = 'error' | 'contact';
+
+function resolveTab(tabParam: string | null): ResponseTab {
+  if (tabParam === 'contact') {
+    return 'contact';
+  }
+  return 'error';
+}
+
+function ResponsesPageContent() {
   const { user, loading: authLoading } = useAuth();
-  const [activeTab, setActiveTab] = useState('error');
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const activeTab = resolveTab(searchParams.get('tab'));
+
+  const handleTabChange = (value: string) => {
+    const nextTab = resolveTab(value);
+    const params = new URLSearchParams(searchParams.toString());
+    if (nextTab === 'error') {
+      params.delete('tab');
+    } else {
+      params.set('tab', nextTab);
+    }
+    const query = params.toString();
+    router.replace(query ? `/responses?${query}` : '/responses', {
+      scroll: false,
+    });
+  };
 
   const optionsQuery = useQuery({
     queryKey: OPTIONS_QUERY_KEY,
@@ -93,7 +120,11 @@ export default function ResponsesPage() {
         </div>
       </div>
 
-      <Tabs value={activeTab} onValueChange={setActiveTab} className='w-full'>
+      <Tabs
+        value={activeTab}
+        onValueChange={handleTabChange}
+        className='w-full'
+      >
         <TabsList variant='line' className='mb-6 inline-flex w-fit gap-8'>
           <TabsTrigger
             value='error'
@@ -120,3 +151,20 @@ export default function ResponsesPage() {
     </div>
   );
 }
+
+export default function ResponsesPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className='w-full py-6 px-1'>
+          <LoadingStateWithBorder
+            icon={MessageSquareText}
+            description='加载响应页面...'
+          />
+        </div>
+      }
+    >
+      <ResponsesPageContent />
+    </Suspense>
+  );
+}
diff --git a/frontend/lib/navigation/openflare-nav.ts b/frontend/lib/navigation/openflare-nav.ts
index b43292af..b746de5a 100644
--- a/frontend/lib/navigation/openflare-nav.ts
+++ b/frontend/lib/navigation/openflare-nav.ts
@@ -63,7 +63,12 @@ export const openflareWebsiteNavGroup: OpenFlareNavGroup = {
     {
       title: '响应页面',
       url: '/responses',
-      childUrls: ['/error-pages'],
+      childUrls: [
+        '/responses/error-page/edit',
+        '/responses/error-page/preview',
+        '/responses/contact/edit',
+        '/responses/contact/preview',
+      ],
     },
   ],
 };
diff --git a/frontend/lib/theme/themes.json b/frontend/lib/theme/themes.json
index 40c4d4ba..9818de0f 100644
--- a/frontend/lib/theme/themes.json
+++ b/frontend/lib/theme/themes.json
@@ -4559,4 +4559,4 @@
       }
     }
   }
-]
+]
\ No newline at end of file