fix(frontend): fallback empty offline page html to default template in preview

This commit is contained in:
ryan
2026-08-08 21:52:02 +08:00
parent fda727cf53
commit c4be34b214
3 changed files with 20 additions and 3 deletions
@@ -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>
@@ -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) {
@@ -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 {