如何让Thingsboard Markdown HTML值卡片与默认卡片一致响应式

我需要让自制的Thingsboard Markdown HTML数值功能卡片具备响应式特性，使其表现与平台默认的饼图、数值卡片等组件一致。当前实现代码如下：

原始JavaScript代码 #

var totalTRH = 0;

ctx.data.forEach(function(_data) {
  if (_data.data.length >= 1) {
    _data.data.forEach(function(value) {
      totalTRH += parseFloat(value[1]) || 0;
    });
  }
});

return `
<div class="energy-card">
  <div class="icon-container">
    <img class="forge-icon"
         src="/api/images/public/osQKaT5ZOkVe2x2jVGlHEPnvoo3h87Ki"
         alt="Forge Icon" />
  </div>
  <div class="text-container">
    <div class="label">Forge Shop</div>
    <div class="value">${totalTRH.toFixed(2)} kWh</div>
  </div>
</div>`;

原始CSS代码 #

.energy-card {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.1rem 1rem;
  background-color: white;
  border-radius: 12px;
  font-family: 'Segoe UI', sans-serif;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  flex-wrap: nowrap;
}

.icon-container {
  flex-shrink: 0;
}

.forge-icon {
  width: calc(0.8rem + 1.8vw); /* Fluid icon scaling */
  height: calc(0.8rem + 1.8vw);
  object-fit: contain;
  transition: all 0.25s ease;
}

.text-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  min-width: 0; /* Ensure ellipsis works */
}

.label {
  font-size: calc(0.5rem + 0.8vw); /* Smaller label */
  font-weight: 600;
  color: #000;
  margin: 0;
  line-height: 1.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.25s ease;
}

.value {
  font-size: calc(0.45rem + 0.7vw); /* Slightly smaller than label */
  font-weight: 500;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.25s ease;
}

修改后的响应式实现方案 #

优化后的JavaScript代码 #

var totalTRH = 0;

ctx.data.forEach(function(_data) {
  if (_data.data.length >= 1) {
    _data.data.forEach(function(value) {
      totalTRH += parseFloat(value[1]) || 0;
    });
  }
});

return `
<div class="tb-custom-card">
  <div class="tb-custom-card-icon">
    <img class="tb-custom-icon"
         src="/api/images/public/osQKaT5ZOkVe2x2jVGlHEPnvoo3h87Ki"
         alt="Forge Icon" />
  </div>
  <div class="tb-custom-card-content">
    <div class="tb-custom-card-label">Forge Shop</div>
    <div class="tb-custom-card-value">${totalTRH.toFixed(2)} kWh</div>
  </div>
</div>`;

优化后的CSS代码（对齐平台默认组件） #

/* 复用Thingsboard内置样式变量，确保视觉统一 */
.tb-custom-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--tb-card-bg, #ffffff);
  border-radius: var(--tb-card-border-radius, 12px);
  font-family: var(--tb-font-family, 'Segoe UI', sans-serif);
  width: 100%;
  box-sizing: border-box;
  flex-wrap: nowrap;
  box-shadow: var(--tb-card-shadow, 0 1px 3px rgba(0,0,0,0.1));
  transition: var(--tb-card-transition, all 0.2s ease);
}

.tb-custom-card:hover {
  box-shadow: var(--tb-card-hover-shadow, 0 4px 12px rgba(0,0,0,0.15));
}

.tb-custom-card-icon {
  flex-shrink: 0;
}

.tb-custom-icon {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
}

.tb-custom-card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  min-width: 0;
}

.tb-custom-card-label {
  font-size: 0.875rem;
  font-weight: var(--tb-font-weight-medium, 500);
  color: var(--tb-secondary-text-color, #6b7280);
  margin: 0 0 0.25rem 0;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tb-custom-card-value {
  font-size: 1.5rem;
  font-weight: var(--tb-font-weight-semibold, 600);
  color: var(--tb-primary-text-color, #111827);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 响应式适配：针对小屏幕调整尺寸 */
@media (max-width: 768px) {
  .tb-custom-card {
    padding: 1rem 1.25rem;
    gap: 0.75rem;
  }
  
  .tb-custom-icon {
    width: 2rem;
    height: 2rem;
  }
  
  .tb-custom-card-label {
    font-size: 0.75rem;
  }
  
  .tb-custom-card-value {
    font-size: 1.25rem;
  }
}

/* 适配超小屏幕（移动端） */
@media (max-width: 480px) {
  .tb-custom-card {
    padding: 0.75rem 1rem;
    gap: 0.5rem;
  }
  
  .tb-custom-icon {
    width: 1.75rem;
    height: 1.75rem;
  }
  
  .tb-custom-card-value {
    font-size: 1.125rem;
  }
}

关键修改说明 #

1. 复用平台内置变量：使用Thingsboard的主题变量（如--tb-card-bg、--tb-primary-text-color），确保卡片样式与平台默认组件完全统一，跟随主题切换自动适配
2. 分层响应式适配：通过媒体查询针对不同屏幕尺寸（桌面、平板、移动端）调整内边距、图标大小和字体尺寸，避免单纯vw计算导致的极端尺寸问题
3. 对齐默认组件交互：添加hover阴影效果，匹配平台默认卡片的交互反馈
4. 优化文本层级：调整标签和数值的颜色权重，和默认数值卡片的视觉层级一致
5. 简化自适应逻辑：移除不必要的flex-wrap限制，确保卡片在任何容器宽度下都能正常显示

内容的提问来源于stack exchange，提问作者Ujal Kshetrimayum