Microsoft Teams 中带有自适应卡的任务模块

Question

我在任务模块中使用自适应卡片，但是在Microsoft Teams 的深色主题（白色背景）中看起来很奇怪。如何解决这个问题？

架构版本 1.3（示例）： AdaptiveCard adaptiveCard = new AdaptiveCard(new AdaptiveSchemaVersion(1, 3));

Result

P.S.

json 格式的示例卡片：

{
  "type": "AdaptiveCard",
  "version": "1.3",
  "body": [
    {
      "type": "TextBlock",
      "size": "large",
      "weight": "bolder",
      "text": "YouTrackBot помощь"
    },
    {
      "type": "TextBlock",
      "text": "Это базовая страница по YouTrackBot, подробная информация расположена в соответсвующих разделах.",
      "wrap": true
    }
  ],
  "actions": [
    {
      "type": "Action.ShowCard",
      "card": {
        "type": "AdaptiveCard",
        "version": "1.3",
        "body": [
          {
            "type": "TextBlock",
            "size": "large",
            "weight": "bolder",
            "text": "Как получить свой токен YouTrack?"
          },
          {
            "type": "TextBlock",
            "text": "1) Зайти в свой профиль YouTrack;",
            "wrap": true
          },
          {
            "type": "TextBlock",
            "text": "2) Во вкладке 'Общее' выбрать 'Обновление анкетных данных и управление логинами';",
            "wrap": true
          },
          {
            "type": "TextBlock",
            "text": "3) Перейти во вкладку 'Аутентификация';",
            "wrap": true
          },
          {
            "type": "TextBlock",
            "text": "4) Далее нажимаем на кнопку 'Новый токен';",
            "wrap": true
          },
          {
            "type": "TextBlock",
            "text": "5) В окне создания токена важно, чтобы были указаны области 'YouTrack' и 'YouTrack Administation', имя - произвольное;",
            "wrap": true
          },
          {
            "type": "TextBlock",
            "text": "6) После - нажимаем создать и копируем токен (Внимание! Посмотреть токен возможности больше не будет, поэтому его лучше сохранить в удобном для себя месте).",
            "wrap": true
          }
        ]
      },
      "title": "Как получить токен"
    },
    {
      "type": "Action.ShowCard",
      "card": {
        "type": "AdaptiveCard",
        "version": "1.3",
        "body": [
          {
            "type": "TextBlock",
            "size": "large",
            "weight": "bolder",
            "text": "Как настроить YouTrackBot?"
          },
          {
            "type": "TextBlock",
            "text": "Сперва необходимо изучить, как получить свой токен (инструкция есть у бота);",
            "wrap": true
          },
          {
            "type": "TextBlock",
            "text": "Разобравшись с токеном можно приступать к настройке, она делается просто, за несколько шагов;",
            "wrap": true
          },
          {
            "type": "TextBlock",
            "text": "1) Первый шаг - необходимо указать URL YouTrack'а, который планируется использовать;",
            "wrap": true
          },
          {
            "type": "TextBlock",
            "text": "2) Второй шаг - необходимо указать уже известный токен;",
            "wrap": true
          },
          {
            "type": "TextBlock",
            "text": "3) Третий шаг - нажать кнопку 'Подтвердить';",
            "wrap": true
          },
          {
            "type": "TextBlock",
            "text": "Если все хорошо, цвет текста станет зеленым и это означает, что подключение настроено;",
            "wrap": true
          },
          {
            "type": "TextBlock",
            "text": "Если возникнет ошибка, то появится соответствующая надпись, которая означает, что URL и/или токен введены с ошибкой и бот не смог подключиться к YouTrack.",
            "wrap": true
          },
          {
            "type": "TextBlock",
            "text": "(Внимание! Варианты URL формата: <https://example.myjetbrains.com>/<example.myjetbrains.com>/<example.myjetbrains>)",
            "wrap": true
          }
        ]
      },
      "title": "Как настроить приложение"
    },
    {
      "type": "Action.ShowCard",
      "card": {
        "type": "AdaptiveCard",
        "version": "1.3",
        "body": [
          {
            "type": "TextBlock",
            "size": "large",
            "weight": "bolder",
            "text": "Как использовать YouTrackBot?"
          },
          {
            "type": "TextBlock",
            "text": "Создание задачи из сообщения:",
            "wrap": true
          },
          {
            "type": "TextBlock",
            "text": "1) Необходимо навести на сообщение, нажать на троеточие в правом верхнем углу",
            "wrap": true
          },
          {
            "type": "TextBlock",
            "text": "2) Выбрать 'Дополнительные действия'",
            "wrap": true
          },
          {
            "type": "TextBlock",
            "text": "3) В новом списке нужно выбрать 'Создать новую задачу в YouTrack'",
            "wrap": true
          },
          {
            "type": "TextBlock",
            "text": "4) В открытой форме нужно выбрать проект, где будет созадана задача, и нажать продолжить",
            "wrap": true
          },
          {
            "type": "TextBlock",
            "text": "5) Заголовок и описание заполняются сами, но Вы можете их отредактировать",
            "wrap": true
          },
          {
            "type": "TextBlock",
            "text": "6) Длаее необходимо заполнить обязательные поля для задачи и по желанию заполнить оставшиеся поля, которые для создания задачи не обязательны",
            "wrap": true
          },
          {
            "type": "TextBlock",
            "text": "7) Нажать кнопку 'Создать'",
            "wrap": true
          },
          {
            "type": "TextBlock",
            "text": "8) Если задача была успешно создана, в чате, в предпросмотре сообщения, появится карточка, которая содержит краткую информацию о задаче и ссылку на YouTrack",
            "wrap": true
          }
        ]
      },
      "title": "Как работать с приложением"
    }
  ]
}

Answer 1

我们尝试在最后重现它，它在深色模式下看起来不错。您能否尝试升级您的 MS teams 版本并检查是否有帮助？仅供参考，我们已经在 Microsoft Teams 版本 1.4.00.30066 中进行了测试。下面附上截图：

Answer 2

发现该问题只出现在普通版的Teams中。一切都在开发者版本中正确显示。

Microsoft Teams 中带有自适应卡的任务模块

Task modules with adaptive cards in Microsoft Teams

microsoft-teams

adaptive-cards

dark-theme