feat(status): move webui into status

packages/plugin-status/client/app.vue

@@ -0,0 +1,55 @@
+<template>
+  <el-card v-if="status" header="负载">
+    <load-bar :status="status"/>
+  </el-card>
+  <el-card v-if="status" header="插件">
+    <ul class="plugin-list">
+      <plugin-view :data="data" v-for="(data, index) in status.plugins" :key="index"/>
+    </ul>
+  </el-card>
+</template>
+
+<script setup lang="ts">
+
+import { onMounted, ref } from 'vue'
+import PluginView from './components/plugin-view.vue'
+import LoadBar from './components/load-bar.vue'
+
+interface PluginData {
+  name: string
+  disposable: boolean
+  children: PluginData[]
+}
+
+interface Status {
+  plugins: PluginData[]
+}
+
+const status = ref<Status>(null)
+
+if (import.meta.hot) {
+  import.meta.hot.on('update', (data) => {
+    console.log('update', data)
+  })
+}
+
+onMounted(async () => {
+  const res = await fetch(KOISHI_SERVER + '/_')
+  const data = await res.json()
+  status.value = data
+  console.log('fetch', data)
+})
+
+</script>
+
+<style lang="scss">
+
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+
+</style>

packages/plugin-status/client/components/load-bar.vue

@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <div class="load">
+      <span class="type">CPU</span>
+      <span class="bar">
+        <span class="used" :style="{ width: (status.cpu[1] - status.cpu[0]) * 100 + '%' }"/>
+        <span class="app" :style="{ width: status.cpu[0] * 100 + '%' }"/>
+        &nbsp;&nbsp;{{ (status.cpu[0] * 100).toFixed(1) }}% / {{ (status.cpu[1] * 100).toFixed(1) }}%
+      </span>
+    </div>
+    <div class="load">
+      <span class="type">内存</span>
+      <span class="bar">
+        <span class="used" :style="{ width: (status.memory[1] - status.memory[0]) * 100 + '%' }">
+          &nbsp;&nbsp;{{ (status.memory[0] * 100).toFixed(1) }}% / {{ (status.memory[1] * 100).toFixed(1) }}%
+        </span>
+        <span class="app" :style="{ width: status.memory[0] * 100 + '%' }"/>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  props: ['status'],
+}
+
+</script>
+
+<style lang="scss">
+
+.load {
+  margin: 1rem 0;
+  padding: 0 2rem;
+  display: flex;
+  align-items: center;
+  user-select: none;
+  .type {
+    min-width: 3rem;
+  }
+  .bar {
+    width: 100%;
+    height: 1.6rem;
+    position: relative;
+    display: inline;
+    background-color: #f6f8fa;
+    line-height: 1.6;
+    > * {
+      height: 100%;
+      position: relative;
+      float: left;
+      transition: 0.3s ease;
+    };
+    > *:hover {
+      z-index: 10;
+      cursor: pointer;
+      box-shadow: 0 0 4px #000c;
+    };
+  }
+  .used {
+    background-color: rgb(50,197,233);
+    color: white;
+    &:hover {
+      background-color: rgb(55,216,255);
+    };
+  }
+  .app {
+    background-color: rgb(255,159,127);
+    &:hover {
+      background-color: rgb(255,174,139);
+    };
+  }
+  &:first-of-type {
+    margin-top: 2rem;
+  }
+  &:last-of-type {
+    margin-bottom: 2rem;
+  }
+}
+
+</style>

packages/plugin-status/client/global.d.ts

@@ -0,0 +1,9 @@
+// I don't know why do I need this
+// this should be provided by vue
+
+declare module '*.vue' {
+  import { Component } from 'vue'
+
+  const component: Component
+  export default component
+}

packages/plugin-status/package.json

@@ -28,12 +28,19 @@
     "status"
   ],
   "peerDependencies": {
-    "koishi-core": "^3.0.1",
-    "koishi-utils": "^4.0.1"
+    "koishi-core": "^3.0.1"
   },
   "devDependencies": {
     "koishi-plugin-mongo": "^2.0.0-beta.8",
     "koishi-plugin-mysql": "^3.0.0-beta.16",
     "koishi-test-utils": "^6.0.0-beta.10"
+  },
+  "dependencies": {
+    "@vitejs/plugin-vue": "^1.1.5",
+    "@vue/compiler-sfc": "^3.0.7",
+    "element-plus": "^1.0.2-beta.33",
+    "sass": "^1.32.8",
+    "vite": "^2.0.5",
+    "vue": "^3.0.7"
   }
 }

packages/plugin-status/src/index.ts → packages/plugin-status/server/index.ts

@@ -1,4 +1,4 @@
-import { Context, App, Bot, Platform } from 'koishi-core'
+import { Context, App, Argv, Bot, Platform } from 'koishi-core'
 import { cpus, totalmem, freemem } from 'os'
 import { interpolate, Time } from 'koishi-utils'
 import { ActiveData } from './database'
@@ -9,6 +9,24 @@ declare module 'koishi-core' {
   interface Bot {
     counter: number[]
   }
+
+  interface App {
+    startTime: number
+    getStatus(): Promise<BaseStatus>
+  }
+}
+
+App.prototype.getStatus = async function (this: App) {
+  const bots = await Promise.all(this.bots.map(async (bot): Promise<BotStatus> => ({
+    platform: bot.platform,
+    selfId: bot.selfId,
+    username: bot.username,
+    code: await bot.getStatus(),
+    rate: bot.counter.slice(1).reduce((prev, curr) => prev + curr, 0),
+  })))
+  const memory = memoryRate()
+  const cpu: Rate = [appRate, usedRate]
+  return { bots, memory, cpu, startTime: this.startTime }
 }
 
 export interface Config {
@@ -22,12 +40,9 @@ let usage = getCpuUsage()
 let appRate: number
 let usedRate: number
 
-function memoryRate() {
+function memoryRate(): Rate {
   const totalMemory = totalmem()
-  return {
-    app: process.memoryUsage().rss / totalMemory,
-    total: 1 - freemem() / totalMemory,
-  }
+  return [process.memoryUsage().rss / totalMemory, 1 - freemem() / totalMemory]
 }
 
 function getCpuUsage() {
@@ -57,19 +72,19 @@ function updateCpuUsage() {
   usage = newUsage
 }
 
-export interface Rate {
-  app: number
-  total: number
-}
+export type Rate = [app: number, total: number]
 
-export interface Status extends ActiveData {
+export interface BaseStatus {
   bots: BotStatus[]
   memory: Rate
   cpu: Rate
-  timestamp: number
   startTime: number
 }
 
+export interface Status extends BaseStatus, ActiveData {
+  timestamp: number
+}
+
 export interface BotStatus {
   username?: string
   selfId: string
@@ -85,6 +100,11 @@ export function extend(callback: StatusCallback) {
   callbacks.push(callback)
 }
 
+extend(async function (status) {
+  if (!this.database) return
+  Object.assign(status, this.database.getActiveData())
+})
+
 const defaultConfig: Config = {
   path: '/status',
   refresh: Time.minute,
@@ -107,18 +127,17 @@ export function apply(ctx: Context, config: Config = {}) {
   const all = ctx.all()
   const { refresh, formatBot, format } = { ...defaultConfig, ...config }
 
-  all.before('command', ({ session }) => {
-    session.user['lastCall'] = new Date()
+  all.on('command', ({ session }: Argv<'lastCall'>) => {
+    session.user.lastCall = new Date()
   })
 
   all.before('send', (session) => {
     session.bot.counter[0] += 1
   })
 
-  let startTime: number
   let timer: NodeJS.Timeout
   ctx.on('connect', async () => {
-    startTime = Date.now()
+    ctx.app.startTime = Date.now()
 
     ctx.bots.forEach((bot) => {
       bot.counter = new Array(61).fill(0)
@@ -171,21 +190,9 @@ export function apply(ctx: Context, config: Config = {}) {
     })
 
   async function _getStatus() {
-    const botList = all.bots
-    const [data, bots] = await Promise.all([
-      all.database.getActiveData(),
-      Promise.all(botList.map(async (bot): Promise<BotStatus> => ({
-        platform: bot.platform,
-        selfId: bot.selfId,
-        username: bot.username,
-        code: await bot.getStatus(),
-        rate: bot.counter.slice(1).reduce((prev, curr) => prev + curr, 0),
-      }))),
-    ])
-    const memory = memoryRate()
-    const cpu = { app: appRate, total: usedRate }
-    const status: Status = { ...data, bots, memory, cpu, timestamp, startTime }
-    await Promise.all(callbacks.map(callback => callback.call(all, status, config)))
+    const status = await ctx.app.getStatus() as Status
+    await Promise.all(callbacks.map(callback => callback.call(ctx.app, status, config)))
+    status.timestamp = timestamp
     return status
   }
 

packages/plugin-status/tsconfig.json

@@ -2,9 +2,9 @@
   "extends": "../../tsconfig.base",
   "compilerOptions": {
     "outDir": "dist",
-    "rootDir": "src",
+    "rootDir": "server",
   },
   "include": [
-    "src",
+    "server",
   ],
 }