From 1fe3da811dd9a44b5ddead7a54a764dd8ae5eaae Mon Sep 17 00:00:00 2001
From: XianYuDaXian <xian_yu@live.com>
Date: Mon, 27 Apr 2026 12:35:42 +0800
Subject: [PATCH 01/16] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=20WebDAV=20?=
 =?UTF-8?q?=E5=90=8C=E6=AD=A5=E4=B8=8E=E5=9B=BE=E7=89=87=E5=A4=8D=E5=88=B6?=
 =?UTF-8?q?=E5=85=BC=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                         |   6 +-
 src/components/ImageContextMenu.tsx |   3 +
 src/components/SettingsModal.tsx    | 160 ++++++++
 src/lib/clipboard.ts                |  92 ++++-
 src/lib/db.ts                       |   3 +-
 src/lib/snapshot.ts                 | 557 ++++++++++++++++++++++++++++
 src/lib/webdavSync.ts               | 262 +++++++++++++
 src/store.ts                        | 140 +++----
 src/types.ts                        |  25 ++
 vite.config.ts                      |   4 +
 10 files changed, 1153 insertions(+), 99 deletions(-)
 create mode 100644 src/lib/snapshot.ts
 create mode 100644 src/lib/webdavSync.ts

diff --git a/src/App.tsx b/src/App.tsx
index 55cef958..a4e60d1c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -12,6 +12,7 @@ import SettingsModal from './components/SettingsModal'
 import ConfirmDialog from './components/ConfirmDialog'
 import Toast from './components/Toast'
 import ImageContextMenu from './components/ImageContextMenu'
+import { syncWebDavOnLaunch } from './lib/webdavSync'
 
 export default function App() {
   const setSettings = useStore((s) => s.setSettings)
@@ -41,7 +42,10 @@ export default function App() {
       window.history.replaceState(null, '', nextUrl)
     }
 
-    initStore()
+    void (async () => {
+      await initStore()
+      await syncWebDavOnLaunch()
+    })()
   }, [setSettings])
 
   useEffect(() => {
diff --git a/src/components/ImageContextMenu.tsx b/src/components/ImageContextMenu.tsx
index 0c7694f9..ab73e034 100644
--- a/src/components/ImageContextMenu.tsx
+++ b/src/components/ImageContextMenu.tsx
@@ -17,6 +17,9 @@ export default function ImageContextMenu() {
         // 忽略没有 src 或空的 img
         if (!imgTarget.src) return
 
+        // 当前页面不是安全上下文时，放行浏览器原生右键菜单，避免图片复制失效。
+        if (!window.isSecureContext) return
+
         e.preventDefault()
         setMenuInfo({
           src: imgTarget.src,
diff --git a/src/components/SettingsModal.tsx b/src/components/SettingsModal.tsx
index fef21410..b223b7f3 100644
--- a/src/components/SettingsModal.tsx
+++ b/src/components/SettingsModal.tsx
@@ -3,6 +3,7 @@ import { normalizeBaseUrl } from '../lib/api'
 import { useStore, exportData, importData, clearAllData } from '../store'
 import { DEFAULT_IMAGES_MODEL, DEFAULT_RESPONSES_MODEL, DEFAULT_SETTINGS, type AppSettings } from '../types'
 import { useCloseOnEscape } from '../hooks/useCloseOnEscape'
+import { syncWithWebDav, testWebDavDirectory } from '../lib/webdavSync'
 import Select from './Select'
 
 export default function SettingsModal() {
@@ -28,14 +29,20 @@ export default function SettingsModal() {
 
   const commitSettings = (nextDraft: AppSettings) => {
     const apiMode = nextDraft.apiMode === 'responses' ? 'responses' : DEFAULT_SETTINGS.apiMode
+    const storageMode = nextDraft.storageMode === 'webdav' ? 'webdav' : DEFAULT_SETTINGS.storageMode
     const defaultModel = getDefaultModelForMode(apiMode)
     const normalizedDraft = {
       ...nextDraft,
       apiMode,
+      storageMode,
       baseUrl: normalizeBaseUrl(nextDraft.baseUrl.trim() || DEFAULT_SETTINGS.baseUrl),
       apiKey: nextDraft.apiKey,
       model: nextDraft.model.trim() || defaultModel,
       timeout: Number(nextDraft.timeout) || DEFAULT_SETTINGS.timeout,
+      webdav: {
+        ...DEFAULT_SETTINGS.webdav,
+        ...nextDraft.webdav,
+      },
     }
     setDraft(normalizedDraft)
     setSettings(normalizedDraft)
@@ -71,6 +78,28 @@ export default function SettingsModal() {
     e.target.value = ''
   }
 
+  const handleSyncNow = async () => {
+    try {
+      await syncWithWebDav()
+    } catch (err) {
+      useStore.getState().showToast(
+        `WebDAV 同步失败：${err instanceof Error ? err.message : String(err)}`,
+        'error',
+      )
+    }
+  }
+
+  const handleTestDirectory = async () => {
+    try {
+      await testWebDavDirectory()
+    } catch (err) {
+      useStore.getState().showToast(
+        `WebDAV 目录测试失败：${err instanceof Error ? err.message : String(err)}`,
+        'error',
+      )
+    }
+  }
+
   return (
     <div className="fixed inset-0 z-[70] flex items-center justify-center p-4">
       <div
@@ -163,6 +192,137 @@ export default function SettingsModal() {
                 </div>
               </div>
 
+              <label className="block">
+                <span className="block text-xs text-gray-500 dark:text-gray-400 mb-1">存储模式</span>
+                <Select
+                  value={draft.storageMode ?? DEFAULT_SETTINGS.storageMode}
+                  onChange={(value) => {
+                    const storageMode: AppSettings['storageMode'] = value === 'webdav' ? 'webdav' : 'local'
+                    const nextDraft: AppSettings = { ...draft, storageMode }
+                    setDraft(nextDraft)
+                    commitSettings(nextDraft)
+                  }}
+                  options={[
+                    { label: '本地存储（IndexedDB）', value: 'local' },
+                    { label: '远端同步（WebDAV）', value: 'webdav' },
+                  ]}
+                  className="w-full rounded-xl border border-gray-200/70 bg-white/60 px-3 py-2 text-sm text-gray-700 outline-none transition focus:border-blue-300 dark:border-white/[0.08] dark:bg-white/[0.03] dark:text-gray-200 dark:focus:border-blue-500/50"
+                />
+                <div className="mt-1 text-[10px] text-gray-400 dark:text-gray-500">
+                  选择 WebDAV 后，设置和图片快照会按远端地址同步；本地仍保留一份缓存。
+                </div>
+              </label>
+
+              {draft.storageMode === 'webdav' && (
+                <div className="space-y-4 rounded-2xl border border-dashed border-blue-200/70 bg-blue-50/40 p-4 dark:border-blue-500/20 dark:bg-blue-500/10">
+                  <label className="block">
+                    <span className="block text-xs text-gray-500 dark:text-gray-400 mb-1">WebDAV 快照地址</span>
+                    <input
+                      value={draft.webdav.url}
+                      onChange={(e) =>
+                        setDraft((prev) => ({
+                          ...prev,
+                          webdav: { ...prev.webdav, url: e.target.value },
+                        }))
+                      }
+                      onBlur={(e) =>
+                        commitSettings({
+                          ...draft,
+                          webdav: { ...draft.webdav, url: e.target.value },
+                        })
+                      }
+                      type="text"
+                      placeholder="https://dav.example.com/path/gptimage/"
+                      className="w-full rounded-xl border border-gray-200/70 bg-white/70 px-3 py-2 text-sm text-gray-700 outline-none transition focus:border-blue-300 dark:border-white/[0.08] dark:bg-white/[0.03] dark:text-gray-200 dark:focus:border-blue-500/50"
+                    />
+                    <div className="mt-1 text-[10px] text-gray-400 dark:text-gray-500">
+                      这里填写 WebDAV 目录地址，程序会在其下读写 <code className="bg-gray-100 dark:bg-white/[0.06] px-1 py-0.5 rounded">manifest.json</code> 和图片文件。
+                    </div>
+                  </label>
+
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                    <label className="block">
+                      <span className="block text-xs text-gray-500 dark:text-gray-400 mb-1">用户名</span>
+                      <input
+                        value={draft.webdav.username}
+                        onChange={(e) =>
+                          setDraft((prev) => ({
+                            ...prev,
+                            webdav: { ...prev.webdav, username: e.target.value },
+                          }))
+                        }
+                        onBlur={(e) =>
+                          commitSettings({
+                            ...draft,
+                            webdav: { ...draft.webdav, username: e.target.value },
+                          })
+                        }
+                        type="text"
+                        placeholder="username"
+                        className="w-full rounded-xl border border-gray-200/70 bg-white/70 px-3 py-2 text-sm text-gray-700 outline-none transition focus:border-blue-300 dark:border-white/[0.08] dark:bg-white/[0.03] dark:text-gray-200 dark:focus:border-blue-500/50"
+                      />
+                    </label>
+                    <label className="block">
+                      <span className="block text-xs text-gray-500 dark:text-gray-400 mb-1">密码</span>
+                      <input
+                        value={draft.webdav.password}
+                        onChange={(e) =>
+                          setDraft((prev) => ({
+                            ...prev,
+                            webdav: { ...prev.webdav, password: e.target.value },
+                          }))
+                        }
+                        onBlur={(e) =>
+                          commitSettings({
+                            ...draft,
+                            webdav: { ...draft.webdav, password: e.target.value },
+                          })
+                        }
+                        type="password"
+                        placeholder="password"
+                        className="w-full rounded-xl border border-gray-200/70 bg-white/70 px-3 py-2 text-sm text-gray-700 outline-none transition focus:border-blue-300 dark:border-white/[0.08] dark:bg-white/[0.03] dark:text-gray-200 dark:focus:border-blue-500/50"
+                      />
+                    </label>
+                  </div>
+
+                  <label className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
+                    <input
+                      type="checkbox"
+                      checked={draft.webdav.syncOnStartup}
+                      onChange={(e) => {
+                        const nextDraft = {
+                          ...draft,
+                          webdav: { ...draft.webdav, syncOnStartup: e.target.checked },
+                        }
+                        setDraft(nextDraft)
+                        commitSettings(nextDraft)
+                      }}
+                      className="h-4 w-4 rounded border-gray-300 text-blue-500 focus:ring-blue-500 dark:border-white/[0.12]"
+                    />
+                    启动时自动同步
+                  </label>
+
+                  <div className="flex gap-2">
+                    <button
+                      type="button"
+                      onClick={handleTestDirectory}
+                      className="flex-1 rounded-xl bg-gray-100/80 px-4 py-2.5 text-sm font-medium text-gray-700 transition hover:bg-gray-200 dark:bg-white/[0.06] dark:text-gray-200 dark:hover:bg-white/[0.1]"
+                      disabled={!draft.webdav.url.trim()}
+                    >
+                      测试目录
+                    </button>
+                    <button
+                      type="button"
+                      onClick={handleSyncNow}
+                      className="flex-1 rounded-xl bg-blue-500 px-4 py-2.5 text-sm font-medium text-white transition hover:bg-blue-600 disabled:opacity-50"
+                      disabled={!draft.webdav.url.trim()}
+                    >
+                      立即同步
+                    </button>
+                  </div>
+                </div>
+              )}
+
               <label className="block">
                 <span className="block text-xs text-gray-500 dark:text-gray-400 mb-1">API 接口</span>
                 <Select
diff --git a/src/lib/clipboard.ts b/src/lib/clipboard.ts
index 0d81926e..11c8b30c 100644
--- a/src/lib/clipboard.ts
+++ b/src/lib/clipboard.ts
@@ -16,16 +16,25 @@ export async function copyTextToClipboard(text: string) {
 }
 
 export async function copyBlobToClipboard(blob: Blob) {
-  if (!navigator.clipboard?.write || typeof ClipboardItem === 'undefined') {
-    throw new Error('Clipboard image API is not available')
+  const mimeType = normalizeImageMimeType(blob.type)
+
+  if (window.isSecureContext && navigator.clipboard?.write && typeof ClipboardItem !== 'undefined') {
+    await navigator.clipboard.write([
+      new ClipboardItem({ [mimeType]: blob }, { presentationStyle: 'inline' }),
+    ])
+    return
   }
 
-  await navigator.clipboard.write([
-    new ClipboardItem({ [blob.type]: blob }),
-  ])
+  if (await copyBlobWithExecCommand(blob, mimeType)) return
+
+  throw new Error('当前页面不是安全上下文，无法直接复制图片，请改用 HTTPS 或 localhost 访问后重试')
 }
 
 export function getClipboardFailureMessage(fallback: string, err: unknown) {
+  if (!window.isSecureContext) {
+    return '复制失败：当前页面不是安全上下文，请改用 HTTPS 或 localhost 访问后重试'
+  }
+
   if (isEmbeddedPage() && isClipboardPermissionError(err)) {
     return '复制失败：内嵌页面未授予剪贴板权限'
   }
@@ -54,6 +63,79 @@ function copyTextWithExecCommand(text: string) {
   }
 }
 
+async function copyBlobWithExecCommand(blob: Blob, mimeType: string) {
+  const objectUrl = URL.createObjectURL(blob)
+  const host = document.createElement('div')
+  const image = document.createElement('img')
+  const selection = window.getSelection()
+  const fileName = `image-${Date.now()}.${getImageFileExtension(mimeType)}`
+  const file = new File([blob], fileName, { type: mimeType })
+
+  host.contentEditable = 'true'
+  host.setAttribute('aria-hidden', 'true')
+  host.style.position = 'fixed'
+  host.style.left = '-9999px'
+  host.style.top = '0'
+  host.style.width = '1px'
+  host.style.height = '1px'
+  host.style.overflow = 'hidden'
+  host.style.opacity = '0'
+
+  image.src = objectUrl
+  image.alt = ''
+  image.draggable = false
+
+  host.appendChild(image)
+  document.body.appendChild(host)
+
+  const onCopy = (event: ClipboardEvent) => {
+    const clipboardData = event.clipboardData
+    if (!clipboardData) return
+
+    try {
+      clipboardData.items.add(file)
+    } catch {
+      clipboardData.setData('text/html', `<img src="${objectUrl}" alt="">`)
+      clipboardData.setData('text/plain', objectUrl)
+    }
+
+    event.preventDefault()
+  }
+
+  try {
+    document.addEventListener('copy', onCopy)
+    const range = document.createRange()
+    range.selectNode(image)
+    selection?.removeAllRanges()
+    selection?.addRange(range)
+    host.focus()
+
+    return document.execCommand('copy')
+  } catch {
+    return false
+  } finally {
+    document.removeEventListener('copy', onCopy)
+    selection?.removeAllRanges()
+    document.body.removeChild(host)
+    URL.revokeObjectURL(objectUrl)
+  }
+}
+
+function normalizeImageMimeType(mimeType: string) {
+  if (mimeType) return mimeType
+  return 'image/png'
+}
+
+function getImageFileExtension(mimeType: string) {
+  const type = mimeType.toLowerCase()
+  if (type === 'image/jpeg') return 'jpg'
+  if (type === 'image/webp') return 'webp'
+  if (type === 'image/gif') return 'gif'
+  if (type === 'image/bmp') return 'bmp'
+  if (type === 'image/svg+xml') return 'svg'
+  return 'png'
+}
+
 function isEmbeddedPage() {
   try {
     return window.self !== window.top
diff --git a/src/lib/db.ts b/src/lib/db.ts
index f01ec418..ab41ee16 100644
--- a/src/lib/db.ts
+++ b/src/lib/db.ts
@@ -116,7 +116,8 @@ export async function storeImage(dataUrl: string, source: 'upload' | 'generated'
   const id = await hashDataUrl(dataUrl)
   const existing = await getImage(id)
   if (!existing) {
-    await putImage({ id, dataUrl, createdAt: Date.now(), source })
+    const now = Date.now()
+    await putImage({ id, dataUrl, createdAt: now, updatedAt: now, source })
   }
   return id
 }
diff --git a/src/lib/snapshot.ts b/src/lib/snapshot.ts
new file mode 100644
index 00000000..8d2065a8
--- /dev/null
+++ b/src/lib/snapshot.ts
@@ -0,0 +1,557 @@
+import { clearImages, clearTasks, getAllImages, getAllTasks, putImage, putTask } from './db'
+import { zipSync, unzipSync, strFromU8, strToU8 } from 'fflate'
+import { DEFAULT_SETTINGS, type AppSettings, type ExportData, type StoredImage, type TaskRecord } from '../types'
+
+export interface SyncSnapshot {
+  version: number
+  exportedAt: number
+  settings: AppSettings
+  tasks: TaskRecord[]
+  images: StoredImage[]
+  deletedTaskIds: Record<string, number>
+  deletedImageIds: Record<string, number>
+}
+
+export interface SnapshotImageFile {
+  path: string
+  ext: string
+  bytes: Uint8Array
+  createdAt: number
+  updatedAt: number
+  source?: 'upload' | 'generated'
+}
+
+const SNAPSHOT_VERSION = 3
+const TOMBSTONE_STORAGE_KEY = 'gpt-image-playground-sync-tombstones'
+
+export interface SyncTombstones {
+  deletedTaskIds: Record<string, number>
+  deletedImageIds: Record<string, number>
+}
+
+export async function buildLocalSnapshot(settings: AppSettings): Promise<SyncSnapshot> {
+  const exportedAt = Date.now()
+  const tasks = (await getAllTasks()).map((task) => normalizeTask(task, exportedAt))
+  const images = (await getAllImages()).map((image) => normalizeImage(image, exportedAt))
+  const tombstones = readSyncTombstones()
+
+  return {
+    version: SNAPSHOT_VERSION,
+    exportedAt,
+    settings: normalizeSettings(settings, exportedAt),
+    tasks,
+    images,
+    deletedTaskIds: { ...tombstones.deletedTaskIds },
+    deletedImageIds: { ...tombstones.deletedImageIds },
+  }
+}
+
+export function mergeSnapshots(local: SyncSnapshot, remote: SyncSnapshot): SyncSnapshot {
+  const exportedAt = Math.max(local.exportedAt, remote.exportedAt)
+  const settings = pickNewerSettings(local.settings, remote.settings)
+  const deletedTaskIds = mergeTombstones(local.deletedTaskIds, remote.deletedTaskIds)
+  const deletedImageIds = mergeTombstones(local.deletedImageIds, remote.deletedImageIds)
+  const tasks = mergeRecords(local.tasks, remote.tasks, getTaskTimestamp).filter((task) => {
+    const deletedAt = deletedTaskIds[task.id]
+    return deletedAt == null || deletedAt < getTaskTimestamp(task)
+  })
+  const images = mergeRecords(local.images, remote.images, getImageTimestamp).filter((image) => {
+    const deletedAt = deletedImageIds[image.id]
+    return deletedAt == null || deletedAt < getImageTimestamp(image)
+  })
+
+  return {
+    version: SNAPSHOT_VERSION,
+    exportedAt,
+    settings,
+    tasks,
+    images,
+    deletedTaskIds,
+    deletedImageIds,
+  }
+}
+
+export async function replaceLocalData(snapshot: SyncSnapshot) {
+  await clearTasks()
+  await clearImages()
+
+  for (const image of snapshot.images) {
+    await putImage(image)
+  }
+
+  for (const task of snapshot.tasks) {
+    await putTask(task)
+  }
+}
+
+export function snapshotToExportData(snapshot: SyncSnapshot): ExportData {
+  const imageFiles: ExportData['imageFiles'] = {}
+
+  for (const img of snapshot.images) {
+    const { ext } = parseDataUrl(img.dataUrl)
+    imageFiles[img.id] = {
+      path: getRemoteImagePath(img.id, ext),
+      createdAt: img.createdAt,
+      updatedAt: img.updatedAt,
+      source: img.source,
+    }
+  }
+
+  return {
+    version: SNAPSHOT_VERSION,
+    exportedAt: new Date(snapshot.exportedAt).toISOString(),
+    settings: snapshot.settings,
+    tasks: snapshot.tasks,
+    deletedTaskIds: { ...snapshot.deletedTaskIds },
+    deletedImageIds: { ...snapshot.deletedImageIds },
+    imageFiles,
+  }
+}
+
+export function snapshotToZipBlob(snapshot: SyncSnapshot): Blob {
+  const exportedAt = snapshot.exportedAt
+  const exportData = snapshotToExportData(snapshot)
+  const zipFiles: Record<string, Uint8Array | [Uint8Array, { mtime: Date }]> = {}
+
+  for (const img of snapshot.images) {
+    const { bytes, ext } = parseDataUrl(img.dataUrl)
+    const path = `images/${img.id}.${ext}`
+    zipFiles[path] = [bytes, { mtime: new Date(img.updatedAt ?? img.createdAt ?? exportedAt) }]
+  }
+
+  zipFiles['manifest.json'] = [strToU8(JSON.stringify(exportData, null, 2)), { mtime: new Date(exportedAt) }]
+
+  const zipped = zipSync(zipFiles, { level: 6 })
+  return new Blob([zipped.buffer as ArrayBuffer], { type: 'application/zip' })
+}
+
+export function snapshotToDirectoryManifest(snapshot: SyncSnapshot): ExportData {
+  return snapshotToExportData(snapshot)
+}
+
+export function snapshotToDirectoryFiles(snapshot: SyncSnapshot): SnapshotImageFile[] {
+  const exportedAt = snapshot.exportedAt
+  return snapshot.images.map((img) => {
+    const { bytes, ext } = parseDataUrl(img.dataUrl)
+    return {
+      path: getRemoteImagePath(img.id, ext),
+      ext,
+      bytes,
+      createdAt: img.updatedAt ?? img.createdAt ?? exportedAt,
+      updatedAt: img.updatedAt ?? img.createdAt ?? exportedAt,
+      source: img.source,
+    }
+  })
+}
+
+export function snapshotToManifestJson(snapshot: SyncSnapshot) {
+  return JSON.stringify(snapshotToDirectoryManifest(snapshot), null, 2)
+}
+
+export async function readSnapshotFromBlob(blob: Blob): Promise<SyncSnapshot> {
+  const buffer = await blob.arrayBuffer()
+  return readSnapshotFromBuffer(buffer)
+}
+
+export function dataUrlToBinary(dataUrl: string) {
+  return parseDataUrl(dataUrl)
+}
+
+export function binaryToDataUrl(bytes: Uint8Array, filePath: string): string {
+  return bytesToDataUrl(bytes, filePath)
+}
+
+export async function readSnapshotFromFile(file: File): Promise<SyncSnapshot> {
+  return readSnapshotFromBlob(file)
+}
+
+export async function snapshotFromManifest(
+  manifest: unknown,
+  readImageBytes: (path: string) => Promise<Uint8Array | null>,
+): Promise<SyncSnapshot> {
+  if (!isPlainObject(manifest)) {
+    throw new Error('无效的数据格式')
+  }
+
+  const raw = manifest as Partial<ExportData> & { version?: number }
+  if (!raw.tasks || !raw.imageFiles || typeof raw.imageFiles !== 'object') {
+    throw new Error('无效的数据格式')
+  }
+
+  const exportedAt = parseExportedAt(raw.exportedAt)
+  const settings = normalizeSettings(raw.settings ?? {}, exportedAt)
+  const tasks = (raw.tasks ?? []).map((task) => normalizeTask(task, exportedAt))
+  const deletedTaskIds = normalizeTombstones(raw.deletedTaskIds)
+  const deletedImageIds = normalizeTombstones(raw.deletedImageIds)
+  const images: StoredImage[] = []
+
+  for (const [id, info] of Object.entries(raw.imageFiles)) {
+    const bytes = await readImageBytes(info.path)
+    if (!bytes) continue
+    images.push(
+      normalizeImage(
+        {
+          id,
+          dataUrl: bytesToDataUrl(bytes, info.path),
+          createdAt: info.createdAt,
+          updatedAt: info.updatedAt ?? info.createdAt,
+          source: info.source,
+        },
+        exportedAt,
+      ),
+    )
+  }
+
+  return {
+    version: typeof raw.version === 'number' ? raw.version : SNAPSHOT_VERSION,
+    exportedAt,
+    settings,
+    tasks,
+    images,
+    deletedTaskIds,
+    deletedImageIds,
+  }
+}
+
+export async function importSnapshotIntoLocalData(file: File) {
+  const snapshot = await readSnapshotFromFile(file)
+  await replaceLocalData(snapshot)
+  return snapshot
+}
+
+export function sortTasksForDisplay(tasks: TaskRecord[]) {
+  return [...tasks].sort((a, b) => {
+    const createdDiff = (b.createdAt ?? 0) - (a.createdAt ?? 0)
+    if (createdDiff !== 0) return createdDiff
+
+    const updatedDiff = (b.updatedAt ?? 0) - (a.updatedAt ?? 0)
+    if (updatedDiff !== 0) return updatedDiff
+
+    return b.id.localeCompare(a.id)
+  })
+}
+
+function readSnapshotFromBuffer(buffer: ArrayBuffer): SyncSnapshot {
+  const unzipped = unzipSync(new Uint8Array(buffer))
+  const manifestBytes = unzipped['manifest.json']
+  if (!manifestBytes) throw new Error('ZIP 中缺少 manifest.json')
+
+  const raw = JSON.parse(strFromU8(manifestBytes)) as Partial<ExportData> & { version?: number }
+  if (!raw.tasks || !raw.imageFiles) {
+    throw new Error('无效的数据格式')
+  }
+
+  const exportedAt = parseExportedAt(raw.exportedAt)
+  const settings = normalizeSettings(raw.settings ?? {}, exportedAt)
+  const tasks = (raw.tasks ?? []).map((task) => normalizeTask(task, exportedAt))
+  const deletedTaskIds = normalizeTombstones(raw.deletedTaskIds)
+  const deletedImageIds = normalizeTombstones(raw.deletedImageIds)
+  const images: StoredImage[] = []
+
+  for (const [id, info] of Object.entries(raw.imageFiles)) {
+    const bytes = unzipped[info.path]
+    if (!bytes) continue
+    images.push(
+      normalizeImage(
+        {
+          id,
+          dataUrl: bytesToDataUrl(bytes, info.path),
+          createdAt: info.createdAt,
+          updatedAt: info.updatedAt ?? info.createdAt,
+          source: info.source,
+        },
+        exportedAt,
+      ),
+    )
+  }
+
+  return {
+    version: typeof raw.version === 'number' ? raw.version : SNAPSHOT_VERSION,
+    exportedAt,
+    settings,
+    tasks,
+    images,
+    deletedTaskIds,
+    deletedImageIds,
+  }
+}
+
+function mergeRecords<T extends { id: string }>(
+  local: T[],
+  remote: T[],
+  getTimestamp: (item: T) => number,
+) {
+  const merged = new Map<string, T>()
+
+  for (const item of [...local, ...remote]) {
+    const current = merged.get(item.id)
+    if (!current || getTimestamp(item) >= getTimestamp(current)) {
+      merged.set(item.id, item)
+    }
+  }
+
+  return Array.from(merged.values())
+}
+
+export function readSyncTombstones(): SyncTombstones {
+  try {
+    const raw = localStorage.getItem(TOMBSTONE_STORAGE_KEY)
+    if (!raw) {
+      return { deletedTaskIds: {}, deletedImageIds: {} }
+    }
+    const parsed = JSON.parse(raw) as Partial<SyncTombstones>
+    return {
+      deletedTaskIds: normalizeTombstones(parsed.deletedTaskIds),
+      deletedImageIds: normalizeTombstones(parsed.deletedImageIds),
+    }
+  } catch {
+    return { deletedTaskIds: {}, deletedImageIds: {} }
+  }
+}
+
+export function replaceSyncTombstones(tombstones: SyncTombstones) {
+  try {
+    localStorage.setItem(TOMBSTONE_STORAGE_KEY, JSON.stringify({
+      deletedTaskIds: normalizeTombstones(tombstones.deletedTaskIds),
+      deletedImageIds: normalizeTombstones(tombstones.deletedImageIds),
+    }))
+  } catch {
+    /* 忽略本地存储失败 */
+  }
+}
+
+export function markTaskDeleted(taskId: string, deletedAt = Date.now()) {
+  const tombstones = readSyncTombstones()
+  tombstones.deletedTaskIds[taskId] = deletedAt
+  replaceSyncTombstones(tombstones)
+}
+
+export function markImageDeleted(imageId: string, deletedAt = Date.now()) {
+  const tombstones = readSyncTombstones()
+  tombstones.deletedImageIds[imageId] = deletedAt
+  replaceSyncTombstones(tombstones)
+}
+
+export function clearSyncTombstones() {
+  replaceSyncTombstones({ deletedTaskIds: {}, deletedImageIds: {} })
+}
+
+function pickNewerSettings(local: AppSettings, remote: AppSettings) {
+  const remoteIsNewer = getSettingsTimestamp(remote) >= getSettingsTimestamp(local)
+  const primary = remoteIsNewer ? remote : local
+  const secondary = remoteIsNewer ? local : remote
+
+  return {
+    ...primary,
+    baseUrl: pickApiStringSetting(local.baseUrl, remote.baseUrl, DEFAULT_SETTINGS.baseUrl, remoteIsNewer),
+    apiKey: pickApiStringSetting(local.apiKey, remote.apiKey, DEFAULT_SETTINGS.apiKey, remoteIsNewer),
+    model: pickApiStringSetting(local.model, remote.model, DEFAULT_SETTINGS.model, remoteIsNewer),
+    timeout: pickNumericSetting(local.timeout, remote.timeout, DEFAULT_SETTINGS.timeout, remoteIsNewer),
+    apiMode: pickEnumSetting(local.apiMode, remote.apiMode, DEFAULT_SETTINGS.apiMode, remoteIsNewer),
+    storageMode: pickEnumSetting(local.storageMode, remote.storageMode, DEFAULT_SETTINGS.storageMode, remoteIsNewer),
+    webdav: {
+      url: pickCredentialSetting(local.webdav.url, remote.webdav.url),
+      username: pickCredentialSetting(local.webdav.username, remote.webdav.username),
+      password: pickCredentialSetting(local.webdav.password, remote.webdav.password),
+      syncOnStartup: pickBooleanSetting(local.webdav.syncOnStartup, remote.webdav.syncOnStartup, remoteIsNewer),
+    },
+    updatedAt: Math.max(getSettingsTimestamp(local), getSettingsTimestamp(remote)),
+  }
+}
+
+function getSettingsTimestamp(settings: AppSettings) {
+  return settings.updatedAt ?? 0
+}
+
+function pickApiStringSetting(local: string, remote: string, defaultValue: string, remoteIsNewer: boolean) {
+  const localMeaningful = isMeaningfulStringSetting(local, defaultValue)
+  const remoteMeaningful = isMeaningfulStringSetting(remote, defaultValue)
+
+  if (localMeaningful && !remoteMeaningful) return local
+  if (remoteMeaningful && !localMeaningful) return remote
+  return remoteIsNewer ? remote : local
+}
+
+function pickNumericSetting(local: number, remote: number, defaultValue: number, remoteIsNewer: boolean) {
+  const localMeaningful = local !== defaultValue
+  const remoteMeaningful = remote !== defaultValue
+
+  if (localMeaningful && !remoteMeaningful) return local
+  if (remoteMeaningful && !localMeaningful) return remote
+  return remoteIsNewer ? remote : local
+}
+
+function pickEnumSetting<T extends string>(local: T, remote: T, defaultValue: T, remoteIsNewer: boolean) {
+  const localMeaningful = local !== defaultValue
+  const remoteMeaningful = remote !== defaultValue
+
+  if (localMeaningful && !remoteMeaningful) return local
+  if (remoteMeaningful && !localMeaningful) return remote
+  return remoteIsNewer ? remote : local
+}
+
+function pickCredentialSetting(local: string, remote: string) {
+  if (local.trim()) return local
+  return remote
+}
+
+function pickBooleanSetting(local: boolean, remote: boolean, remoteIsNewer: boolean) {
+  return remoteIsNewer ? remote : local
+}
+
+function isMeaningfulStringSetting(value: string, defaultValue: string) {
+  return value.trim() !== '' && value !== defaultValue
+}
+
+function getTaskTimestamp(task: TaskRecord) {
+  return task.updatedAt ?? task.finishedAt ?? task.createdAt ?? 0
+}
+
+function getImageTimestamp(image: StoredImage) {
+  return image.updatedAt ?? image.createdAt ?? 0
+}
+
+function mergeTombstones(local: Record<string, number>, remote: Record<string, number>) {
+  const merged: Record<string, number> = { ...local }
+  for (const [id, deletedAt] of Object.entries(remote)) {
+    const current = merged[id]
+    if (current == null || deletedAt >= current) {
+      merged[id] = deletedAt
+    }
+  }
+  return merged
+}
+
+function normalizeSettings(settings: Partial<AppSettings>, fallback: number): AppSettings {
+  const isDefaultLike =
+    (settings.baseUrl ?? DEFAULT_SETTINGS.baseUrl) === DEFAULT_SETTINGS.baseUrl &&
+    (settings.apiKey ?? DEFAULT_SETTINGS.apiKey) === DEFAULT_SETTINGS.apiKey &&
+    (settings.model ?? DEFAULT_SETTINGS.model) === DEFAULT_SETTINGS.model &&
+    (settings.timeout ?? DEFAULT_SETTINGS.timeout) === DEFAULT_SETTINGS.timeout &&
+    (settings.apiMode === 'responses' ? 'responses' : 'images') === DEFAULT_SETTINGS.apiMode &&
+    (settings.storageMode === 'webdav' ? 'webdav' : 'local') === DEFAULT_SETTINGS.storageMode &&
+    (settings.webdav?.url ?? DEFAULT_SETTINGS.webdav.url) === DEFAULT_SETTINGS.webdav.url &&
+    (settings.webdav?.username ?? DEFAULT_SETTINGS.webdav.username) === DEFAULT_SETTINGS.webdav.username &&
+    (settings.webdav?.password ?? DEFAULT_SETTINGS.webdav.password) === DEFAULT_SETTINGS.webdav.password &&
+    (settings.webdav?.syncOnStartup ?? DEFAULT_SETTINGS.webdav.syncOnStartup) === DEFAULT_SETTINGS.webdav.syncOnStartup
+
+  return {
+    ...(settings as AppSettings),
+    baseUrl: settings.baseUrl ?? '',
+    apiKey: settings.apiKey ?? '',
+    model: settings.model ?? '',
+    timeout: settings.timeout ?? 0,
+    apiMode: settings.apiMode === 'responses' ? 'responses' : 'images',
+    storageMode: settings.storageMode === 'webdav' ? 'webdav' : 'local',
+    webdav: {
+      url: settings.webdav?.url ?? '',
+      username: settings.webdav?.username ?? '',
+      password: settings.webdav?.password ?? '',
+      syncOnStartup: settings.webdav?.syncOnStartup ?? true,
+    },
+    updatedAt: settings.updatedAt ?? (isDefaultLike ? 0 : fallback),
+  }
+}
+
+function normalizeTombstones(tombstones: unknown) {
+  if (!tombstones || typeof tombstones !== 'object') return {}
+  const record = tombstones as Record<string, unknown>
+  const normalized: Record<string, number> = {}
+  for (const [id, value] of Object.entries(record)) {
+    if (typeof value === 'number' && Number.isFinite(value)) {
+      normalized[id] = value
+    }
+  }
+  return normalized
+}
+
+function normalizeTask(task: Partial<TaskRecord>, fallback: number): TaskRecord {
+  return {
+    ...(task as TaskRecord),
+    id: task.id ?? `task-${fallback}`,
+    prompt: task.prompt ?? '',
+    params: task.params ?? {
+      size: 'auto',
+      quality: 'auto',
+      output_format: 'png',
+      output_compression: null,
+      moderation: 'auto',
+      n: 1,
+    },
+    inputImageIds: task.inputImageIds ?? [],
+    outputImages: task.outputImages ?? [],
+    status: task.status === 'done' || task.status === 'error' ? task.status : 'running',
+    error: task.error ?? null,
+    createdAt: task.createdAt ?? fallback,
+    finishedAt: task.finishedAt ?? null,
+    elapsed: task.elapsed ?? null,
+    updatedAt: task.updatedAt ?? task.finishedAt ?? task.createdAt ?? fallback,
+  }
+}
+
+function normalizeImage(image: Partial<StoredImage>, fallback: number): StoredImage {
+  return {
+    ...(image as StoredImage),
+    id: image.id ?? `image-${fallback}`,
+    dataUrl: image.dataUrl ?? '',
+    createdAt: image.createdAt ?? fallback,
+    updatedAt: image.updatedAt ?? image.createdAt ?? fallback,
+    source: image.source,
+  }
+}
+
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+  return !!value && typeof value === 'object' && !Array.isArray(value)
+}
+
+function parseExportedAt(value: unknown) {
+  if (typeof value === 'string') {
+    const parsed = Date.parse(value)
+    if (!Number.isNaN(parsed)) return parsed
+  }
+  return Date.now()
+}
+
+function parseDataUrl(dataUrl: string): { ext: string; bytes: Uint8Array } {
+  const match = dataUrl.match(/^data:([^;]+);base64,(.*)$/)
+  const mime = match?.[1] ?? 'image/png'
+  const b64 = match?.[2] ?? dataUrl.replace(/^data:[^;]+;base64,/, '')
+  const binary = atob(b64)
+  const bytes = new Uint8Array(binary.length)
+  for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i)
+  return {
+    ext: mimeToExt(mime),
+    bytes,
+  }
+}
+
+function bytesToDataUrl(bytes: Uint8Array, filePath: string): string {
+  const ext = filePath.split('.').pop()?.toLowerCase() ?? 'png'
+  const mimeMap: Record<string, string> = {
+    png: 'image/png',
+    jpg: 'image/jpeg',
+    jpeg: 'image/jpeg',
+    webp: 'image/webp',
+    gif: 'image/gif',
+    bmp: 'image/bmp',
+    svg: 'image/svg+xml',
+  }
+  const mime = mimeMap[ext] ?? 'image/png'
+  let binary = ''
+  for (let i = 0; i < bytes.length; i++) binary += String.fromCharCode(bytes[i])
+  return `data:${mime};base64,${btoa(binary)}`
+}
+
+function getRemoteImagePath(imageId: string, ext: string) {
+  return `${imageId}.${ext}`
+}
+
+function mimeToExt(mime: string) {
+  const value = mime.toLowerCase()
+  if (value === 'image/jpeg') return 'jpg'
+  if (value === 'image/webp') return 'webp'
+  if (value === 'image/gif') return 'gif'
+  if (value === 'image/bmp') return 'bmp'
+  if (value === 'image/svg+xml') return 'svg'
+  return 'png'
+}
diff --git a/src/lib/webdavSync.ts b/src/lib/webdavSync.ts
new file mode 100644
index 00000000..9bbe3eeb
--- /dev/null
+++ b/src/lib/webdavSync.ts
@@ -0,0 +1,262 @@
+import { primeImageCache, useStore } from '../store'
+import {
+  buildLocalSnapshot,
+  mergeSnapshots,
+  dataUrlToBinary,
+  snapshotFromManifest,
+  snapshotToDirectoryFiles,
+  snapshotToDirectoryManifest,
+  replaceLocalData,
+  replaceSyncTombstones,
+  sortTasksForDisplay,
+} from './snapshot'
+
+let syncInFlight: Promise<void> | null = null
+const MANIFEST_FILE_NAME = 'manifest.json'
+const TEST_FILE_PREFIX = '.gpt-image-playground-test-'
+
+export async function syncWithWebDav() {
+  if (syncInFlight) return syncInFlight
+
+  syncInFlight = (async () => {
+    const { settings, setSettings, setTasks, showToast } = useStore.getState()
+    const webdav = settings.webdav
+
+    if (settings.storageMode !== 'webdav') {
+      showToast('当前是本地存储模式，无需同步', 'info')
+      return
+    }
+
+    if (!webdav.url.trim()) {
+      throw new Error('请先填写 WebDAV 目录地址')
+    }
+
+    const rootUrl = resolveWebDavRoot(webdav.url.trim())
+    const localSnapshot = await buildLocalSnapshot(settings)
+    const remoteSnapshot = await readRemoteSnapshot(rootUrl, webdav.username, webdav.password)
+    const mergedSnapshot = remoteSnapshot ? mergeSnapshots(localSnapshot, remoteSnapshot) : localSnapshot
+    const manifest = snapshotToDirectoryManifest(mergedSnapshot)
+    const files = snapshotToDirectoryFiles(mergedSnapshot)
+
+    await uploadSnapshotDirectory(rootUrl, webdav.username, webdav.password, manifest, files, remoteSnapshot)
+    await replaceLocalData(mergedSnapshot)
+    replaceSyncTombstones({
+      deletedTaskIds: mergedSnapshot.deletedTaskIds,
+      deletedImageIds: mergedSnapshot.deletedImageIds,
+    })
+    primeImageCache(mergedSnapshot.images)
+    setSettings(mergedSnapshot.settings)
+    setTasks(sortTasksForDisplay(mergedSnapshot.tasks))
+    showToast(remoteSnapshot ? '已与 WebDAV 目录同步' : '已写入 WebDAV 目录', 'success')
+  })()
+
+  try {
+    await syncInFlight
+  } finally {
+    syncInFlight = null
+  }
+}
+
+export async function syncWebDavOnLaunch() {
+  const { settings, showToast } = useStore.getState()
+  if (settings.storageMode !== 'webdav' || !settings.webdav.syncOnStartup) return
+
+  try {
+    await syncWithWebDav()
+  } catch (err) {
+    showToast(formatWebDavError('WebDAV 启动同步失败', err), 'error')
+  }
+}
+
+export async function testWebDavDirectory() {
+  const { settings, showToast } = useStore.getState()
+  if (settings.storageMode !== 'webdav') {
+    showToast('当前是本地存储模式，无需测试 WebDAV', 'info')
+    return
+  }
+
+  const webdav = settings.webdav
+  if (!webdav.url.trim()) {
+    throw new Error('请先填写 WebDAV 目录地址')
+  }
+
+  const rootUrl = resolveWebDavRoot(webdav.url.trim())
+  const testUrl = resolveRemoteUrl(rootUrl, `${TEST_FILE_PREFIX}${Date.now()}.txt`)
+  const imageTestUrl = resolveRemoteUrl(rootUrl, `.${TEST_FILE_PREFIX}${Date.now()}.png`)
+  const body = new Blob([`ok-${Date.now()}`], { type: 'text/plain' })
+
+  await putRemoteFile(testUrl, body, 'text/plain', webdav.username, webdav.password)
+  await putRemoteFile(imageTestUrl, body, 'image/png', webdav.username, webdav.password)
+
+  try {
+    await deleteRemoteFile(testUrl, webdav.username, webdav.password)
+  } catch {
+    /* 测试文件删除失败不影响可用性判断 */
+  }
+
+  try {
+    await deleteRemoteFile(imageTestUrl, webdav.username, webdav.password)
+  } catch {
+    /* 测试文件删除失败不影响可用性判断 */
+  }
+
+  showToast('WebDAV 目录可用', 'success')
+}
+
+function resolveWebDavRoot(url: string) {
+  const trimmed = url.trim()
+  return trimmed.endsWith('/') ? trimmed : `${trimmed}/`
+}
+
+function resolveRemoteUrl(rootUrl: string, relativePath: string) {
+  return new URL(relativePath.replace(/^\/+/, ''), rootUrl).toString()
+}
+
+function buildAuthHeaders(username: string, password: string) {
+  const headers: Record<string, string> = {}
+  if (username || password) {
+    headers.Authorization = `Basic ${btoa(`${username}:${password}`)}`
+  }
+  return headers
+}
+
+async function readRemoteSnapshot(rootUrl: string, username: string, password: string) {
+  const manifestUrl = resolveRemoteUrl(rootUrl, MANIFEST_FILE_NAME)
+  const response = await fetch(manifestUrl, {
+    method: 'GET',
+    cache: 'no-store',
+    headers: {
+      ...buildAuthHeaders(username, password),
+    },
+  })
+
+  if (response.status === 404) return null
+  if (!response.ok) {
+    throw new Error(await readWebDavError(response))
+  }
+
+  const manifestText = await response.text()
+  if (!manifestText.trim()) {
+    return null
+  }
+
+  let manifest: unknown
+  try {
+    manifest = JSON.parse(manifestText)
+  } catch (error) {
+    throw new Error(`远端 manifest.json 不是有效 JSON：${error instanceof Error ? error.message : String(error)}`)
+  }
+
+  return snapshotFromManifest(manifest, async (path) => {
+    const fileResponse = await fetch(resolveRemoteUrl(rootUrl, path), {
+      method: 'GET',
+      cache: 'no-store',
+      headers: {
+        ...buildAuthHeaders(username, password),
+      },
+    })
+
+    if (fileResponse.status === 404) return null
+    if (!fileResponse.ok) {
+      throw new Error(await readWebDavError(fileResponse))
+    }
+
+    return new Uint8Array(await fileResponse.arrayBuffer())
+  })
+}
+
+async function uploadSnapshotDirectory(
+  rootUrl: string,
+  username: string,
+  password: string,
+  manifest: ReturnType<typeof snapshotToDirectoryManifest>,
+  files: ReturnType<typeof snapshotToDirectoryFiles>,
+  previousSnapshot: Awaited<ReturnType<typeof readRemoteSnapshot>>,
+) {
+  for (const file of files) {
+    const fileUrl = resolveRemoteUrl(rootUrl, file.path)
+    const bytes = file.bytes.slice().buffer
+    await putRemoteFile(fileUrl, new Blob([bytes], { type: extToMime(file.ext) }), extToMime(file.ext), username, password)
+  }
+
+  const manifestUrl = resolveRemoteUrl(rootUrl, MANIFEST_FILE_NAME)
+  await putRemoteFile(
+    manifestUrl,
+    new Blob([JSON.stringify(manifest, null, 2)], { type: 'application/json' }),
+    'application/json',
+    username,
+    password,
+  )
+
+  if (previousSnapshot) {
+    const currentPaths = new Set(files.map((file) => file.path))
+    const stalePaths = previousSnapshot.images
+      .map((item) => {
+        const { ext } = dataUrlToBinary(item.dataUrl)
+        return `${item.id}.${ext}`
+      })
+      .filter((path) => !currentPaths.has(path))
+
+    for (const path of stalePaths) {
+      try {
+        await deleteRemoteFile(resolveRemoteUrl(rootUrl, path), username, password)
+      } catch {
+        /* 忽略孤立文件删除失败 */
+      }
+    }
+  }
+}
+
+async function putRemoteFile(url: string, body: Blob, contentType: string, username: string, password: string) {
+  const response = await fetch(url, {
+    method: 'PUT',
+    cache: 'no-store',
+    headers: {
+      'Content-Type': contentType,
+      ...buildAuthHeaders(username, password),
+    },
+    body,
+  })
+
+  if (!response.ok) {
+    throw new Error(await readWebDavError(response))
+  }
+}
+
+async function deleteRemoteFile(url: string, username: string, password: string) {
+  const response = await fetch(url, {
+    method: 'DELETE',
+    cache: 'no-store',
+    headers: {
+      ...buildAuthHeaders(username, password),
+    },
+  })
+
+  if (!response.ok && response.status !== 404) {
+    throw new Error(await readWebDavError(response))
+  }
+}
+
+async function readWebDavError(response: Response) {
+  const statusText = response.statusText ? ` ${response.statusText}` : ''
+  try {
+    const text = await response.text()
+    return text ? `HTTP ${response.status}${statusText}: ${text}` : `HTTP ${response.status}${statusText}`
+  } catch {
+    return `HTTP ${response.status}${statusText}`
+  }
+}
+
+function extToMime(ext: string) {
+  const value = ext.toLowerCase()
+  if (value === 'jpg' || value === 'jpeg') return 'image/jpeg'
+  if (value === 'webp') return 'image/webp'
+  if (value === 'gif') return 'image/gif'
+  if (value === 'bmp') return 'image/bmp'
+  if (value === 'svg') return 'image/svg+xml'
+  return 'image/png'
+}
+
+function formatWebDavError(fallback: string, err: unknown) {
+  return `${fallback}：${err instanceof Error ? err.message : String(err)}`
+}
diff --git a/src/store.ts b/src/store.ts
index 9a7e9425..0012db6e 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -5,7 +5,7 @@ import type {
   TaskParams,
   InputImage,
   TaskRecord,
-  ExportData,
+  WebDavSettings,
 } from './types'
 import { DEFAULT_SETTINGS, DEFAULT_PARAMS } from './types'
 import {
@@ -15,7 +15,6 @@ import {
   clearTasks as dbClearTasks,
   getImage,
   getAllImages,
-  putImage,
   deleteImage,
   clearImages,
   storeImage,
@@ -23,7 +22,17 @@ import {
 } from './lib/db'
 import { callImageApi } from './lib/api'
 import { normalizeImageSize } from './lib/size'
-import { zipSync, unzipSync, strToU8, strFromU8 } from 'fflate'
+import {
+  buildLocalSnapshot,
+  clearSyncTombstones,
+  markImageDeleted,
+  markTaskDeleted,
+  readSnapshotFromBlob,
+  replaceLocalData,
+  replaceSyncTombstones,
+  snapshotToZipBlob,
+  sortTasksForDisplay,
+} from './lib/snapshot'
 
 // ===== Image cache =====
 // 内存缓存，id → dataUrl，避免每次从 IndexedDB 读取
@@ -44,12 +53,18 @@ export async function ensureImageCached(id: string): Promise<string | undefined>
   return undefined
 }
 
+export function primeImageCache(images: Array<{ id: string; dataUrl: string }>) {
+  for (const img of images) {
+    imageCache.set(img.id, img.dataUrl)
+  }
+}
+
 // ===== Store 类型 =====
 
 interface AppState {
   // 设置
   settings: AppSettings
-  setSettings: (s: Partial<AppSettings>) => void
+  setSettings: (s: Partial<AppSettings> & { webdav?: Partial<WebDavSettings> }) => void
 
   // 输入
   prompt: string
@@ -114,10 +129,19 @@ export const useStore = create<AppState>()(
         settings: {
           ...st.settings,
           ...s,
+          webdav: {
+            ...st.settings.webdav,
+            ...s.webdav,
+          },
           apiMode:
             s.apiMode === 'images' || s.apiMode === 'responses'
               ? s.apiMode
               : st.settings.apiMode ?? DEFAULT_SETTINGS.apiMode,
+          storageMode:
+            s.storageMode === 'local' || s.storageMode === 'webdav'
+              ? s.storageMode
+              : st.settings.storageMode ?? DEFAULT_SETTINGS.storageMode,
+          updatedAt: Date.now(),
         },
       })),
 
@@ -217,7 +241,7 @@ function genId(): string {
 /** 初始化：从 IndexedDB 加载任务和图片缓存，清理孤立图片 */
 export async function initStore() {
   const tasks = await getAllTasks()
-  useStore.getState().setTasks(tasks)
+  useStore.getState().setTasks(sortTasksForDisplay(tasks))
 
   // 收集所有任务引用的图片 id
   const referencedIds = new Set<string>()
@@ -271,6 +295,7 @@ export async function submitTask() {
     id: taskId,
     prompt: prompt.trim(),
     params: normalizedParams,
+    updatedAt: Date.now(),
     inputImageIds: inputImages.map((i) => i.id),
     outputImages: [],
     status: 'running',
@@ -357,7 +382,7 @@ async function executeTask(taskId: string) {
 export function updateTaskInStore(taskId: string, patch: Partial<TaskRecord>) {
   const { tasks, setTasks } = useStore.getState()
   const updated = tasks.map((t) =>
-    t.id === taskId ? { ...t, ...patch } : t,
+    t.id === taskId ? { ...t, ...patch, updatedAt: Date.now() } : t,
   )
   setTasks(updated)
   const task = updated.find((t) => t.id === taskId)
@@ -420,6 +445,7 @@ export async function removeMultipleTasks(taskIds: string[]) {
   setTasks(remaining)
   for (const id of taskIds) {
     await dbDeleteTask(id)
+    markTaskDeleted(id)
   }
 
   // 找出其他任务仍引用的图片
@@ -435,6 +461,7 @@ export async function removeMultipleTasks(taskIds: string[]) {
     if (!stillUsed.has(imgId)) {
       await deleteImage(imgId)
       imageCache.delete(imgId)
+      markImageDeleted(imgId)
     }
   }
 
@@ -461,6 +488,7 @@ export async function removeTask(task: TaskRecord) {
   const remaining = tasks.filter((t) => t.id !== task.id)
   setTasks(remaining)
   await dbDeleteTask(task.id)
+  markTaskDeleted(task.id)
 
   // 找出其他任务仍引用的图片
   const stillUsed = new Set<string>()
@@ -475,6 +503,7 @@ export async function removeTask(task: TaskRecord) {
     if (!stillUsed.has(imgId)) {
       await deleteImage(imgId)
       imageCache.delete(imgId)
+      markImageDeleted(imgId)
     }
   }
 
@@ -485,6 +514,7 @@ export async function removeTask(task: TaskRecord) {
 export async function clearAllData() {
   await dbClearTasks()
   await clearImages()
+  clearSyncTombstones()
   imageCache.clear()
   const { setTasks, clearInputImages, setSettings, setParams, showToast } = useStore.getState()
   setTasks([])
@@ -495,67 +525,11 @@ export async function clearAllData() {
 }
 
 /** 从 dataUrl 解析出 MIME 扩展名和二进制数据 */
-function dataUrlToBytes(dataUrl: string): { ext: string; bytes: Uint8Array } {
-  const match = dataUrl.match(/^data:image\/(\w+);base64,/)
-  const ext = match?.[1] ?? 'png'
-  const b64 = dataUrl.replace(/^data:[^;]+;base64,/, '')
-  const binary = atob(b64)
-  const bytes = new Uint8Array(binary.length)
-  for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i)
-  return { ext, bytes }
-}
-
-/** 将二进制数据还原为 dataUrl */
-function bytesToDataUrl(bytes: Uint8Array, filePath: string): string {
-  const ext = filePath.split('.').pop()?.toLowerCase() ?? 'png'
-  const mimeMap: Record<string, string> = { png: 'image/png', jpg: 'image/jpeg', jpeg: 'image/jpeg', webp: 'image/webp' }
-  const mime = mimeMap[ext] ?? 'image/png'
-  let binary = ''
-  for (let i = 0; i < bytes.length; i++) binary += String.fromCharCode(bytes[i])
-  return `data:${mime};base64,${btoa(binary)}`
-}
-
 /** 导出数据为 ZIP */
 export async function exportData() {
   try {
-    const tasks = await getAllTasks()
-    const images = await getAllImages()
-    const { settings } = useStore.getState()
-    const exportedAt = Date.now()
-    const imageCreatedAtFallback = new Map<string, number>()
-
-    for (const task of tasks) {
-      for (const id of [...(task.inputImageIds || []), ...(task.outputImages || [])]) {
-        const prev = imageCreatedAtFallback.get(id)
-        if (prev == null || task.createdAt < prev) {
-          imageCreatedAtFallback.set(id, task.createdAt)
-        }
-      }
-    }
-
-    const imageFiles: ExportData['imageFiles'] = {}
-    const zipFiles: Record<string, Uint8Array | [Uint8Array, { mtime: Date }]> = {}
-
-    for (const img of images) {
-      const { ext, bytes } = dataUrlToBytes(img.dataUrl)
-      const path = `images/${img.id}.${ext}`
-      const createdAt = img.createdAt ?? imageCreatedAtFallback.get(img.id) ?? exportedAt
-      imageFiles[img.id] = { path, createdAt, source: img.source }
-      zipFiles[path] = [bytes, { mtime: new Date(createdAt) }]
-    }
-
-    const manifest: ExportData = {
-      version: 2,
-      exportedAt: new Date(exportedAt).toISOString(),
-      settings,
-      tasks,
-      imageFiles,
-    }
-
-    zipFiles['manifest.json'] = [strToU8(JSON.stringify(manifest, null, 2)), { mtime: new Date(exportedAt) }]
-
-    const zipped = zipSync(zipFiles, { level: 6 })
-    const blob = new Blob([zipped.buffer as ArrayBuffer], { type: 'application/zip' })
+    const snapshot = await buildLocalSnapshot(useStore.getState().settings)
+    const blob = snapshotToZipBlob(snapshot)
     const url = URL.createObjectURL(blob)
     const a = document.createElement('a')
     a.href = url
@@ -576,37 +550,19 @@ export async function exportData() {
 /** 导入 ZIP 数据 */
 export async function importData(file: File) {
   try {
-    const buffer = await file.arrayBuffer()
-    const unzipped = unzipSync(new Uint8Array(buffer))
-
-    const manifestBytes = unzipped['manifest.json']
-    if (!manifestBytes) throw new Error('ZIP 中缺少 manifest.json')
-
-    const data: ExportData = JSON.parse(strFromU8(manifestBytes))
-    if (!data.tasks || !data.imageFiles) throw new Error('无效的数据格式')
-
-    // 还原图片
-    for (const [id, info] of Object.entries(data.imageFiles)) {
-      const bytes = unzipped[info.path]
-      if (!bytes) continue
-      const dataUrl = bytesToDataUrl(bytes, info.path)
-      await putImage({ id, dataUrl, createdAt: info.createdAt, source: info.source })
-      imageCache.set(id, dataUrl)
-    }
-
-    for (const task of data.tasks) {
-      await putTask(task)
-    }
-
-    if (data.settings) {
-      useStore.getState().setSettings(data.settings)
-    }
+    const snapshot = await readSnapshotFromBlob(file)
+    await replaceLocalData(snapshot)
+    replaceSyncTombstones({
+      deletedTaskIds: snapshot.deletedTaskIds,
+      deletedImageIds: snapshot.deletedImageIds,
+    })
 
-    const tasks = await getAllTasks()
-    useStore.getState().setTasks(tasks)
+    useStore.getState().setSettings(snapshot.settings)
+    primeImageCache(snapshot.images)
+    useStore.getState().setTasks(sortTasksForDisplay(snapshot.tasks))
     useStore
       .getState()
-      .showToast(`已导入 ${data.tasks.length} 条记录`, 'success')
+      .showToast(`已导入 ${snapshot.tasks.length} 条记录`, 'success')
   } catch (e) {
     useStore
       .getState()
diff --git a/src/types.ts b/src/types.ts
index c6bd47ef..9d205477 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,6 +1,14 @@
 // ===== 设置 =====
 
 export type ApiMode = 'images' | 'responses'
+export type StorageMode = 'local' | 'webdav'
+
+export interface WebDavSettings {
+  url: string
+  username: string
+  password: string
+  syncOnStartup: boolean
+}
 
 export interface AppSettings {
   baseUrl: string
@@ -8,6 +16,9 @@ export interface AppSettings {
   model: string
   timeout: number
   apiMode: ApiMode
+  storageMode: StorageMode
+  webdav: WebDavSettings
+  updatedAt?: number
 }
 
 const DEFAULT_BASE_URL = import.meta.env.VITE_DEFAULT_API_URL?.trim() || 'https://api.openai.com/v1'
@@ -20,6 +31,13 @@ export const DEFAULT_SETTINGS: AppSettings = {
   model: DEFAULT_IMAGES_MODEL,
   timeout: 300,
   apiMode: 'images',
+  storageMode: 'local',
+  webdav: {
+    url: '',
+    username: '',
+    password: '',
+    syncOnStartup: true,
+  },
 }
 
 // ===== 任务参数 =====
@@ -59,6 +77,8 @@ export interface TaskRecord {
   id: string
   prompt: string
   params: TaskParams
+  /** 最近一次写入时间（ms） */
+  updatedAt?: number
   /** API 返回的实际生效参数，用于标记与请求值不一致的情况 */
   actualParams?: Partial<TaskParams>
   /** 输出图片对应的实际生效参数，key 为 outputImages 中的图片 id */
@@ -86,6 +106,8 @@ export interface StoredImage {
   dataUrl: string
   /** 图片首次存储时间（ms） */
   createdAt?: number
+  /** 图片最近一次写入时间（ms） */
+  updatedAt?: number
   /** 图片来源：用户上传 / API 生成 */
   source?: 'upload' | 'generated'
 }
@@ -162,10 +184,13 @@ export interface ExportData {
   exportedAt: string
   settings: AppSettings
   tasks: TaskRecord[]
+  deletedTaskIds?: Record<string, number>
+  deletedImageIds?: Record<string, number>
   /** imageId → 图片信息 */
   imageFiles: Record<string, {
     path: string
     createdAt?: number
+    updatedAt?: number
     source?: 'upload' | 'generated'
   }>
 }
diff --git a/vite.config.ts b/vite.config.ts
index b03396aa..6a06ff0f 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -29,6 +29,7 @@ export default defineConfig(({ command }) => {
     },
     server: {
       host: true,
+      allowedHosts: ['xian-yu.top', '.xian-yu.top'],
       proxy:
         devProxyConfig?.enabled
           ? {
@@ -45,5 +46,8 @@ export default defineConfig(({ command }) => {
             }
           : undefined,
     },
+    preview: {
+      allowedHosts: ['xian-yu.top', '.xian-yu.top'],
+    },
   }
 })

From 7aeb4ac40fb85dcc25515ad4c36d79152fc129e2 Mon Sep 17 00:00:00 2001
From: XianYuDaXian <xian_yu@live.com>
Date: Mon, 27 Apr 2026 14:49:36 +0800
Subject: [PATCH 02/16] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=89=8B?=
 =?UTF-8?q?=E5=8A=A8=E8=A7=A6=E5=8F=91=20Docker=20=E6=9E=84=E5=BB=BA?=
 =?UTF-8?q?=E6=97=A0=E6=A0=87=E7=AD=BE=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/docker.yml | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/docker.yml b/.github/workflows/docker.yml
index f4e95777..b32791ca 100644
--- a/.github/workflows/docker.yml
+++ b/.github/workflows/docker.yml
@@ -28,10 +28,11 @@ jobs:
       - id: meta
         uses: docker/metadata-action@v5
         with:
-          images: ghcr.io/cooksleep/gpt_image_playground
+          images: ghcr.io/${{ github.repository }}
           tags: |
             type=semver,pattern={{version}}
             type=semver,pattern={{major}}.{{minor}}
+            type=sha,format=short
             type=raw,value=latest,enable=${{ startsWith(github.ref, 'refs/tags/v') }}
 
       - uses: docker/build-push-action@v6

From a8931e1b299854d6acb777a2584799abfde604a1 Mon Sep 17 00:00:00 2001
From: XianYuDaXian <xian_yu@live.com>
Date: Mon, 27 Apr 2026 16:56:46 +0800
Subject: [PATCH 03/16] =?UTF-8?q?feat:=20=E5=A2=9E=E5=BC=BA=E5=8F=82?=
 =?UTF-8?q?=E8=80=83=E5=9B=BE=E7=BC=96=E8=BE=91=E5=99=A8=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                            | 1066 +++++++++++++++++-
 package.json                                 |    1 +
 src/components/DetailModal.tsx               |   17 +
 src/components/InputBar.tsx                  |    1 +
 src/components/Lightbox.tsx                  |   71 +-
 src/components/ReferenceImageEditorModal.tsx |  946 ++++++++++++++++
 src/store.ts                                 |   26 +
 7 files changed, 2079 insertions(+), 49 deletions(-)
 create mode 100644 src/components/ReferenceImageEditorModal.tsx

diff --git a/package-lock.json b/package-lock.json
index 3fa450a8..97dc5cac 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "gpt-image-playground",
       "version": "0.2.13",
       "dependencies": {
+        "fabric": "^7.3.1",
         "fflate": "^0.8.2",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
@@ -37,6 +38,27 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@asamuzakjp/css-color": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-3.2.0.tgz",
+      "integrity": "sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@csstools/css-calc": "^2.1.3",
+        "@csstools/css-color-parser": "^3.0.9",
+        "@csstools/css-parser-algorithms": "^3.0.4",
+        "@csstools/css-tokenizer": "^3.0.3",
+        "lru-cache": "^10.4.3"
+      }
+    },
+    "node_modules/@asamuzakjp/css-color/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "license": "ISC",
+      "optional": true
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.29.0",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
@@ -319,6 +341,121 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@csstools/color-helpers": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-5.1.0.tgz",
+      "integrity": "sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "optional": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@csstools/css-calc": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-2.1.4.tgz",
+      "integrity": "sha512-3N8oaj+0juUw/1H3YwmDDJXCgTB1gKU6Hc/bB502u9zR0q2vd786XJH9QfrKIEgFlZmhZiq6epXl4rHqhzsIgQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^3.0.5",
+        "@csstools/css-tokenizer": "^3.0.4"
+      }
+    },
+    "node_modules/@csstools/css-color-parser": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-3.1.0.tgz",
+      "integrity": "sha512-nbtKwh3a6xNVIp/VRuXV64yTKnb1IjTAEEh3irzS+HkKjAOYLTGNb9pmVNntZ8iVBHcWDA2Dof0QtPgFI1BaTA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@csstools/color-helpers": "^5.1.0",
+        "@csstools/css-calc": "^2.1.4"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^3.0.5",
+        "@csstools/css-tokenizer": "^3.0.4"
+      }
+    },
+    "node_modules/@csstools/css-parser-algorithms": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-3.0.5.tgz",
+      "integrity": "sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-tokenizer": "^3.0.4"
+      }
+    },
+    "node_modules/@csstools/css-tokenizer": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-3.0.4.tgz",
+      "integrity": "sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.25.12",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
@@ -1299,6 +1436,16 @@
         "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
       }
     },
+    "node_modules/agent-base": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
+      "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/any-promise": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
@@ -1364,6 +1511,27 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/baseline-browser-mapping": {
       "version": "2.10.21",
       "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.21.tgz",
@@ -1390,6 +1558,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/bl": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
+      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
+      }
+    },
     "node_modules/braces": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
@@ -1437,6 +1617,31 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
     "node_modules/camelcase-css": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
@@ -1468,6 +1673,21 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/canvas": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/canvas/-/canvas-3.2.3.tgz",
+      "integrity": "sha512-PzE5nJZPz72YUAfo8oTp0u3fqqY7IzlTubneAihqDYAUcBk7ryeCmBbdJBEdaH0bptSOe2VT2Zwcb3UaFyaSWw==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "node-addon-api": "^7.0.0",
+        "prebuild-install": "^7.1.3"
+      },
+      "engines": {
+        "node": "^18.12.0 || >= 20.9.0"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -1506,6 +1726,13 @@
         "node": ">= 6"
       }
     },
+    "node_modules/chownr": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
+      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
+      "license": "ISC",
+      "optional": true
+    },
     "node_modules/commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -1536,6 +1763,20 @@
         "node": ">=4"
       }
     },
+    "node_modules/cssstyle": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.6.0.tgz",
+      "integrity": "sha512-2z+rWdzbbSZv6/rhtvzvqeZQHrBaqgogqt85sqFNbabZOuFbCVFb8kPeEtZjiKkbrm395irpNKiYeFeLiQnFPg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@asamuzakjp/css-color": "^3.2.0",
+        "rrweb-cssom": "^0.8.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
@@ -1543,11 +1784,25 @@
       "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/data-urls": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz",
+      "integrity": "sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "whatwg-mimetype": "^4.0.0",
+        "whatwg-url": "^14.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
       "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -1561,6 +1816,49 @@
         }
       }
     },
+    "node_modules/decimal.js": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
+      "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/decompress-response": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
+      "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "mimic-response": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/deep-extend": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -1582,6 +1880,29 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/end-of-stream": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.5.tgz",
+      "integrity": "sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "once": "^1.4.0"
+      }
+    },
+    "node_modules/entities": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
+      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
+      "license": "BSD-2-Clause",
+      "optional": true,
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/es-errors": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
@@ -1644,6 +1965,29 @@
         "node": ">=6"
       }
     },
+    "node_modules/expand-template": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz",
+      "integrity": "sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==",
+      "license": "(MIT OR WTFPL)",
+      "optional": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/fabric": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/fabric/-/fabric-7.3.1.tgz",
+      "integrity": "sha512-RoLAQzUX+/3RNMYKliuN0P2HXdSDEGzyjS7FnmEbo3nhb8LFh59T+l3f6ApIu5LT4YB49YfMNrEajeIbutmD7Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "optionalDependencies": {
+        "canvas": "^3.2.0",
+        "jsdom": "^26.1.0"
+      }
+    },
     "node_modules/fast-glob": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
@@ -1717,6 +2061,13 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/fs-constants": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
+      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -1752,6 +2103,13 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/github-from-package": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
+      "integrity": "sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/glob-parent": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -1778,68 +2136,164 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/is-binary-path": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
+    "node_modules/html-encoding-sniffer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
+      "integrity": "sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==",
       "license": "MIT",
+      "optional": true,
       "dependencies": {
-        "binary-extensions": "^2.0.0"
+        "whatwg-encoding": "^3.1.1"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=18"
       }
     },
-    "node_modules/is-core-module": {
-      "version": "2.16.1",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
-      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
-      "dev": true,
+    "node_modules/http-proxy-agent": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
+      "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
       "license": "MIT",
+      "optional": true,
       "dependencies": {
-        "hasown": "^2.0.2"
+        "agent-base": "^7.1.0",
+        "debug": "^4.3.4"
       },
       "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "node": ">= 14"
       }
     },
-    "node_modules/is-extglob": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
+    "node_modules/https-proxy-agent": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
+      "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
       "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "4"
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">= 14"
       }
     },
-    "node_modules/is-glob": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
-      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
       "license": "MIT",
+      "optional": true,
       "dependencies": {
-        "is-extglob": "^2.1.1"
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
       },
       "engines": {
         "node": ">=0.10.0"
       }
     },
-    "node_modules/is-number": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "BSD-3-Clause",
+      "optional": true
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC",
+      "optional": true
+    },
+    "node_modules/ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "license": "ISC",
+      "optional": true
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.12.0"
       }
     },
+    "node_modules/is-potential-custom-element-name": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/jiti": {
       "version": "1.21.7",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
@@ -1857,6 +2311,46 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/jsdom": {
+      "version": "26.1.0",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-26.1.0.tgz",
+      "integrity": "sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "cssstyle": "^4.2.1",
+        "data-urls": "^5.0.0",
+        "decimal.js": "^10.5.0",
+        "html-encoding-sniffer": "^4.0.0",
+        "http-proxy-agent": "^7.0.2",
+        "https-proxy-agent": "^7.0.6",
+        "is-potential-custom-element-name": "^1.0.1",
+        "nwsapi": "^2.2.16",
+        "parse5": "^7.2.1",
+        "rrweb-cssom": "^0.8.0",
+        "saxes": "^6.0.0",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^5.1.1",
+        "w3c-xmlserializer": "^5.0.0",
+        "webidl-conversions": "^7.0.0",
+        "whatwg-encoding": "^3.1.1",
+        "whatwg-mimetype": "^4.0.0",
+        "whatwg-url": "^14.1.1",
+        "ws": "^8.18.0",
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "canvas": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/jsesc": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
@@ -1937,11 +2431,41 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mimic-response": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
+      "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "license": "MIT",
+      "optional": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/mkdirp-classic": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
+      "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/mz": {
@@ -1975,6 +2499,46 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/napi-build-utils": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-2.0.0.tgz",
+      "integrity": "sha512-GEbrYkbfF7MoNaoh2iGG84Mnf/WZfB0GdGEsM8wz7Expx/LlWf5U8t9nvJKXSp3qr5IsEbK04cBGhol/KwOsWA==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/node-abi": {
+      "version": "3.89.0",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.89.0.tgz",
+      "integrity": "sha512-6u9UwL0HlAl21+agMN3YAMXcKByMqwGx+pq+P76vii5f7hTPtKDp08/H9py6DY+cfDw7kQNTGEj/rly3IgbNQA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/node-abi/node_modules/semver": {
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "license": "ISC",
+      "optional": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/node-releases": {
       "version": "2.0.38",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.38.tgz",
@@ -1992,6 +2556,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/nwsapi": {
+      "version": "2.2.23",
+      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.23.tgz",
+      "integrity": "sha512-7wfH4sLbt4M0gCDzGE6vzQBo0bfTKjU7Sfpqy/7gs1qBfYz2vEJH6vXcBKpO3+6Yu1telwd0t9HpyOoLEQQbIQ==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -2012,6 +2583,29 @@
         "node": ">= 6"
       }
     },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/parse5": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
+      "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "entities": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
@@ -2222,6 +2816,55 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/prebuild-install": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.3.tgz",
+      "integrity": "sha512-8Mf2cbV7x1cXPUILADGI3wuhfqWvtiLA1iclTDbFRZkgRQS0NqsPZphna9V+HyTEadheuPmjaJMsbzKQFOzLug==",
+      "deprecated": "No longer maintained. Please contact the author of the relevant native addon; alternatives are available.",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^2.0.0",
+        "expand-template": "^2.0.3",
+        "github-from-package": "0.0.0",
+        "minimist": "^1.2.3",
+        "mkdirp-classic": "^0.5.3",
+        "napi-build-utils": "^2.0.0",
+        "node-abi": "^3.3.0",
+        "pump": "^3.0.0",
+        "rc": "^1.2.7",
+        "simple-get": "^4.0.0",
+        "tar-fs": "^2.0.0",
+        "tunnel-agent": "^0.6.0"
+      },
+      "bin": {
+        "prebuild-install": "bin.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/pump": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.4.tgz",
+      "integrity": "sha512-VS7sjc6KR7e1ukRFhQSY5LM2uBWAUPiOPa/A3mkKmiMwSmRFUITt0xuj+/lesgnCv+dPIEYlkzrcyXgquIHMcA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -2243,6 +2886,22 @@
       ],
       "license": "MIT"
     },
+    "node_modules/rc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+      "license": "(BSD-2-Clause OR MIT OR Apache-2.0)",
+      "optional": true,
+      "dependencies": {
+        "deep-extend": "^0.6.0",
+        "ini": "~1.3.0",
+        "minimist": "^1.2.0",
+        "strip-json-comments": "~2.0.1"
+      },
+      "bin": {
+        "rc": "cli.js"
+      }
+    },
     "node_modules/react": {
       "version": "19.2.5",
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.5.tgz",
@@ -2284,6 +2943,21 @@
         "pify": "^2.3.0"
       }
     },
+    "node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -2375,6 +3049,13 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/rrweb-cssom": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.8.0.tgz",
+      "integrity": "sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -2399,6 +3080,47 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/saxes": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
+      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=v12.22.7"
+      }
+    },
     "node_modules/scheduler": {
       "version": "0.27.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
@@ -2415,6 +3137,53 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/simple-concat": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
+      "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/simple-get": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-4.0.1.tgz",
+      "integrity": "sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "decompress-response": "^6.0.0",
+        "once": "^1.3.1",
+        "simple-concat": "^1.0.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -2425,6 +3194,26 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
+    "node_modules/strip-json-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+      "integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/sucrase": {
       "version": "3.35.1",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
@@ -2461,6 +3250,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.19",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
@@ -2499,6 +3295,36 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/tar-fs": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.4.tgz",
+      "integrity": "sha512-mDAjwmZdh7LTT6pNleZ05Yt65HC3E+NiQzl672vQG38jIrehtJk/J3mNwIg+vShQPcLF/LV7CMnDW6vjj6sfYQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "chownr": "^1.1.1",
+        "mkdirp-classic": "^0.5.2",
+        "pump": "^3.0.0",
+        "tar-stream": "^2.1.4"
+      }
+    },
+    "node_modules/tar-stream": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
+      "integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "bl": "^4.0.3",
+        "end-of-stream": "^1.4.1",
+        "fs-constants": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/thenify": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
@@ -2570,6 +3396,26 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/tldts": {
+      "version": "6.1.86",
+      "resolved": "https://registry.npmjs.org/tldts/-/tldts-6.1.86.tgz",
+      "integrity": "sha512-WMi/OQ2axVTf/ykqCQgXiIct+mSQDFdH2fkwhPwgEwvJ1kSzZRiinb0zF2Xb8u4+OqPChmyI6MEu4EezNJz+FQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tldts-core": "^6.1.86"
+      },
+      "bin": {
+        "tldts": "bin/cli.js"
+      }
+    },
+    "node_modules/tldts-core": {
+      "version": "6.1.86",
+      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-6.1.86.tgz",
+      "integrity": "sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -2583,6 +3429,32 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/tough-cookie": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-5.1.2.tgz",
+      "integrity": "sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==",
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "dependencies": {
+        "tldts": "^6.1.32"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/tr46": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-5.1.1.tgz",
+      "integrity": "sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
@@ -2590,6 +3462,19 @@
       "dev": true,
       "license": "Apache-2.0"
     },
+    "node_modules/tunnel-agent": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+      "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/typescript": {
       "version": "5.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
@@ -2639,7 +3524,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/vite": {
@@ -2748,6 +3633,113 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/w3c-xmlserializer": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
+      "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/webidl-conversions": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
+      "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+      "license": "BSD-2-Clause",
+      "optional": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/whatwg-encoding": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
+      "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
+      "deprecated": "Use @exodus/bytes instead for a more spec-conformant and faster implementation",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "iconv-lite": "0.6.3"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
+      "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-url": {
+      "version": "14.2.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-14.2.0.tgz",
+      "integrity": "sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tr46": "^5.1.0",
+        "webidl-conversions": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "license": "ISC",
+      "optional": true
+    },
+    "node_modules/ws": {
+      "version": "8.20.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.20.0.tgz",
+      "integrity": "sha512-sAt8BhgNbzCtgGbt2OxmpuryO63ZoDk/sqaB/znQm94T4fCEsy/yV+7CdC1kJhOU9lboAEU7R3kquuycDoibVA==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/xml-name-validator": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
+      "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/xmlchars": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
diff --git a/package.json b/package.json
index 34c96dcf..f19228b3 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "fabric": "^7.3.1",
     "fflate": "^0.8.2",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
diff --git a/src/components/DetailModal.tsx b/src/components/DetailModal.tsx
index 18c213a0..48459aec 100644
--- a/src/components/DetailModal.tsx
+++ b/src/components/DetailModal.tsx
@@ -10,6 +10,7 @@ export default function DetailModal() {
   const detailTaskId = useStore((s) => s.detailTaskId)
   const setDetailTaskId = useStore((s) => s.setDetailTaskId)
   const setLightboxImageId = useStore((s) => s.setLightboxImageId)
+  const setLightboxStartEditor = useStore((s) => s.setLightboxStartEditor)
   const setConfirmDialog = useStore((s) => s.setConfirmDialog)
   const showToast = useStore((s) => s.showToast)
 
@@ -136,6 +137,13 @@ export default function DetailModal() {
     setDetailTaskId(null)
   }
 
+  const handleQuickEditOutput = () => {
+    if (!currentOutputImageId) return
+    setDetailTaskId(null)
+    setLightboxStartEditor(true)
+    setLightboxImageId(currentOutputImageId, task.outputImages)
+  }
+
   const handleDelete = () => {
     setDetailTaskId(null)
     setConfirmDialog({
@@ -286,6 +294,15 @@ export default function DetailModal() {
                   </span>
                 </>
               )}
+              <button
+                onClick={(e) => {
+                  e.stopPropagation()
+                  handleQuickEditOutput()
+                }}
+                className="absolute bottom-3 right-3 rounded-full bg-black/55 px-3 py-1.5 text-xs font-medium text-white backdrop-blur-sm transition hover:bg-black/70"
+              >
+                快速编辑
+              </button>
             </>
           )}
           {task.status === 'running' && (
diff --git a/src/components/InputBar.tsx b/src/components/InputBar.tsx
index 68fe5ea9..78723522 100644
--- a/src/components/InputBar.tsx
+++ b/src/components/InputBar.tsx
@@ -301,6 +301,7 @@ export default function InputBar() {
   // 粘贴图片
   useEffect(() => {
     const handlePaste = (e: ClipboardEvent) => {
+      if (document.body.dataset.referenceEditorActive === '1') return
       const items = e.clipboardData?.items
       if (!items) return
       const imageFiles: File[] = []
diff --git a/src/components/Lightbox.tsx b/src/components/Lightbox.tsx
index 10395bbc..09065ee9 100644
--- a/src/components/Lightbox.tsx
+++ b/src/components/Lightbox.tsx
@@ -1,7 +1,9 @@
-import { useEffect, useState, useRef, useCallback } from 'react'
+import { Suspense, lazy, useEffect, useState, useRef, useCallback } from 'react'
 import { useStore, getCachedImage, ensureImageCached } from '../store'
 import { useCloseOnEscape } from '../hooks/useCloseOnEscape'
 
+const ReferenceImageEditorModal = lazy(() => import('./ReferenceImageEditorModal'))
+
 const MIN_SCALE = 1
 const MAX_SCALE = 10
 
@@ -12,8 +14,12 @@ function clamp(v: number, min: number, max: number) {
 export default function Lightbox() {
   const lightboxImageId = useStore((s) => s.lightboxImageId)
   const lightboxImageList = useStore((s) => s.lightboxImageList)
+  const lightboxStartEditor = useStore((s) => s.lightboxStartEditor)
   const setLightboxImageId = useStore((s) => s.setLightboxImageId)
+  const setLightboxStartEditor = useStore((s) => s.setLightboxStartEditor)
+  const inputImages = useStore((s) => s.inputImages)
   const [src, setSrc] = useState('')
+  const [showEditor, setShowEditor] = useState(false)
 
   const close = useCallback(() => setLightboxImageId(null), [setLightboxImageId])
   useCloseOnEscape(Boolean(lightboxImageId), close)
@@ -22,6 +28,8 @@ export default function Lightbox() {
   useEffect(() => {
     if (!lightboxImageId) {
       setSrc('')
+      setShowEditor(false)
+      setLightboxStartEditor(false)
       return
     }
     const cached = getCachedImage(lightboxImageId)
@@ -32,7 +40,15 @@ export default function Lightbox() {
         if (url) setSrc(url)
       })
     }
-  }, [lightboxImageId])
+  }, [lightboxImageId, setLightboxStartEditor])
+
+  const isReferenceImage = Boolean(lightboxImageId && inputImages.some((image) => image.id === lightboxImageId))
+
+  useEffect(() => {
+    if (!lightboxImageId || !src || !lightboxStartEditor) return
+    setShowEditor(true)
+    setLightboxStartEditor(false)
+  }, [lightboxImageId, lightboxStartEditor, setLightboxStartEditor, src])
 
   // 导航
   const currentIndex = lightboxImageId ? lightboxImageList.indexOf(lightboxImageId) : -1
@@ -62,15 +78,35 @@ export default function Lightbox() {
   if (!lightboxImageId || !src) return null
 
   return (
-    <LightboxInner
-      src={src}
-      onClose={close}
-      showNav={showNav}
-      currentIndex={currentIndex}
-      total={total}
-      onPrev={goPrev}
-      onNext={goNext}
-    />
+    <>
+      <LightboxInner
+        src={src}
+        onClose={close}
+        showNav={showNav}
+        currentIndex={currentIndex}
+        total={total}
+        onPrev={goPrev}
+        onNext={goNext}
+        isReferenceImage={isReferenceImage}
+        onEdit={() => setShowEditor(true)}
+      />
+      {showEditor && lightboxImageId && src ? (
+        <Suspense
+          fallback={
+            <div className="fixed inset-0 z-[75] flex items-center justify-center bg-black/55 backdrop-blur-md text-sm text-white/70">
+              正在加载编辑器...
+            </div>
+          }
+        >
+          <ReferenceImageEditorModal
+            imageId={lightboxImageId}
+            src={src}
+            saveMode={isReferenceImage ? 'replace-input' : 'append-input'}
+            onClose={() => setShowEditor(false)}
+          />
+        </Suspense>
+      ) : null}
+    </>
   )
 }
 
@@ -82,10 +118,12 @@ interface LightboxInnerProps {
   total: number
   onPrev: () => void
   onNext: () => void
+  isReferenceImage: boolean
+  onEdit: () => void
 }
 
 /** 内部组件：保证挂载时 DOM 已经存在，所有 ref / effect 都可靠 */
-function LightboxInner({ src, onClose, showNav, currentIndex, total, onPrev, onNext }: LightboxInnerProps) {
+function LightboxInner({ src, onClose, showNav, currentIndex, total, onPrev, onNext, isReferenceImage, onEdit }: LightboxInnerProps) {
   const containerRef = useRef<HTMLDivElement>(null)
 
   // 用 ref 追踪最新变换，避免闭包过期
@@ -394,6 +432,15 @@ function LightboxInner({ src, onClose, showNav, currentIndex, total, onPrev, onN
       onDoubleClick={onDoubleClick}
     >
       <div className="absolute inset-0 bg-black/70 backdrop-blur-md animate-fade-in" />
+      <button
+        className="absolute right-5 top-5 z-20 rounded-full bg-black/45 px-4 py-2 text-sm text-white backdrop-blur-sm transition hover:bg-black/65"
+        onClick={(e) => {
+          e.stopPropagation()
+          onEdit()
+        }}
+      >
+        {isReferenceImage ? '编辑参考图' : '编辑并加入参考图'}
+      </button>
       <div className="relative animate-zoom-in">
         <img
           src={src}
diff --git a/src/components/ReferenceImageEditorModal.tsx b/src/components/ReferenceImageEditorModal.tsx
new file mode 100644
index 00000000..33c1df6d
--- /dev/null
+++ b/src/components/ReferenceImageEditorModal.tsx
@@ -0,0 +1,946 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { Canvas, Ellipse, FabricImage, IText, PencilBrush, Rect, Triangle, type FabricObject } from 'fabric'
+import { addInputImageWithDataUrl, replaceInputImageWithDataUrl, useStore } from '../store'
+import { useCloseOnEscape } from '../hooks/useCloseOnEscape'
+
+interface ReferenceImageEditorModalProps {
+  imageId: string
+  src: string
+  saveMode: 'replace-input' | 'append-input'
+  onClose: () => void
+}
+
+type ToolMode = 'select' | 'mask'
+type MaskShapeType = 'rect' | 'ellipse' | 'triangle'
+
+interface TextStyleState {
+  text: string
+  fill: string
+  fontSize: number
+  fontWeight: 'normal' | 'bold'
+  fontStyle: 'normal' | 'italic'
+}
+
+const DEFAULT_TEXT_STYLE: TextStyleState = {
+  text: '输入文字',
+  fill: '#ffffff',
+  fontSize: 48,
+  fontWeight: 'bold',
+  fontStyle: 'normal',
+}
+
+function clamp(value: number, min: number, max: number) {
+  return Math.max(min, Math.min(max, value))
+}
+
+function getEditorKind(object: FabricObject | null): string | undefined {
+  if (!object || typeof object !== 'object') return undefined
+  return (object as FabricObject & { data?: { editorKind?: string } }).data?.editorKind
+}
+
+function getMaskShapeTypeFromObject(object: FabricObject | null): MaskShapeType | undefined {
+  if (!object || typeof object !== 'object') return undefined
+  return (object as FabricObject & { data?: { shapeType?: MaskShapeType } }).data?.shapeType
+}
+
+export default function ReferenceImageEditorModal({ imageId, src, saveMode, onClose }: ReferenceImageEditorModalProps) {
+  const setLightboxImageId = useStore((s) => s.setLightboxImageId)
+  const inputImages = useStore((s) => s.inputImages)
+  const lightboxImageList = useStore((s) => s.lightboxImageList)
+  const showToast = useStore((s) => s.showToast)
+  const backgroundCanvasRef = useRef<HTMLCanvasElement>(null)
+  const canvasElementRef = useRef<HTMLCanvasElement>(null)
+  const canvasViewportRef = useRef<HTMLDivElement>(null)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const canvasRef = useRef<Canvas | null>(null)
+  const sourceImageRef = useRef<HTMLImageElement | null>(null)
+  const historyRef = useRef<string[]>([])
+  const historyIndexRef = useRef(-1)
+  const suppressHistoryRef = useRef(false)
+  const displaySizeRef = useRef({ width: 0, height: 0 })
+  const sourceSizeRef = useRef({ width: 0, height: 0 })
+  const imageBoundsRef = useRef({ left: 0, top: 0, width: 0, height: 0 })
+  const exportMultiplierRef = useRef(1)
+  const zoomRef = useRef(1)
+  const panRef = useRef({ x: 0, y: 0 })
+  const panningRef = useRef(false)
+  const lastPointerRef = useRef({ x: 0, y: 0 })
+  const spacePressedRef = useRef(false)
+  const toolModeRef = useRef<ToolMode>('select')
+  const [ready, setReady] = useState(false)
+  const [toolMode, setToolMode] = useState<ToolMode>('select')
+  const [maskOpacity, setMaskOpacity] = useState(0.55)
+  const [maskWidth, setMaskWidth] = useState(34)
+  const [maskShapeType, setMaskShapeType] = useState<MaskShapeType>('rect')
+  const [activeObject, setActiveObject] = useState<FabricObject | null>(null)
+  const [textStyle, setTextStyle] = useState<TextStyleState>(DEFAULT_TEXT_STYLE)
+  const [historyState, setHistoryState] = useState({ canUndo: false, canRedo: false })
+  const currentImageList = useMemo(() => lightboxImageList.length ? lightboxImageList : inputImages.map((item) => item.id), [inputImages, lightboxImageList])
+  const isOpen = true
+
+  useCloseOnEscape(isOpen, onClose)
+
+  useEffect(() => {
+    toolModeRef.current = toolMode
+  }, [toolMode])
+
+  useEffect(() => {
+    document.body.dataset.referenceEditorActive = '1'
+    return () => {
+      delete document.body.dataset.referenceEditorActive
+    }
+  }, [])
+
+  const updateHistoryFlags = useCallback(() => {
+    setHistoryState({
+      canUndo: historyIndexRef.current > 0,
+      canRedo: historyIndexRef.current < historyRef.current.length - 1,
+    })
+  }, [])
+
+  const syncTextStyleFromObject = useCallback((object: FabricObject | null) => {
+    if (!(object instanceof IText)) {
+      setTextStyle((prev) => ({ ...prev }))
+      return
+    }
+
+    setTextStyle({
+      text: object.text ?? DEFAULT_TEXT_STYLE.text,
+      fill: typeof object.fill === 'string' ? object.fill : DEFAULT_TEXT_STYLE.fill,
+      fontSize: typeof object.fontSize === 'number' ? object.fontSize : DEFAULT_TEXT_STYLE.fontSize,
+      fontWeight: object.fontWeight === 'bold' ? 'bold' : 'normal',
+      fontStyle: object.fontStyle === 'italic' ? 'italic' : 'normal',
+    })
+  }, [])
+
+  const pushHistory = useCallback(() => {
+    const canvas = canvasRef.current
+    if (!canvas || suppressHistoryRef.current) return
+
+    const serialized = JSON.stringify(canvas.toJSON())
+    if (historyRef.current[historyIndexRef.current] === serialized) {
+      updateHistoryFlags()
+      return
+    }
+
+    historyRef.current = historyRef.current.slice(0, historyIndexRef.current + 1)
+    historyRef.current.push(serialized)
+    historyIndexRef.current = historyRef.current.length - 1
+    updateHistoryFlags()
+  }, [updateHistoryFlags])
+
+  const restoreHistory = useCallback(async (nextIndex: number) => {
+    const canvas = canvasRef.current
+    const snapshot = historyRef.current[nextIndex]
+    if (!canvas || !snapshot) return
+
+    suppressHistoryRef.current = true
+    await canvas.loadFromJSON(JSON.parse(snapshot))
+    canvas.renderAll()
+    suppressHistoryRef.current = false
+    historyIndexRef.current = nextIndex
+    const currentActive = canvas.getActiveObject() ?? null
+    setActiveObject(currentActive)
+    syncTextStyleFromObject(currentActive)
+    updateHistoryFlags()
+  }, [syncTextStyleFromObject, updateHistoryFlags])
+
+  const refreshBrush = useCallback(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+
+    const alpha = clamp(maskOpacity, 0.05, 1)
+    const width = clamp(maskWidth, 4, 160)
+    const brush = new PencilBrush(canvas)
+    brush.color = `rgba(0, 0, 0, ${alpha})`
+    brush.width = width
+    canvas.freeDrawingBrush = brush
+    canvas.isDrawingMode = toolMode === 'mask'
+    canvas.defaultCursor = toolMode === 'mask' ? 'crosshair' : 'default'
+  }, [maskOpacity, maskWidth, toolMode])
+
+  const redrawBackground = useCallback(() => {
+    const canvas = backgroundCanvasRef.current
+    const image = sourceImageRef.current
+    if (!canvas || !image) return
+
+    const context = canvas.getContext('2d')
+    if (!context) return
+
+    context.setTransform(1, 0, 0, 1, 0, 0)
+    context.clearRect(0, 0, canvas.width, canvas.height)
+    context.fillStyle = '#11161d'
+    context.fillRect(0, 0, canvas.width, canvas.height)
+    context.imageSmoothingEnabled = true
+    context.imageSmoothingQuality = 'high'
+    context.setTransform(zoomRef.current, 0, 0, zoomRef.current, panRef.current.x, panRef.current.y)
+    context.drawImage(
+      image,
+      imageBoundsRef.current.left,
+      imageBoundsRef.current.top,
+      imageBoundsRef.current.width,
+      imageBoundsRef.current.height,
+    )
+   }, [])
+
+  const syncViewportTransform = useCallback(() => {
+    const canvas = canvasRef.current
+    if (canvas) {
+      canvas.setViewportTransform([zoomRef.current, 0, 0, zoomRef.current, panRef.current.x, panRef.current.y])
+      canvas.requestRenderAll()
+    }
+    redrawBackground()
+  }, [redrawBackground])
+
+  const addImageLayer = useCallback(async (dataUrl: string) => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+
+    const htmlImage = await loadHtmlImage(dataUrl)
+    const image = new FabricImage(htmlImage, {
+      width: htmlImage.naturalWidth,
+      height: htmlImage.naturalHeight,
+      left: canvas.getWidth() / 2,
+      top: canvas.getHeight() / 2,
+      originX: 'center',
+      originY: 'center',
+      cornerStyle: 'circle',
+      transparentCorners: false,
+      borderColor: '#3b82f6',
+      cornerColor: '#ffffff',
+      cornerStrokeColor: '#3b82f6',
+    })
+
+    const width = displaySizeRef.current.width || canvas.getWidth()
+    const height = displaySizeRef.current.height || canvas.getHeight()
+    const fitScale = Math.min(
+      1,
+      (width * 0.55) / Math.max(1, htmlImage.naturalWidth),
+      (height * 0.55) / Math.max(1, htmlImage.naturalHeight),
+    )
+    image.scale(Math.max(0.08, fitScale))
+    image.setControlsVisibility({ mtr: true })
+    canvas.add(image)
+    canvas.setActiveObject(image)
+    canvas.renderAll()
+    pushHistory()
+  }, [pushHistory])
+
+  useEffect(() => {
+    let disposed = false
+
+    const mountCanvas = async () => {
+      const element = canvasElementRef.current
+      const backgroundElement = backgroundCanvasRef.current
+      const viewport = canvasViewportRef.current
+      if (!element || !backgroundElement || !viewport) return
+
+      const htmlImage = await loadHtmlImage(src)
+      if (disposed) return
+      sourceImageRef.current = htmlImage
+
+      const stageRect = viewport.getBoundingClientRect()
+      const stageWidth = Math.max(320, Math.floor(stageRect.width))
+      const stageHeight = Math.max(320, Math.floor(stageRect.height))
+      const imageScale = Math.min(
+        stageWidth / Math.max(1, htmlImage.naturalWidth),
+        stageHeight / Math.max(1, htmlImage.naturalHeight),
+        1,
+      )
+      const imageDisplayWidth = Math.max(1, Math.round(htmlImage.naturalWidth * imageScale))
+      const imageDisplayHeight = Math.max(1, Math.round(htmlImage.naturalHeight * imageScale))
+      const imageLeft = Math.max(0, Math.round((stageWidth - imageDisplayWidth) / 2))
+      const imageTop = Math.max(0, Math.round((stageHeight - imageDisplayHeight) / 2))
+
+      displaySizeRef.current = { width: stageWidth, height: stageHeight }
+      sourceSizeRef.current = {
+        width: htmlImage.naturalWidth,
+        height: htmlImage.naturalHeight,
+      }
+      imageBoundsRef.current = {
+        left: imageLeft,
+        top: imageTop,
+        width: imageDisplayWidth,
+        height: imageDisplayHeight,
+      }
+      exportMultiplierRef.current = Math.max(1, htmlImage.naturalWidth / Math.max(1, imageDisplayWidth))
+      zoomRef.current = 1
+      panRef.current = { x: 0, y: 0 }
+
+      backgroundElement.width = stageWidth
+      backgroundElement.height = stageHeight
+
+      const canvas = new Canvas(element, {
+        selection: true,
+        preserveObjectStacking: true,
+        enableRetinaScaling: false,
+      })
+      canvasRef.current = canvas
+
+      canvas.setDimensions({
+        width: stageWidth,
+        height: stageHeight,
+      })
+      canvas.calcOffset()
+      redrawBackground()
+
+      canvas.on('mouse:wheel', (event) => {
+        const wheelEvent = event.e as WheelEvent
+        wheelEvent.preventDefault()
+        wheelEvent.stopPropagation()
+        const nextZoom = clamp(zoomRef.current * Math.pow(0.999, wheelEvent.deltaY), 0.35, 6)
+        const factor = nextZoom / zoomRef.current
+        panRef.current = {
+          x: wheelEvent.offsetX - factor * (wheelEvent.offsetX - panRef.current.x),
+          y: wheelEvent.offsetY - factor * (wheelEvent.offsetY - panRef.current.y),
+        }
+        zoomRef.current = nextZoom
+        syncViewportTransform()
+      })
+
+      canvas.on('mouse:down', (event) => {
+        const rawEvent = event.e as MouseEvent
+        if (rawEvent.button === 1 || (spacePressedRef.current && toolModeRef.current === 'select')) {
+          panningRef.current = true
+          lastPointerRef.current = { x: rawEvent.clientX, y: rawEvent.clientY }
+          canvas.selection = false
+          canvas.defaultCursor = 'grab'
+        }
+      })
+
+      canvas.on('mouse:move', (event) => {
+        if (!panningRef.current) return
+        const rawEvent = event.e as MouseEvent
+        const deltaX = rawEvent.clientX - lastPointerRef.current.x
+        const deltaY = rawEvent.clientY - lastPointerRef.current.y
+        panRef.current = {
+          x: panRef.current.x + deltaX,
+          y: panRef.current.y + deltaY,
+        }
+        syncViewportTransform()
+        lastPointerRef.current = { x: rawEvent.clientX, y: rawEvent.clientY }
+      })
+
+      canvas.on('mouse:up', () => {
+        panningRef.current = false
+        canvas.selection = toolModeRef.current === 'select'
+        canvas.defaultCursor = toolModeRef.current === 'mask' ? 'crosshair' : 'default'
+      })
+
+      const handleSelection = () => {
+        const current = canvas.getActiveObject() ?? null
+        setActiveObject(current)
+        syncTextStyleFromObject(current)
+        const selectedShapeType = getMaskShapeTypeFromObject(current)
+        if (selectedShapeType) {
+          setMaskShapeType(selectedShapeType)
+        }
+      }
+
+      canvas.on('selection:created', handleSelection)
+      canvas.on('selection:updated', handleSelection)
+      canvas.on('selection:cleared', () => {
+        setActiveObject(null)
+      })
+
+      const recordChange = () => pushHistory()
+      canvas.on('object:added', recordChange)
+      canvas.on('object:modified', recordChange)
+      canvas.on('object:removed', recordChange)
+      canvas.on('path:created', (event) => {
+        const path = event.path
+        if (path) {
+          ;(path as FabricObject & { data?: { editorKind: string } }).data = { editorKind: 'mask-brush' }
+        }
+        pushHistory()
+      })
+
+      refreshBrush()
+      suppressHistoryRef.current = true
+      historyRef.current = []
+      historyIndexRef.current = -1
+      suppressHistoryRef.current = false
+      pushHistory()
+      setReady(true)
+    }
+
+    void mountCanvas()
+
+    return () => {
+      disposed = true
+      setReady(false)
+      canvasRef.current?.dispose()
+      canvasRef.current = null
+    }
+  }, [pushHistory, redrawBackground, src, syncTextStyleFromObject, syncViewportTransform])
+
+  useEffect(() => {
+    refreshBrush()
+  }, [refreshBrush])
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    const current = activeObject
+    if (!canvas || !current || getEditorKind(current) !== 'mask-region') return
+    current.set({
+      fill: `rgba(0, 0, 0, ${clamp(maskOpacity, 0.05, 1)})`,
+    })
+    current.setCoords()
+    canvas.renderAll()
+  }, [activeObject, maskOpacity])
+
+  useEffect(() => {
+    const onPaste = async (event: ClipboardEvent) => {
+      const items = Array.from(event.clipboardData?.items ?? [])
+      const imageItem = items.find((item) => item.type.startsWith('image/'))
+      if (!imageItem) return
+      const file = imageItem.getAsFile()
+      if (!file) return
+      event.preventDefault()
+      await addImageLayer(await readFileAsDataUrl(file))
+    }
+
+    const onKeyDown = async (event: KeyboardEvent) => {
+      if ((event.key === 'Delete' || event.key === 'Backspace') && activeObject) {
+        const canvas = canvasRef.current
+        if (!canvas) return
+        const current = canvas.getActiveObject()
+        if (!current) return
+        canvas.remove(current)
+        canvas.discardActiveObject()
+        canvas.renderAll()
+        pushHistory()
+        return
+      }
+
+      const mod = event.ctrlKey || event.metaKey
+      if (mod && event.key.toLowerCase() === 'z' && !event.shiftKey) {
+        event.preventDefault()
+        if (historyIndexRef.current > 0) {
+          await restoreHistory(historyIndexRef.current - 1)
+        }
+      }
+
+      if (mod && (event.key.toLowerCase() === 'y' || (event.shiftKey && event.key.toLowerCase() === 'z'))) {
+        event.preventDefault()
+        if (historyIndexRef.current < historyRef.current.length - 1) {
+          await restoreHistory(historyIndexRef.current + 1)
+        }
+      }
+    }
+
+    const onKeyPressState = (event: KeyboardEvent, pressed: boolean) => {
+      if (event.code === 'Space') {
+        spacePressedRef.current = pressed
+        if (pressed) {
+          event.preventDefault()
+        }
+      }
+    }
+
+    const onKeyDownState = (event: KeyboardEvent) => onKeyPressState(event, true)
+    const onKeyUpState = (event: KeyboardEvent) => onKeyPressState(event, false)
+
+    window.addEventListener('paste', onPaste)
+    window.addEventListener('keydown', onKeyDown)
+    window.addEventListener('keydown', onKeyDownState)
+    window.addEventListener('keyup', onKeyUpState)
+    return () => {
+      window.removeEventListener('paste', onPaste)
+      window.removeEventListener('keydown', onKeyDown)
+      window.removeEventListener('keydown', onKeyDownState)
+      window.removeEventListener('keyup', onKeyUpState)
+    }
+  }, [activeObject, addImageLayer, pushHistory, restoreHistory])
+
+  const handleAddText = () => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+
+    const text = new IText(textStyle.text || DEFAULT_TEXT_STYLE.text, {
+      left: canvas.getWidth() / 2,
+      top: canvas.getHeight() / 2,
+      originX: 'center',
+      originY: 'center',
+      fill: textStyle.fill,
+      fontSize: textStyle.fontSize,
+      fontWeight: textStyle.fontWeight,
+      fontStyle: textStyle.fontStyle,
+      cornerStyle: 'circle',
+      transparentCorners: false,
+      borderColor: '#3b82f6',
+      cornerColor: '#ffffff',
+      cornerStrokeColor: '#3b82f6',
+    })
+
+    canvas.add(text)
+    canvas.setActiveObject(text)
+    canvas.renderAll()
+    text.enterEditing()
+    text.selectAll()
+    pushHistory()
+  }
+
+  const handleObjectStyleChange = (patch: Partial<TextStyleState>) => {
+    const canvas = canvasRef.current
+    const current = canvas?.getActiveObject()
+    const next = { ...textStyle, ...patch }
+    setTextStyle(next)
+
+    if (!(current instanceof IText) || !canvas) return
+
+    current.set({
+      text: next.text,
+      fill: next.fill,
+      fontSize: next.fontSize,
+      fontWeight: next.fontWeight,
+      fontStyle: next.fontStyle,
+    })
+    current.setCoords()
+    canvas.renderAll()
+    pushHistory()
+  }
+
+  const buildMaskShape = useCallback((shapeType: MaskShapeType, left: number, top: number, width: number, height: number) => {
+    const fill = `rgba(0, 0, 0, ${clamp(maskOpacity, 0.05, 1)})`
+    const shared = {
+      left,
+      top,
+      fill,
+      cornerStyle: 'circle' as const,
+      transparentCorners: false,
+      borderColor: '#3b82f6',
+      cornerColor: '#ffffff',
+      cornerStrokeColor: '#3b82f6',
+    }
+
+    if (shapeType === 'ellipse') {
+      return new Ellipse({
+        ...shared,
+        rx: width / 2,
+        ry: height / 2,
+      })
+    }
+
+    if (shapeType === 'triangle') {
+      return new Triangle({
+        ...shared,
+        width,
+        height,
+      })
+    }
+
+    return new Rect({
+      ...shared,
+      width,
+      height,
+    })
+  }, [maskOpacity])
+
+  const handleAddMaskRegion = () => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+
+    const mask = buildMaskShape(
+      maskShapeType,
+      canvas.getWidth() / 2 - 140,
+      canvas.getHeight() / 2 - 70,
+      280,
+      140,
+    )
+    ;(mask as FabricObject & { data?: { editorKind: string; shapeType: MaskShapeType } }).data = {
+      editorKind: 'mask-region',
+      shapeType: maskShapeType,
+    }
+    canvas.add(mask)
+    canvas.setActiveObject(mask)
+    canvas.renderAll()
+    pushHistory()
+  }
+
+  const handleChangeMaskShapeType = (nextShapeType: MaskShapeType) => {
+    setMaskShapeType(nextShapeType)
+    const canvas = canvasRef.current
+    if (!canvas || getEditorKind(activeObject) !== 'mask-region' || !activeObject) return
+
+    const center = activeObject.getCenterPoint()
+    const scaledWidth = activeObject.getScaledWidth()
+    const scaledHeight = activeObject.getScaledHeight()
+    const angle = activeObject.angle ?? 0
+    const fill = typeof activeObject.fill === 'string'
+      ? activeObject.fill
+      : `rgba(0, 0, 0, ${clamp(maskOpacity, 0.05, 1)})`
+
+    suppressHistoryRef.current = true
+    canvas.remove(activeObject)
+    const replacement = buildMaskShape(
+      nextShapeType,
+      center.x - scaledWidth / 2,
+      center.y - scaledHeight / 2,
+      scaledWidth,
+      scaledHeight,
+    )
+    replacement.set({
+      angle,
+      fill,
+    })
+    ;(replacement as FabricObject & { data?: { editorKind: string; shapeType: MaskShapeType } }).data = {
+      editorKind: 'mask-region',
+      shapeType: nextShapeType,
+    }
+    canvas.add(replacement)
+    canvas.setActiveObject(replacement)
+    canvas.renderAll()
+    suppressHistoryRef.current = false
+    setActiveObject(replacement)
+    pushHistory()
+  }
+
+  const handleFileSelect = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0]
+    if (!file) return
+    event.target.value = ''
+    await addImageLayer(await readFileAsDataUrl(file))
+  }
+
+  const handleUndo = async () => {
+    if (historyIndexRef.current <= 0) return
+    await restoreHistory(historyIndexRef.current - 1)
+  }
+
+  const handleRedo = async () => {
+    if (historyIndexRef.current >= historyRef.current.length - 1) return
+    await restoreHistory(historyIndexRef.current + 1)
+  }
+
+  const handleSave = async () => {
+    const canvas = canvasRef.current
+    const sourceImage = sourceImageRef.current
+    if (!canvas || !sourceImage) return
+
+    const previousViewport = canvas.viewportTransform ? [...canvas.viewportTransform] : null
+    canvas.setViewportTransform([1, 0, 0, 1, 0, 0])
+    canvas.renderAll()
+    const overlayDataUrl = canvas.toDataURL({
+      format: 'png',
+      left: imageBoundsRef.current.left,
+      top: imageBoundsRef.current.top,
+      width: imageBoundsRef.current.width,
+      height: imageBoundsRef.current.height,
+      multiplier: exportMultiplierRef.current,
+    })
+    if (previousViewport) {
+      canvas.setViewportTransform(previousViewport as [number, number, number, number, number, number])
+      canvas.renderAll()
+    }
+
+    const overlayImage = await loadHtmlImage(overlayDataUrl)
+    const exportCanvas = document.createElement('canvas')
+    exportCanvas.width = sourceSizeRef.current.width
+    exportCanvas.height = sourceSizeRef.current.height
+    const exportContext = exportCanvas.getContext('2d')
+    if (!exportContext) return
+    exportContext.imageSmoothingEnabled = true
+    exportContext.imageSmoothingQuality = 'high'
+    exportContext.drawImage(sourceImage, 0, 0, exportCanvas.width, exportCanvas.height)
+    exportContext.drawImage(overlayImage, 0, 0, exportCanvas.width, exportCanvas.height)
+    const editedDataUrl = exportCanvas.toDataURL('image/png')
+
+    if (saveMode === 'replace-input') {
+      const nextId = await replaceInputImageWithDataUrl(imageId, editedDataUrl)
+      setLightboxImageId(nextId, currentImageList.map((id) => (id === imageId ? nextId : id)))
+      showToast('参考图已更新', 'success')
+    } else {
+      const nextId = await addInputImageWithDataUrl(editedDataUrl)
+      const nextList = currentImageList.includes(nextId) ? currentImageList : [...currentImageList, nextId]
+      setLightboxImageId(nextId, nextList)
+      showToast('编辑结果已加入参考图', 'success')
+    }
+    onClose()
+  }
+
+  const isTextSelected = activeObject instanceof IText
+  const activeEditorKind = getEditorKind(activeObject)
+  const showMaskSettings = toolMode === 'mask' || activeEditorKind === 'mask-region' || activeEditorKind === 'mask-brush'
+  const showTextSettings = isTextSelected
+  const showShapeSelector = activeEditorKind === 'mask-region'
+
+  return (
+    <div className="fixed inset-0 z-[75] overflow-hidden bg-black/70 backdrop-blur-md">
+      <div className="absolute inset-0 bg-[#0b0e12]">
+        <div
+          ref={canvasViewportRef}
+          className="absolute inset-4 right-[392px] overflow-hidden rounded-3xl border border-white/10 bg-[#11161d] shadow-2xl"
+        >
+          {!ready && (
+            <div className="absolute inset-0 z-10 flex items-center justify-center text-sm text-white/65">
+              正在加载编辑器...
+            </div>
+          )}
+          <canvas
+            ref={backgroundCanvasRef}
+            className="absolute inset-0 block h-full w-full"
+          />
+          <canvas
+            ref={canvasElementRef}
+            className="absolute inset-0 block"
+          />
+        </div>
+        <aside className="absolute bottom-4 right-4 top-4 z-20 w-[360px] overflow-y-auto rounded-3xl border border-white/10 bg-[#12161d]/96 p-5 text-white shadow-2xl backdrop-blur-xl">
+          <div className="mb-5 flex items-center justify-between">
+            <div>
+              <h3 className="text-lg font-semibold">快速编辑</h3>
+              <p className="mt-1 text-xs text-white/45">
+                文字、涂抹遮罩、贴图。
+                {saveMode === 'replace-input' ? ' 保存后替换当前参考图。' : ' 保存后加入参考图。'}
+              </p>
+            </div>
+            <button
+              onClick={onClose}
+              className="rounded-full p-2 text-white/45 transition hover:bg-white/10 hover:text-white"
+              aria-label="关闭编辑器"
+            >
+              <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          <div className="space-y-5">
+            <section className="rounded-2xl border border-white/10 bg-white/[0.03] p-4">
+              <div className="mb-3 text-xs font-medium uppercase tracking-[0.18em] text-white/45">历史</div>
+              <div className="grid grid-cols-2 gap-2">
+                <button
+                  onClick={() => void handleUndo()}
+                  disabled={!historyState.canUndo}
+                  className="rounded-xl bg-white/8 px-3 py-2 text-sm text-white transition hover:bg-white/12 disabled:cursor-not-allowed disabled:opacity-40"
+                >
+                  撤销
+                </button>
+                <button
+                  onClick={() => void handleRedo()}
+                  disabled={!historyState.canRedo}
+                  className="rounded-xl bg-white/8 px-3 py-2 text-sm text-white transition hover:bg-white/12 disabled:cursor-not-allowed disabled:opacity-40"
+                >
+                  重做
+                </button>
+              </div>
+            </section>
+
+            <section className="rounded-2xl border border-white/10 bg-white/[0.03] p-4">
+              <div className="mb-3 text-xs font-medium uppercase tracking-[0.18em] text-white/45">工具</div>
+              <div className="grid grid-cols-2 gap-2">
+                <button
+                  onClick={() => setToolMode('select')}
+                  className={`rounded-xl px-3 py-2 text-sm transition ${toolMode === 'select' ? 'bg-blue-500 text-white' : 'bg-white/8 text-white hover:bg-white/12'}`}
+                >
+                  选择
+                </button>
+                <button
+                  onClick={() => setToolMode('mask')}
+                  className={`rounded-xl px-3 py-2 text-sm transition ${toolMode === 'mask' ? 'bg-blue-500 text-white' : 'bg-white/8 text-white hover:bg-white/12'}`}
+                >
+                  涂抹遮罩
+                </button>
+                <button
+                  onClick={handleAddMaskRegion}
+                  className="rounded-xl bg-white/8 px-3 py-2 text-sm text-white transition hover:bg-white/12"
+                >
+                  区域遮罩
+                </button>
+                <button
+                  onClick={handleAddText}
+                  className="rounded-xl bg-white/8 px-3 py-2 text-sm text-white transition hover:bg-white/12"
+                >
+                  添加文字
+                </button>
+                <button
+                  onClick={() => fileInputRef.current?.click()}
+                  className="rounded-xl bg-white/8 px-3 py-2 text-sm text-white transition hover:bg-white/12"
+                >
+                  从文件贴图
+                </button>
+                <button
+                  onClick={() => showToast('直接粘贴图片即可加入画布', 'info')}
+                  className="rounded-xl bg-white/8 px-3 py-2 text-sm text-white transition hover:bg-white/12"
+                >
+                  从剪贴板贴图
+                </button>
+              </div>
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept="image/*"
+                className="hidden"
+                onChange={(event) => void handleFileSelect(event)}
+              />
+            </section>
+
+            {showMaskSettings && (
+              <section className="rounded-2xl border border-white/10 bg-white/[0.03] p-4">
+              <div className="mb-3 text-xs font-medium uppercase tracking-[0.18em] text-white/45">遮罩</div>
+              <div className="space-y-3">
+                <label className="block">
+                  <span className="mb-1 block text-xs text-white/55">模式</span>
+                  <div className="text-sm text-white/75">
+                    {activeEditorKind === 'mask-region'
+                      ? '当前选中了区域遮罩，可以切换形状并继续调透明度。'
+                      : toolMode === 'mask'
+                        ? '当前为涂抹遮罩，直接在图片上拖动即可。'
+                        : '切到“涂抹遮罩”后即可开始绘制。'}
+                  </div>
+                </label>
+                {showShapeSelector && (
+                  <div>
+                    <span className="mb-2 block text-xs text-white/55">图形</span>
+                    <div className="grid grid-cols-3 gap-2">
+                      {([
+                        ['rect', '矩形'],
+                        ['ellipse', '圆形'],
+                        ['triangle', '三角'],
+                      ] as const).map(([shape, label]) => (
+                        <button
+                          key={shape}
+                          onClick={() => handleChangeMaskShapeType(shape)}
+                          className={`rounded-xl px-3 py-2 text-sm transition ${maskShapeType === shape ? 'bg-blue-500 text-white' : 'bg-white/8 text-white hover:bg-white/12'}`}
+                        >
+                          {label}
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                )}
+                <label className="block">
+                  <span className="mb-1 block text-xs text-white/55">透明度</span>
+                  <input
+                    type="range"
+                    min="0.1"
+                    max="1"
+                    step="0.05"
+                    value={maskOpacity}
+                    onChange={(e) => setMaskOpacity(Number(e.target.value))}
+                    className="w-full"
+                  />
+                  <div className="mt-1 text-xs text-white/45">{Math.round(maskOpacity * 100)}%</div>
+                </label>
+                <label className="block">
+                  <span className="mb-1 block text-xs text-white/55">笔刷大小</span>
+                  <input
+                    type="range"
+                    min="6"
+                    max="140"
+                    step="2"
+                    value={maskWidth}
+                    onChange={(e) => setMaskWidth(Number(e.target.value))}
+                    className="w-full"
+                  />
+                  <div className="mt-1 text-xs text-white/45">{maskWidth}px</div>
+                </label>
+              </div>
+              </section>
+            )}
+
+            {showTextSettings && (
+              <section className="rounded-2xl border border-white/10 bg-white/[0.03] p-4">
+              <div className="mb-3 text-xs font-medium uppercase tracking-[0.18em] text-white/45">文字样式</div>
+              <div className="space-y-3">
+                <label className="block">
+                  <span className="mb-1 block text-xs text-white/55">文字内容</span>
+                  <textarea
+                    value={textStyle.text}
+                    onChange={(e) => handleObjectStyleChange({ text: e.target.value })}
+                    rows={3}
+                    className="w-full rounded-xl border border-white/10 bg-black/25 px-3 py-2 text-sm text-white outline-none focus:border-blue-400"
+                    placeholder="输入要添加到画布的文字"
+                  />
+                </label>
+                <div className="grid grid-cols-2 gap-3">
+                  <label className="block">
+                    <span className="mb-1 block text-xs text-white/55">颜色</span>
+                    <input
+                      type="color"
+                      value={normalizeColorValue(textStyle.fill)}
+                      onChange={(e) => handleObjectStyleChange({ fill: e.target.value })}
+                      className="h-10 w-full rounded-xl border border-white/10 bg-black/25 p-1"
+                    />
+                  </label>
+                  <label className="block">
+                    <span className="mb-1 block text-xs text-white/55">字号</span>
+                    <input
+                      type="number"
+                      min={12}
+                      max={240}
+                      value={textStyle.fontSize}
+                      onChange={(e) => handleObjectStyleChange({ fontSize: clamp(Number(e.target.value) || 12, 12, 240) })}
+                      className="h-10 w-full rounded-xl border border-white/10 bg-black/25 px-3 text-sm text-white outline-none focus:border-blue-400"
+                    />
+                  </label>
+                </div>
+                <div className="grid grid-cols-2 gap-2">
+                  <button
+                    onClick={() => handleObjectStyleChange({ fontWeight: textStyle.fontWeight === 'bold' ? 'normal' : 'bold' })}
+                    className={`rounded-xl px-3 py-2 text-sm transition ${textStyle.fontWeight === 'bold' ? 'bg-blue-500 text-white' : 'bg-white/8 text-white hover:bg-white/12'}`}
+                  >
+                    粗体
+                  </button>
+                  <button
+                    onClick={() => handleObjectStyleChange({ fontStyle: textStyle.fontStyle === 'italic' ? 'normal' : 'italic' })}
+                    className={`rounded-xl px-3 py-2 text-sm transition ${textStyle.fontStyle === 'italic' ? 'bg-blue-500 text-white' : 'bg-white/8 text-white hover:bg-white/12'}`}
+                  >
+                    斜体
+                  </button>
+                </div>
+                {!isTextSelected && (
+                  <div className="text-xs text-white/45">当前没有选中文字对象，样式会用于下一个新建文字。</div>
+                )}
+              </div>
+              </section>
+            )}
+
+            <section className="rounded-2xl border border-white/10 bg-white/[0.03] p-4">
+              <div className="mb-3 text-xs font-medium uppercase tracking-[0.18em] text-white/45">完成</div>
+              <div className="grid grid-cols-2 gap-2">
+                <button
+                  onClick={onClose}
+                  className="rounded-xl bg-white/8 px-3 py-2 text-sm text-white transition hover:bg-white/12"
+                >
+                  放弃修改
+                </button>
+                <button
+                  onClick={() => void handleSave()}
+                  className="rounded-xl bg-blue-500 px-3 py-2 text-sm text-white transition hover:bg-blue-600"
+                >
+                  {saveMode === 'replace-input' ? '保存替换' : '保存并加入'}
+                </button>
+              </div>
+            </section>
+          </div>
+        </aside>
+      </div>
+    </div>
+  )
+}
+
+async function loadHtmlImage(src: string) {
+  return new Promise<HTMLImageElement>((resolve, reject) => {
+    const image = new Image()
+    image.onload = () => resolve(image)
+    image.onerror = () => reject(new Error('图片加载失败'))
+    image.src = src
+  })
+}
+
+async function readFileAsDataUrl(file: File) {
+  return new Promise<string>((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => resolve(String(reader.result))
+    reader.onerror = () => reject(reader.error ?? new Error('文件读取失败'))
+    reader.readAsDataURL(file)
+  })
+}
+
+function normalizeColorValue(value: string) {
+  if (/^#[0-9a-f]{6}$/i.test(value)) return value
+  if (/^#[0-9a-f]{3}$/i.test(value)) return value
+  return '#ffffff'
+}
diff --git a/src/store.ts b/src/store.ts
index 32932b64..31c20a82 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -77,6 +77,7 @@ interface AppState {
   removeInputImage: (idx: number) => void
   clearInputImages: () => void
   setInputImages: (imgs: InputImage[]) => void
+  replaceInputImage: (currentId: string, nextImage: InputImage) => void
 
   // 参数
   params: TaskParams
@@ -105,7 +106,9 @@ interface AppState {
   setDetailTaskId: (id: string | null) => void
   lightboxImageId: string | null
   lightboxImageList: string[]
+  lightboxStartEditor: boolean
   setLightboxImageId: (id: string | null, list?: string[]) => void
+  setLightboxStartEditor: (v: boolean) => void
   showSettings: boolean
   setShowSettings: (v: boolean) => void
 
@@ -179,6 +182,10 @@ export const useStore = create<AppState>()(
           return { inputImages: [] }
         }),
       setInputImages: (imgs) => set({ inputImages: imgs }),
+      replaceInputImage: (currentId, nextImage) =>
+        set((s) => ({
+          inputImages: s.inputImages.map((img) => (img.id === currentId ? nextImage : img)),
+        })),
 
       // Params
       params: { ...DEFAULT_PARAMS },
@@ -218,8 +225,10 @@ export const useStore = create<AppState>()(
       setDetailTaskId: (detailTaskId) => set({ detailTaskId }),
       lightboxImageId: null,
       lightboxImageList: [],
+      lightboxStartEditor: false,
       setLightboxImageId: (lightboxImageId, list) =>
         set({ lightboxImageId, lightboxImageList: list ?? (lightboxImageId ? [lightboxImageId] : []) }),
+      setLightboxStartEditor: (lightboxStartEditor) => set({ lightboxStartEditor }),
       showSettings: false,
       setShowSettings: (showSettings) => set({ showSettings }),
 
@@ -634,6 +643,23 @@ export async function addImageFromFile(file: File): Promise<void> {
   useStore.getState().addInputImage({ id, dataUrl })
 }
 
+export async function replaceInputImageWithDataUrl(currentId: string, dataUrl: string): Promise<string> {
+  const id = await hashDataUrl(dataUrl)
+  imageCache.set(id, dataUrl)
+  useStore.getState().replaceInputImage(currentId, { id, dataUrl })
+  return id
+}
+
+export async function addInputImageWithDataUrl(dataUrl: string): Promise<string> {
+  const id = await hashDataUrl(dataUrl)
+  imageCache.set(id, dataUrl)
+  const state = useStore.getState()
+  if (!state.inputImages.some((image) => image.id === id)) {
+    state.addInputImage({ id, dataUrl })
+  }
+  return id
+}
+
 function fileToDataUrl(file: File): Promise<string> {
   return new Promise((resolve, reject) => {
     const reader = new FileReader()

From ca97c59eb789a8d5120bb3b190e26e9e238c1531 Mon Sep 17 00:00:00 2001
From: XianYuDaXian <xian_yu@live.com>
Date: Mon, 27 Apr 2026 19:36:56 +0800
Subject: [PATCH 04/16] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E5=8F=82=E8=80=83=E5=9B=BE=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=99=A8=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Lightbox.tsx                  |  28 +++
 src/components/ReferenceImageEditorModal.tsx | 194 ++++++++++++++-----
 2 files changed, 172 insertions(+), 50 deletions(-)

diff --git a/src/components/Lightbox.tsx b/src/components/Lightbox.tsx
index 09065ee9..ca1aeb30 100644
--- a/src/components/Lightbox.tsx
+++ b/src/components/Lightbox.tsx
@@ -11,6 +11,10 @@ function clamp(v: number, min: number, max: number) {
   return Math.max(min, Math.min(max, v))
 }
 
+function isLightboxControl(target: EventTarget | null) {
+  return target instanceof Element && Boolean(target.closest('[data-lightbox-control]'))
+}
+
 export default function Lightbox() {
   const lightboxImageId = useStore((s) => s.lightboxImageId)
   const lightboxImageList = useStore((s) => s.lightboxImageList)
@@ -277,6 +281,7 @@ function LightboxInner({ src, onClose, showNav, currentIndex, total, onPrev, onN
 
   // ====== 单击关闭（仅未缩放且非拖拽） ======
   const onClick = useCallback((e: React.MouseEvent) => {
+    if (isLightboxControl(e.target)) return
     if (suppressNextClickRef.current) {
       suppressNextClickRef.current = false
       e.stopPropagation()
@@ -306,6 +311,12 @@ function LightboxInner({ src, onClose, showNav, currentIndex, total, onPrev, onN
     if (!el) return
 
     const onTouchStart = (e: TouchEvent) => {
+      if (isLightboxControl(e.target)) {
+        tapRef.current = { time: 0, x: 0, y: 0 }
+        touchStartedOnImageRef.current = false
+        return
+      }
+
       if (e.touches.length === 2) {
         e.preventDefault()
         hadMultiTouchRef.current = true
@@ -380,6 +391,11 @@ function LightboxInner({ src, onClose, showNav, currentIndex, total, onPrev, onN
     }
 
     const onTouchEnd = (e: TouchEvent) => {
+      if (isLightboxControl(e.target)) {
+        tapRef.current = { time: 0, x: 0, y: 0 }
+        return
+      }
+
       if (e.touches.length < 2) pinchRef.current.active = false
       if (e.touches.length === 0) {
         dragRef.current.active = false
@@ -433,7 +449,11 @@ function LightboxInner({ src, onClose, showNav, currentIndex, total, onPrev, onN
     >
       <div className="absolute inset-0 bg-black/70 backdrop-blur-md animate-fade-in" />
       <button
+        data-lightbox-control
         className="absolute right-5 top-5 z-20 rounded-full bg-black/45 px-4 py-2 text-sm text-white backdrop-blur-sm transition hover:bg-black/65"
+        onPointerDown={(e) => e.stopPropagation()}
+        onTouchStart={(e) => e.stopPropagation()}
+        onTouchEnd={(e) => e.stopPropagation()}
         onClick={(e) => {
           e.stopPropagation()
           onEdit()
@@ -459,7 +479,11 @@ function LightboxInner({ src, onClose, showNav, currentIndex, total, onPrev, onN
       {showNav && !isZoomed && (
         <>
           <button
+            data-lightbox-control
             className={`${navBtnClass} left-3 sm:left-5`}
+            onPointerDown={(e) => e.stopPropagation()}
+            onTouchStart={(e) => e.stopPropagation()}
+            onTouchEnd={(e) => e.stopPropagation()}
             onClick={(e) => { e.stopPropagation(); goPrev() }}
           >
             <svg className="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -467,7 +491,11 @@ function LightboxInner({ src, onClose, showNav, currentIndex, total, onPrev, onN
             </svg>
           </button>
           <button
+            data-lightbox-control
             className={`${navBtnClass} right-3 sm:right-5`}
+            onPointerDown={(e) => e.stopPropagation()}
+            onTouchStart={(e) => e.stopPropagation()}
+            onTouchEnd={(e) => e.stopPropagation()}
             onClick={(e) => { e.stopPropagation(); goNext() }}
           >
             <svg className="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
diff --git a/src/components/ReferenceImageEditorModal.tsx b/src/components/ReferenceImageEditorModal.tsx
index 33c1df6d..e59964f3 100644
--- a/src/components/ReferenceImageEditorModal.tsx
+++ b/src/components/ReferenceImageEditorModal.tsx
@@ -64,6 +64,15 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
   const zoomRef = useRef(1)
   const panRef = useRef({ x: 0, y: 0 })
   const panningRef = useRef(false)
+  const touchGestureRef = useRef({
+    active: false,
+    distance: 0,
+    zoom: 1,
+    panX: 0,
+    panY: 0,
+    centerX: 0,
+    centerY: 0,
+  })
   const lastPointerRef = useRef({ x: 0, y: 0 })
   const spacePressedRef = useRef(false)
   const toolModeRef = useRef<ToolMode>('select')
@@ -85,8 +94,11 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
   }, [toolMode])
 
   useEffect(() => {
+    const previousOverflow = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
     document.body.dataset.referenceEditorActive = '1'
     return () => {
+      document.body.style.overflow = previousOverflow
       delete document.body.dataset.referenceEditorActive
     }
   }, [])
@@ -378,6 +390,68 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
     refreshBrush()
   }, [refreshBrush])
 
+  useEffect(() => {
+    const viewport = canvasViewportRef.current
+    if (!viewport) return
+
+    const getTouchMetrics = (event: TouchEvent) => {
+      const [first, second] = [event.touches[0], event.touches[1]]
+      const rect = viewport.getBoundingClientRect()
+      return {
+        distance: Math.hypot(first.clientX - second.clientX, first.clientY - second.clientY),
+        centerX: (first.clientX + second.clientX) / 2 - rect.left,
+        centerY: (first.clientY + second.clientY) / 2 - rect.top,
+      }
+    }
+
+    const onTouchStart = (event: TouchEvent) => {
+      if (event.touches.length !== 2) return
+      event.preventDefault()
+      const metrics = getTouchMetrics(event)
+      touchGestureRef.current = {
+        active: true,
+        distance: metrics.distance,
+        zoom: zoomRef.current,
+        panX: panRef.current.x,
+        panY: panRef.current.y,
+        centerX: metrics.centerX,
+        centerY: metrics.centerY,
+      }
+    }
+
+    const onTouchMove = (event: TouchEvent) => {
+      if (!touchGestureRef.current.active || event.touches.length !== 2) return
+      event.preventDefault()
+      const metrics = getTouchMetrics(event)
+      const start = touchGestureRef.current
+      const nextZoom = clamp(start.zoom * (metrics.distance / Math.max(1, start.distance)), 0.35, 6)
+      const factor = nextZoom / Math.max(0.01, start.zoom)
+      zoomRef.current = nextZoom
+      panRef.current = {
+        x: metrics.centerX - factor * (start.centerX - start.panX),
+        y: metrics.centerY - factor * (start.centerY - start.panY),
+      }
+      syncViewportTransform()
+    }
+
+    const onTouchEnd = (event: TouchEvent) => {
+      if (event.touches.length < 2) {
+        touchGestureRef.current.active = false
+      }
+    }
+
+    viewport.addEventListener('touchstart', onTouchStart, { passive: false })
+    viewport.addEventListener('touchmove', onTouchMove, { passive: false })
+    viewport.addEventListener('touchend', onTouchEnd)
+    viewport.addEventListener('touchcancel', onTouchEnd)
+    return () => {
+      viewport.removeEventListener('touchstart', onTouchStart)
+      viewport.removeEventListener('touchmove', onTouchMove)
+      viewport.removeEventListener('touchend', onTouchEnd)
+      viewport.removeEventListener('touchcancel', onTouchEnd)
+    }
+  }, [syncViewportTransform])
+
   useEffect(() => {
     const canvas = canvasRef.current
     const current = activeObject
@@ -389,6 +463,23 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
     canvas.renderAll()
   }, [activeObject, maskOpacity])
 
+  const handleDeleteActiveObject = useCallback(() => {
+    const canvas = canvasRef.current
+    const current = canvas?.getActiveObject()
+    if (!canvas || !current) return
+
+    const selection = current as FabricObject & { getObjects?: () => FabricObject[] }
+    if (typeof selection.getObjects === 'function') {
+      selection.getObjects().forEach((object) => canvas.remove(object))
+    } else {
+      canvas.remove(current)
+    }
+    canvas.discardActiveObject()
+    canvas.renderAll()
+    setActiveObject(null)
+    pushHistory()
+  }, [pushHistory])
+
   useEffect(() => {
     const onPaste = async (event: ClipboardEvent) => {
       const items = Array.from(event.clipboardData?.items ?? [])
@@ -402,14 +493,7 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
 
     const onKeyDown = async (event: KeyboardEvent) => {
       if ((event.key === 'Delete' || event.key === 'Backspace') && activeObject) {
-        const canvas = canvasRef.current
-        if (!canvas) return
-        const current = canvas.getActiveObject()
-        if (!current) return
-        canvas.remove(current)
-        canvas.discardActiveObject()
-        canvas.renderAll()
-        pushHistory()
+        handleDeleteActiveObject()
         return
       }
 
@@ -451,7 +535,7 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
       window.removeEventListener('keydown', onKeyDownState)
       window.removeEventListener('keyup', onKeyUpState)
     }
-  }, [activeObject, addImageLayer, pushHistory, restoreHistory])
+  }, [activeObject, addImageLayer, handleDeleteActiveObject, restoreHistory])
 
   const handleAddText = () => {
     const canvas = canvasRef.current
@@ -666,11 +750,11 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
   const showShapeSelector = activeEditorKind === 'mask-region'
 
   return (
-    <div className="fixed inset-0 z-[75] overflow-hidden bg-black/70 backdrop-blur-md">
+    <div className="fixed inset-0 z-[75] h-[100dvh] overflow-hidden bg-black/70 backdrop-blur-md">
       <div className="absolute inset-0 bg-[#0b0e12]">
         <div
           ref={canvasViewportRef}
-          className="absolute inset-4 right-[392px] overflow-hidden rounded-3xl border border-white/10 bg-[#11161d] shadow-2xl"
+          className="absolute inset-x-2 top-2 bottom-[292px] overflow-hidden rounded-2xl border border-white/10 bg-[#11161d] shadow-2xl touch-none sm:inset-x-3 sm:top-3 sm:bottom-[320px] md:inset-4 md:right-[392px] md:bottom-4 md:rounded-3xl"
         >
           {!ready && (
             <div className="absolute inset-0 z-10 flex items-center justify-center text-sm text-white/65">
@@ -679,18 +763,18 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
           )}
           <canvas
             ref={backgroundCanvasRef}
-            className="absolute inset-0 block h-full w-full"
+            className="absolute inset-0 block h-full w-full touch-none"
           />
           <canvas
             ref={canvasElementRef}
-            className="absolute inset-0 block"
+            className="absolute inset-0 block touch-none"
           />
         </div>
-        <aside className="absolute bottom-4 right-4 top-4 z-20 w-[360px] overflow-y-auto rounded-3xl border border-white/10 bg-[#12161d]/96 p-5 text-white shadow-2xl backdrop-blur-xl">
-          <div className="mb-5 flex items-center justify-between">
+        <aside className="absolute inset-x-2 bottom-2 z-20 max-h-[282px] overflow-y-auto rounded-2xl border border-white/10 bg-[#12161d]/96 p-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] text-white shadow-2xl backdrop-blur-xl sm:inset-x-3 sm:bottom-3 sm:max-h-[306px] sm:p-4 md:bottom-4 md:left-auto md:right-4 md:top-4 md:max-h-none md:w-[360px] md:p-5">
+          <div className="mb-3 flex items-center justify-between md:mb-5">
             <div>
-              <h3 className="text-lg font-semibold">快速编辑</h3>
-              <p className="mt-1 text-xs text-white/45">
+              <h3 className="text-base font-semibold md:text-lg">快速编辑</h3>
+              <p className="mt-1 hidden text-xs text-white/45 sm:block">
                 文字、涂抹遮罩、贴图。
                 {saveMode === 'replace-input' ? ' 保存后替换当前参考图。' : ' 保存后加入参考图。'}
               </p>
@@ -706,63 +790,73 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
             </button>
           </div>
 
-          <div className="space-y-5">
-            <section className="rounded-2xl border border-white/10 bg-white/[0.03] p-4">
-              <div className="mb-3 text-xs font-medium uppercase tracking-[0.18em] text-white/45">历史</div>
+          <div className="space-y-3 md:space-y-5">
+            <section className="rounded-xl border border-white/10 bg-white/[0.03] p-3 md:rounded-2xl md:p-4">
+              <div className="mb-2 text-xs font-medium uppercase tracking-[0.18em] text-white/45 md:mb-3">历史</div>
               <div className="grid grid-cols-2 gap-2">
                 <button
                   onClick={() => void handleUndo()}
                   disabled={!historyState.canUndo}
-                  className="rounded-xl bg-white/8 px-3 py-2 text-sm text-white transition hover:bg-white/12 disabled:cursor-not-allowed disabled:opacity-40"
+                  className="rounded-lg bg-white/8 px-3 py-2 text-sm text-white transition hover:bg-white/12 disabled:cursor-not-allowed disabled:opacity-40 md:rounded-xl"
                 >
                   撤销
                 </button>
                 <button
                   onClick={() => void handleRedo()}
                   disabled={!historyState.canRedo}
-                  className="rounded-xl bg-white/8 px-3 py-2 text-sm text-white transition hover:bg-white/12 disabled:cursor-not-allowed disabled:opacity-40"
+                  className="rounded-lg bg-white/8 px-3 py-2 text-sm text-white transition hover:bg-white/12 disabled:cursor-not-allowed disabled:opacity-40 md:rounded-xl"
                 >
                   重做
                 </button>
               </div>
             </section>
 
-            <section className="rounded-2xl border border-white/10 bg-white/[0.03] p-4">
-              <div className="mb-3 text-xs font-medium uppercase tracking-[0.18em] text-white/45">工具</div>
+            <section className="rounded-xl border border-white/10 bg-white/[0.03] p-3 md:rounded-2xl md:p-4">
+              <div className="mb-2 text-xs font-medium uppercase tracking-[0.18em] text-white/45 md:mb-3">工具</div>
               <div className="grid grid-cols-2 gap-2">
-                <button
-                  onClick={() => setToolMode('select')}
-                  className={`rounded-xl px-3 py-2 text-sm transition ${toolMode === 'select' ? 'bg-blue-500 text-white' : 'bg-white/8 text-white hover:bg-white/12'}`}
-                >
-                  选择
-                </button>
+                <div className={activeObject ? 'grid grid-cols-2 gap-2 md:block' : ''}>
+                  <button
+                    onClick={() => setToolMode('select')}
+                    className={`w-full rounded-lg px-3 py-2 text-sm transition md:rounded-xl ${toolMode === 'select' ? 'bg-blue-500 text-white' : 'bg-white/8 text-white hover:bg-white/12'}`}
+                  >
+                    选择
+                  </button>
+                  {activeObject && (
+                    <button
+                      onClick={handleDeleteActiveObject}
+                      className="w-full rounded-lg bg-red-500/90 px-3 py-2 text-sm text-white transition hover:bg-red-500 md:hidden"
+                    >
+                      删除
+                    </button>
+                  )}
+                </div>
                 <button
                   onClick={() => setToolMode('mask')}
-                  className={`rounded-xl px-3 py-2 text-sm transition ${toolMode === 'mask' ? 'bg-blue-500 text-white' : 'bg-white/8 text-white hover:bg-white/12'}`}
+                  className={`rounded-lg px-3 py-2 text-sm transition md:rounded-xl ${toolMode === 'mask' ? 'bg-blue-500 text-white' : 'bg-white/8 text-white hover:bg-white/12'}`}
                 >
                   涂抹遮罩
                 </button>
                 <button
                   onClick={handleAddMaskRegion}
-                  className="rounded-xl bg-white/8 px-3 py-2 text-sm text-white transition hover:bg-white/12"
+                  className="rounded-lg bg-white/8 px-3 py-2 text-sm text-white transition hover:bg-white/12 md:rounded-xl"
                 >
                   区域遮罩
                 </button>
                 <button
                   onClick={handleAddText}
-                  className="rounded-xl bg-white/8 px-3 py-2 text-sm text-white transition hover:bg-white/12"
+                  className="rounded-lg bg-white/8 px-3 py-2 text-sm text-white transition hover:bg-white/12 md:rounded-xl"
                 >
                   添加文字
                 </button>
                 <button
                   onClick={() => fileInputRef.current?.click()}
-                  className="rounded-xl bg-white/8 px-3 py-2 text-sm text-white transition hover:bg-white/12"
+                  className="rounded-lg bg-white/8 px-3 py-2 text-sm text-white transition hover:bg-white/12 md:rounded-xl"
                 >
                   从文件贴图
                 </button>
                 <button
                   onClick={() => showToast('直接粘贴图片即可加入画布', 'info')}
-                  className="rounded-xl bg-white/8 px-3 py-2 text-sm text-white transition hover:bg-white/12"
+                  className="rounded-lg bg-white/8 px-3 py-2 text-sm text-white transition hover:bg-white/12 md:rounded-xl"
                 >
                   从剪贴板贴图
                 </button>
@@ -777,8 +871,8 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
             </section>
 
             {showMaskSettings && (
-              <section className="rounded-2xl border border-white/10 bg-white/[0.03] p-4">
-              <div className="mb-3 text-xs font-medium uppercase tracking-[0.18em] text-white/45">遮罩</div>
+              <section className="rounded-xl border border-white/10 bg-white/[0.03] p-3 md:rounded-2xl md:p-4">
+              <div className="mb-2 text-xs font-medium uppercase tracking-[0.18em] text-white/45 md:mb-3">遮罩</div>
               <div className="space-y-3">
                 <label className="block">
                   <span className="mb-1 block text-xs text-white/55">模式</span>
@@ -802,7 +896,7 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
                         <button
                           key={shape}
                           onClick={() => handleChangeMaskShapeType(shape)}
-                          className={`rounded-xl px-3 py-2 text-sm transition ${maskShapeType === shape ? 'bg-blue-500 text-white' : 'bg-white/8 text-white hover:bg-white/12'}`}
+                          className={`rounded-lg px-2 py-2 text-sm transition md:rounded-xl md:px-3 ${maskShapeType === shape ? 'bg-blue-500 text-white' : 'bg-white/8 text-white hover:bg-white/12'}`}
                         >
                           {label}
                         </button>
@@ -841,16 +935,16 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
             )}
 
             {showTextSettings && (
-              <section className="rounded-2xl border border-white/10 bg-white/[0.03] p-4">
-              <div className="mb-3 text-xs font-medium uppercase tracking-[0.18em] text-white/45">文字样式</div>
+              <section className="rounded-xl border border-white/10 bg-white/[0.03] p-3 md:rounded-2xl md:p-4">
+              <div className="mb-2 text-xs font-medium uppercase tracking-[0.18em] text-white/45 md:mb-3">文字样式</div>
               <div className="space-y-3">
                 <label className="block">
                   <span className="mb-1 block text-xs text-white/55">文字内容</span>
                   <textarea
                     value={textStyle.text}
                     onChange={(e) => handleObjectStyleChange({ text: e.target.value })}
-                    rows={3}
-                    className="w-full rounded-xl border border-white/10 bg-black/25 px-3 py-2 text-sm text-white outline-none focus:border-blue-400"
+                    rows={2}
+                    className="w-full rounded-lg border border-white/10 bg-black/25 px-3 py-2 text-sm text-white outline-none focus:border-blue-400 md:rounded-xl"
                     placeholder="输入要添加到画布的文字"
                   />
                 </label>
@@ -861,7 +955,7 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
                       type="color"
                       value={normalizeColorValue(textStyle.fill)}
                       onChange={(e) => handleObjectStyleChange({ fill: e.target.value })}
-                      className="h-10 w-full rounded-xl border border-white/10 bg-black/25 p-1"
+                      className="h-10 w-full rounded-lg border border-white/10 bg-black/25 p-1 md:rounded-xl"
                     />
                   </label>
                   <label className="block">
@@ -872,20 +966,20 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
                       max={240}
                       value={textStyle.fontSize}
                       onChange={(e) => handleObjectStyleChange({ fontSize: clamp(Number(e.target.value) || 12, 12, 240) })}
-                      className="h-10 w-full rounded-xl border border-white/10 bg-black/25 px-3 text-sm text-white outline-none focus:border-blue-400"
+                      className="h-10 w-full rounded-lg border border-white/10 bg-black/25 px-3 text-sm text-white outline-none focus:border-blue-400 md:rounded-xl"
                     />
                   </label>
                 </div>
                 <div className="grid grid-cols-2 gap-2">
                   <button
                     onClick={() => handleObjectStyleChange({ fontWeight: textStyle.fontWeight === 'bold' ? 'normal' : 'bold' })}
-                    className={`rounded-xl px-3 py-2 text-sm transition ${textStyle.fontWeight === 'bold' ? 'bg-blue-500 text-white' : 'bg-white/8 text-white hover:bg-white/12'}`}
+                    className={`rounded-lg px-3 py-2 text-sm transition md:rounded-xl ${textStyle.fontWeight === 'bold' ? 'bg-blue-500 text-white' : 'bg-white/8 text-white hover:bg-white/12'}`}
                   >
                     粗体
                   </button>
                   <button
                     onClick={() => handleObjectStyleChange({ fontStyle: textStyle.fontStyle === 'italic' ? 'normal' : 'italic' })}
-                    className={`rounded-xl px-3 py-2 text-sm transition ${textStyle.fontStyle === 'italic' ? 'bg-blue-500 text-white' : 'bg-white/8 text-white hover:bg-white/12'}`}
+                    className={`rounded-lg px-3 py-2 text-sm transition md:rounded-xl ${textStyle.fontStyle === 'italic' ? 'bg-blue-500 text-white' : 'bg-white/8 text-white hover:bg-white/12'}`}
                   >
                     斜体
                   </button>
@@ -897,18 +991,18 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
               </section>
             )}
 
-            <section className="rounded-2xl border border-white/10 bg-white/[0.03] p-4">
-              <div className="mb-3 text-xs font-medium uppercase tracking-[0.18em] text-white/45">完成</div>
+            <section className="rounded-xl border border-white/10 bg-white/[0.03] p-3 md:rounded-2xl md:p-4">
+              <div className="mb-2 text-xs font-medium uppercase tracking-[0.18em] text-white/45 md:mb-3">完成</div>
               <div className="grid grid-cols-2 gap-2">
                 <button
                   onClick={onClose}
-                  className="rounded-xl bg-white/8 px-3 py-2 text-sm text-white transition hover:bg-white/12"
+                  className="rounded-lg bg-white/8 px-3 py-2 text-sm text-white transition hover:bg-white/12 md:rounded-xl"
                 >
                   放弃修改
                 </button>
                 <button
                   onClick={() => void handleSave()}
-                  className="rounded-xl bg-blue-500 px-3 py-2 text-sm text-white transition hover:bg-blue-600"
+                  className="rounded-lg bg-blue-500 px-3 py-2 text-sm text-white transition hover:bg-blue-600 md:rounded-xl"
                 >
                   {saveMode === 'replace-input' ? '保存替换' : '保存并加入'}
                 </button>

From 77469531be0dc931315424127fceaf20fb3708cb Mon Sep 17 00:00:00 2001
From: XianYuDaXian <xian_yu@live.com>
Date: Mon, 27 Apr 2026 20:22:14 +0800
Subject: [PATCH 05/16] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E5=8F=82=E8=80=83=E5=9B=BE=E5=92=8C=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E5=99=A8=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/InputBar.tsx                  | 124 +++++++++++++---
 src/components/ReferenceImageEditorModal.tsx | 141 ++++++++++++++++++-
 2 files changed, 238 insertions(+), 27 deletions(-)

diff --git a/src/components/InputBar.tsx b/src/components/InputBar.tsx
index 78723522..dae0878c 100644
--- a/src/components/InputBar.tsx
+++ b/src/components/InputBar.tsx
@@ -22,11 +22,21 @@ function ButtonTooltip({ visible, text }: { visible: boolean; text: string }) {
 const API_MAX_IMAGES = 16
 
 function useIsMobile() {
-  const [isMobile, setIsMobile] = useState(window.innerWidth < 640)
+  const getIsMobile = () => {
+    const ua = navigator.userAgent || ''
+    const platform = navigator.platform || ''
+    const isIpadOS = platform === 'MacIntel' && navigator.maxTouchPoints > 1
+    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|Tablet/i.test(ua) || isIpadOS
+  }
+  const [isMobile, setIsMobile] = useState(getIsMobile)
   useEffect(() => {
-    const onResize = () => setIsMobile(window.innerWidth < 640)
+    const onResize = () => setIsMobile(getIsMobile())
     window.addEventListener('resize', onResize)
-    return () => window.removeEventListener('resize', onResize)
+    window.addEventListener('orientationchange', onResize)
+    return () => {
+      window.removeEventListener('resize', onResize)
+      window.removeEventListener('orientationchange', onResize)
+    }
   }, [])
   return isMobile
 }
@@ -42,6 +52,7 @@ export default function InputBar() {
   const settings = useStore((s) => s.settings)
   const setShowSettings = useStore((s) => s.setShowSettings)
   const setLightboxImageId = useStore((s) => s.setLightboxImageId)
+  const setLightboxStartEditor = useStore((s) => s.setLightboxStartEditor)
   const setConfirmDialog = useStore((s) => s.setConfirmDialog)
   const selectedTaskIds = useStore((s) => s.selectedTaskIds)
   const setSelectedTaskIds = useStore((s) => s.setSelectedTaskIds)
@@ -117,6 +128,7 @@ export default function InputBar() {
   const [moderationHintVisible, setModerationHintVisible] = useState(false)
   const [qualityHintVisible, setQualityHintVisible] = useState(false)
   const [mobileCollapsed, setMobileCollapsed] = useState(false)
+  const [selectedInputImageId, setSelectedInputImageId] = useState<string | null>(null)
   const [showSizePicker, setShowSizePicker] = useState(false)
   const handleRef = useRef<HTMLDivElement>(null)
   const dragTouchRef = useRef({ startY: 0, moved: false })
@@ -133,6 +145,26 @@ export default function InputBar() {
   const canSubmit = prompt.trim() && settings.apiKey
   const atImageLimit = inputImages.length >= API_MAX_IMAGES
 
+  useEffect(() => {
+    if (!selectedInputImageId) return
+    if (!inputImages.some((image) => image.id === selectedInputImageId)) {
+      setSelectedInputImageId(null)
+    }
+  }, [inputImages, selectedInputImageId])
+
+  useEffect(() => {
+    if (!isMobile || !selectedInputImageId) return
+
+    const handleOutsidePointer = (event: PointerEvent) => {
+      const target = event.target
+      if (target instanceof Node && imagesRef.current?.contains(target)) return
+      setSelectedInputImageId(null)
+    }
+
+    document.addEventListener('pointerdown', handleOutsidePointer, true)
+    return () => document.removeEventListener('pointerdown', handleOutsidePointer, true)
+  }, [isMobile, selectedInputImageId])
+
   useEffect(() => {
     setOutputCompressionInput(
       params.output_compression == null ? '' : String(params.output_compression),
@@ -445,29 +477,77 @@ export default function InputBar() {
 
   const selectClass = 'px-3 py-1.5 rounded-xl border border-gray-200/60 dark:border-white/[0.08] bg-white/50 dark:bg-white/[0.03] hover:bg-white dark:hover:bg-white/[0.06] text-xs transition-all duration-200 shadow-sm'
 
+  const handleInputImageClick = (imgId: string) => {
+    if (isMobile) {
+      if (selectedInputImageId === imgId) {
+        setLightboxStartEditor(true)
+        setLightboxImageId(imgId, inputImages.map((image) => image.id))
+      } else {
+        setSelectedInputImageId(imgId)
+      }
+      return
+    }
+    setLightboxImageId(imgId, inputImages.map((image) => image.id))
+  }
+
+  const handleRemoveInputImage = (idx: number, imgId: string) => {
+    removeInputImage(idx)
+    if (selectedInputImageId === imgId) {
+      setSelectedInputImageId(null)
+    }
+  }
+
   const renderImageThumbs = () => (
     <div ref={imagesRef}>
       <div className="grid grid-cols-[repeat(auto-fill,52px)] justify-between gap-x-2 gap-y-3 mb-3">
-        {inputImages.map((img, idx) => (
-          <div key={img.id} className="relative group inline-block">
-            <div className="relative w-[52px] h-[52px] rounded-xl overflow-hidden border border-gray-200 dark:border-white/[0.08] shadow-sm cursor-pointer">
-              <img
-                src={img.dataUrl}
-                className="w-full h-full object-cover hover:opacity-90 transition-opacity"
-                onClick={() => setLightboxImageId(img.id, inputImages.map((i) => i.id))}
-                alt=""
-              />
+        {inputImages.map((img, idx) => {
+          const selected = selectedInputImageId === img.id
+          const deleteButtonClass = isMobile
+            ? selected
+              ? 'h-7 w-7 opacity-100'
+              : 'h-7 w-7 pointer-events-none opacity-0'
+            : 'h-[22px] w-[22px] opacity-0 group-hover:opacity-100'
+          return (
+            <div key={img.id} className="relative group inline-block">
+              <button
+                type="button"
+                className={`relative block w-[52px] h-[52px] rounded-xl overflow-hidden border p-0 shadow-sm cursor-pointer transition-all ${
+                  selected
+                    ? 'border-red-400 ring-2 ring-red-400/45'
+                    : 'border-gray-200 dark:border-white/[0.08]'
+                }`}
+                onClick={() => handleInputImageClick(img.id)}
+                aria-pressed={selected}
+                aria-label={selected ? '取消选择参考图' : '选择参考图'}
+              >
+                <img
+                  src={img.dataUrl}
+                  className="w-full h-full object-cover hover:opacity-90 transition-opacity"
+                  alt=""
+                />
+              </button>
+              <button
+                type="button"
+                className={`absolute -top-2 -right-2 flex items-center justify-center rounded-full bg-red-500 text-white shadow-md transition-opacity hover:bg-red-600 ${deleteButtonClass}`}
+                onPointerDown={(event) => {
+                  event.stopPropagation()
+                }}
+                onTouchStart={(event) => {
+                  event.stopPropagation()
+                }}
+                onClick={(event) => {
+                  event.stopPropagation()
+                  handleRemoveInputImage(idx, img.id)
+                }}
+                aria-label="删除参考图"
+              >
+                <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
             </div>
-            <span
-              className="absolute -top-2 -right-2 w-[22px] h-[22px] rounded-full bg-red-500 text-white flex items-center justify-center cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity shadow-md hover:bg-red-600"
-              onClick={() => removeInputImage(idx)}
-            >
-              <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M6 18L18 6M6 6l12 12" />
-              </svg>
-            </span>
-          </div>
-        ))}
+          )
+        })}
 
         {/* 清空全部按钮 */}
         <button
diff --git a/src/components/ReferenceImageEditorModal.tsx b/src/components/ReferenceImageEditorModal.tsx
index e59964f3..9ed54122 100644
--- a/src/components/ReferenceImageEditorModal.tsx
+++ b/src/components/ReferenceImageEditorModal.tsx
@@ -43,6 +43,26 @@ function getMaskShapeTypeFromObject(object: FabricObject | null): MaskShapeType
   return (object as FabricObject & { data?: { shapeType?: MaskShapeType } }).data?.shapeType
 }
 
+function useIsMobileDevice() {
+  const getIsMobileDevice = () => {
+    const ua = navigator.userAgent || ''
+    const platform = navigator.platform || ''
+    const isIpadOS = platform === 'MacIntel' && navigator.maxTouchPoints > 1
+    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|Tablet/i.test(ua) || isIpadOS
+  }
+  const [isMobileDevice, setIsMobileDevice] = useState(getIsMobileDevice)
+  useEffect(() => {
+    const update = () => setIsMobileDevice(getIsMobileDevice())
+    window.addEventListener('resize', update)
+    window.addEventListener('orientationchange', update)
+    return () => {
+      window.removeEventListener('resize', update)
+      window.removeEventListener('orientationchange', update)
+    }
+  }, [])
+  return isMobileDevice
+}
+
 export default function ReferenceImageEditorModal({ imageId, src, saveMode, onClose }: ReferenceImageEditorModalProps) {
   const setLightboxImageId = useStore((s) => s.setLightboxImageId)
   const inputImages = useStore((s) => s.inputImages)
@@ -86,6 +106,7 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
   const [historyState, setHistoryState] = useState({ canUndo: false, canRedo: false })
   const currentImageList = useMemo(() => lightboxImageList.length ? lightboxImageList : inputImages.map((item) => item.id), [inputImages, lightboxImageList])
   const isOpen = true
+  const isMobileDevice = useIsMobileDevice()
 
   useCloseOnEscape(isOpen, onClose)
 
@@ -195,6 +216,81 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
     )
    }, [])
 
+  const resizeStageToViewport = useCallback((options?: { preserveViewport?: boolean; transformObjects?: boolean }) => {
+    const viewport = canvasViewportRef.current
+    const backgroundElement = backgroundCanvasRef.current
+    const canvas = canvasRef.current
+    const image = sourceImageRef.current
+    if (!viewport || !backgroundElement || !canvas || !image) return
+
+    const stageRect = viewport.getBoundingClientRect()
+    const stageWidth = Math.max(320, Math.floor(stageRect.width))
+    const stageHeight = Math.max(320, Math.floor(stageRect.height))
+    const prevDisplaySize = displaySizeRef.current
+    const prevBounds = imageBoundsRef.current
+
+    if (
+      prevDisplaySize.width === stageWidth &&
+      prevDisplaySize.height === stageHeight &&
+      backgroundElement.width === stageWidth &&
+      backgroundElement.height === stageHeight
+    ) {
+      return
+    }
+
+    const imageScale = Math.min(
+      stageWidth / Math.max(1, image.naturalWidth),
+      stageHeight / Math.max(1, image.naturalHeight),
+      1,
+    )
+    const imageDisplayWidth = Math.max(1, Math.round(image.naturalWidth * imageScale))
+    const imageDisplayHeight = Math.max(1, Math.round(image.naturalHeight * imageScale))
+    const imageLeft = Math.max(0, Math.round((stageWidth - imageDisplayWidth) / 2))
+    const imageTop = Math.max(0, Math.round((stageHeight - imageDisplayHeight) / 2))
+    const nextBounds = {
+      left: imageLeft,
+      top: imageTop,
+      width: imageDisplayWidth,
+      height: imageDisplayHeight,
+    }
+
+    if (options?.transformObjects && prevBounds.width > 0 && prevBounds.height > 0) {
+      const scaleX = nextBounds.width / prevBounds.width
+      const scaleY = nextBounds.height / prevBounds.height
+      canvas.getObjects().forEach((object) => {
+        const left = typeof object.left === 'number' ? object.left : 0
+        const top = typeof object.top === 'number' ? object.top : 0
+        object.set({
+          left: nextBounds.left + (left - prevBounds.left) * scaleX,
+          top: nextBounds.top + (top - prevBounds.top) * scaleY,
+          scaleX: (object.scaleX ?? 1) * scaleX,
+          scaleY: (object.scaleY ?? 1) * scaleY,
+        })
+        object.setCoords()
+      })
+      const current = canvas.getActiveObject() ?? null
+      setActiveObject(current)
+      syncTextStyleFromObject(current)
+    }
+
+    displaySizeRef.current = { width: stageWidth, height: stageHeight }
+    imageBoundsRef.current = nextBounds
+    exportMultiplierRef.current = Math.max(1, image.naturalWidth / Math.max(1, imageDisplayWidth))
+
+    backgroundElement.width = stageWidth
+    backgroundElement.height = stageHeight
+    canvas.setDimensions({ width: stageWidth, height: stageHeight })
+    canvas.calcOffset()
+
+    if (!options?.preserveViewport) {
+      zoomRef.current = 1
+      panRef.current = { x: 0, y: 0 }
+    }
+    canvas.setViewportTransform([zoomRef.current, 0, 0, zoomRef.current, panRef.current.x, panRef.current.y])
+    canvas.requestRenderAll()
+    redrawBackground()
+  }, [redrawBackground, syncTextStyleFromObject])
+
   const syncViewportTransform = useCallback(() => {
     const canvas = canvasRef.current
     if (canvas) {
@@ -386,6 +482,27 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
     }
   }, [pushHistory, redrawBackground, src, syncTextStyleFromObject, syncViewportTransform])
 
+  useEffect(() => {
+    const viewport = canvasViewportRef.current
+    if (!viewport) return
+
+    let frame = 0
+    const resize = () => {
+      window.cancelAnimationFrame(frame)
+      frame = window.requestAnimationFrame(() => {
+        resizeStageToViewport({ transformObjects: true })
+      })
+    }
+    const observer = new ResizeObserver(resize)
+    observer.observe(viewport)
+    window.addEventListener('orientationchange', resize)
+    return () => {
+      window.cancelAnimationFrame(frame)
+      observer.disconnect()
+      window.removeEventListener('orientationchange', resize)
+    }
+  }, [resizeStageToViewport])
+
   useEffect(() => {
     refreshBrush()
   }, [refreshBrush])
@@ -493,6 +610,15 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
 
     const onKeyDown = async (event: KeyboardEvent) => {
       if ((event.key === 'Delete' || event.key === 'Backspace') && activeObject) {
+        const target = event.target
+        const isTextInput =
+          target instanceof HTMLInputElement ||
+          target instanceof HTMLTextAreaElement ||
+          (target instanceof HTMLElement && target.isContentEditable)
+        const current = canvasRef.current?.getActiveObject()
+        if (isTextInput || (current instanceof IText && current.isEditing)) {
+          return
+        }
         handleDeleteActiveObject()
         return
       }
@@ -587,9 +713,13 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
 
   const buildMaskShape = useCallback((shapeType: MaskShapeType, left: number, top: number, width: number, height: number) => {
     const fill = `rgba(0, 0, 0, ${clamp(maskOpacity, 0.05, 1)})`
+    const centerLeft = left + width / 2
+    const centerTop = top + height / 2
     const shared = {
-      left,
-      top,
+      left: centerLeft,
+      top: centerTop,
+      originX: 'center' as const,
+      originY: 'center' as const,
       fill,
       cornerStyle: 'circle' as const,
       transparentCorners: false,
@@ -668,6 +798,7 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
       angle,
       fill,
     })
+    replacement.setPositionByOrigin(center, 'center', 'center')
     ;(replacement as FabricObject & { data?: { editorKind: string; shapeType: MaskShapeType } }).data = {
       editorKind: 'mask-region',
       shapeType: nextShapeType,
@@ -814,17 +945,17 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
             <section className="rounded-xl border border-white/10 bg-white/[0.03] p-3 md:rounded-2xl md:p-4">
               <div className="mb-2 text-xs font-medium uppercase tracking-[0.18em] text-white/45 md:mb-3">工具</div>
               <div className="grid grid-cols-2 gap-2">
-                <div className={activeObject ? 'grid grid-cols-2 gap-2 md:block' : ''}>
+                <div className={activeObject && isMobileDevice ? 'grid grid-cols-2 gap-2' : ''}>
                   <button
                     onClick={() => setToolMode('select')}
                     className={`w-full rounded-lg px-3 py-2 text-sm transition md:rounded-xl ${toolMode === 'select' ? 'bg-blue-500 text-white' : 'bg-white/8 text-white hover:bg-white/12'}`}
                   >
                     选择
                   </button>
-                  {activeObject && (
+                  {activeObject && isMobileDevice && (
                     <button
                       onClick={handleDeleteActiveObject}
-                      className="w-full rounded-lg bg-red-500/90 px-3 py-2 text-sm text-white transition hover:bg-red-500 md:hidden"
+                      className="w-full rounded-lg bg-red-500/90 px-3 py-2 text-sm text-white transition hover:bg-red-500"
                     >
                       删除
                     </button>

From 9bd7c3c08db258c03d76e02daaa69b916b85cbfc Mon Sep 17 00:00:00 2001
From: XianYuDaXian <xian_yu@live.com>
Date: Mon, 27 Apr 2026 21:08:19 +0800
Subject: [PATCH 06/16] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E4=B8=BB?=
 =?UTF-8?q?=E5=9B=BE=E9=80=89=E6=8B=A9=E4=B8=8E=E7=BF=BB=E8=BD=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ReferenceImageEditorModal.tsx | 178 ++++++++++++++++---
 1 file changed, 151 insertions(+), 27 deletions(-)

diff --git a/src/components/ReferenceImageEditorModal.tsx b/src/components/ReferenceImageEditorModal.tsx
index 9ed54122..41ba9faa 100644
--- a/src/components/ReferenceImageEditorModal.tsx
+++ b/src/components/ReferenceImageEditorModal.tsx
@@ -21,6 +21,12 @@ interface TextStyleState {
   fontStyle: 'normal' | 'italic'
 }
 
+type BaseImageData = {
+  editorKind: 'base-image'
+  flipX: boolean
+  flipY: boolean
+}
+
 const DEFAULT_TEXT_STYLE: TextStyleState = {
   text: '输入文字',
   fill: '#ffffff',
@@ -38,6 +44,11 @@ function getEditorKind(object: FabricObject | null): string | undefined {
   return (object as FabricObject & { data?: { editorKind?: string } }).data?.editorKind
 }
 
+function getBaseImageData(object: FabricObject | null): BaseImageData | undefined {
+  if (getEditorKind(object) !== 'base-image') return undefined
+  return (object as FabricObject & { data?: BaseImageData }).data
+}
+
 function getMaskShapeTypeFromObject(object: FabricObject | null): MaskShapeType | undefined {
   if (!object || typeof object !== 'object') return undefined
   return (object as FabricObject & { data?: { shapeType?: MaskShapeType } }).data?.shapeType
@@ -81,6 +92,7 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
   const sourceSizeRef = useRef({ width: 0, height: 0 })
   const imageBoundsRef = useRef({ left: 0, top: 0, width: 0, height: 0 })
   const exportMultiplierRef = useRef(1)
+  const baseFlipRef = useRef({ x: false, y: false })
   const zoomRef = useRef(1)
   const panRef = useRef({ x: 0, y: 0 })
   const panningRef = useRef(false)
@@ -110,6 +122,31 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
 
   useCloseOnEscape(isOpen, onClose)
 
+  function redrawBackgroundNow() {
+    const canvas = backgroundCanvasRef.current
+    const image = sourceImageRef.current
+    if (!canvas || !image) return
+
+    const context = canvas.getContext('2d')
+    if (!context) return
+
+    context.setTransform(1, 0, 0, 1, 0, 0)
+    context.clearRect(0, 0, canvas.width, canvas.height)
+    context.fillStyle = '#11161d'
+    context.fillRect(0, 0, canvas.width, canvas.height)
+    context.imageSmoothingEnabled = true
+    context.imageSmoothingQuality = 'high'
+    context.setTransform(zoomRef.current, 0, 0, zoomRef.current, panRef.current.x, panRef.current.y)
+    const bounds = imageBoundsRef.current
+    if (baseFlipRef.current.x || baseFlipRef.current.y) {
+      context.translate(bounds.left + bounds.width / 2, bounds.top + bounds.height / 2)
+      context.scale(baseFlipRef.current.x ? -1 : 1, baseFlipRef.current.y ? -1 : 1)
+      context.drawImage(image, -bounds.width / 2, -bounds.height / 2, bounds.width, bounds.height)
+      return
+    }
+    context.drawImage(image, bounds.left, bounds.top, bounds.width, bounds.height)
+  }
+
   useEffect(() => {
     toolModeRef.current = toolMode
   }, [toolMode])
@@ -150,7 +187,7 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
     const canvas = canvasRef.current
     if (!canvas || suppressHistoryRef.current) return
 
-    const serialized = JSON.stringify(canvas.toJSON())
+    const serialized = JSON.stringify(canvas.toJSON(['data']))
     if (historyRef.current[historyIndexRef.current] === serialized) {
       updateHistoryFlags()
       return
@@ -173,6 +210,10 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
     suppressHistoryRef.current = false
     historyIndexRef.current = nextIndex
     const currentActive = canvas.getActiveObject() ?? null
+    const baseProxy = canvas.getObjects().find((object) => getEditorKind(object) === 'base-image') ?? null
+    const baseData = getBaseImageData(baseProxy)
+    baseFlipRef.current = { x: Boolean(baseData?.flipX), y: Boolean(baseData?.flipY) }
+    redrawBackgroundNow()
     setActiveObject(currentActive)
     syncTextStyleFromObject(currentActive)
     updateHistoryFlags()
@@ -193,27 +234,7 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
   }, [maskOpacity, maskWidth, toolMode])
 
   const redrawBackground = useCallback(() => {
-    const canvas = backgroundCanvasRef.current
-    const image = sourceImageRef.current
-    if (!canvas || !image) return
-
-    const context = canvas.getContext('2d')
-    if (!context) return
-
-    context.setTransform(1, 0, 0, 1, 0, 0)
-    context.clearRect(0, 0, canvas.width, canvas.height)
-    context.fillStyle = '#11161d'
-    context.fillRect(0, 0, canvas.width, canvas.height)
-    context.imageSmoothingEnabled = true
-    context.imageSmoothingQuality = 'high'
-    context.setTransform(zoomRef.current, 0, 0, zoomRef.current, panRef.current.x, panRef.current.y)
-    context.drawImage(
-      image,
-      imageBoundsRef.current.left,
-      imageBoundsRef.current.top,
-      imageBoundsRef.current.width,
-      imageBoundsRef.current.height,
-    )
+    redrawBackgroundNow()
    }, [])
 
   const resizeStageToViewport = useCallback((options?: { preserveViewport?: boolean; transformObjects?: boolean }) => {
@@ -300,6 +321,48 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
     redrawBackground()
   }, [redrawBackground])
 
+  const createBaseImageProxy = useCallback(() => {
+    const bounds = imageBoundsRef.current
+    const proxy = new Rect({
+      left: bounds.left + bounds.width / 2,
+      top: bounds.top + bounds.height / 2,
+      width: bounds.width,
+      height: bounds.height,
+      originX: 'center',
+      originY: 'center',
+      fill: 'rgba(59, 130, 246, 0.001)',
+      stroke: 'rgba(59, 130, 246, 0)',
+      strokeWidth: 0,
+      selectable: true,
+      evented: true,
+      hasControls: false,
+      lockMovementX: true,
+      lockMovementY: true,
+      lockRotation: true,
+      lockScalingX: true,
+      lockScalingY: true,
+      hoverCursor: 'pointer',
+    })
+    ;(proxy as FabricObject & { data?: BaseImageData }).data = {
+      editorKind: 'base-image',
+      flipX: baseFlipRef.current.x,
+      flipY: baseFlipRef.current.y,
+    }
+    return proxy
+  }, [])
+
+  const syncBaseProxyData = useCallback(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+    const proxy = canvas.getObjects().find((object) => getEditorKind(object) === 'base-image') as FabricObject | undefined
+    if (!proxy) return
+    ;(proxy as FabricObject & { data?: BaseImageData }).data = {
+      editorKind: 'base-image',
+      flipX: baseFlipRef.current.x,
+      flipY: baseFlipRef.current.y,
+    }
+  }, [])
+
   const addImageLayer = useCallback(async (dataUrl: string) => {
     const canvas = canvasRef.current
     if (!canvas) return
@@ -390,6 +453,7 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
         height: stageHeight,
       })
       canvas.calcOffset()
+      canvas.add(createBaseImageProxy())
       redrawBackground()
 
       canvas.on('mouse:wheel', (event) => {
@@ -480,7 +544,7 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
       canvasRef.current?.dispose()
       canvasRef.current = null
     }
-  }, [pushHistory, redrawBackground, src, syncTextStyleFromObject, syncViewportTransform])
+  }, [createBaseImageProxy, pushHistory, redrawBackground, src, syncTextStyleFromObject, syncViewportTransform])
 
   useEffect(() => {
     const viewport = canvasViewportRef.current
@@ -587,7 +651,13 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
 
     const selection = current as FabricObject & { getObjects?: () => FabricObject[] }
     if (typeof selection.getObjects === 'function') {
-      selection.getObjects().forEach((object) => canvas.remove(object))
+      selection.getObjects().forEach((object) => {
+        if (getEditorKind(object) !== 'base-image') {
+          canvas.remove(object)
+        }
+      })
+    } else if (getEditorKind(current) === 'base-image') {
+      return
     } else {
       canvas.remove(current)
     }
@@ -811,6 +881,30 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
     pushHistory()
   }
 
+  const handleFlipActiveObject = (axis: 'x' | 'y') => {
+    const canvas = canvasRef.current
+    const current = canvas?.getActiveObject()
+    if (!canvas || !current) return
+
+    if (getEditorKind(current) === 'base-image') {
+      if (axis === 'x') {
+        baseFlipRef.current = { ...baseFlipRef.current, x: !baseFlipRef.current.x }
+      } else {
+        baseFlipRef.current = { ...baseFlipRef.current, y: !baseFlipRef.current.y }
+      }
+      syncBaseProxyData()
+      redrawBackground()
+      canvas.requestRenderAll()
+      pushHistory()
+      return
+    }
+
+    current.set(axis === 'x' ? { flipX: !current.flipX } : { flipY: !current.flipY })
+    current.setCoords()
+    canvas.requestRenderAll()
+    pushHistory()
+  }
+
   const handleFileSelect = async (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0]
     if (!file) return
@@ -834,6 +928,11 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
     if (!canvas || !sourceImage) return
 
     const previousViewport = canvas.viewportTransform ? [...canvas.viewportTransform] : null
+    const baseProxy = canvas.getObjects().find((object) => getEditorKind(object) === 'base-image')
+    const previousBaseVisible = baseProxy?.visible
+    if (baseProxy) {
+      baseProxy.set({ visible: false })
+    }
     canvas.setViewportTransform([1, 0, 0, 1, 0, 0])
     canvas.renderAll()
     const overlayDataUrl = canvas.toDataURL({
@@ -844,6 +943,9 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
       height: imageBoundsRef.current.height,
       multiplier: exportMultiplierRef.current,
     })
+    if (baseProxy) {
+      baseProxy.set({ visible: previousBaseVisible ?? true })
+    }
     if (previousViewport) {
       canvas.setViewportTransform(previousViewport as [number, number, number, number, number, number])
       canvas.renderAll()
@@ -857,7 +959,14 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
     if (!exportContext) return
     exportContext.imageSmoothingEnabled = true
     exportContext.imageSmoothingQuality = 'high'
-    exportContext.drawImage(sourceImage, 0, 0, exportCanvas.width, exportCanvas.height)
+    if (baseFlipRef.current.x || baseFlipRef.current.y) {
+      exportContext.translate(exportCanvas.width / 2, exportCanvas.height / 2)
+      exportContext.scale(baseFlipRef.current.x ? -1 : 1, baseFlipRef.current.y ? -1 : 1)
+      exportContext.drawImage(sourceImage, -exportCanvas.width / 2, -exportCanvas.height / 2, exportCanvas.width, exportCanvas.height)
+      exportContext.setTransform(1, 0, 0, 1, 0, 0)
+    } else {
+      exportContext.drawImage(sourceImage, 0, 0, exportCanvas.width, exportCanvas.height)
+    }
     exportContext.drawImage(overlayImage, 0, 0, exportCanvas.width, exportCanvas.height)
     const editedDataUrl = exportCanvas.toDataURL('image/png')
 
@@ -876,6 +985,7 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
 
   const isTextSelected = activeObject instanceof IText
   const activeEditorKind = getEditorKind(activeObject)
+  const canDeleteActiveObject = Boolean(activeObject && activeEditorKind !== 'base-image')
   const showMaskSettings = toolMode === 'mask' || activeEditorKind === 'mask-region' || activeEditorKind === 'mask-brush'
   const showTextSettings = isTextSelected
   const showShapeSelector = activeEditorKind === 'mask-region'
@@ -945,14 +1055,14 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
             <section className="rounded-xl border border-white/10 bg-white/[0.03] p-3 md:rounded-2xl md:p-4">
               <div className="mb-2 text-xs font-medium uppercase tracking-[0.18em] text-white/45 md:mb-3">工具</div>
               <div className="grid grid-cols-2 gap-2">
-                <div className={activeObject && isMobileDevice ? 'grid grid-cols-2 gap-2' : ''}>
+                <div className={canDeleteActiveObject && isMobileDevice ? 'grid grid-cols-2 gap-2' : ''}>
                   <button
                     onClick={() => setToolMode('select')}
                     className={`w-full rounded-lg px-3 py-2 text-sm transition md:rounded-xl ${toolMode === 'select' ? 'bg-blue-500 text-white' : 'bg-white/8 text-white hover:bg-white/12'}`}
                   >
                     选择
                   </button>
-                  {activeObject && isMobileDevice && (
+                  {canDeleteActiveObject && isMobileDevice && (
                     <button
                       onClick={handleDeleteActiveObject}
                       className="w-full rounded-lg bg-red-500/90 px-3 py-2 text-sm text-white transition hover:bg-red-500"
@@ -967,6 +1077,20 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
                 >
                   涂抹遮罩
                 </button>
+                <button
+                  onClick={() => handleFlipActiveObject('x')}
+                  disabled={!activeObject}
+                  className="rounded-lg bg-white/8 px-3 py-2 text-sm text-white transition hover:bg-white/12 disabled:cursor-not-allowed disabled:opacity-40 md:rounded-xl"
+                >
+                  水平翻转
+                </button>
+                <button
+                  onClick={() => handleFlipActiveObject('y')}
+                  disabled={!activeObject}
+                  className="rounded-lg bg-white/8 px-3 py-2 text-sm text-white transition hover:bg-white/12 disabled:cursor-not-allowed disabled:opacity-40 md:rounded-xl"
+                >
+                  垂直翻转
+                </button>
                 <button
                   onClick={handleAddMaskRegion}
                   className="rounded-lg bg-white/8 px-3 py-2 text-sm text-white transition hover:bg-white/12 md:rounded-xl"

From 0dda01e56697e0e92e3cc5341c9f0d845b20534d Mon Sep 17 00:00:00 2001
From: XianYuDaXian <xian_yu@live.com>
Date: Mon, 27 Apr 2026 21:24:12 +0800
Subject: [PATCH 07/16] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20Docker=20?=
 =?UTF-8?q?=E6=9E=84=E5=BB=BA=E4=B8=AD=E7=9A=84=20fabric=20=E7=B1=BB?=
 =?UTF-8?q?=E5=9E=8B=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ReferenceImageEditorModal.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/ReferenceImageEditorModal.tsx b/src/components/ReferenceImageEditorModal.tsx
index 41ba9faa..d85fc2bf 100644
--- a/src/components/ReferenceImageEditorModal.tsx
+++ b/src/components/ReferenceImageEditorModal.tsx
@@ -187,7 +187,9 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
     const canvas = canvasRef.current
     if (!canvas || suppressHistoryRef.current) return
 
-    const serialized = JSON.stringify(canvas.toJSON(['data']))
+    const serialized = JSON.stringify(
+      (canvas as Canvas & { toJSON: (propertiesToInclude?: string[]) => unknown }).toJSON(['data']),
+    )
     if (historyRef.current[historyIndexRef.current] === serialized) {
       updateHistoryFlags()
       return

From 0cb512c24effec87a1e790568b12093c3814b20d Mon Sep 17 00:00:00 2001
From: XianYuDaXian <xian_yu@live.com>
Date: Tue, 28 Apr 2026 10:32:05 +0800
Subject: [PATCH 08/16] =?UTF-8?q?feat:=20=E5=A2=9E=E5=BC=BA=20WebDAV=20?=
 =?UTF-8?q?=E8=87=AA=E5=8A=A8=E5=90=8C=E6=AD=A5=E6=A3=80=E6=B5=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                      |  42 +++++++++-
 src/components/SettingsModal.tsx |   5 +-
 src/lib/webdavSync.ts            | 136 ++++++++++++++++++++++++++++---
 3 files changed, 170 insertions(+), 13 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 6a4c2f2a..77e839d4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -13,7 +13,7 @@ import SettingsModal from './components/SettingsModal'
 import ConfirmDialog from './components/ConfirmDialog'
 import Toast from './components/Toast'
 import ImageContextMenu from './components/ImageContextMenu'
-import { syncWebDavOnLaunch } from './lib/webdavSync'
+import { isApplyingWebDavSnapshot, scheduleWebDavSync, setupWebDavAutoSync, syncWebDavOnLaunch } from './lib/webdavSync'
 
 export default function App() {
   const setSettings = useStore((s) => s.setSettings)
@@ -54,10 +54,50 @@ export default function App() {
       window.history.replaceState(null, '', nextUrl)
     }
 
+    let disposed = false
+    let unsubscribeStore: (() => void) | null = null
+    let cleanupAutoSync: (() => void) | null = null
+
     void (async () => {
       await initStore()
       await syncWebDavOnLaunch()
+
+      if (disposed) return
+
+      cleanupAutoSync = setupWebDavAutoSync()
+      unsubscribeStore = useStore.subscribe((state, prevState) => {
+        if (isApplyingWebDavSnapshot()) return
+        if (state.settings.storageMode !== 'webdav') return
+        if (!state.settings.webdav.url.trim()) return
+
+        const tasksChanged = state.tasks !== prevState.tasks
+        const settingsChanged =
+          state.settings !== prevState.settings &&
+          (
+            state.settings.baseUrl !== prevState.settings.baseUrl ||
+            state.settings.apiKey !== prevState.settings.apiKey ||
+            state.settings.model !== prevState.settings.model ||
+            state.settings.timeout !== prevState.settings.timeout ||
+            state.settings.apiMode !== prevState.settings.apiMode ||
+            state.settings.codexCli !== prevState.settings.codexCli ||
+            state.settings.storageMode !== prevState.settings.storageMode ||
+            state.settings.webdav.url !== prevState.settings.webdav.url ||
+            state.settings.webdav.username !== prevState.settings.webdav.username ||
+            state.settings.webdav.password !== prevState.settings.webdav.password ||
+            state.settings.webdav.syncOnStartup !== prevState.settings.webdav.syncOnStartup
+          )
+
+        if (tasksChanged || settingsChanged) {
+          scheduleWebDavSync()
+        }
+      })
     })()
+
+    return () => {
+      disposed = true
+      unsubscribeStore?.()
+      cleanupAutoSync?.()
+    }
   }, [setSettings])
 
   useEffect(() => {
diff --git a/src/components/SettingsModal.tsx b/src/components/SettingsModal.tsx
index 675eeead..96f95f10 100644
--- a/src/components/SettingsModal.tsx
+++ b/src/components/SettingsModal.tsx
@@ -227,7 +227,7 @@ export default function SettingsModal() {
                   className="w-full rounded-xl border border-gray-200/70 bg-white/60 px-3 py-2 text-sm text-gray-700 outline-none transition focus:border-blue-300 dark:border-white/[0.08] dark:bg-white/[0.03] dark:text-gray-200 dark:focus:border-blue-500/50"
                 />
                 <div className="mt-1 text-[10px] text-gray-400 dark:text-gray-500">
-                  选择 WebDAV 后，设置和图片快照会按远端地址同步；本地仍保留一份缓存。
+                  选择 WebDAV 后，设置和图片快照会按远端地址同步；本地仍保留一份缓存。页面回到前台、重新联网，以及停留期间会自动检测并补同步。
                 </div>
               </label>
 
@@ -319,6 +319,9 @@ export default function SettingsModal() {
                     />
                     启动时自动同步
                   </label>
+                  <div className="-mt-2 text-[10px] text-gray-400 dark:text-gray-500">
+                    开启后，首次打开页面会自动同步；后续本地生成、删除、导入等变更会延迟自动推送，前台页面也会定时检查远端更新。
+                  </div>
 
                   <div className="flex gap-2">
                     <button
diff --git a/src/lib/webdavSync.ts b/src/lib/webdavSync.ts
index 9bbe3eeb..d141b3f1 100644
--- a/src/lib/webdavSync.ts
+++ b/src/lib/webdavSync.ts
@@ -12,10 +12,83 @@ import {
 } from './snapshot'
 
 let syncInFlight: Promise<void> | null = null
+let backgroundSyncTimer: ReturnType<typeof window.setTimeout> | null = null
+let applyingSnapshotDepth = 0
+let lastBackgroundSyncStartedAt = 0
+let lastBackgroundErrorMessage = ''
+let lastBackgroundErrorAt = 0
 const MANIFEST_FILE_NAME = 'manifest.json'
 const TEST_FILE_PREFIX = '.gpt-image-playground-test-'
+const BACKGROUND_SYNC_DEBOUNCE_MS = 2500
+const BACKGROUND_SYNC_INTERVAL_MS = 30000
+const BACKGROUND_SYNC_MIN_GAP_MS = 8000
 
 export async function syncWithWebDav() {
+  return runWebDavSync()
+}
+
+export async function syncWithWebDavSilently() {
+  return runWebDavSync({ silentSuccess: true, silentInfo: true })
+}
+
+export function scheduleWebDavSync(delayMs = BACKGROUND_SYNC_DEBOUNCE_MS) {
+  if (typeof window === 'undefined') return
+  clearBackgroundSyncTimer()
+  backgroundSyncTimer = window.setTimeout(() => {
+    backgroundSyncTimer = null
+    void triggerBackgroundSync()
+  }, Math.max(0, delayMs))
+}
+
+export function setupWebDavAutoSync() {
+  if (typeof window === 'undefined') {
+    return () => {}
+  }
+
+  const handleVisibilityChange = () => {
+    if (document.visibilityState === 'visible') {
+      void triggerBackgroundSync(true)
+    }
+  }
+
+  const handleFocus = () => {
+    void triggerBackgroundSync(true)
+  }
+
+  const handleOnline = () => {
+    void triggerBackgroundSync(true)
+  }
+
+  const handlePageShow = () => {
+    void triggerBackgroundSync(true)
+  }
+
+  document.addEventListener('visibilitychange', handleVisibilityChange)
+  window.addEventListener('focus', handleFocus)
+  window.addEventListener('online', handleOnline)
+  window.addEventListener('pageshow', handlePageShow)
+
+  const intervalId = window.setInterval(() => {
+    if (document.visibilityState !== 'visible') return
+    if (typeof navigator !== 'undefined' && 'onLine' in navigator && !navigator.onLine) return
+    void triggerBackgroundSync()
+  }, BACKGROUND_SYNC_INTERVAL_MS)
+
+  return () => {
+    clearBackgroundSyncTimer()
+    document.removeEventListener('visibilitychange', handleVisibilityChange)
+    window.removeEventListener('focus', handleFocus)
+    window.removeEventListener('online', handleOnline)
+    window.removeEventListener('pageshow', handlePageShow)
+    window.clearInterval(intervalId)
+  }
+}
+
+export function isApplyingWebDavSnapshot() {
+  return applyingSnapshotDepth > 0
+}
+
+async function runWebDavSync(options: { silentSuccess?: boolean; silentInfo?: boolean } = {}) {
   if (syncInFlight) return syncInFlight
 
   syncInFlight = (async () => {
@@ -23,7 +96,9 @@ export async function syncWithWebDav() {
     const webdav = settings.webdav
 
     if (settings.storageMode !== 'webdav') {
-      showToast('当前是本地存储模式，无需同步', 'info')
+      if (!options.silentInfo) {
+        showToast('当前是本地存储模式，无需同步', 'info')
+      }
       return
     }
 
@@ -39,15 +114,22 @@ export async function syncWithWebDav() {
     const files = snapshotToDirectoryFiles(mergedSnapshot)
 
     await uploadSnapshotDirectory(rootUrl, webdav.username, webdav.password, manifest, files, remoteSnapshot)
-    await replaceLocalData(mergedSnapshot)
-    replaceSyncTombstones({
-      deletedTaskIds: mergedSnapshot.deletedTaskIds,
-      deletedImageIds: mergedSnapshot.deletedImageIds,
-    })
-    primeImageCache(mergedSnapshot.images)
-    setSettings(mergedSnapshot.settings)
-    setTasks(sortTasksForDisplay(mergedSnapshot.tasks))
-    showToast(remoteSnapshot ? '已与 WebDAV 目录同步' : '已写入 WebDAV 目录', 'success')
+    applyingSnapshotDepth++
+    try {
+      await replaceLocalData(mergedSnapshot)
+      replaceSyncTombstones({
+        deletedTaskIds: mergedSnapshot.deletedTaskIds,
+        deletedImageIds: mergedSnapshot.deletedImageIds,
+      })
+      primeImageCache(mergedSnapshot.images)
+      setSettings(mergedSnapshot.settings)
+      setTasks(sortTasksForDisplay(mergedSnapshot.tasks))
+    } finally {
+      applyingSnapshotDepth--
+    }
+    if (!options.silentSuccess) {
+      showToast(remoteSnapshot ? '已与 WebDAV 目录同步' : '已写入 WebDAV 目录', 'success')
+    }
   })()
 
   try {
@@ -62,7 +144,7 @@ export async function syncWebDavOnLaunch() {
   if (settings.storageMode !== 'webdav' || !settings.webdav.syncOnStartup) return
 
   try {
-    await syncWithWebDav()
+    await syncWithWebDavSilently()
   } catch (err) {
     showToast(formatWebDavError('WebDAV 启动同步失败', err), 'error')
   }
@@ -120,6 +202,38 @@ function buildAuthHeaders(username: string, password: string) {
   return headers
 }
 
+function clearBackgroundSyncTimer() {
+  if (backgroundSyncTimer != null) {
+    window.clearTimeout(backgroundSyncTimer)
+    backgroundSyncTimer = null
+  }
+}
+
+async function triggerBackgroundSync(force = false) {
+  const { settings } = useStore.getState()
+  if (settings.storageMode !== 'webdav') return
+  if (!settings.webdav.url.trim()) return
+  if (typeof navigator !== 'undefined' && 'onLine' in navigator && !navigator.onLine) return
+
+  const now = Date.now()
+  if (!force && now - lastBackgroundSyncStartedAt < BACKGROUND_SYNC_MIN_GAP_MS) {
+    return
+  }
+
+  lastBackgroundSyncStartedAt = now
+  try {
+    await syncWithWebDavSilently()
+  } catch (err) {
+    const message = formatWebDavError('WebDAV 自动同步失败', err)
+    const now = Date.now()
+    if (message !== lastBackgroundErrorMessage || now - lastBackgroundErrorAt > BACKGROUND_SYNC_INTERVAL_MS) {
+      lastBackgroundErrorMessage = message
+      lastBackgroundErrorAt = now
+      useStore.getState().showToast(message, 'error')
+    }
+  }
+}
+
 async function readRemoteSnapshot(rootUrl: string, username: string, password: string) {
   const manifestUrl = resolveRemoteUrl(rootUrl, MANIFEST_FILE_NAME)
   const response = await fetch(manifestUrl, {

From f0bb5647624772ec481c493bac93ed7c001386aa Mon Sep 17 00:00:00 2001
From: XianYuDaXian <xian_yu@live.com>
Date: Tue, 28 Apr 2026 10:41:02 +0800
Subject: [PATCH 09/16] =?UTF-8?q?ci:=20=E8=B7=B3=E8=BF=87=20arm64=20Docker?=
 =?UTF-8?q?=20=E6=9E=84=E5=BB=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/docker.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/docker.yml b/.github/workflows/docker.yml
index b32791ca..f433cb44 100644
--- a/.github/workflows/docker.yml
+++ b/.github/workflows/docker.yml
@@ -39,7 +39,7 @@ jobs:
         with:
           context: .
           file: deploy/Dockerfile
-          platforms: linux/amd64,linux/arm64
+          platforms: linux/amd64
           push: true
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}

From 9f1106d341e8fb7b814f09e8acbbd1b31532d526 Mon Sep 17 00:00:00 2001
From: XianYuDaXian <xian_yu@live.com>
Date: Tue, 28 Apr 2026 11:17:40 +0800
Subject: [PATCH 10/16] =?UTF-8?q?feat:=20=E5=A2=9E=E5=BC=BA=20WebDAV=20?=
 =?UTF-8?q?=E6=B8=85=E7=A9=BA=E4=BF=9D=E6=8A=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SettingsModal.tsx |  50 +++++-
 src/lib/webdavSync.ts            | 251 ++++++++++++++++++++++++++++++-
 src/store.ts                     |   6 +-
 3 files changed, 300 insertions(+), 7 deletions(-)

diff --git a/src/components/SettingsModal.tsx b/src/components/SettingsModal.tsx
index 96f95f10..a3ab8041 100644
--- a/src/components/SettingsModal.tsx
+++ b/src/components/SettingsModal.tsx
@@ -3,7 +3,7 @@ import { normalizeBaseUrl } from '../lib/api'
 import { useStore, exportData, importData, clearAllData } from '../store'
 import { DEFAULT_IMAGES_MODEL, DEFAULT_RESPONSES_MODEL, DEFAULT_SETTINGS, type AppSettings } from '../types'
 import { useCloseOnEscape } from '../hooks/useCloseOnEscape'
-import { syncWithWebDav, testWebDavDirectory } from '../lib/webdavSync'
+import { clearWebDavDirectory, isWebDavRemoteResetError, syncWithWebDav, testWebDavDirectory } from '../lib/webdavSync'
 import Select from './Select'
 
 export default function SettingsModal() {
@@ -82,6 +82,25 @@ export default function SettingsModal() {
     try {
       await syncWithWebDav()
     } catch (err) {
+      if (isWebDavRemoteResetError(err)) {
+        setConfirmDialog({
+          title: '重建远端 WebDAV 数据',
+          message: '检测到远端 WebDAV 目录已经为空。\n\n这通常表示你手动清空了远端目录。为避免旧客户端自动把本地历史数据重新灌回去，本次同步已被拦截。\n\n如果你确认要用当前设备的本地数据重新初始化远端，请继续。',
+          confirmText: '确认重建',
+          action: async () => {
+            try {
+              await syncWithWebDav({ allowRemoteReinitialize: true })
+            } catch (nextErr) {
+              useStore.getState().showToast(
+                `WebDAV 同步失败：${nextErr instanceof Error ? nextErr.message : String(nextErr)}`,
+                'error',
+              )
+            }
+          },
+          messageAlign: 'left',
+        })
+        return
+      }
       useStore.getState().showToast(
         `WebDAV 同步失败：${err instanceof Error ? err.message : String(err)}`,
         'error',
@@ -254,7 +273,7 @@ export default function SettingsModal() {
                       className="w-full rounded-xl border border-gray-200/70 bg-white/70 px-3 py-2 text-sm text-gray-700 outline-none transition focus:border-blue-300 dark:border-white/[0.08] dark:bg-white/[0.03] dark:text-gray-200 dark:focus:border-blue-500/50"
                     />
                     <div className="mt-1 text-[10px] text-gray-400 dark:text-gray-500">
-                      这里填写 WebDAV 目录地址，程序会在其下读写 <code className="bg-gray-100 dark:bg-white/[0.06] px-1 py-0.5 rounded">manifest.json</code> 和图片文件。
+                      这里填写 WebDAV 目录地址，程序会在其下读写 <code className="bg-gray-100 dark:bg-white/[0.06] px-1 py-0.5 rounded">manifest.json</code>、<code className="bg-gray-100 dark:bg-white/[0.06] px-1 py-0.5 rounded">sync-state.json</code> 和图片文件。
                     </div>
                   </label>
 
@@ -320,7 +339,7 @@ export default function SettingsModal() {
                     启动时自动同步
                   </label>
                   <div className="-mt-2 text-[10px] text-gray-400 dark:text-gray-500">
-                    开启后，首次打开页面会自动同步；后续本地生成、删除、导入等变更会延迟自动推送，前台页面也会定时检查远端更新。
+                    开启后，首次打开页面会自动同步；后续本地生成、删除、导入等变更会延迟自动推送，前台页面也会定时检查远端更新。若远端目录被手动清空，程序不会自动回灌，需手动确认重建。
                   </div>
 
                   <div className="flex gap-2">
@@ -452,6 +471,31 @@ export default function SettingsModal() {
               >
                 清空所有数据
               </button>
+              <button
+                onClick={() =>
+                  setConfirmDialog({
+                    title: '清空所有数据并清空 WebDAV',
+                    message: '确定要清空当前设备的所有任务记录和图片数据，并删除远端 WebDAV 目录中的 manifest、sync-state 和图片文件吗？\n\n此操作不可恢复，且会影响连接到同一 WebDAV 目录的其他设备。',
+                    confirmText: '确认清空',
+                    action: async () => {
+                      try {
+                        await clearWebDavDirectory()
+                        await clearAllData({ silent: true })
+                        useStore.getState().showToast('本地与 WebDAV 数据已清空', 'success')
+                      } catch (err) {
+                        useStore.getState().showToast(
+                          `清空 WebDAV 失败：${err instanceof Error ? err.message : String(err)}`,
+                          'error',
+                        )
+                      }
+                    },
+                    messageAlign: 'left',
+                  })
+                }
+                className="w-full rounded-xl border border-red-300/80 bg-red-100/70 px-4 py-2.5 text-sm text-red-600 transition hover:bg-red-200/80 dark:border-red-500/30 dark:bg-red-500/15 dark:text-red-300 dark:hover:bg-red-500/25"
+              >
+                清空所有数据并清空 WebDAV
+              </button>
             </div>
           </section>
         </div>
diff --git a/src/lib/webdavSync.ts b/src/lib/webdavSync.ts
index d141b3f1..65a0fdde 100644
--- a/src/lib/webdavSync.ts
+++ b/src/lib/webdavSync.ts
@@ -11,6 +11,8 @@ import {
   sortTasksForDisplay,
 } from './snapshot'
 
+const REMOTE_STATE_FILE_NAME = 'sync-state.json'
+const LOCAL_REMOTE_STATE_STORAGE_KEY = 'gpt-image-playground-webdav-remote-state'
 let syncInFlight: Promise<void> | null = null
 let backgroundSyncTimer: ReturnType<typeof window.setTimeout> | null = null
 let applyingSnapshotDepth = 0
@@ -23,14 +25,40 @@ const BACKGROUND_SYNC_DEBOUNCE_MS = 2500
 const BACKGROUND_SYNC_INTERVAL_MS = 30000
 const BACKGROUND_SYNC_MIN_GAP_MS = 8000
 
-export async function syncWithWebDav() {
-  return runWebDavSync()
+interface WebDavRemoteState {
+  remoteId: string
+  generation: number
+  initializedAt: number
+  updatedAt: number
+}
+
+interface LocalRemoteStateRecord extends WebDavRemoteState {
+  rootUrl: string
+  lastSeenAt: number
+}
+
+export class WebDavRemoteResetError extends Error {
+  rootUrl: string
+
+  constructor(message: string, rootUrl: string) {
+    super(message)
+    this.name = 'WebDavRemoteResetError'
+    this.rootUrl = rootUrl
+  }
+}
+
+export async function syncWithWebDav(options: { allowRemoteReinitialize?: boolean } = {}) {
+  return runWebDavSync(options)
 }
 
 export async function syncWithWebDavSilently() {
   return runWebDavSync({ silentSuccess: true, silentInfo: true })
 }
 
+export function isWebDavRemoteResetError(err: unknown): err is WebDavRemoteResetError {
+  return err instanceof WebDavRemoteResetError
+}
+
 export function scheduleWebDavSync(delayMs = BACKGROUND_SYNC_DEBOUNCE_MS) {
   if (typeof window === 'undefined') return
   clearBackgroundSyncTimer()
@@ -108,12 +136,27 @@ async function runWebDavSync(options: { silentSuccess?: boolean; silentInfo?: bo
 
     const rootUrl = resolveWebDavRoot(webdav.url.trim())
     const localSnapshot = await buildLocalSnapshot(settings)
+    const localRemoteState = readLocalRemoteState(rootUrl)
+    const remoteState = await readRemoteState(rootUrl, webdav.username, webdav.password)
     const remoteSnapshot = await readRemoteSnapshot(rootUrl, webdav.username, webdav.password)
+    if (!remoteSnapshot && hasMeaningfulSnapshotData(localSnapshot) && !options.allowRemoteReinitialize) {
+      throw new WebDavRemoteResetError('检测到远端 WebDAV 目录已被清空，已阻止自动用本地数据重新写回。若确认要重建远端，请在设置中再次手动同步并确认。', rootUrl)
+    }
+
     const mergedSnapshot = remoteSnapshot ? mergeSnapshots(localSnapshot, remoteSnapshot) : localSnapshot
     const manifest = snapshotToDirectoryManifest(mergedSnapshot)
     const files = snapshotToDirectoryFiles(mergedSnapshot)
+    const nextRemoteState = buildNextRemoteState({
+      rootUrl,
+      remoteState,
+      localRemoteState,
+      hasRemoteSnapshot: Boolean(remoteSnapshot),
+      allowRemoteReinitialize: Boolean(options.allowRemoteReinitialize),
+    })
 
     await uploadSnapshotDirectory(rootUrl, webdav.username, webdav.password, manifest, files, remoteSnapshot)
+    await writeRemoteState(rootUrl, webdav.username, webdav.password, nextRemoteState)
+    saveLocalRemoteState(rootUrl, nextRemoteState)
     applyingSnapshotDepth++
     try {
       await replaceLocalData(mergedSnapshot)
@@ -185,6 +228,47 @@ export async function testWebDavDirectory() {
   showToast('WebDAV 目录可用', 'success')
 }
 
+export async function clearWebDavDirectory() {
+  const { settings, showToast } = useStore.getState()
+  if (settings.storageMode !== 'webdav') {
+    showToast('当前是本地存储模式，未启用 WebDAV', 'info')
+    return
+  }
+
+  const webdav = settings.webdav
+  if (!webdav.url.trim()) {
+    throw new Error('请先填写 WebDAV 目录地址')
+  }
+
+  const rootUrl = resolveWebDavRoot(webdav.url.trim())
+  const remoteSnapshot = await readRemoteSnapshot(rootUrl, webdav.username, webdav.password)
+
+  if (remoteSnapshot) {
+    const files = snapshotToDirectoryFiles(remoteSnapshot)
+    for (const file of files) {
+      try {
+        await deleteRemoteFile(resolveRemoteUrl(rootUrl, file.path), webdav.username, webdav.password)
+      } catch {
+        /* 忽略单个图片删除失败，继续尝试删除其他文件 */
+      }
+    }
+  }
+
+  try {
+    await deleteRemoteFile(resolveRemoteUrl(rootUrl, MANIFEST_FILE_NAME), webdav.username, webdav.password)
+  } catch {
+    /* 忽略 manifest 删除失败 */
+  }
+
+  try {
+    await deleteRemoteFile(resolveRemoteUrl(rootUrl, REMOTE_STATE_FILE_NAME), webdav.username, webdav.password)
+  } catch {
+    /* 忽略状态文件删除失败 */
+  }
+
+  clearLocalRemoteState(rootUrl)
+}
+
 function resolveWebDavRoot(url: string) {
   const trimmed = url.trim()
   return trimmed.endsWith('/') ? trimmed : `${trimmed}/`
@@ -194,6 +278,107 @@ function resolveRemoteUrl(rootUrl: string, relativePath: string) {
   return new URL(relativePath.replace(/^\/+/, ''), rootUrl).toString()
 }
 
+function readLocalRemoteState(rootUrl: string): LocalRemoteStateRecord | null {
+  if (typeof localStorage === 'undefined') return null
+  try {
+    const raw = localStorage.getItem(LOCAL_REMOTE_STATE_STORAGE_KEY)
+    if (!raw) return null
+    const parsed = JSON.parse(raw) as Record<string, LocalRemoteStateRecord>
+    const record = parsed[rootUrl]
+    if (!record || typeof record !== 'object') return null
+    if (typeof record.remoteId !== 'string' || !record.remoteId.trim()) return null
+    if (typeof record.generation !== 'number' || !Number.isFinite(record.generation)) return null
+    if (typeof record.initializedAt !== 'number' || !Number.isFinite(record.initializedAt)) return null
+    if (typeof record.updatedAt !== 'number' || !Number.isFinite(record.updatedAt)) return null
+    return { ...record, rootUrl }
+  } catch {
+    return null
+  }
+}
+
+function saveLocalRemoteState(rootUrl: string, remoteState: WebDavRemoteState) {
+  if (typeof localStorage === 'undefined') return
+  try {
+    const raw = localStorage.getItem(LOCAL_REMOTE_STATE_STORAGE_KEY)
+    const parsed = raw ? JSON.parse(raw) as Record<string, LocalRemoteStateRecord> : {}
+    parsed[rootUrl] = {
+      rootUrl,
+      remoteId: remoteState.remoteId,
+      generation: remoteState.generation,
+      initializedAt: remoteState.initializedAt,
+      updatedAt: remoteState.updatedAt,
+      lastSeenAt: Date.now(),
+    }
+    localStorage.setItem(LOCAL_REMOTE_STATE_STORAGE_KEY, JSON.stringify(parsed))
+  } catch {
+    /* 忽略本地存储失败 */
+  }
+}
+
+function clearLocalRemoteState(rootUrl: string) {
+  if (typeof localStorage === 'undefined') return
+  try {
+    const raw = localStorage.getItem(LOCAL_REMOTE_STATE_STORAGE_KEY)
+    if (!raw) return
+    const parsed = JSON.parse(raw) as Record<string, LocalRemoteStateRecord>
+    if (!(rootUrl in parsed)) return
+    delete parsed[rootUrl]
+    localStorage.setItem(LOCAL_REMOTE_STATE_STORAGE_KEY, JSON.stringify(parsed))
+  } catch {
+    /* 忽略本地存储失败 */
+  }
+}
+
+function hasMeaningfulSnapshotData(snapshot: Awaited<ReturnType<typeof buildLocalSnapshot>>) {
+  return (
+    snapshot.tasks.length > 0 ||
+    snapshot.images.length > 0 ||
+    Object.keys(snapshot.deletedTaskIds).length > 0 ||
+    Object.keys(snapshot.deletedImageIds).length > 0
+  )
+}
+
+function buildNextRemoteState(options: {
+  rootUrl: string
+  remoteState: WebDavRemoteState | null
+  localRemoteState: LocalRemoteStateRecord | null
+  hasRemoteSnapshot: boolean
+  allowRemoteReinitialize: boolean
+}) {
+  const now = Date.now()
+
+  if (options.remoteState && options.hasRemoteSnapshot) {
+    return {
+      ...options.remoteState,
+      updatedAt: now,
+    }
+  }
+
+  if (!options.hasRemoteSnapshot && options.allowRemoteReinitialize) {
+    return {
+      remoteId: options.localRemoteState?.remoteId ?? createRemoteId(),
+      generation: (options.localRemoteState?.generation ?? 0) + 1,
+      initializedAt: now,
+      updatedAt: now,
+    }
+  }
+
+  return {
+    remoteId: options.remoteState?.remoteId ?? options.localRemoteState?.remoteId ?? createRemoteId(),
+    generation: options.remoteState?.generation ?? options.localRemoteState?.generation ?? 1,
+    initializedAt: options.remoteState?.initializedAt ?? options.localRemoteState?.initializedAt ?? now,
+    updatedAt: now,
+  }
+}
+
+function createRemoteId() {
+  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+    return crypto.randomUUID()
+  }
+  return `remote-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`
+}
+
+
 function buildAuthHeaders(username: string, password: string) {
   const headers: Record<string, string> = {}
   if (username || password) {
@@ -279,6 +464,57 @@ async function readRemoteSnapshot(rootUrl: string, username: string, password: s
   })
 }
 
+async function readRemoteState(rootUrl: string, username: string, password: string) {
+  const stateUrl = resolveRemoteUrl(rootUrl, REMOTE_STATE_FILE_NAME)
+  const response = await fetch(stateUrl, {
+    method: 'GET',
+    cache: 'no-store',
+    headers: {
+      ...buildAuthHeaders(username, password),
+    },
+  })
+
+  if (response.status === 404) return null
+  if (!response.ok) {
+    throw new Error(await readWebDavError(response))
+  }
+
+  const text = await response.text()
+  if (!text.trim()) return null
+
+  let parsed: unknown
+  try {
+    parsed = JSON.parse(text)
+  } catch (error) {
+    throw new Error(`远端 sync-state.json 不是有效 JSON：${error instanceof Error ? error.message : String(error)}`)
+  }
+
+  if (!parsed || typeof parsed !== 'object') {
+    throw new Error('远端 sync-state.json 格式无效')
+  }
+
+  const state = parsed as Partial<WebDavRemoteState>
+  if (
+    typeof state.remoteId !== 'string' ||
+    !state.remoteId.trim() ||
+    typeof state.generation !== 'number' ||
+    !Number.isFinite(state.generation) ||
+    typeof state.initializedAt !== 'number' ||
+    !Number.isFinite(state.initializedAt) ||
+    typeof state.updatedAt !== 'number' ||
+    !Number.isFinite(state.updatedAt)
+  ) {
+    throw new Error('远端 sync-state.json 缺少必要字段')
+  }
+
+  return {
+    remoteId: state.remoteId,
+    generation: state.generation,
+    initializedAt: state.initializedAt,
+    updatedAt: state.updatedAt,
+  }
+}
+
 async function uploadSnapshotDirectory(
   rootUrl: string,
   username: string,
@@ -321,6 +557,17 @@ async function uploadSnapshotDirectory(
   }
 }
 
+async function writeRemoteState(rootUrl: string, username: string, password: string, remoteState: WebDavRemoteState) {
+  const stateUrl = resolveRemoteUrl(rootUrl, REMOTE_STATE_FILE_NAME)
+  await putRemoteFile(
+    stateUrl,
+    new Blob([JSON.stringify(remoteState, null, 2)], { type: 'application/json' }),
+    'application/json',
+    username,
+    password,
+  )
+}
+
 async function putRemoteFile(url: string, body: Blob, contentType: string, username: string, password: string) {
   const response = await fetch(url, {
     method: 'PUT',
diff --git a/src/store.ts b/src/store.ts
index 31c20a82..a70b11a0 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -571,7 +571,7 @@ export async function removeTask(task: TaskRecord) {
 }
 
 /** 清空所有数据（含配置重置） */
-export async function clearAllData() {
+export async function clearAllData(options: { silent?: boolean } = {}) {
   await dbClearTasks()
   await clearImages()
   clearSyncTombstones()
@@ -582,7 +582,9 @@ export async function clearAllData() {
   useStore.setState({ dismissedCodexCliPrompts: [] })
   setSettings({ ...DEFAULT_SETTINGS })
   setParams({ ...DEFAULT_PARAMS })
-  showToast('所有数据已清空', 'success')
+  if (!options.silent) {
+    showToast('所有数据已清空', 'success')
+  }
 }
 
 /** 从 dataUrl 解析出 MIME 扩展名和二进制数据 */

From 23b94e6e8d341101a253f1a82b8cafd9ef9fc201 Mon Sep 17 00:00:00 2001
From: XianYuDaXian <xian_yu@live.com>
Date: Tue, 28 Apr 2026 11:29:48 +0800
Subject: [PATCH 11/16] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=20WebDAV=20?=
 =?UTF-8?q?=E8=A6=86=E7=9B=96=E5=90=8C=E6=AD=A5=E6=93=8D=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SettingsModal.tsx | 97 ++++++++++++++++++++------------
 src/lib/webdavSync.ts            | 69 +++++++++++++++++++++++
 2 files changed, 129 insertions(+), 37 deletions(-)

diff --git a/src/components/SettingsModal.tsx b/src/components/SettingsModal.tsx
index a3ab8041..d5d9cd0b 100644
--- a/src/components/SettingsModal.tsx
+++ b/src/components/SettingsModal.tsx
@@ -3,7 +3,12 @@ import { normalizeBaseUrl } from '../lib/api'
 import { useStore, exportData, importData, clearAllData } from '../store'
 import { DEFAULT_IMAGES_MODEL, DEFAULT_RESPONSES_MODEL, DEFAULT_SETTINGS, type AppSettings } from '../types'
 import { useCloseOnEscape } from '../hooks/useCloseOnEscape'
-import { clearWebDavDirectory, isWebDavRemoteResetError, syncWithWebDav, testWebDavDirectory } from '../lib/webdavSync'
+import {
+  clearWebDavDirectory,
+  overwriteLocalWithWebDav,
+  overwriteWebDavWithLocal,
+  testWebDavDirectory,
+} from '../lib/webdavSync'
 import Select from './Select'
 
 export default function SettingsModal() {
@@ -78,36 +83,6 @@ export default function SettingsModal() {
     e.target.value = ''
   }
 
-  const handleSyncNow = async () => {
-    try {
-      await syncWithWebDav()
-    } catch (err) {
-      if (isWebDavRemoteResetError(err)) {
-        setConfirmDialog({
-          title: '重建远端 WebDAV 数据',
-          message: '检测到远端 WebDAV 目录已经为空。\n\n这通常表示你手动清空了远端目录。为避免旧客户端自动把本地历史数据重新灌回去，本次同步已被拦截。\n\n如果你确认要用当前设备的本地数据重新初始化远端，请继续。',
-          confirmText: '确认重建',
-          action: async () => {
-            try {
-              await syncWithWebDav({ allowRemoteReinitialize: true })
-            } catch (nextErr) {
-              useStore.getState().showToast(
-                `WebDAV 同步失败：${nextErr instanceof Error ? nextErr.message : String(nextErr)}`,
-                'error',
-              )
-            }
-          },
-          messageAlign: 'left',
-        })
-        return
-      }
-      useStore.getState().showToast(
-        `WebDAV 同步失败：${err instanceof Error ? err.message : String(err)}`,
-        'error',
-      )
-    }
-  }
-
   const handleTestDirectory = async () => {
     try {
       await testWebDavDirectory()
@@ -119,6 +94,46 @@ export default function SettingsModal() {
     }
   }
 
+  const handleOverwriteLocal = () => {
+    setConfirmDialog({
+      title: '远端覆盖本地',
+      message: '确定要使用 WebDAV 远端数据覆盖当前浏览器的本地数据吗？\n\n当前浏览器里的任务、图片、设置和删除记录都会被远端快照替换。这个操作不会修改远端。',
+      confirmText: '确认覆盖',
+      action: async () => {
+        try {
+          await overwriteLocalWithWebDav()
+          useStore.getState().showToast('已用 WebDAV 远端数据覆盖本地', 'success')
+        } catch (err) {
+          useStore.getState().showToast(
+            `远端覆盖本地失败：${err instanceof Error ? err.message : String(err)}`,
+            'error',
+          )
+        }
+      },
+      messageAlign: 'left',
+    })
+  }
+
+  const handleOverwriteRemote = () => {
+    setConfirmDialog({
+      title: '本地覆盖远端',
+      message: '确定要使用当前浏览器的本地数据覆盖 WebDAV 远端数据吗？\n\n远端 manifest、sync-state 和快照引用的图片会被当前浏览器的数据替换。其他设备下次同步后会以这份远端数据为准。',
+      confirmText: '确认覆盖',
+      action: async () => {
+        try {
+          await overwriteWebDavWithLocal()
+          useStore.getState().showToast('已用本地数据覆盖 WebDAV 远端', 'success')
+        } catch (err) {
+          useStore.getState().showToast(
+            `本地覆盖远端失败：${err instanceof Error ? err.message : String(err)}`,
+            'error',
+          )
+        }
+      },
+      messageAlign: 'left',
+    })
+  }
+
   return (
     <div className="fixed inset-0 z-[70] flex items-center justify-center p-4">
       <div
@@ -339,25 +354,33 @@ export default function SettingsModal() {
                     启动时自动同步
                   </label>
                   <div className="-mt-2 text-[10px] text-gray-400 dark:text-gray-500">
-                    开启后，首次打开页面会自动同步；后续本地生成、删除、导入等变更会延迟自动推送，前台页面也会定时检查远端更新。若远端目录被手动清空，程序不会自动回灌，需手动确认重建。
+                    开启后，首次打开页面会自动同步；本地生成、删除、导入等变更约 2.5 秒后自动推送；前台页面每 30 秒检查一次远端更新。若远端目录被手动清空，程序不会自动回灌，需手动确认重建。
                   </div>
 
-                  <div className="flex gap-2">
+                  <div className="grid grid-cols-1 gap-2 sm:grid-cols-3">
                     <button
                       type="button"
                       onClick={handleTestDirectory}
-                      className="flex-1 rounded-xl bg-gray-100/80 px-4 py-2.5 text-sm font-medium text-gray-700 transition hover:bg-gray-200 dark:bg-white/[0.06] dark:text-gray-200 dark:hover:bg-white/[0.1]"
+                      className="rounded-xl bg-gray-100/80 px-4 py-2.5 text-sm font-medium text-gray-700 transition hover:bg-gray-200 dark:bg-white/[0.06] dark:text-gray-200 dark:hover:bg-white/[0.1]"
                       disabled={!draft.webdav.url.trim()}
                     >
                       测试目录
                     </button>
                     <button
                       type="button"
-                      onClick={handleSyncNow}
-                      className="flex-1 rounded-xl bg-blue-500 px-4 py-2.5 text-sm font-medium text-white transition hover:bg-blue-600 disabled:opacity-50"
+                      onClick={handleOverwriteLocal}
+                      className="rounded-xl bg-blue-500 px-4 py-2.5 text-sm font-medium text-white transition hover:bg-blue-600 disabled:opacity-50"
+                      disabled={!draft.webdav.url.trim()}
+                    >
+                      远端覆盖本地
+                    </button>
+                    <button
+                      type="button"
+                      onClick={handleOverwriteRemote}
+                      className="rounded-xl bg-amber-500 px-4 py-2.5 text-sm font-medium text-white transition hover:bg-amber-600 disabled:opacity-50"
                       disabled={!draft.webdav.url.trim()}
                     >
-                      立即同步
+                      本地覆盖远端
                     </button>
                   </div>
                 </div>
diff --git a/src/lib/webdavSync.ts b/src/lib/webdavSync.ts
index 65a0fdde..3d4101e1 100644
--- a/src/lib/webdavSync.ts
+++ b/src/lib/webdavSync.ts
@@ -55,6 +55,75 @@ export async function syncWithWebDavSilently() {
   return runWebDavSync({ silentSuccess: true, silentInfo: true })
 }
 
+export async function overwriteLocalWithWebDav() {
+  const { settings, setSettings, setTasks } = useStore.getState()
+  const webdav = settings.webdav
+
+  if (settings.storageMode !== 'webdav') {
+    throw new Error('当前是本地存储模式，未启用 WebDAV')
+  }
+
+  if (!webdav.url.trim()) {
+    throw new Error('请先填写 WebDAV 目录地址')
+  }
+
+  const rootUrl = resolveWebDavRoot(webdav.url.trim())
+  const remoteState = await readRemoteState(rootUrl, webdav.username, webdav.password)
+  const remoteSnapshot = await readRemoteSnapshot(rootUrl, webdav.username, webdav.password)
+  if (!remoteSnapshot) {
+    throw new Error('远端 WebDAV 目录中没有 manifest.json，无法覆盖本地')
+  }
+
+  applyingSnapshotDepth++
+  try {
+    await replaceLocalData(remoteSnapshot)
+    replaceSyncTombstones({
+      deletedTaskIds: remoteSnapshot.deletedTaskIds,
+      deletedImageIds: remoteSnapshot.deletedImageIds,
+    })
+    primeImageCache(remoteSnapshot.images)
+    setSettings(remoteSnapshot.settings)
+    setTasks(sortTasksForDisplay(remoteSnapshot.tasks))
+    if (remoteState) {
+      saveLocalRemoteState(rootUrl, remoteState)
+    }
+  } finally {
+    applyingSnapshotDepth--
+  }
+}
+
+export async function overwriteWebDavWithLocal() {
+  const { settings } = useStore.getState()
+  const webdav = settings.webdav
+
+  if (settings.storageMode !== 'webdav') {
+    throw new Error('当前是本地存储模式，未启用 WebDAV')
+  }
+
+  if (!webdav.url.trim()) {
+    throw new Error('请先填写 WebDAV 目录地址')
+  }
+
+  const rootUrl = resolveWebDavRoot(webdav.url.trim())
+  const localSnapshot = await buildLocalSnapshot(settings)
+  const localRemoteState = readLocalRemoteState(rootUrl)
+  const remoteState = await readRemoteState(rootUrl, webdav.username, webdav.password)
+  const remoteSnapshot = await readRemoteSnapshot(rootUrl, webdav.username, webdav.password)
+  const manifest = snapshotToDirectoryManifest(localSnapshot)
+  const files = snapshotToDirectoryFiles(localSnapshot)
+  const nextRemoteState = buildNextRemoteState({
+    rootUrl,
+    remoteState,
+    localRemoteState,
+    hasRemoteSnapshot: Boolean(remoteSnapshot),
+    allowRemoteReinitialize: true,
+  })
+
+  await uploadSnapshotDirectory(rootUrl, webdav.username, webdav.password, manifest, files, remoteSnapshot)
+  await writeRemoteState(rootUrl, webdav.username, webdav.password, nextRemoteState)
+  saveLocalRemoteState(rootUrl, nextRemoteState)
+}
+
 export function isWebDavRemoteResetError(err: unknown): err is WebDavRemoteResetError {
   return err instanceof WebDavRemoteResetError
 }

From c4e30e32a8e0de86f35b934e463a8c95feeea786 Mon Sep 17 00:00:00 2001
From: XianYuDaXian <xian_yu@live.com>
Date: Tue, 28 Apr 2026 12:17:27 +0800
Subject: [PATCH 12/16] =?UTF-8?q?feat:=20=E5=A2=9E=E5=BC=BA=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E5=99=A8=E4=B8=8E=20WebDAV=20=E5=88=9D=E5=A7=8B?=
 =?UTF-8?q?=E5=8C=96=E6=B5=81=E7=A8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ReferenceImageEditorModal.tsx | 102 +++++++++++---
 src/components/SettingsModal.tsx             |  32 ++++-
 src/lib/webdavSync.ts                        | 138 +++++++++++++++----
 src/store.ts                                 |  37 +++++
 4 files changed, 263 insertions(+), 46 deletions(-)

diff --git a/src/components/ReferenceImageEditorModal.tsx b/src/components/ReferenceImageEditorModal.tsx
index d85fc2bf..61d3fd1d 100644
--- a/src/components/ReferenceImageEditorModal.tsx
+++ b/src/components/ReferenceImageEditorModal.tsx
@@ -35,10 +35,16 @@ const DEFAULT_TEXT_STYLE: TextStyleState = {
   fontStyle: 'normal',
 }
 
+const DEFAULT_MASK_HUE = 0
+
 function clamp(value: number, min: number, max: number) {
   return Math.max(min, Math.min(max, value))
 }
 
+function buildMaskColor(hue: number, alpha: number) {
+  return `hsla(${Math.round(hue)}, 85%, 48%, ${clamp(alpha, 0.05, 1)})`
+}
+
 function getEditorKind(object: FabricObject | null): string | undefined {
   if (!object || typeof object !== 'object') return undefined
   return (object as FabricObject & { data?: { editorKind?: string } }).data?.editorKind
@@ -112,6 +118,7 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
   const [toolMode, setToolMode] = useState<ToolMode>('select')
   const [maskOpacity, setMaskOpacity] = useState(0.55)
   const [maskWidth, setMaskWidth] = useState(34)
+  const [maskHue, setMaskHue] = useState(DEFAULT_MASK_HUE)
   const [maskShapeType, setMaskShapeType] = useState<MaskShapeType>('rect')
   const [activeObject, setActiveObject] = useState<FabricObject | null>(null)
   const [textStyle, setTextStyle] = useState<TextStyleState>(DEFAULT_TEXT_STYLE)
@@ -228,12 +235,22 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
     const alpha = clamp(maskOpacity, 0.05, 1)
     const width = clamp(maskWidth, 4, 160)
     const brush = new PencilBrush(canvas)
-    brush.color = `rgba(0, 0, 0, ${alpha})`
+    brush.color = buildMaskColor(maskHue, alpha)
     brush.width = width
     canvas.freeDrawingBrush = brush
     canvas.isDrawingMode = toolMode === 'mask'
     canvas.defaultCursor = toolMode === 'mask' ? 'crosshair' : 'default'
-  }, [maskOpacity, maskWidth, toolMode])
+  }, [maskHue, maskOpacity, maskWidth, toolMode])
+
+  const handleToolModeChange = useCallback((nextToolMode: ToolMode) => {
+    const canvas = canvasRef.current
+    if (canvas) {
+      canvas.discardActiveObject()
+      canvas.requestRenderAll()
+    }
+    setActiveObject(null)
+    setToolMode(nextToolMode)
+  }, [])
 
   const redrawBackground = useCallback(() => {
     redrawBackgroundNow()
@@ -335,8 +352,8 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
       fill: 'rgba(59, 130, 246, 0.001)',
       stroke: 'rgba(59, 130, 246, 0)',
       strokeWidth: 0,
-      selectable: true,
-      evented: true,
+      selectable: false,
+      evented: false,
       hasControls: false,
       lockMovementX: true,
       lockMovementY: true,
@@ -479,6 +496,23 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
           lastPointerRef.current = { x: rawEvent.clientX, y: rawEvent.clientY }
           canvas.selection = false
           canvas.defaultCursor = 'grab'
+          return
+        }
+
+        if (toolModeRef.current === 'select' && !event.target) {
+          const pointer = canvas.getScenePoint(event.e)
+          const bounds = imageBoundsRef.current
+          const isInsideBaseImage =
+            pointer.x >= bounds.left &&
+            pointer.x <= bounds.left + bounds.width &&
+            pointer.y >= bounds.top &&
+            pointer.y <= bounds.top + bounds.height
+          if (isInsideBaseImage) {
+            const baseProxy = canvas.getObjects().find((object) => getEditorKind(object) === 'base-image') ?? null
+            canvas.discardActiveObject()
+            canvas.requestRenderAll()
+            setActiveObject(baseProxy)
+          }
         }
       })
 
@@ -506,10 +540,16 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
         setActiveObject(current)
         syncTextStyleFromObject(current)
         const selectedShapeType = getMaskShapeTypeFromObject(current)
-        if (selectedShapeType) {
+      if (selectedShapeType) {
           setMaskShapeType(selectedShapeType)
+        if (typeof current?.fill === 'string') {
+          const match = current.fill.match(/hsla?\((\d+)/i)
+          if (match) {
+            setMaskHue(clamp(Number(match[1]) || DEFAULT_MASK_HUE, 0, 360))
+          }
         }
       }
+    }
 
       canvas.on('selection:created', handleSelection)
       canvas.on('selection:updated', handleSelection)
@@ -640,11 +680,11 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
     const current = activeObject
     if (!canvas || !current || getEditorKind(current) !== 'mask-region') return
     current.set({
-      fill: `rgba(0, 0, 0, ${clamp(maskOpacity, 0.05, 1)})`,
+      fill: buildMaskColor(maskHue, maskOpacity),
     })
     current.setCoords()
     canvas.renderAll()
-  }, [activeObject, maskOpacity])
+  }, [activeObject, maskHue, maskOpacity])
 
   const handleDeleteActiveObject = useCallback(() => {
     const canvas = canvasRef.current
@@ -784,7 +824,7 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
   }
 
   const buildMaskShape = useCallback((shapeType: MaskShapeType, left: number, top: number, width: number, height: number) => {
-    const fill = `rgba(0, 0, 0, ${clamp(maskOpacity, 0.05, 1)})`
+    const fill = buildMaskColor(maskHue, maskOpacity)
     const centerLeft = left + width / 2
     const centerTop = top + height / 2
     const shared = {
@@ -821,7 +861,7 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
       width,
       height,
     })
-  }, [maskOpacity])
+  }, [maskHue, maskOpacity])
 
   const handleAddMaskRegion = () => {
     const canvas = canvasRef.current
@@ -855,7 +895,7 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
     const angle = activeObject.angle ?? 0
     const fill = typeof activeObject.fill === 'string'
       ? activeObject.fill
-      : `rgba(0, 0, 0, ${clamp(maskOpacity, 0.05, 1)})`
+      : buildMaskColor(maskHue, maskOpacity)
 
     suppressHistoryRef.current = true
     canvas.remove(activeObject)
@@ -885,7 +925,7 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
 
   const handleFlipActiveObject = (axis: 'x' | 'y') => {
     const canvas = canvasRef.current
-    const current = canvas?.getActiveObject()
+    const current = canvas?.getActiveObject() ?? activeObject
     if (!canvas || !current) return
 
     if (getEditorKind(current) === 'base-image') {
@@ -988,9 +1028,17 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
   const isTextSelected = activeObject instanceof IText
   const activeEditorKind = getEditorKind(activeObject)
   const canDeleteActiveObject = Boolean(activeObject && activeEditorKind !== 'base-image')
-  const showMaskSettings = toolMode === 'mask' || activeEditorKind === 'mask-region' || activeEditorKind === 'mask-brush'
-  const showTextSettings = isTextSelected
-  const showShapeSelector = activeEditorKind === 'mask-region'
+  const settingsPanel =
+    toolMode === 'mask'
+      ? 'mask'
+      : activeEditorKind === 'mask-region'
+        ? 'mask'
+        : isTextSelected
+          ? 'text'
+          : null
+  const showMaskSettings = settingsPanel === 'mask'
+  const showTextSettings = settingsPanel === 'text'
+  const showShapeSelector = showMaskSettings && activeEditorKind === 'mask-region'
 
   return (
     <div className="fixed inset-0 z-[75] h-[100dvh] overflow-hidden bg-black/70 backdrop-blur-md">
@@ -1059,7 +1107,7 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
               <div className="grid grid-cols-2 gap-2">
                 <div className={canDeleteActiveObject && isMobileDevice ? 'grid grid-cols-2 gap-2' : ''}>
                   <button
-                    onClick={() => setToolMode('select')}
+                  onClick={() => handleToolModeChange('select')}
                     className={`w-full rounded-lg px-3 py-2 text-sm transition md:rounded-xl ${toolMode === 'select' ? 'bg-blue-500 text-white' : 'bg-white/8 text-white hover:bg-white/12'}`}
                   >
                     选择
@@ -1074,7 +1122,7 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
                   )}
                 </div>
                 <button
-                  onClick={() => setToolMode('mask')}
+                  onClick={() => handleToolModeChange('mask')}
                   className={`rounded-lg px-3 py-2 text-sm transition md:rounded-xl ${toolMode === 'mask' ? 'bg-blue-500 text-white' : 'bg-white/8 text-white hover:bg-white/12'}`}
                 >
                   涂抹遮罩
@@ -1187,6 +1235,28 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
                   />
                   <div className="mt-1 text-xs text-white/45">{maskWidth}px</div>
                 </label>
+                <label className="block">
+                  <span className="mb-1 block text-xs text-white/55">颜色</span>
+                  <input
+                    type="range"
+                    min="0"
+                    max="360"
+                    step="1"
+                    value={maskHue}
+                    onChange={(e) => setMaskHue(Number(e.target.value))}
+                    className="w-full appearance-none rounded-full"
+                    style={{
+                      background: 'linear-gradient(90deg, hsl(0 85% 48%), hsl(60 85% 48%), hsl(120 85% 48%), hsl(180 85% 48%), hsl(240 85% 48%), hsl(300 85% 48%), hsl(360 85% 48%))',
+                    }}
+                  />
+                  <div className="mt-2 flex items-center justify-between text-xs text-white/45">
+                    <span>{maskHue}°</span>
+                    <span
+                      className="inline-block h-4 w-8 rounded-full border border-white/15"
+                      style={{ backgroundColor: buildMaskColor(maskHue, maskOpacity) }}
+                    />
+                  </div>
+                </label>
               </div>
               </section>
             )}
diff --git a/src/components/SettingsModal.tsx b/src/components/SettingsModal.tsx
index d5d9cd0b..80578cc0 100644
--- a/src/components/SettingsModal.tsx
+++ b/src/components/SettingsModal.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState, useCallback } from 'react'
 import { normalizeBaseUrl } from '../lib/api'
-import { useStore, exportData, importData, clearAllData } from '../store'
+import { useStore, exportData, importData, clearAllData, resetLocalDataPreservingSettings } from '../store'
 import { DEFAULT_IMAGES_MODEL, DEFAULT_RESPONSES_MODEL, DEFAULT_SETTINGS, type AppSettings } from '../types'
 import { useCloseOnEscape } from '../hooks/useCloseOnEscape'
 import {
@@ -134,6 +134,28 @@ export default function SettingsModal() {
     })
   }
 
+  const handleReinitializeLocalAndWebDav = () => {
+    setConfirmDialog({
+      title: '初始化 IndexedDB 和 WebDAV',
+      message: '确定要初始化当前浏览器的 IndexedDB 缓存，并清空当前 WebDAV 目录中的 manifest、sync-state 和图片文件吗？\n\n会保留当前填写的 API 与 WebDAV 配置，但任务、图片、删除记录和同步状态都会被清空。初始化完成后，程序会立即写回一份新的空快照，用来重建远端同步状态。此操作不可恢复。',
+      confirmText: '确认初始化',
+      action: async () => {
+        try {
+          await clearWebDavDirectory()
+          await resetLocalDataPreservingSettings({ silent: true })
+          await overwriteWebDavWithLocal()
+          useStore.getState().showToast('IndexedDB 和 WebDAV 已初始化并重建同步状态', 'success')
+        } catch (err) {
+          useStore.getState().showToast(
+            `初始化 IndexedDB 和 WebDAV 失败：${err instanceof Error ? err.message : String(err)}`,
+            'error',
+          )
+        }
+      },
+      messageAlign: 'left',
+    })
+  }
+
   return (
     <div className="fixed inset-0 z-[70] flex items-center justify-center p-4">
       <div
@@ -383,6 +405,14 @@ export default function SettingsModal() {
                       本地覆盖远端
                     </button>
                   </div>
+                  <button
+                    type="button"
+                    onClick={handleReinitializeLocalAndWebDav}
+                    className="w-full rounded-xl border border-red-300/80 bg-red-100/70 px-4 py-2.5 text-sm font-medium text-red-700 transition hover:bg-red-200/80 disabled:opacity-50 dark:border-red-500/30 dark:bg-red-500/15 dark:text-red-300 dark:hover:bg-red-500/25"
+                    disabled={!draft.webdav.url.trim()}
+                  >
+                    初始化 IndexedDB 和 WebDAV
+                  </button>
                 </div>
               )}
 
diff --git a/src/lib/webdavSync.ts b/src/lib/webdavSync.ts
index 3d4101e1..c4e44a70 100644
--- a/src/lib/webdavSync.ts
+++ b/src/lib/webdavSync.ts
@@ -14,7 +14,7 @@ import {
 const REMOTE_STATE_FILE_NAME = 'sync-state.json'
 const LOCAL_REMOTE_STATE_STORAGE_KEY = 'gpt-image-playground-webdav-remote-state'
 let syncInFlight: Promise<void> | null = null
-let backgroundSyncTimer: ReturnType<typeof window.setTimeout> | null = null
+let backgroundSyncTimer: number | null = null
 let applyingSnapshotDepth = 0
 let lastBackgroundSyncStartedAt = 0
 let lastBackgroundErrorMessage = ''
@@ -24,6 +24,7 @@ const TEST_FILE_PREFIX = '.gpt-image-playground-test-'
 const BACKGROUND_SYNC_DEBOUNCE_MS = 2500
 const BACKGROUND_SYNC_INTERVAL_MS = 30000
 const BACKGROUND_SYNC_MIN_GAP_MS = 8000
+const SYNC_RETRY_LIMIT = 3
 
 interface WebDavRemoteState {
   remoteId: string
@@ -37,6 +38,18 @@ interface LocalRemoteStateRecord extends WebDavRemoteState {
   lastSeenAt: number
 }
 
+interface WebDavSyncOptions {
+  allowRemoteReinitialize?: boolean
+  silentSuccess?: boolean
+  silentInfo?: boolean
+}
+
+interface RemoteReadResult {
+  state: WebDavRemoteState | null
+  snapshot: Awaited<ReturnType<typeof readRemoteSnapshot>>
+  version: string
+}
+
 export class WebDavRemoteResetError extends Error {
   rootUrl: string
 
@@ -47,7 +60,7 @@ export class WebDavRemoteResetError extends Error {
   }
 }
 
-export async function syncWithWebDav(options: { allowRemoteReinitialize?: boolean } = {}) {
+export async function syncWithWebDav(options: WebDavSyncOptions = {}) {
   return runWebDavSync(options)
 }
 
@@ -185,7 +198,7 @@ export function isApplyingWebDavSnapshot() {
   return applyingSnapshotDepth > 0
 }
 
-async function runWebDavSync(options: { silentSuccess?: boolean; silentInfo?: boolean } = {}) {
+async function runWebDavSync(options: WebDavSyncOptions = {}) {
   if (syncInFlight) return syncInFlight
 
   syncInFlight = (async () => {
@@ -204,43 +217,72 @@ async function runWebDavSync(options: { silentSuccess?: boolean; silentInfo?: bo
     }
 
     const rootUrl = resolveWebDavRoot(webdav.url.trim())
-    const localSnapshot = await buildLocalSnapshot(settings)
-    const localRemoteState = readLocalRemoteState(rootUrl)
-    const remoteState = await readRemoteState(rootUrl, webdav.username, webdav.password)
-    const remoteSnapshot = await readRemoteSnapshot(rootUrl, webdav.username, webdav.password)
-    if (!remoteSnapshot && hasMeaningfulSnapshotData(localSnapshot) && !options.allowRemoteReinitialize) {
-      throw new WebDavRemoteResetError('检测到远端 WebDAV 目录已被清空，已阻止自动用本地数据重新写回。若确认要重建远端，请在设置中再次手动同步并确认。', rootUrl)
+    let syncResult: {
+      snapshot: Awaited<ReturnType<typeof buildLocalSnapshot>>
+      remoteState: WebDavRemoteState
+      hadRemoteSnapshot: boolean
+    } | null = null
+
+    for (let attempt = 1; attempt <= SYNC_RETRY_LIMIT; attempt++) {
+      const localSnapshot = await buildLocalSnapshot(settings)
+      const localRemoteState = readLocalRemoteState(rootUrl)
+      const remoteBefore = await readRemote(rootUrl, webdav.username, webdav.password)
+      if (!remoteBefore.snapshot && hasMeaningfulSnapshotData(localSnapshot) && !options.allowRemoteReinitialize) {
+        throw new WebDavRemoteResetError('检测到远端 WebDAV 目录已被清空，已阻止自动用本地数据重新写回。若确认要重建远端，请在设置中再次手动同步并确认。', rootUrl)
+      }
+
+      const mergedSnapshot = remoteBefore.snapshot ? mergeSnapshots(localSnapshot, remoteBefore.snapshot) : localSnapshot
+      const manifest = snapshotToDirectoryManifest(mergedSnapshot)
+      const files = snapshotToDirectoryFiles(mergedSnapshot)
+      const nextRemoteState = buildNextRemoteState({
+        rootUrl,
+        remoteState: remoteBefore.state,
+        localRemoteState,
+        hasRemoteSnapshot: Boolean(remoteBefore.snapshot),
+        allowRemoteReinitialize: Boolean(options.allowRemoteReinitialize),
+      })
+
+      const remoteBeforeWrite = await readRemote(rootUrl, webdav.username, webdav.password)
+      if (remoteBeforeWrite.version !== remoteBefore.version) {
+        continue
+      }
+
+      await uploadSnapshotDirectory(rootUrl, webdav.username, webdav.password, manifest, files, remoteBefore.snapshot)
+      await writeRemoteState(rootUrl, webdav.username, webdav.password, nextRemoteState)
+
+      const remoteAfterWrite = await readRemote(rootUrl, webdav.username, webdav.password)
+      if (!remoteVersionsMatch(remoteAfterWrite, nextRemoteState, mergedSnapshot)) {
+        continue
+      }
+
+      syncResult = {
+        snapshot: mergedSnapshot,
+        remoteState: nextRemoteState,
+        hadRemoteSnapshot: Boolean(remoteBefore.snapshot),
+      }
+      break
     }
 
-    const mergedSnapshot = remoteSnapshot ? mergeSnapshots(localSnapshot, remoteSnapshot) : localSnapshot
-    const manifest = snapshotToDirectoryManifest(mergedSnapshot)
-    const files = snapshotToDirectoryFiles(mergedSnapshot)
-    const nextRemoteState = buildNextRemoteState({
-      rootUrl,
-      remoteState,
-      localRemoteState,
-      hasRemoteSnapshot: Boolean(remoteSnapshot),
-      allowRemoteReinitialize: Boolean(options.allowRemoteReinitialize),
-    })
+    if (!syncResult) {
+      throw new Error('WebDAV 同步期间远端持续变化，请稍后重试')
+    }
 
-    await uploadSnapshotDirectory(rootUrl, webdav.username, webdav.password, manifest, files, remoteSnapshot)
-    await writeRemoteState(rootUrl, webdav.username, webdav.password, nextRemoteState)
-    saveLocalRemoteState(rootUrl, nextRemoteState)
+    saveLocalRemoteState(rootUrl, syncResult.remoteState)
     applyingSnapshotDepth++
     try {
-      await replaceLocalData(mergedSnapshot)
+      await replaceLocalData(syncResult.snapshot)
       replaceSyncTombstones({
-        deletedTaskIds: mergedSnapshot.deletedTaskIds,
-        deletedImageIds: mergedSnapshot.deletedImageIds,
+        deletedTaskIds: syncResult.snapshot.deletedTaskIds,
+        deletedImageIds: syncResult.snapshot.deletedImageIds,
       })
-      primeImageCache(mergedSnapshot.images)
-      setSettings(mergedSnapshot.settings)
-      setTasks(sortTasksForDisplay(mergedSnapshot.tasks))
+      primeImageCache(syncResult.snapshot.images)
+      setSettings(syncResult.snapshot.settings)
+      setTasks(sortTasksForDisplay(syncResult.snapshot.tasks))
     } finally {
       applyingSnapshotDepth--
     }
     if (!options.silentSuccess) {
-      showToast(remoteSnapshot ? '已与 WebDAV 目录同步' : '已写入 WebDAV 目录', 'success')
+      showToast(syncResult.hadRemoteSnapshot ? '已与 WebDAV 目录同步' : '已写入 WebDAV 目录', 'success')
     }
   })()
 
@@ -488,6 +530,44 @@ async function triggerBackgroundSync(force = false) {
   }
 }
 
+async function readRemote(rootUrl: string, username: string, password: string): Promise<RemoteReadResult> {
+  const [state, snapshot] = await Promise.all([
+    readRemoteState(rootUrl, username, password),
+    readRemoteSnapshot(rootUrl, username, password),
+  ])
+
+  return {
+    state,
+    snapshot,
+    version: buildRemoteVersion(state, snapshot),
+  }
+}
+
+function buildRemoteVersion(
+  state: WebDavRemoteState | null,
+  snapshot: Awaited<ReturnType<typeof readRemoteSnapshot>>,
+) {
+  return JSON.stringify({
+    state: state
+      ? {
+          remoteId: state.remoteId,
+          generation: state.generation,
+          initializedAt: state.initializedAt,
+          updatedAt: state.updatedAt,
+        }
+      : null,
+    manifest: snapshot ? snapshotToDirectoryManifest(snapshot) : null,
+  })
+}
+
+function remoteVersionsMatch(
+  remote: RemoteReadResult,
+  expectedState: WebDavRemoteState,
+  expectedSnapshot: Awaited<ReturnType<typeof buildLocalSnapshot>>,
+) {
+  return remote.version === buildRemoteVersion(expectedState, expectedSnapshot)
+}
+
 async function readRemoteSnapshot(rootUrl: string, username: string, password: string) {
   const manifestUrl = resolveRemoteUrl(rootUrl, MANIFEST_FILE_NAME)
   const response = await fetch(manifestUrl, {
diff --git a/src/store.ts b/src/store.ts
index a70b11a0..0a698e64 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -587,6 +587,43 @@ export async function clearAllData(options: { silent?: boolean } = {}) {
   }
 }
 
+/** 初始化本地缓存数据，但保留当前设置 */
+export async function resetLocalDataPreservingSettings(options: { silent?: boolean } = {}) {
+  await dbClearTasks()
+  await clearImages()
+  clearSyncTombstones()
+  imageCache.clear()
+  const {
+    settings,
+    setTasks,
+    clearInputImages,
+    setParams,
+    setPrompt,
+    clearSelection,
+    setDetailTaskId,
+    setLightboxImageId,
+    setLightboxStartEditor,
+    showToast,
+  } = useStore.getState()
+  setTasks([])
+  clearInputImages()
+  setPrompt('')
+  setParams({ ...DEFAULT_PARAMS })
+  clearSelection()
+  setDetailTaskId(null)
+  setLightboxImageId(null, [])
+  setLightboxStartEditor(false)
+  useStore.setState({
+    settings: {
+      ...settings,
+      updatedAt: Date.now(),
+    },
+  })
+  if (!options.silent) {
+    showToast('本地缓存已初始化', 'success')
+  }
+}
+
 /** 从 dataUrl 解析出 MIME 扩展名和二进制数据 */
 /** 导出数据为 ZIP */
 export async function exportData() {

From b1e18a449382171c646e29a0b00f376d7d1482a8 Mon Sep 17 00:00:00 2001
From: XianYuDaXian <xian_yu@live.com>
Date: Tue, 28 Apr 2026 15:13:26 +0800
Subject: [PATCH 13/16] fix: polish advanced editor integration

---
 src/components/DetailModal.tsx               |   2 +-
 src/components/Lightbox.tsx                  |   2 +-
 src/components/MaskEditorModal.tsx           |  65 +++++++++-
 src/components/ReferenceImageEditorModal.tsx | 126 +++++++++++++------
 4 files changed, 152 insertions(+), 43 deletions(-)

diff --git a/src/components/DetailModal.tsx b/src/components/DetailModal.tsx
index d42ba83a..44cf99e2 100644
--- a/src/components/DetailModal.tsx
+++ b/src/components/DetailModal.tsx
@@ -375,7 +375,7 @@ export default function DetailModal() {
                   }}
                   className="rounded-full bg-black/55 px-3 py-1.5 text-xs font-medium text-white backdrop-blur-sm transition hover:bg-black/70"
                 >
-                  快速编辑
+                  高级编辑
                 </button>
               </div>
             </>
diff --git a/src/components/Lightbox.tsx b/src/components/Lightbox.tsx
index 05a2d019..e34fdcb6 100644
--- a/src/components/Lightbox.tsx
+++ b/src/components/Lightbox.tsx
@@ -515,7 +515,7 @@ function LightboxInner({ src, maskPreviewSrc, onClose, showNav, currentIndex, to
           onEdit()
         }}
       >
-        {isReferenceImage ? '编辑参考图' : '编辑并加入参考图'}
+        {isReferenceImage ? '高级编辑' : '高级编辑并加入参考图'}
       </button>
       <div className="relative animate-zoom-in">
         <div
diff --git a/src/components/MaskEditorModal.tsx b/src/components/MaskEditorModal.tsx
index 7bbd96c6..44e69b39 100644
--- a/src/components/MaskEditorModal.tsx
+++ b/src/components/MaskEditorModal.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react'
+import { Suspense, lazy, useEffect, useRef, useState } from 'react'
 import type { PointerEvent as ReactPointerEvent, WheelEvent as ReactWheelEvent } from 'react'
 import { createPortal } from 'react-dom'
 import { ensureImageCached, useStore } from '../store'
@@ -6,6 +6,7 @@ import { canvasToBlob, loadImage } from '../lib/canvasImage'
 import { storeImage } from '../lib/db'
 import { prepareMaskTargetDataUrl, replaceMaskTargetImage } from '../lib/maskPreprocess'
 import { useCloseOnEscape } from '../hooks/useCloseOnEscape'
+const ReferenceImageEditorModal = lazy(() => import('./ReferenceImageEditorModal'))
 import {
   clampViewTransform,
   clientPointToCanvasPoint,
@@ -146,6 +147,10 @@ export default function MaskEditorModal() {
   const [isPanning, setIsPanning] = useState(false)
   const [sliderAnchor, setSliderAnchor] = useState<SliderAnchor | null>(null)
   const [showMaskInfo, setShowMaskInfo] = useState(false)
+  const [referenceEditorSession, setReferenceEditorSession] = useState<{
+    imageId: string
+    src: string
+  } | null>(null)
 
   const close = () => {
     if (isSaving) return
@@ -153,6 +158,11 @@ export default function MaskEditorModal() {
   }
   useCloseOnEscape(Boolean(imageId), close)
 
+  const handleReferenceEditorSaved = (nextImageId: string) => {
+    setReferenceEditorSession(null)
+    setMaskEditorImageId(nextImageId)
+  }
+
   useEffect(() => () => {
     if (maskInfoTimerRef.current != null) {
       window.clearTimeout(maskInfoTimerRef.current)
@@ -444,6 +454,12 @@ export default function MaskEditorModal() {
     }
   }, [imageId])
 
+  useEffect(() => {
+    if (imageId) {
+      setReferenceEditorSession(null)
+    }
+  }, [imageId])
+
   useEffect(() => {
     if (!imageId) {
       if (previewFrameRef.current != null) {
@@ -837,9 +853,20 @@ export default function MaskEditorModal() {
     setShowBrushControls((value) => !value)
   }
 
+  const handleOpenReferenceEditor = () => {
+    if (!imageId || !sourceDataUrl || isLoading || isSaving) return
+    setReferenceEditorSession({
+      imageId,
+      src: sourceDataUrl,
+    })
+  }
+
   return (
     <>
-      <div className="fixed inset-0 z-[80] flex flex-col bg-gray-50 dark:bg-gray-900 animate-modal-in">
+      <div
+        className="fixed inset-0 z-[80] flex flex-col bg-gray-50 dark:bg-gray-900 animate-modal-in"
+        aria-hidden={referenceEditorSession ? 'true' : undefined}
+      >
       {/* Header */}
       <div className="flex-none flex items-center justify-between px-4 py-3 border-b border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-950 z-20">
         <div className="flex items-center gap-3">
@@ -999,6 +1026,18 @@ export default function MaskEditorModal() {
                   <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/>
                 </svg>
               </button>
+              <div className="w-px h-4 sm:h-5 bg-gray-300 dark:bg-[#323338] mx-1"></div>
+              <button
+                onClick={handleOpenReferenceEditor}
+                disabled={!isReady || isSaving}
+                className="flex items-center gap-1.5 rounded-lg sm:rounded-xl bg-blue-50 px-3 py-2 text-xs font-medium text-blue-600 transition hover:bg-blue-100 disabled:opacity-30 dark:bg-blue-500/10 dark:text-blue-300 dark:hover:bg-blue-500/20"
+                title="切换到高级编辑"
+              >
+                <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
+                </svg>
+                高级编辑
+              </button>
             </div>
           </div>
         </div>
@@ -1025,6 +1064,28 @@ export default function MaskEditorModal() {
         </div>,
         document.body,
       )}
+      {referenceEditorSession
+        ? createPortal(
+            <div className="fixed inset-0 z-[120]">
+              <Suspense
+                fallback={
+                  <div className="fixed inset-0 z-[120] flex items-center justify-center bg-black/55 backdrop-blur-md text-sm text-white/70">
+                    正在加载高级编辑器...
+                  </div>
+                }
+              >
+                <ReferenceImageEditorModal
+                  imageId={referenceEditorSession.imageId}
+                  src={referenceEditorSession.src}
+                  saveMode="replace-input"
+                  onSaved={handleReferenceEditorSaved}
+                  onClose={() => setReferenceEditorSession(null)}
+                />
+              </Suspense>
+            </div>,
+            document.body,
+          )
+        : null}
     </>
   )
 }
diff --git a/src/components/ReferenceImageEditorModal.tsx b/src/components/ReferenceImageEditorModal.tsx
index af71f483..e752f5cb 100644
--- a/src/components/ReferenceImageEditorModal.tsx
+++ b/src/components/ReferenceImageEditorModal.tsx
@@ -8,9 +8,10 @@ interface ReferenceImageEditorModalProps {
   src: string
   saveMode: 'replace-input' | 'append-input'
   onClose: () => void
+  onSaved?: (nextImageId: string, nextDataUrl: string) => void
 }
 
-type ToolMode = 'select' | 'mask'
+type ToolMode = 'select' | 'mask-brush'
 type MaskShapeType = 'rect' | 'ellipse' | 'triangle'
 
 interface TextStyleState {
@@ -80,11 +81,8 @@ function useIsMobileDevice() {
   return isMobileDevice
 }
 
-export default function ReferenceImageEditorModal({ imageId, src, saveMode, onClose }: ReferenceImageEditorModalProps) {
+export default function ReferenceImageEditorModal({ imageId, src, saveMode, onClose, onSaved }: ReferenceImageEditorModalProps) {
   const setLightboxImageId = useStore((s) => s.setLightboxImageId)
-  const setMaskEditorImageId = useStore((s) => s.setMaskEditorImageId)
-  const maskDraft = useStore((s) => s.maskDraft)
-  const clearMaskDraft = useStore((s) => s.clearMaskDraft)
   const inputImages = useStore((s) => s.inputImages)
   const lightboxImageList = useStore((s) => s.lightboxImageList)
   const showToast = useStore((s) => s.showToast)
@@ -241,8 +239,8 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
     brush.color = buildMaskColor(maskHue, alpha)
     brush.width = width
     canvas.freeDrawingBrush = brush
-    canvas.isDrawingMode = toolMode === 'mask'
-    canvas.defaultCursor = toolMode === 'mask' ? 'crosshair' : 'default'
+    canvas.isDrawingMode = toolMode === 'mask-brush'
+    canvas.defaultCursor = toolMode === 'mask-brush' ? 'crosshair' : 'default'
   }, [maskHue, maskOpacity, maskWidth, toolMode])
 
   const handleToolModeChange = useCallback((nextToolMode: ToolMode) => {
@@ -535,7 +533,7 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
       canvas.on('mouse:up', () => {
         panningRef.current = false
         canvas.selection = toolModeRef.current === 'select'
-        canvas.defaultCursor = toolModeRef.current === 'mask' ? 'crosshair' : 'default'
+        canvas.defaultCursor = toolModeRef.current === 'mask-brush' ? 'crosshair' : 'default'
       })
 
       const handleSelection = () => {
@@ -967,17 +965,6 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
     await restoreHistory(historyIndexRef.current + 1)
   }
 
-  const handleOpenMaskEditor = () => {
-    onClose()
-    setMaskEditorImageId(imageId)
-  }
-
-  const handleRemoveMaskDraft = () => {
-    if (maskDraft?.targetImageId !== imageId) return
-    clearMaskDraft()
-    showToast('已移除这张参考图的遮罩', 'success')
-  }
-
   const handleSave = async () => {
     const canvas = canvasRef.current
     const sourceImage = sourceImageRef.current
@@ -985,16 +972,10 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
 
     const previousViewport = canvas.viewportTransform ? [...canvas.viewportTransform] : null
     const baseProxy = canvas.getObjects().find((object) => getEditorKind(object) === 'base-image')
-    const maskObjects = canvas.getObjects().filter((object) => {
-      const kind = getEditorKind(object)
-      return kind === 'mask-brush' || kind === 'mask-region'
-    })
     const previousBaseVisible = baseProxy?.visible
     if (baseProxy) {
       baseProxy.set({ visible: false })
     }
-    const previousMaskVisibilities = maskObjects.map((object) => object.visible)
-    maskObjects.forEach((object) => object.set({ visible: false }))
     canvas.setViewportTransform([1, 0, 0, 1, 0, 0])
     canvas.renderAll()
     const overlayDataUrl = canvas.toDataURL({
@@ -1008,7 +989,6 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
     if (baseProxy) {
       baseProxy.set({ visible: previousBaseVisible ?? true })
     }
-    maskObjects.forEach((object, index) => object.set({ visible: previousMaskVisibilities[index] ?? true }))
     if (previousViewport) {
       canvas.setViewportTransform(previousViewport as [number, number, number, number, number, number])
       canvas.renderAll()
@@ -1036,11 +1016,13 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
     if (saveMode === 'replace-input') {
       const nextId = await replaceInputImageWithDataUrl(imageId, editedDataUrl)
       setLightboxImageId(nextId, currentImageList.map((id) => (id === imageId ? nextId : id)))
+      onSaved?.(nextId, editedDataUrl)
       showToast('参考图已更新', 'success')
     } else {
       const nextId = await addInputImageWithDataUrl(editedDataUrl)
       const nextList = currentImageList.includes(nextId) ? currentImageList : [...currentImageList, nextId]
       setLightboxImageId(nextId, nextList)
+      onSaved?.(nextId, editedDataUrl)
       showToast('编辑结果已加入参考图', 'success')
     }
     onClose()
@@ -1049,9 +1031,11 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
   const isTextSelected = activeObject instanceof IText
   const activeEditorKind = getEditorKind(activeObject)
   const canDeleteActiveObject = Boolean(activeObject && activeEditorKind !== 'base-image')
-  const hasOpenAiMask = maskDraft?.targetImageId === imageId
-  const settingsPanel = isTextSelected ? 'text' : null
+  const isMaskRegionSelected = activeEditorKind === 'mask-region'
+  const showMaskSettings = toolMode === 'mask-brush' || isMaskRegionSelected
+  const settingsPanel = isTextSelected ? 'text' : showMaskSettings ? 'mask' : null
   const showTextSettings = settingsPanel === 'text'
+  const showLocalMaskSettings = settingsPanel === 'mask'
 
   return (
     <div className="fixed inset-0 z-[75] h-[100dvh] overflow-hidden bg-black/70 backdrop-blur-md">
@@ -1076,10 +1060,10 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
         </div>
         <aside className="absolute inset-x-2 bottom-2 z-20 max-h-[282px] overflow-y-auto rounded-2xl border border-white/10 bg-[#12161d]/96 p-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] text-white shadow-2xl backdrop-blur-xl sm:inset-x-3 sm:bottom-3 sm:max-h-[306px] sm:p-4 md:bottom-4 md:left-auto md:right-4 md:top-4 md:max-h-none md:w-[360px] md:p-5">
           <div className="mb-3 flex items-center justify-between md:mb-5">
-            <div>
-              <h3 className="text-base font-semibold md:text-lg">快速编辑</h3>
-              <p className="mt-1 hidden text-xs text-white/45 sm:block">
-                文字、OpenAI 遮罩、贴图。
+              <div>
+                <h3 className="text-base font-semibold md:text-lg">高级编辑</h3>
+                <p className="mt-1 hidden text-xs text-white/45 sm:block">
+                文字、涂抹、区域填色、贴图。
                 {saveMode === 'replace-input' ? ' 保存后替换当前参考图。' : ' 保存后加入参考图。'}
               </p>
             </div>
@@ -1135,10 +1119,10 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
                   )}
                 </div>
                 <button
-                  onClick={handleOpenMaskEditor}
-                  className="rounded-lg bg-white/8 px-3 py-2 text-sm text-white transition hover:bg-white/12 md:rounded-xl"
+                  onClick={() => handleToolModeChange('mask-brush')}
+                  className={`rounded-lg px-3 py-2 text-sm transition md:rounded-xl ${toolMode === 'mask-brush' ? 'bg-blue-500 text-white' : 'bg-white/8 text-white hover:bg-white/12'}`}
                 >
-                  {hasOpenAiMask ? '编辑遮罩' : '添加遮罩'}
+                  涂抹
                 </button>
                 <button
                   onClick={() => handleFlipActiveObject('x')}
@@ -1155,11 +1139,10 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
                   垂直翻转
                 </button>
                 <button
-                  onClick={handleRemoveMaskDraft}
-                  disabled={!hasOpenAiMask}
-                  className="rounded-lg bg-white/8 px-3 py-2 text-sm text-white transition hover:bg-white/12 disabled:cursor-not-allowed disabled:opacity-40 md:rounded-xl"
+                  onClick={handleAddMaskRegion}
+                  className="rounded-lg bg-white/8 px-3 py-2 text-sm text-white transition hover:bg-white/12 md:rounded-xl"
                 >
-                  移除遮罩
+                  区域填色
                 </button>
                 <button
                   onClick={handleAddText}
@@ -1246,6 +1229,71 @@ export default function ReferenceImageEditorModal({ imageId, src, saveMode, onCl
               </section>
             )}
 
+            {showLocalMaskSettings && (
+              <section className="rounded-xl border border-white/10 bg-white/[0.03] p-3 md:rounded-2xl md:p-4">
+                <div className="mb-2 text-xs font-medium uppercase tracking-[0.18em] text-white/45 md:mb-3">填色样式</div>
+                <div className="space-y-3">
+                  <label className="block">
+                    <span className="mb-1 block text-xs text-white/55">透明度</span>
+                    <input
+                      type="range"
+                      min={0.05}
+                      max={1}
+                      step={0.05}
+                      value={maskOpacity}
+                      onChange={(e) => setMaskOpacity(Number(e.target.value))}
+                      className="w-full accent-blue-500"
+                    />
+                    <span className="mt-1 block text-xs text-white/45">{Math.round(maskOpacity * 100)}%</span>
+                  </label>
+                  <label className="block">
+                    <span className="mb-1 block text-xs text-white/55">笔刷大小</span>
+                    <input
+                      type="range"
+                      min={4}
+                      max={160}
+                      step={1}
+                      value={maskWidth}
+                      onChange={(e) => setMaskWidth(Number(e.target.value))}
+                      className="w-full accent-blue-500"
+                    />
+                    <span className="mt-1 block text-xs text-white/45">{maskWidth}px</span>
+                  </label>
+                  <label className="block">
+                    <span className="mb-1 block text-xs text-white/55">颜色</span>
+                    <input
+                      type="range"
+                      min={0}
+                      max={360}
+                      step={1}
+                      value={maskHue}
+                      onChange={(e) => setMaskHue(Number(e.target.value))}
+                      className="w-full"
+                      style={{ accentColor: buildMaskColor(maskHue, 1) }}
+                    />
+                    <span
+                      className="mt-1 block h-6 rounded-lg border border-white/10"
+                      style={{ background: buildMaskColor(maskHue, maskOpacity) }}
+                    />
+                  </label>
+                  <div>
+                    <div className="mb-1 text-xs text-white/55">区域形状</div>
+                    <div className="grid grid-cols-3 gap-2">
+                      {(['rect', 'ellipse', 'triangle'] as const).map((shapeType) => (
+                        <button
+                          key={shapeType}
+                          onClick={() => handleChangeMaskShapeType(shapeType)}
+                          className={`rounded-lg px-3 py-2 text-sm transition md:rounded-xl ${maskShapeType === shapeType ? 'bg-blue-500 text-white' : 'bg-white/8 text-white hover:bg-white/12'}`}
+                        >
+                          {shapeType === 'rect' ? '矩形' : shapeType === 'ellipse' ? '圆形' : '三角'}
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              </section>
+            )}
+
             <section className="rounded-xl border border-white/10 bg-white/[0.03] p-3 md:rounded-2xl md:p-4">
               <div className="mb-2 text-xs font-medium uppercase tracking-[0.18em] text-white/45 md:mb-3">完成</div>
               <div className="grid grid-cols-2 gap-2">

From 7c773a6977af3d274536ccf281de21e179bbed2c Mon Sep 17 00:00:00 2001
From: XianYuDaXian <xian_yu@live.com>
Date: Tue, 28 Apr 2026 15:44:56 +0800
Subject: [PATCH 14/16] =?UTF-8?q?chore:=20=E6=81=A2=E5=A4=8D=20Docker=20wo?=
 =?UTF-8?q?rkflow=20=E5=A4=9A=E6=9E=B6=E6=9E=84=E6=9E=84=E5=BB=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/docker.yml | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/docker.yml b/.github/workflows/docker.yml
index f433cb44..f4e95777 100644
--- a/.github/workflows/docker.yml
+++ b/.github/workflows/docker.yml
@@ -28,18 +28,17 @@ jobs:
       - id: meta
         uses: docker/metadata-action@v5
         with:
-          images: ghcr.io/${{ github.repository }}
+          images: ghcr.io/cooksleep/gpt_image_playground
           tags: |
             type=semver,pattern={{version}}
             type=semver,pattern={{major}}.{{minor}}
-            type=sha,format=short
             type=raw,value=latest,enable=${{ startsWith(github.ref, 'refs/tags/v') }}
 
       - uses: docker/build-push-action@v6
         with:
           context: .
           file: deploy/Dockerfile
-          platforms: linux/amd64
+          platforms: linux/amd64,linux/arm64
           push: true
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}

From 71ecfffa81bfc863f3df9e49a21c759c28621877 Mon Sep 17 00:00:00 2001
From: XianYuDaXian <xian_yu@live.com>
Date: Tue, 28 Apr 2026 16:23:03 +0800
Subject: [PATCH 15/16] =?UTF-8?q?chore:=20=E4=BF=AE=E5=A4=8D=20fork=20Dock?=
 =?UTF-8?q?er=20=E5=8F=91=E5=B8=83=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/docker.yml | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/docker.yml b/.github/workflows/docker.yml
index f4e95777..b32791ca 100644
--- a/.github/workflows/docker.yml
+++ b/.github/workflows/docker.yml
@@ -28,10 +28,11 @@ jobs:
       - id: meta
         uses: docker/metadata-action@v5
         with:
-          images: ghcr.io/cooksleep/gpt_image_playground
+          images: ghcr.io/${{ github.repository }}
           tags: |
             type=semver,pattern={{version}}
             type=semver,pattern={{major}}.{{minor}}
+            type=sha,format=short
             type=raw,value=latest,enable=${{ startsWith(github.ref, 'refs/tags/v') }}
 
       - uses: docker/build-push-action@v6

From effa41a269df5ab5da3d908f4f78a3d8958c31a2 Mon Sep 17 00:00:00 2001
From: XianYuDaXian <xian_yu@live.com>
Date: Tue, 28 Apr 2026 16:37:29 +0800
Subject: [PATCH 16/16] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20Docker=20?=
 =?UTF-8?q?=E4=B8=AD=20Rollup=20=E5=8E=9F=E7=94=9F=E4=BE=9D=E8=B5=96?=
 =?UTF-8?q?=E5=AE=89=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 deploy/Dockerfile | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/deploy/Dockerfile b/deploy/Dockerfile
index 0929096e..a7a08894 100644
--- a/deploy/Dockerfile
+++ b/deploy/Dockerfile
@@ -1,12 +1,19 @@
 # ---- Build stage ----
-FROM node:20-alpine AS build
+# Alpine + npm ci 在 Rollup optional native package 上经常丢依赖，改用 glibc 基础镜像规避。
+FROM node:20-bookworm-slim AS build
 
 WORKDIR /app
+ARG TARGETARCH
 
 ENV VITE_DEFAULT_API_URL=__VITE_DEFAULT_API_URL_PLACEHOLDER__
 
 COPY package.json package-lock.json ./
 RUN npm ci
+RUN case "$TARGETARCH" in \
+    "amd64") npm install --no-save @rollup/rollup-linux-x64-gnu ;; \
+    "arm64") npm install --no-save @rollup/rollup-linux-arm64-gnu ;; \
+    *) echo "Unsupported TARGETARCH: $TARGETARCH" && exit 1 ;; \
+    esac
 
 COPY . .
 RUN npm run build