微信小程序页面迁移校验之前 P5任务处理之前

apps/miniprogram - 副本/miniprogram/components/metric-card/metric-card.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-icon": "tdesign-miniprogram/icon/icon"
+  }
+}

apps/miniprogram - 副本/miniprogram/components/metric-card/metric-card.ts

@@ -0,0 +1,67 @@
+Component({
+  properties: {
+    /** 指标名称 */
+    title: {
+      type: String,
+      value: '',
+    },
+    /** 指标数值（已格式化字符串） */
+    value: {
+      type: String,
+      value: null,
+    },
+    /** 单位（元/次/人） */
+    unit: {
+      type: String,
+      value: '',
+    },
+    /** 环比趋势 */
+    trend: {
+      type: String,
+      value: 'flat', // 'up' | 'down' | 'flat'
+    },
+    /** 环比数值（如 "+12.5%"） */
+    trendValue: {
+      type: String,
+      value: '',
+    },
+    /** 帮助说明文字 */
+    helpText: {
+      type: String,
+      value: '',
+    },
+  },
+
+  observers: {
+    value(val: string | null | undefined) {
+      // null/undefined 显示 "--"
+      this.setData({
+        displayValue: val == null || val === '' ? '--' : val,
+      })
+    },
+  },
+
+  data: {
+    displayValue: '--',
+  },
+
+  lifetimes: {
+    attached() {
+      const val = this.data.value
+      this.setData({
+        displayValue: val == null || val === '' ? '--' : val,
+      })
+    },
+  },
+
+  methods: {
+    onTap() {
+      this.triggerEvent('tap')
+    },
+    onHelpTap(e: WechatMiniprogram.TouchEvent) {
+      // 阻止冒泡到卡片 tap
+      e.stopPropagation?.()
+      this.triggerEvent('helpTap')
+    },
+  },
+})

apps/miniprogram - 副本/miniprogram/components/metric-card/metric-card.wxml

@@ -0,0 +1,22 @@
+<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>

apps/miniprogram - 副本/miniprogram/components/metric-card/metric-card.wxss

@@ -0,0 +1,82 @@
+.metric-card {
+  background: #ffffff;
+  border-radius: var(--radius-lg);
+  padding: 24rpx;
+  box-shadow: var(--shadow-lg);
+}
+
+.metric-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12rpx;
+}
+
+.metric-title {
+  font-size: var(--font-sm);
+  color: var(--color-gray-7);
+}
+
+.metric-help {
+  padding: 4rpx;
+}
+
+.metric-body {
+  display: flex;
+  align-items: baseline;
+  gap: 8rpx;
+  margin-bottom: 8rpx;
+}
+
+.metric-value {
+  font-size: 48rpx;
+  font-weight: 700;
+  color: var(--color-gray-13);
+  font-variant-numeric: tabular-nums;
+}
+
+.metric-unit {
+  font-size: var(--font-sm);
+  color: var(--color-gray-7);
+}
+
+.metric-trend {
+  display: flex;
+  align-items: center;
+}
+
+.trend-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4rpx;
+  padding: 4rpx 12rpx;
+  border-radius: var(--radius-sm);
+  font-size: var(--font-xs);
+}
+
+/* 上升 → 绿色 */
+.trend-up {
+  color: var(--color-success);
+  background: rgba(0, 168, 112, 0.08);
+}
+
+/* 下降 → 红色 */
+.trend-down {
+  color: var(--color-error);
+  background: rgba(227, 77, 89, 0.08);
+}
+
+/* 持平 → 灰色 */
+.trend-flat {
+  color: var(--color-gray-7);
+  background: rgba(139, 139, 139, 0.08);
+}
+
+.trend-flat-icon {
+  font-weight: 700;
+}
+
+.trend-text {
+  font-size: var(--font-xs);
+  font-variant-numeric: tabular-nums;
+}