feat(ark-assets): 方舟素材库 - 支持私域素材授权 (#294)

web/src/pages/admin/components/admin-shell.tsx

@@ -3,6 +3,7 @@ import {
     ArrowLeft,
     BarChart3,
     BellRing,
+    CloudUpload,
     Coins,
     FileClock,
     HardDrive,
@@ -74,6 +75,7 @@ const adminNavigation: Array<{ label: string; items: AdminNavigationItem[] }> =
             { path: "/admin/settings/access", label: "登录与注册", description: "注册策略与 Linux.do", icon: <ShieldCheck className="size-4" /> },
             { path: "/admin/settings/email", label: "邮件服务", description: "注册验证码 SMTP", icon: <Mail className="size-4" /> },
             { path: "/admin/settings/storage", label: "存储服务", description: "对象存储与资源存储", icon: <HardDrive className="size-4" /> },
+            { path: "/admin/settings/ark-private-assets", label: "方舟素材库", description: "Seedance 可信参考素材", icon: <CloudUpload className="size-4" /> },
             { path: "/admin/settings/response-interception", label: "模型响应拦截", description: "替换用户可见的上游异常", icon: <ShieldAlert className="size-4" /> },
             { path: "/admin/settings/third-party", label: "第三方参数配置", description: "集中维护第三方平台凭证", icon: <KeyRound className="size-4" /> },
         ],

web/src/pages/admin/settings/ark-private-assets-settings-page.tsx

@@ -0,0 +1,120 @@
+import { App, Button, Form, Input, Switch } from "antd";
+import { CloudUpload, KeyRound, Save } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+
+import { getAdminArkPrivateAssetSetting, updateAdminArkPrivateAssetSetting, type AdminArkPrivateAssetSetting } from "@/services/api/auth";
+import { useAdminContext } from "../admin-context";
+import { AdminPageFrame } from "../components/admin-shell";
+import { AdminStatusBadge, configuredSecretText, SettingsSectionCard } from "../components/admin-ui";
+
+type ArkPrivateAssetForm = {
+    enabled: boolean;
+    region: string;
+    projectName: string;
+    accessKeyId: string;
+    accessKeySecret: string;
+};
+
+export default function ArkPrivateAssetsSettingsPage() {
+    const { message } = App.useApp();
+    const { references } = useAdminContext();
+    const [setting, setSetting] = useState<AdminArkPrivateAssetSetting | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [saving, setSaving] = useState(false);
+    const [form] = Form.useForm<ArkPrivateAssetForm>();
+    const enabled = Form.useWatch("enabled", form) ?? false;
+    const userNameById = useMemo(() => new Map(references.users.map((user) => [user.id, user.displayName || user.username])), [references.users]);
+
+    useEffect(() => {
+        let cancelled = false;
+        void getAdminArkPrivateAssetSetting()
+            .then(({ setting: value }) => {
+                if (cancelled) return;
+                setSetting(value);
+                form.setFieldsValue(toFormValues(value));
+            })
+            .catch((error) => {
+                if (!cancelled) message.error(error instanceof Error ? error.message : "读取方舟素材库配置失败");
+            })
+            .finally(() => {
+                if (!cancelled) setLoading(false);
+            });
+        return () => { cancelled = true; };
+    }, [form, message]);
+
+    const save = async () => {
+        const values = await form.validateFields();
+        if (values.enabled && !values.accessKeySecret.trim() && !setting?.hasAccessKeySecret) {
+            message.error("请填写 IAM SecretKey");
+            return;
+        }
+        setSaving(true);
+        try {
+            const result = await updateAdminArkPrivateAssetSetting({
+                enabled: values.enabled,
+                region: values.region.trim(),
+                projectName: values.projectName.trim(),
+                accessKeyId: values.accessKeyId.trim(),
+                accessKeySecret: values.accessKeySecret.trim(),
+            });
+            setSetting(result.setting);
+            form.setFieldsValue(toFormValues(result.setting));
+            message.success("方舟素材库配置已保存");
+        } catch (error) {
+            message.error(error instanceof Error ? error.message : "保存方舟素材库配置失败");
+        } finally {
+            setSaving(false);
+        }
+    };
+
+    return (
+        <AdminPageFrame title="方舟素材库" description="为 Seedance 参考图配置后端可信素材导入" scroll>
+            <div className="pt-4">
+                <SettingsSectionCard
+                    icon={<CloudUpload className="size-4" />}
+                    title="私域虚拟人素材"
+                    description="系统仅在用户启用自动同步且参考图属于当前用户素材库时，才会用 IAM 凭据上传并等待审核。"
+                    status={<AdminStatusBadge label={setting?.enabled ? "已启用" : "未启用"} tone={setting?.enabled ? "success" : "neutral"} />}
+                    footer={(
+                        <>
+                            <span className="text-xs text-foreground/45">{setting?.updatedAt ? `上次更新：${formatTime(setting.updatedAt)}${setting.updatedBy ? ` · ${userNameById.get(setting.updatedBy) || setting.updatedBy}` : ""}` : "尚未保存方舟素材库配置"}</span>
+                            <Button type="primary" icon={<Save className="size-4" />} loading={saving} disabled={loading} onClick={() => void save()}>保存配置</Button>
+                        </>
+                    )}
+                >
+                    <Form form={form} layout="vertical" requiredMark={false} disabled={loading || saving} className="grid gap-x-4 px-4 pb-4 pt-4 md:grid-cols-2">
+                        <Form.Item name="enabled" label="启用可信素材同步" valuePropName="checked" className="md:col-span-2">
+                            <Switch checkedChildren="启用" unCheckedChildren="停用" />
+                        </Form.Item>
+                        <Form.Item name="region" label="Region" rules={[{ required: enabled, message: "请填写方舟 Region" }]}>
+                            <Input autoComplete="off" placeholder="部署方的方舟 Region" />
+                        </Form.Item>
+                        <Form.Item name="projectName" label="Ark ProjectName" rules={[{ required: enabled, message: "请填写 Ark ProjectName" }]}>
+                            <Input autoComplete="off" placeholder="部署方的 Ark ProjectName" />
+                        </Form.Item>
+                        <Form.Item name="accessKeyId" label="IAM AccessKey" rules={[{ required: enabled, message: "请填写 IAM AccessKey" }]}>
+                            <Input autoComplete="off" prefix={<KeyRound className="size-4 text-foreground/35" />} placeholder="仅保存在服务端" />
+                        </Form.Item>
+                        <Form.Item name="accessKeySecret" label={setting?.hasAccessKeySecret ? `IAM SecretKey（${configuredSecretText}）` : "IAM SecretKey"}>
+                            <Input.Password autoComplete="new-password" placeholder={setting?.hasAccessKeySecret ? "留空保留原密钥" : "仅保存在服务端"} />
+                        </Form.Item>
+                    </Form>
+                </SettingsSectionCard>
+            </div>
+        </AdminPageFrame>
+    );
+}
+
+function toFormValues(setting: AdminArkPrivateAssetSetting): ArkPrivateAssetForm {
+    return {
+        enabled: setting.enabled,
+        region: setting.region || "",
+        projectName: setting.projectName || "",
+        accessKeyId: setting.accessKeyId || "",
+        accessKeySecret: "",
+    };
+}
+
+function formatTime(value: string) {
+    return new Date(value).toLocaleString("zh-CN", { hour12: false });
+}

web/src/pages/canvas/canvas-project-context-menu.tsx

@@ -34,6 +34,7 @@ type CanvasProjectContextMenuProps = {
     onGenerateImage: (node: CanvasNodeData) => void;
     onCopyContent: (node: CanvasNodeData | null) => void;
     onCopyMediaUrl: (node: CanvasNodeData | null) => void;
+    onUploadToArkPrivateAsset: (node: CanvasNodeData) => void;
     onSetAssetCategory: (nodeId: string, category: CanvasAssetCategory) => void;
     onToggleFrame: (node: CanvasNodeData) => void;
 };
@@ -92,6 +93,9 @@ export function CanvasProjectContextMenu({ menu, node, screenToCanvas, ...props
             }}
             onCopyContent={() => props.onCopyContent(node)}
             onCopyMediaUrl={() => props.onCopyMediaUrl(node)}
+            onUploadToArkPrivateAsset={() => {
+                if (node?.type === CanvasNodeType.Image) props.onUploadToArkPrivateAsset(node);
+            }}
             onSetAssetCategory={(category) => {
                 if (menu.type === "node") props.onSetAssetCategory(menu.nodeId, category);
             }}

web/src/pages/canvas/project.tsx

@@ -7,7 +7,9 @@ import { uploadMediaFile } from "@/services/file-storage";
 import { readLocalRuntimeBootstrapState } from "@/services/local-runtime-bootstrap";
 import { createCanvasGenerationLiveProjectAdapter, registerCanvasGenerationLiveProject } from "@/services/canvas-generation-consumer";
 import { getActiveUserScope } from "@/lib/user-scope";
-import { resourceFileUrl, resourceIdFromStorageKey } from "@/services/api/resources";
+import { resourceFileUrl, resourceIdFromStorageKey, syncResourceToArkPrivateAsset } from "@/services/api/resources";
+import { uploadImage } from "@/services/image-storage";
+import { imageMetadata } from "@/lib/canvas/canvas-generation-task-sync";
 import copyToClipboard from "copy-to-clipboard";
 import { nanoid } from "nanoid";
 import { canvasThemes, type CanvasBackgroundMode } from "@/lib/canvas-theme";
@@ -20,7 +22,7 @@ import { flushCanvasStorePersistence } from "@/stores/canvas/use-canvas-store";
 import { ensureCanvasNodeAsset } from "@/services/project-asset-sync";
 import { useThemeStore } from "@/stores/use-theme-store";
 import { useUserStore } from "@/stores/use-user-store";
-import { App } from "antd";
+import { App, Modal } from "antd";
 import { getNodeSpec } from "@/constant/canvas";
 import { CanvasConfigComposer } from "@/components/canvas/canvas-config-composer";
 import { CanvasConfigNodePanel } from "@/components/canvas/canvas-config-node-panel";
@@ -201,6 +203,7 @@ function InfiniteCanvasPage() {
     const [tapNowImportOpen, setTapNowImportOpen] = useState(false);
     const [nodeSearchOpen, setNodeSearchOpen] = useState(false);
     const [toolbarNodeId, setToolbarNodeId] = useState<string | null>(null);
+    const [arkPrivateAssetUploadNodeId, setArkPrivateAssetUploadNodeId] = useState<string | null>(null);
     const [nodeImageSettingsOpen, setNodeImageSettingsOpen] = useState(false);
     const [dialogNodeId, setDialogNodeId] = useState<string | null>(null);
     const [textEditorNodeId, setTextEditorNodeId] = useState<string | null>(null);
@@ -1366,6 +1369,42 @@ function InfiniteCanvasPage() {
         [message, releaseCopiedNodesPastePriority],
     );
 
+    const uploadNodeImageToArkPrivateAsset = useCallback(async (node: CanvasNodeData) => {
+        if (node.type !== CanvasNodeType.Image || !node.metadata?.content) {
+            message.warning("请选择一张可用图片后再上传");
+            return;
+        }
+        if (arkPrivateAssetUploadNodeId === node.id) return;
+        const feedbackKey = `ark-private-asset-${node.id}`;
+        setArkPrivateAssetUploadNodeId(node.id);
+        message.loading({ key: feedbackKey, content: "正在保存并上传到方舟素材库...", duration: 0 });
+        try {
+            let resourceID = resourceIdFromStorageKey(node.metadata.storageKey);
+            if (!resourceID) {
+                const uploaded = await uploadImage(node.metadata.content);
+                resourceID = resourceIdFromStorageKey(uploaded.storageKey);
+                if (!resourceID) throw new Error("图片未能保存到系统素材库，请检查对象存储配置后重试");
+                handleConfigNodeChange(node.id, imageMetadata(uploaded));
+            }
+            await syncResourceToArkPrivateAsset(resourceID);
+            message.success({ key: feedbackKey, content: "已同步到方舟素材库，Seedance 将自动复用该素材", duration: 4 });
+        } catch (error) {
+            message.error({ key: feedbackKey, content: error instanceof Error ? error.message : "上传到方舟素材库失败", duration: 5 });
+        } finally {
+            setArkPrivateAssetUploadNodeId((current) => current === node.id ? null : current);
+        }
+    }, [arkPrivateAssetUploadNodeId, handleConfigNodeChange, message]);
+
+    const confirmUploadNodeImageToArkPrivateAsset = useCallback((node: CanvasNodeData) => {
+        Modal.confirm({
+            title: "上传到方舟素材库",
+            content: "仅可上传你拥有肖像、版权或其他合法使用权的图片。方舟审核通过后，Seedance 会使用受控素材标识生成视频。",
+            okText: "确认拥有使用权并上传",
+            cancelText: "取消",
+            onOk: () => uploadNodeImageToArkPrivateAsset(node),
+        });
+    }, [uploadNodeImageToArkPrivateAsset]);
+
     const handleCanvasContextMenu = useCallback(
         (event: ReactMouseEvent) => {
             const target = event.target instanceof Element ? event.target : null;
@@ -2224,6 +2263,7 @@ function InfiniteCanvasPage() {
                         onCopyMediaUrl={(node) => {
                             void copyNodeMediaUrlToClipboard(node);
                         }}
+                        onUploadToArkPrivateAsset={confirmUploadNodeImageToArkPrivateAsset}
                         onSetAssetCategory={(nodeId, assetCategory) => handleConfigNodeChange(nodeId, { assetCategory })}
                         onToggleFrame={(node) => handleFrameToggle(node.id)}
                     />