fix(status): optimize layout & support auto scroll, fix #157

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

@@ -54,24 +54,52 @@ const recentRate = computed(() => {
 .chart-stats {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  grid-template-rows: repeat(2, 1fr);
+  grid-template-rows: repeat(2, auto);
   grid-gap: 2rem;
   margin: 2rem 0 4rem;
 
   .echarts {
-    width: 600px;
-    height: 400px;
     max-width: 100%;
     margin: 0 auto -3rem;
   }
 
-  @media screen and (max-width: 1440px) {
+  @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, 1fr);
+    grid-template-rows: repeat(4, auto);
+
+    @media (min-width: 1200px) {
+      .echarts {
+        width: 800px;
+        height: 400px;
+      }
+    }
 
-    .echarts {
-      width: 800px;
-      height: 400px;
+    @media (max-width: 1200px) {
+      .echarts {
+        width: 720px;
+        height: 400px;
+      }
     }
   }
 }

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

@@ -61,4 +61,22 @@ main.frameless {
   transform: translateY(-50%);
 }
 
+::-webkit-scrollbar {
+  height: 100%;
+  width: 0.6rem;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 0.6rem;
+  background: #fff4;
+  &:hover {
+    background: #fff8;
+  }
+}
+
+::-webkit-scrollbar-track {
+  border-radius: 0.6rem;
+  box-shadow: inset 0 0 6px #000b;
+}
+
 </style>

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

@@ -1,6 +1,6 @@
 <template>
   <k-card class="sandbox">
-    <div class="history">
+    <div class="history" ref="panel">
       <p v-for="({ from, content }, index) in messages" :key="index" :class="from">
         {{ content }}
       </p>
@@ -11,7 +11,7 @@
 
 <script lang="ts" setup>
 
-import { ref, reactive } from 'vue'
+import { ref, reactive, nextTick } from 'vue'
 import { send, receive, user } from '~/client'
 
 interface Message {
@@ -20,18 +20,31 @@ interface Message {
 }
 
 const text = ref('')
+const panel = ref<Element>(null)
 const messages = reactive<Message[]>([])
 
+function addMessage(from: 'user' | 'bot', content: string) {
+  messages.push({ from, content })
+  const { scrollTop, clientHeight, scrollHeight } = panel.value
+  if (Math.abs(scrollTop + clientHeight - scrollHeight) < 1) {
+    nextTick(scrollToBottom)
+  }
+}
+
+function scrollToBottom() {
+  panel.value.scrollTop = panel.value.scrollHeight - panel.value.clientHeight
+}
+
 function onEnter() {
   if (!text.value) return
-  messages.push({ from: 'user', content: text.value })
+  addMessage('user', text.value)
   const { token, id } = user.value
   send('sandbox', { token, id, content: text.value })
   text.value = ''
 }
 
 receive('sandbox', (data) => {
-  messages.push({ from: 'bot', content: data })
+  addMessage('bot', data)
 })
 
 </script>

packages/plugin-status/server/profile.ts

@@ -51,18 +51,18 @@ export interface BotData {
   currentRate: MessageRate
 }
 
-export namespace BotData {
-  function accumulate(record: number[]) {
-    return record.slice(1).reduce((prev, curr) => prev + curr, 0)
-  }
+function accumulate(record: number[]) {
+  return record.slice(1).reduce((prev, curr) => prev + curr, 0)
+}
 
-  export const from = async (bot: Bot) => ({
+export async function BotData(bot: Bot) {
+  return {
     platform: bot.platform,
     selfId: bot.selfId,
     username: bot.username,
     code: await bot.getStatus(),
     currentRate: [accumulate(bot.messageSent), accumulate(bot.messageReceived)],
-  } as BotData)
+  } as BotData
 }
 
 export interface Profile extends Profile.Meta {
@@ -88,7 +88,7 @@ export namespace Profile {
   export async function get(ctx: Context, config: Config) {
     const [memory, bots] = await Promise.all([
       memoryRate(),
-      Promise.all(ctx.bots.map(BotData.from)),
+      Promise.all(ctx.bots.filter(bot => bot.platform !== 'sandbox').map(BotData)),
     ])
     const cpu: LoadRate = [appRate, usedRate]
     return { bots, memory, cpu, ...await getMeta(ctx, config) } as Profile