Parsewise UI 组件库
组件库
技能的界面由现成的积木拼成。 卡片、开关、图库和表单 — 全在对话里。每一块都是一个 data 属性:你在 drawer.html 里写好标记,挂件自己把组件装出来。
个组件
卡片、选择、输入、媒体
个事件
在抽屉宿主上
行 CSS
只有 Tailwind 和 data 属性
观察器
MutationObserver 捕捉动态变化
开箱即用的组件
你写标记,挂件负责组装。 组件以 data 属性声明,并通过 MutationObserver 处理:静态标记和 JS 动态创建都支持。用户事件会派发到抽屉宿主上。
卡片

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

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

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

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

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

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

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

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

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

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

照片和视频的拖放区,通过预签名 URL 上传到对象存储。
系统内已对齐
样式隔离在 Shadow DOM 中。 你只写 Tailwind,品牌色由 skill-primary 系列工具类提供,输入框和开关的高度也事先对齐过。
个 skill-primary 工具类
text, bg, ring, border, fill
控件高度
输入与选择高度一致
单个资源上限
PNG, JPG, WebP, SVG, GIF
个包内文件
自动上传到存储
技能跑在沙箱里
开发者的问题
在 drawer.html 里用 data 属性:<div data-radio-switch data-options="…">。挂件通过 MutationObserver 处理它 — 静态标记和 JS 动态创建都支持。
搭一个自己的技能
从文件到被调用。 组件库、.skill 格式和技能编辑器在免费套餐里就能用 — 无需银行卡。
用你自己的数据试一试
上传你的文档和商品目录,然后把别人问你的问题拿去问助手。 这是唯一有意义的检验。

-poster.webp&w=2048&q=75)

