feat(status): separate payload into 3 parts

packages/plugin-status/client/index.ts

@@ -2,7 +2,7 @@
 
 import { ref, watch } from 'vue'
 import type { User } from 'koishi-core'
-import type { Payload } from '~/server'
+import type { Registry, Profile, Statistics } from '~/server'
 
 const prefix = 'koishi:'
 
@@ -41,7 +41,9 @@ interface Config {
 
 export const user = storage.create<User>('user')
 export const config = storage.create<Config>('config', { authType: 0 })
-export const status = ref<Payload>(null)
+export const profile = ref<Profile>(null)
+export const registry = ref<Registry>(null)
+export const stats = ref<Statistics>(null)
 export const socket = ref<WebSocket>(null)
 
 const listeners: Record<string, (data: any) => void> = {}
@@ -55,11 +57,10 @@ export function start() {
       listeners[data.type](data.body)
     }
   }
-  receive('update', data => status.value = data)
-  receive('user', data => {
-    user.value = data
-    storage.set('user', data)
-  })
+  receive('profile', data => profile.value = data)
+  receive('registry', data => registry.value = data)
+  receive('stats', data => stats.value = data)
+  receive('user', data => user.value = data)
 }
 
 export function send(type: string, body: any) {

packages/plugin-status/client/main.ts

@@ -26,6 +26,7 @@ declare module 'vue-router' {
     hidden?: boolean
     authorize?: boolean
     frameless?: boolean
+    require?: ('stats' | 'profile' | 'registry')[]
   }
 }
 
@@ -36,17 +37,17 @@ const router = createRouter({
   routes: [{
     path: '/',
     name: '仪表盘',
-    meta: { icon: 'tachometer-alt' },
+    meta: { icon: 'tachometer-alt', require: ['stats', 'profile', 'registry'] },
     component: () => import('./views/home/index.vue'),
   }, {
     path: '/bots',
     name: '机器人',
-    meta: { icon: 'robot' },
+    meta: { icon: 'robot', require: ['stats', 'profile'] },
     component: () => import('./views/bots.vue'),
   }, {
     path: '/plugins',
     name: '插件',
-    meta: { icon: 'plug' },
+    meta: { icon: 'plug', require: ['registry'] },
     component: () => import('./views/plugins/index.vue'),
   }, {
     path: '/sandbox',

packages/plugin-status/client/views/bots.vue

@@ -1,19 +1,19 @@
 <template>
   <k-card class="bot-table" title="账号数据">
-    <table v-if="status.bots.length">
+    <table v-if="profile.bots.length">
       <tr>
         <th>平台名</th>
         <th>用户名</th>
         <th>运行状态</th>
         <th>当前消息频率</th>
         <th>近期消息频率</th>
       </tr>
-      <tr v-for="(bot, index) in status.bots" :key="index">
-        <td>{{ bot.platform }}</td>
-        <td>{{ bot.username }}</td>
-        <td>{{ codes[bot.code] }}</td>
-        <td>发送 {{ bot.currentRate[0] }}/min，接收 {{ bot.currentRate[1] }}/min</td>
-        <td>发送 {{ bot.recentRate[0] }}/d，接收 {{ bot.recentRate[1] }}/d</td>
+      <tr v-for="({ platform, username, selfId, code, currentRate }, index) in profile.bots" :key="index">
+        <td>{{ platform }}</td>
+        <td>{{ username }}</td>
+        <td>{{ codes[code] }}</td>
+        <td>发送 {{ currentRate[0] }}/min，接收 {{ currentRate[1] }}/min</td>
+        <td>发送 {{ stats.botSend[`${platform}:${selfId}`] || 0 }}/d，接收 {{ stats.botReceive[`${platform}:${selfId}`] || 0 }}/d</td>
       </tr>
     </table>
     <p v-else>暂无数据。</p>
@@ -22,7 +22,7 @@
 
 <script lang="ts" setup>
 
-import { status } from '~/client'
+import { stats, profile } from '~/client'
 
 const codes = ['运行中', '闲置', '离线', '网络异常', '服务器异常', '封禁中', '尝试连接']
 

packages/plugin-status/client/views/home/group-chart.vue

@@ -1,14 +1,14 @@
 <template>
   <k-card class="frameless" title="各群发言数量">
-    <v-chart v-if="status.groups.length" :option="option" autoresize/>
+    <v-chart v-if="stats.groups.length" :option="option" autoresize/>
     <p v-else>暂无数据。</p>
   </k-card>
 </template>
 
 <script lang="ts" setup>
 
-import type { Payload } from '~/server'
-import { defineProps, computed } from 'vue'
+import { stats } from '~/client'
+import { computed } from 'vue'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { GridComponent, TooltipComponent } from 'echarts/components'
@@ -17,8 +17,6 @@ import VChart from 'vue-echarts'
 
 use([CanvasRenderer, GridComponent, TooltipComponent, PieChart])
 
-const props = defineProps<{ status: Payload }>()
-
 const option = computed(() => ({
   tooltip: {
     trigger: 'item',
@@ -34,7 +32,7 @@ const option = computed(() => ({
   },
   series: [{
     type: 'pie',
-    data: props.status.groups.sort((a, b) => b.value - a.value),
+    data: stats.value.groups.sort((a, b) => b.value - a.value),
     radius: ['35%', '65%'],
     minShowLabelAngle: 3,
   }],

packages/plugin-status/client/views/home/history-chart.vue

@@ -1,14 +1,14 @@
 <template>
   <k-card class="frameless" title="历史发言数量">
-    <v-chart v-if="Object.keys(status.history).length" :option="option" autoresize/>
+    <v-chart v-if="Object.keys(stats.history).length" :option="option" autoresize/>
     <p v-else>暂无数据。</p>
   </k-card>
 </template>
 
 <script lang="ts" setup>
 
-import type { Payload } from '~/server'
-import { defineProps, computed } from 'vue'
+import { stats } from '~/client'
+import { computed } from 'vue'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { GridComponent, TooltipComponent } from 'echarts/components'
@@ -17,8 +17,6 @@ import VChart from 'vue-echarts'
 
 use([CanvasRenderer, GridComponent, TooltipComponent, LineChart])
 
-const props = defineProps<{ status: Payload }>()
-
 const week = '日一二三四五六'
 
 const option = computed(() => ({
@@ -34,7 +32,7 @@ const option = computed(() => ({
   },
   xAxis: {
     type: 'category',
-    data: Object.keys(props.status.history).reverse(),
+    data: Object.keys(stats.value.history).reverse(),
   },
   yAxis: {
     type: 'value',
@@ -45,7 +43,7 @@ const option = computed(() => ({
   series: {
     type: 'line',
     smooth: true,
-    data: Object.values(props.status.history).reverse(),
+    data: Object.values(stats.value.history).reverse(),
   },
 }))
 

packages/plugin-status/client/views/home/hour-chart.vue

@@ -6,8 +6,8 @@
 
 <script lang="ts" setup>
 
-import type { Payload } from '~/server'
-import { defineProps, computed } from 'vue'
+import { stats } from '~/client'
+import { computed } from 'vue'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { GridComponent, TooltipComponent } from 'echarts/components'
@@ -18,8 +18,6 @@ use([CanvasRenderer, GridComponent, TooltipComponent, BarChart])
 
 const formatHour = (value: number) => `${(value - 0.5).toFixed()}:00-${(value + 0.5).toFixed()}:00`
 
-const props = defineProps<{ status: Payload }>()
-
 const option = computed(() => ({
   tooltip: {
     trigger: 'axis',
@@ -28,7 +26,7 @@ const option = computed(() => ({
     },
     formatter(params) {
       const [{ data: [x], dataIndex, color }] = params
-      const source = props.status.hours[dataIndex]
+      const source = stats.value.hours[dataIndex]
       const output = [
         `${formatHour(x)}`,
         `消息总量：${+source.total.toFixed(1)}`,
@@ -63,23 +61,23 @@ const option = computed(() => ({
   },
   series: [{
     name: '其他',
-    data: props.status.hours.map((val, index) => [index + 0.5, val.total || 0]),
+    data: stats.value.hours.map((val, index) => [index + 0.5, val.total || 0]),
     type: 'bar',
     stack: 1,
     itemStyle: {
       color: 'rgb(255,219,92)',
     },
   }, {
     name: '教学',
-    data: props.status.hours.map((val, index) => [index + 0.5, (val.command || 0) + (val.dialogue || 0)]),
+    data: stats.value.hours.map((val, index) => [index + 0.5, (val.command || 0) + (val.dialogue || 0)]),
     type: 'bar',
     stack: 1,
     itemStyle: {
       color: 'rgb(103,224,227)',
     },
   }, {
     name: '指令',
-    data: props.status.hours.map((val, index) => [index + 0.5, val.command || 0]),
+    data: stats.value.hours.map((val, index) => [index + 0.5, val.command || 0]),
     type: 'bar',
     stack: 1,
     itemStyle: {

packages/plugin-status/client/views/home/index.vue

@@ -1,38 +1,38 @@
 <template>
   <div class="stats-grid basic-stats">
-    <card-numeric title="当前消息频率" icon="paper-plane">{{ upRate }} / min</card-numeric>
+    <card-numeric title="当前消息频率" icon="paper-plane">{{ currentRate }} / min</card-numeric>
     <card-numeric title="近期消息频率" icon="history">{{ recentRate }} / d</card-numeric>
-    <card-numeric title="命名插件数量" icon="plug">{{ status.pluginCount }}</card-numeric>
+    <card-numeric title="命名插件数量" icon="plug">{{ registry.pluginCount }}</card-numeric>
     <card-numeric title="数据库体积" icon="database">456 MB</card-numeric>
     <card-numeric title="活跃用户数量" icon="heart">456</card-numeric>
     <card-numeric title="活跃群数量" icon="users">32</card-numeric>
   </div>
-  <load-chart :status="status"/>
+  <load-chart/>
   <div class="stats-grid chart-stats">
-    <history-chart :status="status"/>
-    <hour-chart :status="status"/>
-    <group-chart :status="status"/>
-    <word-cloud :status="status"/>
+    <history-chart/>
+    <hour-chart/>
+    <group-chart/>
+    <word-cloud/>
   </div>
 </template>
 
 <script setup lang="ts">
 
 import { computed } from 'vue'
-import { status } from '~/client'
+import { stats, profile, registry } from '~/client'
 import CardNumeric from './card-numeric.vue'
 import GroupChart from './group-chart.vue'
 import HistoryChart from './history-chart.vue'
 import HourChart from './hour-chart.vue'
 import LoadChart from './load-chart.vue'
 import WordCloud from './word-cloud.vue'
 
-const upRate = computed(() => {
-  return status.value.bots.reduce((sum, bot) => sum + bot.currentRate[0], 0)
+const currentRate = computed(() => {
+  return profile.value.bots.reduce((sum, bot) => sum + bot.currentRate[0], 0)
 })
 
 const recentRate = computed(() => {
-  return status.value.bots.reduce((sum, bot) => sum + bot.recentRate[0], 0)
+  return Object.values(stats.value.botSend).reduce((sum, value) => sum + value, 0).toFixed(1)
 })
 
 </script>

packages/plugin-status/client/views/home/load-chart.vue

@@ -1,16 +1,13 @@
 <template>
   <k-card class="load-chart" title="负载状态">
-    <load-bar title="CPU" :rate="status.cpu"/>
-    <load-bar title="内存" :rate="status.memory"/>
+    <load-bar title="CPU" :rate="profile.cpu"/>
+    <load-bar title="内存" :rate="profile.memory"/>
   </k-card>
 </template>
 
 <script setup lang="ts">
 
 import LoadBar from './load-bar.vue'
-import type { Payload } from '~/server'
-import { defineProps } from 'vue'
-
-defineProps<{ status: Payload }>()
+import { profile } from '~/client'
 
 </script>

packages/plugin-status/client/views/home/word-cloud.vue

@@ -1,5 +1,5 @@
 <template>
-  <k-card class="frameless word-cloud" v-if="status.questions">
+  <k-card class="frameless word-cloud" v-if="stats.questions">
     <template #header>
       问答日均触发次数
       <el-button class="refresh" @click="refresh" type="text">刷新</el-button>
@@ -13,8 +13,8 @@
 
 <script lang="ts" setup>
 
-import type { Payload } from '~/server'
-import { defineProps, computed, ref } from 'vue'
+import { stats } from '~/client'
+import { computed, ref } from 'vue'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { TooltipComponent } from 'echarts/components'
@@ -23,12 +23,10 @@ import 'echarts-wordcloud'
 
 use([CanvasRenderer, TooltipComponent])
 
-const props = defineProps<{ status: Payload }>()
-
-const questions = ref(props.status.questions)
+const questions = ref(stats.value.questions)
 
 function refresh() {
-  questions.value = props.status.questions
+  questions.value = stats.value.questions
 }
 
 const option = computed(() => ({

packages/plugin-status/client/views/layout/index.vue

@@ -4,20 +4,21 @@
     <sidebar/>
   </template>
   <main :class="{ frameless }">
-    <router-view v-if="status"/>
+    <router-view v-if="loaded"/>
   </main>
 </template>
 
 <script lang="ts" setup>
 
-import { status } from '~/client'
+import * as client from '~/client'
 import Navbar from './navbar.vue'
 import Sidebar from './sidebar.vue'
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 
 const route = useRoute()
 const frameless = computed(() => route.meta.frameless)
+const loaded = computed(() => (route.meta.require || []).every((key) => client[key].value))
 
 </script>
 

packages/plugin-status/client/views/plugins/index.vue

@@ -1,14 +1,14 @@
 <template>
   <k-card title="插件列表">
     <ul class="plugin-list">
-      <plugin-view :data="data" v-for="(data, index) in status.plugins" :key="index"/>
+      <plugin-view :data="data" v-for="(data, index) in registry.plugins" :key="index"/>
     </ul>
   </k-card>
 </template>
 
 <script setup lang="ts">
 
 import PluginView from './plugin-view.vue'
-import { status } from '~/client'
+import { registry } from '~/client'
 
 </script>