From fda727cf5317dd83428bf5a332ec7c4eeec8e1e1 Mon Sep 17 00:00:00 2001
From: ryan <ryan@arctel.net>
Date: Sat, 8 Aug 2026 21:27:21 +0800
Subject: [PATCH] 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
---
 docs/changelog/index.md                       |   9 +-
 ...tact-page-tab.tsx => offline-page-tab.tsx} |  24 +--
 .../app/(main)/responses/components/shared.ts |   8 +-
 .../{contact => offline}/edit/page.tsx        |  87 ++++++--
 .../{contact => offline}/preview/page.tsx     |  20 +-
 frontend/app/(main)/responses/page.tsx        |  18 +-
 frontend/lib/navigation/openflare-nav.ts      |   4 +-
 .../offline-page-templates/baohaus.ts         | 170 +++++++++++++++
 .../openflare/offline-page-templates/index.ts |  42 ++++
 .../offline-page-templates/line-style.ts      | 193 ++++++++++++++++++
 .../offline-page-templates/minimalist.ts      | 128 ++++++++++++
 frontend/lib/theme/themes.json                |   2 +-
 12 files changed, 651 insertions(+), 54 deletions(-)
 rename frontend/app/(main)/responses/components/{contact-page-tab.tsx => offline-page-tab.tsx} (93%)
 rename frontend/app/(main)/responses/{contact => offline}/edit/page.tsx (68%)
 rename frontend/app/(main)/responses/{contact => offline}/preview/page.tsx (84%)
 create mode 100644 frontend/lib/openflare/offline-page-templates/baohaus.ts
 create mode 100644 frontend/lib/openflare/offline-page-templates/index.ts
 create mode 100644 frontend/lib/openflare/offline-page-templates/line-style.ts
 create mode 100644 frontend/lib/openflare/offline-page-templates/minimalist.ts

diff --git a/docs/changelog/index.md b/docs/changelog/index.md
index d17c9e8d..b29103ec 100644
--- a/docs/changelog/index.md
+++ b/docs/changelog/index.md
@@ -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
 
diff --git a/frontend/app/(main)/responses/components/contact-page-tab.tsx b/frontend/app/(main)/responses/components/offline-page-tab.tsx
similarity index 93%
rename from frontend/app/(main)/responses/components/contact-page-tab.tsx
rename to frontend/app/(main)/responses/components/offline-page-tab.tsx
index ec24e2a0..39db07db 100644
--- a/frontend/app/(main)/responses/components/contact-page-tab.tsx
+++ b/frontend/app/(main)/responses/components/offline-page-tab.tsx
@@ -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'
diff --git a/frontend/app/(main)/responses/components/shared.ts b/frontend/app/(main)/responses/components/shared.ts
index 4e55f466..11606437 100644
--- a/frontend/app/(main)/responses/components/shared.ts
+++ b/frontend/app/(main)/responses/components/shared.ts
@@ -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] ?? '',
diff --git a/frontend/app/(main)/responses/contact/edit/page.tsx b/frontend/app/(main)/responses/offline/edit/page.tsx
similarity index 68%
rename from frontend/app/(main)/responses/contact/edit/page.tsx
rename to frontend/app/(main)/responses/offline/edit/page.tsx
index 3ea9a55d..2a6d0673 100644
--- a/frontend/app/(main)/responses/contact/edit/page.tsx
+++ b/frontend/app/(main)/responses/offline/edit/page.tsx
@@ -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'
diff --git a/frontend/app/(main)/responses/contact/preview/page.tsx b/frontend/app/(main)/responses/offline/preview/page.tsx
similarity index 84%
rename from frontend/app/(main)/responses/contact/preview/page.tsx
rename to frontend/app/(main)/responses/offline/preview/page.tsx
index 2889e1b2..e1a03b61 100644
--- a/frontend/app/(main)/responses/contact/preview/page.tsx
+++ b/frontend/app/(main)/responses/offline/preview/page.tsx
@@ -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'
diff --git a/frontend/app/(main)/responses/page.tsx b/frontend/app/(main)/responses/page.tsx
index 70b176a8..b9654547 100644
--- a/frontend/app/(main)/responses/page.tsx
+++ b/frontend/app/(main)/responses/page.tsx
@@ -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>
diff --git a/frontend/lib/navigation/openflare-nav.ts b/frontend/lib/navigation/openflare-nav.ts
index b746de5a..35616313 100644
--- a/frontend/lib/navigation/openflare-nav.ts
+++ b/frontend/lib/navigation/openflare-nav.ts
@@ -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',
       ],
     },
   ],
diff --git a/frontend/lib/openflare/offline-page-templates/baohaus.ts b/frontend/lib/openflare/offline-page-templates/baohaus.ts
new file mode 100644
index 00000000..ad6f70d3
--- /dev/null
+++ b/frontend/lib/openflare/offline-page-templates/baohaus.ts
@@ -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;
diff --git a/frontend/lib/openflare/offline-page-templates/index.ts b/frontend/lib/openflare/offline-page-templates/index.ts
new file mode 100644
index 00000000..fda68b1a
--- /dev/null
+++ b/frontend/lib/openflare/offline-page-templates/index.ts
@@ -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);
+}
diff --git a/frontend/lib/openflare/offline-page-templates/line-style.ts b/frontend/lib/openflare/offline-page-templates/line-style.ts
new file mode 100644
index 00000000..086be7e1
--- /dev/null
+++ b/frontend/lib/openflare/offline-page-templates/line-style.ts
@@ -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;
diff --git a/frontend/lib/openflare/offline-page-templates/minimalist.ts b/frontend/lib/openflare/offline-page-templates/minimalist.ts
new file mode 100644
index 00000000..211bc9ff
--- /dev/null
+++ b/frontend/lib/openflare/offline-page-templates/minimalist.ts
@@ -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;
diff --git a/frontend/lib/theme/themes.json b/frontend/lib/theme/themes.json
index 9818de0f..40c4d4ba 100644
--- a/frontend/lib/theme/themes.json
+++ b/frontend/lib/theme/themes.json
@@ -4559,4 +4559,4 @@
       }
     }
   }
-]
\ No newline at end of file
+]