From c4be34b21420bec26be9d57803a2572c518ad047 Mon Sep 17 00:00:00 2001
From: ryan <ryan@arctel.net>
Date: Sat, 8 Aug 2026 21:52:02 +0800
Subject: [PATCH] fix(frontend): fallback empty offline page html to default
 template in preview

---
 .../(main)/responses/components/offline-page-tab.tsx   | 10 ++++++++--
 frontend/app/(main)/responses/offline/preview/page.tsx |  6 +++++-
 frontend/lib/openflare/offline-page-templates/index.ts |  7 +++++++
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/frontend/app/(main)/responses/components/offline-page-tab.tsx b/frontend/app/(main)/responses/components/offline-page-tab.tsx
index 39db07db..7920429e 100644
--- a/frontend/app/(main)/responses/components/offline-page-tab.tsx
+++ b/frontend/app/(main)/responses/components/offline-page-tab.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import Link from 'next/link';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { Expand, Loader2, Pencil, Plus, Save, X } from 'lucide-react';
 import { toast } from 'sonner';
@@ -17,6 +17,7 @@ import {
 } from '@/components/ui/card';
 import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
+import { effectiveOfflinePageHTML } from '@/lib/openflare/offline-page-templates';
 import {
   OptionService,
   ZoneService,
@@ -49,6 +50,11 @@ export function OfflinePageTab({
     setFields(mapOptionsToOfflineFields(optionMap));
   }, [optionMap]);
 
+  const previewSrcDoc = useMemo(
+    () => effectiveOfflinePageHTML(fields.html),
+    [fields.html],
+  );
+
   const zonesQuery = useQuery({
     queryKey: [...zoneQueryKey, 'sw-scope'],
     queryFn: async () => {
@@ -204,7 +210,7 @@ export function OfflinePageTab({
             <iframe
               title='离线页预览'
               sandbox=''
-              srcDoc={fields.html}
+              srcDoc={previewSrcDoc}
               className='h-[32rem] w-full bg-background'
             />
           </div>
diff --git a/frontend/app/(main)/responses/offline/preview/page.tsx b/frontend/app/(main)/responses/offline/preview/page.tsx
index e1a03b61..ee6927f9 100644
--- a/frontend/app/(main)/responses/offline/preview/page.tsx
+++ b/frontend/app/(main)/responses/offline/preview/page.tsx
@@ -12,6 +12,7 @@ import { ErrorInline } from '@/components/layout/error';
 import { LoadingStateWithBorder } from '@/components/layout/loading';
 import { OptionService } from '@/lib/services/openflare';
 
+import { effectiveOfflinePageHTML } from '@/lib/openflare/offline-page-templates';
 import {
   mapOptionsToOfflineFields,
   OPTIONS_QUERY_KEY,
@@ -29,7 +30,10 @@ export default function OfflinePagePreviewPage() {
 
   const html = useMemo(() => {
     if (!optionsQuery.data) return '';
-    return mapOptionsToOfflineFields(optionsToMap(optionsQuery.data)).html;
+    const rawHtml = mapOptionsToOfflineFields(
+      optionsToMap(optionsQuery.data),
+    ).html;
+    return effectiveOfflinePageHTML(rawHtml);
   }, [optionsQuery.data]);
 
   if (authLoading) {
diff --git a/frontend/lib/openflare/offline-page-templates/index.ts b/frontend/lib/openflare/offline-page-templates/index.ts
index fda68b1a..bc3d1ad5 100644
--- a/frontend/lib/openflare/offline-page-templates/index.ts
+++ b/frontend/lib/openflare/offline-page-templates/index.ts
@@ -35,6 +35,13 @@ export const OFFLINE_PAGE_TEMPLATES: OfflinePageTemplate[] = [
 /** 默认预制模板 */
 export const DEFAULT_OFFLINE_PAGE_TEMPLATE_ID = 'minimalist';
 
+export const DEFAULT_OFFLINE_PAGE_HTML =
+  getOfflinePageTemplate(DEFAULT_OFFLINE_PAGE_TEMPLATE_ID)?.html ?? '';
+
+export function effectiveOfflinePageHTML(html: string): string {
+  return html.trim() === '' ? DEFAULT_OFFLINE_PAGE_HTML : html;
+}
+
 export function getOfflinePageTemplate(
   id: string,
 ): OfflinePageTemplate | undefined {