前端实时预览

1<script setup lang="ts">

2import { computed } from 'vue'

3import { Activity, ArrowUpRight, Users } from 'lucide-vue-next'

4import { useLiveMetrics } from '@/composables/useLiveMetrics'

5

6const props = defineProps<{ projectId: string }>()

7const { metrics, status } = useLiveMetrics(props.projectId)

8

9const cards = computed(() => [

10 { label: 'Active users', value: metrics.value.activeUsers, icon: Users },

11 { label: 'Events / min', value: metrics.value.eventsPerMinute, icon: Activity },

12])

13</script>

14

15<template>

16 <section class="dashboard-grid">

17 <article v-for="card in cards" :key="card.label" class="metric-card">

18 <component :is="card.icon" :size="18" />

19 <span>{{ card.label }}</span>

20 <strong>{{ card.value.toLocaleString() }}</strong>

21 <small><ArrowUpRight :size="13" /> live</small>

22 </article>

23 </section>

24 <footer :data-status="status">Updated from the live stream</footer>

25</template>