信息流卡片编辑器

作者 kentpan累计访问 58近 7 日访问 0

// preview

// description

可视化编辑多类信息流卡片，并实时预览、保存和导出配置

信息流卡片样式编辑器是一款面向网页开发与内容配置的交互式工具。页面内置信息卡、源码卡、联盟卡和对比卡，用户可以为每种类型调整背景、文字、圆角、间距、阴影、边框和图片尺寸等样式，也能通过字段表单或 data JSON 修改标题、描述、价格、标签、链接和统计文案。编辑结果会同步反映在卡片预览和组件接入代码中，并可切换手机、Pad、PC、自定义尺寸以及单卡、信息流列表视图。卡片配置可按套件组织并保存至浏览器本地，还提供 JSON 导出、复制代码和新增自定义类型入口。

核心亮点

四类内置卡片

覆盖信息、商品、联盟与对比

配置实时联动

表单、JSON、预览和代码同步

多设备预览

支持手机、Pad、PC尺寸

开发接入输出

提供JSON导出与组件示例

如何使用

选择卡片类型
从顶部类型栏选择信息卡、源码卡、联盟卡或对比卡，页面会载入对应的内容字段、专属样式、默认数据和卡片预览。
调整样式与数据
在左侧修改背景、文字、圆角、间距、阴影和边框等通用参数，再按需要展开专属样式；可使用字段表单编辑内容，也可直接修改合法的 data JSON，预览和接入代码会实时同步。
检查不同展示方式
使用预览区上方的手机、Pad、PC 或自定义尺寸按钮检查响应式效果，并在单卡与信息流列表之间切换，确认卡片在不同容器中的呈现。
保存或导出成果
为当前卡片套命名后点击保存数据，将配置写入浏览器本地存储；需要用于开发时可复制页面下方的组件代码，或通过导出按钮获取 JSON 配置。