mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-09-28 05:46:36 +08:00
fix(frontend): fallback empty offline page html to default template in preview
This commit is contained in:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user