<view class="metric-card" bindtap="onTap">
  <view class="metric-header">
    <text class="metric-title">{{title}}</text>
    <view class="metric-help" wx:if="{{helpText}}" catchtap="onHelpTap">
      <t-icon name="help-circle" size="32rpx" color="#a6a6a6" />
    </view>
  </view>

  <view class="metric-body">
    <text class="metric-value">{{displayValue}}</text>
    <text class="metric-unit" wx:if="{{unit}}">{{unit}}</text>
  </view>

  <view class="metric-trend" wx:if="{{trendValue}}">
    <view class="trend-tag trend-{{trend}}">
      <t-icon wx:if="{{trend === 'up'}}" name="arrow-up" size="24rpx" />
      <t-icon wx:elif="{{trend === 'down'}}" name="arrow-down" size="24rpx" />
      <text wx:else class="trend-flat-icon">-</text>
      <text class="trend-text">{{trendValue}}</text>
    </view>
  </view>
</view>
