feat(webdav): add WebDAV synchronization configuration and functionality

2026-07-30 04:44:28 +08:00 · 2026-06-08 14:59:30 +08:00
parent dd9347e85d
commit 39a1e859b1
10 changed files with 845 additions and 4 deletions
@@ -1,10 +1,13 @@
 "use client";

-import { App, Button, Form, Input, Modal, Segmented, Select } from "antd";
+import { App, Button, Form, Input, Modal, Progress, Segmented, Select } from "antd";
+import { Cloud, RefreshCw, Wifi } from "lucide-react";
 import { useState } from "react";

 import { ModelPicker } from "@/components/model-picker";
 import { fetchImageModels } from "@/services/api/image";
+import { syncAppDataToWebdav, type AppSyncDomainKey, type AppSyncProgressEvent } from "@/services/app-sync";
+import { testWebdavConnection, WEBDAV_MANIFEST_FILE_NAME } from "@/services/webdav-sync";
 import { audioFormatOptions, audioVoiceOptions, normalizeAudioSpeedValue } from "@/lib/audio-generation";
 import { filterModelsByCapability, useConfigStore, useEffectiveConfig, type AiConfig, type ModelCapability } from "@/stores/use-config-store";

@@ -16,6 +19,14 @@ type ModelGroup = {
    optionsLabel: string;
 };

+type WebdavDomainProgress = {
+    label: string;
+    stage: string;
+    current?: number;
+    total?: number;
+    status?: "active" | "success" | "exception";
+};
+
 const modelGroups: ModelGroup[] = [
    { capability: "image", modelKey: "imageModel", modelsKey: "imageModels", defaultLabel: "默认生图模型", optionsLabel: "生图模型可选项" },
    { capability: "video", modelKey: "videoModel", modelsKey: "videoModels", defaultLabel: "默认视频模型", optionsLabel: "视频模型可选项" },
@@ -23,11 +34,35 @@ const modelGroups: ModelGroup[] = [
    { capability: "audio", modelKey: "audioModel", modelsKey: "audioModels", defaultLabel: "默认音频模型", optionsLabel: "音频模型可选项" },
 ];

+const webdavDomainKeys: AppSyncDomainKey[] = ["canvas", "assets", "image-workbench", "video-workbench"];
+const webdavDomainLabels: Record<AppSyncDomainKey, string> = {
+    canvas: "画布",
+    assets: "我的素材",
+    "image-workbench": "生图工作台",
+    "video-workbench": "视频创作台",
+};
+
+function createWebdavDomainProgress(): Record<AppSyncDomainKey, WebdavDomainProgress> {
+    return webdavDomainKeys.reduce(
+        (progress, key) => ({
+            ...progress,
+            [key]: { label: webdavDomainLabels[key], stage: "等待同步" },
+        }),
+        {} as Record<AppSyncDomainKey, WebdavDomainProgress>,
+    );
+}
+
 export function AppConfigModal() {
    const { message } = App.useApp();
    const [loadingModels, setLoadingModels] = useState(false);
+    const [testingWebdav, setTestingWebdav] = useState(false);
+    const [syncingWebdav, setSyncingWebdav] = useState(false);
+    const [webdavSyncStatus, setWebdavSyncStatus] = useState("");
+    const [webdavDomainProgress, setWebdavDomainProgress] = useState(createWebdavDomainProgress);
    const config = useConfigStore((state) => state.config);
+    const webdav = useConfigStore((state) => state.webdav);
    const updateConfig = useConfigStore((state) => state.updateConfig);
+    const updateWebdavConfig = useConfigStore((state) => state.updateWebdavConfig);
    const isConfigOpen = useConfigStore((state) => state.isConfigOpen);
    const shouldPromptContinue = useConfigStore((state) => state.shouldPromptContinue);
    const setConfigDialogOpen = useConfigStore((state) => state.setConfigDialogOpen);
@@ -39,6 +74,7 @@ export function AppConfigModal() {
    const effectiveMode = allowCustomChannel ? config.channelMode : "remote";
    const modelConfig = effectiveMode === "remote" ? effectiveConfig : config;
    const modelOptions = config.models.map((model) => ({ label: model, value: model }));
+    const webdavReady = Boolean(webdav.url.trim());

    const finishConfig = () => {
        setConfigDialogOpen(false);
@@ -89,6 +125,57 @@ export function AppConfigModal() {
        if (!next.includes(config[group.modelKey])) updateConfig(group.modelKey, next[0] || "");
    };

+    const testWebdav = async () => {
+        if (!webdavReady) {
+            message.error("请先填写 WebDAV 地址");
+            return;
+        }
+        setTestingWebdav(true);
+        try {
+            await testWebdavConnection(webdav);
+            message.success("WebDAV 连接可用");
+        } catch (error) {
+            message.error(error instanceof Error ? error.message : "WebDAV 连接测试失败");
+        } finally {
+            setTestingWebdav(false);
+        }
+    };
+
+    const updateWebdavProgress = (event: AppSyncProgressEvent) => {
+        setWebdavSyncStatus(event.stage);
+        if (!event.domain) return;
+        setWebdavDomainProgress((current) => ({
+            ...current,
+            [event.domain as AppSyncDomainKey]: {
+                label: event.label || webdavDomainLabels[event.domain as AppSyncDomainKey],
+                stage: event.stage,
+                current: event.current,
+                total: event.total,
+                status: event.status,
+            },
+        }));
+    };
+
+    const syncWebdav = async () => {
+        if (!webdavReady) {
+            message.error("请先填写 WebDAV 地址");
+            return;
+        }
+        setSyncingWebdav(true);
+        setWebdavDomainProgress(createWebdavDomainProgress());
+        setWebdavSyncStatus("准备同步");
+        try {
+            const result = await syncAppDataToWebdav(webdav, updateWebdavProgress);
+            updateWebdavConfig("lastSyncedAt", result.syncedAt);
+            message.success(`同步完成：${result.projects} 个画布，${result.assets} 个素材，${result.imageLogs + result.videoLogs} 条记录，本次上传 ${result.uploadedFiles} 个文件 ${formatBytes(result.uploadedBytes)}`);
+        } catch (error) {
+            setWebdavSyncStatus(error instanceof Error ? error.message : "WebDAV 同步失败");
+            message.error(error instanceof Error ? error.message : "WebDAV 同步失败");
+        } finally {
+            setSyncingWebdav(false);
+        }
+    };
+
    return (
        <Modal
            title={
@@ -218,6 +305,72 @@ export function AppConfigModal() {
                            <Input.TextArea rows={3} value={config.systemPrompt} placeholder="例如：你是一位擅长电影感写实摄影的视觉导演。" onChange={(event) => updateConfig("systemPrompt", event.target.value)} />
                        </Form.Item>
                    ) : null}
+                    <section className="mt-5 rounded-lg border border-stone-200 p-3 dark:border-stone-800">
+                        <div className="mb-3 flex flex-wrap items-start justify-between gap-3">
+                            <div>
+                                <div className="flex items-center gap-2 text-sm font-semibold">
+                                    <Cloud className="size-4" />
+                                    WebDAV 同步
+                                </div>
+                                <div className="mt-1 text-xs text-stone-500">同步画布、我的素材、生成记录和本地媒体文件，不包含 AI API Key；服务不支持 CORS 时可走 Next.js 转发。</div>
+                            </div>
+                            <div className="text-xs text-stone-500">{webdav.lastSyncedAt ? `上次同步 ${formatWebdavTime(webdav.lastSyncedAt)}` : "尚未同步"}</div>
+                        </div>
+                        <div className="grid gap-4 md:grid-cols-2">
+                            <Form.Item label="连接方式" className="mb-4 md:col-span-2">
+                                <Segmented
+                                    block
+                                    value={webdav.proxyMode}
+                                    onChange={(value) => updateWebdavConfig("proxyMode", value as typeof webdav.proxyMode)}
+                                    options={[
+                                        { label: "前端直连", value: "direct" },
+                                        { label: "Next.js 转发", value: "nextjs" },
+                                    ]}
+                                />
+                            </Form.Item>
+                            <Form.Item label="WebDAV 地址" className="mb-4">
+                                <Input value={webdav.url} placeholder="https://nas.example.com/webdav" onChange={(event) => updateWebdavConfig("url", event.target.value)} />
+                            </Form.Item>
+                            <Form.Item label="远程目录" extra={`会在该目录下分业务目录保存，每个目录包含 ${WEBDAV_MANIFEST_FILE_NAME} 和 files/`} className="mb-4">
+                                <Input value={webdav.directory} placeholder="infinite-canvas" onChange={(event) => updateWebdavConfig("directory", event.target.value)} />
+                            </Form.Item>
+                            <Form.Item label="用户名" className="mb-0">
+                                <Input value={webdav.username} autoComplete="username" onChange={(event) => updateWebdavConfig("username", event.target.value)} />
+                            </Form.Item>
+                            <Form.Item label="密码 / 应用密码" className="mb-0">
+                                <Input.Password value={webdav.password} autoComplete="current-password" onChange={(event) => updateWebdavConfig("password", event.target.value)} />
+                            </Form.Item>
+                        </div>
+                        <div className="mt-4 flex flex-wrap items-center gap-2">
+                            <Button icon={<Wifi className="size-4" />} disabled={!webdavReady || syncingWebdav} loading={testingWebdav} onClick={() => void testWebdav()}>
+                                测试连接
+                            </Button>
+                            <Button type="primary" icon={<RefreshCw className="size-4" />} disabled={!webdavReady || testingWebdav} loading={syncingWebdav} onClick={() => void syncWebdav()}>
+                                {syncingWebdav ? "同步中" : "立即同步"}
+                            </Button>
+                            {webdavSyncStatus ? <span className="text-xs text-stone-500">{webdavSyncStatus}</span> : null}
+                        </div>
+                        {syncingWebdav || webdavSyncStatus ? (
+                            <div className="mt-3 grid gap-2">
+                                {webdavDomainKeys.map((key) => {
+                                    const item = webdavDomainProgress[key];
+                                    const count = item.total ? `${item.current || 0}/${item.total}` : "";
+                                    return (
+                                        <div key={key} className="rounded-md border border-stone-200 px-3 py-2 dark:border-stone-800">
+                                            <div className="mb-1 flex min-w-0 items-center justify-between gap-3 text-xs">
+                                                <span className="shrink-0 font-medium text-stone-700 dark:text-stone-200">{item.label}</span>
+                                                <span className="min-w-0 truncate text-right text-stone-500">
+                                                    {item.stage}
+                                                    {count ? ` · ${count}` : ""}
+                                                </span>
+                                            </div>
+                                            <Progress percent={getWebdavProgressPercent(item)} size="small" status={getWebdavProgressStatus(item)} showInfo={false} />
+                                        </div>
+                                    );
+                                })}
+                            </div>
+                        ) : null}
+                    </section>
                </Form>
            </div>
        </Modal>
@@ -237,3 +390,33 @@ function resolveNextCapabilityModels(current: string[], suggested: string[], all
 function uniqueModels(models: string[]) {
    return Array.from(new Set(models.map((model) => model.trim()).filter(Boolean)));
 }
+
+function formatWebdavTime(value: string) {
+    return new Date(value).toLocaleString("zh-CN", { month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" });
+}
+
+function getWebdavProgressPercent(item: WebdavDomainProgress) {
+    if (item.status === "success") return 100;
+    if (item.total) return Math.min(100, Math.round(((item.current || 0) / item.total) * 100));
+    if (item.status === "exception") return 100;
+    if (item.stage === "等待同步") return 0;
+    if (item.stage === "读取远端清单") return 12;
+    if (item.stage === "读取本地数据") return 24;
+    if (item.stage === "下载缺失媒体") return 36;
+    if (item.stage === "写入本地合并结果") return 58;
+    if (item.stage === "上传新增媒体") return 66;
+    if (item.stage === "媒体已齐全" || item.stage === "媒体无需上传") return 74;
+    if (item.stage.startsWith("上传清单")) return 90;
+    return item.status === "active" ? 30 : 0;
+}
+
+function getWebdavProgressStatus(item: WebdavDomainProgress): "normal" | "active" | "success" | "exception" {
+    if (item.status === "success" || item.status === "exception") return item.status;
+    return item.status === "active" ? "active" : "normal";
+}
+
+function formatBytes(bytes: number) {
+    if (bytes < 1024) return `${bytes}B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)}KB`;
+    return `${(bytes / 1024 / 1024).toFixed(1)}MB`;
+}