配置项
你可以在配置页设置转码、图片相关配置。
| 配置项 | 描述 | 类型定义 |
|---|---|---|
| 转码模式 | 样式框架的不同， scss、tailwind 或 emotion。开启 tailwind 后将无法在 CodeSandbox 预览 | 'jsx+scss' | 'jsx+tailwind' | 'jsx+emotion' |
| 转码优化 | 可选 Scss 重复样式提取为 Mixin、去除冗余节点、修正图层结构、修正矩形背景。使用文档 | |
| BoxSizing | 影响宽高的计算，需与你的项目设置保持一致。在 Tailwind 项目一般需要开启 | 'content-box' | 'border-box ' |
| 颜色格式 | 可选 hex 或 rgb。hex 没有透明度时，不添加最后两位。rgb 使用的语法是 rgb(R G B[ / A]) | |
| 转码倍率 更新 | 用于出码时等比例缩放 CSS 尺寸，适用于设计稿是 2 倍稿或者 n 倍稿场景场景。使用文档 | number |
| 使用 margin 代替 gap | 出码时使用 margin 替换为 column-gap 或 row-gap | |
| 复制代码模式 | 影响点击复制按钮时的拷贝内容。整个文件包含组件和引用，仅JSX 仅包含模板代码 | 'file' | 'template' |
| 图片接口 | 自定义图片上传接口时选择 custom | 'default' | 'extranet' | 'custom' |
Tailwind 配置
转码模式选择 jsx+tailwind 后，样式将会匹配为 tailwind 默认的 class。
tailwind 打开后，可在插件配置 Tailwind 的 config.js 文件。D2C 过程中根据颜色和尺寸实际值，自动映射到 tailwindcss 的主题。
下图展示了使用 Tailwind 配置文件和默认生成的 class 的区别，使用配置文件后，将会匹配项目中预设的类名以及 css 变量。
点击 D2C 支持 tailwindcss 主题配置 查看如何使用。
自定义图床
图片上传接口用于上传转码时的图片、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 无此限制