全局设置

设计稿转代码全局设置

入口

在插件的右下角,点击设置按钮。

配置项

你可以在配置页设置转码、图片相关配置。
配置项描述接口
转码模式可选的转码模式。开启 tailwind 后将无法预览,你可以复制代码到项目中进行查看效果'jsx+scss' | 'jsx+tailwind'
复制代码模式file 包含组件和引用,template 仅包含模板代码'file' | 'template'
展示复制 JSON 按钮是否在转码页面展示复制 JSON 按钮boolean
图片接口自定义图片上传接口时选择 custom'default' | 'extranet' | 'custom'
图床配置自定义图片上传接口时,可通过自定义 header 或自定义 body 传递图层的鉴权 tokenImageUploadConfig
转码插件配置配置自定义转码插件TransformPluginOptions

ImageUploadConfig

TransformPluginOptions

详细内容查看转码插件

自定义图床

图片上传接口用于上传转码时的图片、js、css、json 文件。社区版插件默认接口上传后的文件仅会保存 3h,如需存储更长时间,需要自定义图片上传服务。
D2C 插件会直接请求你的图片地址,不会存储你的图床信息。

鉴权方式

你可以选择以下方式进行鉴权,配置后将透传到你请求的接口:
  • query:将鉴权 token 直接拼接在 URL 里
  • header:将鉴权 token 通过 header 传递
  • body:将鉴权 token 通过 body 传递
如不配置鉴权,请注意不要将你的图床接口暴露给外部。

返回值

接口返回值需要包含图片的 url,类型如下。

注意

  • 注意请求体通过 multipart/form-data 编码,所以你需要有对应的库解析请求体
  • 对文件进行处理时,请注意文件的 key 为 file。请求体的其他字段是你自定义的
  • 根据你使用的框架配置跨域的响应头
    • Access-Control-Allow-Origin: https://semi.design
    • Access-Control-Allow-Methods: POST, GET, OPTIONS
  • 接口必须为 https 协议,调试时浏览器对 localhost 无此限制

示例

© 2021 - 2024 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED

  • 开始
    • 介绍
    • 快速开始
    • 选型对比
    • 相关术语
    • 常见问题
    • 更新日志
  • 研发使用手册
    • 代码转译
    • 标记图层
    • 标记表格
    • 标记组件库
    • 标记图标库
    • 设计稿检查
    • 转码插件
    • 故障排除
    • 基础转换原理
    • 支持组件列表
    • 全局设置
  • 设计使用手册
    • 使用 Semi Variants
    • 自定义 Variants
    • 设计稿规范
    • 使用 Table 组件
    • 使用 Form 组件
    • 迁移旧设计稿
  • 更多
    • 联系我们
    • 路线图
    • JSON Schema
    • 已知问题