feat(status): show QPS card

plugins/status/client/analytics.vue

@@ -0,0 +1,25 @@
+<template>
+  <analytic-number icon="analytic:pulse" title="当前 QPS">
+    <template #default>{{ current }}</template>
+    <template #footer-left>近期 QPS</template>
+    <template #footer-right>{{ +recent.toFixed(2) }}</template>
+  </analytic-number>
+</template>
+
+<script setup lang="ts">
+
+import { computed, inject } from 'vue'
+import { store } from '@koishijs/client'
+import {} from '@koishijs/plugin-analytics/src'
+
+const AnalyticNumber = inject('component:analytic-number')
+
+const current = computed(() => {
+  return Object.values(store.status.bots).reduce((acc, bot) => acc + bot.messageReceived, 0)
+})
+
+const recent = computed(() => {
+  return Object.values(store.analytics.messageByDate).slice(-7).reduce((acc, value) => acc + value.receive, 0) / 7 / 24 / 60 / 60
+})
+
+</script>

plugins/status/client/icons/index.ts

@@ -2,9 +2,11 @@ import { icons } from '@koishijs/client'
 import ArrowUp from './arrow-up.vue'
 import ArrowDown from './arrow-down.vue'
 import Platform from './platform.vue'
+import Pulse from './pulse.vue'
 import Robot from './robot.vue'
 
 icons.register('arrow-up', ArrowUp)
 icons.register('arrow-down', ArrowDown)
 icons.register('platform', Platform)
+icons.register('analytic:pulse', Pulse)
 icons.register('robot', Robot)

plugins/status/client/icons/pulse.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg class="k-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
+    <path fill="currentColor" d="M640 240C640 248.8 632.8 256 624 256h-133.1l-60 150c-2.625 6.375-8.375 10.25-16 9.1C408 415.5 402.1 410.6 400.5 403.9l-78.75-315l-82 410.3C238.3 506.5 231.9 511.8 224.4 512H224c-7.25 0-13.75-5-15.5-12.12L147.5 256H16C7.201 256 0 248.8 0 240s7.201-15.1 16-15.1H160c7.375 0 13.75 4.993 15.5 12.12l46.75 187l82-410.3C305.8 5.5 312 .25 319.5 0c8.125 .125 14.25 4.875 16 12.12l84 336l45.63-114.1C467.5 228 473.5 224 480 224h144C632.8 224 640 231.2 640 240z"/>
+  </svg>
+</template>

plugins/status/client/index.ts

@@ -2,6 +2,7 @@ import { defineExtension } from '@koishijs/client'
 import {} from '@koishijs/plugin-status/src'
 import Bots from './bots'
 import Load from './load'
+import Analytics from './analytics.vue'
 import EnvInfo from './envinfo.vue'
 import './icons'
 
@@ -13,4 +14,9 @@ export default defineExtension((ctx) => {
     type: 'status-left',
     component: EnvInfo,
   })
+
+  ctx.slot({
+    type: 'analytic-number',
+    component: Analytics,
+  })
 })