外部系统嵌入组件

你的后端 ──(Bearer 团队 API Key + 员工标识)──► POST /api/muse/embed-code ──► { code, expiresIn }
    │
    ▼ 把 code 交给前端
你的前端 ──► <iframe src="https://musedam.cc/outer/embed?code=...">
    ◄── musedam-embed-ready
    ──► action: assets-selector-modal-open
    ◄── action_result: { success: true, data: { selectedAssets } }

POST https://open.musedam.cc/api/muse/embed-code
Authorization: Bearer your_api_key
Content-Type: application/json

curl --location --request POST 'https://open.musedam.cc/api/muse/embed-code' \
--header 'Authorization: Bearer your_api_key' \
--header 'Content-Type: application/json' \
--data-raw '{
    "loginEmail": "zhangsan@example.com"
}'

{
    "code": "0",
    "result": {
        "code": "c3f1a9...",
        "expiresIn": 300,
        "userId": "1538720494056386560",
        "orgId": "123"
    }
}

https://musedam.cc/outer/embed?code={code}&theme=light

{
    source: "musedam-app",
    target: "musedam",
    type: "action",
    timestamp: "2026-10-12T10:30:00.000Z",
    dispatchId: "dispatch_1728700000000_abc123", // 唯一 ID，用于匹配结果
    action: "assets-selector-modal-open",
    args: { /* 各组件参数 */ }
}

// 成功
{ type: "action_result", dispatchId, action, result: { success: true, data: { /* 结果 */ } } }

// 失败或取消
{
    type: "action_result",
    dispatchId,
    action,
    result: {
        success: false,
        code: "cancelled" | "forbidden" | "malformed_request" | "internal_server_error",
        message: "..."
    }
}

{
    initialSelectedAssetIds?: number[];
    // 可选择的素材类型，不传则不限制
    // 取值：image、video、audio、js、document、PDocument、excel、font、zip、dll、code、model、triD、url
    allowedTypes?: string[];
    // 各类型数量上限；limit 不传表示该类型不限数量
    dataLimit?: Array<{ type: string; limit?: number }>;
    // 打开时预置的筛选条件，用户仍可在组件内修改
    filters?: {
        types?: string[];
        extensions?: string[];
        size?: { min?: number; max?: number; unit?: 'KB' | 'MB' | 'GB' };
        dimension?: { minWidth?: number; maxWidth?: number; minHeight?: number; maxHeight?: number };
    };
}

{
    selectedItems?: {
        members?: Array<{ id: string; name: string }>;
        departments?: Array<{ id: string; name: string }>;
        groups?: Array<{ id: string; name: string }>;
    };
}

{
    members: Array<{ id: string; name: string; departmentsName?: string; avatarUrl?: string }>;
    departments: Array<{ id: string; name: string }>;
    groups: Array<{ id: string; name: string }>;
}

// args
{
    files: File[];          // 必填，可通过 <input type="file"> 获取
    folderId?: number;      // 目标文件夹 ID，可先用单选文件夹选择器获取
    uploadSource?: string;  // 上传来源标识
    subProjectId?: string;  // 推荐填写，用于区分不同业务的上传
}

// result.data
{
    uploadedFiles: Array<{
        key: string;        // 文件唯一标识，第二步需要使用
        fileName: string;
        fileSize: number;
        fileType: string;
        uploadTime: string;
        url?: string;
    }>;
    failedFiles?: Array<{ fileName: string; error: string }>;
}

// args
{
    subProjectId: string;   // 与上传时一致
    uploadKeys: Array<{ key: string; fileName: string; fileSize: number; fileType: string; uploadTime: string; url?: string }>;
}

// result.data
{
    processedFiles: Array<{ key: string; fileName: string; status: 'success' | 'failed'; error?: string }>;
}

// POST /api/musedam/embed-code —— 你自己的后端接口，需校验当前登录用户
app.post('/api/musedam/embed-code', requireLogin, async (req, res) => {
  const response = await fetch('https://open.musedam.cc/api/muse/embed-code', {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${process.env.MUSEDAM_API_KEY}`,
      'Content-Type': 'application/json',
    },
    // 只为当前登录员工签发，不要直接使用前端传入的邮箱
    body: JSON.stringify({ loginEmail: req.user.email }),
  })
  const body = await response.json()
  if (String(body.code) !== '0') {
    return res.status(400).json({ message: body.message })
  }
  res.json({ code: body.result.code })
})

const MUSEDAM_ORIGIN = 'https://musedam.cc'

async function openMuseDAM(action, args) {
  // 1. 每次打开都向自己的后端获取新的 code
  const { code } = await fetch('/api/musedam/embed-code', { method: 'POST' }).then((r) => r.json())

  // 2. 创建全屏 iframe
  const iframe = document.createElement('iframe')
  iframe.style.cssText = 'position:fixed;inset:0;width:100%;height:100%;border:0;z-index:9999'
  iframe.src = `${MUSEDAM_ORIGIN}/outer/embed?code=${encodeURIComponent(code)}&theme=light`
  document.body.appendChild(iframe)

  const dispatchId = `dispatch_${Date.now()}_${Math.random().toString(36).slice(2)}`

  return new Promise((resolve, reject) => {
    function cleanup() {
      window.removeEventListener('message', onMessage)
      iframe.remove()
    }

    function onMessage(event) {
      // 3. 只处理来自 MuseDAM 嵌入页的消息
      if (event.origin !== MUSEDAM_ORIGIN || event.source !== iframe.contentWindow) return
      const data = event.data || {}

      switch (data.type) {
        case 'musedam-embed-ready':
          // 4. 初始化完成后发送 action
          iframe.contentWindow.postMessage(
            {
              source: 'musedam-app',
              target: 'musedam',
              type: 'action',
              timestamp: new Date().toISOString(),
              dispatchId,
              action,
              args,
            },
            MUSEDAM_ORIGIN,
          )
          break
        case 'musedam-embed-auth-failed':
        case 'musedam-embed-auth-expired':
          cleanup()
          reject(new Error(data.payload?.message || data.type))
          break
        case 'action_result':
          // 5. 按 dispatchId 匹配结果
          if (data.dispatchId !== dispatchId) return
          cleanup()
          data.result?.success
            ? resolve(data.result.data)
            : reject(Object.assign(new Error(data.result?.message), { code: data.result?.code }))
          break
      }
    }

    window.addEventListener('message', onMessage)
  })
}

// 使用：最多选择 5 张图片
openMuseDAM('assets-selector-modal-open', { allowedTypes: ['image'], dataLimit: [{ type: 'image', limit: 5 }] })
  .then(({ selectedAssets }) => console.log('已选择', selectedAssets))
  .catch((error) => error.code !== 'cancelled' && console.error(error))