mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-10-12 18:26: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';
|
'use client';
|
||||||
|
|
||||||
import Link from 'next/link';
|
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 { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||||
import { Expand, Loader2, Pencil, Plus, Save, X } from 'lucide-react';
|
import { Expand, Loader2, Pencil, Plus, Save, X } from 'lucide-react';
|
||||||
import { toast } from 'sonner';
|
import { toast } from 'sonner';
|
||||||
@@ -17,6 +17,7 @@ import {
|
|||||||
} from '@/components/ui/card';
|
} from '@/components/ui/card';
|
||||||
import { Label } from '@/components/ui/label';
|
import { Label } from '@/components/ui/label';
|
||||||
import { Switch } from '@/components/ui/switch';
|
import { Switch } from '@/components/ui/switch';
|
||||||
|
import { effectiveOfflinePageHTML } from '@/lib/openflare/offline-page-templates';
|
||||||
import {
|
import {
|
||||||
OptionService,
|
OptionService,
|
||||||
ZoneService,
|
ZoneService,
|
||||||
@@ -49,6 +50,11 @@ export function OfflinePageTab({
|
|||||||
setFields(mapOptionsToOfflineFields(optionMap));
|
setFields(mapOptionsToOfflineFields(optionMap));
|
||||||
}, [optionMap]);
|
}, [optionMap]);
|
||||||
|
|
||||||
|
const previewSrcDoc = useMemo(
|
||||||
|
() => effectiveOfflinePageHTML(fields.html),
|
||||||
|
[fields.html],
|
||||||
|
);
|
||||||
|
|
||||||
const zonesQuery = useQuery({
|
const zonesQuery = useQuery({
|
||||||
queryKey: [...zoneQueryKey, 'sw-scope'],
|
queryKey: [...zoneQueryKey, 'sw-scope'],
|
||||||
queryFn: async () => {
|
queryFn: async () => {
|
||||||
@@ -204,7 +210,7 @@ export function OfflinePageTab({
|
|||||||
<iframe
|
<iframe
|
||||||
title='离线页预览'
|
title='离线页预览'
|
||||||
sandbox=''
|
sandbox=''
|
||||||
srcDoc={fields.html}
|
srcDoc={previewSrcDoc}
|
||||||
className='h-[32rem] w-full bg-background'
|
className='h-[32rem] w-full bg-background'
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -12,6 +12,7 @@ import { ErrorInline } from '@/components/layout/error';
|
|||||||
import { LoadingStateWithBorder } from '@/components/layout/loading';
|
import { LoadingStateWithBorder } from '@/components/layout/loading';
|
||||||
import { OptionService } from '@/lib/services/openflare';
|
import { OptionService } from '@/lib/services/openflare';
|
||||||
|
|
||||||
|
import { effectiveOfflinePageHTML } from '@/lib/openflare/offline-page-templates';
|
||||||
import {
|
import {
|
||||||
mapOptionsToOfflineFields,
|
mapOptionsToOfflineFields,
|
||||||
OPTIONS_QUERY_KEY,
|
OPTIONS_QUERY_KEY,
|
||||||
@@ -29,7 +30,10 @@ export default function OfflinePagePreviewPage() {
|
|||||||
|
|
||||||
const html = useMemo(() => {
|
const html = useMemo(() => {
|
||||||
if (!optionsQuery.data) return '';
|
if (!optionsQuery.data) return '';
|
||||||
return mapOptionsToOfflineFields(optionsToMap(optionsQuery.data)).html;
|
const rawHtml = mapOptionsToOfflineFields(
|
||||||
|
optionsToMap(optionsQuery.data),
|
||||||
|
).html;
|
||||||
|
return effectiveOfflinePageHTML(rawHtml);
|
||||||
}, [optionsQuery.data]);
|
}, [optionsQuery.data]);
|
||||||
|
|
||||||
if (authLoading) {
|
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_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(
|
export function getOfflinePageTemplate(
|
||||||
id: string,
|
id: string,
|
||||||
): OfflinePageTemplate | undefined {
|
): OfflinePageTemplate | undefined {
|
||||||
|
|||||||
Reference in New Issue
Block a user