feat(status): auto adapted load bar

koishijs · Mar 9, 2021 · 2c91f87 · 2c91f87
1 parent 1f8b1ad
commit 2c91f87
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 39 deletions.
diff --git a/packages/plugin-status/client/app.vue b/packages/plugin-status/client/app.vue
@@ -1,7 +1,8 @@
 <template>
   <template v-if="status">
     <el-card header="负载状态" shadow="hover">
-      <load-bar :status="status"/>
+      <load-bar title="CPU" :rate="status.cpu"/>
+      <load-bar title="内存" :rate="status.memory"/>
     </el-card>
     <bot-table :bots="status.bots"/>
     <el-card header="插件列表" shadow="hover">

diff --git a/packages/plugin-status/client/components/load-bar.vue b/packages/plugin-status/client/components/load-bar.vue
@@ -1,31 +1,35 @@
 <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) }}%
+  <div class="load">
+    <span class="title">{{ title }}</span>
+    <span class="body" :class="mainly">
+      <span class="used bar" :style="{ width: percentage(rate[1] - rate[0]) }">
+        <span class="caption">{{ caption }}</span>
       </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>
+      <span class="app bar" :style="{ width: percentage(rate[0]) }"/>
+      <span class="caption">{{ caption }}</span>
+    </span>
   </div>
 </template>
 
-<script>
+<script lang="ts" setup>
+
+import type { Rate } from '@/server'
+import { defineProps, computed } from 'vue'
+
+const { rate, title } = defineProps<{ rate: Rate, title: string }>()
 
-export default {
-  props: ['status'],
+function percentage(value: number, digits = 3) {
+  return (value * 100).toFixed(digits) + '%'
 }
 
+const mainly = computed(() => {
+  return 1 + rate[0] > 2 * rate[1] ? 'free' : 'busy'
+})
+
+const caption = computed(() => {
+  return `${percentage(rate[0], 1)} / ${percentage(rate[1], 1)}`
+})
+
 </script>
 
 <style lang="scss">
@@ -36,46 +40,53 @@ export default {
   display: flex;
   align-items: center;
   user-select: none;
-  .type {
+
+  .title {
     min-width: 3rem;
   }
-  .bar {
+
+  .body {
     width: 100%;
     height: 1.6rem;
     position: relative;
     display: inline;
     background-color: #f6f8fa;
-    line-height: 1.6;
-    > * {
-      height: 100%;
-      position: relative;
-      float: left;
-      transition: 0.6s ease;
-    };
-    > *:hover {
+    &.busy > .caption, &.free .used > .caption {
+      display: none;
+    }
+  }
+
+  .bar {
+    height: 100%;
+    position: relative;
+    float: left;
+    transition: 0.6s 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;
+
+  .caption {
+    left: 0.6rem;
+    line-height: 1.7;
+    position: relative;
   }
 }