feat(frontend): show raw counts in overview metric popovers

core/frontend/src/i18n/lang/en.json

@@ -136,6 +136,7 @@
 		"clicked": "Clicked",
 		"bounced": "Bounced",
 		"delayedQueue": "Delayed Queue",
+		"metricCount": "{count} mails",
 		"mailProviders": "Mail Providers",
 		"sendStats": "Send Statistics",
 		"provider": {

core/frontend/src/i18n/lang/ja.json

@@ -127,6 +127,7 @@
 		"clicked": "クリック済み",
 		"bounced": "バウンス（送信失敗）",
 		"delayedQueue": "遅延キュー",
+		"metricCount": "{count} 通",
 		"mailProviders": "メールプロバイダー",
 		"sendStats": "送信統計",
 		"provider": {

core/frontend/src/i18n/lang/zh.json

@@ -138,6 +138,7 @@
 		"clicked": "已点击",
 		"bounced": "已退回",
 		"delayedQueue": "延迟队列",
+		"metricCount": "{count} 封邮件",
 		"mailProviders": "邮件提供商",
 		"sendStats": "发送统计",
 		"provider": {

core/frontend/src/views/market/task/analytics.vue

@@ -23,6 +23,7 @@
 				:key="key"
 				:title="item.label"
 				:value="item.value"
+				:count="item.count"
 				:unit="item.unit">
 			</metric-card>
 		</div>
@@ -70,10 +71,10 @@ const dateRange = ref(getDayTimeRange())
 const providers = ref<MailProvider[]>([])
 
 const rateData = reactive<RateData>({
-	delivery_rate: { label: t('overview.delivered'), value: 0, unit: '%' },
-	open_rate: { label: t('overview.opened'), value: 0, unit: '%' },
-	click_rate: { label: t('overview.clicked'), value: 0, unit: '%' },
-	bounce_rate: { label: t('overview.bounced'), value: 0, unit: '%' },
+	delivery_rate: { label: t('overview.delivered'), value: 0, unit: '%', count: 0 },
+	open_rate: { label: t('overview.opened'), value: 0, unit: '%', count: 0 },
+	click_rate: { label: t('overview.clicked'), value: 0, unit: '%', count: 0 },
+	bounce_rate: { label: t('overview.bounced'), value: 0, unit: '%', count: 0 },
 })
 
 const sendMail = ref<MailOverview['send_mail_chart']>({
@@ -110,6 +111,11 @@ const updateRateData = (dashboard: MailOverview['dashboard']) => {
 			rateData[key].value = value
 		}
 	})
+
+	rateData.delivery_rate.count = dashboard.delivered
+	rateData.open_rate.count = dashboard.opened
+	rateData.click_rate.count = dashboard.clicked
+	rateData.bounce_rate.count = dashboard.bounced
 }
 
 async function fetchOverviewData() {

core/frontend/src/views/overview/components/MetricCard.vue

@@ -1,12 +1,41 @@
 <template>
-	<n-card class="metric-card" :bordered="false">
+	<n-popover
+		v-if="count !== null"
+		trigger="manual"
+		:show="showCount"
+		placement="top"
+		:show-arrow="true">
+		<template #trigger>
+			<n-card
+				class="metric-card is-hoverable"
+				:bordered="false"
+				tabindex="0"
+				role="button"
+				:aria-label="`${title}: ${countLabel}`"
+				@mouseenter="showCount = true"
+				@mouseleave="showCount = false"
+				@focus="showCount = true"
+				@blur="showCount = false"
+				@click="toggleCount">
+				<div class="title">{{ title }}</div>
+				<div class="value" :style="{ color: textColor }">{{ value }}{{ unit }}</div>
+			</n-card>
+		</template>
+		<div class="count-popover">{{ title }}: {{ countLabel }}</div>
+	</n-popover>
+
+	<n-card v-else class="metric-card" :bordered="false">
 		<div class="title">{{ title }}</div>
 		<div class="value" :style="{ color: textColor }">{{ value }}{{ unit }}</div>
 	</n-card>
 </template>
 
 <script setup lang="ts">
-defineProps({
+import { computed, ref } from 'vue'
+
+const { t } = useI18n()
+
+const props = defineProps({
 	title: {
 		type: String,
 		default: '',
@@ -19,17 +48,33 @@ defineProps({
 		type: String,
 		default: '',
 	},
+	count: {
+		type: Number,
+		default: null,
+	},
 	textColor: {
 		type: String,
 	},
 })
+
+const showCount = ref(false)
+
+const countLabel = computed(() => t('overview.metricCount', { count: props.count ?? 0 }))
+
+const toggleCount = () => {
+	showCount.value = !showCount.value
+}
 </script>
 
 <style lang="scss" scoped>
 .metric-card {
 	--n-padding-top: 24px;
 	--n-padding-bottom: 24px;
 	--n-text-color: var(--color-card-text-1);
+
+	&.is-hoverable {
+		cursor: pointer;
+	}
 }
 
 .title {
@@ -40,5 +85,10 @@ defineProps({
 
 .value {
 	font-size: 20px;
+	line-height: 1.2;
+}
+
+.count-popover {
+	font-size: 13px;
 }
 </style>

core/frontend/src/views/overview/index.vue

@@ -16,6 +16,7 @@
 				:key="key"
 				:title="item.label"
 				:value="item.value"
+				:count="item.count"
 				:unit="item.unit">
 			</metric-card>
 			<metric-card
@@ -75,10 +76,10 @@ const dateRange = ref(getDayTimeRange())
 const providers = ref<MailProvider[]>([])
 
 const rateData = reactive<RateData>({
-	delivery_rate: { label: t('overview.delivered'), value: 0, unit: '%' },
-	open_rate: { label: t('overview.opened'), value: 0, unit: '%' },
-	click_rate: { label: t('overview.clicked'), value: 0, unit: '%' },
-	bounce_rate: { label: t('overview.bounced'), value: 0, unit: '%' },
+	delivery_rate: { label: t('overview.delivered'), value: 0, unit: '%', count: 0 },
+	open_rate: { label: t('overview.opened'), value: 0, unit: '%', count: 0 },
+	click_rate: { label: t('overview.clicked'), value: 0, unit: '%', count: 0 },
+	bounce_rate: { label: t('overview.bounced'), value: 0, unit: '%', count: 0 },
 })
 
 const delayedQueue = ref(0)
@@ -139,6 +140,12 @@ const updateRateData = (dashboard: MailOverview['dashboard']) => {
 			rateData[key].value = value
 		}
 	})
+
+	rateData.delivery_rate.count = dashboard.delivered
+	rateData.open_rate.count = dashboard.opened
+	rateData.click_rate.count = dashboard.clicked
+	rateData.bounce_rate.count = dashboard.bounced
+
 	delayedQueue.value = dashboard.delayed_queue
 }
 

core/frontend/src/views/overview/types/index.ts

@@ -77,6 +77,7 @@ interface RateItem {
 	label: string
 	value: number
 	unit: string
+	count?: number
 }
 
 // 定义rate数据