From d17428e25b82248e0ff428554da25d3db30a4659 Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Thu, 18 Mar 2021 12:14:54 +0800
Subject: [PATCH] feat(status): separate payload into 3 parts

---
 packages/plugin-status/client/index.ts        | 15 ++---
 packages/plugin-status/client/main.ts         |  7 ++-
 packages/plugin-status/client/views/bots.vue  | 16 +++---
 .../client/views/home/group-chart.vue         | 10 ++--
 .../client/views/home/history-chart.vue       | 12 ++--
 .../client/views/home/hour-chart.vue          | 14 ++---
 .../plugin-status/client/views/home/index.vue | 22 ++++----
 .../client/views/home/load-chart.vue          |  9 +--
 .../client/views/home/word-cloud.vue          | 12 ++--
 .../client/views/layout/index.vue             |  5 +-
 .../client/views/plugins/index.vue            |  4 +-
 packages/plugin-status/server/index.ts        | 41 ++++----------
 packages/plugin-status/server/mongo.ts        |  2 +-
 packages/plugin-status/server/mysql.ts        |  2 +-
 packages/plugin-status/server/profile.ts      | 32 ++++++++---
 packages/plugin-status/server/stats.ts        | 25 ++++-----
 packages/plugin-status/server/webui.ts        | 55 +++++++++----------
 17 files changed, 132 insertions(+), 151 deletions(-)

diff --git a/packages/plugin-status/client/index.ts b/packages/plugin-status/client/index.ts
index 4feb9761e6..12f09ac28a 100644
--- a/packages/plugin-status/client/index.ts
+++ b/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) {
diff --git a/packages/plugin-status/client/main.ts b/packages/plugin-status/client/main.ts
index 4e616b9aea..b95ed8a4a1 100644
--- a/packages/plugin-status/client/main.ts
+++ b/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',
diff --git a/packages/plugin-status/client/views/bots.vue b/packages/plugin-status/client/views/bots.vue
index 97e101a098..4b1b3da842 100644
--- a/packages/plugin-status/client/views/bots.vue
+++ b/packages/plugin-status/client/views/bots.vue
@@ -1,6 +1,6 @@
 <template>
   <k-card class="bot-table" title="账号数据">
-    <table v-if="status.bots.length">
+    <table v-if="profile.bots.length">
       <tr>
         <th>平台名</th>
         <th>用户名</th>
@@ -8,12 +8,12 @@
         <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 = ['运行中', '闲置', '离线', '网络异常', '服务器异常', '封禁中', '尝试连接']
 
diff --git a/packages/plugin-status/client/views/home/group-chart.vue b/packages/plugin-status/client/views/home/group-chart.vue
index 427d3c4424..efbda0ffff 100644
--- a/packages/plugin-status/client/views/home/group-chart.vue
+++ b/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,
   }],
diff --git a/packages/plugin-status/client/views/home/history-chart.vue b/packages/plugin-status/client/views/home/history-chart.vue
index e000c956fb..f106537bc3 100644
--- a/packages/plugin-status/client/views/home/history-chart.vue
+++ b/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(),
   },
 }))
 
diff --git a/packages/plugin-status/client/views/home/hour-chart.vue b/packages/plugin-status/client/views/home/hour-chart.vue
index 211abccd06..0d53de18fe 100644
--- a/packages/plugin-status/client/views/home/hour-chart.vue
+++ b/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,7 +61,7 @@ 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: {
@@ -71,7 +69,7 @@ const option = computed(() => ({
     },
   }, {
     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: {
@@ -79,7 +77,7 @@ const option = computed(() => ({
     },
   }, {
     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: {
diff --git a/packages/plugin-status/client/views/home/index.vue b/packages/plugin-status/client/views/home/index.vue
index 48b4104c1f..f1928dda23 100644
--- a/packages/plugin-status/client/views/home/index.vue
+++ b/packages/plugin-status/client/views/home/index.vue
@@ -1,25 +1,25 @@
 <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'
@@ -27,12 +27,12 @@ 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>
diff --git a/packages/plugin-status/client/views/home/load-chart.vue b/packages/plugin-status/client/views/home/load-chart.vue
index d792557ef2..82533f02ff 100644
--- a/packages/plugin-status/client/views/home/load-chart.vue
+++ b/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>
diff --git a/packages/plugin-status/client/views/home/word-cloud.vue b/packages/plugin-status/client/views/home/word-cloud.vue
index 9f0c338678..917d40e357 100644
--- a/packages/plugin-status/client/views/home/word-cloud.vue
+++ b/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(() => ({
diff --git a/packages/plugin-status/client/views/layout/index.vue b/packages/plugin-status/client/views/layout/index.vue
index 923323fd0a..a49a6f45e3 100644
--- a/packages/plugin-status/client/views/layout/index.vue
+++ b/packages/plugin-status/client/views/layout/index.vue
@@ -4,13 +4,13 @@
     <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'
@@ -18,6 +18,7 @@ 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>
 
diff --git a/packages/plugin-status/client/views/plugins/index.vue b/packages/plugin-status/client/views/plugins/index.vue
index da283f8040..160b5e198b 100644
--- a/packages/plugin-status/client/views/plugins/index.vue
+++ b/packages/plugin-status/client/views/plugins/index.vue
@@ -1,7 +1,7 @@
 <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>
@@ -9,6 +9,6 @@
 <script setup lang="ts">
 
 import PluginView from './plugin-view.vue'
-import { status } from '~/client'
+import { registry } from '~/client'
 
 </script>
diff --git a/packages/plugin-status/server/index.ts b/packages/plugin-status/server/index.ts
index 82549e5d2b..83b1f00577 100644
--- a/packages/plugin-status/server/index.ts
+++ b/packages/plugin-status/server/index.ts
@@ -8,13 +8,6 @@ import { WebBot } from './adapter'
 import './mongo'
 import './mysql'
 
-export interface ActiveData {
-  allUsers: number
-  activeUsers: number
-  allGroups: number
-  activeGroups: number
-}
-
 export type Activity = Record<number, number>
 
 declare module 'koishi-core' {
@@ -23,7 +16,7 @@ declare module 'koishi-core' {
   }
 
   interface Database {
-    getActiveData(): Promise<ActiveData>
+    getProfile(): Promise<Profile.Meta>
     setChannels(data: Partial<Channel>[]): Promise<void>
     Synchronizer: new (db: Database) => Synchronizer
   }
@@ -69,15 +62,11 @@ User.extend(() => ({
 }))
 
 export interface Config extends WebUI.Config {
-  refresh?: number
   format?: string
   formatBot?: string
 }
 
-export interface Status extends Profile, ActiveData {
-  timestamp: number
-  startTime: number
-}
+export interface Status extends Profile {}
 
 type StatusCallback = (this: App, status: Status, config: Config) => void | Promise<void>
 const callbacks: StatusCallback[] = []
@@ -88,13 +77,14 @@ export function extend(callback: StatusCallback) {
 
 extend(async function (status) {
   if (!this.database) return
-  Object.assign(status, await this.database.getActiveData())
+  Object.assign(status, await this.database.getProfile())
 })
 
 const defaultConfig: Config = {
   path: '/status',
   expiration: Time.week,
-  refresh: Time.minute,
+  tickInterval: Time.second * 5,
+  refreshInterval: Time.hour,
   // eslint-disable-next-line no-template-curly-in-string
   formatBot: '{{ username }}：{{ code ? `无法连接` : `工作中（${currentRate[0]}/min）` }}',
   format: [
@@ -111,7 +101,7 @@ export const name = 'status'
 
 export function apply(ctx: Context, config: Config = {}) {
   config = Object.assign(defaultConfig, config)
-  const { path, refresh, formatBot, format } = config
+  const { path, formatBot, format } = config
 
   ctx.all().on('command', ({ session }: Argv<'lastCall'>) => {
     session.user.lastCall = new Date()
@@ -143,24 +133,13 @@ export function apply(ctx: Context, config: Config = {}) {
       return interpolate(format, status)
     })
 
-  async function _getStatus() {
-    const status = await Profile.from(ctx) as Status
+  async function getStatus() {
+    const status = await Profile.get(ctx, config) as Status
     await Promise.all(callbacks.map(callback => callback.call(ctx.app, status, config)))
-    status.timestamp = timestamp
     return status
   }
 
-  let cachedStatus: Promise<Status>
-  let timestamp: number
-
-  async function getStatus(): Promise<Status> {
-    const now = Date.now()
-    if (now - timestamp < refresh) return cachedStatus
-    timestamp = now
-    return cachedStatus = _getStatus()
-  }
-
-  ctx.plugin(Profile)
-  ctx.plugin(Statistics)
+  ctx.plugin(Profile, config)
+  ctx.plugin(Statistics, config)
   if (config.port) ctx.plugin(WebUI, config)
 }
diff --git a/packages/plugin-status/server/mongo.ts b/packages/plugin-status/server/mongo.ts
index f34ecb675e..e834ead44f 100644
--- a/packages/plugin-status/server/mongo.ts
+++ b/packages/plugin-status/server/mongo.ts
@@ -2,7 +2,7 @@ import { Database } from 'koishi-core'
 import {} from 'koishi-plugin-mongo'
 
 Database.extend('koishi-plugin-mongo', {
-  async getActiveData() {
+  async getProfile() {
     const $gt = new Date(new Date().getTime() - 1000 * 3600 * 24)
     const [allGroups, activeGroups, allUsers, activeUsers] = await Promise.all([
       this.channel.countDocuments(),
diff --git a/packages/plugin-status/server/mysql.ts b/packages/plugin-status/server/mysql.ts
index 34a7deab27..069f7094b8 100644
--- a/packages/plugin-status/server/mysql.ts
+++ b/packages/plugin-status/server/mysql.ts
@@ -109,7 +109,7 @@ namespace Stat {
 }
 
 Database.extend('koishi-plugin-mysql', {
-  async getActiveData() {
+  async getProfile() {
     const [[{ activeUsers }], [{ allUsers }], [{ activeGroups }], [{ allGroups }]] = await this.query([
       'SELECT COUNT(*) as activeUsers FROM `user` WHERE CURRENT_TIMESTAMP() - `lastCall` < 1000 * 3600 * 24',
       'SELECT COUNT(*) as allUsers FROM `user`',
diff --git a/packages/plugin-status/server/profile.ts b/packages/plugin-status/server/profile.ts
index 9c4112a99b..ba6f5e0362 100644
--- a/packages/plugin-status/server/profile.ts
+++ b/packages/plugin-status/server/profile.ts
@@ -1,5 +1,4 @@
 import { Bot, Context, Platform } from 'koishi-core'
-import { Time } from 'koishi-utils'
 import { cpus } from 'os'
 import { mem } from 'systeminformation'
 
@@ -50,7 +49,6 @@ export interface BotData {
   platform: Platform
   code: Bot.Status
   currentRate: MessageRate
-  recentRate?: MessageRate
 }
 
 export namespace BotData {
@@ -67,7 +65,7 @@ export namespace BotData {
   } as BotData)
 }
 
-export interface Profile {
+export interface Profile extends Profile.Meta {
   bots: BotData[]
   memory: LoadRate
   cpu: LoadRate
@@ -75,16 +73,34 @@ export interface Profile {
 
 export namespace Profile {
   export interface Config {
-    tick?: number
+    tickInterval?: number
+    refreshInterval?: number
   }
 
-  export async function from(ctx: Context) {
+  export interface Meta {
+    allUsers: number
+    activeUsers: number
+    allGroups: number
+    activeGroups: number
+  }
+
+  export async function get(ctx: Context, config: Config) {
     const [memory, bots] = await Promise.all([
       memoryRate(),
       Promise.all(ctx.bots.map(BotData.from)),
     ])
     const cpu: LoadRate = [appRate, usedRate]
-    return { bots, memory, cpu } as Profile
+    return { bots, memory, cpu, ...await getMeta(ctx, config) } as Profile
+  }
+
+  let timestamp = 0
+  let cachedMeta: Promise<Meta>
+
+  async function getMeta(ctx: Context, config: Config) {
+    const next = Date.now() + config.refreshInterval
+    if (timestamp > next) return cachedMeta
+    timestamp = next
+    return cachedMeta = ctx.database.getProfile()
   }
 
   export function initBot(bot: Bot) {
@@ -93,7 +109,7 @@ export namespace Profile {
   }
 
   export function apply(ctx: Context, config: Config = {}) {
-    const { tick = 5 * Time.second } = config
+    const { tickInterval } = config
 
     ctx.all().before('send', (session) => {
       session.bot.messageSent[0] += 1
@@ -115,7 +131,7 @@ export namespace Profile {
           messageReceived.splice(-1, 1)
         })
         ctx.emit('status/tick')
-      }, tick)
+      }, tickInterval)
     })
   }
 }
diff --git a/packages/plugin-status/server/stats.ts b/packages/plugin-status/server/stats.ts
index 87bf45aa82..594a5ed27e 100644
--- a/packages/plugin-status/server/stats.ts
+++ b/packages/plugin-status/server/stats.ts
@@ -1,6 +1,5 @@
 import { Context, Channel, noop, Session, Logger, Bot, Platform, Time } from 'koishi'
 import {} from 'koishi-plugin-teach'
-import Profile from './profile'
 
 export type StatRecord = Record<string, number>
 
@@ -74,6 +73,8 @@ interface Statistics {
   hours: StatRecord[]
   questions: QuestionData[]
   groups: GroupData[]
+  botSend: StatRecord
+  botReceive: StatRecord
 }
 
 const REFRESH_INTERVAL = 60000
@@ -93,7 +94,7 @@ async function upload(sync: Synchronizer, forced = false) {
 
 async function download(ctx: Context, date: Date) {
   const data = await ctx.app.synchronizer.download(date)
-  const extension = data.extension = {} as Statistics
+  const extension = {} as Statistics
   const { daily, hourly, longterm, groups } = data
 
   // history
@@ -102,8 +103,10 @@ async function download(ctx: Context, date: Date) {
     extension.history[stat.time.toLocaleDateString('zh-CN')] = stat.message
   })
 
-  // command
+  // command & bot
   extension.commands = average(daily.map(data => data.command))
+  extension.botSend = average(daily.map(stat => stat.botSend))
+  extension.botReceive = average(daily.map(stat => stat.botReceive))
 
   // group
   const groupSet = new Set<string>()
@@ -173,7 +176,7 @@ async function download(ctx: Context, date: Date) {
     extension.questions = Object.values(questionMap)
   }
 
-  return data
+  return extension
 }
 
 const send = Session.prototype.send
@@ -189,24 +192,16 @@ Session.prototype.send[customTag] = send
 
 namespace Statistics {
   let cachedDate: number
-  let cachedData: Promise<Synchronizer.Data>
+  let cachedData: Promise<Statistics>
 
-  export async function patch(ctx: Context, profile: Profile) {
+  export async function get(ctx: Context) {
     const date = new Date()
     const dateNumber = Time.getDateNumber(date, date.getTimezoneOffset())
     if (dateNumber !== cachedDate) {
       cachedData = download(ctx, date)
       cachedDate = dateNumber
     }
-    const { extension, daily } = await cachedData
-    Object.assign(profile, extension)
-
-    const botSend = average(daily.map(stat => stat.botSend))
-    const botReceive = average(daily.map(stat => stat.botReceive))
-    profile.bots.forEach((bot) => {
-      const sid = `${bot.platform}:${bot.selfId}`
-      bot.recentRate = [botSend[sid] || 0, botReceive[sid] || 0]
-    })
+    return cachedData
   }
 
   export function apply(ctx: Context) {
diff --git a/packages/plugin-status/server/webui.ts b/packages/plugin-status/server/webui.ts
index 6c07d5be23..fc569e5448 100644
--- a/packages/plugin-status/server/webui.ts
+++ b/packages/plugin-status/server/webui.ts
@@ -9,7 +9,7 @@ import Statistics from './stats'
 
 export { BotData, LoadRate } from './profile'
 
-export interface Config extends WebAdapter.Config {
+export interface Config extends WebAdapter.Config, Profile.Config {
   port?: number
   selfUrl?: string
 }
@@ -19,7 +19,9 @@ export interface PluginData extends Plugin.Meta {
   dependencies: string[]
 }
 
-export interface Payload extends Profile, Statistics {
+export { Statistics, Profile }
+
+export interface Registry {
   plugins: PluginData[]
   pluginCount: number
 }
@@ -51,13 +53,13 @@ export function apply(ctx: Context, config: Config = {}) {
     adapter = ctx.app.adapters.sandbox = new WebAdapter(ctx, config)
 
     adapter.server.on('connection', async (socket) => {
-      if (!plugins) updatePlugins()
-      if (!profile) await updateProfile()
-      const data = JSON.stringify({
-        type: 'update',
-        body: { ...profile, plugins, pluginCount },
-      })
-      socket.send(data)
+      function send(type: string, body: any) {
+        socket.send(JSON.stringify({ type, body }))
+      }
+
+      Statistics.get(ctx).then(data => send('stats', data))
+      getProfile().then(data => send('profile', data))
+      send('registry', getRegistry())
     })
 
     await adapter.start()
@@ -79,41 +81,38 @@ export function apply(ctx: Context, config: Config = {}) {
     const children = state.children.flatMap(traverse, 1)
     const { name, sideEffect } = state
     if (!name) return children
-    pluginCount += 1
+    internal.pluginCount += 1
     const dependencies = [...new Set(getDeps(state))]
     return [{ name, sideEffect, children, dependencies }]
   }
 
-  let plugins: PluginData[]
-  let pluginCount: number
-  let profile: Profile
+  let profile: Promise<Profile>
+  let internal: Registry
 
-  async function broadcast(callback: () => void | Promise<void>) {
+  async function broadcast(type: string, body: any) {
     if (!adapter?.server.clients.size) return
-    await callback()
-    const data = JSON.stringify({
-      type: 'update',
-      body: { ...profile, plugins, pluginCount },
-    })
+    const data = JSON.stringify({ type, body })
     adapter.server.clients.forEach((socket) => socket.send(data))
   }
 
-  function updatePlugins() {
-    pluginCount = 0
-    plugins = traverse(null)
+  function getRegistry(forced = false) {
+    if (internal && !forced) return internal
+    internal = { pluginCount: 0 } as Registry
+    internal.plugins = traverse(null)
+    return internal
   }
 
-  async function updateProfile() {
-    profile = await Profile.from(ctx)
-    await Statistics.patch(ctx, profile)
+  function getProfile(forced = false) {
+    if (profile && !forced) return profile
+    return profile = Profile.get(ctx, config)
   }
 
   ctx.on('registry', () => {
-    broadcast(updatePlugins)
+    broadcast('registry', getRegistry(true))
   })
 
-  ctx.on('status/tick', () => {
-    broadcast(updateProfile)
+  ctx.on('status/tick', async () => {
+    broadcast('profile', await getProfile(true))
   })
 
   ctx.before('disconnect', async () => {