Pixso 编辑器配置说明

设计编辑器功能

顶栏

左侧菜单

功能 ID说明
editor_return_back返回按钮
editor_top_menu_left左侧菜单
new_file新建文件
editor_deep_search深度搜索
editor_edit_menu编辑
editor_object_menu对象
editor_text_menu文本
editor_align_menu排列
editor_user_preferences用户偏好设置
editor_history_versions历史版本
editor_shortcuts_guide快捷键指南
editor_open_in_client在客户端打开
editor_import导入
editor_import_pix导入 Pixso
editor_import_sketch导入 Sketch
editor_import_xd导入 XD
editor_import_figma导入 Figma
editor_import_axure导入 axure
editor_export导出
editor_export_pix导出 Pixso
editor_export_sketch导出 Sketch
editor_export_xd导出 XD
editor_export_pxhm导出 Pxhm
editor_export_pdf导出 PDF
editor_about_pixso关于 Pixso

文件管理

功能 ID说明
editor_file_name文件名
editor_folder_name项目名
editor_top_menu_file文件管理
editor_publish_styles发布样式和组件
editor_rename重命名
editor_view_history查看历史版本
editor_collect收藏
editor_duplicate创建副本
editor_move_file移动文件
editor_delete_file删除文件

中间图标与右侧

功能 ID说明
editor_top_menu_middle中间图标
editor_top_menu_aiAI
editor_top_menu_right右侧
editor_right_portrait协作头像
editor_plugins插件
editor_learn_explore学习与探索
editor_share分享
editor_developer_mode研发者模式
editor_presentation_mode演示模式
editor_menu_zoom画布设置

左栏

功能 ID说明
editor_left_layer图层
editor_left_layer_search搜索
editor_left_page_list页面列表
editor_left_layer_list图层列表
editor_left_component组件
editor_left_component_search组件搜索
editor_left_component_library_list订阅的组件库列表
editor_left_component_library_entry组件库入口
editor_left_resource资源
editor_left_resource_list内置资源列表
editor_left_resource_more探索更多资源入口

右栏

功能 ID说明
editor_right_design设计面板
editor_right_prototype原型
editor_right_developer_mode研发模式

底栏

功能 ID说明
editor_bottom_selection移动
editor_bottom_hand手型
editor_bottom_comments评论

历史版本

功能 ID说明
editor_history_version_copy历史版本创建副本

功能层级关系

  • 顶栏左侧菜单

    • 新建文件
    • 深度搜索
    • 编辑
    • 对象
    • 文本
    • 排列
    • 用户偏好设置
    • 历史版本
    • 快捷键指南
    • 在客户端打开
    • 导入
    • 导出
    • 关于 Pixso

  • 顶栏文件管理

    • 发布样式和组件
    • 重命名
    • 查看历史版本
    • 收藏
    • 创建副本
    • 移动文件
    • 删除文件

  • 顶栏中间图标

    • AI

  • 顶栏右侧

    • 协作头像
    • 插件
    • 学习与探索
    • 分享
    • 研发者模式
    • 演示模式
    • 画布设置

  • 左栏图层

    • 搜索
    • 页面列表
    • 图层列表

  • 左栏组件

    • 组件搜索
    • 订阅的组件库列表
    • 组件库入口

  • 左栏资源

    • 内置资源列表
    • 探索更多资源入口

原型编辑器功能

顶栏

功能 ID说明
product_import_pip导入 pip 文件
product_presentation_mode演示模式
product_return_back返回工作台
product_create_file新建文件
product_file_name文件名
product_folder_name项目名
product_share_file分享文件
product_export_pip导出 pip 文件
product_export_pdf导出 pdf

左栏

功能 ID说明
product_team_component团队组件库
product_ent_component企业组件库

其他

功能 ID说明
font_cloud_team字体列表-云端字体-团队 tab
font_external字体列表-三方字体
open_file_picker是否禁用 window.showOpenFilePicker api
file_share_project_level文件分享弹窗项目权限展示
file_share_team_level文件分享弹窗团队权限展示
file_share_contact_change_level文件分享下联系人弹窗设置权限

配置说明

功能配置采用 JSON 格式：

{
	"hidden_feature": [],
	"link_replace": {},
	"file_share_iframe": {}
}
  • hidden_feature：需要隐藏展示的功能 id 数组
  • link_replace：需要替换跳转链接的功能 id 以及要跳转的链接的映射
  • file_share_iframe：需要替换文件分享弹窗为 iframe 的设置，支持配置内嵌地址 url，以及弹窗标题 title

目前仅支持以下功能 id：

  • editor_return_back - 设计编辑器返回按钮
  • product_return_back - 原型编辑器返回按钮
  • editor_presentation_mode - 设计编辑器演示模式
  • product_presentation_mode - 原型编辑器演示模式

file_share_iframe

字段说明：

  • url：内嵌 iframe 的地址 并在 url 中带上以下字段数据
    • file_key：当前文件的 file_key
    • theme：当前的主题模式
      • default： 浅色模式
      • dark： 深色模式
  • title：弹窗标题

支持接收 messagge 消息：

size

设置弹窗宽高

//消息结构
{
    "type": "size",
    "data": {
        "width": 452,
        "height": 148,
    },
}，
toast

调用 toast 提示

//消息结构
{
    "type": "toast",
    "data": {
        "msg": "",
        "icon": "success" | "error" | "warn" | "info",
    },
}

使用示例

{
	"hidden_feature": [
		"editor_top_menu_left",
		"editor_deep_search",
		"editor_edit_menu",
		"editor_left_layer",
		"editor_right_design",
		"editor_bottom_comments"
	],
	"link_replace": {
		"editor_return_back": "https://example.cn/"
	},
	"file_share_iframe": {
		"url": "https://example.com/share",
		"title": "自定义分享"
	}
}