如何用adaptivecards npm包创建自适应卡片、自定义CSS并发送至Bot Framework模拟器？

嘿，刚好我之前也折腾过Adaptive Cards和Bot Framework的组合，一步步来帮你搞定这三个问题：创建卡片、自定义样式、发送到模拟器。

1. 先搞定Adaptive Card的创建 #

Adaptive Card的核心是JSON配置文件，你用AdaptiveCard.parse()解析的就是这个JSON。先写一个基础的卡片示例，你可以根据需求修改：

const customCard = {
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.5",
  "body": [
    {
      "type": "TextBlock",
      "text": "我的自定义卡片",
      "size": "large",
      "id": "cardTitle" // 加ID方便后续精准样式控制
    },
    {
      "type": "TextBlock",
      "text": "这是一张带自定义CSS的测试卡片",
      "id": "cardDesc"
    }
  ],
  "actions": [
    {
      "type": "Action.Submit",
      "title": "点击我"
    }
  ]
};

然后结合你已有的代码实例化并解析：

var adaptiveCard = new AdaptiveCards.AdaptiveCard();
adaptiveCard.parse(customCard);

2. 应用自定义CSS的两种实用方法 #

Adaptive Cards渲染后会生成带有固定类名的DOM元素，你可以通过以下两种方式自定义样式：

方法一：覆盖全局默认类 #

Adaptive Cards自带一套默认CSS类，比如.ac-adaptiveCard是卡片容器，.ac-textBlock是文本块。你可以直接在你的样式文件里覆盖这些类：

/* 自定义整个卡片的容器样式 */
.ac-adaptiveCard {
  background-color: #f8f9fa;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

/* 通过ID精准修改标题样式 */
.ac-textBlock[id="cardTitle"] {
  color: #2d3748;
  font-weight: 700;
  margin-bottom: 12px;
}

/* 修改描述文本样式 */
.ac-textBlock[id="cardDesc"] {
  color: #4a5568;
  font-size: 14px;
}

方法二：给卡片添加自定义类名 #

如果你不想影响全局的Adaptive Card样式，可以给当前卡片的DOM元素单独加自定义类：

// 解析卡片后生成DOM元素
const cardDom = adaptiveCard.render();
// 添加自定义类
cardDom.classList.add("my-special-card");

然后在CSS里针对这个类写样式：

.my-special-card {
  border: 2px solid #3182ce;
}
.my-special-card .ac-action {
  background-color: #3182ce;
  color: white;
  border-radius: 8px;
}

3. 发送到Bot Framework模拟器 #

要把卡片发送到模拟器，你需要构造符合Bot Framework格式的消息，把Adaptive Card作为附件嵌入。这里用Node.js的Bot Framework SDK举个例子：

首先确保你已经搭建好Bot的基础结构，然后在处理用户消息的逻辑里，构造回复：

const { ActivityFactory } = require('botbuilder');

// 把卡片JSON转成Bot Framework认可的附件格式
const cardAttachment = ActivityFactory.adaptiveCard(customCard);

// 构造回复消息
const replyMessage = {
  type: 'message',
  text: "这是一张自定义样式的Adaptive Card：",
  attachments: [cardAttachment]
};

// 发送到模拟器
await context.sendActivity(replyMessage);

如果是用C#，逻辑类似：创建Attachment对象，设置ContentType为"application/vnd.microsoft.card.adaptive"，Content为卡片JSON，然后添加到回复消息的Attachments集合中即可。

小提示 #

• 要确保你的Bot Framework SDK版本支持你使用的Adaptive Card版本（比如v1.5需要SDK的对应版本支持）
• 模拟器里会自带Bot Framework的默认样式，如果要完全自定义，可能需要在Web Chat前端或者Bot端进一步覆盖样式类

内容的提问来源于stack exchange，提问作者Saurav Sircar