Parsewise UI 组件库

01面向开发者 · UI 组件库

技能的界面由现成的积木拼成。 卡片、开关、图库和表单 — 全在对话里。每一块都是一个 data 属性:你在 drawer.html 里写好标记,挂件自己把组件装出来。

01

个组件
卡片、选择、输入、媒体

02

个事件
在抽屉宿主上

03

行 CSS
只有 Tailwind 和 data 属性

04

观察器
MutationObserver 捕捉动态变化

02目录 · 组件

你写标记,挂件负责组装。 组件以 data 属性声明,并通过 MutationObserver 处理:静态标记和 JS 动态创建都支持。用户事件会派发到抽屉宿主上。

data-card · data-card-horizontal

卡片

上图下文的竖版,或应用商店风格的横版:标题、文字,加一个圆形或圆角图标。

data-radio-switch

单选开关

带滑动指示的胶囊开关,支持 N 个选项。用 radio-switch--disabled 类禁用。

data-select-grid

选择网格

两到三列的可点单元格:标签、数值、说明。同一时间只有一个选中。

data-select-list

选择列表

带标题和描述的行 — 单列排布的互斥选项。

data-suggest-input

自动补全

通过后端建议代理提供下拉候选的输入框。候选列表在文档流中,会把下方内容顶开。

input-wrapper · input-field

输入框与表格

现成的输入框样式类,配 Tailwind 结果网格 — 间距本身就是视觉分隔。

data-emoji-rate

表情评分

三个动效表情 — 差、一般、很好。用于快速收集反馈和评价。

data-action

动作按钮

带自动品牌图标的链接(Telegram、WhatsApp、拨号),或带 Heroicons 图标的回调按钮。

data-gallery

图库

带 Fancybox 灯箱的缩略图网格。链接可以是直链,也可以走包内资源 {{asset:…}}.

data-detail-list

明细列表

汇总卡:带分隔线的「标签 → 值」行。用于提交前确认。

data-file-upload

文件上传

照片和视频的拖放区,通过预签名 URL 上传到对象存储。

03组件库 · 数据

样式隔离在 Shadow DOM 中。 你只写 Tailwind,品牌色由 skill-primary 系列工具类提供,输入框和开关的高度也事先对齐过。

01

个 skill-primary 工具类
text, bg, ring, border, fill

02

控件高度
输入与选择高度一致

03

单个资源上限
PNG, JPG, WebP, SVG, GIF

04

个包内文件
自动上传到存储

06沙箱 · 规则

隔离
样式在 Shadow DOM 里
只用 Tailwind
不用写自己的 CSS
抽屉参数
DOM、数据、参数
API 辅助方法
语言、提交、邮件
危险的 JS
会被校验器拒绝
外部请求
走挂件代理
07FAQ · 面向开发者

在 drawer.html 里用 data 属性:<div data-radio-switch data-options="…">。挂件通过 MutationObserver 处理它 — 静态标记和 JS 动态创建都支持。

开始使用

上传你的文档和商品目录,然后把别人问你的问题拿去问助手。 这是唯一有意义的检验。