feat(status): add teach view

packages/plugin-status/client/components/card.vue

@@ -4,6 +4,9 @@
       <slot name="header">{{ title }}</slot>
     </header>
     <div class="k-card-body"><slot/></div>
+    <footer v-if="$slots.footer">
+      <slot name="footer"></slot>
+    </footer>
   </section>
 </template>
 
@@ -37,6 +40,10 @@ $paddingY: 1.6rem;
     color: rgba(244, 244, 245, .8);
   }
 
+  footer {
+    padding: 0 $paddingY $paddingX;
+  }
+
   .k-card-body {
     padding: $paddingX $paddingY;
     > :first-child {

packages/plugin-status/client/main.ts

@@ -6,6 +6,7 @@ import Card from './components/card.vue'
 import Collapse from './components/collapse.vue'
 import Button from './components/button.vue'
 import Input from './components/input.vue'
+import Numeric from './components/numeric.vue'
 import App from './views/layout/index.vue'
 import { start, user, receive } from '.'
 import * as client from '.'
@@ -55,6 +56,11 @@ const router = createRouter({
     name: '沙盒',
     meta: { icon: 'laptop-code', require: ['user'] },
     component: () => import('./views/sandbox.vue'),
+  }, {
+    path: '/teach',
+    name: '问答',
+    meta: { icon: 'book', require: ['stats', 'profile'] },
+    component: () => import('./views/teach/teach.vue'),
   }, {
     path: '/profile',
     name: '资料',
@@ -69,10 +75,11 @@ const router = createRouter({
 })
 
 app.component('k-card', Card)
+app.component('k-button', Button)
 
 app.component('k-collapse', Collapse)
-app.component('k-button', Button)
 app.component('k-input', Input)
+app.component('k-numeric', Numeric)
 app.component('k-chart', defineAsyncComponent(() => import('./components/echarts')))
 
 app.provide('ecTheme', 'dark-blue')

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

@@ -1,31 +1,28 @@
 <template>
-  <div class="stats-grid basic-stats">
-    <card-numeric title="当前消息频率" icon="paper-plane">{{ currentRate }} / min</card-numeric>
-    <card-numeric title="近期消息频率" icon="history">{{ recentRate }} / d</card-numeric>
-    <card-numeric title="命名插件数量" icon="plug">{{ registry.pluginCount }}</card-numeric>
-    <card-numeric title="数据库体积" icon="database">{{ (profile.storageSize / 1048576).toFixed(1) }} MB</card-numeric>
-    <card-numeric title="活跃用户数量" icon="heart">{{ profile.activeUsers }}</card-numeric>
-    <card-numeric title="活跃群数量" icon="users">{{ profile.activeGroups }}</card-numeric>
+  <div class="card-grid profile-grid">
+    <k-numeric title="当前消息频率" icon="paper-plane">{{ currentRate }} / min</k-numeric>
+    <k-numeric title="近期消息频率" icon="history">{{ recentRate }} / d</k-numeric>
+    <k-numeric title="命名插件数量" icon="plug">{{ registry.pluginCount }}</k-numeric>
+    <k-numeric title="数据库体积" icon="database">{{ (profile.storageSize / 1048576).toFixed(1) }} MB</k-numeric>
+    <k-numeric title="活跃用户数量" icon="heart">{{ profile.activeUsers }}</k-numeric>
+    <k-numeric title="活跃群数量" icon="users">{{ profile.activeGroups }}</k-numeric>
   </div>
   <load-chart/>
-  <div class="stats-grid chart-stats">
+  <div class="card-grid chart-grid">
     <history-chart/>
     <hour-chart/>
     <group-chart/>
-    <word-cloud/>
   </div>
 </template>
 
 <script setup lang="ts">
 
 import { computed } from 'vue'
 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 currentRate = computed(() => {
   return profile.value.bots.reduce((sum, bot) => sum + bot.currentRate[0], 0)
@@ -39,69 +36,4 @@ const recentRate = computed(() => {
 
 <style lang="scss">
 
-.stats-grid .k-card {
-  margin: 0;
-}
-
-.basic-stats {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(2, 1fr);
-  grid-gap: 2rem;
-  margin-bottom: 2rem;
-}
-
-.chart-stats {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-template-rows: repeat(2, auto);
-  grid-gap: 2rem;
-  margin: 2rem 0 4rem;
-
-  .echarts {
-    max-width: 100%;
-    margin: 0 auto -3rem;
-  }
-
-  @media (min-width: 1400px) {
-    grid-template-columns: repeat(2, 1fr);
-    grid-template-rows: repeat(2, auto);
-
-    @media (min-width: 1600px) {
-      .echarts {
-        width: 600px;
-        height: 400px;
-        max-width: 100%;
-        margin: 0 auto -3rem;
-      }
-    }
-
-    @media (max-width: 1600px) {
-      .echarts {
-        width: 480px;
-        height: 360px;
-      }
-    }
-  }
-
-  @media (max-width: 1440px) {
-    grid-template-columns: 1fr;
-    grid-template-rows: repeat(4, auto);
-
-    @media (min-width: 1200px) {
-      .echarts {
-        width: 800px;
-        height: 400px;
-      }
-    }
-
-    @media (max-width: 1200px) {
-      .echarts {
-        width: 720px;
-        height: 400px;
-      }
-    }
-  }
-}
-
 </style>

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

@@ -79,4 +79,71 @@ main.frameless {
   box-shadow: inset 0 0 6px #000b;
 }
 
+.card-grid {
+  display: grid;
+}
+
+.card-grid .k-card {
+  margin: 0;
+}
+
+.profile-grid {
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: auto;
+  grid-gap: 2rem;
+  margin-bottom: 2rem;
+}
+
+.chart-grid {
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, auto);
+  grid-gap: 2rem;
+  margin: 2rem 0 4rem;
+
+  .echarts {
+    max-width: 100%;
+    margin: 0 auto -3rem;
+  }
+
+  @media (min-width: 1400px) {
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, auto);
+
+    @media (min-width: 1600px) {
+      .echarts {
+        width: 600px;
+        height: 400px;
+        max-width: 100%;
+        margin: 0 auto -3rem;
+      }
+    }
+
+    @media (max-width: 1600px) {
+      .echarts {
+        width: 480px;
+        height: 360px;
+      }
+    }
+  }
+
+  @media (max-width: 1440px) {
+    grid-template-columns: 1fr;
+    grid-template-rows: repeat(4, auto);
+
+    @media (min-width: 1200px) {
+      .echarts {
+        width: 800px;
+        height: 400px;
+      }
+    }
+
+    @media (max-width: 1200px) {
+      .echarts {
+        width: 720px;
+        height: 400px;
+      }
+    }
+  }
+}
+
 </style>

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

@@ -0,0 +1,21 @@
+<template>
+  <div class="card-grid profile-grid">
+    <k-numeric title="总问题数量" icon="quote-left">{{ profile.questions }}</k-numeric>
+    <k-numeric title="总问答数量" icon="quote-right">{{ profile.dialogues }}</k-numeric>
+    <k-numeric title="图片服务器" icon="hdd">{{ (profile.assetSize / 1048576).toFixed(1) }} MB</k-numeric>
+  </div>
+  <div class="card-grid chart-grid">
+    <word-cloud/>
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+import { profile } from '~/client'
+import WordCloud from './word-cloud.vue'
+
+</script>
+
+<style lang="scss">
+
+</style>

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

@@ -5,9 +5,9 @@
       <k-button class="refresh" frameless @click="refresh">刷新</k-button>
     </template>
     <k-chart :option="option" autoresize/>
-    <div class="footer">
-      <p>显示的次数为实际触发次数。不考虑重定向问答和指令调用。</p>
-    </div>
+    <template #footer>
+      显示的次数为实际触发次数。不考虑重定向问答和指令调用。
+    </template>
   </k-card>
 </template>