mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-10-13 02:26:36 +08:00
feat(frontend): add dedicated edit and preview routes for response pages and sync tab state to url
This commit is contained in:
ryan
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user