mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-09-28 05:46:36 +08:00
docs: rename contact page references to offline page in changelog
refactor(frontend): rename contact page to offline page and update routes/components feat(frontend): add preset templates suite for offline contact page
This commit is contained in:
ryan
@@ -24,18 +24,19 @@ sidebar: false
|
||||
|
||||
### 新增
|
||||
|
||||
- 支持 Service Worker 离线兜底：为启用 HTTPS 的网站下发 Service Worker 并缓存离线联系页，域名无法访问时浏览器展示联系站长页面，减少用户流失。可指定生效域名范围（仅对选中的 HTTPS 域名生效），配置位于「响应页面」-「联系页」，可在版本发布中批量生效。
|
||||
- 支持 Service Worker 离线兜底：为启用 HTTPS 的网站下发 Service Worker 并缓存离线页，域名无法访问时浏览器展示离线兜底页面，减少用户流失。可指定生效域名范围（仅对选中的 HTTPS 域名生效），配置位于「响应页面」-「离线页」，可在版本发布中批量生效。
|
||||
|
||||
### 修复
|
||||
|
||||
- 修复 `SWOfflineDomains` 校验与版本比对逻辑：校验器严格拒绝 JSON `null` 输入，配置版本 Diff 比对改用 JSON 序列化避免 `strings.Join` 逗号分隔符歧义。
|
||||
- 修复 HTML 编辑器预览标题：`HtmlEditorWorkspace` 支持传入 `previewTitle`，离线联系页预览使用「离线联系页实时预览」。
|
||||
- 修复 HTML 编辑器预览标题：`HtmlEditorWorkspace` 支持传入 `previewTitle`，离线页预览使用「离线页实时预览」。
|
||||
|
||||
### 改进
|
||||
|
||||
- 响应页面统一：将源站错误页与 Service Worker 离线兜底联系页整合至统一的「响应页面」（`/responses`）标签页中，移除原 `/error-pages` 独立路由。
|
||||
- 响应页面统一：将源站错误页与 Service Worker 离线兜底离线页整合至统一的「响应页面」（`/responses`）标签页中，移除原 `/error-pages` 独立路由。
|
||||
- 响应页面 Tab 状态 URL 同步：响应页面（`/responses`）的 Tab 状态增加 URL 查询参数 `tab` 支持，刷新页面时自动保持当前选中的标签页。
|
||||
- 响应页面编辑与真实预览独立路由：为「源站错误页」与「离线联系页」提供独立的 `/responses/error-page/edit`、`/responses/error-page/preview`、`/responses/contact/edit` 及 `/responses/contact/preview` 路由入口，恢复默认展示网页预览图、点击编辑进入包含预制模板与代码编辑器的独立编辑页逻辑。
|
||||
- 响应页面编辑与真实预览独立路由：为「源站错误页」与「离线页」提供独立的 `/responses/error-page/edit`、`/responses/error-page/preview`、`/responses/offline/edit` 及 `/responses/offline/preview` 路由入口，恢复默认展示网页预览图、点击编辑进入包含预制模板与代码编辑器的独立编辑页逻辑。
|
||||
- 离线页预制模板支持：新增离线页内置预制模板套件（「极简白底」、「线框拓扑」、「包豪斯」），与源站错误页模板风格保持一致，可在编辑界面一键加载与预览。
|
||||
|
||||
## [v3.4.5] - 2026-08-08
|
||||
|
||||
|
||||
+12
-12
@@ -25,28 +25,28 @@ import {
|
||||
|
||||
import { ScopeDomainDialog } from './scope-domain-dialog';
|
||||
import {
|
||||
defaultContactPageFields,
|
||||
defaultOfflinePageFields,
|
||||
invalidateResponseQueries,
|
||||
KEY_SW_DOMAINS,
|
||||
KEY_SW_ENABLED,
|
||||
KEY_SW_HTML,
|
||||
mapOptionsToContactFields,
|
||||
type ContactPageFields,
|
||||
mapOptionsToOfflineFields,
|
||||
type OfflinePageFields,
|
||||
} from './shared';
|
||||
|
||||
export function ContactPageTab({
|
||||
export function OfflinePageTab({
|
||||
optionMap,
|
||||
}: {
|
||||
optionMap: Record<string, string>;
|
||||
}) {
|
||||
const queryClient = useQueryClient();
|
||||
const [fields, setFields] = useState<ContactPageFields>(
|
||||
defaultContactPageFields,
|
||||
const [fields, setFields] = useState<OfflinePageFields>(
|
||||
defaultOfflinePageFields,
|
||||
);
|
||||
const [scopeOpen, setScopeOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setFields(mapOptionsToContactFields(optionMap));
|
||||
setFields(mapOptionsToOfflineFields(optionMap));
|
||||
}, [optionMap]);
|
||||
|
||||
const zonesQuery = useQuery({
|
||||
@@ -72,7 +72,7 @@ export function ContactPageTab({
|
||||
]);
|
||||
},
|
||||
onSuccess: async () => {
|
||||
toast.success('联系页已保存，请前往版本发布使配置生效');
|
||||
toast.success('离线页已保存，请前往版本发布使配置生效');
|
||||
await invalidateResponseQueries(queryClient);
|
||||
},
|
||||
onError: (error) => {
|
||||
@@ -88,7 +88,7 @@ export function ContactPageTab({
|
||||
<CardTitle className='text-base'>离线兜底</CardTitle>
|
||||
<CardDescription>
|
||||
启用后给启用 HTTPS 的网站下发 Service
|
||||
Worker，域名被墙时浏览器从缓存展示此联系页。
|
||||
Worker，域名被墙时浏览器从缓存展示此离线页。
|
||||
</CardDescription>
|
||||
</div>
|
||||
<Button
|
||||
@@ -186,13 +186,13 @@ export function ContactPageTab({
|
||||
</div>
|
||||
<div className='flex shrink-0 flex-wrap gap-2'>
|
||||
<Button variant='outline' size='sm' asChild>
|
||||
<Link href='/responses/contact/preview'>
|
||||
<Link href='/responses/offline/preview'>
|
||||
<Expand className='size-3.5' />
|
||||
真实预览
|
||||
</Link>
|
||||
</Button>
|
||||
<Button size='sm' asChild>
|
||||
<Link href='/responses/contact/edit'>
|
||||
<Link href='/responses/offline/edit'>
|
||||
<Pencil className='size-3.5' />
|
||||
编辑
|
||||
</Link>
|
||||
@@ -202,7 +202,7 @@ export function ContactPageTab({
|
||||
<CardContent>
|
||||
<div className='overflow-hidden rounded-md border bg-muted/30'>
|
||||
<iframe
|
||||
title='离线联系页预览'
|
||||
title='离线页预览'
|
||||
sandbox=''
|
||||
srcDoc={fields.html}
|
||||
className='h-[32rem] w-full bg-background'
|
||||
@@ -28,13 +28,13 @@ export const defaultErrorPageFields: ErrorPageFields = {
|
||||
html: '',
|
||||
};
|
||||
|
||||
export type ContactPageFields = {
|
||||
export type OfflinePageFields = {
|
||||
enabled: boolean;
|
||||
html: string;
|
||||
domains: string[];
|
||||
};
|
||||
|
||||
export const defaultContactPageFields: ContactPageFields = {
|
||||
export const defaultOfflinePageFields: OfflinePageFields = {
|
||||
enabled: false,
|
||||
html: '',
|
||||
domains: [],
|
||||
@@ -72,9 +72,9 @@ export function mapOptionsToErrorFields(
|
||||
};
|
||||
}
|
||||
|
||||
export function mapOptionsToContactFields(
|
||||
export function mapOptionsToOfflineFields(
|
||||
optionMap: Record<string, string>,
|
||||
): ContactPageFields {
|
||||
): OfflinePageFields {
|
||||
return {
|
||||
enabled: optionMap[KEY_SW_ENABLED] === 'true',
|
||||
html: optionMap[KEY_SW_HTML] ?? '',
|
||||
|
||||
+75
-12
@@ -3,7 +3,14 @@
|
||||
import Link from 'next/link';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { ArrowLeft, FileCode2, Loader2, RotateCcw, Save } from 'lucide-react';
|
||||
import {
|
||||
ArrowLeft,
|
||||
FileCode2,
|
||||
Loader2,
|
||||
RotateCcw,
|
||||
Save,
|
||||
Sparkles,
|
||||
} from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
import { useAuth } from '@/components/providers/auth-provider';
|
||||
@@ -21,24 +28,39 @@ 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 {
|
||||
OFFLINE_PAGE_TEMPLATES,
|
||||
DEFAULT_OFFLINE_PAGE_TEMPLATE_ID,
|
||||
getOfflinePageTemplate,
|
||||
} from '@/lib/openflare/offline-page-templates';
|
||||
import { OptionService } from '@/lib/services/openflare';
|
||||
|
||||
import {
|
||||
invalidateResponseQueries,
|
||||
KEY_SW_HTML,
|
||||
mapOptionsToContactFields,
|
||||
mapOptionsToOfflineFields,
|
||||
OPTIONS_QUERY_KEY,
|
||||
optionsToMap,
|
||||
} from '../../components/shared';
|
||||
|
||||
const CONTACT_PAGE_HTML_MAX_BYTES = 256 * 1024;
|
||||
const OFFLINE_PAGE_HTML_MAX_BYTES = 256 * 1024;
|
||||
|
||||
export default function ContactPageEditPage() {
|
||||
export default function OfflinePageEditPage() {
|
||||
const { user, loading: authLoading } = useAuth();
|
||||
const queryClient = useQueryClient();
|
||||
const [html, setHtml] = useState('');
|
||||
const [restoreOpen, setRestoreOpen] = useState(false);
|
||||
const [templateId, setTemplateId] = useState(
|
||||
DEFAULT_OFFLINE_PAGE_TEMPLATE_ID,
|
||||
);
|
||||
|
||||
const optionsQuery = useQuery({
|
||||
queryKey: OPTIONS_QUERY_KEY,
|
||||
@@ -48,19 +70,19 @@ export default function ContactPageEditPage() {
|
||||
|
||||
useEffect(() => {
|
||||
if (!optionsQuery.data) return;
|
||||
setHtml(mapOptionsToContactFields(optionsToMap(optionsQuery.data)).html);
|
||||
setHtml(mapOptionsToOfflineFields(optionsToMap(optionsQuery.data)).html);
|
||||
}, [optionsQuery.data]);
|
||||
|
||||
const saveMutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
const bytes = new TextEncoder().encode(html).length;
|
||||
if (bytes > CONTACT_PAGE_HTML_MAX_BYTES) {
|
||||
if (bytes > OFFLINE_PAGE_HTML_MAX_BYTES) {
|
||||
throw new Error('HTML 大小超出限制（最大 256KB）');
|
||||
}
|
||||
await OptionService.updateBatch([{ key: KEY_SW_HTML, value: html }]);
|
||||
},
|
||||
onSuccess: async () => {
|
||||
toast.success('离线联系页 HTML 已保存，请前往版本发布使配置生效');
|
||||
toast.success('离线页 HTML 已保存，请前往版本发布使配置生效');
|
||||
await invalidateResponseQueries(queryClient);
|
||||
},
|
||||
onError: (error) => {
|
||||
@@ -68,6 +90,16 @@ export default function ContactPageEditPage() {
|
||||
},
|
||||
});
|
||||
|
||||
const loadSelectedTemplate = () => {
|
||||
const tmpl = getOfflinePageTemplate(templateId);
|
||||
if (!tmpl) {
|
||||
toast.error('未找到所选模板');
|
||||
return;
|
||||
}
|
||||
setHtml(tmpl.html);
|
||||
toast.success(`已加载模板「${tmpl.name}」到编辑器`);
|
||||
};
|
||||
|
||||
const restoreDefault = () => {
|
||||
setHtml('');
|
||||
setRestoreOpen(false);
|
||||
@@ -91,7 +123,7 @@ export default function ContactPageEditPage() {
|
||||
<EmptyStateWithBorder
|
||||
icon={FileCode2}
|
||||
title='权限不足'
|
||||
description='只有管理员可以编辑联系页 HTML。'
|
||||
description='只有管理员可以编辑离线页 HTML。'
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
@@ -102,7 +134,7 @@ export default function ContactPageEditPage() {
|
||||
<div className='w-full py-6 px-1'>
|
||||
<LoadingStateWithBorder
|
||||
icon={FileCode2}
|
||||
description='加载联系页配置...'
|
||||
description='加载离线页配置...'
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
@@ -128,7 +160,7 @@ export default function ContactPageEditPage() {
|
||||
<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=contact' aria-label='返回联系页'>
|
||||
<Link href='/responses?tab=offline' aria-label='返回离线页'>
|
||||
<ArrowLeft className='size-4' />
|
||||
</Link>
|
||||
</Button>
|
||||
@@ -136,7 +168,7 @@ export default function ContactPageEditPage() {
|
||||
<FileCode2 className='size-5 text-primary' />
|
||||
<div>
|
||||
<h1 className='text-2xl font-semibold tracking-tight'>
|
||||
编辑离线联系页 HTML
|
||||
编辑离线页 HTML
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
@@ -149,9 +181,40 @@ export default function ContactPageEditPage() {
|
||||
preview={(h) => h}
|
||||
footerHint={null}
|
||||
showPreviewLink={false}
|
||||
previewTitle='离线联系页实时预览'
|
||||
previewTitle='离线页实时预览'
|
||||
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>
|
||||
{OFFLINE_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'
|
||||
+10
-10
@@ -13,12 +13,12 @@ import { LoadingStateWithBorder } from '@/components/layout/loading';
|
||||
import { OptionService } from '@/lib/services/openflare';
|
||||
|
||||
import {
|
||||
mapOptionsToContactFields,
|
||||
mapOptionsToOfflineFields,
|
||||
OPTIONS_QUERY_KEY,
|
||||
optionsToMap,
|
||||
} from '../../components/shared';
|
||||
|
||||
export default function ContactPagePreviewPage() {
|
||||
export default function OfflinePagePreviewPage() {
|
||||
const { user, loading: authLoading } = useAuth();
|
||||
|
||||
const optionsQuery = useQuery({
|
||||
@@ -29,7 +29,7 @@ export default function ContactPagePreviewPage() {
|
||||
|
||||
const html = useMemo(() => {
|
||||
if (!optionsQuery.data) return '';
|
||||
return mapOptionsToContactFields(optionsToMap(optionsQuery.data)).html;
|
||||
return mapOptionsToOfflineFields(optionsToMap(optionsQuery.data)).html;
|
||||
}, [optionsQuery.data]);
|
||||
|
||||
if (authLoading) {
|
||||
@@ -45,7 +45,7 @@ export default function ContactPagePreviewPage() {
|
||||
<div className='w-full py-6 px-1'>
|
||||
<EmptyStateWithBorder
|
||||
title='权限不足'
|
||||
description='只有管理员可以预览联系页。'
|
||||
description='只有管理员可以预览离线页。'
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
@@ -54,7 +54,7 @@ export default function ContactPagePreviewPage() {
|
||||
if (optionsQuery.isLoading) {
|
||||
return (
|
||||
<div className='w-full py-6 px-1'>
|
||||
<LoadingStateWithBorder description='加载联系页配置...' />
|
||||
<LoadingStateWithBorder description='加载离线页配置...' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -79,12 +79,12 @@ export default function ContactPagePreviewPage() {
|
||||
<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=contact' aria-label='返回联系页'>
|
||||
<Link href='/responses?tab=offline' aria-label='返回离线页'>
|
||||
<ArrowLeft className='size-4' />
|
||||
</Link>
|
||||
</Button>
|
||||
<div className='min-w-0'>
|
||||
<p className='text-sm font-semibold truncate'>离线联系页真实预览</p>
|
||||
<p className='text-sm font-semibold truncate'>离线页真实预览</p>
|
||||
<p className='text-[11px] text-muted-foreground font-mono truncate'>
|
||||
全屏展示
|
||||
</p>
|
||||
@@ -92,20 +92,20 @@ export default function ContactPagePreviewPage() {
|
||||
</div>
|
||||
<div className='flex items-center gap-2 shrink-0'>
|
||||
<Button variant='outline' size='sm' asChild>
|
||||
<Link href='/responses/contact/edit'>
|
||||
<Link href='/responses/offline/edit'>
|
||||
<Pencil className='size-3.5' />
|
||||
编辑
|
||||
</Link>
|
||||
</Button>
|
||||
<Button variant='ghost' size='icon' className='h-8 w-8' asChild>
|
||||
<Link href='/responses?tab=contact' aria-label='关闭预览'>
|
||||
<Link href='/responses?tab=offline' aria-label='关闭预览'>
|
||||
<X className='size-4' />
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<iframe
|
||||
title='离线联系页真实预览'
|
||||
title='离线页真实预览'
|
||||
sandbox=''
|
||||
srcDoc={html}
|
||||
className='flex-1 w-full border-0 bg-background min-h-0'
|
||||
@@ -12,15 +12,15 @@ import { useAuth } from '@/components/providers/auth-provider';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import { OptionService } from '@/lib/services/openflare';
|
||||
|
||||
import { ContactPageTab } from './components/contact-page-tab';
|
||||
import { ErrorPageTab } from './components/error-page-tab';
|
||||
import { OfflinePageTab } from './components/offline-page-tab';
|
||||
import { OPTIONS_QUERY_KEY, optionsToMap } from './components/shared';
|
||||
|
||||
type ResponseTab = 'error' | 'contact';
|
||||
type ResponseTab = 'error' | 'offline';
|
||||
|
||||
function resolveTab(tabParam: string | null): ResponseTab {
|
||||
if (tabParam === 'contact') {
|
||||
return 'contact';
|
||||
if (tabParam === 'offline') {
|
||||
return 'offline';
|
||||
}
|
||||
return 'error';
|
||||
}
|
||||
@@ -115,7 +115,7 @@ function ResponsesPageContent() {
|
||||
<div>
|
||||
<h1 className='text-2xl font-semibold tracking-tight'>响应页面</h1>
|
||||
<p className='text-sm text-muted-foreground'>
|
||||
配置源站错误页与离线兜底联系页。保存后需发布配置版本后生效。
|
||||
配置源站错误页与离线页。保存后需发布配置版本后生效。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -133,10 +133,10 @@ function ResponsesPageContent() {
|
||||
错误页
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value='contact'
|
||||
value='offline'
|
||||
className='px-0 pb-2 text-xs font-semibold'
|
||||
>
|
||||
联系页
|
||||
离线页
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
@@ -144,8 +144,8 @@ function ResponsesPageContent() {
|
||||
<ErrorPageTab optionMap={optionMap} />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value='contact' className='focus-visible:outline-none'>
|
||||
<ContactPageTab optionMap={optionMap} />
|
||||
<TabsContent value='offline' className='focus-visible:outline-none'>
|
||||
<OfflinePageTab optionMap={optionMap} />
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
|
||||
@@ -66,8 +66,8 @@ export const openflareWebsiteNavGroup: OpenFlareNavGroup = {
|
||||
childUrls: [
|
||||
'/responses/error-page/edit',
|
||||
'/responses/error-page/preview',
|
||||
'/responses/contact/edit',
|
||||
'/responses/contact/preview',
|
||||
'/responses/offline/edit',
|
||||
'/responses/offline/preview',
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
@@ -0,0 +1,170 @@
|
||||
/** 内置离线页模板：baohaus */
|
||||
const html = `
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>离线页 | OpenFlare</title>
|
||||
<style>
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
background-color: #f4f3ef;
|
||||
color: #121212;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 48px 24px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.bauhaus-card {
|
||||
width: 100%;
|
||||
max-width: 580px;
|
||||
background: #ffffff;
|
||||
border: 3px solid #121212;
|
||||
box-shadow: 8px 8px 0px #121212;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-accent-bar {
|
||||
height: 12px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.accent-red { flex: 2; background-color: #e63946; }
|
||||
.accent-blue { flex: 3; background-color: #1d3557; }
|
||||
.accent-yellow { flex: 1; background-color: #f1faee; }
|
||||
|
||||
.card-body {
|
||||
padding: 40px 32px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
align-self: flex-start;
|
||||
background-color: #121212;
|
||||
color: #ffffff;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
padding: 4px 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 28px;
|
||||
font-weight: 800;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.message {
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
color: #4a4a4a;
|
||||
}
|
||||
|
||||
.contact-box {
|
||||
border: 2px solid #121212;
|
||||
background-color: #f9f8f3;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.contact-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.contact-line a {
|
||||
color: #e63946;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.contact-line a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
border-top: 2px solid #121212;
|
||||
padding: 16px 32px;
|
||||
background-color: #faf9f6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.brand-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: currentColor;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="bauhaus-card">
|
||||
<div class="card-accent-bar">
|
||||
<div class="accent-red"></div>
|
||||
<div class="accent-blue"></div>
|
||||
<div class="accent-yellow"></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="tag">OFFLINE FALLBACK</div>
|
||||
<h1 class="title">离线联系站长</h1>
|
||||
<p class="message">
|
||||
源站网络临时不可达。离线 Service Worker 已拦截请求，您可以使用下方联系方式取得支持。
|
||||
</p>
|
||||
<div class="contact-box">
|
||||
<div class="contact-line">
|
||||
<span>站长邮箱</span>
|
||||
<a href="mailto:admin@example.com">admin@example.com</a>
|
||||
</div>
|
||||
<div class="contact-line">
|
||||
<span>服务监控</span>
|
||||
<a href="https://status.example.com" target="_blank" rel="noopener">status.example.com</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="brand">
|
||||
<svg class="brand-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13 2L3 14H12L11 22L21 10H12L13 2Z" />
|
||||
</svg>
|
||||
<span>OpenFlare Service Worker</span>
|
||||
</div>
|
||||
<span>OFFLINE MODE</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
|
||||
export default html;
|
||||
@@ -0,0 +1,42 @@
|
||||
/**
|
||||
* 内置离线页 HTML 模板目录。
|
||||
*/
|
||||
import baohausHtml from './baohaus';
|
||||
import lineStyleHtml from './line-style';
|
||||
import minimalistHtml from './minimalist';
|
||||
|
||||
export type OfflinePageTemplate = {
|
||||
/** 稳定 ID */
|
||||
id: string;
|
||||
/** 下拉展示名称 */
|
||||
name: string;
|
||||
/** 完整 HTML */
|
||||
html: string;
|
||||
};
|
||||
|
||||
export const OFFLINE_PAGE_TEMPLATES: OfflinePageTemplate[] = [
|
||||
{
|
||||
id: 'minimalist',
|
||||
name: '极简白底',
|
||||
html: minimalistHtml,
|
||||
},
|
||||
{
|
||||
id: 'line-style',
|
||||
name: '线框拓扑',
|
||||
html: lineStyleHtml,
|
||||
},
|
||||
{
|
||||
id: 'baohaus',
|
||||
name: '包豪斯',
|
||||
html: baohausHtml,
|
||||
},
|
||||
];
|
||||
|
||||
/** 默认预制模板 */
|
||||
export const DEFAULT_OFFLINE_PAGE_TEMPLATE_ID = 'minimalist';
|
||||
|
||||
export function getOfflinePageTemplate(
|
||||
id: string,
|
||||
): OfflinePageTemplate | undefined {
|
||||
return OFFLINE_PAGE_TEMPLATES.find((item) => item.id === id);
|
||||
}
|
||||
@@ -0,0 +1,193 @@
|
||||
/** 内置离线页模板：line-style */
|
||||
const html = `
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>离线页 | OpenFlare</title>
|
||||
<style>
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--color-bg: #fcfcfc;
|
||||
--color-line: #e0e0e0;
|
||||
--color-line-hover: #1a1a1a;
|
||||
--color-text-main: #1a1a1a;
|
||||
--color-text-sub: #666666;
|
||||
--color-text-muted: #999999;
|
||||
--color-accent: #d4d4d4;
|
||||
--font-geo: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||||
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-geo);
|
||||
background-color: var(--color-bg);
|
||||
background-image: radial-gradient(circle, var(--color-accent) 0.8px, transparent 0.8px);
|
||||
background-size: 24px 24px;
|
||||
color: var(--color-text-main);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 48px 24px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
width: 100%;
|
||||
max-width: 640px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.line-box {
|
||||
border: 1px solid var(--color-line);
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
backdrop-filter: blur(4px);
|
||||
padding: 32px;
|
||||
transition: all var(--transition-fast);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.line-box:hover {
|
||||
border-color: var(--color-line-hover);
|
||||
box-shadow: 0 0 0 1px var(--color-line-hover);
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-text-sub);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background-color: #f59e0b;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: var(--color-text-sub);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.contact-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
border-top: 1px dashed var(--color-line);
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.contact-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.contact-label {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.contact-value a {
|
||||
color: var(--color-text-main);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid var(--color-line);
|
||||
transition: border-color var(--transition-fast);
|
||||
}
|
||||
|
||||
.contact-value a:hover {
|
||||
border-color: var(--color-text-main);
|
||||
}
|
||||
|
||||
.footer-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 11px;
|
||||
color: var(--color-text-muted);
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-main);
|
||||
}
|
||||
|
||||
.brand-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
fill: currentColor;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="main-container">
|
||||
<div class="line-box">
|
||||
<div class="status-badge">
|
||||
<span class="status-dot"></span>
|
||||
SERVICE WORKER OFFLINE CACHE
|
||||
</div>
|
||||
<h1 class="title">网络中断或源站不可达</h1>
|
||||
<p class="description">
|
||||
系统已自动启用 Service Worker 兜底保护。如需紧急联系站长，请通过以下渠道：
|
||||
</p>
|
||||
<div class="contact-list">
|
||||
<div class="contact-row">
|
||||
<span class="contact-label">Email Support</span>
|
||||
<span class="contact-value"><a href="mailto:admin@example.com">admin@example.com</a></span>
|
||||
</div>
|
||||
<div class="contact-row">
|
||||
<span class="contact-label">Status Page</span>
|
||||
<span class="contact-value"><a href="https://status.example.com" target="_blank" rel="noopener">status.example.com</a></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bar">
|
||||
<div class="brand">
|
||||
<svg class="brand-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13 2L3 14H12L11 22L21 10H12L13 2Z" />
|
||||
</svg>
|
||||
<span>OpenFlare Edge</span>
|
||||
</div>
|
||||
<span>FALLBACK ACTIVE</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
|
||||
export default html;
|
||||
@@ -0,0 +1,128 @@
|
||||
/** 内置离线页模板：minimalist（默认） */
|
||||
const html = `
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>离线页 | OpenFlare</title>
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
background-color: #ffffff;
|
||||
color: #333333;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 48px 24px;
|
||||
}
|
||||
.container {
|
||||
max-width: 560px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 4px 12px;
|
||||
border-radius: 9999px;
|
||||
background-color: #f3f4f6;
|
||||
color: #4b5563;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.title {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
line-height: 1.25;
|
||||
}
|
||||
.description {
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
color: #6b7280;
|
||||
max-width: 480px;
|
||||
}
|
||||
.contact-card {
|
||||
width: 100%;
|
||||
background: #f9fafb;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
text-align: left;
|
||||
}
|
||||
.contact-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
font-size: 14px;
|
||||
color: #374151;
|
||||
}
|
||||
.contact-item svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: #6b7280;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.contact-item a {
|
||||
color: #2563eb;
|
||||
text-decoration: none;
|
||||
}
|
||||
.contact-item a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.footer {
|
||||
margin-top: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #9ca3af;
|
||||
font-size: 13px;
|
||||
}
|
||||
.brand-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
fill: currentColor;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="badge">OFFLINE CONTACT</div>
|
||||
<h1 class="title">站点暂不可用，联系站长</h1>
|
||||
<p class="description">
|
||||
当前无法连接至源站。页面已开启 Service Worker 离线保护，您可以通过以下方式与站长取得联系。
|
||||
</p>
|
||||
<div class="contact-card">
|
||||
<div class="contact-item">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
|
||||
<span>联系邮箱：<a href="mailto:admin@example.com">admin@example.com</a></span>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
|
||||
<span>服务状态页：<a href="https://status.example.com" target="_blank" rel="noopener">status.example.com</a></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<svg class="brand-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13 2L3 14H12L11 22L21 10H12L13 2Z" />
|
||||
</svg>
|
||||
<span>OpenFlare Protection</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
|
||||
export default html;
|
||||
@@ -4559,4 +4559,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
]
|
||||
|
||||
Reference in New Issue
Block a user