feat: 完成会员消息触达模块页面与交互

apps/web-antd/src/views/member/message-reach/components/MessageReachStatsCards.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { MessageReachStatsViewModel } from '../types';
+
+import { Spin } from 'ant-design-vue';
+
+import {
+  formatInteger,
+  formatPercent,
+} from '../composables/message-reach-page/helpers';
+
+defineProps<{
+  loading: boolean;
+  stats: MessageReachStatsViewModel;
+}>();
+</script>
+
+<template>
+  <Spin :spinning="loading">
+    <div class="mmr-stats">
+      <div class="mmr-stat-card">
+        <div class="mmr-stat-label">本月发送</div>
+        <div class="mmr-stat-value">
+          {{ formatInteger(stats.monthlySentCount) }}
+          <span class="mmr-stat-unit">条</span>
+        </div>
+      </div>
+
+      <div class="mmr-stat-card">
+        <div class="mmr-stat-label">触达人数</div>
+        <div class="mmr-stat-value">
+          {{ formatInteger(stats.reachMemberCount) }}
+          <span class="mmr-stat-unit">人</span>
+        </div>
+      </div>
+
+      <div class="mmr-stat-card">
+        <div class="mmr-stat-label">打开率</div>
+        <div class="mmr-stat-value">
+          {{ formatPercent(stats.openRate) }}
+        </div>
+      </div>
+
+      <div class="mmr-stat-card">
+        <div class="mmr-stat-label">转化率</div>
+        <div class="mmr-stat-value">
+          {{ formatPercent(stats.conversionRate) }}
+        </div>
+      </div>
+    </div>
+  </Spin>
+</template>