feat(status): adding bot data

package.json

@@ -57,7 +57,7 @@
     "cross-env": "^7.0.3",
     "cross-spawn": "^7.0.3",
     "del": "^6.0.0",
-    "esbuild": "^0.8.55",
+    "esbuild": "^0.8.57",
     "eslint": "^7.21.0",
     "eslint-config-standard": "^16.0.2",
     "eslint-import-resolver-typescript": "^2.4.0",

packages/plugin-status/client/app.vue

@@ -1,31 +1,26 @@
 <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 v-if="status">
+    <el-card header="负载状态" shadow="hover">
+      <load-bar :status="status"/>
+    </el-card>
+    <bot-table :bots="status.bots"/>
+    <el-card header="插件列表" shadow="hover">
+      <ul class="plugin-list">
+        <plugin-view :data="data" v-for="(data, index) in status.plugins" :key="index"/>
+      </ul>
+    </el-card>
+  </template>
 </template>
 
 <script setup lang="ts">
 
 import { onMounted, ref } from 'vue'
-import PluginView from './components/plugin-view.vue'
+import type { Payload } from '@/server'
 import LoadBar from './components/load-bar.vue'
+import BotTable from './components/bot-table.vue'
+import PluginView from './components/plugin-view.vue'
 
-interface PluginData {
-  name: string
-  disposable: boolean
-  children: PluginData[]
-}
-
-interface Status {
-  plugins: PluginData[]
-}
-
-const status = ref<Status>(null)
+const status = ref<Payload>(null)
 
 onMounted(async () => {
   const socket = new WebSocket(KOISHI_ENDPOINT)
@@ -42,12 +37,15 @@ onMounted(async () => {
 
 <style lang="scss">
 
+body {
+  padding: 0;
+}
+
 #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/bot-table.vue

@@ -0,0 +1,56 @@
+<template>
+  <el-card class="bot-table" header="账号数据" shadow="hover">
+    <table>
+      <tr>
+        <th>账号信息</th>
+        <th>消息频率</th>
+      </tr>
+      <tr v-for="(bot, index) in bots" :key="index">
+        <td>{{ bot.username }} ({{ bot.platform }}:{{ bot.selfId }})</td>
+        <td>{{ bot.rate }} ↑ / {{ bot.rate }} ↓</td>
+      </tr>
+    </table>
+  </el-card>
+</template>
+
+<script lang="ts" setup>
+
+import type { BotData } from '@/server'
+import { defineProps } from 'vue'
+
+const { bots } = defineProps<{ bots: BotData[] }>()
+
+</script>
+
+<style lang="scss">
+
+.bot-table {
+  .el-card__body {
+    padding: 0;
+  }
+
+  table {
+    text-align: center;
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  tr {
+    transition: 0.3s ease;
+  }
+
+  tr:hover {
+    background-color: #f6f8fa;
+  }
+
+  td, th {
+    padding: .6em 1em;
+    border-bottom: 1px solid #ebeef5;
+  }
+
+  tr:last-child td {
+    border-bottom: none;
+  }
+}
+
+</style>

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

@@ -7,3 +7,9 @@ declare module '*.vue' {
   const component: Component
   export default component
 }
+
+declare module '@/server' {
+  export * from 'koishi-plugin-status/server/webui'
+}
+
+declare const KOISHI_ENDPOINT: string

packages/plugin-status/client/index.scss

@@ -12,8 +12,8 @@ $warning: #E6A23C;
 
 .el-card {
   max-width: 960px;
-  margin: 0 auto;
-  border-radius: 1rem;
+  margin: 2rem auto;
+  border-radius: 6px;
 
   .el-card__header {
     font-size: 1.25rem;

packages/plugin-status/package.json

@@ -28,7 +28,7 @@
     "status"
   ],
   "peerDependencies": {
-    "koishi-core": "^3.1.0",
+    "koishi-core": "^3.1.0"
   },
   "devDependencies": {
     "koishi-plugin-mongo": "^2.0.0-beta.8",

packages/plugin-status/server/webui.ts

@@ -6,6 +6,8 @@ import WebSocket from 'ws'
 import vuePlugin from '@vitejs/plugin-vue'
 import Profile from './profile'
 
+export { BotData, Rate } from './profile'
+
 export interface Config {
   path?: string
   port?: number
@@ -17,6 +19,10 @@ export interface PluginData extends Plugin.Meta {
   dependencies: string[]
 }
 
+export interface Payload extends Profile {
+  plugins: PluginData[]
+}
+
 export const name = 'webui'
 
 export function apply(ctx: Context, config: Config = {}) {