Pixso SDK

地址: ${domain_name}/app/design/${file_key}

概述

Pixso SDK 提供了一套基于 postMessage 的消息通信机制，支持应用配置、库管理、文件操作等功能。

消息格式

基础格式

监听消息（接收）：

{
  type: "pixso-out-msg",
  name: "消息路径",
  data: { /* 数据内容 */ }
}

发送消息（响应）：

{
  type: "pixso-input-msg",
  name: "消息路径",
  data: { /* 数据内容 */ }
}

通用监听模式

window.addEventListener("message", (event) => {
  const { type, name, data } = event.data;
  if (type !== "pixso-out-msg") return;

  switch (name) {
    case "/app/init":
      // 处理初始化
      break;
    case "/library/list/get":
      // 处理库列表获取
      break;
    // 其他消息处理...
  }
});

API 接口

1. 应用初始化

属性	值
监听路径	/app/init
功能	接收初始化消息，配置应用功能

响应示例：

window.parent.postMessage({
  type: "pixso-input-msg",
  name: "/app/config/set",
  data: {
    hidden_feature: [
      "product_team_component",
      "product_ent_component",
      "import_pip",
      "import_pix",
      "import_sketch",
      "import_xd",
      "import_figma",
      "import_axure",
      "export_pip",
      "export_pix",
      "export_sketch",
      "export_xd",
      "export_pxhm",
      "export_pdf",
      "retrun_back",
      "new_file",
      "file_name",
      "share_file",
      "left_panel_resource",
      "font_cloud_tab",
      "font_external",
      "dev_mode",
      "editor_presentation_mode",
      "editor_open_in_client",
      "history_version_copy",
      "workbench",
      "open_file_picker",
    ],
    enable_feature: [
      "deliver",
      "proxy_network_internal",
      "proxy_library_list",
      "proxy_copy_link",
      "proxy_jump_link",
      "external_library",
    ],
    proxy_suffix: ["pix", "pip", "sketch", "pdf", "pxhm", "zip", "png", "jpg"],
    product_cmp_my_title: "", //原型组件库个人类型title
    product_cmp_my_libraty_title: "", // 原型组件库个人组件库的title
  },
});

配置说明

// 可屏蔽的功能
type HiddenFeature =
  | "product_team_component" // 原型文件团队组件
  | "product_ent_component" // 原型文件企业组件
  | "import_pip" //  菜单————导入 pip 文件
  | "import_pix" //  菜单————导入 pix 文件
  | "import_sketch" //  菜单————导入 sketch 文件
  | "import_xd" //  菜单————导入 xd 文件
  | "import_figma" //  菜单————导入 figma 文件
  | "import_axure" //  菜单————导入 axure 文件
  | "export_pip" //  菜单————导出 pip 文件
  | "export_pix" //  菜单————导出 pix 文件
  | "export_sketch" //  菜单————导出 sketch 文件
  | "export_xd" //  菜单————导出 xd 文件
  | "export_pxhm" //  菜单————导出 pxhm 文件
  | "export_pdf" //  菜单————导出 pdf 文件
  | "retrun_back" // 顶部工具栏————返回按钮
  | "new_file" // 菜单————新建文件
  | "file_name" // 顶部工具栏————文件名
  | "share_file" // 顶部工具栏————分享
  | "left_panel_resource" // 左侧列表————资源
  | "font_cloud_tab" // 字体选择弹窗————团队和企业切换的 tab
  | "font_external" // 字体选择弹窗————三方字体
  | "dev_mode" // 顶部工具栏————研发模式
  | "editor_presentation_mode" // 设计和原型 演示模式
  | "editor_open_in_client" // 在客户端打开
  | "history_version_copy" // 历史版本创建副本
  | "workbench" // 屏蔽工作台
  | "open_file_picker"; // 不使用 windwo.openFilePicker 功能

// 可启动的功能
type EnableFeature =
  | "deliver" // 设计稿交付模式
  | "proxy_network_internal" // 通过 /app/network/internal 获取是否内网, 返回 true 才能导出
  | "proxy_library_list" // 代理资源库列表，通过 /library/list/get 获取资源库
  | "proxy_copy_link" // 代理复制链接，通过 /app/link/copy 复制链接
  | "proxy_jump_link" // 代理跳转链接，通过 /app/jump/link 跳转链接
  | "external_library"; // 外部定制的资源库

// 可代理的文件后缀
type ProxySuffix =
  | "pix"
  | "pip"
  | "sketch"
  | "pdf"
  | "pxhm"
  | "zip"
  | "png"
  | "jpg"
  | string;

2. 团队库管理

属性	值
监听路径	/library/list/get
功能	获取团队库列表

响应示例：

window.parent.postMessage({
  type: "pixso-input-msg",
  name: "/library/list/get",
  data: {
    type: "library-list",
    list: [
      {
        id: "1",
        title: "库名称",
        fileKey: "文件Key",
        securityLevel: "PUBLIC",
      },
    ],
    securityLevel: "当前文档密级",
    sensitiveLevel: "当前文档敏感度",
  },
});

3. 链接处理

复制链接拦截

属性	值
监听路径	/app/link/copy
数据格式	{ url: string }
返回数据	{ url: string }

跳转链接拦截

属性	值
监听路径	/app/link/jump
数据格式	{ url: string }
返回数据	{ url: string }

处理示例：

// 统一处理链接替换
const handleLinkMessage = (name, data) => {
  const newOrigin = "your-domain.com"; // 替换域名
  const newUrl = data.url.replace(new URL(data.url).origin, newOrigin);

  window.parent.postMessage(
    {
      type: "pixso-input-msg",
      name: name,
      data: { url: newUrl },
    },
    "*"
  );
};

4. 用户登出

属性	值
发送路径	/app/logout
数据格式	{ redirect?: boolean, unique_id?: string }
作用域	app/design, app/import
功能	注销登录，默认重定向到登录页

发送示例：

window.parent.postMessage(
  {
    type: "pixso-input-msg",
    name: "/app/logout",
  },
  "*"
);

5. 是否内网

属性	值
监听路径	/app/network/internal
数据格式	{ url: string }
返回数据	{ url: string }

处理示例：

// 统一处理链接替换
const handleNetworkInternal = () => {
  window.parent.postMessage(
    {
      type: "pixso-input-msg",
      name: "/app/network/internal",
      data: boolean, // true 表示内网, false 表示外网
    },
    "*"
  );
};