用JSX构建跨平台交互卡片Chat SDK Cards完全教程Block Kit与Adaptive Cards【免费下载链接】chatUniversal chat layer for building bots and agents.项目地址: https://gitcode.com/gh_mirrors/chat67/chatChat SDK 的 Cards 功能让你用一套 JSX 组件即可在 Slack、Microsoft Teams、Discord、Google Chat 等平台上发送带按钮、字段和图片的交互式卡片同一个卡片在 Slack 渲染为Block Kit在 Teams 渲染为Adaptive Cards你无需针对每个平台重写代码。本文是面向新手的完整教程带你从零掌握跨平台交互卡片的构建方法。为什么需要跨平台交互卡片传统聊天机器人往往为每个平台单独写 UISlack 用一套 JSON 结构Teams 用另一套Discord 又是第三套。Chat SDK 用统一的Card抽象层解决这个问题一份代码多端渲染适配器负责把卡片转换成各平台的原生格式交互事件统一路由按钮点击、下拉选择都通过同一个onAction处理自动降级平台不支持的特性会自动回退为纯文本消息不会发送失败核心转换器代码位于 packages/adapter-slack/src/cards.tsSlack Block Kit 转换和 packages/adapter-teams/src/cards.tsTeams Adaptive Cards 转换可以直观看到「一次编写、处处渲染」是如何实现的。3步快速上手从安装到发出第一张卡片第 1 步安装 Chat SDK 与适配器按需安装你要连接的平台适配器例如 Slack 适配器位于 packages/adapter-slack/Teams 适配器位于 packages/adapter-teams/。第 2 步启用 Chat SDK JSX 运行时在tsconfig.json中声明jsxImportSource: chat或单文件使用/** jsxImportSource chat */注释之后就可以直接用 JSX 语法写卡片了。第 3 步发出你的第一张卡片await thread.post( Card titleOrder #1234 CardTextYour order has been received!/CardText Actions Button idapprove styleprimaryApprove/Button Button idreject styledangerReject/Button /Actions /Card );就这么简单——这段 JSX 在 Slack 会变成 Block Kit在 Teams 会变成 Adaptive Card。完整的卡片组件文档见 apps/docs/content/docs/cards.mdx。常用组件清单构建卡片的核心零件以下是官方文档 Cards API 参考 中最重要的组件一张表看懂组件用途典型场景Card顶层容器支持title/subtitle/widthfull卡片外壳CardText支持 Markdown 子集的格式化文本说明文字FieldsField紧凑的键值对布局用户信息、订单明细Button触发onAction的交互按钮审批、操作入口LinkButton直接打开外部 URL 的按钮跳转详情页CardLink内联文本超链接正文中插入链接Select/RadioSelect下拉菜单 / 单选组选择优先级、状态Table原生表格支持列对齐数据报表Chart饼图、柱状图、折线图数据可视化Image/Divider图片嵌入 / 分隔线排版美化 小提示JSX 中请使用CardText而不是Text避免与 React 内置类型冲突。处理用户点击onAction 事件路由卡片发出的价值在于交互。用bot.onAction()注册处理器即可接收按钮点击和下拉选择事件详见 Actions 文档bot.onAction(approve, async (event) { await event.thread.post(Order approved by ${event.user.fullName}!); });event对象提供了完整的上下文actionId按钮 id、value附带数据、user点击者、thread所在会话。利用value属性同一个按钮可以携带不同数据Button idreport valuebugReport Bug/Button Button idreport valuefeatureRequest Feature/Button进阶玩法打开弹窗表单调用event.openModal()配合Modal组件实现反馈收集目前 Slack 与 Teams 支持回调 URL给按钮加callbackUrl点击时数据会直接 POST 到你的服务端适合审批流捕获所有事件不传 id 的onAction处理器可作为兜底日志各平台渲染差异一次了解不再踩坑同一份 JSX各平台的呈现略有不同以下是你需要知道的差异点平台原生格式特色能力SlackBlock Kit表格可排序分页、原生数据图表TeamsAdaptive Cards全宽卡片、按钮 tooltip、原生表格元素DiscordEmbeds / Components卡片以 GFM Markdown 表格呈现Google ChatCards链接以a href渲染其他文本降级表格回退为对齐的纯文本例如Table组件在 Slack 上会渲染成可翻页的数据表格可用pageSize控制每页行数在 Teams 上则是带网格线的原生表格可用widths、gridStyle微调。超出平台限制的内容如 Slack 图表标题超 50 字符会自动降级为文本表格而不是发送失败——这一点在 Cards 文档的 Table 与 Chart 章节 中有详细说明。一个完整示例用户资料卡片把上述组件组合起来就是一个实用的资料管理卡片await thread.post( Card titleUser Profile subtitleAccount details Image urlhttps://example.com/avatar.png altUser avatar / Fields Field labelName valueJane Smith / Field labelRole valueEngineer / /Fields CardLink urlhttps://example.com/profile/123View full profile/CardLink Divider / Actions Select idrole labelChange Role SelectOption labelEngineer valueengineer / SelectOption labelAdmin valueadmin / /Select Button idedit styleprimaryEdit Profile/Button Button iddeactivate styledangerDeactivate/Button /Actions /Card );这张卡片会同时在 Slack、Teams、Discord 等所有已注册适配器的平台上以原生风格呈现交互事件统一回到你的onAction处理器。进阶资源与延伸阅读资源路径Cards 完整指南apps/docs/content/docs/cards.mdxCards API 参考apps/docs/content/docs/api/cards.mdxActions 交互事件apps/docs/content/docs/actions.mdxModals 弹窗组件apps/docs/content/docs/modals.mdx平台适配器总览apps/docs/content/docs/platform-adapters.mdx核心 Cards 实现源码packages/chat/src/cards.tsSlack 适配器Block Kit 转换packages/adapter-slack/Teams 适配器Adaptive Cards 转换packages/adapter-teams/总结Chat SDK Cards 用 JSX 重新定义了跨平台聊天卡片开发统一抽象Card组件树 平台适配器自动转换 Block Kit / Adaptive Cards 等原生格式交互闭环onAction统一路由点击事件支持弹窗、回调 URL 等高级模式优雅降级不支持的特性自动回退文本保证消息必达现在打开 getting-started 文档 搭建你的第一个机器人然后用今天学到的卡片组件让它一次部署、处处出彩吧 【免费下载链接】chatUniversal chat layer for building bots and agents.项目地址: https://gitcode.com/gh_mirrors/chat67/chat创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考